/* 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. */

/* ── 0 · JETONS ── (mesurés sur #0b0d12 / verre ~#191b20 / bulle or ~#202325 : #e9edf5 16:1, #c5cddb 11:1,
   #8b93a3 6,1:1, #ffd479 12:1, #d6e2ff 14:1, #eef5fc 12:1 sur la bulle or, #121416 9,5:1 sur #fec388,
   #3ad07f 9:1, #ff9592 7:1). Les alias --fo-a/b/c et --fo-elev* nourrissent les règles héritées
   (ForumPriveStyle, deux dégradés en ligne) tant qu'elles ne sont pas retokenées : un ambre profond
   (#b36d06 : blanc 5:1) plutôt que l'or plein, sur lequel le blanc ne ferait que 2:1. */
.fo{--fo-fond:#0b0d12;--fo-verre:rgba(255,255,255,.055);--fo-verre2:rgba(255,255,255,.085);--fo-verre3:rgba(255,255,255,.12);--fo-bord:rgba(255,255,255,.10);--fo-lisere:rgba(255,255,255,.22);--fo-filet:rgba(255,255,255,.06);--fo-surface:rgba(20,22,28,.92);--fo-opaque:#12151c;--fo-or:#fec388;--fo-or-txt:#ffd479;--fo-sur-or:#121416;--fo-or-fond:rgba(254,195,136,.12);--fo-txt:#e9edf5;--fo-txt2:#c5cddb;--fo-sourd:#8b93a3;--fo-sourd2:#9aa2b1;--fo-bleute:#d6e2ff;--fo-vert:#3ad07f;--fo-ambre:#ffc53d;--fo-rouge:#ff9592;--fo-lien:#9ec5ff;--fo-txt-msg:14.5px;--fo-a:#b06b02;--fo-b:#b36d06;--fo-c:#56595b;--fo-elev:rgba(255,255,255,.055);--fo-elev2:rgba(255,255,255,.085);--fo-elev3:rgba(255,255,255,.12);--fo-trait:rgba(255,255,255,.06);--fo-trait-fort:rgba(255,255,255,.14);--fo-trait3:rgba(255,255,255,.25);--fo-glace:#d6e2ff;--fo-encre:#121416;--fo-pop:var(--e-pop,cubic-bezier(.17,.89,.32,1.49));--fo-out:var(--e-out,cubic-bezier(0,0,0,1));--fo-in:var(--e-in,cubic-bezier(.3,0,1,1));position:relative;color:var(--fo-txt)}
/* Le fond : les deux halos statiques de .menu-verre (styles.css), plein écran, fixés, sous tout le contenu
   (z-index -1 dans le contexte racine : .fo n'en crée pas). Aucune image, rien qui bouge, jamais
   background-attachment:fixed (ignoré par iOS). */
.fo:not(.fo-sans-fond)::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(120% 60% at 50% -10%,rgba(254,195,136,.14),transparent 60%),radial-gradient(90% 50% at 10% 108%,rgba(74,159,212,.12),transparent 62%),var(--fo-fond)}
body:has(.fo:not(.fo-sans-fond)) .mangabg{display:none!important}
/* Sur un fil, au téléphone, l'en-tête du site s'efface : CSS pur, aucun attribut à nettoyer. BarreForum.poser lit
   alors un rect vide et publie --fo-entete:0px. Pendant la LECTURE de la page, c'est StyleEnteteChat (bas de ce
   fichier) qui le masque : :has() n'agit qu'une fois le fil entièrement lu (saut de 91 px mesuré le 13/10/2026). */
@media (max-width:1023px){body:has(.fo[data-chat]) .entete-app{display:none}}
.fo :is(button,a,textarea,input,select,summary,[tabindex]):focus-visible{outline:2px solid var(--fo-or);outline-offset:2px}
.fo .fo-champ:focus-visible{outline:none}
.fo-verif{color:var(--fo-sourd)}
/* La tuile de verre : fond .055, bord white/10 par ombre interne (aucune bordure : rien ne bouge en
   mise en page), liseré d'un pixel sur l'arête haute. */
.fo-tuile{position:relative;border-radius:20px;background:var(--fo-verre);box-shadow:inset 0 0 0 1px var(--fo-bord)}
.fo-tuile::before,.fo-grp::before,.fo-sujet::before,.fo-parle::before,.fo-qdj::before,.fo-amorce::before,.fo-meilleure-quete::before,.fo-moi-carte::before,.fo-invite-carte::before,.fo-pseudo::before,.fo-sal.fo-sal-colonne::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;border-radius:inherit;background:linear-gradient(90deg,transparent,var(--fo-lisere),transparent);pointer-events:none}
.fo-pseudo-compact::before{content:none}
/* la flamme de la série à côté du pseudo (règle recopiée de ForumSerie : la flamme ne porte plus sa feuille, 19/10/2026) */
.fo-serie-flamme{display:inline-flex;align-items:center;gap:2px;margin-left:6px;padding:1px 6px;border-radius:99px;flex:none;background:rgba(245,166,35,.16);color:#ffd479;font-size:11.5px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.5}
/* Entrée de page (chips, tuiles, rangées : 8 au plus) : jamais sur les bulles, jamais au changement de salon. */
.fo-apparait{animation:foApparait .5s var(--fo-d,0ms) cubic-bezier(.16,.84,.32,1) both}
@keyframes foApparait{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
/* Le squelette : un miroitement de fond, position seule. p.fo-attente reste le message ambre du composeur. */
.fo .fo-attente,.fo .fo-squelette{background:linear-gradient(90deg,rgba(255,255,255,.06),rgba(255,255,255,.14),rgba(255,255,255,.06));background-size:200% 100%;animation:foAttente 1s linear infinite}
@keyframes foAttente{to{background-position:-200% 0}}
.fo p.fo-attente{margin:0;padding:8px 14px 0;background:none;animation:none;font-size:12.5px;line-height:1.45;color:var(--fo-ambre);font-variant-numeric:tabular-nums}
.fo p.fo-attente b{font-weight:800}
.fo-annonce{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── 1 · LA PAGE ── colonne au téléphone ; grille rail + contenu à partir de 1024 px. Le body garde
   padding-bottom 3.75rem + safe-area (barre du site) : la page occupe au moins ce qui reste. */
/* LA PLACE DU BOUTON FLOTTANT SE RESERVE EN BAS DE PAGE (21/09/2026). Elle etait posee sous la
   LISTE des salons : quand tout est replie, la liste est courte et ces 84 px devenaient un trou
   au milieu de la page — pendant que le bouton, lui, recouvrait le bloc « lancer une conversation »
   qui vient apres. Reservee ici, elle protege ce qui finit vraiment la page. */
.fo-page{display:flex;flex-direction:column;max-width:820px;min-height:calc(100dvh - 3.75rem);margin:0 auto;padding:0 12px 84px}
@media (min-width:640px){.fo-page{padding-left:20px;padding-right:20px}}
/* Pas de pied de page SEO sous une conversation (mesuré : 2 000 px de pied pris pour un trou) ; il reste
   sur l'accueil, qui se déclare par .fo-page-accueil. */
body:has(.fo-page:not(.fo-page-accueil)) footer[aria-labelledby="footer-brand"]{display:none}
.fo-principal{display:flex;flex-direction:column;flex:1;min-width:0}
@media (min-width:1024px){
.fo-page{display:grid;grid-template-columns:300px minmax(0,1fr);column-gap:16px;row-gap:0;align-items:start;max-width:1120px;min-height:100dvh;padding:0 24px}
.fo-page>*{grid-column:2;min-width:0}
.fo-page>.fo-sal-colonne{grid-column:1;grid-row:1/span 40;align-self:start}
.fo-page>.fo-principal{min-height:100dvh}
}
@media (min-width:1024px) and (max-width:1199px){.fo-page{grid-template-columns:260px minmax(0,1fr)}}
.fo-ariane{padding-top:10px;font-size:11px;color:rgba(255,255,255,.6)}
.fo-ariane a:hover{color:var(--fo-or)}
.fo-ariane span{margin:0 4px;opacity:.4}
.fo-titre{margin:6px 0 0;font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.2;text-wrap:balance;overflow-wrap:anywhere;color:#fff}
/* ═══════════ L'EN-TETE DE LA PAGE (21/09/2026) ═══════════
   header.fo-tete.fo-tete-hero > .fo-tete-emble + .fo-tete-oeil + h1.fo-titre + p.fo-desc
                                + p.fo-tete-compte
   « A la place de juste Forum et une description basique de merde » : un titre fort, UNE phrase,
   centre et illustre. L'embleme reprend l'anneau fin du menu du telephone — la meme matiere que le
   reste du site, pas une image de plus a charger. Les couleurs de sa lueur sont celles des salons
   qui suivent (violet, vert, bleu, rouge) : l'en-tete annonce ce qu'on va lire. */
/* COMPACT (21/09/2026). Quatre rangees empilees — embleme, ligne doree, titre, phrase, nombres —
   prenaient 222 px avant la premiere conversation. L'embleme passe A COTE du titre, et la ligne
   doree rejoint les deux nombres : deux rangees en moins sans rien retirer, et « Rejoins la
   conversation » garde sa taille — c'est lui qui devait rester visible. */
.fo-tete-hero{display:flex;flex-direction:column;align-items:center;gap:0;margin:0 0 14px;padding:10px 8px 0;text-align:center}
.fo-tete-ligne{display:flex;align-items:center;justify-content:center;gap:12px;min-width:0}
.fo-tete-emble{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.10),rgba(255,255,255,.03));box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22),0 10px 30px -14px #000}
/* La lueur derriere l'embleme : les quatre couleurs des salons, tres diluees. Elle ne bouge pas. */
.fo-tete-emble::before{content:"";position:absolute;z-index:-1;inset:-22px;border-radius:50%;background:radial-gradient(circle at 30% 30%,hsl(272 60% 55% / .30),transparent 60%),radial-gradient(circle at 72% 34%,hsl(150 60% 50% / .22),transparent 58%),radial-gradient(circle at 50% 78%,hsl(4 70% 55% / .22),transparent 60%);filter:blur(10px);pointer-events:none}
.fo-tete-emble svg{width:21px;height:21px;color:#fff;opacity:.92}
/* La ligne qui porte les mots que le titre ne dit plus : « Forum One Piece ». */
/* La ligne qui porte les mots que le titre ne dit plus, desormais sur la ligne des nombres. */
.fo-tete-oeil{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--fo-or)}
.fo-tete-hero .fo-titre{margin:0;font-size:25px;line-height:1.15;text-align:left}
/* Plus large et plus petite (user, 21/09) : la phrase tient sur deux lignes au lieu de quatre. */
.fo-tete-hero .fo-desc{max-width:52ch;margin:8px auto 0;font-size:13px;line-height:1.45;color:var(--fo-txt2);text-wrap:balance}
/* Les deux nombres : ce que le forum contient VRAIMENT, somme sur ce que la base a rendu. */
.fo-tete-compte{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin:9px 0 0;font-size:12px;color:var(--fo-sourd);font-variant-numeric:tabular-nums}
.fo-tete-compte b{font-weight:700;color:var(--fo-txt2)}
.fo-tete-compte i{width:3px;height:3px;border-radius:99px;background:rgba(255,255,255,.28)}
@media (min-width:1024px){.fo-tete-hero{padding-top:18px}.fo-tete-hero .fo-titre{font-size:30px}.fo-tete-emble{width:48px;height:48px}.fo-tete-emble svg{width:24px;height:24px}.fo-tete-hero .fo-desc{max-width:58ch;font-size:14px}}
/* Sur 320 px, l'embleme et le titre ne tiennent plus cote a cote en une ligne : le titre rapetisse
   plutot que de se couper en deux. */
@media (max-width:359px){.fo-tete-hero .fo-titre{font-size:21px}.fo-tete-emble{width:38px;height:38px}.fo-tete-emble svg{width:19px;height:19px}}
.fo-desc{margin:4px 0 0;font-size:13.5px;line-height:1.45;color:var(--fo-sourd)}
.fo-tete{margin:0 0 12px}

/* ── 2 · LA BARRE DU HAUT (BarreForum) ── 52 px collés sous l'en-tête du site (0 px sur un fil au téléphone). */
.fo-barre-nav{position:sticky;top:var(--fo-entete,56px);z-index:30;display:flex;align-items:center;gap:4px;min-height:52px;margin:0 -12px;padding:4px 8px 4px 4px;background:color-mix(in srgb,var(--fo-fond) 86%,transparent);-webkit-backdrop-filter:blur(24px) saturate(1.3);backdrop-filter:blur(24px) saturate(1.3);box-shadow:inset 0 -1px 0 var(--fo-bord)}
@media (min-width:640px){.fo-barre-nav{margin:0 -20px;padding-left:8px;padding-right:12px}}
@media (max-width:1023px){.fo[data-chat] .fo-barre-nav{top:0}}
@media (min-width:1024px){.fo-barre-nav{margin:0;border-radius:0 0 16px 16px}.fo[data-chat] .fo-retour{display:none}}
.fo-retour,.fo-cloche{position:relative;display:grid;place-items:center;width:44px;height:44px;flex:none;padding:0;border:0;border-radius:99px;background:transparent;color:var(--fo-bleute);font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .16s}
.fo-retour:active,.fo-cloche:active{transform:scale(.92)}
.fo-retour::before{content:"";position:absolute;inset:6px;border-radius:99px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.fo-retour:has(.fo-ico)::before{content:none}
.fo-retour svg{position:relative;width:20px;height:20px}
.fo-retour .fo-ico-svg{width:22px;height:22px}
.fo-cloche svg{width:22px;height:22px}
.fo-barre-action{display:flex;align-items:center;flex:none}
/* La pastille or (cloche, enveloppe, « Récents ») : 18 px, #ffd479 sur or à 22 %, cerclée du fond. */
/* LES PASTILLES EN ROUGE (03/10/2026) : le signe du non-lu que tout le monde lit deja sans
   l'apprendre, le seul rouge de l'ecran, et l'or cesse de dire a la fois l'action et l'alerte. */
.fo-cloche i,.fo-pastille{position:absolute;z-index:2;top:2px;right:2px;min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:#f23f43;color:#fff;font-style:normal;font-size:10.5px;font-weight:800;line-height:18px;text-align:center;font-variant-numeric:tabular-nums;box-shadow:0 0 0 2.5px color-mix(in srgb,var(--fo-fond) 92%,transparent),0 2px 6px -2px rgba(0,0,0,.7)}
.fo-cloche-active{color:var(--fo-or)}
.fo-cloche-active svg{filter:drop-shadow(0 0 6px rgba(254,195,136,.55))}
.fo-cloche-ok{position:absolute;right:5px;bottom:6px;display:grid;place-items:center;width:15px;height:15px;border-radius:99px;background:var(--fo-vert);color:#04210f;font-style:normal;font-size:10px;font-weight:900;line-height:1;box-shadow:0 0 0 2px var(--fo-fond)}
.fo-barre-titre{flex:1;min-width:0;display:flex;flex-direction:column;padding:0 4px;opacity:0;transform:translateY(4px);transition:opacity 160ms var(--fo-out),transform 160ms var(--fo-out);pointer-events:none}
.fo-barre-titre.fo-visible{opacity:1;transform:none;pointer-events:auto}
.fo-barre-titre b{font-size:15px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--fo-txt)}
.fo-barre-titre span{font-size:11.5px;font-weight:500;color:var(--fo-sourd);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── 3 · LES ANNEAUX (copie de mm-ico du menu sous préfixe fo-) ── 36 px, cercle par ombre interne, zone d'appui
   44 px par ::before, entrée par opacité + échelle, onde de 8 px à l'appui (classe fo-tap posée par le JS). */
.fo-or{--fo-t:var(--color-op-accent,#fec388)}.fo-vert{--fo-t:var(--color-op-green,#3ad07f)}.fo-blanc{--fo-t:#d6e2ff}
.fo-ico{position:relative;display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:50%;color:var(--fo-t,#d6e2ff);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);animation:foAnneau .5s var(--fo-d,0ms) cubic-bezier(.2,.8,.2,1) backwards;transition:transform .16s}
.fo-ico::before{content:"";position:absolute;inset:-4px;border-radius:inherit}
@keyframes foAnneau{from{opacity:0;transform:scale(.8)}}
.fo-ico-svg{width:18px;height:18px}.fo-ico-plein{fill:currentColor;fill-opacity:.9}
.fo-ico-rang{width:32px;height:32px}.fo-ico-rang .fo-ico-svg{width:16px;height:16px}
.fo-ico-grand{width:40px;height:40px}.fo-ico-grand .fo-ico-svg{width:20px;height:20px}
/* Un emoji, « ✦ » ou un avatar dans l'anneau. */
.fo-ico-txt{display:grid;place-items:center;font-size:16px;line-height:1;font-style:normal}
.fo-ico-rang .fo-ico-txt{font-size:15px}
.fo-ico-txt img{border-radius:inherit}
.fo-onde{position:absolute;inset:0;border-radius:inherit;pointer-events:none}
.fo-tap .fo-onde{animation:foOnde .4s ease-out 1}
@keyframes foOnde{from{box-shadow:inset 0 0 0 1px var(--fo-t,#d6e2ff),0 0 0 0 color-mix(in srgb,var(--fo-t,#d6e2ff) 40%,transparent)}to{box-shadow:inset 0 0 0 1px var(--fo-t,#d6e2ff),0 0 0 8px transparent}}
button.fo-ico,a.fo-ico{padding:0;border:0;background:transparent;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
:is(button,a,.fo-sal-chip,.fo-rang,.fo-amorce,.fo-parle):active .fo-ico,.fo-ico:active{transform:scale(.92)}

/* ── 4 · LE SÉLECTEUR DE SALONS (SelecteurSalons, ForumSalons.tsx) ── nav.fo-sal.fo-sal-salons|chats = la bande
   collante de 54 px sous la barre (chips de 44 px, défilement horizontal, bords estompés sur 12 px) ;
   nav.fo-sal.fo-sal-colonne = le rail PC (tuile de verre collante, rangées de 48 px). Chaque chip :
   li.fo-sal-item > a|button.fo-sal-chip (aria-current=page ou .fo-sal-actif = actif). */
.fo-sal{position:sticky;top:calc(var(--fo-entete,56px) + 52px);z-index:29;height:54px;margin:0 -12px;overflow:hidden;background:color-mix(in srgb,var(--fo-fond) 86%,transparent);-webkit-backdrop-filter:blur(24px) saturate(1.3);backdrop-filter:blur(24px) saturate(1.3);box-shadow:inset 0 -1px 0 var(--fo-bord)}
@media (min-width:640px){.fo-sal{margin:0 -20px}}
@media (max-width:1023px){.fo[data-chat] .fo-sal{top:52px}.fo-sal.fo-sal-colonne{display:none}}
@media (min-width:1024px){.fo-sal:not(.fo-sal-colonne){display:none}.fo-sal.fo-sal-colonne{display:flex}}
/* Repli sous le clavier des petits écrans (posé par le JS quand --fo-clavier > 0 et innerHeight < 700) :
   hauteur 0 sans transition (une hauteur ne s'anime pas). */
.fo-sal.fo-sal-repli{height:0;box-shadow:none}
.fo-sal-liste{display:flex;align-items:center;gap:6px;height:54px;margin:0;padding:5px 12px;list-style:none;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 12px),transparent);mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 12px),transparent)}
.fo-sal-liste::-webkit-scrollbar{display:none}
.fo-sal-item{flex:none;scroll-snap-align:start;list-style:none}
.fo-sal-chip{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 12px;border:0;border-radius:14px;background:var(--fo-verre);box-shadow:inset 0 0 0 1px var(--fo-bord);color:var(--fo-txt);font:inherit;text-decoration:none;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform 100ms var(--fo-out)}
.fo-sal-chip:active{transform:scale(.96)}
/* L'état actif est un calque sous le contenu (z-index -1 dans le contexte isolé de la chip) qui ne fait
   que s'allumer : opacité seule, 200 ms. */
.fo-sal-chip::after,.fo-sal-rang::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--fo-or-fond);box-shadow:inset 0 0 0 1px rgba(254,195,136,.55);opacity:0;transition:opacity 200ms var(--fo-out);pointer-events:none}
.fo-sal-chip[aria-current="page"],.fo-sal-chip.fo-sal-actif,.fo-sal-rang[aria-current="page"],.fo-sal-rang.fo-sal-actif{color:#ebf3fc}
.fo-sal-chip[aria-current="page"]::after,.fo-sal-chip.fo-sal-actif::after,.fo-sal-rang[aria-current="page"]::after,.fo-sal-rang.fo-sal-actif::after{opacity:1}
.fo-sal-em{flex:none;font-size:16px;line-height:1}
.fo-sal-txt{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:0}
.fo-sal-nom,.fo-sal-titre{max-width:160px;overflow:hidden;text-overflow:ellipsis;font-size:13px;font-weight:600;line-height:1.2}
.fo-sal-neuf .fo-sal-nom,.fo-sal-nonlu .fo-sal-titre{font-weight:700;color:#fff}
.fo-sal-sous{font-size:10.5px;font-weight:500;line-height:1.2;color:var(--fo-sourd)}
.fo-sal-chip[aria-current="page"] .fo-sal-sous,.fo-sal-chip.fo-sal-actif .fo-sal-sous{color:rgba(235,243,252,.72)}
.fo-sal-point{width:6px;height:6px;flex:none;border-radius:99px;background:var(--fo-or)}
/* « coffre hasard ×N » sur l'onglet d'une conversation (03/10/2026) : le medaillon ange / tete de mort et le compte */
.fo-sal-hasard{flex:none;display:inline-flex;align-items:center;gap:2px;height:18px;padding:0 6px 0 2px;border-radius:99px;background:linear-gradient(90deg,#2f3134,#3a1018);box-shadow:inset 0 0 0 1px rgba(255,232,213,.55);color:#ebf2fb;font-size:10.5px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.fo-sal-hasard img{width:14px;height:14px;max-width:none}
.fo-sal-coffre{display:inline-flex;flex:none}.fo-sal-coffre svg{width:14px;height:14px}
.fo-sal-pastille{display:inline-grid;place-items:center;flex:none;min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:rgba(254,195,136,.22);color:var(--fo-or-txt);font-size:10.5px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.fo-sal-av,.fo-sal-avatar{position:relative;display:inline-flex;flex:none;border-radius:6px}
.fo-sal-av img,.fo-sal-avatar img{border-radius:inherit}
/* On te parle : anneau or de 2 px autour de l'avatar de la conversation. */
.fo-sal-av.fo-sal-parle,.fo-sal-chip.fo-sal-parle .fo-sal-avatar{box-shadow:0 0 0 2px var(--fo-or)}
.fo-sal-puce,.fo-brouillon{display:inline-flex;align-items:center;flex:none;height:16px;padding:0 5px;border-radius:99px;background:rgba(254,195,136,.16);color:var(--fo-or-txt);font-size:10px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}
.fo-sal-chip.fo-sal-verrou{background:transparent;box-shadow:inset 0 0 0 1px transparent;border:1px dashed rgba(255,255,255,.25);color:var(--fo-txt2)}
/* La chip du salon (mode chats) porte un anneau ; la chip « + » n'est que son anneau or dans 44 px. */
.fo-sal-chip.fo-sal-salon{padding-left:6px}
.fo-sal-item-plus,.fo-sal-item-salon,.fo-sal-item-att{display:flex;align-items:center}
.fo-sal-chip.fo-sal-conv{padding-left:8px}
.fo-sal-chip.fo-sal-brouillon .fo-sal-titre{font-style:italic}
.fo-sal-chip.fo-sal-plus{padding:0 4px;background:transparent;box-shadow:none;color:var(--fo-or)}
.fo-sal-chip.fo-sal-plus::after{content:none}
/* Le squelette : 3 chips de 96 × 44, hauteur fixe (CLS 0), miroitement. */
.fo-sal-chip.fo-sal-att,.fo-sal-squelette{width:96px;height:44px;padding:0;border-radius:14px;box-shadow:none}
.fo-sal-chip.fo-sal-att::after{content:none}
.fo-sal-vide{display:flex;align-items:center;min-height:44px;padding:0 10px;font-size:12.5px;color:var(--fo-sourd)}
@media (max-width:359px){.fo-sal-nom,.fo-sal-titre{max-width:120px}.fo-sal-chip{padding:0 10px}}
/* Le rail PC (mode colonne) : la même nav, mais une tuile de verre collante à gauche ; les chips
   deviennent des rangées de 48 px, pleine largeur, sans verre (le fond actif seul les distingue). */
.fo-sal.fo-sal-colonne{position:sticky;top:72px;z-index:1;display:none;flex-direction:column;gap:2px;height:auto;max-height:calc(100vh - 88px);margin:0;overflow:auto;overscroll-behavior:contain;padding:10px;border-radius:20px;border-bottom:0;background:var(--fo-verre);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:inset 0 0 0 1px var(--fo-bord)}
.fo-sal-colonne .fo-sal-liste{flex-direction:column;align-items:stretch;gap:2px;height:auto;padding:0;overflow:visible;-webkit-mask-image:none;mask-image:none}
.fo-sal-colonne .fo-sal-item{scroll-snap-align:none}
.fo-sal-colonne .fo-sal-chip,.fo-sal-rang{position:relative;isolation:isolate;display:flex;align-items:center;gap:10px;width:100%;height:auto;min-height:48px;padding:0 10px;border:0;border-radius:12px;background:transparent;box-shadow:none;color:var(--fo-txt);font:inherit;text-align:left;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.fo-sal-colonne .fo-sal-chip:active{transform:none}
@media (hover:hover){.fo-sal-colonne .fo-sal-chip:hover,.fo-sal-rang:hover{background:rgba(255,255,255,.08)}}
.fo-sal-colonne .fo-sal-txt{flex:1}
.fo-sal-colonne .fo-sal-em{width:28px;font-size:22px;text-align:center}
.fo-sal-colonne .fo-sal-nom,.fo-sal-colonne .fo-sal-titre{max-width:none;font-size:14px}
.fo-sal-colonne .fo-sal-chip:not(.fo-sal-recents) .fo-sal-txt{flex-direction:row;align-items:center;gap:8px}
.fo-sal-colonne .fo-sal-chip:not(.fo-sal-recents) .fo-sal-sous{flex:none;margin-left:auto;font-size:11px}
.fo-sal-colonne .fo-sal-avatar{width:28px;height:28px;border-radius:8px}
.fo-sal-colonne .fo-sal-titre{white-space:nowrap}
.fo-sal-colonne .fo-sal-chip.fo-sal-salon{min-height:44px;margin-bottom:2px}
.fo-sal-colonne .fo-sal-chip.fo-sal-att{width:100%;min-height:48px}
.fo-sal-colonne .fo-sal-liste-salon{margin-bottom:2px}
.fo-sal-section{margin:10px 8px 4px;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.fo-sal-section:first-child{margin-top:2px}
.fo-sal-cta,.fo-sal-nouveau{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:44px;margin-top:8px;padding:0 14px;border:0;border-radius:14px;background:var(--fo-or);color:var(--fo-sur-or);font:inherit;font-size:14px;font-weight:800;cursor:pointer;text-decoration:none}
.fo-sal-cta:active,.fo-sal-nouveau:active{transform:scale(.98)}

/* ── 5 · LES TUILES DE L'ACCUEIL ── au plus une tuile d'appel au-dessus de la liste. */
/* « On parle de toi » : anneau or dont le halo respire par l'opacité (la seule boucle du forum ; le mot
   est écrit à côté, le halo ne porte rien). */
.fo-parle{position:relative;display:flex;align-items:center;gap:10px;width:100%;min-height:56px;margin-top:12px;padding:8px 8px 8px 10px;border:0;border-radius:16px;background:var(--fo-verre);box-shadow:inset 0 0 0 1px var(--fo-bord);color:var(--fo-txt);font:inherit;text-align:left;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.fo-parle .fo-ico::after{content:"";position:absolute;inset:-3px;border-radius:inherit;box-shadow:0 0 0 1.5px rgba(255,212,121,.55),0 0 18px 2px rgba(254,195,136,.28);opacity:0;animation:foSouffle 3.2s ease-in-out infinite;pointer-events:none}
@keyframes foSouffle{0%,100%{opacity:0}50%{opacity:1}}
.fo-parle-corps{display:flex;flex:1;min-width:0;flex-direction:column;gap:2px}
.fo-parle-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px;font-weight:600;line-height:1.3}
.fo-parle-txt b{color:var(--fo-or-txt)}
.fo-parle-quand{font-size:11px;color:var(--fo-sourd)}
.fo-parle-n{display:inline-grid;place-items:center;flex:none;min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:rgba(254,195,136,.22);color:var(--fo-or-txt);font-size:10px;font-weight:800;line-height:1}
/* L'amorce du jour. */
.fo-qdj{position:relative;display:flex;align-items:center;gap:10px;min-height:56px;margin-top:12px;padding:8px 2px 8px 10px;border-radius:16px;background:var(--fo-verre);box-shadow:inset 0 0 0 1px var(--fo-bord)}
.fo-qdj-corps{display:flex;flex:1;min-width:0;flex-direction:column;gap:2px}
.fo-qdj-sur{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.fo-qdj-titre{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px;font-weight:600;line-height:1.3}
.fo-qdj-action{flex:none;min-height:44px;padding:0 8px;border:0;background:transparent;color:var(--fo-or-txt);font:inherit;font-size:12.5px;font-weight:700;white-space:nowrap;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center}
/* PENDANT TON ABSENCE (01/10/2026) : une tuile, trois lignes au plus ; séparées par l'espace, jamais par un trait. */
.fo-absence{position:relative;margin-top:12px;padding:8px 10px 6px 12px;border-radius:16px;background:var(--fo-verre);box-shadow:inset 0 0 0 1px var(--fo-bord)}
.fo-absence-tete{display:flex;align-items:center;justify-content:space-between;gap:8px}
.fo-absence-titre{font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.fo-absence-tout{flex:none;min-height:40px;padding:0 4px;border:0;background:transparent;color:var(--fo-or-txt);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.fo-absence-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.fo-absence-liste button{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:2px;border:0;border-radius:12px;background:transparent;color:var(--fo-txt);font:inherit;font-size:13.5px;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.fo-absence-liste button span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fo-absence-liste b{color:var(--fo-or-txt);font-weight:800;font-variant-numeric:tabular-nums}
.fo-absence-liste small{flex:none;font-size:11px;color:var(--fo-sourd)}
.fo-absence-ic{flex:none;width:18px;height:18px;color:var(--fo-txt2)}
.fo-absence-liste button:focus-visible,.fo-absence-tout:focus-visible{outline:2px solid var(--fo-or);outline-offset:2px}
@media (hover:hover){.fo-absence-liste button:hover{background:rgba(255,255,255,.06)}}
.fo-fermer{position:relative;display:grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border:0;border-radius:99px;background:transparent;color:var(--fo-sourd);font:inherit;font-size:18px;line-height:1;cursor:pointer}
.fo-fermer:active{background:rgba(255,255,255,.08)}
/* « N sujets non lus · Tout marquer comme lu » (28/09/2026). */
.fo-nonlus{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;min-height:44px;margin-top:12px;padding:0 4px;font-size:13px;color:var(--fo-sourd)}
.fo-nonlus span{font-weight:600;color:var(--fo-txt)}
.fo-nonlus button{margin-left:auto;min-height:40px;padding:0 14px;border-radius:99px;background:var(--fo-verre);box-shadow:inset 0 0 0 1px var(--fo-bord);color:var(--fo-txt);font-size:13px;font-weight:700}
.fo-nonlus button:hover:not(:disabled){box-shadow:inset 0 0 0 1px var(--fo-txt)}
.fo-nonlus button:disabled{opacity:.6}
.fo-nonlus button:focus-visible{outline:2px solid var(--fo-txt);outline-offset:2px}
.fo-nonlus small{flex-basis:100%;color:#ff9d9d}
/* « Tu es à jour ». */
.fo-ajour{display:flex;flex-direction:column;justify-content:center;gap:2px;min-height:40px;margin-top:12px;padding:0 4px}
.fo-ajour b{font-size:15px;font-weight:600;color:var(--fo-txt)}
.fo-ajour span{font-size:12.5px;color:var(--fo-sourd)}
/* La quête de l'auteur (BandeauMeilleure), sous la tuile du sujet. */
.fo-meilleure-quete{position:relative;display:flex;align-items:center;gap:10px;min-height:48px;margin-top:8px;padding:6px 2px 6px 10px;border-radius:16px;background:var(--fo-verre);box-shadow:inset 0 0 0 1px var(--fo-bord)}
.fo-meilleure-quete p{flex:1;min-width:0;margin:0;font-size:13px;font-weight:600;line-height:1.35;overflow-wrap:anywhere}
.fo-meilleure-quete-comment{flex:none;min-height:36px;padding:0 10px;border:0;border-radius:99px;background:rgba(254,195,136,.16);color:var(--fo-or-txt);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}

/* ── 6 · LA LISTE DES CONVERSATIONS (LigneConv) ── une tuile de verre, des rangées de 64 px séparées d'un filet. */
.fo-grp{position:relative;margin:12px 0 0;padding:0;list-style:none;overflow:hidden;border-radius:20px;background:var(--fo-verre);box-shadow:inset 0 0 0 1px var(--fo-bord)}
.fo-grp>li{position:relative}
.fo-grp>li+li::before{content:"";position:absolute;left:66px;right:0;top:0;height:1px;background:var(--fo-filet);pointer-events:none}
.fo-grp-attente{opacity:.55;transition:opacity 120ms}
.fo-rang{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:12px;min-height:64px;padding:10px 14px;color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;transition:background 100ms,transform 100ms var(--fo-out)}
@media (hover:hover){.fo-rang:hover{background:rgba(255,255,255,.10)}}
.fo-rang:active{transform:scale(.985)}
.fo-rang.fo-epingle{background:rgba(254,195,136,.06)}
.fo-rang.fo-clos{opacity:.85}
.fo-rang .fo-corps{min-width:0}
.fo-rt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:15px;font-weight:600;line-height:1.3;letter-spacing:-.01em;color:rgba(229,232,235,.82);overflow-wrap:anywhere}
.fo-rang.fo-neuf .fo-rt{font-weight:700;color:#fff}
.fo-rs{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;margin-top:3px;font-size:12.5px;font-weight:500;color:var(--fo-sourd)}
.fo-rs b{font-weight:600;color:var(--fo-txt2)}
.fo-pils{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.fo-pil{display:inline-flex;align-items:center;gap:3px;height:20px;padding:0 7px;border-radius:6px;background:rgba(255,255,255,.08);color:var(--fo-txt2);font-size:10.5px;font-weight:700;white-space:nowrap}
.fo-pil.fo-ok{color:var(--fo-vert);background:rgba(58,208,127,.14)}
.fo-pil.fo-ep{color:var(--fo-or-txt);background:rgba(254,195,136,.16)}
/* « Sans réponse » : un appel, pas un reproche — l'or du forum, pas le rouge d'une erreur. */
.fo-pil.fo-pil-rep{color:var(--fo-or-txt);background:rgba(254,195,136,.16);box-shadow:inset 2px 0 0 var(--fo-or)}
.fo-pil.fo-pil-ferme{color:var(--fo-sourd);background:rgba(255,255,255,.06)}
.fo-pil-cat{box-shadow:inset 0 0 0 1px var(--fo-bord)}
.fo-rang-droite{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:6px}
.fo-point{flex:none;width:8px;height:8px;border-radius:99px;background:var(--fo-or)}
.fo-chev{font-size:20px;line-height:1;color:rgba(255,255,255,.25)}
/* « Charger plus » (accueil, 48 px) et « Messages précédents » (fil, 44 px) : le même bouton de verre. */
.fo-suite{display:flex;align-items:center;justify-content:center;gap:6px;margin:12px auto 0;min-height:44px;padding:0 16px;border:0;border-radius:14px;background:var(--fo-verre);box-shadow:inset 0 0 0 1px var(--fo-bord);color:var(--fo-txt2);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer}
.fo-suite:disabled{opacity:.5;cursor:progress}
.fo-suite-sujets{width:100%;min-height:48px;font-size:14px}
/* « Messages précédents » (fil, messages privés) PLUS VISIBLE (08/10/2026, user : « le bouton message précédent doit
   être plus visible ») : l'or du forum, un bord marqué et un texte clair, au lieu du verre gris qui se fondait dans la
   nuit. « Charger plus de sujets » (accueil) garde son verre. */
.fo-suite:not(.fo-suite-sujets){min-height:46px;padding:0 20px;background:rgba(232,192,106,.15);box-shadow:inset 0 0 0 1.5px rgba(232,192,106,.62),0 8px 22px -12px rgba(232,192,106,.55);color:#ffe19a;font-size:14.5px;font-weight:700}
.fo-suite:not(.fo-suite-sujets) svg{color:#ffd479}
@media (hover:hover){.fo-suite:not(.fo-suite-sujets):hover{background:rgba(232,192,106,.23)}}
.fo-suite:not(.fo-suite-sujets):focus-visible{outline:2px solid #ffd479;outline-offset:3px}
.fo-ferme{margin:12px 0 0;padding:10px 14px;border-radius:14px;background:var(--fo-verre);box-shadow:inset 0 0 0 1px var(--fo-bord);font-size:13.5px;text-align:center;color:var(--fo-sourd)}

/* ── 7 · LES AMORCES (LigneAmorce) ── tuiles de 52 px, tant que la vue est maigre. */
.fo-amorces{margin-top:16px}
.fo-amorces-titre{margin:0 4px 8px;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.fo-amorces-intro{margin:-4px 4px 8px;font-size:12.5px;line-height:1.45;color:var(--fo-sourd)}
.fo-amorces-liste{display:flex;flex-direction:column;gap:6px}
.fo-amorce{position:relative;display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:6px 8px 6px 10px;border:0;border-radius:16px;background:var(--fo-verre);box-shadow:inset 0 0 0 1px var(--fo-bord);color:var(--fo-txt);font:inherit;text-align:left;text-decoration:none;transition:transform 100ms var(--fo-out)}
button.fo-amorce{cursor:pointer;-webkit-tap-highlight-color:transparent}
@media (hover:hover){button.fo-amorce:hover{background:rgba(255,255,255,.09)}}
button.fo-amorce:active{transform:scale(.985)}
.fo-amorce-muette{color:var(--fo-txt2)}
.fo-amorce-em{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);color:var(--fo-bleute);font-size:16px;line-height:1}
.fo-amorce-corps{display:flex;flex:1;min-width:0;flex-direction:column;gap:2px}
.fo-amorce-corps b{font-size:13.5px;font-weight:700;line-height:1.3;overflow-wrap:anywhere}
.fo-amorce-corps small,.fo-amorce-cat{font-size:11.5px;color:var(--fo-sourd)}
.fo-amorce-fleche{display:grid;place-items:center;flex:none;margin-left:auto;width:26px;height:26px;border-radius:99px;background:var(--fo-or);color:var(--fo-sur-or);font-size:17px;font-weight:800;line-height:1}
.fo-amorces-lien{display:inline-flex;align-items:center;min-height:44px;margin-top:4px;padding:0 4px;font-size:13px;font-weight:700;color:var(--fo-or-txt);text-decoration:underline}

/* ── 8 · LE BOUTON « NOUVEAU SUJET » ── or plein, fixé au-dessus de la barre du site, effacé au défilement
   (opacité + pointer-events, classe fo-efface posée par la page). */
/* En bas a DROITE, pas centre pleine largeur : une barre posee au milieu de la liste masquait en
   permanence une rangee entiere. La liste reserve sa place en bas (.fo-blocs:last-of-type). */
.fo-cta-zone{position:fixed;left:auto;right:16px;z-index:60;display:flex;justify-content:flex-end;padding:0;bottom:calc(3.75rem + env(safe-area-inset-bottom) + 14px);transition:opacity 150ms var(--fo-out)}
.fo-cta-zone.fo-efface{opacity:0;pointer-events:none}
@media (min-width:1024px){.fo-cta-zone{position:static;justify-content:flex-start;padding:0;margin-top:16px}.fo-cta-zone.fo-efface{opacity:1;pointer-events:auto}}
/* UNE PILULE QUI SE LIT (03/10/2026). Le rond ne montrait qu'une icone : il fallait deviner ce qu'il
   faisait. Clair neutre, il se detache de tout ce qui passe dessous sans rien combattre. */
.fo-cta{display:inline-flex;align-items:center;gap:9px;height:52px;min-height:52px;padding:0 20px 0 17px;border:0;border-radius:999px;background:linear-gradient(180deg,#fdfefe,#dfe5ee);color:#14161a;font:inherit;font-size:14.5px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;cursor:pointer;box-shadow:0 0 0 4px color-mix(in srgb,var(--fo-fond) 82%,transparent),0 14px 30px -10px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(90,100,120,.30);transition:transform 120ms var(--fo-out),box-shadow 120ms var(--fo-out)}
.fo-cta:active{transform:scale(.96)}
/* Sous 360 px, la pilule redevient un rond : le libelle mangerait la moitie de l'ecran. */
@media (max-width:359px){.fo-cta{width:54px;height:54px;padding:0;border-radius:50%;justify-content:center;gap:0}.fo-cta-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}
.fo-cta svg{width:20px;height:20px;flex:none;stroke-width:2.1}

/* ── 9 · LA TUILE DU SUJET (TuileSujet) ── en tête du fil. */
.fo-sujet{position:relative;margin-top:12px;padding:14px 16px;border-radius:20px;background:var(--fo-verre);box-shadow:inset 0 0 0 1px var(--fo-bord)}
.fo-sujet .fo-titre{margin:0;font-size:18px;line-height:1.25}
.fo-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:6px 0 0;font-size:12.5px;font-weight:500;color:var(--fo-sourd)}
.fo-admin-sujet{position:relative;display:inline-flex;align-items:center;gap:6px;margin-left:auto;min-height:36px;padding:0 12px;border:0;border-radius:99px;background:rgba(255,149,146,.12);color:var(--fo-rouge);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.fo-admin-sujet::before{content:"";position:absolute;inset:-4px}
.fo-participants{display:flex;align-items:center;gap:10px;margin:10px 0 0;min-width:0;font-size:12.5px;color:var(--fo-txt2)}
.fo-participants-avatars{display:inline-flex;flex:none}
.fo-participants-av{display:inline-flex;margin-left:-6px;border-radius:99px;box-shadow:0 0 0 2px var(--fo-fond)}
.fo-participants-av:first-child{margin-left:0}
.fo-participants-noms{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fo-carte{display:flex;align-items:center;gap:12px;min-height:48px;margin-top:10px;padding:6px 10px;border-radius:14px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--fo-bord);color:inherit;text-decoration:none;min-width:0}
@media (hover:hover){.fo-carte:hover{background:rgba(255,255,255,.09)}}
.fo-carte-img{display:grid;place-items:center;flex:none;width:30px;height:42px;border-radius:5px;background:linear-gradient(150deg,#4a5464,#20242c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);font-size:15px}
.fo-carte span{flex:1;min-width:0}
.fo-carte b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:600;text-transform:capitalize}
.fo-carte small{display:block;margin-top:1px;font-size:12px;color:var(--fo-sourd)}
.fo-meilleure{margin-top:10px;padding:10px 12px;border-radius:14px;background:rgba(58,208,127,.08);box-shadow:inset 0 0 0 1px rgba(58,208,127,.35),inset 2px 0 0 var(--fo-vert)}
.fo-meilleure p{margin:0}
.fo-meilleure p:first-child{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--fo-vert)}
.fo-meilleure p+p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:5px;font-size:13.5px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
.fo-meilleure button{display:block;width:100%;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;white-space:pre-wrap;overflow-wrap:anywhere}
.fo-meilleure-voir{display:inline-flex;align-items:center;min-height:36px;margin-top:2px;padding:0 4px;color:var(--fo-vert);font-size:12.5px;font-weight:700}

/* ── 10 · LE FIL ── dense : 14,5 px / 1,4, rembourrage 7×11, blocs par auteur à 10 px, bulles à 2 px.
   Le dégagement du bas = la hauteur RÉELLE du composeur (--fo-compose-h, publiée par la page) + ce que le
   clavier couvre EN PLUS de la barre du site (le body garde déjà 3,75rem pour elle) + 12 px. */
.fo-fil{flex:1;margin:0;min-width:0;padding:4px 12px calc(var(--fo-compose-h,56px) + max(0px, var(--fo-clavier,0px) - 3.75rem - env(safe-area-inset-bottom)) + 12px)}
@media (min-width:640px){.fo-fil{padding-left:16px;padding-right:16px}}
/* Sur PC le composeur est dans le flux (collant) : le fil ne réserve plus sa hauteur. */
@media (min-width:1024px){.fo-fil{padding-bottom:12px}}
.fo-bulles{display:flex;flex-direction:column;min-width:0;font-size:var(--fo-txt-msg,14.5px)}
.fo-date{align-self:center;margin:14px 0 6px;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--fo-sourd)}
/* « Nouveaux » depuis la dernière visite sur cet appareil : un trait or, le mot au milieu. */
.fo-nouveaux-sep{display:flex;align-items:center;gap:10px;margin:12px 0 4px;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--fo-or-txt)}
.fo-nouveaux-sep::before,.fo-nouveaux-sep::after{content:"";flex:1;height:1px;background:rgba(254,195,136,.45)}
.fo-bloc{display:flex;align-items:flex-start;gap:8px;margin-top:10px;min-width:0}
.fo-bloc.fo-moi{flex-direction:row-reverse}
.fo-bloc>.fo-av{position:relative;flex:none;align-self:flex-start;margin:0;padding:0;border:0;background:none;border-radius:8px;cursor:default}
.fo-bloc>.fo-av img{border-radius:8px}
.fo-bloc button.fo-nom{font-size:12.5px;padding:0 4px;color:var(--fo-bleute)}
.fo-bloc button.fo-nom::before{inset:-13px -4px}
.fo-col{display:flex;flex-direction:column;gap:2px;min-width:0;max-width:84%}
.fo-moi .fo-col{align-items:flex-end}
/* La ligne nom · grade · heure : 18 px, sans pilule. */
.fo-nom{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;max-width:100%;min-height:18px;margin:0 0 1px;padding:0 4px;border:0;background:none;font-size:12.5px;line-height:18px;color:var(--fo-bleute)}
.fo-nom b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;color:var(--fo-bleute)}
.fo-nom .fo-h{flex:none;font-size:11px;font-weight:500;color:var(--fo-sourd)}
.fo-grade{display:inline-flex;align-items:center;flex:none;height:16px;padding:0 6px;border-radius:99px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);color:var(--fo-txt2);font-size:10.5px;font-weight:800;white-space:nowrap}
.fo-modo{display:inline-flex;align-items:center;gap:4px;flex:none;height:16px;padding:0 7px 0 5px;border-radius:99px;background:var(--fo-or);color:var(--fo-sur-or);font-size:10.5px;font-weight:800;white-space:nowrap}
.fo-modo svg{width:11px;height:11px}
/* Les badges d avatar (ForumCouronne, 29/09) : deux IMAGES (public/badges/*.svg) qui debordent de 75 % par cote sans pousser la mise en page ; la photo prend le rayon du cadre (32 %), sinon ses coins sortent la ou le forum l arrondit moins. */
.fo-couronne{position:relative;display:inline-block;flex:none;vertical-align:middle;margin-right:var(--fo-cr-marge,0)}
/* Mon bloc est en row-reverse : le texte est a GAUCHE de mon avatar, la marge passe de ce cote. */
.fo-moi>.fo-av .fo-couronne{margin-right:0;margin-left:var(--fo-cr-marge,0)}
.fo-couronne>.fo-couronne-calque{position:absolute;inset:-75%;width:250%;height:250%;max-width:none;border-radius:0!important;pointer-events:none;user-select:none}
/* LE COFFRE A BADGES (CoffreBadge, 29/09) : la roulette des badges et la fenetre du gain. */
.cof-badge .cof-halo{filter:hue-rotate(210deg) saturate(1.3)}
.fo-rou{position:fixed;left:50%;top:50%;z-index:91;transform:translate(-50%,-50%);width:min(92vw,420px);padding:22px 16px 18px;border-radius:22px;background:radial-gradient(120% 70% at 50% -10%,rgba(254,195,136,.18),transparent 60%),var(--fo-fond);box-shadow:inset 0 0 0 1px var(--fo-bord),0 30px 80px -10px rgba(0,0,0,.9);display:grid;gap:14px;justify-items:center;text-align:center}
.fo-rou-titre{margin:0;font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--fo-or-txt)}
.fo-rou-fenetre{position:relative;width:100%;height:132px;overflow:hidden;border-radius:16px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--fo-bord);-webkit-mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent)}
.fo-rou-bande{position:absolute;left:0;top:0;height:100%;display:flex;align-items:center;will-change:transform}
.fo-rou-case{flex:none;width:76px;display:grid;place-items:center;transition:transform .12s,filter .12s;filter:brightness(.72) saturate(.8)}
.fo-rou-case.fo-rou-actif{transform:scale(1.16);filter:none}
.fo-rou-case .fo-couronne{margin:0}
.fo-rou-repere{position:absolute;left:50%;top:8px;bottom:8px;width:2px;margin-left:-1px;background:linear-gradient(var(--fo-or),transparent 28%,transparent 72%,var(--fo-or));box-shadow:0 0 12px var(--fo-or);animation:fo-rou-tic .18s ease-out}
@keyframes fo-rou-tic{from{box-shadow:0 0 26px 4px #fff;opacity:1}to{box-shadow:0 0 12px var(--fo-or)}}
.fo-rou-gagne{position:relative;display:grid;justify-items:center;gap:10px;padding:40px 0 4px;animation:fo-rou-gagne .6s cubic-bezier(.2,1.6,.4,1)}
.fo-rou-gagne>.fo-couronne,.fo-rou-gagne>b,.fo-rou-gagne>span:not([aria-hidden]),.fo-rou-gagne>button{position:relative;z-index:1}
.fo-rou-eclair{position:fixed;inset:0;z-index:0;background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.95),rgba(255,214,121,.35) 30%,transparent 62%);pointer-events:none;animation:fo-rou-eclair .7s ease-out forwards}
@keyframes fo-rou-eclair{from{opacity:1}to{opacity:0}}
.fo-rou-rayons{position:absolute;left:50%;top:88px;width:300px;height:300px;margin:-150px 0 0 -150px;z-index:0;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(255,214,121,.28) 0 7deg,transparent 7deg 20deg);-webkit-mask-image:radial-gradient(circle,#000 20%,transparent 68%);mask-image:radial-gradient(circle,#000 20%,transparent 68%);pointer-events:none;animation:fo-rou-rayons 9s linear infinite}
@keyframes fo-rou-rayons{to{transform:rotate(360deg)}}
.fo-rou-gagne .fo-couronne{margin:0}
@keyframes fo-rou-gagne{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
.fo-rou-nom{margin-top:30px;font-size:22px;font-weight:800;color:#fff}
.fo-rou-sous{max-width:28ch;font-size:13px;color:var(--fo-sourd)}
.fo-rou-ok{margin-top:6px;height:44px;padding:0 26px;border:0;border-radius:99px;background:var(--fo-or);color:var(--fo-sur-or);font:inherit;font-weight:800;cursor:pointer}
.fo-rou-ok:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (prefers-reduced-motion:reduce){.fo-rou-gagne,.fo-rou-eclair,.fo-rou-rayons,.fo-rou-repere{animation:none}.fo-rou-eclair{opacity:0}}
.fo-couronne>.fo-couronne-derriere{z-index:0}
/* Les lames montent de 0,5 x la taille au-dessus de la photo (13 px a 26 px) : deux blocs de l admin a la suite se touchaient (mesure en ligne 29/09). */
.fo-bloc:has(>.fo-av .fo-couronne){margin-top:12px}
.fo-couronne>.fo-couronne-devant{z-index:2}
.fo-couronne>img,.fo-couronne>span{position:relative;z-index:1;border-radius:32%!important;box-shadow:none}
/* Le Diamant blanc de Brankz2 a les coins presque carrés de son image (30/09/2026) : sa photo s'arrondit à 12 %. */
.fo-couronne[data-couronne="diamant-blanc"]>img:not(.fo-couronne-calque),.fo-couronne[data-couronne="diamant-blanc"]>span{border-radius:12%!important}
.fo-paquet{position:relative;display:flex;flex-direction:column;gap:2px;align-items:inherit;max-width:100%;min-width:0;touch-action:manipulation;transition:transform 160ms var(--fo-pop)}
/* LA PASTILLE DES RÉACTIONS NE POUSSE RIEN au dernier message d'un bloc : ses 10 px de dépassement tiennent
   dans les 10 px qui séparent deux blocs. Au milieu d'un bloc, la place est réservée. Chez moi, l'heure est
   dessous : le paquet s'élargit pour que la pastille, à gauche, ne croise jamais l'heure, à droite. */
.fo-paquet.fo-aime{margin-bottom:10px}
.fo-paquet.fo-aime:is([data-pos="seul"],[data-pos="dernier"]){margin-bottom:0}
.fo-moi .fo-paquet.fo-aime:is([data-pos="seul"],[data-pos="dernier"]){min-width:min(100%,132px)}
/* Levée par l'appui long : la bulle se soulève de --fo-leve-dy (calculé par la page) pour laisser la place
   à la barre et au menu, SANS faire défiler la page ; un transform ne décale aucun autre élément. */
.fo-paquet.fo-leve{z-index:86;transform:translateY(var(--fo-leve-dy,0px)) scale(1.03);transform-origin:50% 0;touch-action:none}
/* La bulle levée ne laisse plus voir ce qu'elle survole (04/10/2026) : soulevée vers le bas pour faire de la place à la barre
   des réactions, elle passe sur le message suivant, dont le texte apparaissait à travers son verre. Le fond du forum est posé
   SOUS sa couleur (calque négatif dans le paquet) : chaque variante (moi, autre, mention) garde exactement sa teinte. */
.fo-paquet.fo-leve .fo-bul::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--fo-fond)}
/* Menu ouvert au doigt : la page est FIGÉE, comme Instagram (105 px de dérive mesurés avant). */
html.fo-fige{overflow:hidden}
/* Une bulle née après l'ouverture (envoi, direct) arrive par un glissé court : transform et opacité
   seulement. data-neuf reste posé quand la bulle locale devient le vrai message (même clé). */
.fo-paquet[data-neuf]>.fo-bul,.fo-paquet[data-neuf]>.fo-imgs{animation:fo-arrive 170ms var(--fo-out) both}
@keyframes fo-arrive{from{transform:translateY(10px) scale(.98);opacity:.4}to{transform:none;opacity:1}}
.fo-paquet[data-envoi="echec"]>:is(.fo-bul,.fo-imgs){opacity:.55}
/* « Envoi… » n'apparaît qu'après 700 ms : au rythme de la production (291 à 345 ms), jamais. */
.fo-envoi-lent{animation:fo-apparait 1ms linear 700ms both}
@keyframes fo-apparait{from{opacity:0}to{opacity:1}}
.fo-echec{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:2px 6px;max-width:100%;margin-top:2px;font-size:12.5px;line-height:1.35;color:var(--fo-rouge)}
.fo-autre .fo-echec{justify-content:flex-start}
.fo-echec-txt{font-weight:700;text-align:right;overflow-wrap:anywhere}
.fo-echec-actions{display:inline-flex;align-items:center;gap:4px}
.fo-echec button{position:relative;min-height:32px;padding:0 10px;border:0;border-radius:99px;background:rgba(255,149,146,.16);color:var(--fo-txt);font:inherit;font-weight:700;cursor:pointer}
.fo-echec button::before{content:"";position:absolute;inset:-6px -2px}
.fo-echec .fo-echec-jeter{width:32px;padding:0;background:rgba(255,255,255,.10);color:var(--fo-txt2)}
.fo-paquet.fo-vise .fo-bul{box-shadow:0 0 0 2px var(--fo-or),inset 0 0 0 1px rgba(255,255,255,.09)}
.fo-bul{position:relative;max-width:100%;padding:7px 11px;border-radius:16px;font-size:var(--fo-txt-msg,14.5px);line-height:1.4;text-align:left;white-space:pre-wrap;overflow-wrap:anywhere;word-break:normal}
.fo-autre .fo-bul{color:var(--fo-txt);background:rgba(255,255,255,.075);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),inset 0 1px 0 rgba(255,255,255,.06)}
.fo-moi .fo-bul{color:#eef5fc;font-weight:500;background:linear-gradient(135deg,rgba(254,195,136,.26),rgba(254,195,136,.13));box-shadow:inset 0 0 0 1px rgba(254,195,136,.34),inset 0 1px 0 rgba(255,220,150,.18)}
/* LES MESSAGES DE L'ADMIN, EN BLEU (06/10/2026, user : « je suis l'admin : mes messages dans le forum s'affichent avec
   un halo, fond bleu ») : fond bleu et halo bleu, pour tout le monde (moi compris). Placé APRÈS les bulles « moi » et
   « autre » (il les remplace) et AVANT « à moi » (une réponse ou une mention qui m'est adressée garde son anneau or). */
.fo-staff .fo-bul{color:#eaf2ff;background:linear-gradient(135deg,rgba(64,140,255,.34),rgba(64,140,255,.16));box-shadow:inset 0 0 0 1px rgba(120,176,255,.6),inset 0 1px 0 rgba(190,220,255,.2),0 0 16px -3px rgba(70,145,255,.6)}
/* Une bulle qui ME répond ou ME mentionne : anneau or, barre gauche, fond or à 8 %. */
.fo-amoi .fo-bul,.fo-paquet.fo-amoi>.fo-bul{background:rgba(254,195,136,.08);box-shadow:inset 0 0 0 1px rgba(254,195,136,.55),inset 2px 0 0 var(--fo-or)}
.fo-autre [data-pos="seul"] .fo-bul:last-of-type,.fo-autre [data-pos="premier"] .fo-bul:last-of-type{border-bottom-left-radius:5px}
.fo-autre [data-pos="milieu"] .fo-bul,.fo-autre [data-pos="dernier"] .fo-bul{border-top-left-radius:5px}
.fo-autre [data-pos="milieu"] .fo-bul:last-of-type{border-bottom-left-radius:5px}
.fo-moi [data-pos="seul"] .fo-bul:last-of-type,.fo-moi [data-pos="premier"] .fo-bul:last-of-type{border-bottom-right-radius:5px}
.fo-moi [data-pos="milieu"] .fo-bul,.fo-moi [data-pos="dernier"] .fo-bul{border-top-right-radius:5px}
.fo-moi [data-pos="milieu"] .fo-bul:last-of-type{border-bottom-right-radius:5px}
.fo-imgs{display:flex;flex-wrap:wrap;gap:3px;max-width:100%}
.fo-moi .fo-imgs{justify-content:flex-end}
/* LA PASTILLE DES RÉACTIONS SUR LES PHOTOS (06/10/2026, signalement Knil007 : « réaction décalée sur les images ») : le paquet
   d'une photo s'étirait à la largeur de la colonne (ou de la ligne la plus large du bloc), la pastille se posait au bord
   de cette boîte, loin des images. Le paquet épouse ses photos ; plusieurs photos forment un album de deux colonnes
   de largeur fixe, dont la boîte a la vraie largeur. */
.fo-autre .fo-col>.fo-paquet:has(>.fo-imgs){align-self:flex-start}
.fo-imgs:has(>.fo-img+.fo-img){display:grid;grid-template-columns:repeat(2,min(140px,calc((100vw - 96px) / 2)));gap:3px}
.fo-imgs:has(>.fo-img+.fo-img) .fo-img img{width:100%;height:100%;max-width:none;max-height:none;aspect-ratio:1;object-fit:cover}
.fo-moi .fo-imgs:has(>.fo-img+.fo-img){justify-content:end}
.fo-bul.fo-img{display:block;padding:2px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);overflow:hidden}
/* Photos en vignette : 200 × 240 px au plus, proportions gardées, fond discret pendant le chargement. */
.fo-bul.fo-img img{display:block;width:auto;height:auto;max-width:min(200px,58vw);max-height:240px;border-radius:14px;object-fit:cover;background:rgba(255,255,255,.06)}
/* dimensions connues (20/10/2026) : la largeur qu'aura la photo chargée, posée AVANT son arrivée (sinon 0 x 0 puis +240 px :
   le fil sautait sous le pouce). min() rejoue les plafonds ci-dessus et la taille propre de l'image (jamais agrandie). */
.fo-bul.fo-img img[style*="--fo-ar"]{width:min(200px,58vw,240px * var(--fo-ar),var(--fo-lw,9999px))}
/* L'appui long sur une photo ou un lien ouvre le menu du message (compte connecté) : ni bulle iOS
   « Enregistrer l'image », ni sélection, ni glisser-déposer au doigt. */
.fo-img-appui,.fo-img-appui img,.fo-lienmsg-appui,.fo-lienmsg-appui img{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
@media (hover:none){.fo-img-appui,.fo-img-appui img,.fo-lienmsg-appui,.fo-lienmsg-appui img{-webkit-user-drag:none}}
.fo-bul.fo-vide{background:transparent;box-shadow:none;border:1px dashed rgba(255,255,255,.16);color:var(--fo-sourd);font-size:13px;font-weight:400;font-style:italic}
.fo-moi .fo-bul.fo-vide{color:var(--fo-sourd);background:transparent}
.fo-bul.fo-vide button{padding:0;border:0;background:none;color:var(--fo-or-txt);font:inherit;font-style:normal;font-weight:700;text-decoration:underline;cursor:pointer}
/* LA RÉPONSE FAÇON INSTAGRAM : « a répondu à Nami », puis l'extrait visé dans une bulle grise que ma bulle
   recouvre par le bas (marge négative). Un BOUTON qui fait défiler, pas une ancre (l'historique reste propre). */
.fo-cite{display:flex;flex-direction:column;align-items:flex-start;gap:3px;max-width:100%;margin:6px 0 -16px;padding:0;border:0;background:none;font:inherit;color:var(--fo-sourd);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.fo-moi .fo-cite{align-items:flex-end}
.fo-cite.fo-cite-seule{margin-bottom:0;cursor:default}
.fo-cite-qui{display:inline-flex;align-items:center;gap:4px;max-width:100%;padding:0 6px;font-size:11.5px;font-weight:600;color:var(--fo-txt2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fo-cite-qui svg{width:12px;height:12px;flex:none}
.fo-cite-bulle{display:flex;align-items:center;gap:8px;max-width:min(260px,100%);padding:7px 11px 22px;border-radius:16px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);color:var(--fo-txt2);font-size:13px;line-height:1.35}
.fo-cite-bulle img{width:34px;height:34px;flex:none;border-radius:8px;object-fit:cover;background:rgba(255,255,255,.06)}
.fo-cite-micro{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:8px;background:rgba(255,255,255,.08)}
.fo-cite-micro svg{width:16px;height:16px}
.fo-cite-txt{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;min-width:0;white-space:normal;overflow-wrap:anywhere}
@media (hover:hover){.fo-cite:hover .fo-cite-bulle{background:rgba(255,255,255,.1)}}
.fo-cite~.fo-bul,.fo-cite~.fo-imgs{position:relative;z-index:1}
.fo-heure{display:inline-flex;align-items:center;gap:4px;padding:0 6px;font-size:11px;color:var(--fo-sourd)}
/* « ✓ » sous la dernière bulle du bloc une fois l'envoi confirmé (aria-hidden ; sr-only « envoyé » à côté). */
.fo-envoye{font-size:10px;color:var(--fo-or-txt);animation:fo-fondu 90ms var(--fo-out)}
.fo-trophee{padding:0 6px;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--fo-vert)}
.fo-puce-sujet{display:inline-flex;align-items:center;height:16px;padding:0 6px;border-radius:99px;background:rgba(254,195,136,.16);color:var(--fo-or-txt);font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
/* CACHÉ AUX AUTRES (06/10/2026), vu par l'admin seulement : la bulle s'efface à moitié, une étiquette dit pourquoi. */
.fo-paquet.fo-cache .fo-bul,.fo-paquet.fo-cache .fo-imgs,.fo-paquet.fo-cache .fo-cite,.fo-paquet.fo-cache .fo-lienmsg-carte{opacity:.48}
.fo-cache-mot{display:inline-flex;align-items:center;gap:4px;width:fit-content;max-width:100%;height:18px;padding:0 7px;border-radius:99px;background:rgba(148,163,184,.16);color:var(--fo-txt2);font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.fo-cache-mot svg{width:12px;height:12px;flex:none}
/* BLOQUÉ PAR MOI (08/10/2026) : les messages d'un membre bloqué tiennent en une ligne discrète, au milieu du fil ;
   « Afficher » (cible de 44 px) les rend pour la visite. */
.fo-bloque-ligne{align-self:center;display:flex;align-items:center;gap:6px;max-width:100%;margin:6px 0;padding:0 4px 0 12px;min-height:44px;border-radius:99px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);color:var(--fo-txt2);font-size:13px}
.fo-bloque-ligne svg{width:15px;height:15px;flex:none;color:var(--fo-sourd2)}
.fo-bloque-ligne span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fo-bloque-ligne button{flex:none;min-height:44px;padding:0 12px;border:0;border-radius:99px;background:transparent;color:var(--fo-or-txt);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
/* La pastille des réactions : 24 px de verre presque opaque, posée sur le bas de la bulle, cible de 44 px. */
.fo-jaime{position:absolute;bottom:-10px;z-index:2;display:inline-flex;align-items:center;gap:2px;height:24px;padding:0 7px 0 5px;border:0;border-radius:99px;background:var(--fo-surface);box-shadow:inset 0 0 0 1px var(--fo-bord),0 2px 8px -2px rgba(0,0,0,.6);color:var(--fo-txt2);font:inherit;font-size:12.5px;font-weight:800;cursor:pointer;transition:transform 100ms var(--fo-pop)}
.fo-jaime::before{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:44px;transform:translate(-50%,-50%)}
.fo-autre .fo-jaime{right:10px}
.fo-moi .fo-jaime{left:10px;background:color-mix(in srgb,var(--fo-or) 14%,var(--fo-surface))}
.fo-jaime.fo-mienne{background:rgba(254,195,136,.22);box-shadow:inset 0 0 0 1px rgba(254,195,136,.45),0 2px 8px -2px rgba(0,0,0,.6);color:var(--fo-or-txt)}
.fo-jaime .fo-em{font-size:13px;letter-spacing:-2px}
.fo-jaime .fo-n{margin-left:4px;font-variant-numeric:tabular-nums}
/* Une réaction reçue : la pastille pop une fois (classe fo-pop posée à chaque changement). */
.fo-jaime.fo-pop{animation:foPop 220ms var(--fo-pop)}
@keyframes foPop{from{transform:scale(.55)}to{transform:none}}
/* Le pouce du double-toucher : monte de 28 px et s'efface, 400 ms, sans gêner le doigt. */
.fo-pouce{position:absolute;left:50%;top:40%;z-index:3;font-size:20px;line-height:1;pointer-events:none;animation:foPouce 400ms var(--fo-out) both}
@keyframes foPouce{from{transform:translate(-50%,0);opacity:1}to{transform:translate(-50%,-28px);opacity:0}}
/* Au survol (PC, souris) : trois réactions et « Répondre » à côté du paquet, opacité seule. */
.fo-survol{position:absolute;top:0;z-index:3;display:none;align-items:center;gap:2px;padding:2px;border-radius:99px;background:var(--fo-surface);box-shadow:inset 0 0 0 1px var(--fo-bord);opacity:0;transition:opacity 120ms var(--fo-out)}
.fo-autre .fo-survol{left:calc(100% + 6px)}
.fo-moi .fo-survol{right:calc(100% + 6px)}
.fo-survol button{display:grid;place-items:center;min-width:28px;height:28px;padding:0 6px;border:0;border-radius:99px;background:transparent;color:var(--fo-txt2);font:inherit;font-size:15px;line-height:1;cursor:pointer}
.fo-survol .fo-survol-rep{font-size:12.5px;font-weight:700}
@media (hover:hover) and (min-width:1024px){.fo-survol{display:inline-flex}.fo-paquet:hover .fo-survol,.fo-paquet:focus-within .fo-survol{opacity:1}.fo-survol button:hover{background:rgba(255,255,255,.10)}}
/* PC : messages 15 px / 1,45, bulles à 72 %. */
@media (min-width:1024px){.fo-bulles,.fo-bul{font-size:15px}.fo-bul{line-height:1.45}.fo-col{max-width:72%}}

/* ── 11 · L'APPUI LONG : voile, menu collé, barre de réactions, feuilles ── */
.fo-voile{position:fixed;inset:0;z-index:85;background:rgba(0,0,0,.55);touch-action:none;animation:fo-fondu 90ms var(--fo-out)}
@keyframes fo-fondu{from{opacity:0}to{opacity:1}}
/* Sous un menu d'appui long, les trois surfaces collantes sont sous le voile : elles rendent leur flou
   (budget : 4 backdrop-filter par écran). */
html.fo-fige :is(.fo-barre-nav,.fo-sal,.fo-compose-in){-webkit-backdrop-filter:none;backdrop-filter:none}
/* Le menu collé sous la bulle : 5 lignes de 46 px au plus, libellé à gauche, icône à droite. */
.fo-menu{position:fixed;top:0;left:0;z-index:88;display:flex;flex-direction:column;width:min(236px,calc(100vw - 24px));padding:6px;border-radius:18px;background:var(--fo-surface);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:inset 0 0 0 1px var(--fo-bord),0 18px 50px -12px rgba(0,0,0,.9);animation:fo-menu 150ms var(--fo-out);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none}
@keyframes fo-menu{from{transform:scale(.85);opacity:0}to{transform:none;opacity:1}}
.fo-menu button{display:flex;align-items:center;justify-content:space-between;gap:14px;height:46px;flex:none;padding:0 14px;border:0;border-radius:12px;background:transparent;color:var(--fo-txt);font:inherit;font-size:15px;font-weight:600;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.fo-menu button:active{background:rgba(255,255,255,.08);outline:none}
/* Le focus au clavier se VOIT (contour or) ; pas sur un menu ouvert au doigt, où la première action reçoit
   le focus pour les lecteurs d'écran sans devoir paraître présélectionnée. */
.fo-menu button:focus{outline:none}
.fo-menu:not([data-via="tactile"]) button:focus-visible{background:rgba(255,255,255,.08);outline:2px solid var(--fo-or);outline-offset:-2px}
@media (hover:hover){.fo-menu button:hover{background:rgba(255,255,255,.08)}}
.fo-menu button span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fo-menu svg{width:20px;height:20px;flex:none;color:var(--fo-txt2)}
.fo-menu .fo-danger,.fo-menu .fo-danger svg{color:var(--fo-rouge)}
.fo-barre{position:absolute;bottom:calc(100% + 10px);z-index:87;display:flex;padding:5px;border-radius:99px;background:var(--fo-surface);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:inset 0 0 0 1px var(--fo-bord),0 14px 40px -8px rgba(0,0,0,.9);animation:fo-reac 120ms var(--fo-pop)}
.fo-barre.fo-dessous{bottom:auto;top:calc(100% + 10px)}
.fo-autre .fo-barre{left:0}
.fo-moi .fo-barre{right:0}
.fo-barre button{width:46px;height:46px;flex:none;padding:0;border:0;border-radius:99px;background:transparent;font-size:26px;line-height:1;cursor:pointer;transition:transform 100ms var(--fo-pop),background 100ms}
.fo-barre button:hover,.fo-barre button:focus-visible{transform:scale(1.22);background:rgba(255,255,255,.10);outline:none}
.fo-barre button[aria-pressed="true"]{background:rgba(254,195,136,.22)}
/* « + » : TOUS LES SMILEYS (30/09/2026), puis la feuille qu'il ouvre : onglets des groupes, grille d'un groupe. */
.fo-barre .fo-barre-plus{background:rgba(255,255,255,.08);color:var(--fo-txt);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.fo-barre .fo-barre-plus:hover,.fo-barre .fo-barre-plus:focus-visible{background:rgba(254,195,136,.22);color:var(--fo-or)}
.fo-barre-plus svg{width:24px;height:24px}
/* Petit téléphone (320-360 px) : 7 boutons (5 rapides, ma réaction, le « + ») tiennent dans l'écran. */
@media (max-width:360px){.fo-barre{padding:4px}.fo-barre button{width:40px;height:40px;font-size:23px}.fo-barre-plus svg{width:21px;height:21px}}
.fo-emojis-onglets{display:flex;gap:2px;overflow-x:auto;padding:2px 2px 6px;scrollbar-width:none}
.fo-emojis-onglets::-webkit-scrollbar{display:none}
.fo-emojis-onglets button{flex:1 1 0;min-width:32px;max-width:52px;height:42px;border:0;border-radius:12px;background:transparent;font-size:22px;line-height:1;cursor:pointer}
.fo-emojis-onglets button[aria-selected="true"]{background:rgba(254,195,136,.2);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fo-or) 55%,transparent)}
.fo-emojis-titre{margin:6px 6px 4px;font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--fo-txt2)}
.fo-emojis-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));max-height:min(46vh,380px);overflow-y:auto;overscroll-behavior:contain}
/* Les récents : une bande de deux rangées au plus au-dessus de la grille (10/10/2026). */
.fo-emojis-recents{max-height:96px}
.fo-emojis-grille button{height:46px;border:0;border-radius:12px;background:transparent;font-size:28px;line-height:1;cursor:pointer}
.fo-emojis-grille button:hover,.fo-emojis-grille button:focus-visible{background:rgba(255,255,255,.1);outline:none}
.fo-emojis-grille button[aria-pressed="true"]{background:rgba(254,195,136,.22)}
@keyframes fo-reac{from{transform:scale(.55) translateY(10px);opacity:0}to{transform:none;opacity:1}}
/* Toute feuille se pose SUR le clavier du téléphone s'il est ouvert (--fo-clavier), jamais dessous. Plus
   haute que la place restante, elle défile. Matière : les halos de .menu-verre, arête haute or, poignée. */
.fo-feuille{position:fixed;left:0;right:0;bottom:var(--fo-clavier,0px);z-index:90;max-height:calc(100% - var(--fo-clavier,0px) - 12px);overflow-y:auto;overscroll-behavior:contain;max-width:740px;margin:0 auto;padding:18px 10px calc(14px + env(safe-area-inset-bottom));background:radial-gradient(120% 60% at 50% -10%,rgba(254,195,136,.14),transparent 60%),radial-gradient(90% 50% at 10% 108%,rgba(74,159,212,.12),transparent 62%),var(--fo-fond);border-top:1px solid color-mix(in srgb,var(--fo-or) 38%,transparent);border-radius:22px 22px 0 0;box-shadow:0 -24px 64px -16px rgba(0,0,0,.9);animation:fo-monte 130ms var(--fo-out)}
.fo-feuille::before{content:"";position:absolute;left:50%;top:7px;width:40px;height:4px;border-radius:99px;background:rgba(255,255,255,.25);transform:translateX(-50%);pointer-events:none}
@keyframes fo-monte{from{transform:translateY(100%)}to{transform:none}}
/* Les feuilles « Moi » et « Réponses et mentions » gardent un peu plus d air en bas. */
.fo-feuille.fo-pmoi-feuille,.fo-feuille.fo-notifs-feuille{padding-bottom:calc(18px + env(safe-area-inset-bottom))}
.fo-feuille-titre{margin:2px 8px 10px;font-size:13px;font-weight:700;color:var(--fo-sourd)}
.fo-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(78px,1fr));gap:2px}
.fo-actions button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:66px;padding:6px 4px;border:0;border-radius:14px;background:transparent;color:var(--fo-txt2);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;text-align:center}
.fo-actions button:active,.fo-actions button:focus-visible{background:rgba(255,255,255,.08);outline:none}
.fo-actions svg{width:22px;height:22px;color:var(--fo-or)}
.fo-actions .fo-danger,.fo-actions .fo-danger svg{color:var(--fo-rouge)}
.fo-liste-choix{display:flex;flex-direction:column;gap:6px}
.fo-liste-choix button{display:flex;align-items:center;min-height:50px;padding:0 16px;border:0;border-radius:14px;background:var(--fo-verre);box-shadow:inset 0 0 0 1px var(--fo-bord);color:var(--fo-txt);font:inherit;font-size:15px;font-weight:600;text-align:left;cursor:pointer}
.fo-liste-choix button:active{background:rgba(255,255,255,.10)}
.fo-liste-choix button small{margin-left:auto;padding-left:12px;font-size:12.5px;font-weight:500;color:var(--fo-sourd)}
.fo-liste-choix .fo-annuler{justify-content:center;background:transparent;box-shadow:none;color:var(--fo-sourd)}
/* L'image de la conversation (admin, 23/09) : les photos du sujet en grille de vignettes carrees, la choisie cerclee d'or. */
.fo-choix-images{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:2px 0 10px}
.fo-choix-images button{position:relative;aspect-ratio:1;padding:0;border:0;border-radius:12px;overflow:hidden;background:var(--fo-verre);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.fo-choix-images button img{display:block;width:100%;height:100%;object-fit:cover}
.fo-choix-images button:active{transform:scale(.97)}
.fo-choix-images button:focus-visible{outline:2px solid var(--fo-or);outline-offset:2px}
.fo-choix-images .fo-choisie{box-shadow:inset 0 0 0 2px var(--fo-or)}
.fo-choix-vide{margin:0 0 10px;font-size:13.5px;color:var(--fo-sourd)}
/* Les boutons pleins : or, texte encre. Le danger : rouge sur rouge à 12 %. */
.fo-plein,.fo-liste-choix .fo-plein{justify-content:center;gap:8px;border:0;background:var(--fo-or);box-shadow:none;color:var(--fo-sur-or);font-weight:800}
.fo-liste-choix .fo-danger{background:rgba(255,149,146,.12);box-shadow:none;color:var(--fo-rouge)}
/* Le toast : en haut par défaut (existant) ; .fo-toast-bas = la pilule au-dessus du composeur (une seule à
   la fois avec « ↓ N nouveaux ») ; .fo-toast-or = or plein ; .fo-sort = sortie par l'opacité. */
.fo-toast{position:fixed;left:50%;top:14px;z-index:95;width:min(380px,calc(100% - 28px));transform:translateX(-50%);margin:0;padding:12px 14px;border:0;border-radius:16px;background:var(--fo-surface);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:inset 0 0 0 1px var(--fo-bord),0 14px 40px -10px rgba(0,0,0,.95);font:inherit;font-size:13.5px;line-height:1.45;color:var(--fo-txt);text-align:left;animation:fo-tombe 280ms var(--fo-pop)}
button.fo-toast{cursor:pointer}
@keyframes fo-tombe{from{transform:translate(-50%,-150%)}to{transform:translate(-50%,0)}}
.fo-toast-bas,.fo-toast-gain{top:auto;bottom:calc(max(3.75rem + env(safe-area-inset-bottom), var(--fo-clavier,0px)) + var(--fo-compose-h,56px) + 12px - var(--ecart-bas,0px));z-index:62;display:flex;align-items:center;gap:8px;width:auto;max-width:calc(100% - 28px);min-height:44px;padding:0 16px;border-radius:99px;font-weight:600;animation:fo-surgit 240ms var(--fo-pop)}
.fo-toast-bas img{border-radius:99px}
@media (min-width:1024px){.fo-toast-bas{bottom:calc(var(--fo-compose-h,56px) + 12px)}}
.fo-toast-or,.fo-toast-gain{background:var(--fo-or);color:var(--fo-sur-or);font-weight:700;box-shadow:0 12px 30px -8px rgba(0,0,0,.8);-webkit-backdrop-filter:none;backdrop-filter:none}
.fo-toast.fo-sort{animation:fo-fondu 180ms var(--fo-in) reverse both;pointer-events:none}
/* « ↓ N nouveaux messages » : or plein, au-dessus du composeur (et du clavier). */
.fo-nouveaux{position:fixed;left:50%;bottom:calc(max(3.75rem + env(safe-area-inset-bottom), var(--fo-clavier,0px)) + var(--fo-compose-h,56px) + 12px - var(--ecart-bas,0px));z-index:61;transform:translateX(-50%);min-height:44px;padding:0 18px;border:0;border-radius:99px;background:var(--fo-or);color:var(--fo-sur-or);font:inherit;font-size:13.5px;font-weight:800;cursor:pointer;box-shadow:0 12px 30px -8px rgba(0,0,0,.8);animation:fo-surgit 240ms var(--fo-pop)}
/* « left:50% » NE LAISSE QUE LA MOITIE DE L'ECRAN comme largeur disponible : un libelle un peu long
   se coupait en deux lignes et le texte debordait de la pilule (mesure du 23/09 : fond de 185 px
   pour un texte de 255 px). La propriete width:max-content rend la boite aussi large que son texte, et le
   plafond la garde a l'ecran. Vaut pour « N nouveaux messages » comme pour le coffre.
   (Aucun accent grave ici : ce CSS vit dans un litteral gabarit, un accent grave le refermerait.) */
.fo-nouveaux{display:inline-flex;align-items:center;justify-content:center;gap:7px;width:max-content;max-width:calc(100% - 28px);white-space:nowrap;overflow:hidden}
.fo-nouveaux:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (min-width:1024px){.fo-nouveaux{bottom:calc(var(--fo-compose-h,56px) + 12px)}}
@keyframes fo-surgit{from{transform:translate(-50%,16px);opacity:0}to{transform:translate(-50%,0);opacity:1}}

/* ── 12 · LE COMPOSEUR (ComposeurBulle) ── 56 px au repos, collé au-dessus de la barre du site (ou du
   clavier : bottom posé en ligne par le composant). Sur PC, dans le flux et collant en bas de la colonne. */
.fo-compose{position:fixed;left:0;right:0;z-index:60;bottom:calc(3.75rem + env(safe-area-inset-bottom) - var(--ecart-bas,0px))}
@media (min-width:1024px){.fo-compose{position:sticky;bottom:0;left:auto;right:auto}
/* Rendu HORS de main.fo-page (DOM actuel du fil) : le composeur se cale lui-même sur la colonne de droite
   (rail 300 + 16 de gouttière) ; DANS .fo-principal, il prend simplement la largeur de la colonne. */
.fo>.fo-compose{max-width:1120px;margin:0 auto;padding:0 24px;box-sizing:border-box}
.fo>.fo-compose .fo-compose-in{max-width:none;margin:0 0 0 316px}
.fo-page .fo-compose .fo-compose-in{max-width:none;margin:0}}
@media (min-width:1024px) and (max-width:1199px){.fo>.fo-compose .fo-compose-in{margin-left:276px}}
.fo-compose-in{max-width:820px;margin:0 auto;border-top:1px solid var(--fo-bord);background:rgba(11,13,18,.86);-webkit-backdrop-filter:blur(24px) saturate(1.3);backdrop-filter:blur(24px) saturate(1.3);box-shadow:0 -24px 64px -16px rgba(0,0,0,.9)}
@media (min-width:640px){.fo-compose-in{border:1px solid var(--fo-bord);border-bottom:0;border-radius:18px 18px 0 0}}
/* LA SÉRIE FLOTTE AU-DESSUS DU PANNEAU (01/10/2026) : la même colonne que lui, sans son fond, son flou ni son filet. */
.fo-compose-in.fo-compose-serie{display:grid;grid-template-rows:1fr;border:0;border-radius:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;transition:grid-template-rows 240ms var(--fo-out),opacity 200ms var(--fo-out)}
.fo-compose-serie>.fo-serie-bande{min-height:0}
/* Le message du jour parti : la carte se replie et s'efface (puis elle est retirée). */
.fo-compose-in.fo-compose-serie.fo-compose-serie-sort{grid-template-rows:0fr;opacity:0;overflow:hidden}
@media (prefers-reduced-motion:reduce){.fo-compose-in.fo-compose-serie{transition:none}}
/* LE JOURNAL DE BORD (23/10/2026) : au-dessus du champ de l'admin, « Prevenir tout le monde » (coche) et ce qui en est sorti. */
.fo-compose-in.fo-compose-annonce{display:grid;gap:4px;margin-bottom:6px;padding:8px 12px;border-radius:14px;background:#2a2112;box-shadow:inset 0 0 0 1px rgba(255,206,140,.35);-webkit-backdrop-filter:none;backdrop-filter:none}
.fo-compose-annonce label{display:flex;align-items:center;gap:10px;min-height:32px;font-size:13px;line-height:1.3;color:#f3e3c4;cursor:pointer}
.fo-compose-annonce input{flex:none;width:20px;height:20px;accent-color:#f6a43f}
.fo-compose-annonce b{color:#ffcf8a}
.fo-compose-annonce small{font-size:12px;color:#d9c9b1}
/* « Réponse à X » / édition : 36 px, liseré or. */
.fo-bandeau{display:flex;align-items:center;gap:10px;min-height:36px;padding:4px 12px 4px 12px;border-bottom:1px solid var(--fo-filet);font-size:12.5px}
.fo-bandeau i{width:3px;align-self:stretch;border-radius:99px;background:var(--fo-or)}
.fo-bandeau div{flex:1;min-width:0}
.fo-bandeau b{display:block;font-size:12px;color:var(--fo-or-txt)}
.fo-bandeau span{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--fo-sourd)}
.fo-bandeau button{position:relative;width:36px;height:36px;flex:none;border:0;border-radius:99px;background:rgba(255,255,255,.08);color:var(--fo-txt);font-size:15px;cursor:pointer}
.fo-bandeau button::before{content:"";position:absolute;inset:-4px}
.fo-bandeau .fo-bandeau-vignette{display:block;width:36px;height:36px;flex:none;border-radius:10px;object-fit:cover;background:rgba(255,255,255,.08)}
.fo-bandeau .fo-bandeau-vocal{display:grid;place-items:center;color:var(--fo-or)}
.fo-bandeau .fo-bandeau-vocal svg{width:20px;height:20px}
.fo-apercus{display:flex;gap:8px;padding:10px 12px 0;overflow-x:auto}
.fo-apercu{position:relative;width:64px;height:84px;flex:none;overflow:hidden;border-radius:12px;background:rgba(255,255,255,.08)}
.fo-apercu img{display:block;width:100%;height:100%;object-fit:cover;cursor:zoom-in}
.fo-apercu button{position:absolute;top:3px;right:3px;width:26px;height:26px;border:0;border-radius:99px;background:rgba(0,0,0,.7);color:#fff;font-size:12px;cursor:pointer}
.fo-apercu button::before{content:"";position:absolute;inset:-9px}
.fo-alerte{margin:0;padding:8px 14px 0;font-size:12.5px;line-height:1.45;color:var(--fo-rouge)}
.fo-indice{margin:0;padding:8px 14px 0;font-size:12.5px;line-height:1.45;color:var(--fo-sourd)}
.fo-pied{display:flex;align-items:flex-end;gap:4px;padding:8px 10px}
.fo-pied.fo-pied-rec{align-items:center}
.fo-pied.fo-pied-deplie .fo-plus{color:var(--fo-txt2)}
/* La case du bouton de droite : 44 px, le micro ou l'envoi dedans (remonté à la bascule : le CSS joue l'entrée). */
.fo-droit{display:grid;place-items:center;flex:none;width:44px;height:44px}
.fo-mic{position:relative;display:grid;place-items:center;width:44px;height:44px;flex:none;padding:0;border:0;background:transparent;color:var(--fo-bleute);font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;animation:foPopIn 200ms var(--fo-pop)}
.fo-mic:disabled{opacity:.45;cursor:progress}
.fo-mic .fo-ico{width:40px;height:40px}.fo-mic .fo-ico-svg{width:20px;height:20px}
/* Le « + » : anneau blanc bleuté de 40 px dans une cible de 44 ; ouvert, il tourne en croix (transform seul). */
.fo-plus{position:relative;display:grid;place-items:center;width:44px;height:44px;flex:none;padding:0;border:0;background:transparent;color:var(--fo-bleute);font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.fo-plus .fo-ico{transition:transform 200ms var(--fo-out)}
.fo-plus[aria-expanded="true"] .fo-ico{transform:rotate(45deg)}
/* Caméra · Galerie · Micro dépliés en ligne : translateX -8 → 0 + opacité, 200 ms, délais 0/40/80 (--fo-d). */
.fo-outils{display:flex;align-items:center;gap:2px;flex:none;align-self:center;padding-bottom:2px}
.fo-outils>*{animation:foOutil 200ms var(--fo-d,0ms) var(--fo-out) both}
/* LE PLATEAU DU « + » (02/10/2026) : au-dessus du champ, outils nommés, une ou deux lignes ; la ligne du champ ne
   porte plus que + · champ · envoi (six outils en ligne écrasaient le champ en colonne de lettres). */
/* UNE RANGÉE QUI GLISSE vers la droite (user : « c'est mieux en glissement vers la droite ») : les outils de tous, un
   filet or, puis ceux de l'admin ; le fondu du bord droit dit qu'il y en a d'autres, la marge droite le laisse
   retomber sur du vide une fois au bout. */
.fo-outils.fo-plateau{display:flex;flex-direction:row;align-items:flex-start;align-self:stretch;flex:none;gap:4px;padding:8px 30px 2px 6px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
.fo-plateau::-webkit-scrollbar{display:none}
.fo-plateau>*{animation:none}
.fo-plateau-l{display:flex;flex:none;gap:4px}
.fo-plateau-l .fo-outil{scroll-snap-align:start}
.fo-plateau-sep{flex:none;align-self:center;width:1px;height:34px;margin:0 4px 12px;background:rgba(254,195,136,.4)}
.fo-plateau-admin .fo-outil-nom{color:#e0b558}
.fo-plateau-l>*{animation:foOutil 200ms var(--fo-d,0ms) var(--fo-out) both}
.fo-plateau .fo-outil{display:flex;flex-direction:column;align-items:center;gap:1px;width:auto;min-width:56px;height:auto;padding:2px 2px 4px;border-radius:14px}
.fo-outil-nom{font-size:11px;font-weight:600;line-height:1.1;color:var(--fo-txt2);white-space:nowrap}
.fo-plateau .fo-outil:is([aria-disabled="true"],:disabled) .fo-outil-nom{opacity:.5}
@keyframes foOutil{from{transform:translateX(-8px);opacity:0}to{transform:none;opacity:1}}
.fo-outil{position:relative;display:grid;place-items:center;width:40px;height:44px;flex:none;padding:0;border:0;border-radius:99px;background:transparent;color:var(--fo-bleute);cursor:pointer;-webkit-tap-highlight-color:transparent}
.fo-outil::before{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
.fo-outil::after{content:"";position:absolute;left:50%;top:50%;width:32px;height:32px;transform:translate(-50%,-50%);border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);pointer-events:none}
.fo-outil:has(.fo-ico)::after{content:none}
.fo-outil svg{position:relative;width:18px;height:18px}
.fo-outil:disabled{opacity:.45;cursor:progress}
.fo-outil[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.fo-outil-rouge{color:var(--fo-rouge)}
/* L'enregistreur : point rouge qui respire par l'opacité, chrono tabulaire. */
.fo-rec{display:flex;align-items:center;gap:10px;flex:1;min-width:0;min-height:44px;padding:0 12px;border-radius:22px;background:rgba(0,0,0,.35);box-shadow:inset 0 0 0 1px rgba(255,255,255,.10)}
.fo-rec-point{width:8px;height:8px;flex:none;border-radius:99px;background:#ff4d4f;animation:foRec 1s ease-in-out infinite}
@keyframes foRec{0%,100%{opacity:1}50%{opacity:.35}}
.fo-rec-temps{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.fo-rec-max{font-size:12.5px;color:var(--fo-sourd);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fo-rec-fin .fo-rec-point{animation:none;background:var(--fo-ambre)}
.fo-bul.fo-bul-vocal{padding:6px 8px 6px 2px;min-width:min(100%,252px)}
.fo-vocal{display:flex;align-items:center;gap:4px;max-width:100%}
.fo-apercu.fo-apercu-vocal{width:auto;height:44px;display:inline-flex;align-items:center;gap:8px;padding:0 40px 0 14px;border-radius:22px;font-size:13px;font-weight:700;color:var(--fo-txt);white-space:nowrap}
.fo-apercu-vocal svg{width:18px;height:18px;color:var(--fo-or)}
.fo-apercu.fo-apercu-video{width:112px;height:84px}
.fo-apercu-video img,.fo-apercu-video-noir{display:block;width:100%;height:100%;object-fit:cover;background:#000;cursor:default}
.fo-apercu-video-info{position:absolute;left:4px;bottom:6px;display:inline-flex;align-items:center;gap:4px;padding:2px 6px;border-radius:8px;background:rgba(0,0,0,.72);color:#fff;font-size:11.5px;font-weight:800;font-variant-numeric:tabular-nums}
.fo-apercu-video-info svg{width:13px;height:13px}
.fo-apercu-video-barre{position:absolute;left:0;bottom:0;height:3px;background:var(--fo-or);transition:width .2s linear}
/* LES PHOTOS EN ROUTE (30/09/2026, vidéo user « on dirait que ça marche pas ») : la vignette du fichier choisi,
   voilée, une roue, l'étape puis le pourcentage de l'envoi, et une barre (indéterminée pendant la préparation). */
.fo-apercu.fo-apercu-envoi img{filter:brightness(.5) saturate(.85);cursor:default}
.fo-apercu-envoi-voile{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.8)}
.fo-apercu-envoi-roue{width:22px;height:22px;border-radius:50%;border:2.5px solid rgba(255,255,255,.3);border-top-color:var(--fo-or);animation:fo-envoi-roue .8s linear infinite}
.fo-apercu-envoi-txt{font-size:11px;font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums}
.fo-apercu-envoi-attente{position:absolute;left:0;bottom:0;height:3px;width:45%;background:var(--fo-or);animation:fo-envoi-attente 1.2s ease-in-out infinite}
@keyframes fo-envoi-roue{to{transform:rotate(360deg)}}
@keyframes fo-envoi-attente{from{transform:translateX(-100%)}to{transform:translateX(222%)}}
@media (prefers-reduced-motion:reduce){.fo-apercu-envoi-roue,.fo-apercu-envoi-attente{animation:none}}
.fo-bul.fo-bul-video{padding:0;background:#000;border-radius:14px;overflow:visible;width:fit-content;max-width:100%}
/* LES GIF (07/10/2026) : la bulle d'un GIF est l'image elle-même, comme une photo (même cadre, même rayon). */
.fo-bul.fo-bul-gif{display:block;padding:2px;width:fit-content;max-width:100%;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);overflow:hidden;line-height:0}
.fo-bul.fo-bul-gif img{display:block;width:auto;height:auto;max-width:min(240px,62vw);max-height:260px;border-radius:14px;object-fit:cover;background:rgba(255,255,255,.06)}
/* La feuille des GIF : recherche, thèmes One Piece, mosaïque qui défile VERS LE BAS (07/10/2026 : la grille avait une
   hauteur fixe, le navigateur rangeait le surplus en colonnes vers la droite ; 08/10 : places calculées, la page
   suivante ne déplace plus ce qu'on regarde), attribution KLIPY. */
.fo-gif-feuille{display:flex;flex-direction:column;gap:8px;padding:22px 12px calc(10px + env(safe-area-inset-bottom));height:min(82vh,680px);height:min(82dvh,680px);transition:transform 220ms cubic-bezier(.2,.8,.2,1)}
.fo-gif-feuille.fo-gif-tire{transition:none}
.fo-gif-poignee{position:absolute;left:0;right:0;top:0;height:24px;touch-action:none;cursor:grab}
.fo-gif-tete{display:flex;align-items:center;gap:8px;flex:none}
.fo-gif-tete-titre{flex:1;min-width:0;margin:0 4px;font-size:17px;font-weight:700;color:var(--fo-txt)}
.fo-gif-recherche{flex:1;min-width:0;display:flex;align-items:center;gap:8px;height:44px;padding:0 2px 0 12px;border-radius:12px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.fo-gif-recherche svg{width:18px;height:18px;flex:none;color:var(--fo-txt2)}
.fo-gif-recherche input{flex:1;min-width:0;height:100%;border:0;background:transparent;color:var(--fo-txt);font:inherit;font-size:16px;outline:none;-webkit-appearance:none;appearance:none}
/* l'anneau de focus est porté par le cadre (un seul anneau) ; la croix native (bleue) cède la place à « Effacer » */
.fo .fo-gif-recherche input:focus-visible{outline:none}
.fo-gif-recherche input::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
.fo-gif-recherche:focus-within{box-shadow:inset 0 0 0 1.5px var(--fo-or)}
.fo-gif-effacer{flex:none;display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:10px;background:transparent;cursor:pointer}
.fo-gif-recherche .fo-gif-effacer svg{width:19px;height:19px;color:var(--fo-sourd2)}
.fo-gif-fermer{flex:none;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:12px;background:rgba(255,255,255,.07);color:var(--fo-txt);cursor:pointer}
.fo-gif-fermer svg{width:20px;height:20px}
.fo-gif-themes{flex:none;display:flex;gap:6px;margin:0 -12px;padding:0 12px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
.fo-gif-themes::-webkit-scrollbar{display:none}
.fo-gif-theme{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border:0;border-radius:99px;background:rgba(255,255,255,.07);color:var(--fo-txt);font:inherit;font-size:14px;font-weight:600;white-space:nowrap;cursor:pointer}
.fo-gif-theme svg{width:15px;height:15px;flex:none}
.fo-gif-theme[aria-pressed="true"]{background:rgba(254,195,136,.2);color:var(--fo-or-txt);box-shadow:inset 0 0 0 1px rgba(254,195,136,.45)}
.fo-gif-ligne{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:24px}
.fo-gif-libelle{min-width:0;margin:0 2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:600;color:var(--fo-txt2)}
.fo-gif-quota{flex:none;margin:0;padding:2px 9px;border-radius:99px;background:rgba(255,255,255,.07);color:var(--fo-txt2);font-size:12px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.fo-gif-quota.fo-gif-quota-bas{background:rgba(254,195,136,.16);color:var(--fo-or-txt)}
.fo-gif-defile{flex:1;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
/* La mosaïque : chaque case est posée à sa place calculée (ForumGif.tsx, ranger). */
.fo-gif-grille{position:relative;contain:layout}
.fo-gif-grille.fo-gif-attente{opacity:.55}
.fo-gif-place{position:absolute;left:0;top:0;border-radius:10px}
.fo-gif-case{position:relative;display:block;width:100%;height:100%;padding:0;border:0;border-radius:inherit;overflow:hidden;background:rgba(255,255,255,.06);cursor:pointer;line-height:0;-webkit-tap-highlight-color:transparent;transition:transform 100ms var(--fo-out)}
.fo-gif-case img{display:block;width:100%;height:100%;object-fit:cover}
.fo .fo-gif-case:focus-visible{outline:2px solid var(--fo-or);outline-offset:-2px}
.fo-gif-case[aria-pressed="true"]::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 3px var(--fo-or);pointer-events:none}
@media (hover:hover) and (pointer:fine){.fo-gif-case:active{transform:scale(.97)}.fo-gif-case::before{content:"";position:absolute;inset:0;background:rgba(255,255,255,.08);opacity:0;transition:opacity 120ms;pointer-events:none}.fo-gif-case:hover::before{opacity:1}}
/* Recherche sans résultat : jamais d'impasse (des thèmes à toucher, et « Effacer »). */
.fo-gif-aucun{display:flex;flex-direction:column;align-items:center;gap:10px;padding:36px 8px 20px;text-align:center}
.fo-gif-aucun p{margin:0;font-size:15px;color:var(--fo-txt)}
.fo-gif-aucun p.fo-gif-aucun-pistes{font-size:13px;color:var(--fo-txt2)}
.fo-gif-aucun-puces{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.fo-gif-aucun-effacer{min-height:44px;padding:0 16px;border:0;border-radius:12px;background:transparent;color:var(--fo-or-txt);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
/* Quota atteint : la jauge pleine et l'heure du retour, rien qui invite à chercher pour rien. */
.fo-gif-fini{display:flex;flex-direction:column;align-items:center;gap:8px;padding:48px 16px 24px;text-align:center}
.fo-gif-fini b{font-size:17px;font-weight:700;color:var(--fo-txt)}
.fo-gif-fini>span:last-child{font-size:14px;color:var(--fo-txt2)}
.fo-gif-fini-jauge{display:flex;gap:6px;margin-bottom:8px}
.fo-gif-fini-jauge i{width:12px;height:12px;border-radius:50%;background:var(--fo-or)}
/* Le GIF choisi : son aperçu, ce qu'il coûte, et « Envoyer », en bas de la feuille (un second toucher l'envoie aussi). */
.fo-gif-envoi{flex:none;display:flex;align-items:center;gap:8px;padding:8px;border-radius:14px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(254,195,136,.35)}
.fo-gif-envoi-img{flex:none;height:52px;width:auto;max-width:70px;border-radius:9px;object-fit:cover}
.fo-gif-envoi-txt{flex:1;min-width:0;font-size:13.5px;font-weight:600;line-height:1.3;color:var(--fo-txt);font-variant-numeric:tabular-nums;text-wrap:balance}
.fo-gif-envoi-non{flex:none;display:grid;place-items:center;width:36px;height:44px;border:0;border-radius:12px;background:transparent;color:var(--fo-txt2);cursor:pointer}
.fo-gif-envoi-non svg{width:18px;height:18px}
.fo-gif-envoi-oui{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border:0;border-radius:12px;background:linear-gradient(135deg,#f5c25a,#feb86d);color:#121416;font:inherit;font-size:14.5px;font-weight:800;cursor:pointer}
.fo-gif-envoi-oui svg{width:16px;height:16px}
.fo-gif-vide{display:flex;align-items:center;justify-content:center;gap:8px;min-height:160px;margin:0;color:var(--fo-txt2);font-size:14px;text-align:center}
.fo-gif-vide svg,.fo-gif-bas svg{width:18px;height:18px}
.fo-gif-bas{display:flex;align-items:center;justify-content:center;gap:8px;min-height:40px;color:var(--fo-txt2);font-size:13px}
.fo-gif-klipy{flex:none;margin:0;font-size:11.5px;text-align:center;color:var(--fo-txt2)}
@media (prefers-reduced-motion:reduce){.fo-gif-feuille,.fo-gif-case,.fo-gif-case::before{transition:none}.fo-gif-case:active{transform:none}}
/* Une conversation archivée (07/10/2026) : sous le texte « on peut la lire », l'admin la désarchive d'un geste. */
.fo-desarchiver{display:block;margin:8px auto 0;min-height:44px;padding:0 18px;border:0;border-radius:12px;background:rgba(254,195,136,.16);color:var(--fo-or-txt);font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.fo-bul-video .fo-lv{width:min(78vw,420px,calc(min(62vh,520px) * var(--lv-ratio,1.78)));max-width:100%;border-radius:14px}
.fo-apercu.fo-apercu-vocal button{top:9px}
/* LE LECTEUR VOCAL (mécanique payée, inchangée) : lecture dans une cible de 44 px, onde symétrique, barres
   jouées pleines et les autres à 38 pour cent de la couleur du texte, curseur plus haut, temps restant,
   vitesse en pastille. Colonne de droite à largeur FIXE, bulle à hauteur fixe : rien ne bouge. */
.fo-vocal-btn{position:relative;display:grid;place-items:center;width:44px;height:44px;flex:none;padding:0;border:0;border-radius:12px;background:transparent;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform 100ms var(--fo-pop)}
.fo-vocal-btn:active{transform:scale(.88)}
.fo-vocal-btn svg{width:24px;height:24px;stroke-linejoin:round}
.fo-vocal-onde{display:flex;align-items:center;justify-content:space-between;gap:1.5px;flex:1;min-width:120px;height:44px;padding:0 2px;border-radius:8px;cursor:pointer;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.fo .fo-vocal-onde:focus-visible{outline:2px solid var(--fo-or);outline-offset:2px}
.fo-vocal-onde i{flex:1 1 0;min-width:1.5px;max-width:3.5px;height:var(--h,12px);border-radius:99px;background:currentColor;opacity:.38;pointer-events:none;transition:opacity 120ms,height 140ms var(--fo-out)}
.fo-vocal-onde i.fo-joue{opacity:1}
.fo-vocal-onde i.fo-curseur{opacity:1;height:calc(var(--h,12px) + 7px)}
.fo-vocal-attente .fo-vocal-onde i:not(.fo-joue):not(.fo-curseur){animation:foVocalAttente 800ms ease-in-out infinite alternate}
@keyframes foVocalAttente{from{opacity:.22}to{opacity:.5}}
.fo-vocal-droite{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;flex:none;width:42px;height:44px}
.fo-vocal-temps{font-size:12.5px;font-weight:700;line-height:16px;font-variant-numeric:tabular-nums;opacity:.92}
.fo-vocal-vitesse{position:relative;min-width:34px;height:20px;padding:0 7px;border:0;border-radius:99px;background:rgba(127,127,127,.28);background:color-mix(in srgb,currentColor 18%,transparent);color:inherit;font:inherit;font-size:11px;font-weight:800;line-height:20px;font-variant-numeric:tabular-nums;cursor:pointer;animation:fo-fondu 120ms var(--fo-out)}
.fo-vocal-vitesse::before{content:"";position:absolute;left:-4px;right:-4px;top:-12px;bottom:-12px}
.fo-paquet.fo-aime .fo-bul-vocal:has(+ .fo-jaime){padding-bottom:16px}
/* LES RÉACTIONS NE MORDENT PLUS SUR LE TEXTE (08/10/2026, skill webdesign-expert) : la pastille .fo-jaime descend de
   10 px sous la bulle et y entre de 14 px ; sur une bulle de texte elle cachait le bas de la dernière ligne (5 à 7 px
   mesurés, « … depuis des mois. »). La dernière bulle d'un message qui a des réactions lui garde sa place. */
.fo-paquet.fo-aime>.fo-bul:has(+ .fo-jaime){padding-bottom:17px}
/* Le champ : 16 px (zoom iOS évité), 40 → 140 px, fond noir à 35 %, anneau white/10 (or au focus). */
.fo-zone{position:relative;flex:1;min-width:0}
.fo-champ{display:block;width:100%;min-height:40px;max-height:140px;padding:9px 14px;border:0;border-radius:20px;background:rgba(0,0,0,.35);box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);color:var(--fo-txt);font:inherit;font-size:16px;line-height:1.35;resize:none;outline:none;overflow-y:auto}
@supports (field-sizing:content){.fo-champ{field-sizing:content}}
.fo-champ::placeholder{color:rgba(255,255,255,.45)}
.fo-champ:focus{box-shadow:inset 0 0 0 1px rgba(254,195,136,.55)}
.fo-zone.fo-avec-n .fo-champ{padding-right:72px}
.fo-compteur{position:absolute;right:14px;bottom:11px;font-size:11px;font-variant-numeric:tabular-nums;color:var(--fo-sourd);pointer-events:none}
.fo-compteur.fo-chaud{color:var(--fo-ambre)}
.fo-compteur.fo-trop{color:var(--fo-rouge);font-weight:800}
/* Le bouton de droite : rond de 40 px (cible 44) or plein « envoyer » ; .fo-env-micro = l'anneau micro blanc
   bleuté quand il n'y a rien à envoyer. Il pop à l'apparition (200 ms), se comprime à l'appui. */
.fo-env{position:relative;display:grid;place-items:center;width:40px;height:40px;flex:none;margin:2px;padding:0;border:0;border-radius:99px;background:var(--fo-or);color:var(--fo-sur-or);cursor:pointer;box-shadow:0 5px 16px -6px rgba(254,195,136,.8);transition:transform 100ms var(--fo-pop),opacity 120ms var(--fo-out);animation:foPopIn 200ms var(--fo-pop)}
.fo-env::before{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
@keyframes foPopIn{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.fo-env:active{transform:scale(.93)}
.fo-env:disabled{opacity:.4;cursor:not-allowed;transform:none}
.fo-env svg{width:20px;height:20px}
.fo-env.fo-env-micro{background:transparent;color:var(--fo-bleute);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.fo-invite{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;padding:12px 14px;font-size:14px;color:var(--fo-txt2);text-align:center}
.fo-invite a{display:inline-grid;place-items:center;min-height:44px;padding:0 16px;border-radius:14px;background:var(--fo-or);color:var(--fo-sur-or);font-weight:800;text-decoration:none}
/* LES MENTIONS : la liste du « @ » au-dessus du champ (46 px par nom, 5 visibles), la mention en or dans la bulle. */
.fo-mentions{list-style:none;margin:0;padding:6px;display:flex;flex-direction:column;gap:2px;max-height:min(40vh,244px);overflow-y:auto;overscroll-behavior:contain;border-bottom:1px solid var(--fo-filet)}
.fo-mentions li{display:flex;align-items:center;gap:10px;min-height:46px;padding:4px 10px;border-radius:12px;color:var(--fo-txt);font-size:15px;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
.fo-mentions li b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.fo-mentions li[aria-selected="true"]{background:rgba(254,195,136,.18)}
@media (hover:hover){.fo-mentions li:hover{background:rgba(255,255,255,.10)}}
.fo-mentions li.fo-mentions-note{cursor:default;font-size:13px;color:var(--fo-sourd)}
.fo-mentions li.fo-mention-tous b{color:#f5c56b}
.fo-mention-tous-ic{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(254,195,136,.18);color:#f5c56b}
.fo-mention-tous-n{margin-left:auto;flex:none;font-size:12px;color:var(--fo-sourd);white-space:nowrap}
.fo-mention{font-weight:700;color:var(--fo-or-txt)}
.fo-moi .fo-mention{color:var(--fo-or-txt);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:2px}
/* Les liens d'une bulle, et la carte du premier (HAUTEUR FIXE : l'arrivée des données ne décale rien). */
.fo-bul .fo-lienmsg{color:var(--fo-lien);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;overflow-wrap:anywhere;-webkit-touch-callout:default}
.fo-bul .fo-lienmsg.fo-lienmsg-appui{-webkit-touch-callout:none}
.fo-lienmsg-carte{position:relative;display:flex;align-items:center;gap:10px;width:min(260px,100%);height:56px;padding:0 12px 0 8px;overflow:hidden;border-radius:16px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--fo-bord);color:var(--fo-txt);text-decoration:none;-webkit-tap-highlight-color:transparent}
.fo-lienmsg-carte.fo-lienmsg-riche{height:78px;padding-left:6px}
.fo-lienmsg-ico{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:10px;background:rgba(255,255,255,.08);color:var(--fo-txt2)}
.fo-lienmsg-ico svg{width:18px;height:18px}
.fo-lienmsg-img{display:block;width:48px;height:66px;flex:none;overflow:hidden;border-radius:6px;background:linear-gradient(150deg,#1d3a5f,#0b1a33)}
.fo-lienmsg-img img{display:block;width:100%;height:100%;object-fit:cover}
.fo-lienmsg-txt{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.fo-lienmsg-txt b{display:block;height:1.3em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:14px;line-height:1.3;font-weight:700}
.fo-lienmsg-txt small{display:block;height:1.35em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:12.5px;line-height:1.35;color:var(--fo-txt2)}
.fo-lienmsg-txt i{display:block;height:1.4em;font-style:normal;font-size:11.5px;line-height:1.4;color:var(--fo-sourd)}
.fo-lienmsg-attente :is(.fo-lienmsg-img,.fo-lienmsg-txt b,.fo-lienmsg-txt small){border-radius:6px;background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.12),rgba(255,255,255,.04));background-size:200% 100%;animation:foAttente 1s linear infinite}
@media (hover:hover){.fo-lienmsg-carte:hover{background:rgba(255,255,255,.10)}}
.fo-bul .fo-code{font-weight:700;color:var(--fo-or-txt);font-variant-numeric:tabular-nums;white-space:nowrap}
.fo-moi .fo-bul .fo-code{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:2px}
.fo-citees{display:flex;flex-direction:column;gap:6px;width:min(290px,100%)}
.fo-citee{position:relative;display:flex;align-items:center;gap:10px;height:80px;padding:0 12px 0 6px;overflow:hidden;border-radius:16px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--fo-bord);color:var(--fo-txt);text-decoration:none;-webkit-tap-highlight-color:transparent}
.fo-citee-img{display:block;width:48px;height:66px;flex:none;overflow:hidden;border-radius:6px;background:linear-gradient(150deg,#1d3a5f,#0b1a33)}
.fo-citee-img img{display:block;width:100%;height:100%;object-fit:cover}
.fo-citee-txt{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.fo-citee-txt b{display:block;height:1.3em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:14px;line-height:1.3;font-weight:700}
.fo-citee-txt small{display:block;height:1.35em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:12px;line-height:1.35;color:var(--fo-txt2)}
.fo-citee-prix{display:flex;align-items:baseline;gap:7px;height:1.45em;overflow:hidden;white-space:nowrap;font-size:14px;line-height:1.45;font-weight:800;color:var(--fo-or-txt);font-variant-numeric:tabular-nums}
.fo-citee-prix em{font-style:normal;font-size:12px;font-weight:700}
.fo-citee-prix em[data-sens="hausse"]{color:var(--fo-vert)}
.fo-citee-prix em[data-sens="baisse"]{color:var(--fo-rouge)}
.fo-citee-fiche{flex:none;align-self:center;font-size:12.5px;font-weight:700;color:var(--fo-lien)}
.fo-citee-attente :is(.fo-citee-img,.fo-citee-txt b,.fo-citee-prix){border-radius:6px;background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.12),rgba(255,255,255,.04));background-size:200% 100%;animation:foAttente 1s linear infinite}
@media (hover:hover){.fo-citee:hover{background:rgba(255,255,255,.10)}}
/* LE CHOIX DE LA VERSION (01/10/2026) : une bande au-dessus du champ, les versions côte à côte, défilables. */
.fo-versions{display:flex;flex-direction:column;gap:6px;padding:8px 8px 10px}
.fo-versions-tete{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-left:4px;font-size:13px;color:var(--fo-txt2,#c5cddb)}
.fo-versions-tete b{color:var(--fo-or-txt,#ffd479);font-variant-numeric:tabular-nums}
.fo-versions-x{display:grid;place-items:center;width:36px;height:36px;flex:none;border:0;border-radius:50%;background:rgba(255,255,255,.06);color:var(--fo-txt,#e9edf5);cursor:pointer}
.fo-versions-liste{display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding-bottom:2px}
.fo-versions-liste::-webkit-scrollbar{display:none}
.fo-version{display:flex;flex-direction:column;align-items:center;gap:3px;flex:none;width:78px;padding:6px 4px;border:0;border-radius:12px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--fo-bord,rgba(255,255,255,.10));color:var(--fo-txt,#e9edf5);font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.fo-version-img{display:block;width:48px;height:66px;overflow:hidden;border-radius:5px;background:linear-gradient(150deg,#1d3a5f,#0b1a33)}
.fo-version-img img{display:block;width:100%;height:100%;object-fit:cover}
.fo-version b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:700}
.fo-version small{font-size:11.5px;font-weight:700;color:var(--fo-or-txt,#ffd479);font-variant-numeric:tabular-nums}
.fo-version:active{background:rgba(254,195,136,.18)}
.fo-version:focus-visible,.fo-versions-x:focus-visible{outline:2px solid var(--fo-or,#fec388);outline-offset:2px}
@media (hover:hover){.fo-version:hover,.fo-versions-x:hover{background:rgba(255,255,255,.10)}}

/* ── 13 · LA CLOCHE, LE PROFIL, LE PSEUDO ── */
.fo-notifs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;max-height:min(60vh,520px);overflow-y:auto;overscroll-behavior:contain}
.fo-notif{display:flex;align-items:flex-start;gap:10px;width:100%;padding:10px 12px;border:0;border-radius:14px;background:transparent;color:var(--fo-txt);font:inherit;text-align:left;cursor:pointer}
.fo-notif:active{background:rgba(255,255,255,.08)}
.fo-notif-neuve{background:rgba(254,195,136,.08)}
.fo-notif-txt{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:14px;font-weight:600;line-height:1.35}
.fo-notif-txt small{font-size:12.5px;font-weight:400;color:var(--fo-sourd);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.fo-notif-txt .fo-notif-extrait{color:var(--fo-txt2)}
.fo-notif-vide{margin:6px 8px 12px;font-size:13.5px;line-height:1.5;color:var(--fo-sourd)}
/* LES NOTIFICATIONS EN BULLES, UNE COULEUR PAR SORTE (16/10/2026, user : « bien segmenté en bulles et en couleur selon la
   notification »). Une carte par notification, séparées par 10 px ; chaque sorte porte sa couleur (--nc), sa teinte de
   fond (--nf) et son filet (--nb) : RÉPONSE bleu, MENTION cuivre ; une sorte de plus = trois variables de plus. La couleur
   se lit partout au même endroit : l'étiquette en haut, la pastille sur la photo, le filet gauche, la bulle du message.
   Contrastes : étiquettes et heure ≥ 4,5:1 sur la carte. Non lue : carte plus éclairée + point qui bat (transform/opacité). */
.fo-notifs.fo-notifs-bulles{gap:10px;padding:2px 2px 6px}
.fo-notifs-bulles .fo-notif{--nc:#8cc4ff;--nf:rgba(77,163,255,.07);--nb:rgba(77,163,255,.32);position:relative;align-items:flex-start;gap:12px;
  padding:12px 14px 12px 12px;border-radius:18px;background:linear-gradient(180deg,var(--nf),rgba(255,255,255,.015)),#17181b;
  box-shadow:inset 0 0 0 1px var(--nb),inset 3px 0 0 var(--nc);transition:transform .12s ease-out,filter .12s ease-out}
.fo-notifs-bulles .fo-notif[data-genre="mention"]{--nc:#ffc58a;--nf:rgba(255,166,53,.08);--nb:rgba(255,166,53,.34)}
.fo-notifs-bulles .fo-notif.fo-notif-neuve{background:linear-gradient(180deg,color-mix(in srgb,var(--nf) 220%,transparent),rgba(255,255,255,.02)),#1b1c20}
.fo-notifs-bulles .fo-notif:active{transform:scale(.985);filter:brightness(1.1)}
.fo-notif-av{position:relative;flex:none}
.fo-notif-pic{position:absolute;right:-4px;bottom:-4px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;
  background:var(--nc);color:#121316;font-size:12px;font-weight:900;line-height:1;box-shadow:0 0 0 2px #17181b}
.fo-notif-pic svg{width:12px;height:12px}
.fo-notifs-bulles .fo-notif-txt{flex:1;gap:4px;font-weight:500}
.fo-notif-haut{display:flex;align-items:center;gap:8px;min-height:20px}
.fo-notif-sorte{flex:none;padding:2px 8px;border-radius:99px;background:color-mix(in srgb,var(--nc) 16%,transparent);color:var(--nc);
  font-size:11.5px;font-weight:800;letter-spacing:.06em;line-height:16px;text-transform:uppercase}
.fo-notifs-bulles .fo-notif-txt .fo-notif-quand{margin-left:auto;display:block;font-size:12.5px;color:#a3a7ae;-webkit-line-clamp:1}
.fo-notif-point{flex:none;width:8px;height:8px;border-radius:50%;background:var(--nc);box-shadow:0 0 0 3px color-mix(in srgb,var(--nc) 22%,transparent)}
@media (prefers-reduced-motion:no-preference){.fo-notif-point{animation:fo-notif-bat 1.8s ease-in-out infinite}}
@keyframes fo-notif-bat{50%{transform:scale(.7);opacity:.6}}
.fo-notif-qui{font-size:14.5px;line-height:1.35;color:#eceef1}
.fo-notif-qui b{font-weight:800}
.fo-notif-bulle{position:relative;align-self:flex-start;max-width:100%;margin:2px 0 1px;padding:7px 11px;border-radius:4px 14px 14px 14px;
  background:color-mix(in srgb,var(--nc) 11%,#202126);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--nc) 22%,transparent);
  font-size:14px;line-height:1.4;color:#e6e7ea;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.fo-notifs-bulles .fo-notif-txt .fo-notif-ou{font-size:12.5px;color:#a3a7ae;-webkit-line-clamp:1}
/* LA DEMANDE D'AMI : la même bulle, en VERT, et les deux propositions bien présentées — Accepter plein (texte sombre sur
   vert : 9:1), Refuser en verre — 44 px de haut, côte à côte. La bulle elle-même ne se touche pas : seuls les boutons agissent. */
.fo-notifs-bulles .fo-notif[data-genre="ami"]{--nc:#6fe3a7;--nf:rgba(62,207,142,.08);--nb:rgba(62,207,142,.34);cursor:default}
.fo-notifs-bulles .fo-notif[data-genre="ami"]:active{transform:none;filter:none}
.fo-notifs.fo-notifs-amis{max-height:none;overflow:visible;margin-bottom:10px}
.fo-notif-choix{display:flex;gap:8px;margin-top:6px}
.fo-notif-choix button{flex:1;min-height:44px;border:0;border-radius:12px;font:inherit;font-size:14.5px;font-weight:800;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:transform .1s ease-out}
.fo-notif-choix button:active{transform:scale(.97)}
.fo-notif-choix button:disabled{opacity:.55;cursor:default}
.fo-ami-oui{background:#3ecf8e;color:#0d1a13}
.fo-ami-non{background:rgba(255,255,255,.08);color:#e6e7ea;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.fo-notif-ami-msg{margin-top:-2px;color:#a6e9c6}
/* L'ÉCRAN D'ATTENTE DU FIL (16/10/2026, ouverture instantanée) : des bulles fantômes à la forme des vraies (les autres à
   gauche, la mienne à droite), qui respirent par l'OPACITÉ seule (composée, jamais de repeinture) ; immobiles en
   mouvement réduit. La ligne fantôme remplace le titre quand on arrive par un lien direct. */
.fo-bulles-attente{display:flex;flex-direction:column;gap:10px;padding:18px 2px 8px}
.fo-bulle-fantome{display:block;height:46px;border-radius:18px 18px 18px 6px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.fo-bulle-fantome--moi{align-self:flex-end;border-radius:18px 18px 6px 18px;background:rgba(96,144,255,.12)}
.fo-ligne-fantome{display:block;width:72%;height:.9em;margin:.15em 0;border-radius:8px;background:rgba(255,255,255,.08)}
@media (prefers-reduced-motion:no-preference){
  .fo-bulle-fantome,.fo-ligne-fantome{animation:fo-fantome 1.1s ease-in-out infinite alternate}
  .fo-bulle-fantome:nth-child(2){animation-delay:.15s}.fo-bulle-fantome:nth-child(3){animation-delay:.3s}.fo-bulle-fantome:nth-child(4){animation-delay:.45s}
}
@keyframes fo-fantome{from{opacity:.55}to{opacity:1}}
.fo-push{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 4px 10px;padding:10px 12px;border-radius:14px;background:var(--fo-verre);box-shadow:inset 0 0 0 1px var(--fo-bord);font-size:13px;line-height:1.4;color:var(--fo-txt2)}
.fo-push span{flex:1 1 18ch}
.fo-push button{min-height:44px;padding:0 16px;border:0;border-radius:99px;background:var(--fo-or);color:var(--fo-sur-or);font:inherit;font-size:13.5px;font-weight:800;cursor:pointer}
.fo-push button:disabled{opacity:.5}
.fo-push small{flex-basis:100%;font-size:12.5px;color:var(--fo-rouge)}
.fo-push-ok{color:var(--fo-vert)}
.fo-proposer-push p{margin:0 4px 12px;color:var(--fo-txt2);font-size:14px;line-height:1.5}
.fo-proposer-push .fo-liste-choix button{min-height:48px}
/* PastilleMoi (button.fo-pmoi) : 44 px, verre de 36 visuel, avatar 28 + jauge de grade de 3 px dessous,
   série « 🔥 N » en pastille or ; .fo-pmoi-tuile = la version développée du rail PC (96 px, avatar 40,
   pseudo, grade) ; .fo-pmoi-attente = le squelette rond ; .fo-pmoi-invite = « Se connecter » (anneau or). */
.fo-pmoi,.fo-moi-past{position:relative;display:grid;place-items:center;width:44px;height:44px;flex:none;padding:0;border:0;background:transparent;color:var(--fo-txt);font:inherit;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .16s}
.fo-pmoi:active,.fo-moi-past:active{transform:scale(.92)}
.fo-pmoi::before,.fo-moi-past::before{content:"";position:absolute;inset:4px;border-radius:99px;background:var(--fo-verre);box-shadow:inset 0 0 0 1px var(--fo-bord)}
.fo-pmoi>*,.fo-moi-past>*{position:relative}
.fo-pmoi-avatar{position:relative;display:grid;place-items:center}
.fo-pmoi-avatar img,.fo-moi-past img{border-radius:99px}
.fo-pmoi-avatar .fo-jauge,.fo-moi-past .fo-jauge{position:absolute;left:1px;right:1px;bottom:-5px;margin:0}
/* Ni la serie ni la jauge sur l'avatar de la BARRE : a 36 px, un trait de 3 px sous un rond se lit
   comme un defaut d'affichage. Les deux restent dans la feuille « Moi ». */
.fo-barre-nav .fo-pmoi-serie,.fo-barre-nav .fo-pmoi .fo-jauge{display:none}
.fo-barre-nav .fo-pmoi{border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.16)}
.fo-barre-nav .fo-pmoi img,.fo-barre-nav .fo-pmoi>span{border-radius:50%!important}
.fo-pmoi-serie,.fo-moi-past-serie{position:absolute;top:-2px;right:-8px;display:inline-flex;align-items:center;gap:1px;height:18px;padding:0 5px;border-radius:99px;background:rgba(254,195,136,.22);color:var(--fo-or-txt);font-size:12.5px;font-weight:800;line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums;box-shadow:0 0 0 2px var(--fo-fond)}
/* Muet : un point rouge (le mot est dans le libellé du bouton). */
.fo-pmoi.fo-pmoi-muet::after,.fo-moi-past-muet{content:"";position:absolute;right:5px;top:5px;width:6px;height:6px;border-radius:99px;background:var(--fo-rouge);box-shadow:0 0 0 2px var(--fo-fond)}
.fo-pmoi.fo-pmoi-attente{display:block;width:44px;height:44px;border-radius:99px;background-clip:content-box;padding:4px;box-sizing:border-box}
.fo-pmoi.fo-pmoi-attente::before{content:none}
.fo-moi-squelette{position:absolute;inset:4px;border-radius:99px}
.fo-pmoi.fo-pmoi-invite{width:auto;min-width:44px;gap:8px;grid-auto-flow:column;padding:0 4px}
.fo-pmoi.fo-pmoi-invite::before{content:none}
.fo-pmoi-invite-txt{font-size:14px;font-weight:800;color:var(--fo-or-txt);white-space:nowrap}
/* La tuile développée du rail PC : avatar 40, pseudo 14 px/800, grade 10,5 px uppercase, jauge, série. */
.fo-pmoi.fo-pmoi-tuile,.fo-sal-moi{display:flex;align-items:center;justify-content:flex-start;gap:12px;width:100%;height:auto;min-height:96px;margin-top:8px;padding:12px;border-radius:16px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--fo-bord);text-align:left}
.fo-pmoi.fo-pmoi-tuile::before{content:none}
.fo-pmoi.fo-pmoi-tuile:active{transform:none}
.fo-pmoi.fo-pmoi-tuile .fo-pmoi-avatar img{border-radius:10px}
.fo-pmoi.fo-pmoi-tuile .fo-jauge{left:0;right:0;bottom:-7px}
.fo-pmoi-txt{display:flex;flex:1;min-width:0;flex-direction:column;gap:3px}
.fo-pmoi-txt b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:800}
.fo-pmoi-txt small{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.fo-pmoi.fo-pmoi-tuile .fo-pmoi-serie{position:static;flex:none;box-shadow:none}
/* La jauge de grade : jamais vide (6 % au moins), remplie par une échelle horizontale. */
.fo-jauge{display:block;height:3px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden}
.fo-jauge i{display:block;height:100%;min-width:6%;border-radius:2px;background:linear-gradient(90deg,#fec388,#ffd479);transform-origin:left;animation:foJauge .9s .35s cubic-bezier(.2,.8,.2,1) both}
@keyframes foJauge{from{transform:scaleX(0)}}
/* La feuille « Moi » (div.fo-pmoi-corps) : avatar 56, pseudo 17 px/700, grade 12,5 px/700 + « reste N pour … »
   11,5 px, statistiques en dl, pilule ฿ (copie de mm-berrys), liens de 44 px. */
.fo-pmoi-corps,.fo-moi-feuille{display:flex;flex-direction:column;gap:12px;padding:4px 8px 8px}
.fo-pmoi-tete,.fo-moi-tete{display:flex;align-items:center;gap:14px}
.fo-pmoi-tete img,.fo-moi-tete img{border-radius:14px}
.fo-pmoi-qui,.fo-moi-qui{display:flex;flex:1;min-width:0;flex-direction:column;gap:3px}
.fo-pmoi-qui>b{display:flex;align-items:center;gap:8px;min-width:0;font-size:17px;font-weight:700}
.fo-pmoi-qui>b>span,.fo-moi-pseudo{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:17px;font-weight:700}
.fo-pmoi-grade,.fo-moi-grade{display:flex;flex-direction:column;gap:2px;margin:0;font-size:12.5px;font-weight:700;color:var(--fo-or-txt)}
.fo-pmoi-grade small,.fo-moi-reste{font-size:11.5px;font-weight:500;color:var(--fo-sourd)}
.fo-pmoi-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin:0}
.fo-pmoi-stats>div{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:12px;background:var(--fo-verre);box-shadow:inset 0 0 0 1px var(--fo-bord)}
.fo-pmoi-stats dt{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.fo-pmoi-stats dd{margin:0;font-size:14px;font-weight:700;color:var(--fo-txt);font-variant-numeric:tabular-nums}
.fo-moi-stats{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:var(--fo-sourd)}
.fo-moi-stats strong{font-weight:700;color:var(--fo-txt);font-variant-numeric:tabular-nums}
.fo-berrys{display:inline-flex;align-items:center;gap:4px;align-self:flex-start;height:30px;margin:0;padding:0 12px;border-radius:99px;color:var(--fo-or-txt);background:rgba(254,195,136,.12);box-shadow:inset 0 0 0 1px rgba(254,195,136,.35);font-size:14px;font-weight:800;font-variant-numeric:tabular-nums}
.fo-serie{display:inline-flex;align-items:center;gap:4px;flex:none;font-size:12.5px;font-weight:800;color:var(--fo-or-txt)}
.fo-serie strong{font-weight:800;font-variant-numeric:tabular-nums}
.fo-serie small{font-size:11px;font-weight:600;color:var(--fo-sourd)}
.fo-muet{display:inline-flex;align-items:center;align-self:flex-start;gap:4px;height:22px;padding:0 8px;border-radius:99px;background:rgba(255,149,146,.14);color:var(--fo-rouge);font-size:11px;font-weight:800}
.fo-pmoi-liens{display:flex;flex-direction:column;gap:6px}
.fo-pmoi-lien,.fo-lien-admin{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:12px;background:var(--fo-verre);box-shadow:inset 0 0 0 1px var(--fo-bord);color:var(--fo-txt);font-size:13.5px;font-weight:700;text-decoration:none}
@media (hover:hover){.fo-pmoi-lien:hover,.fo-lien-admin:hover{background:rgba(255,255,255,.10)}}
.fo-pmoi-lien.fo-lien-admin{color:var(--fo-or-txt)}
.fo-lien-admin i{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:var(--fo-or);color:var(--fo-sur-or);font-style:normal;font-size:11px;font-weight:800}
/* L'ancienne carte « moi » (CarteMoi) : une tuile de verre, tant qu'elle est rendue. */
.fo-moi-carte{position:relative;display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:20px;background:var(--fo-verre);box-shadow:inset 0 0 0 1px var(--fo-bord)}
.fo-moi-carte .fo-qui{flex:1;min-width:0}
.fo-moi-carte .fo-qui>b{display:flex;align-items:center;gap:7px;min-width:0;font-size:15px;font-weight:800}
.fo-moi-carte .fo-qui>b span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fo-moi-carte .fo-moi-stats{margin-top:4px}
.fo-invite-carte{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:14px 16px;border-radius:20px;background:var(--fo-verre);box-shadow:inset 0 0 0 1px var(--fo-bord);font-size:14px;color:var(--fo-txt2)}
.fo-invite-carte a{display:inline-grid;place-items:center;min-height:44px;padding:0 16px;border-radius:14px;background:var(--fo-or);color:var(--fo-sur-or);font-weight:800;text-decoration:none}
/* Le gain qui tombe (PuceGain) : la puce pop (copie de mm-duo-puce), puis vole vers la pilule ฿ par
   translate + opacité (--fo-vol-dx/--fo-vol-dy posés par le JS), 600 ms. */
.fo-puce{position:relative;z-index:62;display:inline-block;padding:2px 7px;border-radius:999px;font-size:12.5px;font-weight:800;line-height:1.2;background:rgba(254,195,136,.22);color:var(--fo-or-txt);font-variant-numeric:tabular-nums;pointer-events:none;animation:foPuce .55s .75s cubic-bezier(.34,1.56,.64,1) both}
@keyframes foPuce{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
.fo-puce-bas{background:rgba(255,99,99,.18);color:#ff9c9c}
.fo-puce.fo-puce-vol{position:fixed;left:var(--fo-vol-x,50%);top:var(--fo-vol-y,50%);animation:foPuceVol 600ms var(--fo-in) both}
@keyframes foPuceVol{from{opacity:1;transform:translate(0,0)}to{opacity:0;transform:translate(var(--fo-vol-dx,0px),var(--fo-vol-dy,-120px))}}
/* Le pseudo demandé sur la page. */
.fo-pseudo{position:relative;display:flex;flex-direction:column;gap:10px;min-width:0;padding:14px;border-radius:20px;background:var(--fo-verre);box-shadow:inset 0 0 0 1px rgba(254,195,136,.40)}
.fo-pseudo label{display:flex;flex-direction:column;gap:3px}
.fo-pseudo label b{font-size:15px;font-weight:800;color:var(--fo-txt)}
.fo-pseudo label span{font-size:13px;line-height:1.45;color:var(--fo-sourd)}
.fo-pseudo-ligne{display:flex;gap:8px;min-width:0}
.fo-pseudo-ligne input{flex:1;width:0;min-width:0;height:46px;padding:0 14px;border:0;border-radius:14px;background:rgba(0,0,0,.35);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);color:var(--fo-txt);font:inherit;font-size:16px;font-weight:600}
.fo-pseudo-ligne input:focus{outline:2px solid var(--fo-or);outline-offset:1px}
.fo-pseudo-ligne button{flex:none;min-width:0;height:46px;padding:0 18px;border:0;border-radius:14px;background:var(--fo-or);color:var(--fo-sur-or);font:inherit;font-size:15px;font-weight:800;cursor:pointer}
.fo-pseudo-ligne button:disabled{opacity:.45;cursor:not-allowed}
.fo-pseudo-compact{padding:10px 12px;border-radius:0;background:transparent;box-shadow:none}
.fo-pseudo-compact label b{font-size:13.5px}

/* ── 14 · FEUILLES DIVERSES : choix de média, catégories du composeur, qui a réagi, visionneuse ── */
.fo-medias-choix button{gap:12px}
/* La vignette n'est pas une cible : l'appui long vise le BOUTON, pas l'image. */
.fo-media-vignette{width:40px;height:40px;flex:none;border-radius:10px;object-fit:cover;background:rgba(255,255,255,.06);pointer-events:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}
.fo-media-vocal{display:grid;place-items:center;font-size:20px}
.fo-cat-bouton{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:6px 14px;border:0;border-radius:16px;background:var(--fo-verre);box-shadow:inset 0 0 0 1px var(--fo-bord);color:var(--fo-txt);font:inherit;text-align:left;cursor:pointer}
@media (hover:hover){.fo-cat-bouton:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}}
.fo-cat-filtre{max-width:420px}
.fo-cat-vide{box-shadow:inset 0 0 0 1px rgba(254,195,136,.55)}
.fo-cat-bouton > span:first-child{font-size:22px;line-height:1}
.fo-cat-libelle{display:flex;flex-direction:column;min-width:0;flex:1}
.fo-cat-libelle small{color:var(--fo-sourd);font-size:12.5px;line-height:1.3}
.fo-cat-libelle b{font-weight:700;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fo-cat-fleche{color:var(--fo-sourd);font-size:14px}
.fo-cat-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;max-height:min(62vh,520px);overflow-y:auto;overscroll-behavior:contain}
.fo-cat-liste a,.fo-cat-liste button{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:8px 12px;border:0;border-radius:14px;background:transparent;color:var(--fo-txt);font:inherit;text-align:left;text-decoration:none;cursor:pointer}
@media (hover:hover){.fo-cat-liste a:hover,.fo-cat-liste button:hover{background:rgba(255,255,255,.08)}}
.fo-cat-liste .fo-cat-actif{background:var(--fo-or-fond);box-shadow:inset 0 0 0 1px rgba(254,195,136,.55);color:#ebf3fc}
.fo-cat-liste .fo-cat-libelle small{white-space:normal}
.fo-cat-em{font-size:22px;line-height:1;width:28px;text-align:center}
.fo-cat-compte{font-family:ui-monospace,monospace;font-size:12px;color:var(--fo-sourd);font-variant-numeric:tabular-nums}
.fo-cat-choix{display:flex;flex-direction:column;gap:6px}
.fo-cat-choix .fo-cat-liste{max-height:none;padding:4px;border-radius:16px;background:var(--fo-verre);box-shadow:inset 0 0 0 1px var(--fo-bord)}
.fo-reac-choix{display:flex;justify-content:space-between;gap:4px;margin:0 2px 10px;padding:6px;border-radius:99px;background:rgba(255,255,255,.06)}
.fo-reac-choix button{flex:1;min-height:44px;border:0;border-radius:99px;background:transparent;font-size:24px;line-height:1;cursor:pointer}
.fo-reac-choix button.fo-mienne{background:rgba(254,195,136,.22);box-shadow:inset 0 0 0 1px rgba(254,195,136,.45)}
.fo-reac-onglets{display:flex;gap:6px;overflow-x:auto;margin:0 2px 8px;padding-bottom:2px;scrollbar-width:none}
.fo-reac-onglets button{flex:none;min-height:44px;padding:0 14px;border:0;border-radius:99px;background:transparent;box-shadow:inset 0 0 0 1px var(--fo-bord);color:var(--fo-txt2);font:inherit;font-size:13.5px;cursor:pointer}
.fo-reac-onglets button[aria-pressed="true"]{background:rgba(254,195,136,.16);color:var(--fo-or-txt);box-shadow:inset 0 0 0 1px rgba(254,195,136,.45)}
.fo-reac-onglets b{font-weight:800;margin-left:2px}
.fo-reac-liste .fo-reac-ligne{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:14px}
.fo-reac-ligne{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:14px}
.fo-reac-qui{display:flex;flex-direction:column;min-width:0;flex:1}
.fo-reac-qui b{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fo-reac-qui small{color:var(--fo-sourd);font-size:12.5px}
.fo-reac-em{font-size:22px;line-height:1}
.fo-visionneuse{position:fixed;inset:0;z-index:96;display:flex;flex-direction:column;background:rgba(0,0,0,.92);animation:fo-fondu 90ms var(--fo-out)}
.fo-visionneuse img{flex:1;min-height:0;width:100%;object-fit:contain;padding:12px}
.fo-visionneuse-pied{display:flex;gap:10px;padding:10px 12px calc(12px + env(safe-area-inset-bottom))}
.fo-visionneuse-pied button{flex:1;min-height:48px;border:0;border-radius:14px;background:rgba(255,255,255,.10);color:var(--fo-txt);font:inherit;font-size:15px;font-weight:700;cursor:pointer}
.fo-visionneuse-pied button.fo-danger{background:rgba(255,149,146,.18);color:var(--fo-rouge)}

/* ── 15 · REPLIS DE MATIÈRE ET ACCESSIBILITÉ ── */
/* Sans backdrop-filter, ou si l'on demande moins de transparence : surfaces opaques. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.fo-barre-nav,.fo-sal,.fo-compose-in,.fo-menu,.fo-barre,.fo-toast:not(.fo-toast-or){background:var(--fo-opaque)}}
@media (prefers-reduced-transparency:reduce){.fo-barre-nav,.fo-sal,.fo-compose-in,.fo-menu,.fo-barre,.fo-toast:not(.fo-toast-or){background:var(--fo-opaque);-webkit-backdrop-filter:none;backdrop-filter:none}.fo-voile{background:rgba(0,0,0,.72)}}
/* Plus de contraste : traits à 22 %, puces pleines cerclées de blanc, anneaux plus francs. */
@media (prefers-contrast:more){.fo{--fo-bord:rgba(255,255,255,.22);--fo-filet:rgba(255,255,255,.22);--fo-lisere:rgba(255,255,255,.4);--fo-verre:rgba(255,255,255,.09);--fo-sourd:#a9b1c0}.fo-sal-point,.fo-point{box-shadow:0 0 0 1px #fff}.fo-autre .fo-bul{box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}.fo-moi .fo-bul{box-shadow:inset 0 0 0 1px rgba(254,195,136,.8)}.fo-sal-chip[aria-current="page"]::after,.fo-sal-rang[aria-current="page"]::after{box-shadow:inset 0 0 0 2px var(--fo-or)}.fo-champ{box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}}
/* Moins de mouvement : la garde globale (.01ms) plus une coupure EXPLICITE de chaque boucle et de chaque
   entrée ; « Envoi… » garde son délai de 700 ms (sa seule fonction) ; le CTA garde son fondu d'opacité. */
@media (prefers-reduced-motion:reduce){
.fo *,.fo *::before,.fo *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
.fo-ico,.fo-tap .fo-onde,.fo-apparait,.fo-attente,.fo-squelette,.fo-sal-squelette,.fo-lienmsg-attente :is(.fo-lienmsg-img,.fo-lienmsg-txt b,.fo-lienmsg-txt small),.fo-parle .fo-ico::after,.fo-rec-point,.fo-jauge i,.fo-puce,.fo-puce.fo-puce-vol,.fo-env,.fo-outils>*,.fo-mic,.fo-jaime.fo-pop,.fo-pouce,.fo-vocal-attente .fo-vocal-onde i,.fo-paquet[data-neuf]>.fo-bul,.fo-paquet[data-neuf]>.fo-imgs,.fo-menu,.fo-barre,.fo-feuille,.fo-voile,.fo-toast,.fo-nouveaux,.fo-visionneuse,.fo-vocal-vitesse,.fo-envoye{animation:none!important}
.fo-ico,.fo-paquet,.fo-sal-chip,.fo-sal-chip::after,.fo-sal-rang::after,.fo-rang,.fo-cta,.fo-env,.fo-jaime,.fo-vocal-btn,.fo-barre-titre,.fo-survol,.fo-plus .fo-ico,.fo-retour,.fo-cloche,.fo-moi-past,.fo-pmoi,.fo-amorce,.fo-barre button,.fo-sal-cta,.fo-sal-nouveau,.fo-cloche i,.fo-pastille{transition:none!important}
.fo-parle .fo-ico::after{opacity:.5}
.fo-attente,.fo-squelette,.fo-sal-squelette,.fo-moi-squelette{background:rgba(255,255,255,.08)}
.fo-pouce{display:none}
.fo-puce.fo-puce-vol{opacity:1;transform:none}
.fo-toast.fo-sort{opacity:0}
}
@media (hover:none){.fo-bul,.fo-bul img{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}}
/* Le doigt de l'appui long peut finir sur le voile ou la feuille : ni sélection ni loupe dans toute la
   feuille. Un champ de saisie reste sélectionnable (sinon iOS n'y laisse pas écrire). */
@media (hover:none){.fo-voile,.fo-feuille{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.fo-feuille :is(input,textarea,[contenteditable]){-webkit-user-select:text;user-select:text}}

/* ── 0 · JETONS ── (mesurés sur #0b0d12 / verre ~#191b20 / bulle or ~#202325 : #e9edf5 16:1, #c5cddb 11:1,
   #8b93a3 6,1:1, #ffd479 12:1, #d6e2ff 14:1, #eef5fc 12:1 sur la bulle or, #121416 9,5:1 sur #fec388,
   #3ad07f 9:1, #ff9592 7:1). Les alias --fo-a/b/c et --fo-elev* nourrissent les règles héritées
   (ForumPriveStyle, deux dégradés en ligne) tant qu'elles ne sont pas retokenées : un ambre profond
   (#b36d06 : blanc 5:1) plutôt que l'or plein, sur lequel le blanc ne ferait que 2:1. */
.fo{--fo-fond:#0a0812;--fo-verre:rgba(255,255,255,.055);--fo-verre2:rgba(255,255,255,.085);--fo-verre3:rgba(255,255,255,.12);--fo-bord:rgba(255,255,255,.10);--fo-lisere:rgba(255,255,255,.22);--fo-filet:rgba(255,255,255,.06);--fo-surface:rgba(20,22,28,.92);--fo-opaque:#12151c;--fo-or:#fec388;--fo-or-txt:#ffd479;--fo-sur-or:#121416;--fo-or-fond:rgba(254,195,136,.12);--fo-txt:#e9edf5;--fo-txt2:#c5cddb;--fo-sourd:#8b93a3;--fo-sourd2:#9aa2b1;--fo-salon:#8b93a3;--fo-survol:rgba(255,255,255,.06);--fo-choisi:rgba(255,255,255,.10);--fo-bleute:#d6e2ff;--fo-vert:#3ad07f;--fo-ambre:#ffc53d;--fo-rouge:#ff9592;--fo-lien:#9ec5ff;--fo-txt-msg:14.5px;--fo-a:#b06b02;--fo-b:#b36d06;--fo-c:#56595b;--fo-elev:rgba(255,255,255,.055);--fo-elev2:rgba(255,255,255,.085);--fo-elev3:rgba(255,255,255,.12);--fo-trait:rgba(255,255,255,.06);--fo-trait-fort:rgba(255,255,255,.14);--fo-trait3:rgba(255,255,255,.25);--fo-glace:#d6e2ff;--fo-encre:#121416;--fo-pop:var(--e-pop,cubic-bezier(.17,.89,.32,1.49));--fo-out:var(--e-out,cubic-bezier(0,0,0,1));--fo-in:var(--e-in,cubic-bezier(.3,0,1,1));position:relative;color:var(--fo-txt)}
/* Le fond : les deux halos statiques de .menu-verre (styles.css), plein écran, fixés, sous tout le contenu
   (z-index -1 dans le contexte racine : .fo n'en crée pas). Aucune image, rien qui bouge, jamais
   background-attachment:fixed (ignoré par iOS). */
/* LE FOND DU FORUM (21/09/2026). « Un noir absolu, ce n'est pas esthetique — fais un degrade
   violet, que les messages ressortent bien, quelque chose qui ait du charisme. » Le fond etait
   #0b0d12 avec deux lueurs a 14 % et 12 % posees aux deux coins : sur un telephone, invisible.
   Quatre lueurs maintenant, sur une base violette tres sombre : un halo violet qui tombe du haut,
   un souffle d'or a droite (la couleur du site), un violet profond qui monte du bas a gauche, un
   bleu discret en bas a droite. RIEN NE BOUGE et rien ne se charge : que des degrades, sur un seul
   element fixe, derriere tout le reste. Le texte n'y perd rien — l'encre #e9edf5 sur le point le
   plus clair du fond (#241a3a) tient 12,9:1, trois fois le seuil. */
.fo:not(.fo-sans-fond)::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(120% 68% at 50% -12%,rgba(139,92,246,.26),transparent 62%),radial-gradient(80% 42% at 90% 6%,rgba(254,195,136,.10),transparent 60%),radial-gradient(100% 58% at 6% 98%,rgba(91,33,182,.34),transparent 64%),radial-gradient(72% 40% at 94% 90%,rgba(37,99,235,.15),transparent 62%),linear-gradient(180deg,#130e22 0%,var(--fo-fond) 46%,#100c1c 100%)}
body:has(.fo:not(.fo-sans-fond)) .mangabg{display:none!important}
/* LE FOND DES DISCUSSIONS EN BRONZE (14/10/2026, user, captures d'un assistant sur Behance et d'un fil : « le fond des
   couleurs sur les conv je le veux comme ça », « nan, le fond ici ») : derrière les messages d'un fil et des messages
   privés (data-chat), une lumière bronze chaude qui tombe du haut et se fond dans un brun presque noir, au lieu du violet.
   Toujours fixe, que des dégradés ; l'encre #e9edf5 sur le point le plus clair (≈ #393c3e) tient 10:1. */
.fo[data-chat]{--fo-fond:#0d0e0e}
.fo[data-chat]:not(.fo-sans-fond)::before{background:radial-gradient(120% 60% at 70% -12%,rgba(222,147,56,.42),transparent 62%),radial-gradient(90% 50% at 0% 100%,rgba(88,90,93,.2),transparent 65%),linear-gradient(180deg,#1b1c1e 0%,#0f1010 50%,#0a0908 100%)}
/* LE TITRE D'UN FIL N'EST PLUS MANGÉ PAR « GAGNER DES BERRYS » (14/10/2026, mesuré à 390 px : la pastille faisait 153 px
   et le titre tombait à « Cette S… », le sous-titre à « 8 participa… »). Au téléphone, dans un fil, elle devient un rond
   de 44 px avec la seule flamme, comme sur l'accueil ; son nom complet reste dans aria-label. */
@media (max-width:479px){
  .fo[data-chat] .fo-barre-nav .fo-serie-bouton{justify-content:center;gap:0;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;margin:0;border-radius:50%}
  .fo[data-chat] .fo-barre-nav .fo-serie-bouton>span{display:none}
  .fo[data-chat] .fo-barre-nav .fo-serie-bouton svg{width:18px;height:22px}
}
/* LA LIGNE DU NOM D'UN MESSAGE PASSE À LA LIGNE (14/10/2026, mesuré : sous 375 px, nom + grade + flamme + heure +
   « 2 pièces » faisaient ≈ 290 px pour 228 de place, sans retour possible : toute la page s'élargissait à 372 px — 52 px
   de défilement de côté à 320, 13 à 360). La pastille descend sous le nom au lieu de pousser l'écran. */
.fo-bloc button.fo-nom{flex-wrap:wrap;row-gap:2px}
/* CE FOND OPAQUE RECOUVRE LE FOND ANIME DU SITE (.fondad) sur tout l ecran, a toute hauteur de page (13/10/2026, mesure :
   0 point du fond visible sur un fil, la liste des salons et les messages prives ; il tournait pourtant, deux animations
   sans fin et ses calques plein ecran). Les racines .fo des pages du forum le declarent par data-couvre-fond :
   FondAdaptatif.tsx masque alors le fond et met ses animations en pause. Une page qui met un .fo SANS ce fond opaque
   (.fo-sans-fond, le profil) ne doit pas porter l attribut. */
/* ═══════════ LA LISTE DE SALONS (organisation Discord, 20/09/2026) ═══════════
   ul.fo-cats > li.fo-cat > button.fo-cat-tete (repli) + ul.fo-cans > li > a.fo-can
   Une ligne par salon, # devant, tronque a droite ; non lu = blanc gras + barre au bord gauche ;
   mention = pastille rouge chiffree ; salon ouvert = fond .fo-choisi. */
@media (min-width:1024px){.fo-page{padding-bottom:24px}}
/* 6 PX AU-DESSUS DE LA LISTE contre 14 entre ses groupes : « petit bug la, c'est trop colle »
   (user, 21/09, capture a l'appui). Ce qui precede la liste — la rangee « on parle de toi »,
   l'amorce du jour, « tu es a jour » — se retrouvait colle au premier en-tete. Meme ecart
   partout : 14 px, mesure, pas estime. */
.fo-cats{display:flex;flex-direction:column;gap:14px;margin:14px 0 0;padding:0;list-style:none}
/* ═══════════ UN GROUPE EST UN BLOC (21/09/2026) ═══════════
   li.fo-cat[--c] > h2 > button.fo-cat-tete + ul.fo-blocs > li > a.fo-bl
   Defaut signale par l'user sur capture : « on n'arrive pas a comprendre que le groupe appartient
   aux conv avec ces couleurs, et il n'y a pas de rattachement clair ». Deux corrections, et elles
   vont ensemble :
     1. LA TEINTE EST CELLE DU GROUPE. Quatre couleurs dans LA TAVERNE disaient quatre fois « je
        suis a part ». Une seule teinte, portee par l'en-tete ET par le contour de chaque carte,
        dit « nous sommes le meme groupe ». Les cartes se distinguent par leur image et leur titre.
     2. UN RAIL LES RATTACHE. Un trait de 2 px descend de l'en-tete jusque sous la derniere carte,
        dans la teinte du groupe : l'oeil suit le trait et sait ou le groupe commence et finit.
        Replie, la liste n'est pas rendue : le rail s'arrete de lui-meme au bas de l'en-tete. */
/* PLUS D'INDENTATION (21/09/2026 : « c'est pas bien centre »). Le rail exterieur decalait chaque
   groupe de 16 px a gauche : les rangees de salon commencaient 16 px plus loin que la rangee de
   notification et que le reste de la page, bord droit aligne, bord gauche non — d'ou l'impression
   de travers. Le groupe reprend toute la largeur, comme tout le reste.
   Ce qui rattache un en-tete a ses cartes n'est plus un trait exterieur mais, et cela suffit :
   le filet de couleur DANS l'en-tete, la meme teinte sur le contour de chaque carte, 8 px entre
   l'en-tete et ses cartes contre 14 px entre deux groupes. */
.fo-cat{position:relative}

/* L'EN-TETE DE CATEGORIE se lisait comme une legende perdue : gris sourd, 12 px, un chevron de
   12 px, et rien qui dise qu'on peut la replier. Elle devient une RANGEE : une surface discrete,
   un texte lisible, un chevron plus grand, et le compte dans une pastille. On voit que ca s'ouvre. */
/* L'EN-TETE NE SE PEINT PLUS EN PLEIN (21/09/2026 : « la c'est horrible »). Quatre salons replies
   faisaient quatre pavés de couleur pleine, plus proches d'une rangée de boutons que d'un forum.
   La surface redevient le verre du site, et la couleur passe sur ce qui la PORTE : un filet a
   gauche, le nom, le chevron, la pastille du compte. Autant de teinte, dix fois moins de matiere. */
.fo-cat-tete{position:relative;display:flex;align-items:center;gap:10px;width:100%;min-height:46px;margin:0 0 8px;padding:7px 10px 7px 16px;border:0;border-radius:12px;background:var(--fo-verre);box-shadow:inset 0 0 0 1px var(--fo-bord);color:var(--fo-txt2);font:inherit;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;overflow:hidden;transition:background 120ms}
/* Le filet de couleur, DANS l'en-tete : replie, c'est lui qui dit a quel salon on a affaire. */
.fo-cat-tete::after{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:hsl(var(--c) 58% 56%)}

.fo-cat-tete:active{background:var(--fo-verre2)}
/* La cible du doigt est la RANGEE elle-meme : 46 px de haut, pleine largeur. L'agrandissement
   par un ::before deborde n'a plus lieu d'etre — et il serait rogne par l'overflow:hidden
   qui retient le filet de couleur dans les coins arrondis. */
@media (hover:hover){.fo-cat-tete:hover{background:var(--fo-verre2)}}
.fo-cat-tete svg{width:16px;height:16px;flex:none;color:hsl(var(--c) 52% 62%);transition:transform 150ms var(--fo-out)}
.fo-cat-tete[aria-expanded="false"] svg{transform:rotate(-90deg)}
.fo-cat-bloc{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.fo-cat-nom{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:hsl(var(--c) 46% 80%)}
/* Le dernier sujet du salon, sous son nom quand il est replie : en minuscules (l'en-tete est en
   capitales), sans interlettrage, discret — c'est un indice, pas un titre. */
.fo-cat-dernier{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:none;letter-spacing:0;font-size:12.5px;font-weight:500;line-height:1.3;color:var(--fo-sourd)}
/* Le compte, en pastille : replie, c'est la seule chose qui dise ce qu'il y a dessous. */
.fo-cat-n{margin-left:auto;flex:none;align-self:center;min-width:22px;height:22px;padding:0 7px;border-radius:99px;background:hsl(var(--c) 42% 24%);box-shadow:inset 0 0 0 1px hsl(var(--c) 44% 40%);color:hsl(var(--c) 50% 88%);font-size:11.5px;font-weight:700;line-height:22px;text-align:center;font-variant-numeric:tabular-nums}
.fo-cans{display:flex;flex-direction:column;gap:2px;margin:2px 0 0;padding:0;list-style:none}
.fo-can{position:relative;display:flex;align-items:center;gap:6px;min-height:44px;padding:0 8px 0 10px;border-radius:8px;color:var(--fo-salon);text-decoration:none;font-size:15px;line-height:1.2;-webkit-tap-highlight-color:transparent;transition:background 100ms,color 100ms}
.fo-can:active{background:var(--fo-choisi)}
@media (hover:hover){.fo-can:hover{background:var(--fo-survol);color:var(--fo-txt2)}}
.fo-can-diese{flex:none;font-size:19px;font-weight:400;line-height:1;color:var(--fo-salon)}
.fo-can-nom{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
/* Non lu : blanc, gras, et la barre blanche de Discord collee au bord gauche de la liste. */
.fo-can.fo-neuf{color:#fff}
.fo-can.fo-neuf .fo-can-nom{font-weight:600}
.fo-can.fo-neuf .fo-can-diese{color:#b5bac1}
.fo-can.fo-neuf::before{content:"";position:absolute;left:-10px;top:50%;width:4px;height:8px;border-radius:0 4px 4px 0;background:#fff;transform:translateY(-50%)}
.fo-can[aria-current="page"]{background:var(--fo-choisi);color:#fff}
.fo-can-meta{flex:none;margin-left:auto;display:inline-flex;align-items:center;gap:8px;font-size:11.5px;color:var(--fo-salon);font-variant-numeric:tabular-nums}
.fo-can-badge{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 5px;border-radius:99px;background:var(--fo-rouge);color:#fff;font-size:11px;font-weight:700;line-height:1}
.fo-can-etat{flex:none;font-size:13px;line-height:1}
.fo-can.fo-clos{opacity:.7}
/* ═══════════ LES CARTES DE CONVERSATION (03/10/2026, choix arrete) ═══════════
   ul.fo-blocs > li > a.fo-bl[--c,--d] > .fo-bl-reflet + .fo-bl-onde + .fo-bl-av
                                       + .fo-bl-corps + .fo-bl-droite

   BLANC CASSE sur le noir du site. Sept matieres ont ete essayees dans la vraie page (degrades par
   conversation, verre liquide, bi-teinte, aurore, bord neon, page claire) : l'user les a toutes
   ecartees — « trop kitch, ca fait boite de nuit » — puis a tranche « blanc casse ». Blanc CASSE et
   non blanc pur : sur un fond noir, le blanc pur eblouit la nuit et fait vibrer les petits
   caracteres. Un degrade tres court du haut vers le bas (#f4f6f9 vers #e9ecf1) plutot qu'un aplat :
   c'est la lumiere qui tombe sur une feuille. L'encre #101828 tient 14,9:1 au point le plus sombre.

   LA COULEUR EST AU CONTOUR, PAS SUR LA SURFACE (« laisse couleur blanc casse », 03/10). --c, la
   teinte tiree du slug de la conversation — donc identique au rendu serveur, au navigateur et
   demain — ne peint plus le fond : elle tient le filet de 1,5 px et l'anneau de l'image. Une carte
   se reconnait du coin de l'oeil, et le blanc reste du blanc.

   FINE : 76 px au lieu de 96. Le titre tient sur UNE ligne, et l'auteur, le nombre de reponses et
   la date sur une seule ligne de service : trois informations courtes ne valaient pas trois lignes.
   La hauteur d'une carte, c'est le nombre de lignes qu'elle contient, pas son rembourrage. */
/* 76 PX DE VIDE APRES CHAQUE CATEGORIE (defaut signale par l'user le 03/10). .fo-blocs:last-of-type
   semblait viser la derniere liste de la page : chaque liste etant l'unique ul de son li, la regle
   matchait TOUTES les categories et posait 76 px de vide sous chacune. La place du bouton flottant
   se reserve une seule fois, sur le conteneur (.fo-cats). */
.fo-blocs{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
.fo-bl{position:relative;isolation:isolate;display:flex;align-items:center;gap:12px;min-height:76px;padding:11px 14px 11px 18px;border-radius:14px;overflow:hidden;background:linear-gradient(180deg,#f4f6f9,#e9ecf1);color:#101828;text-decoration:none;-webkit-tap-highlight-color:transparent;box-shadow:inset 0 0 0 1px rgba(16,24,40,.12),0 1px 2px rgba(0,0,0,.5),0 8px 20px -16px #000,inset 0 1px 0 rgba(255,255,255,.95);transition:transform 140ms var(--fo-pop),box-shadow 140ms var(--fo-out)}
/* L'appui enfonce la carte ET rentre son ombre : elle se rapproche du fond, comme un vrai bouton. */
/* LE FILET QUI RATTACHE (21/09/2026, redemande par l'user : « il manque le trait d'avant qui
   montre que c'est rattache »). Le trait existait, mais DEHORS : il decalait le groupe de 16 px
   et c'est ce decalage qui paraissait de travers. Il revient DANS la carte, a la meme abscisse
   que celui de l'en-tete et de la meme couleur : en-tete et cartes alignent leurs filets sur une
   seule colonne, separes par les 8 px de l'interligne. Rien n'est indente, et le groupe se lit.
   Non lu : le filet s'epaissit avec le contour. */
.fo-bl::after{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:hsl(var(--c) 58% 56%);pointer-events:none}
.fo-bl.fo-neuf::after{width:5px;background:hsl(var(--c) 68% 50%)}
.fo-bl:active{transform:scale(.978);box-shadow:inset 0 0 0 1px rgba(16,24,40,.16),0 1px 2px rgba(0,0,0,.45),0 4px 10px -8px #000,inset 0 1px 0 rgba(255,255,255,.9)}
@media (hover:hover){.fo-bl:hover{background:linear-gradient(180deg,#f9fbfd,#eef1f6);box-shadow:inset 0 0 0 1px rgba(16,24,40,.18),0 1px 2px rgba(0,0,0,.55),0 12px 26px -14px #000,inset 0 1px 0 #fff}}
/* Non lu : le contour se renforce dans la meme teinte ; le point or reste, lui, le seul signal
   d'alerte de la liste — une couleur par role, pas deux roles par couleur. */
.fo-bl.fo-neuf{box-shadow:inset 0 0 0 1px rgba(16,24,40,.16),0 1px 2px rgba(0,0,0,.5),0 8px 20px -16px #000,inset 0 1px 0 rgba(255,255,255,.95)}
.fo-bl.fo-neuf .fo-bl-titre{font-weight:700}
/* UN SUJET FERME NE S'ATTENUE PLUS (03/10/2026) : sur une carte claire posee sur du noir, une
   opacite de 72 % ne se lit pas comme « ferme », elle se lit comme une carte d'une autre couleur
   (vu en capture : la premiere carte paraissait grise sans raison). C'est le TITRE qui passe en
   gris — la fermeture se dit sur le texte, pas sur la surface. */
.fo-bl.fo-clos{opacity:1}
.fo-bl.fo-clos .fo-bl-titre{color:#667085;font-weight:500}
/* L'image du sujet, cerclee dans la teinte de sa conversation. 44 px et non 56 : sur une carte de
   76 px, une image de 56 px touchait presque les deux bords et faisait paraitre la carte pleine. */
.fo-bl-av{position:relative;flex:none;display:inline-flex;border-radius:50%;box-shadow:0 0 0 2px hsl(var(--c) 52% 56%),0 1px 3px rgba(0,0,0,.25)}
/* LE ROND VAUT AUSSI POUR UN SVG (defaut du 21/09 : le motif sortait carre dans le cercle —
   la regle ne visait que img et span). Le motif porte en plus son propre disque de fond, donc
   il reste rond meme la ou un arrondi serait ignore. */
.fo-bl-av img,.fo-bl-av span,.fo-bl-av svg{border-radius:50%!important}
.fo-bl-img{width:44px;height:44px;object-fit:cover;background:#e4e7ec;display:block}
/* LE MOTIF ONE PIECE : le repli quand la conversation n'a pas d'image. Six emblemes tires du
   slug (MotifsOP.tsx), chacun sur son fond uni DESSINE dans le SVG — donc rond par construction. */
.fo-bl-motif{background:transparent;padding:0}
.fo-bl-corps{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
/* Le titre sur UNE ligne : c'est lui qui faisait la hauteur. Coupe par des points de suspension, le
   sujet reste reconnaissable, et son texte entier est porte par l'attribut title du lien. */
.fo-bl-titre{font-size:15px;font-weight:600;line-height:1.3;letter-spacing:-.01em;color:#101828;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* LA LIGNE DE SERVICE : qui, combien, quand — cote a cote. Les separateurs sont des elements VIDES
   et non un point ecrit : un point de ponctuation serait lu a voix haute par un lecteur d'ecran. */
.fo-bl-meta{display:flex;align-items:center;gap:6px;min-width:0;font-size:12.5px;line-height:1.25;color:#667085;white-space:nowrap}
.fo-bl-meta b{flex:none;max-width:45%;overflow:hidden;text-overflow:ellipsis;font-weight:600;color:#344054}
.fo-bl-meta i{flex:none;width:3px;height:3px;border-radius:99px;background:#c3c9d3}
.fo-bl-rep{flex:none;font-variant-numeric:tabular-nums}
.fo-bl-quand{min-width:0;overflow:hidden;text-overflow:ellipsis;color:#98a2b3}
.fo-bl-droite{display:flex;flex:none;align-self:center;align-items:center;gap:7px;font-size:12.5px}
.fo-bl-point{width:8px;height:8px;flex:none;border-radius:99px;background:var(--fo-or);box-shadow:0 0 0 2.5px rgba(255,255,255,.75)}
@media (max-width:359px){.fo-bl{gap:10px;padding:10px 12px 10px 16px}.fo-bl-av img,.fo-bl-av span,.fo-bl-img{width:40px!important;height:40px!important}.fo-bl-titre{font-size:14.5px}}

/* ═══════════ LE RETOUR AU DOIGT (03/10/2026) ═══════════
   Une carte qui ne repond pas au toucher se ressent comme une image. Celle-ci repond, et elle
   repond a l'endroit exact ou l'on a touche : --x / --y portent le point de contact, une onde y
   eclot et se dilate (520 ms), puis disparait d'elle-meme. Le retour arrive avant que le doigt se
   leve : il se ressent comme cause par soi.
   L'onde est GRISE et non coloree : c'est le geste qui doit se sentir, pas une lumiere de plus. */
.fo-bl-onde{position:absolute;z-index:-1;inset:0;border-radius:inherit;opacity:0;pointer-events:none;transform-origin:var(--x,50%) var(--y,50%);background:radial-gradient(circle at var(--x,50%) var(--y,50%),rgba(16,24,40,.16),rgba(16,24,40,.06) 36%,transparent 62%)}
.fo-bl.fo-touche .fo-bl-onde{animation:fo-onde-conv 520ms var(--fo-out) 1}
@keyframes fo-onde-conv{0%{opacity:0;transform:scale(.35)}18%{opacity:1}100%{opacity:0;transform:scale(2.1)}}
.fo-bl.fo-touche{box-shadow:0 1px 2px rgba(0,0,0,.6),0 6px 16px -10px #000}
@media (prefers-reduced-motion:reduce){.fo-bl.fo-touche .fo-bl-onde{animation:none}}

/* ═══════════ LE BALAYAGE D'ARRIVEE (03/10/2026) ═══════════
   Un reflet blanc traverse chaque carte UNE fois, a l'ouverture de la liste, decale de carte en carte
   (--d) : la liste se revele au lieu d'apparaitre d'un bloc. C'est le retour le moins cher qui existe
   — il dure 1,1 s au total, ne se repete jamais, et sur une surface claire il se lit comme de la
   lumiere qui passe, pas comme un clignotant. Transform et opacite seulement. */
.fo-bl-reflet{position:absolute;z-index:-1;inset:-40% -60%;pointer-events:none;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.85) 50%,transparent 58%);transform:translateX(-70%);animation:fo-balaye 1.1s calc(.25s + var(--d,0s)) cubic-bezier(.2,.7,.2,1) 1 both}
@keyframes fo-balaye{to{transform:translateX(70%)}}
@media (prefers-reduced-motion:reduce){.fo-bl-reflet{display:none}}


/* ═══════════ LE COFFRE DE BERRYS, EN VOLUME (21/09/2026) ═══════════
   button.cof > .cof-scene(.cof-halo + .c3 + .cof-pieces) + .cof-texte
   .c3 > .c3-boite(.c3-cuve[6 faces] + .c3-lum + .c3-couv[6 faces]) + .c3-ombre

   UNE VRAIE BOITE, pas un dessin : six faces posees dans l'espace, un couvercle articule sur son
   arete arriere haute. Trois choses font lire le volume, et chacune compte :
     - la vue de TROIS QUARTS (deux faces visibles au lieu d'une) ;
     - une DERIVE lente de quelques degres : l'oeil confirme la profondeur par le mouvement ;
     - une LUMIERE PAR FACE — avant eclairee, cotes dans l'ombre, dessus le plus clair. Un cube
       dont toutes les faces ont la meme couleur redevient plat.
   Tout passe par le compositeur (transform et opacity) : rien a charger, rien a decoder. */
/* LA CARTE elle-meme. Ces regles etaient dans le bloc du dessin plat et sont parties avec lui :
   sans elles, la scene et le texte s'empilaient au lieu de se ranger cote a cote (vu en capture). */
/* LA RANGEE DE COFFRES au bas du fil, et le choix du montant sous le « + » du composeur. */
/* LE COFFRE VIT DANS LE FIL, A SA DATE (23/09, user : « au meme endroit qu'un message, pas en bas de
   la page »). Il n'a donc plus de degagement a lui : c'est le fil qui le porte, comme un message. */
/* LE COFFRE SE POSE OU SE POSE UN MESSAGE (user 23/09). Il n'occupe plus toute la largeur : il
   entre dans la COLONNE DES BULLES, avec le meme retrait qu'un message recu — l'avatar fait 26 px et
   l'ecart 8, donc 34 px — et la meme largeur utile (84 %, comme .fo-col). Pose par nous, il passe a
   droite, comme notre propre bulle. Il garde sa hauteur de bulle (la version dite petite).
   (Aucun accent grave ici : ce CSS vit dans un litteral gabarit, un accent grave le refermerait.) */
.fo-coffre-fil{display:flex;align-items:flex-start;gap:8px;margin:10px 0 2px;min-width:0}
/* La place de l'avatar, vide : c'est elle qui aligne le coffre sur les bulles recues, au pixel
   (26 px d'avatar + 8 d'ecart). Le plafond de 84 % est celui de .fo-col : meme bord droit. */
.fo-coffre-fil::before{content:"";flex:none;width:26px}
.fo-coffre-fil .cof-petit{width:auto;max-width:84%;margin:0}
.fo-coffre-mien{flex-direction:row-reverse}
.fo-coffres{display:flex;flex-direction:column;gap:2px;margin:6px 0 2px}
/* ── LE COFFRE SE VOIT (23/09/2026) ────────────────────────────────────────────────────────────
   Capture de l'user : deux « Coffre vide » empiles en bas a gauche, et le coffre vivant perdu au
   milieu. Le correctif est d'abord dans le fil (trois rangs, voir forum.$slug.tsx) ; ici, ce qui
   fait qu'un coffre A PRENDRE ne ressemble plus jamais a un coffre vide :
     - un anneau d'or de 2 px qui respire (l'ancien filet faisait .30 d'opacite, invisible de nuit) ;
     - le mot « Ouvrir », pose a droite : un bouton se lit, il ne se devine pas.
   L'animation ne touche que box-shadow (le compositeur), et s'arrete sous prefers-reduced-motion. */
.cof-prenable{box-shadow:inset 0 0 0 2px rgba(254,195,136,.85),0 0 0 0 rgba(254,195,136,.34),0 14px 34px -18px #000;animation:cof-appel 2.6s ease-in-out infinite}
@keyframes cof-appel{
  0%,100%{box-shadow:inset 0 0 0 2px rgba(254,195,136,.85),0 0 0 0 rgba(254,195,136,.38),0 14px 34px -18px #000}
  55%{box-shadow:inset 0 0 0 2px rgba(255,208,120,1),0 0 0 8px rgba(254,195,136,0),0 14px 34px -18px #000}}
@media (prefers-reduced-motion:reduce){.cof-prenable{animation:none}}
.cof-ouvrir{flex:none;margin-left:auto;display:inline-flex;align-items:center;height:34px;padding:0 15px;border-radius:99px;background:linear-gradient(180deg,#ffd479,#fdb566);color:#1d1f21;font-size:13.5px;font-weight:800;letter-spacing:.01em;box-shadow:0 6px 16px -8px rgba(254,195,136,.9)}
.cof-prenable:active .cof-ouvrir{transform:scale(.96)}
/* LES 10 S AVANT D'OUVRIR (20/10/2026, user : « un timer de 10 s avant que les gens puissent cliquer, visible pour les gens ») :
   la pilule prend la place du bouton, sa jauge se vide avec le temps ; rien ne bouge en boucle. */
.cof-compte{flex:none;margin-left:auto;display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 14px;border-radius:99px;background:linear-gradient(90deg,rgba(254,195,136,.36) var(--p,100%),rgba(255,255,255,.07) var(--p,100%));box-shadow:inset 0 0 0 1.5px rgba(254,195,136,.6);color:#ffe3bf;font-size:12.5px;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.cof-compte b{font-size:15px;font-weight:900;color:#fff}
.cof-attente{cursor:default}
/* LE TIRAGE AU SORT (20/10/2026) : pendant les 10 s le coffre se touche pour PARTICIPER ; « Inscrit » est un état, pas une action (vert, pas orange) */
.cof-attente.cof-prenable{cursor:pointer}
.cof-inscrit-ok{color:#9ef0b4;font-weight:800}
.cof-inscrit .cof-sous{color:#d9f7e2}
/* LA ROUE DES NOMS (20/10/2026) : les pseudos des participants défilent dans une fenêtre, ralentissent, et s'arrêtent sur
   le gagnant tiré par la base, mis en or. Tout en transform et opacity ; sous mouvement réduit, aucun défilement. */
.cof-roue{display:flex;flex-direction:column;gap:4px;min-width:0}
.cof-roue-titre{font-size:12px;font-weight:800;color:#ffe3bf;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cof-roue-fenetre{position:relative;display:block;height:30px;overflow:hidden;border-radius:9px;background:rgba(0,0,0,.32);box-shadow:inset 0 0 0 1.5px rgba(254,195,136,.45)}
.cof-roue-fenetre::before,.cof-roue-fenetre::after{content:"";position:absolute;left:0;right:0;height:8px;z-index:1;pointer-events:none}
.cof-roue-fenetre::before{top:0;background:linear-gradient(rgba(0,0,0,.45),transparent)}
.cof-roue-fenetre::after{bottom:0;background:linear-gradient(transparent,rgba(0,0,0,.45))}
.cof-roue-nom{display:block;padding:0 10px;line-height:30px;font-size:15px;font-weight:800;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:cof-roue-defile 70ms cubic-bezier(.2,0,0,1)}
@keyframes cof-roue-defile{from{transform:translateY(-45%);opacity:.6}to{transform:none;opacity:1}}
.cof-roue-fin .cof-roue-fenetre{background:linear-gradient(90deg,rgba(255,212,121,.30),rgba(253,181,102,.18));box-shadow:inset 0 0 0 2px #ffd479,0 0 18px -4px rgba(255,212,121,.75)}
.cof-roue-fin .cof-roue-nom{color:#ffd479;animation:cof-roue-arret 380ms cubic-bezier(.2,1.15,.4,1)}
@keyframes cof-roue-arret{from{transform:scale(.86);opacity:.4}to{transform:none;opacity:1}}
.cof-petit .cof-roue-fenetre{height:26px}
.cof-petit .cof-roue-nom{line-height:26px;font-size:14px}
@media (prefers-reduced-motion:reduce){.cof-roue-nom,.cof-roue-fin .cof-roue-nom{animation:none}}
.cof-compte-court{position:relative;justify-content:center;width:48px;height:48px;padding:0;margin:0 12px 0 13px;border-radius:50%;background:conic-gradient(#fec388 var(--p,100%),rgba(255,255,255,.12) 0);box-shadow:0 0 0 1px rgba(254,195,136,.35)}
.cof-compte-court::before{content:"";position:absolute;inset:3.5px;border-radius:50%;background:#17121c}
.cof-compte-court b{position:relative;display:inline-flex;align-items:baseline;gap:1px;font-size:18px;line-height:1}
.cof-compte-court small{font-size:11px;font-weight:700;color:#ffd9a8}
.cof-quiz.cof-petit .cof-compte{grid-column:2 / 4;grid-row:2;justify-self:end;margin:0}
.cof-quiz .cof-compte{border-radius:4px;transform:skew(-8deg);color:#1d1f21;background:linear-gradient(90deg,rgba(0,0,0,.16) var(--p,100%),rgba(0,0,0,.04) var(--p,100%));box-shadow:inset 0 0 0 2px #1d1f21}
.cof-quiz .cof-compte b{color:#000}
/* LES COFFRES DEJA PRIS ne s'empilent plus : une ligne sourde, qui dit qui les a eus. */
.fo-coffres-passes{align-self:flex-start;display:flex;align-items:center;gap:7px;margin:4px 0 2px;padding:6px 12px;border-radius:99px;background:rgba(255,255,255,.045);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);font-size:12px;color:var(--fo-sourd)}
/* LA PASTILLE qui mene au coffre quand il est hors de l'ecran (meme place que « N nouveaux »). */
.fo-nouveaux-coffre{display:inline-flex;align-items:center;gap:7px;background:linear-gradient(180deg,#ffd479,#fdb566);color:#1d1f21;font-weight:800}
/* LE BADGE de la liste du forum : la rangee d'un sujet ou un coffre attend. */
.fo-bl-coffre{flex:none;display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 9px;border-radius:99px;background:linear-gradient(180deg,#ffd479,#fdb566);color:#1d1f21;font-size:11px;font-weight:800;white-space:nowrap}
.fo-bl-hasard{padding:0 8px 0 3px;background:linear-gradient(90deg,#e7ebf0 0 50%,#2b0c13 50% 100%);box-shadow:inset 0 0 0 1px rgba(212,178,106,.8);color:#ebf2fb;text-shadow:0 1px 2px #000;font-variant-numeric:tabular-nums}
.fo-bl-hasard img{width:17px;height:17px;max-width:none}
.fo-pil-coffre{background:linear-gradient(180deg,#ffd479,#fdb566);color:#1d1f21;font-weight:800}
/* LE PANNEAU DES MONTANTS vit AU-DESSUS de la rangee du composeur, jamais dedans : place dans la
   rangee il en devenait un element de flex, la rangee se cassait et tout remontait. */
.fo-coffre-titre{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#e0b558}
/* LE COFFRET A LA BARRE (ForumCoffretChoix, 02/10/2026, user : « une barre qui monte jusqu a 777 Berry ») — version
   ALLEGEE le soir meme (« c est trop grossier, fais mieux ») : chiffre de 30 px sur une ligne avec sa legende, - / +
   de 32 px de part et d autre d une barre fine (6 px, curseur blanc de 22 px), montants rapides en selecteur segmente,
   bouton plein de 42 px sans halo, coffre a badges en simple filet. Une seule couleur d accent : l or, sur le chiffre
   a 777, le remplissage et le bouton. Sur PC le contenu tient dans 480 px au centre du composeur. */
.fo-cof-p{display:flex;flex-direction:column;gap:10px;max-height:min(56vh,440px);overflow-y:auto;overscroll-behavior:contain;padding:10px 12px 12px;border-bottom:1px solid var(--fo-filet)}
.fo-cof-p-tete{display:flex;align-items:center;justify-content:space-between;gap:8px}
.fo-cof-p-tete .fo-coffre-titre{display:inline-flex;align-items:center;gap:6px}
.fo-cof-p-tete .fo-coffre-titre svg{width:15px;height:15px}
.fo-cof-p-x{display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:10px;background:rgba(255,255,255,.06);color:var(--fo-txt2);cursor:pointer}
.fo-cof-p-x svg{width:15px;height:15px}
.fo-cof-p-corps{display:flex;flex-direction:column;gap:10px;width:100%;max-width:480px;margin:0 auto}
.fo-cof-p-valeur{display:flex;align-items:baseline;justify-content:center;gap:10px;margin:2px 0 0;min-width:0}
.fo-cof-p-montant{display:inline-flex;align-items:baseline;gap:3px;color:var(--fo-txt);font-variant-numeric:tabular-nums;line-height:1}
.fo-cof-p-montant b{font-size:30px;font-weight:700;letter-spacing:-.02em}
.fo-cof-p-montant span{font-size:15px;font-weight:600;color:var(--fo-or)}
.fo-cof-p-montant[data-max] b{color:var(--fo-or-txt)}
.fo-cof-p-sous{font-size:12px;color:var(--fo-sourd2);white-space:nowrap}
.fo-cof-p-reglage{display:flex;align-items:center;gap:10px}
.fo-cof-p-pas{flex:none;display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:99px;background:rgba(255,255,255,.06);color:var(--fo-txt2);cursor:pointer;transition:background-color 120ms var(--fo-out)}
.fo-cof-p-pas svg{width:15px;height:15px}
.fo-cof-p-pas:active:not(:disabled){background:rgba(255,255,255,.12)}
.fo-cof-p-pas:disabled{opacity:.3;cursor:default}
.fo-cof-barre{position:relative;flex:1;min-width:0;height:36px;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;cursor:pointer;outline:none}
.fo-cof-piste{position:absolute;left:0;right:0;top:50%;height:6px;margin-top:-3px;border-radius:99px;overflow:hidden;background:rgba(255,255,255,.10)}
.fo-cof-rempli{position:absolute;left:0;top:0;bottom:0;width:calc(11px + var(--part,0) * (100% - 22px));border-radius:inherit;background:var(--fo-or)}
.fo-cof-pouce{position:absolute;top:50%;left:calc(var(--part,0) * (100% - 22px));width:22px;height:22px;margin-top:-11px;border-radius:99px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.5),0 0 0 .5px rgba(0,0,0,.3)}
.fo-cof-barre:focus-visible .fo-cof-pouce{box-shadow:0 0 0 2px var(--fo-fond),0 0 0 4px var(--fo-or)}
.fo-cof-p-rapides{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;padding:3px;border-radius:12px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.fo-cof-p-rapide{height:30px;padding:0;border:0;border-radius:9px;background:transparent;color:var(--fo-txt2);font:inherit;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;cursor:pointer;transition:background-color 120ms var(--fo-out),color 120ms var(--fo-out)}
.fo-cof-p-rapide[data-clin]{color:#e0b558}
.fo-cof-p-rapide[aria-pressed="true"]{background:rgba(254,195,136,.16);color:var(--fo-or-txt)}
.fo-cof-p-poser{display:flex;align-items:center;justify-content:center;gap:7px;height:42px;margin-top:2px;padding:0 16px;border:0;border-radius:12px;background:var(--fo-or);color:var(--fo-sur-or);font:inherit;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;cursor:pointer;transition:transform 100ms var(--fo-out),filter 120ms var(--fo-out)}
.fo-cof-p-poser svg{width:16px;height:16px}
.fo-cof-p-poser:active{transform:scale(.98)}
@media (hover:hover){.fo-cof-p-poser:hover{filter:brightness(1.06)}.fo-cof-p-rapide:hover:not([aria-pressed="true"]){background:rgba(255,255,255,.06)}.fo-cof-p-badge:hover{background:rgba(170,140,255,.08)}}
.fo-cof-p-badge{display:flex;align-items:center;justify-content:center;gap:6px;min-height:38px;padding:0 12px;border:0;border-radius:12px;background:transparent;box-shadow:inset 0 0 0 1px rgba(170,140,255,.26);color:#d9ccff;font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:background-color 120ms var(--fo-out)}
.fo-cof-p-badge svg{flex:none;width:15px;height:15px;color:#bba6ff}
.fo-cof-p-badge small{font-size:12px;font-weight:500;color:var(--fo-sourd2)}
.fo-cof-p-badge:active{background:rgba(170,140,255,.10)}
.fo-cof-p button:focus-visible{outline:2px solid #ffd479;outline-offset:2px}
@media (prefers-reduced-motion:reduce){.fo-cof-p-pas,.fo-cof-p-poser,.fo-cof-p-rapide,.fo-cof-p-badge{transition:none}}
/* LE COFFRE EN PETIT, dans une conversation : la taille d'une bulle, pas d'une affiche. Il garde
   toute sa mecanique et toute son animation — seules les mesures changent. */
.cof-petit{width:auto;max-width:min(88%,330px);margin:6px 0;padding:8px 12px 8px 8px;gap:10px;border-radius:14px}
.cof-petit .cof-scene{width:64px;height:56px}
.cof-petit .c3{--w:54px;--h:29px;--p:34px;--lh:9px;--lw:60px;--lp:40px;width:64px;height:56px;perspective:320px}
.cof-petit .c3-ombre{width:54px;height:10px;margin-left:-27px;bottom:2px}
.cof-petit .cof-halo{width:56px;height:40px}
.cof-petit .cof-titre{font-size:16px}
.cof-petit .cof-unite{font-size:11px}
.cof-petit .cof-sous{font-size:11.5px}
.cof-petit .cof-pieces i{width:7px;height:7px;margin:-3.5px 0 0 -3.5px}
.cof{position:relative;overflow:hidden;display:flex;align-items:center;gap:14px;width:100%;margin:10px 0;padding:12px 14px;border:0;border-radius:16px;background:linear-gradient(140deg,#231a34,#17121f 62%);box-shadow:inset 0 0 0 1px rgba(254,195,136,.30),0 12px 30px -18px #000;color:var(--fo-txt);text-align:left;font:inherit;-webkit-tap-highlight-color:transparent}
.cof-prenable{cursor:pointer;transition:box-shadow 140ms var(--fo-out)}
@media (hover:hover){.cof-prenable:hover{box-shadow:inset 0 0 0 1px rgba(254,195,136,.6),0 16px 34px -16px #000}}
.cof-envoi{pointer-events:none;opacity:.85}
/* LA LUEUR D'AVANT : le coffre a l'air plein avant qu'on y touche. */
.cof-halo{position:absolute;z-index:0;width:82px;height:60px;border-radius:50%;background:radial-gradient(circle,rgba(254,195,136,.5),transparent 68%);filter:blur(10px);opacity:.5;animation:cof-respire 2.4s ease-in-out infinite alternate;pointer-events:none}
@keyframes cof-respire{from{opacity:.3;transform:scale(.9)}to{opacity:.8;transform:scale(1.1)}}
.cof-ouvert .cof-halo{opacity:1;animation:none;background:radial-gradient(circle,rgba(255,214,120,.7),transparent 70%)}
/* LES PIECES : dix, chacune son angle et son retard. Une seule fois, a la victoire. */
.cof-pieces{position:absolute;inset:0;pointer-events:none;z-index:2}
.cof-pieces i{position:absolute;left:50%;top:44%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:radial-gradient(circle at 34% 30%,#ffeedf,#f0b93f 62%,#d88400);box-shadow:0 0 6px rgba(254,195,136,.85);transform:rotate(var(--a)) translateY(0) scale(.4);opacity:0;animation:cof-piece 1s cubic-bezier(.2,.75,.3,1) var(--d) both}
@keyframes cof-piece{
  0%{opacity:0;transform:rotate(var(--a)) translateY(0) scale(.4)}
  18%{opacity:1}
  60%{transform:rotate(var(--a)) translateY(-48px) scale(1)}
  100%{opacity:0;transform:rotate(var(--a)) translateY(-18px) scale(.7)}}
.cof-scene{position:relative;flex:none;width:104px;height:88px;display:grid;place-items:center}
/* --lw et --lp : le couvercle DEBORDE de 6 px de chaque cote, comme sur un vrai coffre. Sans
   debord il fait un deuxieme tiroir pose sur le premier — et l'user l'a vu a l'envers.
   --lh descend a 13 : un couvercle est plus plat que sa cuve. */
.c3{--w:80px;--h:44px;--p:50px;--lh:13px;--lw:88px;--lp:56px;
  --bois-av:linear-gradient(180deg,#b46e06 0%,#55585b 52%,#404245 100%);
  --bois-cote:linear-gradient(180deg,#4c4e51 0%,#333538 100%);
  --bois-haut:linear-gradient(180deg,#d1810c 0%,#626567 100%);
  --or:linear-gradient(180deg,#ffeedf 0%,#e6bc60 42%,#d18002 100%);
  position:relative;width:104px;height:88px;perspective:480px;perspective-origin:50% 44%}
.c3-boite{position:absolute;left:0;top:0;width:100%;height:100%;transform-style:preserve-3d;
  animation:c3-derive 5.6s ease-in-out infinite alternate}
@keyframes c3-derive{
  from{transform:rotateX(-26deg) rotateY(-30deg) translateY(4px)}
  to{transform:rotateX(-21deg) rotateY(-16deg) translateY(-1px)}}
.c3-cuve{position:absolute;left:0;top:0;width:100%;height:100%;transform-style:preserve-3d}
.c3-f{position:absolute;left:50%;top:50%;display:block;background:var(--bois-av);
  box-shadow:inset 0 0 0 1px rgba(16,19,21,.6)}
/* Le grain du bois : des planches, sans une seule image. */
.c3-av,.c3-ar,.c3-cav,.c3-car{background-image:var(--bois-av),repeating-linear-gradient(90deg,rgba(0,0,0,.22) 0 1px,transparent 1px 31px)}
.c3-ga,.c3-dr,.c3-cga,.c3-cdr{background-image:var(--bois-cote),repeating-linear-gradient(90deg,rgba(0,0,0,.2) 0 1px,transparent 1px 20px)}
/* LA CUVE — transformations de cube, dans l'ordre standard. */
.c3-av{width:var(--w);height:var(--h);margin:calc(var(--h) / -2) 0 0 calc(var(--w) / -2);transform:translateZ(calc(var(--p) / 2))}
.c3-ar{width:var(--w);height:var(--h);margin:calc(var(--h) / -2) 0 0 calc(var(--w) / -2);transform:rotateY(180deg) translateZ(calc(var(--p) / 2))}
.c3-dr{width:var(--p);height:var(--h);margin:calc(var(--h) / -2) 0 0 calc(var(--p) / -2);transform:rotateY(90deg) translateZ(calc(var(--w) / 2))}
.c3-ga{width:var(--p);height:var(--h);margin:calc(var(--h) / -2) 0 0 calc(var(--p) / -2);transform:rotateY(-90deg) translateZ(calc(var(--w) / 2))}
.c3-bas{width:var(--w);height:var(--p);margin:calc(var(--p) / -2) 0 0 calc(var(--w) / -2);transform:rotateX(-90deg) translateZ(calc(var(--h) / 2));background:#1b1d1f}
/* L'INTERIEUR : le fond de la caisse, qu'on ne decouvre qu'une fois le couvercle leve. */
.c3-dedans{width:var(--w);height:var(--p);margin:calc(var(--p) / -2) 0 0 calc(var(--w) / -2);transform:rotateX(90deg) translateZ(calc(var(--h) / 2));background:radial-gradient(ellipse at 50% 40%,#3f4144 0%,#1a1d1f 78%);box-shadow:inset 0 0 20px 7px rgba(0,0,0,.8)}
.c3-ouvert .c3-dedans{background:radial-gradient(ellipse at 50% 42%,#ffeedf 0%,#ffcf6b 26%,#ea8f00 56%,#282b2d 88%)}
/* LES FERRURES : bande doree, serrure, coins. */
.c3-av::before{content:"";position:absolute;left:0;right:0;top:36%;height:7px;background:var(--or);box-shadow:0 1px 0 rgba(0,0,0,.5)}
.c3-av::after{content:"";position:absolute;left:50%;top:18%;width:23px;height:22px;margin-left:-11.5px;border-radius:3px;background:var(--or);box-shadow:0 2px 5px rgba(0,0,0,.55),inset 0 0 0 1px rgba(64,66,69,.5)}
.c3-ga::before,.c3-dr::before{content:"";position:absolute;left:0;right:0;top:36%;height:6px;background:var(--or);opacity:.8}
/* LE COUVERCLE, articule sur l'arete ARRIERE HAUTE : l'origine est posee la, puis il tourne. */
.c3-couv{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;
  transform:translate3d(0,calc(var(--h) / -2),calc(var(--p) / -2)) rotateX(0deg);
  transition:transform 780ms cubic-bezier(.2,1.14,.3,1)}
.c3-ouvert .c3-couv{transform:translate3d(0,calc(var(--h) / -2),calc(var(--p) / -2)) rotateX(-116deg)}
/* LE COUVERCLE EST UN CUBE COMME LES AUTRES. c3-couv porte la charniere ; c3-couv-in decale
   jusqu'au centre du couvercle ; les six faces reprennent ensuite, au caractere pres, les
   transformations de la cuve, avec --lh, --lw et --lp a la place de --h, --w et --p.
   Toute autre convention le faisait lire A L'ENVERS, capot ouvert vers le ciel (defaut vu par
   l'user le 21/09 : on dirait qu'il est a l'envers). */
.c3-couv-in{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d;
  transform:translate3d(0,calc(var(--lh) / -2),calc(var(--p) / 2))}
.c3-couv .c3-f{left:0;top:0}
.c3-cav{width:var(--lw);height:var(--lh);margin:calc(var(--lh) / -2) 0 0 calc(var(--lw) / -2);transform:translateZ(calc(var(--lp) / 2))}
.c3-car{width:var(--lw);height:var(--lh);margin:calc(var(--lh) / -2) 0 0 calc(var(--lw) / -2);transform:rotateY(180deg) translateZ(calc(var(--lp) / 2))}
.c3-cdr{width:var(--lp);height:var(--lh);margin:calc(var(--lh) / -2) 0 0 calc(var(--lp) / -2);transform:rotateY(90deg) translateZ(calc(var(--lw) / 2))}
.c3-cga{width:var(--lp);height:var(--lh);margin:calc(var(--lh) / -2) 0 0 calc(var(--lp) / -2);transform:rotateY(-90deg) translateZ(calc(var(--lw) / 2))}
/* LE DESSUS est la face la plus CLAIRE : c'est elle qui dit ou est le haut. */
.c3-chaut{width:var(--lw);height:var(--lp);margin:calc(var(--lp) / -2) 0 0 calc(var(--lw) / -2);transform:rotateX(90deg) translateZ(calc(var(--lh) / 2));border-radius:4px;background-image:linear-gradient(180deg,#f8990b 0%,#c87b0a 58%,#626467 100%),repeating-linear-gradient(90deg,rgba(0,0,0,.16) 0 1px,transparent 1px 29px);box-shadow:inset 0 0 0 1px rgba(16,19,21,.5),inset 0 10px 16px -10px rgba(255,225,160,.6)}
.c3-cbas{width:var(--lw);height:var(--lp);margin:calc(var(--lp) / -2) 0 0 calc(var(--lw) / -2);transform:rotateX(-90deg) translateZ(calc(var(--lh) / 2));background:#202225}
.c3-chaut::before{content:"";position:absolute;left:0;right:0;top:44%;height:7px;background:var(--or);opacity:.92}
/* LE MORAILLON pend du couvercle SUR la serrure de la cuve : c'est lui qui dit dans quel sens va
   le couvercle. Sans lui, le capot pouvait se lire a l'envers. */
.c3-cav::before{content:"";position:absolute;left:50%;bottom:-8px;width:17px;height:19px;margin-left:-8.5px;border-radius:2px 2px 4px 4px;background:var(--or);box-shadow:0 2px 4px rgba(0,0,0,.55)}
/* LA LUMIERE qui sort : un plan dresse au-dessus de l'ouverture, eteint coffre ferme. */
.c3-lum{position:absolute;left:50%;top:50%;width:var(--w);height:70px;margin:0 0 0 calc(var(--w) / -2);transform:translate3d(0,calc(var(--h) / -2),0) rotateX(-90deg) translateZ(2px);background:radial-gradient(ellipse at 50% 100%,rgba(255,216,130,.95),rgba(254,217,183,.38) 42%,transparent 72%);opacity:0;transition:opacity 520ms 280ms ease-out;pointer-events:none}
.c3-ouvert .c3-lum{opacity:1}
/* L'OMBRE PORTEE : elle ancre la boite au sol, sinon elle flotte dans le vide. */
.c3-ombre{position:absolute;left:50%;bottom:4px;width:80px;height:13px;margin-left:-40px;border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.7),transparent 70%);filter:blur(3px);pointer-events:none}
.cof-prenable:active .c3-boite{animation-play-state:paused}
/* LE TEXTE de la carte. Ces regles etaient dans le bloc du dessin plat et sont parties avec lui :
   sans elles, le montant et sa phrase se collaient sur une seule ligne (vu en capture). */
.cof-texte{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.cof-titre{font-size:20px;font-weight:800;letter-spacing:-.01em;line-height:1.15;color:#ffd479;font-variant-numeric:tabular-nums}
.cof-montant{font-weight:800}
.cof-unite{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#e0b558}
.cof-titre.cof-vide{color:var(--fo-sourd)}
.cof-sous{font-size:12.5px;line-height:1.35;color:var(--fo-txt2)}
/* ETEINT : pris par quelqu'un d'autre, ou refuse. Couvercle ouvert, AUCUNE lumiere, bois sourd.
   Un coffre vide qui brille encore promet quelque chose qui n'y est plus. */
.cof-eteint{box-shadow:inset 0 0 0 1px rgba(255,255,255,.10),0 12px 30px -18px #000;background:linear-gradient(140deg,#1b1a22,#141319 62%)}
.cof-eteint .cof-halo,.cof-eteint .c3-lum{display:none}
.cof-eteint .c3{filter:saturate(.3) brightness(.62)}
/* ═══════════ LES COFFRES SELON LA MISE ET LES COFFRES SPECIAUX (02/10/2026) ═══════════
   User : « ameliore le coffre selon la mise », puis le coffre hasard (ange ou tete de mort) et le coffre a badges
   revu, valides sur la page d essai « Coffres selon la mise ». Chaque coffre porte son HABIT en variables (bois,
   ferrures, serrure, lumiere, tresor, carte) ; les regles ci-dessous les lisent. Palier 2 = le coffre d avant.
   Tout reste en transform et opacity ; prefers-reduced-motion coupe les boucles et les particules. */
.cof{--carte-fond:linear-gradient(140deg,#231a34,#17121f 62%);--anneau-bas:rgba(254,195,136,.30);--anneau:rgba(254,195,136,.85);--anneau-vif:rgba(255,208,120,1);--anneau-halo:rgba(254,195,136,.38);
  --dessus:linear-gradient(180deg,#f8990b 0%,#c87b0a 58%,#626467 100%);--grain:rgba(0,0,0,.22);--joint:rgba(16,19,21,.6);--dessous:#1b1d1f;--reflet:rgba(255,225,160,.6);
  --serrure:var(--or);--rivet:#ffeedf;--fente:.45;--vol:-44px;
  --halo:rgba(254,195,136,.5);--lumiere:rgba(255,216,130,.95);--lumiere-2:rgba(254,217,183,.38);--rayon:70px;
  --tresor:radial-gradient(ellipse at 50% 42%,#ffeedf 0%,#ffcf6b 26%,#ea8f00 56%,#282b2d 88%);
  --tas:radial-gradient(circle at 30% 40%,#ffeedf 0 1.6px,#f0b93f 2.2px 3px,transparent 3.4px) 0 0/7px 6px,radial-gradient(circle at 60% 60%,#ffeedf 0 1.4px,#ffa638 2px 2.8px,transparent 3.2px) 3px 2px/8px 7px,radial-gradient(ellipse at 50% 45%,#ffeedf,#f0b93f 55%,#535558);
  --piece:radial-gradient(circle at 34% 30%,#ffeedf,#f0b93f 62%,#d88400);--piece-lueur:rgba(254,195,136,.85);
  --titre-coul:#ffd479;--unite-coul:#e0b558;--rang-coul:#e0b558;--bouton:linear-gradient(180deg,#ffd479,#fdb566);--bouton-txt:#1d1f21;
  background:var(--carte-fond);box-shadow:inset 0 0 0 1px var(--anneau-bas),0 12px 30px -18px #000}
.cof .c3{--bois-av:var(--bois-av-p,linear-gradient(180deg,#b46e06 0%,#55585b 52%,#404245 100%));--bois-cote:var(--bois-cote-p,linear-gradient(180deg,#4c4e51 0%,#333538 100%));--or:var(--metal-p,linear-gradient(180deg,#ffeedf 0%,#e6bc60 42%,#d18002 100%))}
.cof-prenable{animation:cof-appel-p 2.6s ease-in-out infinite}
@keyframes cof-appel-p{
  0%,100%{box-shadow:inset 0 0 0 2px var(--anneau),0 0 0 0 var(--anneau-halo),0 14px 34px -18px #000}
  55%{box-shadow:inset 0 0 0 2px var(--anneau-vif),0 0 0 8px transparent,0 14px 34px -18px #000}}
.cof-halo{background:radial-gradient(circle,var(--halo),transparent 68%)}
.cof-ouvert .cof-halo{background:radial-gradient(circle,var(--lumiere),transparent 70%)}
.cof-titre{color:var(--titre-coul)}
.cof-unite{color:var(--unite-coul)}
.cof-rang{font-size:9.5px;line-height:1.25;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--rang-coul);text-wrap:balance}
.cof:not(.cof-petit) .cof-rang{font-size:10.5px}
.cof-ouvrir{background:var(--bouton);color:var(--bouton-txt);box-shadow:0 6px 16px -8px var(--anneau-vif)}
.c3-f{box-shadow:inset 0 0 0 1px var(--joint)}
.c3-av,.c3-ar,.c3-cav,.c3-car{background-image:var(--bois-av),repeating-linear-gradient(90deg,var(--grain) 0 1px,transparent 1px 31px)}
.c3-ga,.c3-dr,.c3-cga,.c3-cdr{background-image:var(--bois-cote),repeating-linear-gradient(90deg,var(--grain) 0 1px,transparent 1px 20px)}
.c3-bas,.c3-cbas{background:var(--dessous)}
.c3-ouvert .c3-dedans{background:var(--tresor)}
.c3-chaut{background-image:var(--dessus),repeating-linear-gradient(90deg,var(--grain) 0 1px,transparent 1px 29px);box-shadow:inset 0 0 0 1px var(--joint),inset 0 10px 16px -10px var(--reflet)}
.c3-chaut::after{content:"";position:absolute;inset:0;background:var(--embleme,none);pointer-events:none}
.c3-av::before{background:var(--bande-av,var(--or))}
.c3-av::after{background:var(--serrure)}
.c3-lum{height:var(--rayon);background:radial-gradient(ellipse at 50% 100%,var(--lumiere),var(--lumiere-2) 42%,transparent 72%)}
/* les coins, les rivets, la fente de lumiere sous le couvercle */
.c3-av>b{position:absolute;inset:0;background:var(--coins,none);pointer-events:none}
.c3-av>em{position:absolute;left:0;right:0;top:36%;height:7px;background:radial-gradient(circle,var(--rivet) 0 .9px,transparent 1.4px) 3px 50%/12px 7px repeat-x;pointer-events:none}
.c3-av>u{position:absolute;left:1px;right:1px;top:0;height:2px;background:var(--lumiere);box-shadow:0 0 6px 1px var(--lumiere);opacity:var(--fente);animation:c3-fente 1.9s ease-in-out infinite alternate;pointer-events:none}
@keyframes c3-fente{from{opacity:calc(var(--fente) * .4)}to{opacity:var(--fente)}}
.c3-ouvert .c3-av>u{display:none}
/* le tas de pieces, bombe au-dessus du bord, visible une fois le couvercle leve */
.c3-tas{width:calc(var(--w) - 6px);height:calc(var(--p) - 6px);margin:calc((var(--p) - 6px) / -2) 0 0 calc((var(--w) - 6px) / -2);transform:rotateX(90deg) translateZ(calc(var(--h) / 2 + 1px));border-radius:46%;background:var(--tas);box-shadow:none;opacity:0;transition:opacity 300ms 260ms ease-out;-webkit-mask:radial-gradient(ellipse 52% 54% at 50% 50%,#000 72%,transparent 100%);mask:radial-gradient(ellipse 52% 54% at 50% 50%,#000 72%,transparent 100%)}
.c3-ouvert .c3-tas{opacity:1}
/* en petit, dans une conversation : serrure, bandes et rivets a l echelle */
.cof-petit .c3-av::before{height:5px}
.cof-petit .c3-av>em{height:5px;background-size:9px 5px}
.cof-petit .c3-av::after{width:15px;height:15px;margin-left:-7.5px}
.cof-petit .c3-ga::before,.cof-petit .c3-dr::before{height:4px}
.cof-petit .c3-chaut::before{height:5px}
.cof-petit .c3-cav::before{width:11px;height:13px;margin-left:-5.5px;bottom:-6px}
/* reflet qui glisse sur les ferrures (paliers 3 a 5) */
.cof-p5 .c3-av::before{background-image:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.85) 50%,transparent 65%),var(--bande-av,var(--or));background-size:300% 100%,100% 100%;background-repeat:no-repeat;animation:c3-reflet 3.6s ease-in-out infinite}
@keyframes c3-reflet{0%,55%{background-position:120% 0,0 0}85%,100%{background-position:-20% 0,0 0}}
/* PALIERS 3 ET 4 : LE MEME REFLET, DEPLACE AU LIEU D ETRE REPEINT (13/10/2026, joueurs : « ca lag a mort ce soir »). Un
   background-position anime redemande une image au fil principal a CHAQUE rafraichissement, que le reflet passe ou non
   (il ne passe que 30 % du temps). Le reflet est ici une bande a part (b::before, trois fois la largeur de la face, comme
   l image d origine), glissee par transform aux memes instants : meme image, memes positions (120 % = -80 % de la bande,
   -20 % = +13,33 %), dessinee par le compositeur. Le palier 5 garde l ancienne regle : sa ferrure a plusieurs couches. */
.cof-p3 .c3-av>b,.cof-p4 .c3-av>b{overflow:hidden}
.cof-p3 .c3-av>b::before,.cof-p4 .c3-av>b::before{content:"";position:absolute;left:0;top:36%;width:300%;height:7px;background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.85) 50%,transparent 65%);transform:translateX(-80%);animation:c3-reflet-t 3.6s ease-in-out infinite}
.cof-petit.cof-p3 .c3-av>b::before,.cof-petit.cof-p4 .c3-av>b::before{height:5px}
@keyframes c3-reflet-t{0%,55%{transform:translateX(-80%)}85%,100%{transform:translateX(13.3333%)}}
/* le couvercle qui baille (paliers 4 et 5) : la lumiere s echappe avant meme qu on touche */
.cof-p4 .c3:not(.c3-ouvert) .c3-couv{--baille:-6deg;animation:c3-baille 3.4s ease-in-out infinite}
.cof-p5 .c3:not(.c3-ouvert) .c3-couv{--baille:-12deg;animation:c3-baille 2.6s ease-in-out infinite}
@keyframes c3-baille{
  0%,60%,100%{transform:translate3d(0,calc(var(--h) / -2),calc(var(--p) / -2)) rotateX(0deg)}
  70%{transform:translate3d(0,calc(var(--h) / -2),calc(var(--p) / -2)) rotateX(var(--baille))}
  78%{transform:translate3d(0,calc(var(--h) / -2),calc(var(--p) / -2)) rotateX(calc(var(--baille) * .25))}
  86%{transform:translate3d(0,calc(var(--h) / -2),calc(var(--p) / -2)) rotateX(calc(var(--baille) * .6))}}
.cof-p4 .c3:not(.c3-ouvert) .c3-lum,.cof-p5 .c3:not(.c3-ouvert) .c3-lum{transition:none;animation:c3-fuite var(--cycle,3.4s) ease-in-out infinite}
.cof-p5 .c3:not(.c3-ouvert) .c3-lum{--cycle:2.6s}
@keyframes c3-fuite{0%,60%,100%{opacity:0}70%{opacity:.55}78%{opacity:.1}86%{opacity:.35}}
/* l attente de la reponse : le couvercle sursaute, la fente brule */
.cof-tremble .c3{animation:c3-tremble 110ms linear infinite}
.cof-tremble .c3-couv{animation:c3-sursaut 230ms ease-in-out infinite!important}
.cof-tremble .c3-av>u{opacity:1;animation:none}
.cof-tremble .cof-halo{animation:none;opacity:1;transform:scale(1.25)}
@keyframes c3-tremble{0%{transform:translate(0,0)}25%{transform:translate(-1.2px,.6px) rotate(-1.2deg)}50%{transform:translate(1px,-.5px)}75%{transform:translate(-.6px,-.8px) rotate(1deg)}100%{transform:translate(0,0)}}
@keyframes c3-sursaut{0%,100%{transform:translate3d(0,calc(var(--h) / -2),calc(var(--p) / -2)) rotateX(0deg)}45%{transform:translate3d(0,calc(var(--h) / -2),calc(var(--p) / -2)) rotateX(-13deg)}}
.cof-envoi.cof-tremble{opacity:1}
/* l ouverture : colonne de lumiere, onde, rayons, eclair, pieces en arc, « +N », secousse */
.cof-colonne{position:absolute;z-index:1;left:50%;bottom:48%;width:30px;height:110px;margin-left:-15px;background:linear-gradient(0deg,var(--lumiere),var(--lumiere-2) 45%,transparent);filter:blur(5px);transform-origin:50% 100%;transform:scaleY(0);opacity:0;animation:cof-colonne 1.5s cubic-bezier(.2,.8,.3,1) forwards;pointer-events:none}
@keyframes cof-colonne{0%{transform:scaleY(0);opacity:0}18%{opacity:.95}45%{transform:scaleY(1);opacity:.8}100%{transform:scaleY(1.1);opacity:0}}
.cof-onde{position:absolute;z-index:1;left:50%;top:46%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;box-shadow:0 0 0 2px var(--lumiere),0 0 12px var(--lumiere);opacity:0;animation:cof-onde 850ms cubic-bezier(.2,.7,.3,1) forwards;pointer-events:none}
@keyframes cof-onde{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(7)}}
.cof-rayons{position:absolute;z-index:0;left:50%;top:46%;width:160px;height:160px;margin:-80px 0 0 -80px;border-radius:50%;background:repeating-conic-gradient(from 0deg,var(--lumiere) 0 6deg,transparent 6deg 20deg);-webkit-mask:radial-gradient(circle,#000 14%,transparent 64%);mask:radial-gradient(circle,#000 14%,transparent 64%);opacity:0;animation:cof-rayons-v 2.6s ease-out forwards,cof-tourne 10s linear infinite;pointer-events:none}
@keyframes cof-rayons-v{0%{opacity:0}22%{opacity:.85}100%{opacity:.4}}
@keyframes cof-tourne{to{transform:rotate(360deg)}}
.cof-flash{position:absolute;z-index:4;inset:0;border-radius:inherit;background:radial-gradient(circle at 15% 50%,rgba(255,255,255,.95),rgba(255,238,223,.55) 32%,transparent 70%);opacity:0;animation:cof-flash 650ms ease-out forwards;pointer-events:none}
@keyframes cof-flash{0%{opacity:0}14%{opacity:var(--flash,.6)}100%{opacity:0}}
.cof-pieces-arc i{position:absolute;left:50%;top:40%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:0;background:none;box-shadow:none;opacity:0;transform:none;animation:cof-arc var(--t,1.15s) linear var(--d) both}
.cof:not(.cof-petit) .cof-pieces-arc i{width:10px;height:10px;margin:-5px 0 0 -5px}
.cof-pieces-arc i::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--piece);box-shadow:0 0 5px var(--piece-lueur);animation:cof-pile var(--spin,.34s) linear infinite}
.cof-pieces-arc i.gem::before{border-radius:2px;background:var(--c);box-shadow:0 0 6px var(--c);animation:cof-gem .5s linear infinite}
@keyframes cof-pile{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.2)}}
@keyframes cof-gem{to{transform:rotate(360deg)}}
@keyframes cof-arc{
  0%{opacity:0;transform:translate(0,0) scale(.5);animation-timing-function:cubic-bezier(.15,.7,.35,1)}
  8%{opacity:1}
  42%{transform:translate(calc(var(--dx) * .5),var(--haut)) scale(1);animation-timing-function:cubic-bezier(.55,0,.85,.35)}
  88%{opacity:1}
  100%{opacity:0;transform:translate(var(--dx),var(--bas)) scale(.85)}}
.cof-plus{position:absolute;z-index:5;left:50%;top:30%;transform:translate(-50%,0);font-size:13px;font-weight:800;line-height:1;color:var(--titre-coul);text-shadow:0 0 10px var(--piece-lueur),0 1px 0 rgba(0,0,0,.6);white-space:nowrap;opacity:0;animation:cof-plus 1.6s cubic-bezier(.2,.8,.3,1) .25s forwards;pointer-events:none}
@keyframes cof-plus{0%{opacity:0;transform:translate(-50%,6px) scale(.7)}20%{opacity:1;transform:translate(-50%,-10px) scale(1.08)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-40px) scale(1)}}
.cof-secousse{animation:cof-secousse 420ms cubic-bezier(.3,.7,.4,1)}
@keyframes cof-secousse{0%,100%{transform:translate(0,0)}15%{transform:translate(-4px,1px)}30%{transform:translate(4px,-1px)}45%{transform:translate(-3px,0)}60%{transform:translate(2px,1px)}80%{transform:translate(-1px,0)}}
.cof-rouleaux{display:inline-flex;gap:1px}
.cof-rouleaux>span{display:inline-block;min-width:.62em;text-align:center}
.cof-rouleaux>span.arret{animation:cof-arret 300ms cubic-bezier(.2,1.6,.4,1)}
@keyframes cof-arret{0%{transform:translateY(-35%) scale(1.25)}100%{transform:none}}
.cof-eclats{position:absolute;inset:-6px;pointer-events:none;z-index:2}
.cof-eclats i{position:absolute;width:6px;height:6px;background:radial-gradient(circle,#fff 0 18%,var(--eclat,#ffe08a) 40%,transparent 70%);clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);opacity:0;animation:cof-scintille 2.2s ease-in-out infinite var(--d)}
@keyframes cof-scintille{0%,100%{opacity:0;transform:scale(.4) rotate(0)}45%{opacity:1;transform:scale(1.15) rotate(45deg)}}
.cof-aura{position:absolute;z-index:0;left:50%;top:50%;width:90px;height:90px;margin:-45px 0 0 -45px;border-radius:50%;background:conic-gradient(from 0deg,#ff4d6d,#ffd479,#3ddc84,#5cc8ff,#b48cff,#ff4d6d);filter:blur(14px);opacity:.42;animation:cof-tourne 6s linear infinite;pointer-events:none}
.cof:not(.cof-petit) .cof-aura{width:132px;height:132px;margin:-66px 0 0 -66px}
.cof-777::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--ang-cof,0deg),#ffd479,#ff4d6d,#b48cff,#5cc8ff,#3ddc84,#ffd479);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:cof-cadre 4s linear infinite;pointer-events:none}
@property --ang-cof{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes cof-cadre{to{--ang-cof:360deg}}
.cof-777 .cof-titre .cof-montant:not(.cof-rouleaux){background:linear-gradient(100deg,#ffeedf,#ffd479 30%,#ffbe7a 50%,#ffd479 70%,#ffeedf);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:cof-reflet-or 2.8s linear infinite}
@keyframes cof-reflet-or{to{background-position:-220% 0}}

/* ── LES CINQ HABITS DU COFFRE DE BERRYS ── */
.cof-p1{--carte-fond:linear-gradient(140deg,#1d1a20,#141216 62%);--anneau-bas:rgba(239,176,109,.22);--anneau:rgba(240,164,76,.7);--anneau-vif:rgba(254,211,170,.95);--anneau-halo:rgba(240,164,76,.3);
  --bois-av-p:linear-gradient(180deg,#e1963d 0%,#bb7823 52%,#5d6063 100%);--bois-cote-p:linear-gradient(180deg,#aa6b1a 0%,#494c4e 100%);--dessus:linear-gradient(180deg,#f7aa51 0%,#ce872f 60%,#ab6c19 100%);
  --grain:rgba(0,0,0,.2);--joint:rgba(26,28,30,.55);--dessous:#282a2c;--reflet:rgba(230,238,248,.45);
  --metal-p:linear-gradient(180deg,#d6dbe1 0%,#9aa3ad 45%,#5b636d 100%);
  --serrure:radial-gradient(circle at 50% 40%,#101112 0 1.4px,transparent 1.9px),linear-gradient(#101112,#101112) 50% 70%/2px 5px no-repeat,linear-gradient(180deg,#d6dbe1 0%,#9aa3ad 45%,#5b636d 100%);
  --rivet:#3b4047;--fente:.18;
  --halo:rgba(254,191,125,.35);--lumiere:rgba(255,238,223,.85);--lumiere-2:rgba(254,205,157,.3);--rayon:52px;
  --tresor:radial-gradient(ellipse at 50% 42%,#ffeedf 0%,#ffb563 34%,#585b5d 70%,#1b1e20 92%);
  --tas:radial-gradient(circle at 30% 40%,#dfe8f2 0 1.6px,#f09303 2.2px 3px,transparent 3.4px) 0 0/7px 6px,radial-gradient(circle at 60% 60%,#fee9d6 0 1.4px,#c07606 2px 2.8px,transparent 3.2px) 3px 2px/8px 7px,radial-gradient(ellipse at 50% 45%,#ffeedf,#d4820c 60%,#3b3d40);
  --piece:radial-gradient(circle at 34% 30%,#dfe8f2,#f09303 62%,#535658);--piece-lueur:rgba(240,147,3,.7);
  --titre-coul:#ffeedf;--unite-coul:#f6b46e;--rang-coul:#e1aa71;--bouton:linear-gradient(180deg,#ffeedf,#f8a746);--bouton-txt:#1b1e20}
.cof-p2{--serrure:radial-gradient(circle at 50% 40%,#191b1d 0 1.4px,transparent 1.9px),linear-gradient(#191b1d,#191b1d) 50% 70%/2px 5px no-repeat,linear-gradient(180deg,#ffeedf 0%,#e6bc60 42%,#d18002 100%)}
.cof-p3{--carte-fond:linear-gradient(140deg,#1a2133,#121620 62%);--anneau-bas:rgba(170,200,240,.28);--anneau:rgba(170,205,245,.85);--anneau-vif:rgba(215,232,255,1);--anneau-halo:rgba(140,190,255,.38);
  --bois-av-p:linear-gradient(180deg,#4b3a4f 0%,#36283a 52%,#241a27 100%);--bois-cote-p:linear-gradient(180deg,#36283a 0%,#1c141e 100%);--dessus:linear-gradient(180deg,#5d4a62 0%,#46364b 60%,#2f2433 100%);
  --grain:rgba(0,0,0,.28);--joint:rgba(10,8,14,.7);--dessous:#140e16;--reflet:rgba(210,225,255,.5);
  --metal-p:linear-gradient(180deg,#ffffff 0%,#c9d3df 40%,#7d8a99 100%);--rivet:#ffffff;--fente:.55;--vol:-48px;
  --serrure:radial-gradient(circle at 50% 58%,#bfe6ff 0 1.5px,#3d8bff 2.5px,#1a3f9e 4.5px,transparent 5px),linear-gradient(180deg,#ffffff 0%,#c9d3df 40%,#7d8a99 100%);
  --coins:linear-gradient(135deg,#dfe7f0 0 5px,transparent 5px),linear-gradient(225deg,#dfe7f0 0 5px,transparent 5px),linear-gradient(45deg,#9aa6b4 0 5px,transparent 5px),linear-gradient(315deg,#9aa6b4 0 5px,transparent 5px);
  --halo:rgba(130,185,255,.5);--lumiere:rgba(220,236,255,.95);--lumiere-2:rgba(120,175,255,.4);--rayon:76px;
  --tresor:radial-gradient(ellipse at 50% 42%,#ffffff 0%,#d8e6ff 22%,#ffcf6b 48%,#6f7f95 74%,#161b26 92%);
  --tas:radial-gradient(circle at 50% 50%,#bfe6ff 0 1px,#3d8bff 1.6px,transparent 2.2px) 2px 1px/13px 11px,radial-gradient(circle at 30% 40%,#ffffff 0 1.6px,#c9d3df 2.2px 3px,transparent 3.4px) 0 0/7px 6px,radial-gradient(circle at 60% 60%,#ffeedf 0 1.4px,#f0b93f 2px 2.8px,transparent 3.2px) 3px 2px/8px 7px,radial-gradient(ellipse at 50% 45%,#ffffff,#c9d3df 50%,#56637a);
  --piece:radial-gradient(circle at 34% 30%,#ffffff,#c9d3df 60%,#6f7c8c);--piece-lueur:rgba(170,205,255,.85);
  --titre-coul:#e6efff;--unite-coul:#a9c2e6;--rang-coul:#9fbbe6;--bouton:linear-gradient(180deg,#f1f6ff,#a9bfdc);--bouton-txt:#14203a}
.cof-p4{--carte-fond:linear-gradient(140deg,#341a24,#1c1016 62%);--anneau-bas:rgba(255,200,90,.32);--anneau:rgba(255,196,70,.9);--anneau-vif:rgba(255,224,140,1);--anneau-halo:rgba(255,213,174,.42);
  --bois-av-p:linear-gradient(180deg,#9c1f35 0%,#7a1426 52%,#560c1a 100%);--bois-cote-p:linear-gradient(180deg,#6e1022 0%,#43081a 100%);--dessus:linear-gradient(180deg,#b9334a 0%,#952238 60%,#6e1426 100%);
  --grain:rgba(0,0,0,.12);--joint:rgba(255,206,110,.55);--dessous:#2a0710;--reflet:rgba(220,228,236,.55);
  --metal-p:linear-gradient(180deg,#ffeedf 0%,#ffd060 38%,#e78f0e 100%);--rivet:#fffbe6;--fente:.75;--vol:-52px;--flash:.55;
  --serrure:radial-gradient(circle at 50% 58%,#ffd0d8 0 1.5px,#ff2f55 2.5px,#8a0a24 4.5px,transparent 5px),linear-gradient(180deg,#ffeedf 0%,#ffd060 38%,#e78f0e 100%);
  --coins:linear-gradient(135deg,#ffe08a 0 6px,transparent 6px),linear-gradient(225deg,#ffe08a 0 6px,transparent 6px),linear-gradient(45deg,#c99a2a 0 6px,transparent 6px),linear-gradient(315deg,#c99a2a 0 6px,transparent 6px);
  --embleme:radial-gradient(circle at 50% 49%,#ff2f55 0 2px,#ffd060 2.5px 4px,transparent 4.5px);
  --halo:rgba(254,223,195,.6);--lumiere:rgba(255,238,223,1);--lumiere-2:rgba(255,204,154,.45);--rayon:82px;
  --tresor:radial-gradient(ellipse at 50% 42%,#f3f8ff 0%,#ffe08a 22%,#fed4ac 46%,#a3132e 74%,#2a0710 92%);
  --tas:radial-gradient(circle at 50% 50%,#ffd0d8 0 1px,#ff2f55 1.7px,transparent 2.3px) 4px 3px/12px 10px,radial-gradient(circle at 30% 40%,#ffeedf 0 1.6px,#ffc53d 2.2px 3px,transparent 3.4px) 0 0/7px 6px,radial-gradient(circle at 60% 60%,#ffeedf 0 1.4px,#ffb35e 2px 2.8px,transparent 3.2px) 3px 2px/8px 7px,radial-gradient(ellipse at 50% 45%,#f3f8ff,#ffc53d 52%,#626467);
  --piece:radial-gradient(circle at 34% 30%,#ffeedf,#ffc53d 58%,#d48100);--piece-lueur:rgba(255,223,194,.95);--eclat:rgba(255,220,120,.9);
  --titre-coul:#ffe08a;--unite-coul:#fed3ab;--rang-coul:#ffcf6b;--bouton:linear-gradient(180deg,#ffe48f,#fec182);--bouton-txt:#181a1c}
.cof-p5{--carte-fond:radial-gradient(120% 140% at 0% 50%,#2c1846 0%,#150f22 55%,#0d0a14 100%);--anneau-bas:rgba(255,212,121,.34);--anneau:rgba(255,212,121,.95);--anneau-vif:rgba(255,238,223,1);--anneau-halo:rgba(200,140,255,.45);
  --bois-av-p:linear-gradient(180deg,#2a2433 0%,#18141f 52%,#0c0a11 100%);--bois-cote-p:linear-gradient(180deg,#1d1924 0%,#0a080e 100%);--dessus:linear-gradient(180deg,#383046 0%,#231d2d 60%,#141019 100%);
  --grain:rgba(255,212,121,.10);--joint:rgba(255,212,121,.7);--dessous:#07060a;--reflet:rgba(220,190,255,.55);
  --metal-p:linear-gradient(180deg,#ffeedf 0%,#ffd060 38%,#e78f0e 100%);--rivet:#fffbe6;--fente:1;--vol:-58px;--flash:.9;
  --bande-av:radial-gradient(circle at 14% 50%,#7dffb8 0 1px,#16c26b 2px,#0b5e35 3px,transparent 3.5px),radial-gradient(circle at 86% 50%,#bfe6ff 0 1px,#3d8bff 2px,#1a3f9e 3px,transparent 3.5px),linear-gradient(180deg,#ffeedf 0%,#ffd060 38%,#e78f0e 100%);
  --serrure:radial-gradient(circle at 50% 58%,#ffd0d8 0 1.5px,#ff2f55 2.5px,#8a0a24 4.5px,transparent 5px),linear-gradient(180deg,#ffeedf 0%,#ffd060 38%,#e78f0e 100%);
  --coins:linear-gradient(135deg,#ffe08a 0 6px,transparent 6px),linear-gradient(225deg,#ffe08a 0 6px,transparent 6px),linear-gradient(45deg,#c99a2a 0 6px,transparent 6px),linear-gradient(315deg,#c99a2a 0 6px,transparent 6px);
  --embleme:radial-gradient(circle at 50% 49%,#b48cff 0 2px,#ffd060 2.5px 4px,transparent 4.5px),repeating-linear-gradient(90deg,transparent 0 9px,rgba(255,212,121,.35) 9px 10px);
  --halo:rgba(190,130,255,.6);--lumiere:rgba(239,247,255,1);--lumiere-2:rgba(200,140,255,.5);--rayon:92px;
  --tresor:radial-gradient(ellipse at 50% 42%,#ffffff 0%,#ffeedf 16%,#ffd060 34%,#ff2f55 52%,#3d8bff 66%,#16c26b 76%,#0c0a11 92%);
  --tas:radial-gradient(circle at 50% 50%,#7dffb8 0 1px,#16c26b 1.7px,transparent 2.3px) 1px 5px/14px 12px,radial-gradient(circle at 50% 50%,#bfe6ff 0 1px,#3d8bff 1.7px,transparent 2.3px) 8px 2px/15px 11px,radial-gradient(circle at 50% 50%,#ffd0d8 0 1px,#ff2f55 1.7px,transparent 2.3px) 4px 8px/12px 13px,radial-gradient(circle at 30% 40%,#ffeedf 0 1.6px,#ffc53d 2.2px 3px,transparent 3.4px) 0 0/7px 6px,radial-gradient(ellipse at 50% 45%,#ffffff,#ffd060 48%,#626467);
  --piece:radial-gradient(circle at 34% 30%,#ffeedf,#ffc53d 58%,#d48100);--piece-lueur:rgba(255,200,80,.95);--eclat:rgba(220,190,255,.95);
  --titre-coul:#ffe08a;--unite-coul:#d9b8ff;--rang-coul:#d9b8ff;--bouton:linear-gradient(180deg,#ffeedf,#fec182);--bouton-txt:#111316}

/* ── LE COFFRE HASARD : moitie ivoire et or, moitie obsidienne et rouge, le logo ange et tete de mort ── */
.cof-hasard{--carte-fond:linear-gradient(100deg,#262729 0%,#1b1619 48%,#2b0c13 100%);--anneau-bas:rgba(255,228,203,.3);--anneau:rgba(255,232,213,.85);--anneau-vif:rgba(230,239,249,1);--anneau-halo:rgba(255,90,110,.38);
  --bois-av-p:linear-gradient(90deg,#e7ebf0 0 50%,#211519 50% 100%);--bois-cote-p:linear-gradient(180deg,#d8dde4,#b5bdc6);--dessus:linear-gradient(90deg,#f4f8fd 0 50%,#2d1b22 50% 100%);
  --grain:rgba(0,0,0,.08);--joint:rgba(212,178,106,.75);--dessous:#140c0f;--reflet:rgba(235,242,251,.5);
  --metal-p:linear-gradient(180deg,#ffeedf 0%,#ffd060 38%,#e78f0e 100%);--rivet:#fffbe6;--fente:.8;
  --embleme:var(--logo-hasard) 50% 50%/64% no-repeat;
  --halo:rgba(255,238,223,.55);--lumiere:rgba(241,247,254,1);--lumiere-2:rgba(255,60,90,.45);--rayon:80px;
  --tresor:radial-gradient(ellipse at 50% 42%,#fff 0%,#ffe08a 30%,#ff2f55 60%,#1a0a0d 90%);
  --tas:linear-gradient(90deg,transparent 0 50%,rgba(60,0,10,.55) 50%),radial-gradient(circle at 30% 40%,#ffeedf 0 1.6px,#ffc53d 2.2px 3px,transparent 3.4px) 0 0/7px 6px,radial-gradient(ellipse at 50% 45%,#ffeedf,#ffb35e 55%,#4a1010);
  --titre-coul:#ebf2fb;--unite-coul:#ffb3be;--rang-coul:#ffecdd;--bouton:linear-gradient(90deg,#ffeedf 0 50%,#ff8a98 50% 100%);--bouton-txt:#1a0a0d}
.cof-hasard .c3-ga,.cof-hasard .c3-cga{background-image:linear-gradient(180deg,#e1e6ed,#ffcfa0)}
.cof-hasard .c3-dr,.cof-hasard .c3-cdr{background-image:linear-gradient(180deg,#2c1b21,#110a0d)}
.cof-hasard .c3-av>b{background:var(--logo-hasard) 50% 52%/58% no-repeat}
.cof-hasard .c3-av::after,.cof-hasard .c3-av>em{display:none}
.cof-hasard .cof-halo{background:radial-gradient(circle at 30% 50%,rgba(255,238,223,.75),transparent 58%),radial-gradient(circle at 72% 50%,rgba(255,40,70,.7),transparent 58%)}
.cof-hasard .cof-titre{white-space:normal;text-wrap:balance}
.cof-hasard-perdu{--titre-coul:#ff8a98}
/* -- LE COFFRE A QUESTION (03/10/2026) : une case de manga, noir et blanc (user : la couleur d un manga comme les
   cartes One Piece noir et blanc). v2 sur capture de l user : papier net derriere le texte, lignes de vitesse
   derriere le coffre seulement, cartouche noir, trois puces ; le coffre dessine a l encre (planches, trame sur les
   flancs, ferrures noires, serrure « ? »). -- */
.cof-quiz{--carte-fond:linear-gradient(100deg,#fffefa 0%,#f1efe6 100%);
  --anneau-bas:#0b0b0b;--anneau:#0b0b0b;--anneau-vif:#000;--anneau-halo:rgba(255,255,255,.5);
  --bois-av-p:repeating-linear-gradient(180deg,#fff 0 8.6px,#0b0b0b 8.6px 9.6px);--bois-cote-p:linear-gradient(#fff,#fff);
  --dessus:repeating-linear-gradient(90deg,#fff 0 11px,#0b0b0b 11px 12px);--grain:transparent;--joint:#0b0b0b;--dessous:#0b0b0b;--reflet:rgba(255,255,255,0);
  --metal-p:linear-gradient(#0b0b0b,#0b0b0b);--rivet:#fff;--fente:0;--embleme:none;
  --coins:linear-gradient(135deg,#0b0b0b 0 6px,transparent 6px),linear-gradient(225deg,#0b0b0b 0 6px,transparent 6px),linear-gradient(45deg,#0b0b0b 0 6px,transparent 6px),linear-gradient(315deg,#0b0b0b 0 6px,transparent 6px);
  --serrure:var(--logo-quiz) 50% 50%/100% no-repeat;
  --halo:rgba(255,255,255,.7);--lumiere:rgba(255,255,255,1);--lumiere-2:rgba(255,255,255,.35);--rayon:76px;
  --tresor:radial-gradient(ellipse at 50% 42%,#fff 0%,#fff 46%,#d6d6d6 74%,#0b0b0b 94%);
  --tas:radial-gradient(circle,#0b0b0b .9px,#fff 1.4px) 0 0/4px 4px;
  --titre-coul:#0b0b0b;--unite-coul:#222;--rang-coul:#fff;--bouton:#0b0b0b;--bouton-txt:#fff;
  box-shadow:inset 0 0 0 2.5px #0b0b0b,0 12px 30px -18px #000}
.cof-quiz .cof-scene::before{content:"";position:absolute;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;z-index:0;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,#0b0b0b 0 1.4deg,transparent 1.4deg 9deg);opacity:.2;
  -webkit-mask-image:radial-gradient(circle,transparent 24%,#000 40%,transparent 70%);mask-image:radial-gradient(circle,transparent 24%,#000 40%,transparent 70%)}
.cof-quiz .c3{position:relative;z-index:1;filter:drop-shadow(1px 0 0 #0b0b0b) drop-shadow(-1px 0 0 #0b0b0b) drop-shadow(0 1px 0 #0b0b0b)}
.cof-quiz .c3-ga,.cof-quiz .c3-cga{background-image:radial-gradient(circle,#0b0b0b .7px,#fff 1.15px);background-size:4px 4px}
.cof-quiz .c3-dr,.cof-quiz .c3-cdr{background-image:radial-gradient(circle,#0b0b0b 1.05px,#fff 1.5px);background-size:3.2px 3.2px}
.cof-quiz .c3-av>em{display:none}
.cof-quiz .cof-halo{display:none}
.cof-quiz .cof-rang{align-self:flex-start;white-space:nowrap;padding:2px 7px 2px 6px;background:#0b0b0b;color:#fff;letter-spacing:.14em;transform:skew(-10deg)}
.cof-quiz .cof-titre{font-weight:900;line-height:1.08;white-space:normal;text-wrap:balance}
.cof-quiz .cof-sous{color:#2b2b2b;font-weight:600}
.cof-quiz-puces{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}
.cof-quiz-puces>*{display:inline-flex;align-items:center;height:19px;padding:0 6px;border-radius:3px;font-size:11px;font-style:normal;font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums}
.cof-quiz-puces b{background:#0b0b0b;color:#fff}
.cof-quiz-puces i{box-shadow:inset 0 0 0 1.5px #0b0b0b;color:#0b0b0b}
.cof-quiz .cof-ouvrir{height:34px;padding:0 12px;font-size:13px;border-radius:4px;letter-spacing:.06em;text-transform:uppercase;font-weight:900;box-shadow:3px 3px 0 #a8a8a8;transform:skew(-8deg)}
.cof-quiz.cof-prenable{animation:cof-quiz-appel 2.2s ease-in-out infinite}
@keyframes cof-quiz-appel{0%,100%{box-shadow:inset 0 0 0 2.5px #0b0b0b,0 12px 30px -18px #000}50%{box-shadow:inset 0 0 0 4px #000,0 0 0 5px rgba(255,255,255,.22),0 12px 30px -18px #000}}
.cof-quiz.cof-ouvert:not(.cof-prenable){--carte-fond:linear-gradient(100deg,#f4f3ee 0%,#e0e2e4 100%)}
.cof-quiz-perdu{--titre-coul:#4a4a4a}
/* TOUTES les cartes de coffre du fil ont la largeur de la carte blanche (user 03/10 : « les blocs avec le coffre,
   tous la meme largeur que le blanc »). Hasard et question : coffre | texte | bouton, puis le tableau des resultats
   sur toute la largeur (user 03/10 : « affiche ca mieux »). */
.fo-coffre-fil .cof-petit{width:min(calc(100% - 34px),372px);max-width:none}
/* et la MEME PLACE pour tous (user 03/10 : « le coffre a badge pareil, meme position et largeur ») : plus de coffre
   pousse a droite parce que c est le mien, ni decale par la place vide de l avatar ; tous partent du bord gauche. */
.fo-coffre-fil,.fo-coffre-fil.fo-coffre-mien{flex-direction:row}
.fo-coffre-fil::before{display:none}
.cof-hasard.cof-petit,.cof-quiz.cof-petit{display:grid;grid-template-columns:64px minmax(0,1fr) auto;column-gap:10px;row-gap:8px;align-items:center}
.cof-hasard.cof-petit .cof-scene,.cof-quiz.cof-petit .cof-scene{grid-column:1;grid-row:1}
.cof-hasard.cof-petit .cof-texte,.cof-quiz.cof-petit .cof-texte{grid-column:2;grid-row:1}
.cof-hasard.cof-petit .cof-ouvrir{grid-column:3;grid-row:1;margin:0}
.cof-quiz.cof-petit .cof-texte{grid-column:2 / 4}
.cof-quiz.cof-petit .cof-ouvrir{grid-column:2 / 4;grid-row:2;justify-self:end;margin:0}
.cof-res{grid-column:1 / -1;display:grid;gap:1px;padding:5px 8px;border-radius:10px;background:rgba(0,0,0,.32);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.cof-res-l{display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;column-gap:8px;min-height:24px;font-size:12.5px;line-height:1.2}
.cof-res-ico{width:18px;height:18px;max-width:none}
.cof-res-nom{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;color:var(--fo-txt)}
.cof-res-val{font-style:normal;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;color:#ffe08a}
.cof-res-perte .cof-res-val{color:#ff8a98}
.cof-res-tresor .cof-res-val{color:#ffeedf;text-shadow:0 0 8px rgba(255,208,96,.7)}
.cof-res-plus{padding:2px 0 1px 26px;font-size:11px;font-weight:600;color:var(--fo-sourd)}
.cof-quiz .cof-res{gap:0;padding:4px 8px;border-radius:4px;background:#fff;box-shadow:inset 0 0 0 1.5px #0b0b0b}
.cof-quiz .cof-res-l{grid-template-columns:20px minmax(0,1fr) auto auto;color:#0b0b0b}
.cof-quiz .cof-res-nom{color:#0b0b0b}
.cof-res-rang{display:grid;place-items:center;width:19px;height:19px;border-radius:50%;box-shadow:inset 0 0 0 1.5px #0b0b0b;font-size:10px;font-weight:900;font-variant-numeric:tabular-nums}
.cof-res-gagne .cof-res-rang{background:#0b0b0b;color:#fff;box-shadow:none}
.cof-res-temps{font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;color:#333}
.cof-quiz .cof-res-val{padding:1px 6px;border-radius:3px;font-size:11px;color:#0b0b0b;box-shadow:inset 0 0 0 1.2px #0b0b0b}
.cof-quiz .cof-res-gagne .cof-res-val{background:#0b0b0b;color:#fff;box-shadow:none}
.cof-quiz .cof-res-faux .cof-res-nom,.cof-quiz .cof-res-trop_tard .cof-res-nom,.cof-quiz .cof-res-faux .cof-res-val,.cof-quiz .cof-res-trop_tard .cof-res-val{color:#555}
.cof-quiz .cof-res-plus{color:#444}
.fo-cof-p-duo{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fo-cof-p-duo .fo-cof-p-badge{padding:0 8px;font-size:12.5px}
.fo-cof-p-quiz{box-shadow:inset 0 0 0 1.5px #f2f2f2;color:#fff;background:radial-gradient(circle,rgba(255,255,255,.12) .8px,transparent 1.2px) 0 0/5px 5px}
.fo-cof-p-quiz svg{color:#fff}
@media (hover:hover){.fo-cof-p-quiz:hover{background-color:rgba(255,255,255,.08)}}

/* la fenetre de la question : une planche, la question dans une bulle, trois cases, le temps a l encre */
.fo-quiz{position:fixed;left:50%;top:50%;z-index:91;transform:translate(-50%,-50%);width:min(92vw,420px);max-height:calc(100dvh - 32px);overflow:auto;padding:16px 14px 14px;border-radius:6px;
  background:radial-gradient(circle,rgba(0,0,0,.13) .9px,transparent 1.3px) 0 0/5px 5px,#fbfaf5;color:#0b0b0b;box-shadow:0 0 0 3px #0b0b0b,8px 8px 0 3px rgba(0,0,0,.55),0 30px 80px -10px rgba(0,0,0,.9);
  display:grid;gap:12px;animation:fo-quiz-entre .32s cubic-bezier(.2,1.4,.4,1)}
@keyframes fo-quiz-entre{from{transform:translate(-50%,-50%) scale(.82) rotate(-2deg);opacity:0}to{transform:translate(-50%,-50%);opacity:1}}
.fo-quiz-vitesse{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.12;border-radius:inherit;
  background:repeating-conic-gradient(from 0deg at 50% 38%,#000 0 1.2deg,transparent 1.2deg 7deg);-webkit-mask-image:radial-gradient(circle at 50% 38%,transparent 34%,#000 70%);mask-image:radial-gradient(circle at 50% 38%,transparent 34%,#000 70%)}
.fo-quiz>*:not(.fo-quiz-vitesse){position:relative;z-index:1}
.fo-quiz-tete{display:flex;align-items:center;justify-content:space-between;gap:10px}
.fo-quiz-cadre{padding:4px 10px;background:#0b0b0b;color:#fff;font-size:12px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;transform:skew(-8deg)}
.fo-quiz-sec{min-width:46px;text-align:center;font-size:34px;line-height:1;font-weight:900;font-variant-numeric:tabular-nums;-webkit-text-stroke:1px #0b0b0b;color:#fff;text-shadow:3px 3px 0 #0b0b0b}
.fo-quiz-urgent{animation:fo-quiz-bat .5s ease-in-out infinite alternate}
@keyframes fo-quiz-bat{from{transform:scale(1)}to{transform:scale(1.18) rotate(-4deg)}}
.fo-quiz-temps{height:10px;border:2px solid #0b0b0b;border-radius:2px;background:#fff;overflow:hidden}
.fo-quiz-temps i{display:block;height:100%;background:repeating-linear-gradient(135deg,#0b0b0b 0 4px,#3a3a3a 4px 8px);transition:width .1s linear}
.fo-quiz-bulle{margin:2px 4px 6px;padding:14px 16px;border:3px solid #0b0b0b;border-radius:48% 52% 46% 54%/56% 50% 50% 44%;background:#fff;font-size:17px;line-height:1.3;font-weight:800;text-align:center;text-wrap:balance;position:relative}
.fo-quiz-bulle::after{content:"";position:absolute;left:22%;bottom:-15px;width:18px;height:18px;background:#fff;border-right:3px solid #0b0b0b;border-bottom:3px solid #0b0b0b;transform:skew(28deg) rotate(38deg)}
.fo-quiz-choix{display:grid;gap:8px}
.fo-quiz-case{display:flex;align-items:center;gap:10px;min-height:48px;padding:8px 12px;border:2.5px solid #0b0b0b;border-radius:3px;background:#fff;color:#0b0b0b;font:inherit;font-size:15px;font-weight:700;text-align:left;cursor:pointer;box-shadow:4px 4px 0 #0b0b0b;transition:transform 80ms,box-shadow 80ms}
.fo-quiz-case:active:not(:disabled){transform:translate(3px,3px);box-shadow:1px 1px 0 #0b0b0b}
.fo-quiz-case:disabled{cursor:default}
.fo-quiz-case:focus-visible{outline:3px solid #0b0b0b;outline-offset:3px}
.fo-quiz-lettre{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#0b0b0b;color:#fff;font-size:14px;font-weight:900}
.fo-quiz-txt{min-width:0}
.fo-quiz-choisi{background:#0b0b0b;color:#fff}
.fo-quiz-choisi .fo-quiz-lettre{background:#fff;color:#0b0b0b}
.fo-quiz-regle{margin:0;font-size:11.5px;font-weight:700;text-align:center;text-wrap:balance;color:#333}
.fo-quiz-res{display:grid;justify-items:center;gap:6px;padding:6px 0 2px;text-align:center}
.fo-quiz-ono{font-size:58px;line-height:1;font-weight:900;color:#fff;-webkit-text-stroke:2.5px #0b0b0b;text-shadow:5px 5px 0 #0b0b0b;transform:rotate(-6deg);animation:fo-quiz-don .5s cubic-bezier(.2,1.8,.4,1)}
@keyframes fo-quiz-don{0%{transform:scale(2.4) rotate(-14deg);opacity:0}60%{transform:scale(.92) rotate(-4deg);opacity:1}100%{transform:rotate(-6deg)}}
.fo-quiz-ono-fr{margin-top:-2px;font-size:11px;font-weight:900;letter-spacing:.2em;text-transform:uppercase;color:#333}
.fo-quiz-montant{margin-top:4px;font-size:40px;line-height:1;font-weight:900;font-variant-numeric:tabular-nums}
.fo-quiz-titre{font-size:20px;font-weight:900}
.fo-quiz-detail{max-width:30ch;font-size:13px;font-weight:600;color:#2b2b2b}
.fo-quiz-reponse{margin-top:4px;padding:6px 10px;border:2px dashed #0b0b0b;font-size:13px;font-weight:600}
.fo-quiz-ok{margin-top:8px;height:46px;padding:0 30px;border:0;border-radius:3px;background:#0b0b0b;color:#fff;font:inherit;font-size:16px;font-weight:900;cursor:pointer;box-shadow:4px 4px 0 #8a8a8a}
.fo-quiz-ok:focus-visible{outline:3px solid #0b0b0b;outline-offset:3px}
.fo-quiz-gagne .fo-quiz-vitesse{opacity:.32}
.fo-quiz-gagne .fo-quiz-montant{text-shadow:3px 3px 0 #bdbdbd}
.fo-quiz-faux{animation:fo-quiz-entre .32s cubic-bezier(.2,1.4,.4,1),fo-rou-secousse .5s cubic-bezier(.3,.7,.4,1) .3s}
.fo-quiz-faux .fo-quiz-ono,.fo-quiz-trop_tard .fo-quiz-ono{color:#0b0b0b;-webkit-text-stroke:0;text-shadow:3px 3px 0 #bdbdbd}
@media (prefers-reduced-motion:reduce){.fo-quiz,.fo-quiz-ono,.fo-quiz-urgent,.cof-quiz.cof-prenable,.fo-quiz-faux{animation:none}}
/* ── L AVIS DE RECHERCHE (WANTED, 03/10/2026) : le parchemin des primes de One Piece, encre brune, tampon rouge ── */
.cof-wanted{--carte-fond:linear-gradient(100deg,#dee6f0 0%,#ffebd9 100%);--anneau-bas:#323437;--anneau:#323437;--anneau-vif:#1a1c1f;--anneau-halo:rgba(80,82,85,.35);
  --titre-coul:#1a1c1f;--unite-coul:#323437;--rang-coul:#dee6f0;--bouton:#323437;--bouton-txt:#dee6f0;
  color:#1a1c1f;box-shadow:inset 0 0 0 2px #323437,inset 0 0 18px rgba(58,60,63,.28),0 12px 30px -18px #000}
.cof-wanted::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:.5;
  background:radial-gradient(circle at 12% 18%,rgba(80,82,85,.16),transparent 30%),radial-gradient(circle at 88% 80%,rgba(80,82,85,.18),transparent 34%)}
.cof-wanted .cof-halo{display:none}
.cof-wanted .cof-rang{align-self:flex-start;white-space:nowrap;padding:2px 7px;border-radius:2px;background:#8f1d14;color:#e6ecf3;font-size:10.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;transform:rotate(-2deg)}
.cof-wanted .cof-titre{font-family:"Times New Roman",Georgia,serif;font-weight:900;line-height:1.08;white-space:normal;text-wrap:balance}
.cof-wanted .cof-sous{color:#27292c;font-weight:600}
.cof-wanted-puces{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}
.cof-wanted-puces>*{display:inline-flex;align-items:center;height:19px;padding:0 6px;border-radius:3px;font-size:11px;font-style:normal;font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums}
.cof-wanted-puces b{background:#323437;color:#e6ecf3}
.cof-wanted-puces i{box-shadow:inset 0 0 0 1.5px #323437;color:#1a1c1f}
.cof-wanted .cof-ouvrir{height:34px;padding:0 14px;border-radius:3px;font-size:13px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;box-shadow:3px 3px 0 rgba(50,52,55,.35)}
.cof-wanted.cof-prenable{animation:cof-wanted-appel 2.4s ease-in-out infinite}
@keyframes cof-wanted-appel{0%,100%{box-shadow:inset 0 0 0 2px #323437,inset 0 0 18px rgba(58,60,63,.28),0 12px 30px -18px #000}50%{box-shadow:inset 0 0 0 3.5px #1a1c1f,inset 0 0 18px rgba(58,60,63,.28),0 0 0 5px rgba(222,230,240,.22),0 12px 30px -18px #000}}
.cof-wanted.cof-ouvert:not(.cof-prenable){--carte-fond:linear-gradient(100deg,#d6dee7 0%,#fedbba 100%)}
.cof-wanted-perdu{--titre-coul:#484a4d}
.cof-wanted.cof-petit{display:grid;grid-template-columns:64px minmax(0,1fr) auto;column-gap:10px;row-gap:8px;align-items:center}
.cof-wanted.cof-petit .cof-scene{grid-column:1;grid-row:1}
.cof-wanted.cof-petit .cof-texte{grid-column:2 / 4;grid-row:1}
.cof-wanted.cof-petit .cof-ouvrir{grid-column:2 / 4;grid-row:2;justify-self:end;margin:0}
.cof-wanted .cof-res{gap:0;padding:4px 8px;border-radius:3px;background:rgba(245,249,253,.55);box-shadow:inset 0 0 0 1.5px #323437}
.cof-wanted .cof-res-l{grid-template-columns:20px minmax(0,1fr) auto auto;color:#1a1c1f}
.cof-wanted .cof-res-nom{color:#1a1c1f}
.cof-wanted .cof-res-rang{box-shadow:inset 0 0 0 1.5px #323437}
.cof-wanted .cof-res-gagne .cof-res-rang{background:#8f1d14;color:#e6ecf3;box-shadow:none}
.cof-wanted .cof-res-temps{color:#323437}
.cof-wanted .cof-res-val{padding:1px 6px;border-radius:3px;font-size:11px;color:#1a1c1f;box-shadow:inset 0 0 0 1.2px #323437}
.cof-wanted .cof-res-gagne .cof-res-val{background:#323437;color:#e6ecf3;box-shadow:none}
.cof-wanted .cof-res-faux .cof-res-nom,.cof-wanted .cof-res-trop_tard .cof-res-nom,.cof-wanted .cof-res-faux .cof-res-val,.cof-wanted .cof-res-trop_tard .cof-res-val{color:#585a5d}
.cof-wanted .cof-res-plus{color:#323437}
/* -- la petite affiche du coffre (04/10/2026) : papier jauni, filet d encre, punaise rouge, legerement de travers -- */
.cof-wanted.cof-petit{grid-template-columns:70px minmax(0,1fr) auto}
.cof-wanted.cof-petit .cof-wan-scene{width:70px;height:auto;align-self:start;display:grid;place-items:center;padding-top:6px}
.cof-wan-affiche{position:relative;display:grid;justify-items:center;gap:2px;width:64px;padding:5px 4px 4px;background:radial-gradient(circle at 20% 15%,rgba(80,82,85,.18),transparent 45%),linear-gradient(180deg,#ebf1f9,#ffecdc);box-shadow:0 0 0 1px rgba(50,52,55,.75),2px 3px 0 rgba(26,28,31,.28),0 6px 14px -6px rgba(0,0,0,.45);transform:rotate(-3deg)}
.cof-wan-affiche::before{content:"";position:absolute;left:50%;top:-5px;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff8a7a,#b3261a 60%,#5a0f08);box-shadow:0 1px 2px rgba(0,0,0,.5)}
.cof-wan-mot{font-family:"Times New Roman",Georgia,serif;font-size:12px;line-height:1;font-weight:900;letter-spacing:.05em;color:#1a1c1f}
.cof-wan-cadre{position:relative;display:block;width:52px;height:46px;overflow:hidden;background:#fed4ad;box-shadow:inset 0 0 0 1.5px #323437}
.cof-wan-cadre img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 22%;filter:sepia(.35) contrast(1.05)}
.cof-wan-silhouette{position:absolute;inset:1.5px;display:grid;place-items:start center;padding-top:5px;font-family:"Times New Roman",Georgia,serif;font-size:17px;font-weight:900;line-height:1;color:#dee6f0;
  background:radial-gradient(circle at 50% 36%,#323437 0 26%,transparent 27%),radial-gradient(ellipse 60% 52% at 50% 100%,#323437 0 98%,transparent 100%),linear-gradient(180deg,#ffe3c9,#fec182)}
.cof-wan-dead{font-family:"Times New Roman",Georgia,serif;font-size:5.6px;font-style:normal;font-weight:900;letter-spacing:.14em;white-space:nowrap;color:#1a1c1f}
.cof-wan-prime{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:6px;row-gap:1px;margin-top:2px;font-family:"Times New Roman",Georgia,serif;color:#1a1c1f}
.cof-wan-prime small{font-size:10.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.cof-wan-prime b{font-size:21px;line-height:1;font-weight:900;font-variant-numeric:tabular-nums}
.cof-wan-prime i{flex-basis:100%;font-family:inherit;font-style:normal;font-size:11.5px;font-weight:700;color:#3f4144}
.cof-wanted .cof-ouvrir{background:transparent;color:#8f1d14;box-shadow:inset 0 0 0 2px #8f1d14,inset 0 0 0 4px #dee6f0,inset 0 0 0 5px #8f1d14;border-radius:4px;transform:rotate(-4deg);letter-spacing:.16em;font-family:"Times New Roman",Georgia,serif;font-size:14px}
@media (hover:hover){.cof-wanted.cof-prenable:hover .cof-ouvrir{background:rgba(143,29,20,.08)}}
/* LE COFFRE AU STYLE WANTED (04/10, user : « avec un style wanted le coffre ») : planches de papier jauni comme une affiche,
   ferrures et coins a l encre brune, l affiche WANTED clouee sur la face et sur le couvercle */
.cof-wanted{--embleme:var(--logo-wanted) 50% 50%/auto 76% no-repeat;
  --bois-av-p:linear-gradient(180deg,#ffeedf 0%,#fedfc2 100%);--bois-cote-p:linear-gradient(180deg,#ffe2c9,#ffb35e);
  --dessus:linear-gradient(180deg,#e5edf5 0%,#ffe7d2 100%);--grain:rgba(50,52,55,.14);--joint:#323437;--dessous:#1a1c1f;--reflet:rgba(247,250,254,.55);
  --metal-p:linear-gradient(180deg,#4b4e50 0%,#27292c 55%,#111316 100%);--rivet:#1a1c1f;
  --coins:linear-gradient(135deg,#27292c 0 5px,transparent 5px),linear-gradient(225deg,#27292c 0 5px,transparent 5px),linear-gradient(45deg,#27292c 0 5px,transparent 5px),linear-gradient(315deg,#27292c 0 5px,transparent 5px);
  --tresor:radial-gradient(ellipse at 50% 42%,#f3f8ff 0%,#f2d68f 40%,#8f1d14 80%,#1a1c1f 96%);--lumiere:rgba(255,238,223,.95);--lumiere-2:rgba(143,29,20,.35)}
.cof-wanted .c3-ga,.cof-wanted .c3-dr,.cof-wanted .c3-cga,.cof-wanted .c3-cdr{box-shadow:inset 0 0 0 1px rgba(50,52,55,.55)}
.cof-wanted .c3-av{box-shadow:inset 0 0 0 1.5px #27292c}
.cof-wanted .c3-av>b{background:var(--logo-wanted) 50% 50%/auto 100% no-repeat,var(--coins)}
/* l affiche est clouee sur le bois : ni fermoir, ni bande doree, ni serrure par-dessus */
.cof-wanted .c3-av::after,.cof-wanted .c3-av>em,.cof-wanted .c3-av::before,.cof-wanted .c3-cav::before{display:none}
/* le portrait (dans la fenetre, et en vignette sur la carte une fois le nom revele) */
.fo-wan-photo{position:relative;display:block;width:100%;height:100%;overflow:hidden;background:#ffc58a}
.fo-wan-photo img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 22%;transform:scale(1.08);transition:filter .12s linear;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.fo-wan-attente::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(245,249,253,.5) 50%,transparent 70%) 0 0/200% 100%;animation:fo-wan-luit 1.1s linear infinite}
@keyframes fo-wan-luit{to{background-position:-200% 0}}
.fo-wan-photo-petit{width:52px;height:56px;border-radius:2px;box-shadow:0 0 0 2px #323437,2px 2px 0 2px rgba(50,52,55,.3)}
.fo-wan-photo-petit img{transform:none}
/* la fenetre : l avis placarde, WANTED en capitales, le portrait, DEAD OR ALIVE, la prime qui baisse */
.fo-wan{position:fixed;left:50%;top:50%;z-index:91;transform:translate(-50%,-50%);width:min(92vw,400px);max-height:calc(100dvh - 24px);overflow:auto;padding:12px 16px 14px;border-radius:3px;
  background:radial-gradient(circle at 15% 12%,rgba(80,82,85,.22),transparent 32%),radial-gradient(circle at 85% 88%,rgba(80,82,85,.24),transparent 36%),radial-gradient(circle at 80% 20%,rgba(247,250,254,.5),transparent 40%),#ffeedf;
  color:#1a1c1f;box-shadow:inset 0 0 0 2px #323437,inset 0 0 40px rgba(58,60,63,.35),0 30px 80px -10px rgba(0,0,0,.9);
  display:grid;gap:9px;animation:fo-wan-entre .34s cubic-bezier(.2,1.3,.4,1)}
@keyframes fo-wan-entre{from{transform:translate(-50%,-46%) rotate(-3deg) scale(.9);opacity:0}to{transform:translate(-50%,-50%);opacity:1}}
.fo-wan-tete{position:relative;display:flex;align-items:center;justify-content:center}
.fo-wan-wanted{font-family:"Times New Roman",Georgia,serif;font-size:46px;line-height:1;font-weight:900;letter-spacing:.06em;color:#1a1c1f;text-shadow:1px 1px 0 rgba(245,249,253,.6)}
.fo-wan-sec{position:absolute;right:0;top:50%;transform:translateY(-50%);min-width:40px;text-align:center;font-size:26px;line-height:1;font-weight:900;font-variant-numeric:tabular-nums;color:#8f1d14}
.fo-wan-urgent{animation:fo-wan-bat .5s ease-in-out infinite alternate}
@keyframes fo-wan-bat{from{transform:translateY(-50%) scale(1)}to{transform:translateY(-50%) scale(1.2)}}
.fo-wan-cadre{position:relative;justify-self:center;width:min(100%,250px);aspect-ratio:5/4;max-width:100%;padding:5px;background:#e5ecf3;box-shadow:inset 0 0 0 2px #323437,0 2px 0 #323437}
.fo-wan-tampon{position:absolute;left:50%;top:50%;padding:4px 12px;border:4px solid #b3261a;border-radius:4px;color:#b3261a;font-family:"Times New Roman",Georgia,serif;font-size:30px;font-weight:900;letter-spacing:.06em;white-space:nowrap;
  background:rgba(229,236,243,.35);transform:translate(-50%,-50%) rotate(-14deg);mix-blend-mode:multiply;animation:fo-wan-tamponne .38s cubic-bezier(.2,1.8,.4,1)}
@keyframes fo-wan-tamponne{0%{transform:translate(-50%,-50%) rotate(-14deg) scale(2.6);opacity:0}70%{opacity:1}100%{transform:translate(-50%,-50%) rotate(-14deg) scale(1)}}
.fo-wan-gagne .fo-wan-tampon{border-color:#1f6b2c;color:#1f6b2c}
.fo-wan-dead{display:flex;align-items:center;gap:8px;font-family:"Times New Roman",Georgia,serif;font-size:14px;font-weight:900;letter-spacing:.24em;color:#1a1c1f}
.fo-wan-dead::before,.fo-wan-dead::after{content:"";flex:1;height:2px;background:#323437}
.fo-wan-prime{display:flex;align-items:baseline;justify-content:center;gap:6px;margin:0;font-family:"Times New Roman",Georgia,serif;color:#1a1c1f}
.fo-wan-prime small{font-size:12px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.fo-wan-prime b{font-size:32px;line-height:1;font-weight:900;font-variant-numeric:tabular-nums}
.fo-wan-prime span{font-size:20px;font-weight:900}
.fo-wan-temps{height:8px;border:2px solid #323437;border-radius:2px;background:#e5ecf3;overflow:hidden}
.fo-wan-temps i{display:block;height:100%;background:repeating-linear-gradient(135deg,#323437 0 4px,#4b4e50 4px 8px);transition:width .1s linear}
.fo-wan-indices{display:grid;gap:4px;margin:0;padding:0;list-style:none}
.fo-wan-indice{padding:5px 9px;border-left:3px solid #8f1d14;background:rgba(245,249,253,.55);font-size:13px;line-height:1.3;font-weight:700;color:#1a1c1f;animation:fo-wan-indice .3s ease-out}
@keyframes fo-wan-indice{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
.fo-wan-cache{border-left-color:rgba(50,52,55,.35);background:rgba(245,249,253,.22);color:#646769;font-weight:600;font-style:italic;animation:none}
.fo-wan-choix{display:grid;gap:7px}
.fo-wan-case{display:flex;align-items:center;gap:10px;min-height:46px;padding:7px 12px;border:2px solid #323437;border-radius:3px;background:#e7eef5;color:#1a1c1f;font:inherit;font-size:15px;font-weight:800;text-align:left;cursor:pointer;box-shadow:3px 3px 0 #323437;transition:transform 80ms,box-shadow 80ms}
.fo-wan-case:active:not(:disabled){transform:translate(2px,2px);box-shadow:1px 1px 0 #323437}
.fo-wan-case:disabled{cursor:default}
.fo-wan-case:focus-visible{outline:3px solid #8f1d14;outline-offset:3px}
.fo-wan-lettre{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#323437;color:#e6ecf3;font-size:13px;font-weight:900}
.fo-wan-txt{min-width:0}
.fo-wan-choisi{background:#323437;color:#e6ecf3}
.fo-wan-choisi .fo-wan-lettre{background:#e6ecf3;color:#323437}
.fo-wan-regle{margin:0;font-size:11.5px;font-weight:700;text-align:center;text-wrap:balance;color:#323437}
.fo-wan-res{display:grid;justify-items:center;gap:5px;text-align:center}
.fo-wan-nom{font-family:"Times New Roman",Georgia,serif;font-size:28px;line-height:1.1;font-weight:900;text-wrap:balance}
.fo-wan-fiche{display:grid;gap:2px;font-size:12.5px;font-weight:600;color:#323437}
.fo-wan-montant{margin-top:4px;font-size:36px;line-height:1;font-weight:900;font-variant-numeric:tabular-nums}
.fo-wan-titre{font-size:17px;font-weight:900}
.fo-wan-detail{max-width:32ch;font-size:13px;font-weight:600;color:#27292c}
.fo-wan-reponse{padding:5px 10px;border:2px dashed #323437;font-size:13px;font-weight:600}
.fo-wan-ok{margin-top:6px;height:44px;padding:0 34px;border:0;border-radius:3px;background:#323437;color:#e6ecf3;font:inherit;font-size:16px;font-weight:900;cursor:pointer;box-shadow:3px 3px 0 rgba(50,52,55,.4)}
.fo-wan-ok:focus-visible{outline:3px solid #8f1d14;outline-offset:3px}
.fo-wan-faux{animation:fo-wan-entre .34s cubic-bezier(.2,1.3,.4,1),fo-rou-secousse .5s cubic-bezier(.3,.7,.4,1) .3s}
@media (prefers-reduced-motion:reduce){.fo-wan,.fo-wan-tampon,.fo-wan-urgent,.cof-wanted.cof-prenable,.fo-wan-faux,.fo-wan-indice,.fo-wan-attente::after{animation:none}}
/* le bouton du panneau : sur toute la largeur, sous le hasard et la question */
.fo-cof-p-wanted{box-shadow:inset 0 0 0 1.5px #ffd5ad;color:#dee6f0;background:linear-gradient(100deg,rgba(255,238,223,.16),rgba(255,238,223,.06))}
.fo-cof-p-wanted svg{color:#ffebd9}
@media (hover:hover){.fo-cof-p-wanted:hover{background-color:rgba(255,238,223,.12)}}
/* ── DEVINE LE PRIX (06/10/2026) : la salle des ventes, velours vert et or, une etiquette de prix frappee du symbole euro ── */
.cof-prix{--carte-fond:linear-gradient(120deg,#11402f 0%,#0a271d 70%);--anneau-bas:rgba(233,196,106,.35);--anneau:rgba(233,196,106,.85);--anneau-vif:#ffe39a;--anneau-halo:rgba(233,196,106,.38);
  --bois-av-p:linear-gradient(180deg,#1d6b4d 0%,#13503a 55%,#0b3526 100%);--bois-cote-p:linear-gradient(180deg,#145a40,#0a2f22);--dessus:linear-gradient(180deg,#23805c 0%,#176247 60%,#0f4632 100%);
  --grain:rgba(0,0,0,.16);--joint:rgba(233,196,106,.6);--dessous:#06180f;--reflet:rgba(220,255,236,.4);
  --metal-p:linear-gradient(180deg,#ffeedf 0%,#e9c46a 45%,#ce7d00 100%);--rivet:#ffeedf;
  --coins:linear-gradient(135deg,#f3dc9a 0 5px,transparent 5px),linear-gradient(225deg,#f3dc9a 0 5px,transparent 5px),linear-gradient(45deg,#ce7d00 0 5px,transparent 5px),linear-gradient(315deg,#ce7d00 0 5px,transparent 5px);
  --embleme:var(--logo-prix) 50% 50%/auto 70% no-repeat;
  --tresor:radial-gradient(ellipse at 50% 42%,#fffbe6 0%,#f3dc9a 34%,#2f9a6e 72%,#06180f 96%);--lumiere:rgba(255,238,223,.95);--lumiere-2:rgba(47,154,110,.45);
  --titre-coul:#ecf4fe;--unite-coul:#e9c46a;--rang-coul:#e9c46a;--bouton:linear-gradient(180deg,#ffeedf,#e9c46a);--bouton-txt:#0a271d;
  color:#eaf6ef;box-shadow:inset 0 0 0 1.5px rgba(233,196,106,.55),0 12px 30px -18px #000}
.cof-prix .cof-halo{display:none}
.cof-prix .c3-av>b{background:var(--logo-prix) 50% 52%/auto 74% no-repeat,var(--coins)}
.cof-prix .c3-av::after,.cof-prix .c3-av>em{display:none}
.cof-prix .cof-rang{align-self:flex-start;white-space:nowrap;padding:2px 8px;border-radius:3px;background:linear-gradient(180deg,#ffeedf,#e9c46a);color:#0a271d;font-size:10.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.cof-prix .cof-titre{font-family:Georgia,"Times New Roman",serif;font-weight:900;line-height:1.1;white-space:normal;text-wrap:balance;color:#ecf4fe}
.cof-prix .cof-sous{color:#cfe6da;font-weight:600}
.cof-prx-puces{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}
.cof-prx-puces>*{display:inline-flex;align-items:center;height:19px;padding:0 6px;border-radius:3px;font-size:11px;font-style:normal;font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums}
.cof-prx-puces b{background:rgba(233,196,106,.16);color:#f3dc9a;box-shadow:inset 0 0 0 1px rgba(233,196,106,.5)}
.cof-prx-puces i{box-shadow:inset 0 0 0 1.2px rgba(207,230,218,.5);color:#cfe6da}
.cof-prx-puces .cof-prx-top{background:linear-gradient(180deg,#ffeedf,#e9c46a);color:#0a271d;box-shadow:none}
.cof-prix .cof-ouvrir{height:34px;padding:0 16px;border-radius:999px;font-size:13px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;box-shadow:0 4px 14px -6px rgba(233,196,106,.7)}
.cof-prix.cof-prenable{animation:cof-prix-appel 2.4s ease-in-out infinite}
@keyframes cof-prix-appel{0%,100%{box-shadow:inset 0 0 0 1.5px rgba(233,196,106,.55),0 12px 30px -18px #000}50%{box-shadow:inset 0 0 0 2.5px #ffe39a,0 0 0 5px rgba(233,196,106,.16),0 12px 30px -18px #000}}
.cof-prix.cof-ouvert:not(.cof-prenable){--carte-fond:linear-gradient(120deg,#0e3326 0%,#081f17 70%)}
.cof-prix-perdu{--titre-coul:#b9cfc3}
.cof-prix.cof-petit{display:grid;grid-template-columns:64px minmax(0,1fr) auto;column-gap:10px;row-gap:8px;align-items:center}
.cof-prix.cof-petit .cof-scene{grid-column:1;grid-row:1}
.cof-prix.cof-petit .cof-texte{grid-column:2 / 4;grid-row:1}
.cof-prix.cof-petit .cof-ouvrir{grid-column:2 / 4;grid-row:2;justify-self:end;margin:0}
.cof-prix.cof-petit .cof-prx-scene{width:64px;height:auto;align-self:start;display:grid;justify-items:center;gap:3px;padding-top:2px}
.cof-prx-mini{display:block;width:52px;aspect-ratio:63/88;border-radius:3px;overflow:hidden;background:#0a271d;box-shadow:0 0 0 1.5px #e9c46a,0 6px 14px -6px rgba(0,0,0,.6)}
.cof-prx-mini img{display:block;width:100%;height:100%;object-fit:cover}
.cof-prx-etiq{padding:1px 5px;border-radius:3px;background:linear-gradient(180deg,#ffeedf,#e9c46a);color:#0a271d;font-size:10px;font-weight:900;white-space:nowrap;font-variant-numeric:tabular-nums}
.cof-prix .cof-res{gap:0;padding:4px 8px;border-radius:6px;background:rgba(0,0,0,.22);box-shadow:inset 0 0 0 1px rgba(233,196,106,.3)}
.cof-prix .cof-res-l{grid-template-columns:20px minmax(0,1fr) auto auto;color:#eaf6ef}
.cof-prix .cof-res-nom{color:#ecf4fe}
.cof-prix .cof-res-rang{box-shadow:inset 0 0 0 1.2px rgba(233,196,106,.6);color:#f3dc9a}
.cof-prix .cof-res-gagne .cof-res-rang{background:#e9c46a;color:#0a271d;box-shadow:none}
.cof-prix .cof-res-temps{color:#b9cfc3;font-variant-numeric:tabular-nums}
.cof-prix .cof-res-val{padding:1px 6px;border-radius:3px;font-size:11px;color:#eaf6ef;box-shadow:inset 0 0 0 1px rgba(207,230,218,.4)}
.cof-prix .cof-res-gagne .cof-res-val{background:#e9c46a;color:#0a271d;box-shadow:none}
.cof-prix .cof-res-faux .cof-res-nom,.cof-prix .cof-res-trop_tard .cof-res-nom,.cof-prix .cof-res-deja_gagne .cof-res-nom{color:#9fb8ab}
.cof-prix .cof-res-suspect{border-radius:4px;background:rgba(255,64,64,.18);box-shadow:inset 0 0 0 1.5px #ff4040}
.cof-prix .cof-res-suspect .cof-res-nom{color:#ff8a8a}
.cof-prix .cof-res-plus{color:#cfe6da}
/* la fenetre : ancree EN HAUT (le clavier du telephone monte par le bas), la carte coupee sous le nom, le champ en euros */
.fo-prx{position:fixed;left:50%;top:max(10px,env(safe-area-inset-top));z-index:91;transform:translateX(-50%);width:min(94vw,400px);max-height:calc(100dvh - 20px);overflow:auto;overscroll-behavior:contain;
  padding:12px 14px 14px;border-radius:16px;display:grid;gap:9px;color:#eaf6ef;
  background:radial-gradient(120% 70% at 50% 0%,rgba(233,196,106,.16),transparent 60%),linear-gradient(180deg,#11402f,#081f17);
  box-shadow:inset 0 0 0 1.5px rgba(233,196,106,.6),0 30px 80px -10px rgba(0,0,0,.9);animation:fo-prx-entre .3s cubic-bezier(.2,1.3,.4,1)}
@keyframes fo-prx-entre{from{transform:translate(-50%,-14px) scale(.94);opacity:0}to{transform:translateX(-50%);opacity:1}}
.fo-prx-tete{position:relative;display:flex;align-items:center;justify-content:center;min-height:34px}
.fo-prx-mot{font-family:Georgia,"Times New Roman",serif;font-size:24px;line-height:1;font-weight:900;letter-spacing:.04em;color:#f3dc9a;text-transform:uppercase}
.fo-prx-sec{position:absolute;right:0;top:50%;transform:translateY(-50%);min-width:38px;height:38px;display:grid;place-items:center;border-radius:50%;
  background:#e9c46a;color:#0a271d;font-size:20px;font-weight:900;font-variant-numeric:tabular-nums}
.fo-prx-urgent{background:#ff4d4d;color:#fff;animation:fo-prx-bat .45s ease-in-out infinite alternate}
@keyframes fo-prx-bat{from{transform:translateY(-50%) scale(1)}to{transform:translateY(-50%) scale(1.14)}}
.fo-prx-carte{position:relative;justify-self:center;width:min(100%,230px);max-height:38dvh;aspect-ratio:63/72;overflow:hidden;border-radius:10px;background:#06180f;
  box-shadow:0 0 0 2px #e9c46a,0 14px 30px -12px rgba(0,0,0,.8)}
.fo-prx-carte img{display:block;width:100%;height:auto;max-width:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;pointer-events:none}
.fo-prx-carte .fo-prx-entiere{height:100%;object-fit:contain;background:#06180f}
.fo-prx-carte::after{content:"";position:absolute;left:0;right:0;bottom:0;height:22%;background:linear-gradient(180deg,transparent,rgba(6,24,15,.92));pointer-events:none}
.fo-prx-attente{position:absolute;inset:0;display:grid;place-items:center;padding:16px;text-align:center;font-size:13.5px;font-weight:700;color:#cfe6da;
  background:linear-gradient(100deg,transparent 30%,rgba(233,196,106,.14) 50%,transparent 70%) 0 0/200% 100%,#06180f;animation:fo-wan-luit 1.1s linear infinite}
.fo-prx-tampon{position:absolute;left:50%;top:46%;z-index:1;padding:4px 12px;border:4px solid #ff4d4d;border-radius:6px;color:#ff4d4d;font-family:Georgia,"Times New Roman",serif;font-size:26px;font-weight:900;letter-spacing:.05em;white-space:nowrap;
  background:rgba(6,24,15,.55);transform:translate(-50%,-50%) rotate(-12deg);animation:fo-wan-tamponne .38s cubic-bezier(.2,1.8,.4,1)}
.fo-prx-gagne .fo-prx-tampon{border-color:#e9c46a;color:#ffe39a}
.fo-prx-deja_gagne .fo-prx-tampon{border-color:#cfe6da;color:#cfe6da}
.fo-prx-temps{height:8px;border-radius:99px;background:rgba(0,0,0,.35);overflow:hidden;box-shadow:inset 0 0 0 1px rgba(233,196,106,.35)}
.fo-prx-temps i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#e9c46a,#ffe39a);transition:width .1s linear}
.fo-prx-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.fo-prx-champ{display:flex;align-items:center;gap:6px;min-height:54px;padding:0 14px;border-radius:12px;background:#fffdf4;color:#0a271d;box-shadow:inset 0 0 0 2px #e9c46a}
.fo-prx-champ:focus-within{box-shadow:inset 0 0 0 3px #ffe39a,0 0 0 4px rgba(233,196,106,.25)}
.fo-prx-champ input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:inherit;font:inherit;font-size:28px;font-weight:900;font-variant-numeric:tabular-nums;text-align:right}
.fo-prx-champ input::placeholder{color:rgba(10,39,29,.28)}
.fo .fo-prx-champ input:focus,.fo .fo-prx-champ input:focus-visible{outline:none;box-shadow:none}
.fo-prx-champ>span{font-size:24px;font-weight:900}
.fo-prx-valider{min-height:54px;padding:0 18px;border:0;border-radius:12px;background:linear-gradient(180deg,#ffeedf,#e9c46a);color:#0a271d;font:inherit;font-size:16px;font-weight:900;cursor:pointer;box-shadow:0 6px 18px -8px rgba(233,196,106,.8)}
.fo-prx-valider:disabled{opacity:.55;cursor:default}
.fo-prx-valider:focus-visible,.fo-prx-ok:focus-visible{outline:3px solid #ffe39a;outline-offset:3px}
.fo-prx-regle{margin:0;font-size:11.5px;font-weight:700;text-align:center;text-wrap:balance;color:#cfe6da}
.fo-prx-res{display:grid;justify-items:center;gap:5px;text-align:center}
.fo-prx-montant{font-size:36px;line-height:1;font-weight:900;font-variant-numeric:tabular-nums;color:#ecf4fe}
.fo-prx-gagne .fo-prx-montant{color:#ffe39a}
.fo-prx-titre{font-size:17px;font-weight:900}
.fo-prx-cote{display:grid;gap:2px;font-size:13px;font-weight:600;color:#cfe6da}
.fo-prx-cote b{color:#ffe39a;font-size:15px}
.fo-prx-nom{font-family:Georgia,"Times New Roman",serif;font-size:15px;font-weight:900;color:#ecf4fe;text-wrap:balance}
.fo-prx-detail{max-width:34ch;font-size:13px;font-weight:600;color:#cfe6da}
.fo-prx-ok{margin-top:6px;height:44px;padding:0 34px;border:0;border-radius:12px;background:linear-gradient(180deg,#ffeedf,#e9c46a);color:#0a271d;font:inherit;font-size:16px;font-weight:900;cursor:pointer}
.fo-prx-faux{animation:fo-prx-entre .3s cubic-bezier(.2,1.3,.4,1),fo-rou-secousse .5s cubic-bezier(.3,.7,.4,1) .3s}
@media (prefers-reduced-motion:reduce){.fo-prx,.fo-prx-tampon,.fo-prx-urgent,.cof-prix.cof-prenable,.fo-prx-faux,.fo-prx-attente{animation:none}}
/* le bouton du panneau de l admin */
.fo-cof-p-prix{box-shadow:inset 0 0 0 1.5px rgba(233,196,106,.7);color:#f3dc9a;background:linear-gradient(100deg,rgba(29,107,77,.45),rgba(10,39,29,.35))}
.fo-cof-p-prix svg{color:#e9c46a}
@media (hover:hover){.fo-cof-p-prix:hover{background-color:rgba(29,107,77,.35)}}
/* ── LE COFFRE A BADGES : amethyste et argent, un ecusson sur le couvercle, les cinq badges en vignette ── */
.cof-badge{--carte-fond:linear-gradient(140deg,#2a1a3c,#150f20 62%);--anneau-bas:rgba(190,150,255,.3);--anneau:rgba(196,160,255,.88);--anneau-vif:rgba(230,214,255,1);--anneau-halo:rgba(170,120,255,.42);
  --bois-av-p:linear-gradient(180deg,#7446b0 0%,#552f8a 52%,#3a1e62 100%);--bois-cote-p:linear-gradient(180deg,#4f2b80 0%,#2d1650 100%);--dessus:linear-gradient(180deg,#8c5ccc 0%,#6c40a8 60%,#4c2880 100%);
  --grain:rgba(0,0,0,.14);--joint:rgba(225,210,255,.55);--dessous:#1d0f33;--reflet:rgba(235,220,255,.55);
  --metal-p:linear-gradient(180deg,#ffffff 0%,#d9d1ea 40%,#8a7ea6 100%);--rivet:#ffffff;--fente:.7;
  --serrure:radial-gradient(circle at 50% 58%,#f1dcff 0 1.5px,#b06bff 2.5px,#5a1fa0 4.5px,transparent 5px),linear-gradient(180deg,#ffffff 0%,#d9d1ea 40%,#8a7ea6 100%);
  --coins:linear-gradient(135deg,#efe9fa 0 5px,transparent 5px),linear-gradient(225deg,#efe9fa 0 5px,transparent 5px),linear-gradient(45deg,#a99cc6 0 5px,transparent 5px),linear-gradient(315deg,#a99cc6 0 5px,transparent 5px);
  --embleme:var(--logo-badges) 50% 50%/56% no-repeat;
  --halo:rgba(170,120,255,.6);--lumiere:rgba(240,230,255,1);--lumiere-2:rgba(170,110,255,.5);--rayon:82px;
  --tresor:radial-gradient(ellipse at 50% 42%,#fff 0%,#e9d8ff 24%,#a86bff 52%,#2d1650 88%);
  --tas:radial-gradient(circle at 50% 50%,#f1dcff 0 1px,#b06bff 1.7px,transparent 2.3px) 2px 3px/11px 10px,radial-gradient(circle at 50% 50%,#bfe6ff 0 1px,#3d8bff 1.7px,transparent 2.3px) 6px 1px/13px 12px,radial-gradient(ellipse at 50% 45%,#fff,#d6b8ff 50%,#3a1e62);
  --titre-coul:#efe3ff;--unite-coul:#c9b0ff;--rang-coul:#c9b0ff;--bouton:linear-gradient(180deg,#f3eaff,#b994ff);--bouton-txt:#1f0f3a}
.cof-badge .cof-halo{filter:none}

/* ── LES FENETRES DE TIRAGE : medaillons du hasard, rang des badges, resultats ── */
.fo-rou-medaille{width:52px;height:52px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.6));pointer-events:none}
.fo-rou-hasard{background:radial-gradient(120% 70% at 25% -10%,rgba(255,238,223,.16),transparent 55%),radial-gradient(120% 70% at 75% -10%,rgba(255,40,70,.16),transparent 55%),var(--fo-fond)}
.fo-rou-hasard .fo-rou-titre{color:#ffeedf}
.fo-rou-hasard .fo-rou-repere{--fo-or:#ffeedf}
.fo-rou-hasard-res .fo-rou-rayons{background:repeating-conic-gradient(from 0deg,rgba(255,226,150,.32) 0 7deg,transparent 7deg 20deg)}
.fo-rou-perdu{animation:fo-rou-secousse .5s cubic-bezier(.3,.7,.4,1)}
@keyframes fo-rou-secousse{0%,100%{transform:translate(-50%,-50%)}12%{transform:translate(calc(-50% - 7px),calc(-50% + 2px)) rotate(-1deg)}28%{transform:translate(calc(-50% + 6px),calc(-50% - 2px)) rotate(1deg)}44%{transform:translate(calc(-50% - 4px),-50%)}62%{transform:translate(calc(-50% + 3px),calc(-50% + 1px))}80%{transform:translate(calc(-50% - 1px),-50%)}}
.fo-rou-perdu .fo-rou-titre{color:#ff9aa6}
.fo-rou-perdu .fo-rou-eclair{background:radial-gradient(circle at 50% 45%,rgba(255,60,80,.85),rgba(120,0,20,.45) 30%,transparent 62%)}
.fo-rou-perdu .fo-rou-rayons{background:repeating-conic-gradient(from 0deg,rgba(255,40,70,.22) 0 7deg,transparent 7deg 20deg)}
.fo-rou-hasard-res{padding-top:26px}
.fo-rou-medaille-res{position:relative;z-index:1;width:112px;height:112px;filter:drop-shadow(0 8px 24px rgba(255,200,80,.5));animation:fo-rou-gagne .65s cubic-bezier(.2,1.6,.4,1)}
.fo-rou-chute{filter:drop-shadow(0 8px 24px rgba(255,30,60,.55));animation:fo-rou-chute .5s cubic-bezier(.6,0,.9,.4)}
@keyframes fo-rou-chute{0%{transform:translateY(-60px) scale(1.6);opacity:0}70%{transform:translateY(4px) scale(.96);opacity:1}100%{transform:none}}
.fo-rou-montant{position:relative;z-index:1;font-size:34px;font-weight:800;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:#ffe08a;text-shadow:0 0 18px rgba(255,200,80,.6);animation:fo-rou-montant .7s cubic-bezier(.2,1.5,.4,1) .25s both}
.fo-rou-perdu .fo-rou-montant{color:#ff6b7d;text-shadow:0 0 18px rgba(255,40,70,.7)}
@keyframes fo-rou-montant{from{transform:scale(.5) translateY(10px);opacity:0}to{transform:none;opacity:1}}
.fo-rou-hasard-res .fo-rou-nom{margin-top:4px}
.fo-rou-perdu .fo-rou-ok{background:linear-gradient(180deg,#ff9aa6,#e0334f)}
/* le tresor (3 %, 10 000) : or partout, rayons plus larges, medaillon qui bat */
.fo-rou-tresor{background:radial-gradient(120% 70% at 50% -10%,rgba(255,210,90,.3),transparent 60%),var(--fo-fond)}
.fo-rou-tresor .fo-rou-titre{color:#ffe08a}
.fo-rou-tresor .fo-rou-rayons{width:380px;height:380px;margin:-190px 0 0 -190px;background:repeating-conic-gradient(from 0deg,rgba(255,214,121,.45) 0 6deg,transparent 6deg 16deg)}
.fo-rou-tresor .fo-rou-medaille-res{filter:drop-shadow(0 0 30px rgba(255,210,90,.9));animation:fo-rou-gagne .65s cubic-bezier(.2,1.6,.4,1),fo-rou-bat 1.4s ease-in-out .7s infinite}
@keyframes fo-rou-bat{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.fo-rou-tresor .fo-rou-montant{font-size:40px;color:#ffeedf}
.fo-rou-tresor .fo-rou-ok{background:linear-gradient(180deg,#ffeedf,#fec182)}
/* le grand ange / la grande tete de mort (+-1 000) : rayons plus larges, montant plus gros, secousse plus forte */
.fo-rou-grand .fo-rou-rayons{width:350px;height:350px;margin:-175px 0 0 -175px}
.fo-rou-grand .fo-rou-montant{font-size:38px}
.fo-rou-grand .fo-rou-medaille-res{width:122px;height:122px}
.fo-rou-grand.fo-rou-perdu{animation:fo-rou-secousse .5s cubic-bezier(.3,.7,.4,1),fo-rou-secousse .45s cubic-bezier(.3,.7,.4,1) .5s}
.fo-rou-badge{display:grid;justify-items:center;gap:6px}
.fo-rou-rarete{font-size:8.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;color:var(--rar,#c9b0ff);opacity:.9}
.fo-rou-rarete-res{position:relative;z-index:1;margin-top:30px;font-size:12px}
.fo-rou-gagne[data-rang] .fo-rou-nom{margin-top:2px}
.fo-rou-gagne[data-rang] .fo-rou-rayons{background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--rar) 35%,transparent) 0 7deg,transparent 7deg 20deg)}
.fo-res-part{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:visible}
.fo-res-part i{position:absolute;left:50%;top:84px;width:10px;height:10px;margin:-5px 0 0 -5px;opacity:0;animation:fo-res-arc var(--t,1.3s) linear var(--d,0s) both}
.fo-res-part i::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--p,radial-gradient(circle at 34% 30%,#ffeedf,#ffc53d 58%,#d48100));box-shadow:0 0 6px var(--pl,rgba(255,200,80,.8));animation:cof-pile .34s linear infinite}
.fo-res-part i.plume::before{border-radius:100% 0 100% 0;background:linear-gradient(135deg,#fff,#dfe3e8);box-shadow:none;animation:fo-plume 1.4s ease-in-out infinite alternate}
@keyframes fo-plume{from{transform:rotate(-25deg)}to{transform:rotate(25deg)}}
.fo-res-part i.diam::before{border-radius:2px;background:linear-gradient(135deg,#fff,#9be7ff 40%,#3d8bff);box-shadow:0 0 8px #9be7ff;animation:cof-gem .6s linear infinite}
.fo-res-part i.fumee{width:34px;height:34px;margin:-17px 0 0 -17px;animation-name:fo-fumee}
.fo-res-part i.fumee::before{background:radial-gradient(circle,rgba(120,20,30,.75),rgba(40,0,8,0) 70%);box-shadow:none;filter:blur(4px);animation:none}
@keyframes fo-res-arc{
  0%{opacity:0;transform:translate(0,0) scale(.5);animation-timing-function:cubic-bezier(.15,.7,.35,1)}
  8%{opacity:1}
  42%{transform:translate(calc(var(--dx) * .5),var(--haut)) scale(1);animation-timing-function:cubic-bezier(.55,0,.85,.35)}
  88%{opacity:1}
  100%{opacity:0;transform:translate(var(--dx),var(--bas)) scale(.85)}}
@keyframes fo-fumee{0%{opacity:0;transform:translate(0,0) scale(.4)}25%{opacity:.9}100%{opacity:0;transform:translate(var(--dx),-90px) scale(2.2)}}
.fo-cof-p-hasard{box-shadow:inset 0 0 0 1px rgba(255,170,150,.28);color:#e0e7ee}
.fo-cof-p-hasard svg{color:#ffb3a0}
@media (hover:hover){.fo-cof-p-hasard:hover{background:rgba(255,120,120,.07)}}
/* ── LE COFFRE MAUDIT (04/10/2026) : le coffre hasard passe dans la nuit — noir violet, ange déchu, tête de mort
   maudite à flamme verte (user : « comme le coffre aléatoire en pire, une couleur plus sombre ») ── */
.cof-maudit{--carte-fond:linear-gradient(100deg,#120a1c 0%,#08050c 50%,#03100a 100%);--anneau-bas:rgba(176,77,255,.34);--anneau:rgba(190,120,255,.85);--anneau-vif:rgba(61,255,138,.95);--anneau-halo:rgba(120,30,200,.45);
  --bois-av-p:linear-gradient(90deg,#2a1838 0 50%,#05140b 50% 100%);--bois-cote-p:linear-gradient(180deg,#2c1c3d,#140b1f);--dessus:linear-gradient(90deg,#3a2550 0 50%,#0a2414 50% 100%);
  --grain:rgba(0,0,0,.2);--joint:rgba(160,124,200,.7);--dessous:#040208;--reflet:rgba(201,168,255,.4);
  --metal-p:linear-gradient(180deg,#e9fff1 0%,#7dffb0 38%,#0f5a2a 100%);--rivet:#d9ffe6;--fente:.9;
  --halo:rgba(176,77,255,.55);--lumiere:rgba(201,168,255,1);--lumiere-2:rgba(61,255,138,.45);--rayon:84px;
  --tresor:radial-gradient(ellipse at 50% 42%,#fff 0%,#c9a8ff 28%,#3dff8a 58%,#020805 90%);
  --tas:linear-gradient(90deg,transparent 0 50%,rgba(0,40,20,.6) 50%),radial-gradient(circle at 30% 40%,#e9fff1 0 1.6px,#7dffb0 2.2px 3px,transparent 3.4px) 0 0/7px 6px,radial-gradient(ellipse at 50% 45%,#e9d8ff,#7c5aa8 55%,#05020a);
  --titre-coul:#ead9ff;--unite-coul:#9dffc4;--rang-coul:#c9a8ff;--bouton:linear-gradient(90deg,#c9a8ff 0 50%,#3dff8a 50% 100%);--bouton-txt:#05020a;
  box-shadow:inset 0 0 0 1px var(--anneau-bas),0 0 26px -10px rgba(176,77,255,.6),0 12px 30px -18px #000}
.cof-maudit .c3-ga,.cof-maudit .c3-cga{background-image:linear-gradient(180deg,#3a2550,#1c1029)}
.cof-maudit .c3-dr,.cof-maudit .c3-cdr{background-image:linear-gradient(180deg,#0a2414,#020805)}
.cof-maudit .cof-halo{background:radial-gradient(circle at 30% 50%,rgba(176,77,255,.75),transparent 58%),radial-gradient(circle at 72% 50%,rgba(61,255,138,.6),transparent 58%)}
.cof-maudit .cof-rang{color:#c9a8ff;letter-spacing:.12em}
.cof-maudit.cof-hasard-perdu{--titre-coul:#7dffb0}
.cof-maudit .cof-res{background:rgba(0,0,0,.45);box-shadow:inset 0 0 0 1px rgba(176,77,255,.22)}
.cof-maudit .cof-res-val{color:#c9a8ff}
.cof-maudit .cof-res-perte .cof-res-val{color:#7dffb0}
.fo-rou-maudit{background:radial-gradient(120% 70% at 25% -10%,rgba(176,77,255,.24),transparent 55%),radial-gradient(120% 70% at 75% -10%,rgba(61,255,138,.14),transparent 55%),#07040b;box-shadow:inset 0 0 0 1px rgba(176,77,255,.35),0 0 60px -10px rgba(120,30,200,.55),0 30px 80px -10px rgba(0,0,0,.95)}
.fo-rou-maudit .fo-rou-titre{color:#e9d8ff}
.fo-rou-maudit .fo-rou-repere{--fo-or:#c9a8ff}
.fo-rou-maudit .fo-rou-hasard-res .fo-rou-rayons{background:repeating-conic-gradient(from 0deg,rgba(176,77,255,.34) 0 7deg,transparent 7deg 20deg)}
.fo-rou-maudit .fo-rou-montant{color:#e3ccff;text-shadow:0 0 22px rgba(176,77,255,.85)}
.fo-rou-maudit .fo-rou-medaille-res{filter:drop-shadow(0 8px 26px rgba(176,77,255,.7))}
.fo-rou-maudit .fo-rou-ok{background:linear-gradient(180deg,#e3ccff,#8f55e0);color:#0b0614}
.fo-rou-maudit.fo-rou-perdu .fo-rou-titre{color:#9dffc4}
.fo-rou-maudit.fo-rou-perdu .fo-rou-eclair{background:radial-gradient(circle at 50% 45%,rgba(61,255,138,.75),rgba(0,60,25,.5) 30%,transparent 62%)}
.fo-rou-maudit.fo-rou-perdu .fo-rou-rayons{background:repeating-conic-gradient(from 0deg,rgba(61,255,138,.22) 0 7deg,transparent 7deg 20deg)}
.fo-rou-maudit.fo-rou-perdu .fo-rou-montant{color:#7dffb0;text-shadow:0 0 22px rgba(61,255,138,.8)}
.fo-rou-maudit.fo-rou-perdu .fo-rou-medaille-res{filter:drop-shadow(0 8px 26px rgba(61,255,138,.65))}
.fo-rou-maudit.fo-rou-perdu .fo-rou-ok{background:linear-gradient(180deg,#9dffc4,#18a052)}
.fo-rou-maudit.fo-rou-tresor{background:radial-gradient(120% 70% at 50% -10%,rgba(176,77,255,.34),transparent 60%),radial-gradient(90% 60% at 50% 110%,rgba(61,255,138,.18),transparent 60%),#07040b}
.fo-rou-maudit.fo-rou-tresor .fo-rou-rayons{background:repeating-conic-gradient(from 0deg,rgba(201,168,255,.45) 0 6deg,transparent 6deg 16deg)}
.fo-rou-maudit.fo-rou-tresor .fo-rou-montant{color:#f3e6ff}
.fo-cof-p-maudit{box-shadow:inset 0 0 0 1px rgba(176,77,255,.42);color:#ead9ff;background:linear-gradient(100deg,rgba(120,40,200,.18),rgba(0,90,40,.12))}
.fo-cof-p-maudit svg{color:#9dffc4}
@media (hover:hover){.fo-cof-p-maudit:hover{background:linear-gradient(100deg,rgba(120,40,200,.26),rgba(0,90,40,.18))}}
/* LA CAGNOTTE DE BAGGY (04/10/2026, user : « fais un design drole, clown Baggy ») : un coffre de chapiteau, planches
   rayees rouge et jaune, ferrures bleues (ses cheveux), son pavillon au gros nez rouge ; la cagnotte en grand sous le
   coffre ; une piece lancee (Baggy rit = gagne, Baggy pleure = perdu), et sa main gantee qui file avec tes pieces
   quand tu perds. */
.cof-baggy{--carte-fond:linear-gradient(100deg,#3a0d12 0%,#1d0f14 48%,#0f1d3a 100%);--anneau-bas:rgba(255,207,58,.36);--anneau:rgba(255,207,58,.9);--anneau-vif:rgba(255,90,80,1);--anneau-halo:rgba(232,50,47,.45);
  --bois-av-p:repeating-linear-gradient(90deg,#e8322f 0 9px,#ffcf3a 9px 18px);--bois-cote-p:repeating-linear-gradient(180deg,#e8322f 0 6px,#ffcf3a 6px 12px);--dessus:repeating-linear-gradient(90deg,#ff4a44 0 9px,#ffe07a 9px 18px);
  --grain:rgba(0,0,0,.06);--joint:rgba(47,111,224,.85);--dessous:#1a0608;--reflet:rgba(255,255,255,.45);
  --metal-p:linear-gradient(180deg,#e3f0ff 0%,#5aa0ff 38%,#163e8f 100%);--rivet:#fff;--fente:.8;
  --halo:rgba(255,207,58,.55);--lumiere:rgba(241,247,254,1);--lumiere-2:rgba(47,111,224,.45);--rayon:80px;
  --tresor:radial-gradient(ellipse at 50% 42%,#fff 0%,#ffe07a 30%,#e8322f 60%,#1a0608 90%);
  --tas:radial-gradient(circle at 30% 40%,#ffeedf 0 1.6px,#ffc53d 2.2px 3px,transparent 3.4px) 0 0/7px 6px,radial-gradient(ellipse at 50% 45%,#ffeedf,#ffb35e 55%,#4a1010);
  --titre-coul:#edf4fb;--unite-coul:#ffcf3a;--rang-coul:#ffcf3a;--bouton:repeating-linear-gradient(135deg,#ffcf3a 0 8px,#ffe27a 8px 16px);--bouton-txt:#3a0a0e;
  box-shadow:inset 0 0 0 1px var(--anneau-bas),0 0 26px -10px rgba(232,50,47,.6),0 12px 30px -18px #000}
.cof-baggy .c3-ga,.cof-baggy .c3-cga,.cof-baggy .c3-dr,.cof-baggy .c3-cdr{background-image:repeating-linear-gradient(180deg,#e8322f 0 6px,#ffcf3a 6px 12px)}
.cof-baggy .cof-halo{background:radial-gradient(circle at 30% 50%,rgba(255,207,58,.75),transparent 58%),radial-gradient(circle at 72% 50%,rgba(232,50,47,.7),transparent 58%)}
.cof-baggy .cof-rang{color:#ffcf3a;letter-spacing:.12em}
.cof-baggy.cof-hasard-perdu{--titre-coul:#ff8a98}
.cof-bag-pot{grid-column:1 / -1;display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;column-gap:8px;padding:6px 10px;border-radius:12px;background:repeating-linear-gradient(135deg,rgba(232,50,47,.24) 0 10px,rgba(255,207,58,.12) 10px 20px);box-shadow:inset 0 0 0 1px rgba(255,207,58,.42)}
.cof-bag-pot-ico{width:24px;height:24px;max-width:none}
.cof-bag-pot-txt{min-width:0;font-size:12px;font-weight:700;color:#ffeedf;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cof-bag-pot-val{font-size:18px;font-weight:900;font-variant-numeric:tabular-nums;color:#ffcf3a;text-shadow:0 0 10px rgba(255,213,174,.55);white-space:nowrap}
.cof-bag-vide .cof-bag-pot-val{color:#c2cad2;text-shadow:none}
.cof-baggy .cof-res{background:rgba(0,0,0,.4);box-shadow:inset 0 0 0 1px rgba(255,207,58,.2)}
.cof-baggy .cof-res-val{color:#ffcf3a}
.cof-baggy .cof-res-perte .cof-res-val{color:#ff8a98}
.fo-rou-baggy{background:radial-gradient(120% 70% at 50% -10%,rgba(255,207,58,.22),transparent 55%),repeating-conic-gradient(from 0deg at 50% -20%,rgba(232,50,47,.12) 0 9deg,rgba(255,207,58,.06) 9deg 18deg),#14070a;box-shadow:inset 0 0 0 1px rgba(255,207,58,.38),0 0 60px -10px rgba(232,50,47,.55),0 30px 80px -10px rgba(0,0,0,.95)}
.fo-rou-baggy .fo-rou-titre{color:#ffeedf}
.fo-rou-baggy .fo-rou-montant{color:#ffcf3a;text-shadow:0 0 22px rgba(255,213,174,.8)}
.fo-rou-baggy .fo-rou-hasard-res .fo-rou-rayons{background:repeating-conic-gradient(from 0deg,rgba(255,207,58,.34) 0 7deg,rgba(232,50,47,.16) 7deg 14deg,transparent 14deg 20deg)}
.fo-rou-baggy .fo-rou-medaille-res{filter:drop-shadow(0 8px 26px rgba(255,223,194,.65))}
.fo-rou-baggy .fo-rou-ok{background:repeating-linear-gradient(135deg,#ffcf3a 0 10px,#ffe27a 10px 20px);color:#3a0a0e}
.fo-rou-baggy.fo-rou-perdu .fo-rou-titre{color:#ffcf3a}
.fo-rou-baggy.fo-rou-perdu .fo-rou-eclair{background:radial-gradient(circle at 50% 45%,rgba(108,198,255,.7),rgba(20,60,140,.45) 30%,transparent 62%)}
.fo-rou-baggy.fo-rou-perdu .fo-rou-rayons{background:repeating-conic-gradient(from 0deg,rgba(108,198,255,.28) 0 7deg,transparent 7deg 20deg)}
.fo-rou-baggy.fo-rou-perdu .fo-rou-montant{color:#ff6b7d;text-shadow:0 0 18px rgba(255,40,70,.7)}
.fo-rou-baggy.fo-rou-perdu .fo-rou-medaille-res{filter:drop-shadow(0 8px 26px rgba(108,198,255,.6))}
.fo-rou-baggy.fo-rou-perdu .fo-rou-ok{background:repeating-linear-gradient(135deg,#e8322f 0 10px,#ff5a52 10px 20px);color:#fff}
.fo-bag-cagnotte{display:inline-flex;gap:6px;align-items:baseline;padding:4px 12px;border-radius:99px;background:rgba(0,0,0,.35);box-shadow:inset 0 0 0 1px rgba(255,207,58,.45);font-size:12px;font-weight:700;color:#ffeedf}
.fo-bag-cagnotte b{font-size:15px;font-weight:900;color:#ffcf3a;font-variant-numeric:tabular-nums}
.fo-bag-scene{position:relative;z-index:0;width:100%;height:230px;display:grid;place-items:end center;padding-bottom:18px;perspective:700px}
.fo-rou-baggy>.fo-rou-titre,.fo-rou-baggy>.fo-bag-cagnotte{position:relative;z-index:1}
.fo-bag-ombre{position:absolute;left:50%;bottom:12px;width:96px;height:14px;margin-left:-48px;border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.65),transparent 70%)}
.fo-bag-piece{position:relative;display:block;width:108px;height:108px;transform-style:preserve-3d;will-change:transform}
.fo-bag-face{position:absolute;inset:0;width:100%;height:100%;max-width:none;border-radius:50%;-webkit-backface-visibility:hidden;backface-visibility:hidden;box-shadow:0 6px 16px rgba(0,0,0,.5)}
.fo-bag-dos{transform:rotateY(180deg)}
.fo-bag-gant{position:absolute;left:50%;top:58px;z-index:2;width:70px;height:70px;margin-left:-35px;background:var(--gant) 50% 50%/contain no-repeat;pointer-events:none;opacity:0;animation:fo-bag-gant 1.6s cubic-bezier(.5,0,.3,1) .2s both}
@keyframes fo-bag-gant{0%{transform:translate(190px,40px) rotate(-30deg);opacity:0}25%{transform:translate(30px,10px) rotate(-10deg);opacity:1}45%{transform:translate(0,0) scale(.88)}62%{transform:translate(0,0) rotate(10deg) scale(1);opacity:1}100%{transform:translate(-230px,-130px) rotate(-25deg);opacity:0}}
.fo-res-part i.larme::before{border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:linear-gradient(135deg,#e6f6ff,#6cc6ff 55%,#1d6fc0);box-shadow:0 0 6px rgba(108,198,255,.8);animation:none}
.fo-cof-p-baggy{box-shadow:inset 0 0 0 1px rgba(255,207,58,.45);color:#ffeedf;background:repeating-linear-gradient(135deg,rgba(232,50,47,.2) 0 10px,rgba(255,207,58,.1) 10px 20px)}
.fo-cof-p-baggy svg{color:#ffcf3a}
@media (hover:hover){.fo-cof-p-baggy:hover{background:repeating-linear-gradient(135deg,rgba(232,50,47,.3) 0 10px,rgba(255,207,58,.16) 10px 20px)}}
/* LE COFFRE GAMBLING, QUITTE OU DOUBLE (08/10/2026, user : « un coffre avec une belle animation [...] quitte ou double » ;
   « respecte le style des coffres actuellement sur le site ») : la caisse des coffres hasard en habit de casino, tapis
   vert a gauche, laque noire a droite, ferrures d or, le jeton x2 / 0 sur la face ; la fenetre de mise (solde, champ,
   barre, mises rapides, les trois issues et leurs chances) ; les fins : jackpot d or, zero gris, rire violet (HA HA HA). */
.cof-gambling{--carte-fond:radial-gradient(90% 140% at 12% 50%,rgba(20,140,90,.38),transparent 62%),linear-gradient(100deg,#062a1b 0%,#0b0d10 52%,#14080a 100%);--anneau-bas:rgba(255,211,77,.32);--anneau:rgba(255,211,77,.9);--anneau-vif:rgba(255,238,223,1);--anneau-halo:rgba(20,180,110,.42);
  --bois-av-p:linear-gradient(90deg,#0f7a4c 0 50%,#121216 50% 100%);--bois-cote-p:linear-gradient(180deg,#0d6b43,#063a24);--dessus:linear-gradient(90deg,#13945d 0 50%,#1c1c22 50% 100%);
  --grain:rgba(0,0,0,.18);--joint:rgba(255,211,77,.7);--dessous:#030806;--reflet:rgba(220,255,235,.35);
  --metal-p:linear-gradient(180deg,#ffeedf 0%,#ffd34d 40%,#c77a05 100%);--rivet:#ffeedf;--fente:.85;
  --embleme:var(--logo-hasard) 50% 50%/64% no-repeat;
  --halo:rgba(255,211,77,.5);--lumiere:rgba(239,247,255,1);--lumiere-2:rgba(20,200,120,.45);--rayon:84px;
  --tresor:radial-gradient(ellipse at 50% 42%,#fff 0%,#ffe08a 30%,#13945d 62%,#03140c 90%);
  --tas:linear-gradient(90deg,transparent 0 50%,rgba(0,0,0,.55) 50%),radial-gradient(circle at 30% 40%,#ffeedf 0 1.6px,#ffc53d 2.2px 3px,transparent 3.4px) 0 0/7px 6px,radial-gradient(ellipse at 50% 45%,#ffeedf,#ffb35e 55%,#0a2a1a);
  --titre-coul:#ffeedf;--unite-coul:#7dffb8;--rang-coul:#ffd34d;--bouton:linear-gradient(180deg,#ffeedf,#fec182);--bouton-txt:#111316;
  box-shadow:inset 0 0 0 1px var(--anneau-bas),0 0 26px -10px rgba(20,200,120,.5),0 12px 30px -18px #000}
.cof-gambling .c3-ga,.cof-gambling .c3-cga{background-image:linear-gradient(180deg,#13945d,#06371f)}
.cof-gambling .c3-dr,.cof-gambling .c3-cdr{background-image:linear-gradient(180deg,#24242b,#0a0a0d)}
.cof-gambling .cof-halo{background:radial-gradient(circle at 30% 50%,rgba(255,211,77,.7),transparent 58%),radial-gradient(circle at 72% 50%,rgba(20,200,120,.6),transparent 58%)}
.cof-gambling .cof-rang{color:#ffd34d;letter-spacing:.12em}
.cof-gambling.cof-hasard-perdu{--titre-coul:#ff8a98}
.cof-gambling .cof-res{background:rgba(0,0,0,.42);box-shadow:inset 0 0 0 1px rgba(255,211,77,.2)}
.cof-gambling .cof-res-val{color:#7dffb8}
.cof-gambling .cof-res-perte .cof-res-val{color:#ff8a98}
.cof-gambling .cof-res-tresor .cof-res-val{color:#ffd34d}
.fo-rou-gambling{background:radial-gradient(120% 70% at 50% -10%,rgba(255,211,77,.2),transparent 55%),radial-gradient(90% 60% at 50% 115%,rgba(19,148,93,.28),transparent 60%),#06120c;box-shadow:inset 0 0 0 1px rgba(255,211,77,.36),0 0 60px -10px rgba(20,180,110,.5),0 30px 80px -10px rgba(0,0,0,.95)}
.fo-rou-gambling .fo-rou-titre{color:#ffeedf}
.fo-rou-gambling .fo-rou-repere{--fo-or:#ffd34d}
.fo-rou-gambling .fo-rou-hasard-res .fo-rou-rayons{background:repeating-conic-gradient(from 0deg,rgba(255,211,77,.34) 0 7deg,rgba(19,148,93,.18) 7deg 14deg,transparent 14deg 20deg)}
.fo-rou-gambling .fo-rou-montant{color:#ffe08a;text-shadow:0 0 22px rgba(255,200,80,.8)}
.fo-rou-gambling .fo-rou-ok{background:linear-gradient(180deg,#ffeedf,#fec182);color:#111316}
.fo-rou-gambling.fo-rou-perdu .fo-rou-titre{color:#c9c9d6}
.fo-rou-gambling.fo-rou-perdu .fo-rou-eclair{background:radial-gradient(circle at 50% 45%,rgba(160,160,180,.55),rgba(20,20,30,.5) 30%,transparent 62%)}
.fo-rou-gambling.fo-rou-perdu .fo-rou-rayons{background:repeating-conic-gradient(from 0deg,rgba(150,150,170,.2) 0 7deg,transparent 7deg 20deg)}
.fo-rou-gambling.fo-rou-perdu .fo-rou-montant{color:#ff6b7d;text-shadow:0 0 18px rgba(255,40,70,.7)}
.fo-rou-gambling.fo-rou-perdu .fo-rou-ok{background:linear-gradient(180deg,#4a4a52,#16161a);color:#f0f0f4}
.fo-rou-gambling.fo-gb-fen-rire{background:radial-gradient(120% 70% at 50% -10%,rgba(190,90,255,.3),transparent 55%),#0e0616;box-shadow:inset 0 0 0 1px rgba(200,140,255,.4),0 0 60px -10px rgba(150,60,230,.6),0 30px 80px -10px rgba(0,0,0,.95)}
.fo-rou-gambling.fo-gb-fen-rire .fo-rou-titre{color:#ffd34d}
.fo-rou-gambling.fo-gb-fen-rire .fo-rou-eclair{background:radial-gradient(circle at 50% 45%,rgba(220,170,255,.7),rgba(90,22,144,.45) 30%,transparent 62%)}
.fo-rou-gambling.fo-gb-fen-rire .fo-rou-rayons{background:repeating-conic-gradient(from 0deg,rgba(200,140,255,.3) 0 7deg,transparent 7deg 20deg)}
.fo-rou-gambling.fo-gb-fen-rire .fo-rou-montant{color:#ffd34d;text-shadow:0 0 18px rgba(255,200,80,.6)}
.fo-rou-gambling.fo-gb-fen-rire .fo-rou-ok{background:linear-gradient(180deg,#e3b8ff,#8a3fd6);color:#fff}
.fo-gb-rit{animation:fo-rou-gagne .65s cubic-bezier(.2,1.6,.4,1),fo-gb-rit .3s ease-in-out .65s 8 alternate;transform-origin:50% 70%}
@keyframes fo-gb-rit{from{transform:rotate(-9deg) translateY(0) scale(1)}to{transform:rotate(9deg) translateY(-6px) scale(1.06)}}
.fo-gb-haha{position:absolute;left:0;right:0;top:2px;z-index:2;display:flex;justify-content:center;gap:4px;pointer-events:none}
.fo-gb-haha b{font-size:26px;font-weight:900;line-height:1;letter-spacing:.02em;color:#ffd34d;-webkit-text-stroke:1.5px #3a0d52;text-shadow:0 3px 0 #3a0d52,0 0 16px rgba(190,90,255,.8);opacity:0;animation:fo-gb-ha .5s cubic-bezier(.2,1.8,.4,1) calc(.7s + var(--i) * .2s) both,fo-gb-ha-saute .34s ease-in-out calc(1.25s + var(--i) * .2s) 6 alternate}
.fo-gb-haha b:nth-child(even){color:#e3b8ff}
@keyframes fo-gb-ha{from{opacity:0;transform:translateY(26px) scale(.3) rotate(-20deg)}to{opacity:1;transform:none}}
@keyframes fo-gb-ha-saute{from{transform:translateY(0) rotate(-6deg)}to{transform:translateY(-8px) rotate(6deg)}}
.fo-gb-fen-mise{gap:10px;padding:18px 16px 16px;max-height:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior:contain}
.fo-gb-mise{display:grid;gap:10px;width:100%;justify-items:stretch}
.fo-gb-logo{justify-self:center;width:64px;height:64px;filter:drop-shadow(0 6px 18px rgba(255,200,80,.45));animation:fo-gb-flotte 2.6s ease-in-out infinite}
@keyframes fo-gb-flotte{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-5px) rotate(4deg)}}
.fo-gb-solde{margin:0;text-align:center;font-size:13px;color:#cfe9da}
.fo-gb-solde b{color:#ffe08a;font-variant-numeric:tabular-nums}
.fo-gb-champ{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:4px 14px;border-radius:14px;background:rgba(0,0,0,.4);box-shadow:inset 0 0 0 1.5px rgba(255,211,77,.45);cursor:text}
.fo-gb-champ:focus-within{box-shadow:inset 0 0 0 2px #ffd34d,0 0 0 3px rgba(255,211,77,.18)}
.fo-gb-champ span{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#9fd8bb}
.fo-gb-champ input{min-width:0;width:100%;height:46px;padding:0;border:0;background:transparent;color:#fff;font:inherit;font-size:28px;font-weight:900;text-align:right;font-variant-numeric:tabular-nums;outline:none}
.fo .fo-gb-champ input:focus,.fo .fo-gb-champ input:focus-visible{outline:none;box-shadow:none}
.fo-gb-champ em{font-style:normal;font-size:22px;font-weight:900;color:#ffd34d}
.fo-gb-barre{width:100%;height:28px;margin:0;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer;touch-action:pan-y}
.fo-gb-barre::-webkit-slider-runnable-track{height:6px;border-radius:99px;background:linear-gradient(90deg,#ffd34d var(--p,0%),rgba(255,255,255,.14) var(--p,0%))}
.fo-gb-barre::-moz-range-track{height:6px;border-radius:99px;background:linear-gradient(90deg,#ffd34d var(--p,0%),rgba(255,255,255,.14) var(--p,0%))}
.fo-gb-barre::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;margin-top:-9px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px #ffd34d,0 2px 8px rgba(0,0,0,.6)}
.fo-gb-barre::-moz-range-thumb{width:24px;height:24px;border:0;border-radius:50%;background:#fff;box-shadow:0 0 0 3px #ffd34d,0 2px 8px rgba(0,0,0,.6)}
.fo-gb-barre:focus-visible{outline:2px solid #ffd34d;outline-offset:2px;border-radius:8px}
.fo-gb-vite{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.fo-gb-vite button{height:44px;border:0;border-radius:10px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,211,77,.28);color:#ffeedf;font:inherit;font-size:13px;font-weight:800;cursor:pointer;font-variant-numeric:tabular-nums}
.fo-gb-vite button[aria-pressed="true"]{background:rgba(255,211,77,.2);box-shadow:inset 0 0 0 1.5px #ffd34d}
.fo-gb-vite .fo-gb-tapis{color:#ff9aa6;box-shadow:inset 0 0 0 1px rgba(255,120,140,.45)}
.fo-gb-vite button:focus-visible,.fo-gb-annuler:focus-visible{outline:2px solid #fff;outline-offset:2px}
.fo-gb-issues{display:grid;gap:4px;margin:0;padding:0;list-style:none}
.fo-gb-issues li{display:grid;grid-template-columns:26px minmax(0,1fr) auto;align-items:center;gap:8px;padding:5px 10px;border-radius:10px;background:rgba(0,0,0,.32);font-size:13px;text-align:left}
.fo-gb-issues img{width:26px;height:26px}
.fo-gb-issues b{min-width:0;font-weight:800;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fo-gb-issues i{min-width:64px;font-style:normal;font-weight:900;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.fo-gb-i-double i{color:#7dffb8}
.fo-gb-i-zero i{color:#ff8a98}
.fo-gb-i-rire i{color:#e3b8ff}
.fo-gb-err{margin:0;font-size:13px;font-weight:700;color:#ff9aa6;text-align:center}
.fo-gb-actions{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;align-items:center}
.fo-gb-annuler{height:44px;padding:0 16px;border:0;border-radius:99px;background:rgba(255,255,255,.08);color:#d8e8df;font:inherit;font-weight:700;cursor:pointer}
.fo-gb-miser{margin:0;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fo-gb-enjeu{font-size:13px;color:#cfe9da}
.fo-gb-enjeu b{color:#ffe08a;font-variant-numeric:tabular-nums}
.fo-cof-p-gambling{box-shadow:inset 0 0 0 1px rgba(255,211,77,.42);color:#ffeedf;background:linear-gradient(100deg,rgba(19,148,93,.24),rgba(10,10,14,.4))}
.fo-cof-p-gambling svg{color:#ffd34d}
@media (hover:hover){.fo-cof-p-gambling:hover{background:linear-gradient(100deg,rgba(19,148,93,.34),rgba(10,10,14,.5))}.fo-gb-vite button:hover{background:rgba(255,211,77,.14)}}
@media (prefers-reduced-motion:reduce){.fo-gb-logo,.fo-gb-rit,.fo-gb-haha b{animation:none}.fo-gb-haha b{opacity:1}}
/* LE COFFRE DES FLAMMES (19/10/2026, user : « un coffre qui donne 1000 berry par flamme dans le forum ») : la caisse des
   coffres hasard en habit de braise (bois brule, ferrures d or, la flamme x1000 sur la face) ; la fenetre : les flammes
   de la serie qui s allument une a une, le gain qui monte, puis la grande flamme et la pluie de pieces ; sans flamme,
   la flamme eteinte et l explication. */
.cof-flamme{--carte-fond:radial-gradient(90% 140% at 12% 50%,rgba(255,110,30,.38),transparent 62%),linear-gradient(100deg,#2c0c03 0%,#0d0907 55%,#160805 100%);--anneau-bas:rgba(255,160,60,.34);--anneau:rgba(255,190,80,.92);--anneau-vif:rgba(255,240,205,1);--anneau-halo:rgba(255,90,20,.45);
  --bois-av-p:linear-gradient(180deg,#5a1a07,#2a0c04);--bois-cote-p:linear-gradient(180deg,#4a1406,#220903);--dessus:linear-gradient(180deg,#7a2508,#3a1004);
  --grain:rgba(0,0,0,.2);--joint:rgba(255,190,80,.7);--dessous:#0a0302;--reflet:rgba(255,226,190,.32);
  --metal-p:linear-gradient(180deg,#fff1cf 0%,#ffc640 40%,#b8560a 100%);--rivet:#fff1cf;--fente:.85;
  --embleme:var(--logo-hasard) 50% 50%/64% no-repeat;
  --halo:rgba(255,140,40,.55);--lumiere:rgba(255,245,225,1);--lumiere-2:rgba(255,80,20,.45);--rayon:84px;
  --tresor:radial-gradient(ellipse at 50% 42%,#fff 0%,#ffd84a 30%,#ff5a1f 62%,#1a0603 90%);
  --tas:radial-gradient(circle at 30% 40%,#fff1cf 0 1.6px,#ffc53d 2.2px 3px,transparent 3.4px) 0 0/7px 6px,radial-gradient(ellipse at 50% 45%,#fff1cf,#ff9a3a 55%,#2a0c04);
  --titre-coul:#fff1dc;--unite-coul:#ffd479;--rang-coul:#ffb15a;--bouton:linear-gradient(180deg,#fff1cf,#ffb15a);--bouton-txt:#1a0b05;
  box-shadow:inset 0 0 0 1px var(--anneau-bas),0 0 26px -10px rgba(255,110,30,.55),0 12px 30px -18px #000}
.cof-flamme .cof-halo{background:radial-gradient(circle at 50% 60%,rgba(255,170,60,.75),transparent 58%),radial-gradient(circle at 50% 30%,rgba(255,80,20,.5),transparent 60%)}
.cof-flamme .cof-rang{color:#ffb15a;letter-spacing:.12em}
.cof-flamme .cof-res{background:rgba(0,0,0,.42);box-shadow:inset 0 0 0 1px rgba(255,170,60,.22)}
.cof-flamme .cof-res-val{color:#ffd479}
.fo-rou-flamme{background:radial-gradient(120% 70% at 50% -10%,rgba(255,150,50,.22),transparent 55%),radial-gradient(90% 60% at 50% 115%,rgba(255,70,20,.3),transparent 60%),#120604;box-shadow:inset 0 0 0 1px rgba(255,170,60,.42),0 0 60px -10px rgba(255,90,20,.55)}
.fo-rou-flamme .fo-rou-titre{color:#fff1dc}
.fo-rou-flamme .fo-rou-hasard-res .fo-rou-rayons{background:repeating-conic-gradient(from 0deg,rgba(255,190,80,.34) 0 7deg,rgba(255,80,20,.2) 7deg 14deg,transparent 14deg 20deg)}
.fo-rou-flamme .fo-rou-montant{color:#ffe08a;text-shadow:0 0 22px rgba(255,140,40,.85)}
.fo-rou-flamme .fo-rou-ok{background:linear-gradient(180deg,#fff1cf,#ffb15a);color:#1a0b05}
.fo-rou-flamme.fo-fl-fen-eteinte{background:radial-gradient(120% 70% at 50% -10%,rgba(150,150,170,.16),transparent 55%),#0d0d10;box-shadow:inset 0 0 0 1px rgba(160,160,180,.3)}
.fo-rou-flamme.fo-fl-fen-eteinte .fo-rou-montant{color:#d6d6e0;text-shadow:none}
.fo-rou-flamme.fo-fl-fen-eteinte .fo-rou-eclair{background:radial-gradient(circle at 50% 45%,rgba(160,160,180,.45),rgba(20,20,30,.5) 30%,transparent 62%)}
.fo-rou-flamme.fo-fl-fen-eteinte .fo-rou-titre{color:#d6d6e0}
.fo-rou-flamme.fo-fl-fen-eteinte .fo-rou-ok{background:linear-gradient(180deg,#e9e9f0,#9a9aa8);color:#111316}
.fo-fl-allumage{display:grid;justify-items:center;gap:14px;padding:6px 0 4px}
.fo-fl-rangee{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;max-width:300px;min-height:34px}
.fo-fl-petite{width:26px;height:26px;opacity:.16;filter:grayscale(1) brightness(.6);transform:scale(.7);transition:opacity .18s ease,transform .22s cubic-bezier(.3,1.6,.5,1),filter .18s ease}
.fo-fl-petite.fo-fl-on{opacity:1;filter:drop-shadow(0 0 6px rgba(255,140,40,.9));transform:scale(1);animation:fo-fl-danse 1.1s ease-in-out infinite alternate}
@keyframes fo-fl-danse{from{transform:scale(1) translateY(0)}to{transform:scale(1.06) translateY(-1px)}}
.fo-fl-compteur{display:grid;justify-items:center;gap:2px;margin:0}
.fo-fl-compteur b{font-size:15px;font-weight:800;color:#ffb15a;font-variant-numeric:tabular-nums}
.fo-fl-compteur span{font-size:32px;font-weight:900;color:#ffe08a;text-shadow:0 0 20px rgba(255,140,40,.8);font-variant-numeric:tabular-nums}
.fo-fl-grande{filter:drop-shadow(0 0 18px rgba(255,120,30,.9))}
.fo-res-part i.fo-fl-braise::before{border-radius:50% 50% 50% 0;background:radial-gradient(circle at 40% 40%,#fff1cf,#ff9a3a 55%,#ff3d1f);box-shadow:0 0 8px rgba(255,110,30,.9)}
.fo-cof-p-flamme{box-shadow:inset 0 0 0 1px rgba(255,170,60,.45);color:#fff1dc;background:linear-gradient(100deg,rgba(255,90,20,.26),rgba(10,10,14,.4))}
.fo-cof-p-flamme svg{color:#ffb15a}
@media (hover:hover){.fo-cof-p-flamme:hover{background:linear-gradient(100deg,rgba(255,90,20,.36),rgba(10,10,14,.5))}}
@media (prefers-reduced-motion:reduce){.fo-fl-petite,.fo-fl-petite.fo-fl-on{animation:none;transition:none}}
/* LE COFFRE « RAT OU DÉRATISEUR » (05/10/2026) : la pierre verte de l'égout à gauche, le bois et le fromage du piège du
   dératiseur à droite ; le jaune fromage pour ce qui gagne, le rouge pour le rat qui file avec la bourse. */
/* LA CARTE ENTIÈRE AU VERT POILU (05/10/2026, user : « adapte le design global au coffre, le Tenter… ») : fond mousse,
   anneau et halo verts, bouton « Tenter » vert mousse (lisible : sans fourrure) ; l'or ne reste que pour les Berrys gagnés. */
.cof-rat{--carte-fond:radial-gradient(120% 90% at 14% 50%,#2a4a1c 0%,transparent 60%),linear-gradient(100deg,#172812 0%,#0c160a 55%,#14240f 100%);
  --anneau-bas:rgba(132,184,88,.38);--anneau:rgba(160,210,110,.85);--anneau-vif:rgba(184,232,120,.95);--anneau-halo:rgba(110,170,70,.5);
  --grain:transparent;--joint:rgba(16,26,10,.7);--dessous:#0d1409;--reflet:rgba(214,240,180,.3);
  --metal-p:linear-gradient(180deg,#fffbe6 0%,#ffd34d 38%,#686b6e 100%);--rivet:#ffeedf;--fente:.9;
  --halo:rgba(140,200,90,.5);--lumiere:rgba(236,255,200,1);--lumiere-2:rgba(140,210,80,.45);--rayon:84px;
  --tresor:radial-gradient(ellipse at 50% 42%,#fff 0%,#e6ffb8 28%,#6f9a4a 58%,#070c05 90%);
  --tas:radial-gradient(circle at 30% 40%,#fff8d6 0 1.6px,#ffcf4a 2.2px 3px,transparent 3.4px) 0 0/7px 6px,radial-gradient(ellipse at 50% 45%,#ffe9a0,#5f7a2a 55%,#060a04);
  --titre-coul:#eef7e2;--unite-coul:#b8e878;--rang-coul:#a8d672;--bouton:linear-gradient(180deg,#c4ec8c 0%,#86ba52 55%,#5a8a34 100%);--bouton-txt:#0c1707;
  box-shadow:inset 0 0 0 1px var(--anneau-bas),0 0 28px -8px rgba(110,170,70,.6),0 12px 30px -18px #000}
.cof-rat .c3{--bois-av:var(--fourrure),linear-gradient(180deg,#5f8541 0%,#3d5a28 55%,#27391a 100%);--bois-cote:var(--fourrure),linear-gradient(180deg,#4b6a33,#22321a);
  --grain:transparent;--joint:rgba(16,26,10,.7);--dessous:#0d1409;--embleme:none}
.cof-rat .c3-ga,.cof-rat .c3-cga,.cof-rat .c3-dr,.cof-rat .c3-cdr{background-image:var(--fourrure),linear-gradient(180deg,#4b6a33,#22321a)}
.cof-rat .c3-chaut{background-image:var(--fourrure),linear-gradient(180deg,#6d9a4b 0%,#4a6b31 100%)}
.cof-rat .c3-av::before,.cof-rat .c3-av::after,.cof-rat .c3-av>em,.cof-rat .c3-ga::before,.cof-rat .c3-dr::before,.cof-rat .c3-chaut::before,.cof-rat .c3-cav::before{display:none}
.cof-rat .c3-av>b{inset:0 -9px -6px;background:var(--tete-rat) 50% 50%/contain no-repeat;filter:drop-shadow(0 2px 2px rgba(0,0,0,.55))}
.cof-rat .cof-halo{background:radial-gradient(circle at 50% 50%,rgba(130,180,90,.75),transparent 62%)}
.cof-rat .cof-rang{color:#a8d672;letter-spacing:.12em}
.cof-rat.cof-hasard-perdu{--titre-coul:#ff9aa8}
.cof-rat .cof-res{background:rgba(4,10,3,.5);box-shadow:inset 0 0 0 1px rgba(132,184,88,.24)}
.cof-rat .cof-ouvrir{text-shadow:0 1px 0 rgba(220,255,180,.5);box-shadow:inset 0 0 0 1.5px rgba(20,40,10,.55),0 6px 18px -6px rgba(140,210,80,.75)}
.cof-rat .cof-res-val{color:#ffd34d}
.cof-rat .cof-res-perte .cof-res-val{color:#ff9aa8}
.fo-rou-rat{background:radial-gradient(120% 70% at 50% -10%,rgba(120,180,80,.3),transparent 60%),#0a1207;box-shadow:inset 0 0 0 1px rgba(132,184,88,.4),0 0 60px -10px rgba(110,170,70,.55),0 30px 80px -10px rgba(0,0,0,.95)}
.fo-rou-rat .fo-rou-titre{color:#eef3e2}
.fo-rou-rat .fo-rou-repere{--fo-or:#ffd34d}
.fo-rou-rat .fo-rou-hasard-res .fo-rou-rayons{background:repeating-conic-gradient(from 0deg,rgba(255,211,77,.3) 0 7deg,transparent 7deg 20deg)}
.fo-rou-rat .fo-rou-montant{color:#ffe08a;text-shadow:0 0 22px rgba(255,211,77,.75)}
.fo-rou-rat .fo-rou-medaille-res{filter:drop-shadow(0 8px 26px rgba(130,200,80,.6))}
.fo-rou-rat .fo-rou-ok{background:linear-gradient(180deg,#b6e27e 0%,#79ad48 55%,#4d7a2c 100%);color:#0c1707}
.fo-rou-rat.fo-rou-perdu .fo-rou-titre{color:#ffb3bd}
.fo-rou-rat.fo-rou-perdu .fo-rou-montant{color:#ff9aa8;text-shadow:0 0 22px rgba(255,80,100,.7)}
.fo-rou-rat.fo-rou-perdu .fo-rou-ok{background:linear-gradient(180deg,#ffb3bd,#c4344a);color:#14060a}
.fo-cof-p-rat{box-shadow:inset 0 0 0 1px rgba(170,185,150,.42);color:#eef3e2;background:linear-gradient(100deg,rgba(110,140,80,.2),rgba(254,157,8,.12))}
.fo-cof-p-rat svg{color:#ffd34d}
@media (hover:hover){.fo-cof-p-rat:hover{background:linear-gradient(100deg,rgba(110,140,80,.28),rgba(254,157,8,.18))}}
/* LE COFFRE UNO (08/10/2026) : la carte passe du noir-rouge qui mord (à gauche) au rose kawaii (à droite), comme le
   coffre ; la scène est plus grande que les autres (Nami et Robin « en grand ») et le bouton Tenter passe sous le texte. */
.cof-uno{--carte-fond:radial-gradient(90% 120% at 12% 50%,#4a0912 0%,transparent 60%),linear-gradient(100deg,#0c0206 0%,#1e0610 42%,#5a1230 74%,#a8204e 100%);
  --anneau-bas:rgba(255,90,130,.36);--anneau:rgba(255,120,160,.85);--anneau-vif:rgba(255,170,200,1);--anneau-halo:rgba(255,40,80,.45);
  --halo:rgba(255,60,100,.5);--lumiere:rgba(255,220,235,1);--lumiere-2:rgba(255,80,120,.45);
  --titre-coul:#fff0f5;--unite-coul:#ffb3c8;--rang-coul:#ff8fb0;--bouton:linear-gradient(180deg,#ffb3c8 0%,#f23a5c 55%,#a8102e 100%);--bouton-txt:#fff;
  box-shadow:inset 0 0 0 1px var(--anneau-bas),0 0 28px -8px rgba(255,60,100,.55),0 12px 30px -18px #000}
.cof-uno.cof-petit{grid-template-columns:112px minmax(0,1fr) auto}
.cof-uno.cof-petit .cof-scene{width:112px;height:96px;grid-row:1 / 3}
.cof-uno.cof-petit .cof-texte{grid-column:2 / 4}
.cof-uno.cof-petit .cof-ouvrir{grid-column:2 / 4;grid-row:2;justify-self:start;margin:0}
.cof-uno .cof-halo{width:100px;height:70px;background:radial-gradient(circle at 34% 55%,rgba(255,30,60,.55),transparent 60%),radial-gradient(circle at 70% 50%,rgba(255,150,190,.6),transparent 60%)}
.cof-uno .cof-rang{color:#ff8fb0;letter-spacing:.12em}
.cof-uno.cof-hasard-perdu{--titre-coul:#ff9aa8}
.cof-uno .cof-res{background:rgba(10,2,6,.5);box-shadow:inset 0 0 0 1px rgba(255,120,160,.22)}
.cof-uno .cof-ouvrir{text-shadow:0 1px 0 rgba(120,0,30,.5);box-shadow:inset 0 0 0 1.5px rgba(80,0,20,.5),0 6px 18px -6px rgba(255,80,120,.8)}
.cof-uno .cof-res-val{color:#ffc2d4}
.cof-uno .cof-res-perte .cof-res-val{color:#ff6a7a}
.cof-uno .cof-res-tresor .cof-res-val{color:#ffd34d}
.cof-uno-sc{position:absolute;inset:0;pointer-events:none}
.cof-uno-sc img{position:absolute;display:block;max-width:none;-webkit-user-select:none;user-select:none}
.cof-uno-r{height:52%;left:44%;top:0}
.cof-uno-c{width:76%;left:0;bottom:0}
.cof-uno-n{height:82%;right:-3%;bottom:-2%}
.cof-uno.cof-tremble .cof-uno-sc{animation:c3-tremble 110ms linear infinite}
.fo-rou-uno{background:radial-gradient(120% 70% at 50% -10%,rgba(255,80,130,.32),transparent 60%),linear-gradient(100deg,#0c0206 0%,#1a0510 50%,#3a0a22 100%);box-shadow:inset 0 0 0 1px rgba(255,120,160,.42),0 0 60px -10px rgba(255,60,100,.55),0 30px 80px -10px rgba(0,0,0,.95)}
.fo-rou-uno .fo-rou-titre{color:#fff0f5}
.fo-rou-uno .fo-rou-repere{--fo-or:#ff8fb0}
.fo-rou-uno .fo-rou-hasard-res .fo-rou-rayons{background:repeating-conic-gradient(from 0deg,rgba(255,143,176,.3) 0 7deg,transparent 7deg 20deg)}
.fo-rou-uno .fo-rou-montant{color:#ffd0dc;text-shadow:0 0 22px rgba(255,120,160,.75)}
.fo-rou-uno .fo-rou-medaille-res{filter:drop-shadow(0 8px 26px rgba(255,80,130,.6))}
.fo-rou-uno .fo-rou-ok{background:linear-gradient(180deg,#ffb3c8 0%,#f23a5c 55%,#a8102e 100%);color:#fff}
.fo-rou-uno.fo-rou-perdu .fo-rou-titre{color:#ff9aa8}
.fo-rou-uno.fo-rou-perdu .fo-rou-montant{color:#ff4a5a;text-shadow:0 0 22px rgba(255,30,50,.7)}
.fo-rou-uno.fo-rou-perdu .fo-rou-ok{background:linear-gradient(180deg,#4a4a52,#16161a);color:#ffd0d4}
.fo-rou-uno.fo-rou-tresor .fo-rou-montant{color:#ffe08a;text-shadow:0 0 22px rgba(255,211,77,.8)}
.fo-rou-uno.fo-rou-puant .fo-rou-titre{color:#c8d05a}
.fo-rou-uno.fo-rou-puant .fo-rou-montant{color:#b8c23a;text-shadow:0 0 22px rgba(140,160,40,.7)}
.fo-rou-uno.fo-rou-puant .fo-rou-ok{background:linear-gradient(180deg,#a8b03a,#5a5a18);color:#14140a}
/* le badge d'une heure, EN GROS (user, 08/10/2026) : « pendant 1 heure », puis l'heure du retour du badge d'origine */
.fo-rou-uno-heure{position:relative;display:grid;gap:2px;justify-items:center;margin:6px 0 2px;padding:8px 14px;border-radius:12px;background:rgba(255,211,77,.12);box-shadow:inset 0 0 0 1.5px rgba(255,211,77,.65)}
.fo-rou-uno-heure b{font-size:22px;line-height:1.05;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:#ffe08a;text-shadow:0 0 18px rgba(255,211,77,.6)}
.fo-rou-uno-heure small{font-size:13px;font-weight:700;color:#fff0f5}
.fo-rou-uno.fo-rou-puant .fo-rou-uno-heure{background:rgba(168,176,58,.14);box-shadow:inset 0 0 0 1.5px rgba(184,194,58,.7)}
.fo-rou-uno.fo-rou-puant .fo-rou-uno-heure b{color:#d8e07a;text-shadow:0 0 18px rgba(160,180,50,.6)}
.fo-dist-uno{background:linear-gradient(100deg,rgba(20,4,10,.6),rgba(242,58,92,.22));box-shadow:inset 0 0 0 1px rgba(255,120,160,.42)}
.fo-dist-uno svg{color:#ff6f96}
/* LE COFFRE UNO ANIMÉ (08/10/2026, user : « met des animations dans le coffre ») : Nami se balance, Robin dépasse du
   couvercle par à-coups, le coffre saute en s'ouvrant (le reste bouge dans le dessin lui-même). */
.cof-uno-n{transform-origin:30% 92%;animation:uno-nami 2.8s ease-in-out infinite}
@keyframes uno-nami{0%,100%{transform:rotate(0)}50%{transform:rotate(-3deg) translateY(-1.5px)}}
.cof-uno-r{animation:uno-robin 3.6s ease-in-out infinite}
@keyframes uno-robin{0%,60%,100%{transform:translateY(0)}70%{transform:translateY(-4px)}80%{transform:translateY(-1px)}88%{transform:translateY(-3px)}}
.cof-uno.cof-ouvert .cof-uno-c{animation:uno-ouvre .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes uno-ouvre{from{transform:scale(.88)}to{transform:none}}
/* LES FINS ANIMÉES (08/10/2026) : un fond derrière le texte (rayons, faisceaux) et un plan devant (crocs, nuages,
   plumes, couronne), collés au cadre de la fenêtre (fixe dans un parent transformé = la fenêtre), jamais sous le doigt. */
.uno-fx{position:fixed;inset:0;overflow:hidden;border-radius:22px;pointer-events:none}
.uno-fx-fond{z-index:0}
.uno-fx-avant{z-index:2}
.uno-fx i,.uno-fx b{position:absolute;display:block}
/* −1 111 : la gueule du coffre se referme sur la fenêtre, le noir rouge pulse, la fenêtre tremble */
.fo-rou-uno.fo-rou-effroi{animation:fo-rou-secousse .55s cubic-bezier(.3,.7,.4,1) .45s both}
.fo-rou-effroi .fo-rou-titre{animation:uno-tremble-txt .1s steps(2) 8}
@keyframes uno-tremble-txt{0%{transform:translateX(-2px)}100%{transform:translateX(2px)}}
.uno-effroi .uno-noir{inset:0;background:radial-gradient(circle at 50% 40%,transparent 24%,rgba(110,0,12,.55) 60%,rgba(0,0,0,.92) 100%);animation:uno-noir 2.6s ease-out both}
@keyframes uno-noir{0%{opacity:0}10%{opacity:1}16%{opacity:.35}22%{opacity:1}30%{opacity:.6}100%{opacity:.8}}
.uno-crocs{left:-8%;width:116%;height:30%;background-repeat:repeat-x;background-size:auto 100%;filter:drop-shadow(0 4px 6px rgba(0,0,0,.6))}
.uno-crocs-h{top:0;animation:uno-crocs-h 2.4s cubic-bezier(.7,0,.25,1) both}
.uno-crocs-b{bottom:0;animation:uno-crocs-b 2.4s cubic-bezier(.7,0,.25,1) both}
@keyframes uno-crocs-h{0%{transform:translateY(-105%)}24%{transform:translateY(64%)}34%{transform:translateY(54%)}44%{transform:translateY(64%)}54%{transform:translateY(56%)}64%{transform:translateY(64%)}100%{transform:translateY(-86%)}}
@keyframes uno-crocs-b{0%{transform:translateY(105%) scaleY(-1)}24%{transform:translateY(-64%) scaleY(-1)}34%{transform:translateY(-54%) scaleY(-1)}44%{transform:translateY(-64%) scaleY(-1)}54%{transform:translateY(-56%) scaleY(-1)}64%{transform:translateY(-64%) scaleY(-1)}100%{transform:translateY(86%) scaleY(-1)}}
/* le puant 1 : un GROS pet, la fenêtre se tortille, les nuages verts gonflent et l'envahissent */
.fo-rou-uno.fo-rou-pet{animation:uno-pet-tremble .8s ease-in-out .15s 2}
@keyframes uno-pet-tremble{0%,100%{transform:translate(-50%,-50%)}20%{transform:translate(-50%,-50%) scale(1.05,.95)}40%{transform:translate(calc(-50% + 4px),-50%) scale(.96,1.04)}60%{transform:translate(calc(-50% - 4px),-50%) scale(1.04,.96)}80%{transform:translate(-50%,-50%) scale(.98,1.02)}}
.uno-pet .uno-brume{inset:0;background:radial-gradient(circle at 30% 85%,rgba(170,190,50,.62),rgba(120,140,30,.36) 45%,rgba(90,100,20,.16) 80%);animation:uno-brume 3s ease-out both}
@keyframes uno-brume{0%{opacity:0}30%{opacity:1}100%{opacity:.8}}
.uno-nuage{width:62%;aspect-ratio:160/110;background-size:contain;background-repeat:no-repeat;opacity:0;animation:uno-nuage 2.6s cubic-bezier(.2,.8,.3,1) both}
.uno-nuage-0{left:-14%;bottom:-8%;animation-delay:.05s;--fuite:-40px}
.uno-nuage-1{left:18%;bottom:-16%;width:74%;animation-delay:.2s;--fuite:0px}
.uno-nuage-2{right:-18%;bottom:6%;animation-delay:.35s;--fuite:50px}
.uno-nuage-3{left:-20%;top:30%;width:54%;animation-delay:.5s;--fuite:-50px}
.uno-nuage-4{right:-12%;top:12%;width:50%;animation-delay:.65s;--fuite:50px}
@keyframes uno-nuage{0%{transform:scale(.2) translateY(30px);opacity:0}25%{opacity:.95}60%{transform:scale(1.15) translateY(-10px);opacity:.85}100%{transform:scale(1.25) translateY(-10px) translateX(var(--fuite,0));opacity:.22}}
.uno-prout{left:50%;top:58%;font-size:40px;line-height:1;font-weight:900;letter-spacing:.04em;white-space:nowrap;color:#e2ec5a;-webkit-text-stroke:2px #3a4008;text-shadow:0 4px 0 #3a4008,0 0 24px rgba(160,190,40,.8);animation:uno-prout 1.7s cubic-bezier(.2,1.6,.4,1) .2s both}
@keyframes uno-prout{0%{transform:translate(-50%,-50%) rotate(-10deg) scale(.2);opacity:0}40%{transform:translate(-50%,-50%) rotate(-6deg) scale(1.25);opacity:1}70%{transform:translate(-50%,-50%) rotate(-12deg) scale(1);opacity:1}100%{transform:translate(-50%,-62%) rotate(-10deg) scale(1);opacity:0}}
/* +1 111 : angélique — des faisceaux de lumière, une auréole qui descend, des plumes qui tombent en se balançant */
.fo-rou-uno.fo-rou-ange{box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),0 0 80px -6px rgba(243,248,255,.8),0 30px 80px -10px rgba(0,0,0,.9)}
.uno-ange .uno-faisceaux{left:-20%;right:-20%;top:-10%;height:90%;transform-origin:50% 0;background:repeating-linear-gradient(100deg,rgba(255,255,255,0) 0 18px,rgba(255,250,225,.34) 18px 34px);-webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 85%);mask-image:linear-gradient(180deg,#000 0%,transparent 85%);animation:uno-faisceaux 4s ease-in-out infinite}
@keyframes uno-faisceaux{0%,100%{opacity:.55;transform:skewX(-4deg)}50%{opacity:1;transform:skewX(4deg)}}
.uno-ange .uno-aureole{left:50%;top:var(--uno-aureole,60px);width:88px;height:20px;margin-left:-44px;border-radius:50%;border:4px solid #ffeedf;box-shadow:0 0 16px 4px rgba(255,238,223,.9),inset 0 0 8px rgba(255,238,223,.9);animation:uno-aureole 1.4s cubic-bezier(.2,1.4,.4,1) .2s both,uno-flotte 2.4s ease-in-out 1.6s infinite}
@keyframes uno-aureole{0%{transform:translateY(-60px) scale(.4);opacity:0}100%{transform:none;opacity:1}}
@keyframes uno-flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.uno-plume{top:-12%;width:18px;height:48px;background-size:contain;background-repeat:no-repeat;opacity:0;animation:uno-plume 4.2s linear infinite}
@keyframes uno-plume{0%{transform:translate(0,0) rotate(var(--r,20deg));opacity:0}10%{opacity:.95}50%{transform:translate(18px,280px) rotate(calc(var(--r,20deg) * -1))}100%{transform:translate(-10px,620px) rotate(var(--r,20deg));opacity:0}}
/* le roi 1 : divin — un éclat blanc, une gloire d'or qui tourne, la couronne qui descend sur le médaillon, des étoiles */
.fo-rou-uno.fo-rou-divin{animation:uno-divin-lueur 2.4s ease-in-out infinite}
@keyframes uno-divin-lueur{0%,100%{box-shadow:inset 0 0 0 1px rgba(255,211,77,.6),0 0 60px -6px rgba(255,211,77,.6),0 30px 80px -10px rgba(0,0,0,.9)}50%{box-shadow:inset 0 0 0 2px rgba(255,230,140,.95),0 0 110px 0 rgba(255,211,77,.9),0 30px 80px -10px rgba(0,0,0,.9)}}
.uno-divin .uno-gloire{left:50%;top:var(--uno-centre,130px);width:760px;height:760px;margin:-380px 0 0 -380px;background:repeating-conic-gradient(from 0deg,rgba(255,226,120,.55) 0 6deg,transparent 6deg 18deg);-webkit-mask-image:radial-gradient(circle,#000 0 20%,transparent 62%);mask-image:radial-gradient(circle,#000 0 20%,transparent 62%);animation:uno-gloire 9s linear infinite,uno-apparait .8s ease-out both}
@keyframes uno-gloire{to{transform:rotate(360deg)}}
@keyframes uno-apparait{from{opacity:0}to{opacity:1}}
.uno-divin .uno-flash{inset:0;background:radial-gradient(circle at 50% 30%,#fff 0%,rgba(255,238,223,.9) 30%,rgba(255,211,77,0) 70%);animation:uno-flash 1.1s ease-out both}
@keyframes uno-flash{0%{opacity:1}100%{opacity:0}}
.uno-divin .uno-couronne{left:50%;top:var(--uno-couronne,40px);width:80px;height:64px;margin-left:-40px;background-size:contain;background-repeat:no-repeat;filter:drop-shadow(0 0 14px rgba(255,220,100,.9));animation:uno-couronne 1.6s cubic-bezier(.25,1.3,.4,1) .3s both,uno-flotte 2.2s ease-in-out 1.9s infinite}
@keyframes uno-couronne{0%{transform:translateY(-140px) scale(1.6) rotate(-12deg);opacity:0}60%{opacity:1}100%{transform:none;opacity:1}}
.uno-etoile{width:14px;height:14px;background:radial-gradient(circle,#fff 0 18%,rgba(255,230,140,.9) 30%,transparent 62%);clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);opacity:0;animation:uno-etoile 1.8s ease-in-out infinite}
@keyframes uno-etoile{0%,100%{transform:scale(.2);opacity:0}50%{transform:scale(1.3);opacity:1}}
/* LE CHOIX DU BADGE (08/10/2026, user : « laisse un choix à la fin pour avoir le badge roi (oui ou non) … et pour le
   badge puant pareil, sauf que si tu dis que tu veux pas le badge ça fait une animation de refus en pétant ») */
.fo-rou-uno-choix{display:grid;gap:8px;justify-items:center;margin-top:10px;width:100%}
.fo-rou-uno-choix small{font-size:15px;font-weight:800;color:#fff0f5}
.fo-rou-uno-choix-l{display:flex;gap:10px;justify-content:center;width:100%}
.fo-rou-uno-oui,.fo-rou-uno-non{min-height:44px;min-width:108px;padding:0 18px;border:0;border-radius:999px;font:inherit;font-size:16px;font-weight:900;cursor:pointer;touch-action:manipulation}
.fo-rou-uno-oui{background:linear-gradient(180deg,#ffe08a,#ffc080);color:#191b1d}
.fo-rou-uno-non{background:rgba(255,255,255,.1);color:#fff0f5;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45)}
.fo-rou-uno.fo-rou-puant .fo-rou-uno-oui{background:linear-gradient(180deg,#c8d05a,#6a6a1c);color:#14140a}
.fo-rou-uno-oui:focus-visible,.fo-rou-uno-non:focus-visible{outline:3px solid #fff;outline-offset:2px}
.fo-rou-uno-oui:disabled,.fo-rou-uno-non:disabled{opacity:.6;cursor:default}
.fo-rou-uno-heure.fo-rou-uno-rendu{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4)}
.fo-rou-uno-heure.fo-rou-uno-rendu b{color:#fff0f5;text-shadow:none}
/* LA PHOTO AVEC LE BADGE (08/10/2026, user : « montre les badges quand ils gagnent ou perdent 1111 ») : à la place du
   médaillon, ma photo qui porte le badge de l'heure (lames animées dès 56 px), le médaillon en pastille dans le coin */
.fo-rou-uno-photo{position:relative;z-index:1;display:grid;place-items:center;width:112px;height:112px;animation:fo-rou-gagne .65s cubic-bezier(.2,1.6,.4,1)}
.fo-rou-uno-photo.fo-rou-chute{animation:fo-rou-chute .5s cubic-bezier(.6,0,.9,.4)}
.fo-rou-uno-photo .fo-couronne{margin:0}
.fo-rou-uno-pastille{position:absolute;right:-16px;bottom:-12px;z-index:3;width:46px;height:46px;filter:drop-shadow(0 3px 8px rgba(0,0,0,.6))}
/* « Non » au puant 1 : la fenêtre se tortille plus fort, un nuage vert monte de partout, PROUUUT et le tampon REFUSÉ ! */
.fo-rou-uno.fo-rou-refus-pet{animation:uno-refus-tremble .45s ease-in-out .1s 3}
@keyframes uno-refus-tremble{0%,100%{transform:translate(-50%,-50%)}20%{transform:translate(-50%,-50%) scale(1.08,.92)}40%{transform:translate(calc(-50% + 7px),-50%) scale(.94,1.06) rotate(1.5deg)}60%{transform:translate(calc(-50% - 7px),-50%) scale(1.06,.94) rotate(-1.5deg)}80%{transform:translate(-50%,-50%) scale(.97,1.03)}}
.uno-refus .uno-brume{inset:0;background:radial-gradient(circle at 50% 100%,rgba(170,190,50,.72),rgba(120,140,30,.42) 50%,rgba(90,100,20,.2) 85%);animation:uno-brume 3s ease-out both}
.uno-refus-nuage-0{left:-16%;bottom:-12%;animation-delay:0s;--fuite:-50px}
.uno-refus-nuage-1{left:14%;bottom:-20%;width:80%;animation-delay:.1s;--fuite:0px}
.uno-refus-nuage-2{right:-20%;bottom:-6%;animation-delay:.2s;--fuite:60px}
.uno-refus-nuage-3{left:-22%;top:40%;width:58%;animation-delay:.3s;--fuite:-60px}
.uno-refus-nuage-4{right:-16%;top:30%;width:56%;animation-delay:.4s;--fuite:60px}
.uno-refus-nuage-5{left:20%;top:-10%;width:60%;animation-delay:.5s;--fuite:0px}
.uno-refus .uno-refus-prout{top:72%}
.uno-refus-tampon{left:50%;top:32%;transform:translate(-50%,-50%) rotate(-12deg);padding:4px 14px;font-size:38px;line-height:1;font-weight:900;letter-spacing:.06em;white-space:nowrap;color:#ff4d5e;border:4px solid #ff4d5e;border-radius:10px;background:rgba(20,20,8,.55);text-shadow:0 2px 0 #3a0008;animation:uno-tampon .9s cubic-bezier(.2,1.6,.4,1) .35s both}
@keyframes uno-tampon{0%{transform:translate(-50%,-50%) rotate(-24deg) scale(2.6);opacity:0}60%{transform:translate(-50%,-50%) rotate(-12deg) scale(.92);opacity:1}100%{transform:translate(-50%,-50%) rotate(-12deg) scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.cof-uno-n,.cof-uno-r,.fo-rou-uno.fo-rou-refus-pet,.cof-uno.cof-ouvert .cof-uno-c,.fo-rou-uno.fo-rou-effroi,.fo-rou-uno.fo-rou-pet,.fo-rou-uno.fo-rou-divin,.fo-rou-effroi .fo-rou-titre,.uno-fx i,.uno-fx b{animation:none!important}.uno-plume,.uno-nuage,.uno-prout,.uno-flash,.uno-crocs,.uno-etoile{display:none!important}}
/* ── LE COFFRE MARINE (08/10/2026, user : « un design rappelant énormément la Marine de One Piece ») : le blanc et le
   bleu marine des uniformes, l'or des galons, la mouette de l'emblème, 正義 ; la carte, la fenêtre, la bombe à mèche, et
   les six fins animées (soldats, Smoker, les trois amiraux, Garp, Foxy, Dragon). Tout s'arrête sous reduced-motion. */
.cof-marine{--carte-fond:radial-gradient(90% 130% at 12% 50%,rgba(90,169,230,.42),transparent 60%),linear-gradient(100deg,#08173a 0%,#0f2a5e 46%,#1f4f9c 80%,#5a86c8 100%);
  --anneau-bas:rgba(233,185,73,.42);--anneau:rgba(233,185,73,.9);--anneau-vif:rgba(255,238,223,1);--anneau-halo:rgba(90,169,230,.45);
  --halo:rgba(90,169,230,.5);--lumiere:rgba(240,248,255,1);--lumiere-2:rgba(90,169,230,.45);
  --titre-coul:#f4f8ff;--unite-coul:#ffe08a;--rang-coul:#ffe08a;--bouton:linear-gradient(180deg,#ffffff 0%,#dfe8f6 50%,#9fb6da 100%);--bouton-txt:#0c2350;
  box-shadow:inset 0 0 0 1px var(--anneau-bas),0 0 28px -8px rgba(90,169,230,.55),0 12px 30px -18px #000}
.cof-marine.cof-petit{display:grid;grid-template-columns:112px minmax(0,1fr) auto;column-gap:10px;row-gap:8px;align-items:center}
.cof-marine.cof-petit .cof-scene{grid-column:1;width:112px;height:100px;grid-row:1 / 3}
.cof-marine.cof-petit .cof-texte{grid-column:2 / 4;grid-row:1}
.cof-marine.cof-petit .cof-ouvrir{grid-column:2 / 4;grid-row:2;justify-self:end;margin:0}
.cof-marine .cof-halo{width:100px;height:70px;background:radial-gradient(circle at 40% 55%,rgba(90,169,230,.6),transparent 60%),radial-gradient(circle at 70% 45%,rgba(233,185,73,.5),transparent 60%)}
.cof-mar-scene{position:relative}
.cof-mar-scene img{position:absolute;display:block;max-width:none;-webkit-user-select:none;user-select:none;pointer-events:none}
.cof-mar-coffre{width:84%;right:-4%;bottom:0}
.cof-mar-soldat{height:88%;left:-8%;bottom:-2%;z-index:1}
.cof-marine.cof-tremble .cof-mar-scene{animation:c3-tremble 110ms linear infinite}
.cof-marine .cof-rang{color:#ffe08a;letter-spacing:.12em}
.cof-marine.cof-marine-perdu{--titre-coul:#ffb0b0}
.cof-marine .cof-res{background:rgba(4,12,32,.55);box-shadow:inset 0 0 0 1px rgba(233,185,73,.22)}
.cof-marine .cof-res-val{color:#bfe0ff}
.cof-marine .cof-res-perte .cof-res-val{color:#ff9a9a}
.cof-marine .cof-res-tresor .cof-res-val{color:#ffe08a}
/* le classement (v2) : le top 3 numéroté, un trait, puis les derniers joueurs */
.cof-marine .cof-res-l{grid-template-columns:16px 18px minmax(0,1fr) auto auto;column-gap:6px}
.cof-marine .cof-res-rang{display:grid;place-items:center;width:16px;height:16px;border-radius:50%;font-size:9.5px;font-weight:900;font-variant-numeric:tabular-nums;color:#0c2350;background:#ffe08a;box-shadow:none}
.cof-marine .cof-res-l:nth-child(2) .cof-res-rang{background:#dbe4f0}
.cof-marine .cof-res-l:nth-child(3) .cof-res-rang{background:#fec285}
.cof-marine .cof-res-rang-vide{background:none!important}
.cof-marine .cof-res-temps{font-size:11.5px;font-weight:700;color:#bfd4f2;font-variant-numeric:tabular-nums}
.cof-mar-trait{display:block;height:1px;margin:4px 0;background:rgba(233,185,73,.42)}
.cof-marine .cof-ouvrir{text-shadow:none;box-shadow:inset 0 0 0 1.5px rgba(12,35,80,.4),0 6px 18px -6px rgba(90,169,230,.8)}
.cof-mar-bio{display:grid;gap:6px}
.cof-mar-paliers{display:flex;flex-wrap:wrap;gap:4px}
.cof-mar-paliers i{font-style:normal;font-size:11px;font-weight:700;padding:2px 7px;border-radius:999px;background:rgba(255,255,255,.1);color:#dfe9fb;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);white-space:nowrap}
.cof-mar-paliers b{color:#ffe08a}
.fo-cof-p-marine{box-shadow:inset 0 0 0 1px rgba(233,185,73,.45);color:#f4f8ff;background:linear-gradient(100deg,rgba(31,79,156,.55),rgba(8,23,58,.45))}
.fo-cof-p-marine svg{color:#ffe08a}
@media (hover:hover){.fo-cof-p-marine:hover{background:linear-gradient(100deg,rgba(31,79,156,.7),rgba(8,23,58,.55))}}
/* la fenêtre */
.fo-mar{position:fixed;left:50%;top:50%;z-index:91;transform:translate(-50%,-50%);width:min(92vw,400px);max-height:calc(100dvh - 24px);overflow:auto;padding:12px 16px 16px;border-radius:20px;color:#f4f8ff;
  background:radial-gradient(120% 60% at 50% -10%,rgba(90,169,230,.35),transparent 60%),linear-gradient(180deg,#0f2a5e 0%,#08173a 100%);
  box-shadow:inset 0 0 0 1.5px rgba(233,185,73,.55),0 0 60px -10px rgba(90,169,230,.55),0 30px 80px -10px rgba(0,0,0,.95);display:grid;gap:10px;text-align:center}
.fo-mar-tete{display:flex;align-items:center;justify-content:center;gap:8px}
.fo-mar-logo{width:30px;height:30px}
.fo-mar-titre{font-size:13px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:#ffe08a}
.fo-mar-justice{font-family:"Hiragino Sans","Noto Sans JP","Yu Gothic",sans-serif;font-weight:900;font-size:15px;color:#fff;opacity:.85}
.fo-mar-ouverture{position:relative;display:grid;justify-items:center;gap:6px;padding:10px 0 6px}
.fo-mar-coffre-anim{width:200px;max-width:70%;animation:mar-ouvre .7s cubic-bezier(.2,1.6,.4,1) both}
@keyframes mar-ouvre{0%{transform:scale(.6) rotate(-6deg)}40%{transform:scale(1.08) rotate(3deg)}70%{transform:scale(.97) rotate(-1deg)}100%{transform:none}}
.fo-mar-flash-ouv{position:absolute;left:60%;top:16%;width:80px;height:52px;background-size:contain;background-repeat:no-repeat;opacity:0;animation:mar-flash-ouv .5s steps(1) both}
@keyframes mar-flash-ouv{0%{opacity:1}20%{opacity:0}48%{opacity:1}68%{opacity:0}100%{opacity:0}}
.fo-mar-pan-ouv{position:absolute;left:50%;top:4%;font-size:26px;font-weight:900;color:#ffd23a;-webkit-text-stroke:2px #5a1a06;text-shadow:0 3px 0 #5a1a06;white-space:nowrap;animation:mar-pan-ouv .6s cubic-bezier(.2,1.6,.4,1) both}
@keyframes mar-pan-ouv{0%{transform:translateX(-50%) rotate(-6deg) scale(.2);opacity:0}60%{transform:translateX(-50%) rotate(-4deg) scale(1.2);opacity:1}100%{transform:translateX(-50%) rotate(-6deg) scale(1);opacity:1}}
.fo-mar-attente{font-size:13px;font-weight:700;color:#bfd4f2}
/* le coffre et sa bombe à mèche (user, 08/10 : « un timer sur le coffre, un tic-tac, une corde qui brûle ») */
.fo-mar-scene{position:relative;height:96px;display:flex;align-items:flex-end;justify-content:center}
.fo-mar-coffre-jeu{width:130px;max-width:44%}
.fo-mar-bombe{position:absolute;left:50%;bottom:22px;width:110px;height:96px;overflow:visible;filter:drop-shadow(0 4px 6px rgba(0,0,0,.5))}
.fo-mar-bombe-n{transform-box:fill-box;transform-origin:center;animation:mar-pop-sec .35s cubic-bezier(.2,1.6,.4,1)}
.fo-mar-bombe-urgent{animation:mar-bombe-tremble .12s linear infinite}
@keyframes mar-bombe-tremble{0%{transform:translate(0,0)}25%{transform:translate(1.4px,-1px)}50%{transform:translate(-1px,1px)}75%{transform:translate(1px,1px)}100%{transform:translate(-1.4px,0)}}
/* le chrono et la barre des paliers */
.fo-mar-chrono{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.fo-mar-enjeu{display:grid;justify-items:start;line-height:1;gap:3px;text-align:left}
.fo-mar-enjeu small{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#bfd4f2}
.fo-mar-enjeu b{font-size:24px;font-weight:900;color:#ffe08a;text-shadow:0 0 16px rgba(255,210,90,.5);font-variant-numeric:tabular-nums}
.fo-mar-enjeu.fo-mar-p1000 b{color:#bfe0ff;text-shadow:0 0 14px rgba(90,169,230,.6)}
.fo-mar-enjeu.fo-mar-p500 b{color:#f4f8ff;text-shadow:none}
.fo-mar-enjeu em{font-style:normal;font-size:11.5px;font-weight:700;color:#bfd4f2;font-variant-numeric:tabular-nums;white-space:nowrap}
/* le compte à rebours, en gros (v2) : le temps qui reste avant le BOUM, qui bat à chaque seconde, rouge les 3 dernières */
.fo-mar-rebours{display:grid;justify-items:end;line-height:1;gap:2px;transform-origin:100% 100%}
.fo-mar-rebours small{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#ffe9d5}
.fo-mar-sec{display:flex;align-items:baseline;gap:2px;font-size:46px;font-weight:900;font-variant-numeric:tabular-nums;color:#fff;text-shadow:0 0 18px rgba(255,185,110,.55),0 3px 0 rgba(0,0,0,.35)}
.fo-mar-sec u{text-decoration:none;font-size:20px;opacity:.85}
.fo-mar-sec-pop{display:inline-block;animation:mar-pop-sec .35s cubic-bezier(.2,1.6,.4,1)}
@keyframes mar-pop-sec{0%{transform:scale(1.3)}100%{transform:none}}
.fo-mar-urgent{animation:mar-urgent .5s ease-in-out infinite}
.fo-mar-urgent .fo-mar-sec{color:#ff6a6a;text-shadow:0 0 22px rgba(255,60,60,.75),0 3px 0 rgba(0,0,0,.35)}
@keyframes mar-urgent{50%{transform:scale(1.1)}}
/* la corde qui brûle (v2, à la place de la barre grise) : la corde tressée, la cendre derrière la flamme, les nœuds des
   paliers, la petite bombe au bout ; --brule = la part déjà brûlée */
.fo-mar-corde{display:grid;grid-template-columns:minmax(0,1fr) 34px;grid-template-rows:32px auto;row-gap:3px;align-items:center}
.fo-mar-corde-piste{position:relative;height:32px}
.fo-mar-corde-intacte{position:absolute;left:var(--brule);right:-6px;top:50%;height:12px;margin-top:-6px;border-radius:6px 0 0 6px;transition:left 60ms linear;
  background:repeating-linear-gradient(-58deg,#ffe7d1 0 4px,#f29f3a 4px 7px,#626568 7px 8.5px);
  box-shadow:inset 0 2.5px 0 rgba(238,245,253,.55),inset 0 -2.5px 0 rgba(43,45,47,.5),0 3px 6px rgba(0,0,0,.45)}
.fo-mar-corde-urgent .fo-mar-corde-intacte{animation:mar-corde-rouge .5s ease-in-out infinite alternate}
@keyframes mar-corde-rouge{to{box-shadow:inset 0 2.5px 0 rgba(238,245,253,.55),inset 0 -2.5px 0 rgba(43,45,47,.5),0 0 14px 2px rgba(255,70,40,.8)}}
.fo-mar-corde-cendre{position:absolute;left:0;width:var(--brule);top:50%;height:5px;margin-top:-1.5px;border-radius:3px;transition:width 60ms linear;
  background:repeating-linear-gradient(90deg,#2f3234 0 5px,#1e1410 5px 7px,transparent 7px 9px)}
.fo-mar-corde-cendre::after{content:"";position:absolute;right:0;top:-2px;bottom:-2px;width:30px;max-width:100%;border-radius:4px;background:linear-gradient(90deg,transparent,#5a5c5f 55%,#fda125);animation:mar-braise .22s ease-in-out infinite alternate}
@keyframes mar-braise{to{filter:brightness(1.35)}}
.fo-mar-noeud{position:absolute;top:50%;width:9px;height:17px;margin:-8.5px 0 0 -4.5px;border-radius:4px;background:linear-gradient(180deg,#fec994,#626568);box-shadow:inset 0 0 0 1px rgba(36,38,40,.5),0 2px 4px rgba(0,0,0,.4)}
.fo-mar-flamme{position:absolute;left:var(--brule);top:50%;width:0;height:0;z-index:1;transition:left 60ms linear}
.fo-mar-flamme-halo{position:absolute;left:-34px;top:-34px;width:68px;height:68px;border-radius:50%;background:radial-gradient(circle,rgba(254,223,195,.65),rgba(248,153,6,.25) 45%,transparent 70%);animation:mar-halo .3s ease-in-out infinite alternate}
@keyframes mar-halo{to{transform:scale(1.18);opacity:.8}}
.fo-mar-flamme-feu{position:absolute;left:-16px;bottom:-7px;width:32px;height:44px;overflow:visible;transform-origin:50% 100%;filter:drop-shadow(0 0 6px rgba(253,177,91,.95));animation:mar-flamme .13s ease-in-out infinite alternate}
@keyframes mar-flamme{0%{transform:scale(.9,1.06) rotate(-5deg)}100%{transform:scale(1.07,.92) rotate(5deg)}}
.fo-mar-etin{position:absolute;left:-2px;top:-2px;width:4px;height:4px;border-radius:50%;background:#ffe27a;box-shadow:0 0 6px 1px #feaf54;opacity:0;animation:mar-etin .7s ease-out infinite}
.fo-mar-etin-0{--dx:-14px;--dy:-24px}.fo-mar-etin-1{--dx:11px;--dy:-27px;animation-delay:.14s}.fo-mar-etin-2{--dx:-5px;--dy:-32px;animation-delay:.28s}
.fo-mar-etin-3{--dx:17px;--dy:-14px;animation-delay:.42s}.fo-mar-etin-4{--dx:-19px;--dy:-11px;animation-delay:.56s}
@keyframes mar-etin{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(.3);opacity:0}}
.fo-mar-corde-fumee{position:absolute;left:-14px;top:-42px;width:28px;height:28px;border-radius:50%;background:radial-gradient(circle,rgba(205,210,220,.42),transparent 70%);opacity:0;animation:mar-fumee-corde 1.1s ease-out infinite}
@keyframes mar-fumee-corde{0%{transform:translate(-2px,20px) scale(.4);opacity:0}30%{opacity:.8}100%{transform:translate(-14px,-8px) scale(1.4);opacity:0}}
.fo-mar-corde-bombe{grid-column:2;grid-row:1;width:34px;height:30px;overflow:visible;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
.fo-mar-corde-urgent .fo-mar-corde-bombe{animation:mar-bombe-tremble .12s linear infinite}
.fo-mar-corde-paliers{grid-column:1;grid-row:2;display:flex}
.fo-mar-cp{flex-basis:0;flex-shrink:1;min-width:0;font-style:normal;font-size:10.5px;font-weight:800;line-height:1.2;text-align:center;white-space:nowrap;color:#8fa6c8;border-left:1px solid rgba(255,255,255,.16)}
.fo-mar-cp:first-child{border-left:0}
.fo-mar-cp-actif.fo-mar-cp3000{color:#ffe08a}.fo-mar-cp-actif.fo-mar-cp1000{color:#bfe0ff}.fo-mar-cp-actif.fo-mar-cp500{color:#fff}
.fo-mar-cp-passe{color:rgba(143,166,200,.5);text-decoration:line-through}
.fo-mar-question{margin:2px 0 0;font-size:18px;line-height:1.3;font-weight:800;color:#fff;text-wrap:balance}
.fo-mar-choix{display:grid;gap:8px}
.fo-mar-case{display:flex;align-items:center;gap:10px;min-height:50px;padding:8px 12px;border:0;border-radius:14px;background:linear-gradient(180deg,#ffffff,#e4ebf6);color:#0c2350;font:inherit;font-size:16px;font-weight:800;text-align:left;cursor:pointer;box-shadow:inset 0 0 0 1.5px rgba(12,35,80,.25),0 4px 0 #9fb6da;transition:transform 80ms,box-shadow 80ms;touch-action:manipulation}
.fo-mar-case:active:not(:disabled){transform:translateY(3px);box-shadow:inset 0 0 0 1.5px rgba(12,35,80,.25),0 1px 0 #9fb6da}
.fo-mar-case:disabled{cursor:default;opacity:.85}
.fo-mar-case:focus-visible{outline:3px solid #ffe08a;outline-offset:3px}
.fo-mar-choisi{background:linear-gradient(180deg,#ffe08a,#e9b949)}
.fo-mar-lettre{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#0c2350;color:#ffe08a;font-size:13px;font-weight:900}
.fo-mar-txt{min-width:0}
.fo-mar-regle{margin:0;font-size:12px;color:#bfd4f2}
/* BOUM (10 s sans réponse) */
.fo-mar-boum{position:fixed;inset:0;z-index:3;display:grid;place-items:center;pointer-events:none;border-radius:20px;overflow:hidden}
.fo-mar-boum-flash{position:absolute;inset:0;background:#fff;animation:mar-boum-flash .5s ease-out both}
@keyframes mar-boum-flash{0%{opacity:1}100%{opacity:0}}
.fo-mar-boum-feu{position:absolute;width:150%;max-width:none;left:-25%;top:8%;animation:mar-boum-feu 1.1s cubic-bezier(.2,.9,.3,1) both}
@keyframes mar-boum-feu{0%{transform:scale(.1) rotate(0);opacity:1}55%{transform:scale(1) rotate(12deg);opacity:1}100%{transform:scale(1.15) rotate(18deg);opacity:.15}}
.fo-mar-boum-mot{position:relative;font-size:56px;font-weight:900;color:#ffd23a;-webkit-text-stroke:3px #5a1206;text-shadow:0 5px 0 #5a1206;animation:mar-boum-mot .6s cubic-bezier(.2,1.6,.4,1) .1s both}
@keyframes mar-boum-mot{0%{transform:scale(.2) rotate(-10deg);opacity:0}60%{transform:scale(1.25) rotate(-4deg);opacity:1}100%{transform:scale(1) rotate(-6deg);opacity:1}}
.fo-mar:has(.fo-mar-boum){animation:mar-secousse .5s cubic-bezier(.3,.7,.4,1) both}
@keyframes mar-secousse{0%,100%{transform:translate(-50%,-50%)}20%{transform:translate(calc(-50% + 9px),calc(-50% - 6px))}40%{transform:translate(calc(-50% - 8px),calc(-50% + 5px))}60%{transform:translate(calc(-50% + 6px),calc(-50% + 4px))}80%{transform:translate(calc(-50% - 4px),calc(-50% - 3px))}}
/* le résultat */
.fo-mar-res{position:relative;display:grid;justify-items:center;gap:6px}
.fo-mar-montant{position:relative;z-index:1;font-size:40px;font-weight:900;line-height:1;color:#ffe08a;text-shadow:0 0 22px rgba(255,210,90,.6);font-variant-numeric:tabular-nums}
.fo-mar-perdu .fo-mar-montant{color:#ff7a7a;text-shadow:0 0 22px rgba(255,60,60,.55)}
.fo-mar-verdict{position:relative;z-index:1;font-size:18px;font-weight:900;color:#fff}
.fo-mar-qui{position:relative;z-index:1;font-size:12px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:#bfd4f2}
.fo-mar-bio{position:relative;z-index:1;max-width:32ch;font-size:15px;font-style:italic;font-weight:700;line-height:1.35;color:#fff;padding:8px 12px;border-radius:12px;background:rgba(4,12,32,.6);box-shadow:inset 0 0 0 1px rgba(233,185,73,.35)}
.fo-mar-detail{position:relative;z-index:1;font-size:13px;color:#bfd4f2}
.fo-mar-reponse{position:relative;z-index:1;font-size:13px;color:#ffb0b0}
.fo-mar-bonne{position:relative;z-index:1;font-size:14px;font-weight:700;color:#b8f5c8;padding:6px 12px;border-radius:10px;background:rgba(20,90,50,.4);box-shadow:inset 0 0 0 1px rgba(120,230,160,.5)}
.fo-mar-bonne b{color:#fff}
.fo-mar-ok{position:relative;z-index:1;min-height:46px;min-width:150px;margin-top:4px;padding:0 20px;border:0;border-radius:999px;background:linear-gradient(180deg,#ffffff,#dfe8f6 50%,#9fb6da);color:#0c2350;font:inherit;font-size:16px;font-weight:900;cursor:pointer;box-shadow:0 4px 0 #5a7aa8;touch-action:manipulation}
.fo-mar-ok:focus-visible{outline:3px solid #ffe08a;outline-offset:3px}
.fo-mar.fo-mar-perdu{background:radial-gradient(120% 60% at 50% -10%,rgba(255,60,60,.3),transparent 60%),linear-gradient(180deg,#2a0a14 0%,#08173a 100%)}
.fo-mar.fo-mar-dragon{box-shadow:inset 0 0 0 1.5px rgba(233,185,73,.85),0 0 80px -6px rgba(120,220,140,.6),0 30px 80px -10px rgba(0,0,0,.95)}
/* les personnages, au-dessus du gain */
.mar-persos{position:relative;z-index:1;width:100%;height:184px;display:flex;align-items:flex-end;justify-content:center}
.mar-persos img{display:block;max-width:none;-webkit-user-select:none;user-select:none;pointer-events:none}
.mar-perso{height:184px}
.mar-tireur{position:relative;display:block;height:164px;animation:mar-tireur .7s cubic-bezier(.2,1.3,.4,1) both}
.mar-tireur img{height:164px}
.mar-tireur-0{--x:-130%;margin-right:-34px}
.mar-tireur-1{--x:0%;z-index:1;animation-delay:.12s}
.mar-tireur-2{--x:130%;margin-left:-34px;animation-delay:.24s}
@keyframes mar-tireur{from{transform:translate(var(--x),30%);opacity:0}to{transform:none;opacity:1}}
.mar-flash{position:absolute;display:block;top:60%;right:-30%;width:54px;height:36px;background-size:contain;background-repeat:no-repeat;opacity:0;animation:mar-tir 1.5s steps(1) .5s both}
.mar-tireur-2 .mar-flash{right:auto;left:-30%;transform:scaleX(-1)}
@keyframes mar-tir{0%{opacity:1}8%{opacity:0}20%{opacity:1}28%{opacity:0}45%{opacity:1}53%{opacity:0}70%{opacity:1}78%,100%{opacity:0}}
.mar-smoker-perso{animation:mar-entre-bas .7s cubic-bezier(.2,1.4,.4,1) .3s both,mar-coup .4s ease-in-out 1.2s 2}
@keyframes mar-entre-bas{from{transform:translateY(70%);opacity:0}to{transform:none;opacity:1}}
@keyframes mar-coup{50%{transform:rotate(-6deg) scale(1.06)}}
.mar-persos-amiraux .mar-perso{height:168px}
.mar-akainu{margin-right:-30px;animation:mar-entre-g .6s cubic-bezier(.2,1.3,.4,1) .1s both}
.mar-kizaru{z-index:1;animation:mar-entre-haut .5s cubic-bezier(.2,1.3,.4,1) .45s both}
.mar-aokiji{margin-left:-30px;animation:mar-entre-d .6s cubic-bezier(.2,1.3,.4,1) .8s both}
@keyframes mar-entre-g{from{transform:translateX(-120%) rotate(-8deg);opacity:0}to{transform:none;opacity:1}}
@keyframes mar-entre-d{from{transform:translateX(120%) rotate(8deg);opacity:0}to{transform:none;opacity:1}}
@keyframes mar-entre-haut{0%{transform:translateY(-120%);opacity:0;filter:brightness(3)}70%{filter:brightness(2)}100%{transform:none;opacity:1;filter:none}}
.mar-garp-perso{animation:mar-pop .5s cubic-bezier(.2,1.6,.4,1) .1s both,mar-gronde .25s ease-in-out 2.1s 3}
@keyframes mar-pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
@keyframes mar-gronde{50%{transform:translateX(3px) rotate(1.5deg)}}
.mar-foxy-perso{animation:mar-pop .5s cubic-bezier(.2,1.6,.4,1) .1s both}
.mar-dragon-perso{animation:mar-entre-bas .9s cubic-bezier(.2,1.2,.4,1) .2s both}
/* les effets, collés au cadre de la fenêtre (fixe dans un parent transformé = la fenêtre) */
.mar-fx{position:fixed;inset:0;overflow:hidden;border-radius:20px;pointer-events:none}
.mar-fx-fond{z-index:0}
.mar-fx-avant{z-index:2}
.mar-fx i,.mar-fx b{position:absolute;display:block}
.mar-impact{width:58px;height:58px;background-size:contain;background-repeat:no-repeat;opacity:0;animation:mar-impact 2.6s ease-out both}
.mar-impact-0{left:10%;top:14%;animation-delay:.5s}.mar-impact-1{right:12%;top:20%;animation-delay:.7s}.mar-impact-2{left:42%;top:6%;animation-delay:.85s}
.mar-impact-3{left:16%;top:40%;animation-delay:1.1s}.mar-impact-4{right:16%;top:36%;animation-delay:1.35s}.mar-impact-5{left:58%;top:28%;animation-delay:1.55s}
.mar-impact-a0{left:14%;top:20%;animation-delay:1.6s}.mar-impact-a1{right:12%;top:12%;animation-delay:1.75s}.mar-impact-a2{left:50%;top:34%;animation-delay:1.9s}
@keyframes mar-impact{0%{opacity:0;transform:scale(1.6)}6%{opacity:1;transform:scale(1)}80%{opacity:.9}100%{opacity:0}}
.mar-pan{font-weight:900;color:#ffd23a;-webkit-text-stroke:2px #5a1206;text-shadow:0 3px 0 #5a1206;font-size:30px;white-space:nowrap;opacity:0}
.mar-pan-0{left:6%;top:26%;animation:mar-pan-saut .5s cubic-bezier(.2,1.6,.4,1) .55s both,mar-disparait .4s ease-in 1.9s forwards}
.mar-pan-1{right:6%;top:44%;animation:mar-pan-saut .5s cubic-bezier(.2,1.6,.4,1) 1s both,mar-disparait .4s ease-in 2.1s forwards}
.mar-pan-fume{left:12%;top:18%;color:#eef1f4;-webkit-text-stroke:2px #3a4048;text-shadow:0 3px 0 #3a4048;animation:mar-pan-saut .5s cubic-bezier(.2,1.6,.4,1) .9s both,mar-disparait .4s ease-in 2.3s forwards}
.mar-pan-garp{right:8%;top:14%;color:#ff6a6a;-webkit-text-stroke:2px #4a0606;text-shadow:0 3px 0 #4a0606;animation:mar-pan-saut .5s cubic-bezier(.2,1.6,.4,1) 2.1s both,mar-disparait .4s ease-in 3.6s forwards}
.mar-pan-foxy{left:8%;top:16%;color:#c9a0e6;-webkit-text-stroke:2px #2a0a4a;text-shadow:0 3px 0 #2a0a4a;animation:mar-pan-saut .5s cubic-bezier(.2,1.6,.4,1) .6s both,mar-disparait .4s ease-in 2.4s forwards}
@keyframes mar-pan-saut{0%{transform:scale(.2) rotate(-12deg);opacity:0}60%{transform:scale(1.25) rotate(-6deg);opacity:1}100%{transform:scale(1) rotate(-8deg);opacity:1}}
@keyframes mar-disparait{to{opacity:0}}
.mar-fumee{width:80%;aspect-ratio:160/110;background-size:contain;background-repeat:no-repeat;opacity:0;animation:mar-fumee 3s cubic-bezier(.2,.8,.3,1) both}
.mar-fumee-0{right:-34%;bottom:-8%}.mar-fumee-1{right:-14%;top:18%;width:70%;animation-delay:.2s}.mar-fumee-2{left:-34%;bottom:8%;animation-delay:.4s}.mar-fumee-3{left:-6%;top:-8%;width:60%;animation-delay:.6s}
@keyframes mar-fumee{0%{opacity:0;transform:translateX(30%) scale(.5)}30%{opacity:.95;transform:none}70%{opacity:.8}100%{opacity:.18;transform:translateX(-6%) scale(1.1)}}
.mar-faisceau{left:-30%;top:-10%;width:60%;height:140%;background:linear-gradient(90deg,transparent,rgba(255,240,140,.55),transparent);transform:rotate(18deg);animation:mar-faisceau 1.4s ease-in-out .5s both}
@keyframes mar-faisceau{0%{transform:translateX(-60%) rotate(18deg);opacity:0}30%{opacity:1}100%{transform:translateX(240%) rotate(18deg);opacity:0}}
.mar-magma{left:-6%;bottom:-4%;width:112%;height:34%;background-size:100% 100%;background-repeat:no-repeat;opacity:0;animation:mar-magma 3s ease-out .2s both}
@keyframes mar-magma{0%{opacity:0;transform:translateY(60%)}20%{opacity:1;transform:none}75%{opacity:.85}100%{opacity:.35}}
.mar-glace{width:24px;height:48px;background-size:contain;background-repeat:no-repeat;opacity:0;animation:mar-glace 1.6s cubic-bezier(.5,0,.8,.4) both}
.mar-glace-0{left:12%;animation-delay:1s}.mar-glace-1{left:32%;animation-delay:1.15s}.mar-glace-2{left:56%;animation-delay:1.05s}.mar-glace-3{left:74%;animation-delay:1.3s}.mar-glace-4{left:88%;animation-delay:1.2s}
@keyframes mar-glace{0%{top:-14%;opacity:0}10%{opacity:1}100%{top:70%;opacity:0}}
.mar-billet{top:-12%;width:60px;height:32px;background-size:contain;background-repeat:no-repeat;opacity:0;animation:mar-billet 2.6s linear both}
@keyframes mar-billet{0%{transform:translateY(0) rotate(0);opacity:0}8%{opacity:1}100%{transform:translateY(560px) rotate(var(--r));opacity:.2}}
.mar-aura{left:50%;top:18%;width:240px;height:240px;margin-left:-120px;border-radius:50%;background:radial-gradient(circle,rgba(150,240,170,.55),rgba(60,160,90,.2) 50%,transparent 70%);animation:mar-aura 2.4s ease-in-out infinite}
@keyframes mar-aura{50%{transform:scale(1.15);opacity:.75}}
.mar-vent{width:70%;height:22%;background-size:contain;background-repeat:no-repeat;opacity:0;animation:mar-vent 2.2s ease-in-out both}
.mar-vent-0{left:-10%;top:10%;animation-delay:.2s}.mar-vent-1{right:-12%;top:30%;animation-delay:.5s}.mar-vent-2{left:6%;top:46%;animation-delay:.8s}
@keyframes mar-vent{0%{opacity:0;transform:translateX(-40%)}30%{opacity:.95}100%{opacity:0;transform:translateX(40%)}}
.mar-etoile{width:14px;height:14px;background:radial-gradient(circle,#fff 0 18%,rgba(255,230,140,.9) 30%,transparent 62%);clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);opacity:0;animation:mar-etoile 1.8s ease-in-out infinite}
@keyframes mar-etoile{0%,100%{transform:scale(.2);opacity:0}50%{transform:scale(1.3);opacity:1}}
@media (prefers-reduced-motion:reduce){.cof-marine.cof-tremble .cof-mar-scene,.fo-mar-coffre-anim,.fo-mar-bombe-urgent,.fo-mar-bombe-n,.fo-mar-sec-pop,.fo-mar-flamme-feu,.fo-mar-flamme-halo,.fo-mar-corde-cendre::after,.fo-mar-corde-urgent .fo-mar-corde-intacte,.fo-mar-corde-urgent .fo-mar-corde-bombe,.fo-mar-urgent,.fo-mar:has(.fo-mar-boum),.mar-persos img,.mar-tireur,.mar-fx i,.mar-fx b,.fo-mar-boum-feu,.fo-mar-boum-mot,.fo-mar-pan-ouv{animation:none!important}
  .mar-flash,.mar-pan,.mar-billet,.mar-glace,.mar-faisceau,.mar-vent,.mar-etoile,.fo-mar-flash-ouv,.fo-mar-boum-flash,.fo-mar-etin,.fo-mar-corde-fumee{display:none!important}.mar-impact{opacity:.9}}
/* ── LE COFFRE PIRATE (08/10/2026) : le bois sombre, l'or, le rouge et le noir du pavillon ; ses fins ; les coffres spéciaux ── */
.cof-marine.cof-pirate{--carte-fond:radial-gradient(90% 130% at 12% 50%,rgba(242,150,16,.38),transparent 60%),linear-gradient(100deg,#0b0d0f 0%,#3a1608 46%,#6e2412 80%,#626567 100%);
  --anneau-halo:rgba(242,150,16,.45);--halo:rgba(242,150,16,.5);--lumiere-2:rgba(242,150,16,.45);--bouton:linear-gradient(180deg,#f1f7fe 0%,#ffeedf 50%,#fca538 100%);--bouton-txt:#222527;
  box-shadow:inset 0 0 0 1px var(--anneau-bas),0 0 28px -8px rgba(242,150,16,.55),0 12px 30px -18px #000}
.cof-marine.cof-pirate .cof-halo{background:radial-gradient(circle at 40% 55%,rgba(242,150,16,.6),transparent 60%),radial-gradient(circle at 70% 45%,rgba(233,185,73,.5),transparent 60%)}
.cof-marine.cof-pirate .cof-res{background:rgba(20,8,4,.55);box-shadow:inset 0 0 0 1px rgba(233,185,73,.22)}
.cof-marine.cof-pirate .cof-res-val{color:#ffeedf}
.cof-marine.cof-pirate .cof-res-temps{color:#d5dee7}
.cof-marine.cof-pirate .cof-ouvrir{box-shadow:inset 0 0 0 1.5px rgba(34,37,39,.4),0 6px 18px -6px rgba(242,150,16,.8)}
.cof-marine.cof-pirate .cof-mar-paliers i{color:#e5ebf3}
.cof-pirate .cof-mar-coffre{width:90%;right:-6%}
.cof-res-x2{margin-left:5px;padding:0 4px;border-radius:4px;font-style:normal;font-size:10px;font-weight:900;color:#27292b;background:#ffe08a;vertical-align:1px}
.cof-mar-x2{font-style:normal;color:#ffe08a}
.fo-cof-p-pirate{box-shadow:inset 0 0 0 1px rgba(233,185,73,.45);color:#f0f5fa;background:linear-gradient(100deg,rgba(110,36,18,.6),rgba(11,13,15,.5))}
.fo-cof-p-pirate svg{color:#ffd3aa}
@media (hover:hover){.fo-cof-p-pirate:hover{background:linear-gradient(100deg,rgba(140,46,22,.7),rgba(11,13,15,.6))}}
/* la fenêtre */
.fo-mar.fo-mar-pirate{background:radial-gradient(120% 60% at 50% -10%,rgba(242,150,16,.32),transparent 60%),linear-gradient(180deg,#3a1608 0%,#140804 100%);
  box-shadow:inset 0 0 0 1.5px rgba(233,185,73,.55),0 0 60px -10px rgba(242,150,16,.5),0 30px 80px -10px rgba(0,0,0,.95)}
.fo-mar-pirate .fo-mar-case{color:#222527;background:linear-gradient(180deg,#f8fbfd,#dde4ed);box-shadow:inset 0 0 0 1.5px rgba(34,37,39,.25),0 4px 0 #fca538}
.fo-mar-pirate .fo-mar-case:active:not(:disabled){box-shadow:inset 0 0 0 1.5px rgba(34,37,39,.25),0 1px 0 #fca538}
.fo-mar-pirate .fo-mar-lettre{background:#222527}
.fo-mar-pirate .fo-mar-choisi{background:linear-gradient(180deg,#ffe08a,#e9b949)}
.fo-mar-pirate .fo-mar-regle,.fo-mar-pirate .fo-mar-attente,.fo-mar-pirate .fo-mar-detail,.fo-mar-pirate .fo-mar-enjeu small,.fo-mar-pirate .fo-mar-enjeu em,.fo-mar-pirate .fo-mar-qui{color:#d5dee7}
.fo-mar-pirate .fo-mar-enjeu.fo-mar-p1000 b{color:#ffe9d5;text-shadow:0 0 14px rgba(242,150,16,.6)}
.fo-mar-pirate .fo-mar-bio{background:rgba(20,8,4,.6)}
.fo-mar-pirate .fo-mar-ok{color:#222527;background:linear-gradient(180deg,#f1f7fe,#ffeedf 50%,#fca538);box-shadow:0 4px 0 #535658}
.fo-mar-pirate .fo-mar-cp-actif.fo-mar-cp1000{color:#ffe9d5}
.fo-mar.fo-mar-pirate.fo-mar-perdu{background:radial-gradient(120% 60% at 50% -10%,rgba(255,40,60,.3),transparent 60%),linear-gradient(180deg,#2a0610 0%,#0a0404 100%)}
.fo-mar.fo-mar-imu{background:#050204}
.fo-mar.fo-mar-trio{box-shadow:inset 0 0 0 1.5px rgba(233,185,73,.85),0 0 80px -6px rgba(255,60,60,.6),0 30px 80px -10px rgba(0,0,0,.95)}
.fo-mar.fo-mar-barbenoire{animation:mar-secousse .5s cubic-bezier(.3,.7,.4,1) 1.1s 2}
/* les personnages des fins pirates */
.mar-luffy-perso{animation:mar-pop .5s cubic-bezier(.2,1.6,.4,1) .1s both,mar-coup .4s ease-in-out .75s 2}
.mar-ace-perso{animation:mar-entre-bas .7s cubic-bezier(.2,1.4,.4,1) .1s both;filter:drop-shadow(0 0 14px rgba(254,159,26,.75))}
.mar-persos-trio .mar-luffy{animation:mar-entre-haut .5s cubic-bezier(.2,1.3,.4,1) .45s both,mar-coup .4s ease-in-out .9s 1}
.mar-persos-trio .mar-ace{filter:drop-shadow(0 0 10px rgba(254,159,26,.7))}
.mar-persos-trio .mar-roger{filter:drop-shadow(0 0 12px rgba(255,40,60,.7))}
.mar-baggy-perso{animation:mar-entre-haut .5s cubic-bezier(.2,1.3,.4,1) .45s both,mar-gronde .25s ease-in-out 1.3s 3}
.mar-bn-perso{animation:mar-entre-bas .9s cubic-bezier(.2,1.2,.4,1) .2s both;filter:drop-shadow(0 0 16px rgba(90,40,120,.9))}
.mar-imu-perso{opacity:0;animation:mar-imu-apparait 1.6s ease-in .3s forwards}
.mar-pan-zeha{left:50%;top:10%;margin-left:-86px;color:#c9a0e6;-webkit-text-stroke:2px #14061e;text-shadow:0 3px 0 #14061e;font-size:26px;animation:mar-pan-saut .5s cubic-bezier(.2,1.6,.4,1) 1.5s both,mar-disparait .4s ease-in 3s forwards}
/* LE COFFRE PIÈGE (08/10/2026) : Ivankov qui rit en pointant le joueur, dans la question ; sa fin rose qui se moque */
.fo-mar-piege{display:grid;grid-template-columns:minmax(0,1fr) 92px;align-items:center;gap:6px}
.fo-mar-piege .fo-mar-question{text-align:left;color:#ffd6f2}
.fo-mar-piege-ivankov{width:92px;max-width:none;justify-self:end;filter:drop-shadow(0 0 10px rgba(255,106,208,.6));animation:mar-pop .5s cubic-bezier(.2,1.6,.4,1) .2s both}
.mar-ivankov-perso{height:196px;animation:mar-pop .5s cubic-bezier(.2,1.6,.4,1) .1s both,mar-gronde .22s ease-in-out .4s 6}
.mar-ivankov-aura{left:50%;top:16%;width:260px;height:260px;margin-left:-130px;border-radius:50%;background:radial-gradient(circle,rgba(255,106,208,.55),rgba(120,20,90,.25) 50%,transparent 70%);animation:mar-aura 1.2s ease-in-out infinite}
.mar-etoile-rose{background:#ff9ae0!important;box-shadow:0 0 10px #ff6ad0!important}
.mar-pan-heehaw{left:6%;top:16%;color:#ff8ad8;-webkit-text-stroke:2px #3a0630;text-shadow:0 3px 0 #3a0630;font-size:30px;animation:mar-pan-saut .5s cubic-bezier(.2,1.6,.4,1) .3s both,mar-disparait .4s ease-in 2.8s forwards}
.mar-pan-toi{right:6%;top:40%;color:#fff;-webkit-text-stroke:2px #3a0630;text-shadow:0 3px 0 #3a0630;font-size:22px;animation:mar-pan-saut .5s cubic-bezier(.2,1.6,.4,1) .9s both,mar-disparait .4s ease-in 2.8s forwards}
.fo-mar.fo-mar-ivankov{background:radial-gradient(120% 60% at 50% -10%,rgba(255,106,208,.35),transparent 60%),linear-gradient(180deg,#3a0830 0%,#12040e 100%)}
@keyframes mar-imu-apparait{0%{opacity:0;transform:scale(.9)}100%{opacity:1;transform:none}}
/* les effets des fins pirates */
.mar-haki-aura{left:50%;top:22%;width:260px;height:260px;margin-left:-130px;border-radius:50%;background:radial-gradient(circle,rgba(255,40,60,.5),rgba(20,0,0,.4) 45%,transparent 70%);animation:mar-aura 1.6s ease-in-out .9s infinite}
.mar-eclair{width:30px;height:70px;background-size:contain;background-repeat:no-repeat;opacity:0;animation:mar-eclair 1.3s steps(1) both}
.mar-eclair-0{left:8%;top:6%;animation-delay:1s}.mar-eclair-1{right:10%;top:10%;animation-delay:1.1s}.mar-eclair-2{left:46%;top:0;animation-delay:1.2s}
@keyframes mar-eclair{0%{opacity:1}10%{opacity:0}22%{opacity:1}34%{opacity:0}50%{opacity:1}64%,100%{opacity:0}}
.mar-flamme{width:70px;height:84px;background-size:contain;background-repeat:no-repeat;opacity:0;transform-origin:50% 100%;animation:mar-flamme-monte 1.8s ease-out both}
.mar-flamme-t0{left:2%;bottom:30%;animation-delay:.2s}.mar-flamme-t1{right:2%;bottom:34%;animation-delay:.3s}
.mar-flamme-0{left:2%;bottom:26%;animation-delay:.2s}.mar-flamme-1{right:2%;bottom:30%;animation-delay:.32s}.mar-flamme-2{left:24%;bottom:44%;width:56px;animation-delay:.45s}.mar-flamme-3{right:22%;bottom:48%;width:56px;animation-delay:.6s}
@keyframes mar-flamme-monte{0%{opacity:0;transform:scale(.3,.1)}25%{opacity:1;transform:scale(1.05,1.15)}60%{opacity:.95;transform:scale(.95,1)}100%{opacity:0;transform:scale(1.1,1.3) translateY(-20px)}}
.mar-ace-fond .mar-braise-fond,.mar-braise-fond{inset:0;background:radial-gradient(120% 70% at 50% 100%,rgba(248,153,6,.45),transparent 65%);animation:mar-aura 1.4s ease-in-out .2s infinite}
.mar-braise{bottom:-4%;width:5px;height:5px;border-radius:50%;background:#fed2a7;box-shadow:0 0 6px #f5970d;opacity:0;animation:mar-braise-monte 2s ease-out both}
@keyframes mar-braise-monte{0%{opacity:0;transform:translateY(0)}15%{opacity:1}100%{opacity:0;transform:translateY(-300px) translateX(14px)}}
.mar-poing{width:150px;height:66px;background-size:contain;background-repeat:no-repeat;opacity:0}
.mar-poing-luffy{left:-10%;top:30%;animation:mar-poing .55s cubic-bezier(.2,.9,.3,1) .3s both,mar-disparait .3s ease-in 1.7s forwards}
.mar-poing-trio{left:-10%;top:38%;animation:mar-poing .55s cubic-bezier(.2,.9,.3,1) .6s both,mar-disparait .3s ease-in 1.8s forwards}
@keyframes mar-poing{0%{opacity:0;transform:translateX(-80%) scaleX(.4)}60%{opacity:1;transform:translateX(30%) scaleX(1.15)}100%{opacity:1;transform:translateX(20%) scaleX(1)}}
.mar-pan-don{left:50%;top:6%;margin-left:-40px;color:#ff3a4a;-webkit-text-stroke:2px #2a0006;text-shadow:0 3px 0 #2a0006;font-size:38px;animation:mar-pan-saut .5s cubic-bezier(.2,1.6,.4,1) 1.05s both,mar-disparait .4s ease-in 2.6s forwards}
.mar-pan-pistol{right:6%;top:20%;color:#ffd23a;-webkit-text-stroke:2px #5a1206;text-shadow:0 3px 0 #5a1206;animation:mar-pan-saut .5s cubic-bezier(.2,1.6,.4,1) .75s both,mar-disparait .4s ease-in 1.9s forwards}
.mar-pan-shishi{left:6%;top:44%;color:#fff;-webkit-text-stroke:2px #8a1a14;text-shadow:0 3px 0 #8a1a14;font-size:24px;animation:mar-pan-saut .5s cubic-bezier(.2,1.6,.4,1) 1.1s both,mar-disparait .4s ease-in 2.6s forwards}
.mar-pan-hiken{left:8%;top:14%;color:#fed2a7;-webkit-text-stroke:2px #5a1206;text-shadow:0 3px 0 #5a1206;animation:mar-pan-saut .5s cubic-bezier(.2,1.6,.4,1) .25s both,mar-disparait .4s ease-in 2s forwards}
.mar-pan-boum{left:6%;top:22%;animation:mar-pan-saut .5s cubic-bezier(.2,1.6,.4,1) .55s both,mar-disparait .4s ease-in 1.7s forwards}
.mar-pan-gya{right:6%;top:42%;color:#ff8ab0;-webkit-text-stroke:2px #4a0624;text-shadow:0 3px 0 #4a0624;font-size:24px;animation:mar-pan-saut .5s cubic-bezier(.2,1.6,.4,1) 1.55s both,mar-disparait .4s ease-in 3s forwards}
.mar-boulet{width:80px;height:36px;background-size:contain;background-repeat:no-repeat;opacity:0;animation:mar-boulet .7s linear both}
.mar-boulet-0{left:-30%;top:20%;animation-delay:.5s}.mar-boulet-1{left:-30%;top:48%;animation-delay:.8s}
@keyframes mar-boulet{0%{opacity:1;transform:translateX(0)}100%{opacity:1;transform:translateX(560px)}}
.mar-gant{width:40px;height:40px;background-size:contain;background-repeat:no-repeat;opacity:0;animation:mar-gant 1.4s cubic-bezier(.2,.8,.3,1) 1s both}
.mar-gant-0{left:46%;top:40%;--dx:-140px;--dy:-90px}.mar-gant-1{left:46%;top:40%;--dx:130px;--dy:-110px;animation-delay:1.06s}.mar-gant-2{left:46%;top:40%;--dx:-120px;--dy:80px;animation-delay:1.12s}.mar-gant-3{left:46%;top:40%;--dx:140px;--dy:70px;animation-delay:1.18s}
@keyframes mar-gant{0%{opacity:0;transform:translate(0,0) rotate(0)}10%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(540deg)}}
.mar-tenebres{left:50%;top:38%;width:320px;height:320px;margin:-160px 0 0 -160px;background-size:contain;background-repeat:no-repeat;opacity:0;animation:mar-tenebres 2.4s ease-in-out .2s both}
@keyframes mar-tenebres{0%{opacity:0;transform:scale(.15) rotate(0)}40%{opacity:1;transform:scale(1) rotate(-160deg)}100%{opacity:.85;transform:scale(1.25) rotate(-320deg)}}
.mar-fissure{height:3px;background:linear-gradient(90deg,transparent,#c9a0e6,#fff,#c9a0e6,transparent);opacity:0;animation:mar-fissure 1.6s ease-out both}
.mar-fissure-0{left:4%;right:30%;top:64%;transform:rotate(-8deg);animation-delay:1.1s}.mar-fissure-1{left:30%;right:4%;top:70%;transform:rotate(6deg);animation-delay:1.18s}.mar-fissure-2{left:14%;right:40%;top:30%;transform:rotate(14deg);animation-delay:1.26s}
@keyframes mar-fissure{0%{opacity:0;clip-path:inset(0 100% 0 0)}20%{opacity:1;clip-path:inset(0 0 0 0)}100%{opacity:0}}
.mar-imu-noir{inset:0;background:radial-gradient(circle at 50% 40%,rgba(60,0,20,.35),#000 70%);opacity:0;animation:mar-imu-noir 1.2s ease-in both}
@keyframes mar-imu-noir{to{opacity:1}}
.mar-yeux-imu{left:50%;top:20%;width:130px;height:44px;margin-left:-65px;background-size:contain;background-repeat:no-repeat;opacity:0;animation:mar-yeux-imu 2.6s ease-in-out 1s both}
@keyframes mar-yeux-imu{0%{opacity:0;transform:scale(.6)}20%{opacity:1;transform:none}35%{transform:scale(1.15)}50%{transform:none}65%{transform:scale(1.15)}80%,100%{opacity:1;transform:none}}
/* LE COFFRE SPÉCIAL (1 %) : le bandeau d'or, l'équipage au complet ou les héros de la Marine, la pluie de pièces */
.fo-mar-special{position:relative;display:grid;justify-items:center;gap:2px;padding:6px 8px 4px;border-radius:14px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,224,138,.22),rgba(255,224,138,.06));box-shadow:inset 0 0 0 1.5px rgba(255,224,138,.75),0 0 24px -6px rgba(255,208,96,.8);animation:mar-special-entre .5s cubic-bezier(.2,1.6,.4,1) both}
.fo-mar-special-fin{position:relative;z-index:1;width:100%}
.fo-mar-special-titre{position:relative;z-index:1;font-size:16px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#ffe08a;text-shadow:0 0 12px rgba(255,208,96,.8);animation:mar-special-brille 1.2s ease-in-out infinite alternate}
.fo-mar-special-regle{position:relative;z-index:1;font-size:11.5px;font-weight:800;color:#ffeedf}
.fo-mar-special-persos{position:relative;z-index:1;display:flex;justify-content:center;align-items:flex-end;height:58px;margin-top:2px}
.fo-mar-special-persos img{height:calc(56px * var(--k, 1));width:auto;max-width:none;margin:0 -6px;-webkit-user-select:none;user-select:none;pointer-events:none;animation:mar-saut-equipage .45s ease-in-out infinite alternate both}
.fo-mar-special-fin .fo-mar-special-persos{height:64px}
.fo-mar-special-fin .fo-mar-special-persos img{height:calc(62px * var(--k, 1))}
.fo-mar-special-marine .fo-mar-special-persos img{margin:0 -3px;animation:mar-salut-heros .9s ease-in-out infinite alternate both}
.fo-mar-special-drapeaux i{position:absolute;top:8px;display:grid;place-items:center;width:30px;height:22px;border-radius:2px;font-family:"Hiragino Sans","Noto Sans JP","Yu Gothic",sans-serif;font-style:normal;font-weight:900;font-size:11px;color:#fff;background:#1f4f9c;box-shadow:inset 0 0 0 1px #e9b949;transform-origin:0 50%;animation:mar-drapeau 1s ease-in-out infinite alternate}
.fo-mar-special-drapeaux i:first-child{left:8px}.fo-mar-special-drapeaux i:last-child{right:8px;transform-origin:100% 50%}
.fo-mar-special-pieces i{position:absolute;top:-20px;width:18px;height:18px;background-size:contain;background-repeat:no-repeat;opacity:0;animation:mar-piece 1.6s linear infinite}
.fo-mar-enjeu-special b{color:#ffe08a!important;text-shadow:0 0 16px rgba(255,210,90,.7)!important}
@keyframes mar-special-entre{0%{transform:scale(.6);opacity:0}100%{transform:none;opacity:1}}
@keyframes mar-special-brille{to{text-shadow:0 0 22px rgba(255,238,223,1)}}
@keyframes mar-saut-equipage{0%{transform:translateY(0)}100%{transform:translateY(-6px)}}
@keyframes mar-salut-heros{0%{transform:rotate(-3deg)}100%{transform:rotate(3deg)}}
@keyframes mar-drapeau{0%{transform:skewY(-6deg)}100%{transform:skewY(6deg)}}
@keyframes mar-piece{0%{transform:translateY(0) rotate(0);opacity:0}10%{opacity:1}100%{transform:translateY(130px) rotate(360deg);opacity:0}}
.fo-mar.fo-mar-est-special{box-shadow:inset 0 0 0 2px rgba(255,224,138,.95),0 0 70px -4px rgba(255,208,96,.75),0 30px 80px -10px rgba(0,0,0,.95)}
@media (prefers-reduced-motion:reduce){.fo-mar-piege-ivankov,.mar-ivankov-perso,.mar-ivankov-aura,.fo-mar.fo-mar-barbenoire,.mar-luffy-perso,.mar-ace-perso,.mar-persos-trio .mar-luffy,.mar-baggy-perso,.mar-bn-perso,.mar-imu-perso,.mar-haki-aura,.mar-braise-fond,.mar-tenebres,.mar-yeux-imu,.mar-imu-noir,.fo-mar-special,.fo-mar-special-titre,.fo-mar-special-persos img,.fo-mar-special-drapeaux i{animation:none!important}
  .mar-imu-perso,.mar-imu-noir,.mar-yeux-imu,.mar-tenebres{opacity:1}.mar-eclair,.mar-flamme,.mar-braise,.mar-poing,.mar-boulet,.mar-gant,.mar-fissure,.fo-mar-special-pieces{display:none!important}}
.fo-cof-p-uno{box-shadow:inset 0 0 0 1px rgba(255,120,160,.42);color:#fff0f5;background:linear-gradient(100deg,rgba(20,4,10,.6) 0%,rgba(90,18,48,.35) 50%,rgba(242,58,92,.25) 100%)}
.fo-cof-p-uno svg{color:#ff6f96}
@media (hover:hover){.fo-cof-p-uno:hover{background:linear-gradient(100deg,rgba(20,4,10,.7),rgba(242,58,92,.35))}}
@media (prefers-reduced-motion:reduce){.cof-uno.cof-tremble .cof-uno-sc{animation:none}}
/* LE BONNETEAU DE MR. 2 (06/10/2026) : la laque rose et violette de Mr. 2 et ses filets d'or ; trois cartes et un grand
   « ? » sur la face avant du coffre (07/10 ; comme la tête du rat) ; la fenêtre de jeu : l'échelle des paliers, la table, les cartes (dos violet à « ? »,
   face : le personnage ou Mr. 2), la barre des 5 s. Le vert dit « réussi », le rouge « raté », l'or « à retenir ». */
.cof-bonneteau{--carte-fond:radial-gradient(120% 90% at 14% 50%,#5a1d5e 0%,transparent 60%),linear-gradient(100deg,#2a0f36 0%,#170822 55%,#26102f 100%);
  --anneau-bas:rgba(255,121,198,.36);--anneau:rgba(255,150,210,.85);--anneau-vif:rgba(255,190,230,.95);--anneau-halo:rgba(220,80,170,.5);
  --grain:transparent;--joint:rgba(30,8,36,.7);--dessous:#12061a;--reflet:rgba(255,220,245,.3);
  --metal-p:linear-gradient(180deg,#fffbe6 0%,#ffd36a 38%,#686b6e 100%);--rivet:#ffeedf;--fente:.9;
  --halo:rgba(255,121,198,.5);--lumiere:rgba(255,236,250,1);--lumiere-2:rgba(255,121,198,.45);--rayon:84px;
  --tresor:radial-gradient(ellipse at 50% 42%,#fff 0%,#ffd6f0 28%,#a8338a 58%,#0c0410 90%);
  --tas:radial-gradient(circle at 30% 40%,#fff8d6 0 1.6px,#ffcf4a 2.2px 3px,transparent 3.4px) 0 0/7px 6px,radial-gradient(ellipse at 50% 45%,#ffe9a0,#7a2a6a 55%,#0a040c);
  --titre-coul:#fbeaf6;--unite-coul:#ff9ad5;--rang-coul:#ff9ad5;--bouton:linear-gradient(180deg,#ffb3e0 0%,#e0569f 55%,#a8336f 100%);--bouton-txt:#2a0618;
  box-shadow:inset 0 0 0 1px var(--anneau-bas),0 0 28px -8px rgba(220,80,170,.6),0 12px 30px -18px #000}
.cof-bonneteau .c3{--bois-av:linear-gradient(180deg,#d0529a 0%,#8a2e74 55%,#4e164a 100%);--bois-cote:linear-gradient(180deg,#a23a86,#3f1240);
  --grain:transparent;--joint:rgba(30,8,36,.7);--dessous:#12061a;--embleme:none}
.cof-bonneteau .c3-ga,.cof-bonneteau .c3-cga,.cof-bonneteau .c3-dr,.cof-bonneteau .c3-cdr{background-image:linear-gradient(180deg,#a23a86,#3f1240)}
.cof-bonneteau .c3-chaut{background-image:linear-gradient(180deg,#e06aae 0%,#9b3580 100%)}
.cof-bonneteau .c3-av::before,.cof-bonneteau .c3-av::after,.cof-bonneteau .c3-av>em,.cof-bonneteau .c3-ga::before,.cof-bonneteau .c3-dr::before,.cof-bonneteau .c3-chaut::before,.cof-bonneteau .c3-cav::before{display:none}
.cof-bonneteau .c3-av>b{inset:-1px -2px -2px;background:var(--face-bonneteau) 50% 50%/contain no-repeat;filter:drop-shadow(0 2px 2px rgba(0,0,0,.55))}
.cof-bonneteau .cof-halo{background:radial-gradient(circle at 50% 50%,rgba(255,121,198,.7),transparent 62%)}
.cof-bonneteau .cof-rang{color:#ff9ad5;letter-spacing:.12em}
.cof-bonneteau.cof-hasard-perdu{--titre-coul:#ff9aa8}
.cof-bonneteau .cof-res{background:rgba(14,4,18,.5);box-shadow:inset 0 0 0 1px rgba(255,121,198,.24)}
.cof-bonneteau .cof-ouvrir{text-shadow:0 1px 0 rgba(255,230,245,.5);box-shadow:inset 0 0 0 1.5px rgba(60,10,40,.55),0 6px 18px -6px rgba(255,121,198,.75)}
.cof-bonneteau .cof-res-val{color:#ffd36a}
.cof-bonneteau .cof-res-perte .cof-res-val{color:#ff9aa8}
.fo-rou-bonneteau{gap:10px;background:radial-gradient(120% 70% at 50% -10%,rgba(255,121,198,.28),transparent 60%),#12061a;box-shadow:inset 0 0 0 1px rgba(255,121,198,.4),0 0 60px -10px rgba(220,80,170,.55),0 30px 80px -10px rgba(0,0,0,.95)}
.fo-rou-bonneteau .fo-rou-titre{color:#fbeaf6}
.fo-rou-bonneteau .fo-rou-hasard-res .fo-rou-rayons{background:repeating-conic-gradient(from 0deg,rgba(255,154,213,.3) 0 7deg,transparent 7deg 20deg)}
.fo-rou-bonneteau .fo-rou-medaille-res{filter:drop-shadow(0 8px 26px rgba(255,121,198,.6))}
.fo-rou-bonneteau .fo-rou-ok{background:linear-gradient(180deg,#ffb3e0 0%,#e0569f 55%,#a8336f 100%);color:#2a0618}
.fo-rou-bonneteau.fo-rou-perdu .fo-rou-titre{color:#ffb3bd}
.fo-rou-bonneteau.fo-rou-perdu .fo-rou-ok{background:linear-gradient(180deg,#ffb3bd,#c4344a);color:#14060a}
.fo-bon-echelle{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;width:100%}
.fo-bon-palier{display:grid;gap:1px;min-width:0;padding:5px 2px 4px;border-radius:10px;background:rgba(0,0,0,.25);box-shadow:inset 0 0 0 1px rgba(255,121,198,.22)}
.fo-bon-palier small{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--fo-sourd)}
.fo-bon-palier b{font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;color:#fbeaf6}
.fo-bon-passe{background:rgba(95,211,143,.14);box-shadow:inset 0 0 0 1px rgba(95,211,143,.7)}
.fo-bon-passe b{color:#7ee2a6}
.fo-bon-actuel{box-shadow:inset 0 0 0 1.5px #ffd36a,0 0 12px -2px rgba(255,211,106,.6)}
.fo-bon-actuel b{color:#ffd36a}
.fo-bon-consigne{margin:0;min-height:1.4em;font-size:15px;font-weight:700;color:#fbeaf6}
.fo-bon-reussi{color:#7ee2a6;animation:fo-rou-montant .5s cubic-bezier(.2,1.5,.4,1) both}
.fo-bon-table{position:relative;width:100%;min-height:150px;margin-bottom:8px}
.fo-bon-carte{position:absolute;aspect-ratio:11/15;padding:0;border:0;background:none;border-radius:10px;cursor:pointer;perspective:700px;-webkit-tap-highlight-color:transparent;
  transition:left var(--d,.3s) cubic-bezier(.45,0,.55,1),top var(--d,.3s) cubic-bezier(.45,0,.55,1),transform var(--d,.3s)}
.fo-bon-carte:disabled{cursor:default}
.fo-bon-face,.fo-bon-dos{position:absolute;inset:0;border-radius:10px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform .28s,box-shadow .2s;box-shadow:inset 0 0 0 2.5px rgba(255,255,255,.28)}
.fo-bon-face{background:#000}
.fo-bon-face img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.fo-bon-nom{position:absolute;left:0;right:0;bottom:0;padding:3px 2px 4px;font-size:10.5px;font-weight:700;line-height:1.1;background:rgba(0,0,0,.78);color:#fff}
/* le portrait n'est pas venu (autre site muet) : le nom en grand, jamais une carte noire */
.fo-bon-sans-image{display:grid;place-items:center;background:linear-gradient(160deg,#2c2338,#12101a)}
.fo-bon-sans-image .fo-bon-nom{position:static;padding:6px 4px;font-size:14px;line-height:1.15;background:none;text-align:center;overflow-wrap:anywhere}
.fo-bon-dos{transform:rotateY(180deg);display:grid;place-items:center;font-size:28px;font-weight:900;color:#ff9ad5;background:repeating-linear-gradient(45deg,#3a1f5c 0 9px,#4c2878 9px 18px);box-shadow:inset 0 0 0 2.5px #ffd36a}
.fo-bon-retournee .fo-bon-face{transform:rotateY(180deg)}
.fo-bon-retournee .fo-bon-dos{transform:rotateY(0)}
.fo-bon-leve{transform:translateY(-10px) scale(1.04);z-index:3}
.fo-bon-cible .fo-bon-face{box-shadow:inset 0 0 0 3px #ffd36a,0 0 18px rgba(255,211,106,.7)}
.fo-bon-vrai .fo-bon-face{box-shadow:inset 0 0 0 3px #5fd38f,0 0 18px rgba(95,211,143,.7)}
.fo-bon-faux .fo-bon-face{box-shadow:inset 0 0 0 3px #ff6b6b}
@media (hover:hover){.fo-bon-carte:not(:disabled):hover .fo-bon-dos{box-shadow:inset 0 0 0 2.5px #ffeedf}}
.fo-bon-chrono{position:absolute;left:0;right:0;bottom:-8px;height:6px;border-radius:99px;background:#5fd38f;transform-origin:left;animation:fo-bon-chrono var(--t,5s) linear forwards}
@keyframes fo-bon-chrono{0%{transform:scaleX(1);background:#5fd38f}60%{background:#ffd36a}100%{transform:scaleX(0);background:#ff6b6b}}
.fo-bon-intro{position:absolute;inset:0;display:grid;justify-items:center;align-content:center;gap:10px}
.fo-bon-mr2{width:112px;height:112px;border-radius:50%;object-fit:cover;object-position:top;box-shadow:0 0 0 4px #ff79c6,0 0 0 9px rgba(255,121,198,.25);animation:fo-bon-sort .9s cubic-bezier(.2,1.5,.4,1) both}
@keyframes fo-bon-sort{from{transform:translateY(80px) scale(.2) rotate(-200deg);opacity:0}to{transform:none;opacity:1}}
.fo-bon-bulle{padding:9px 14px;border-radius:16px;background:#fff;color:#2a1630;font-size:15px;font-weight:800;animation:fo-rou-montant .35s .45s both}
.fo-cof-p-bonneteau{box-shadow:inset 0 0 0 1px rgba(255,150,210,.42);color:#fbeaf6;background:linear-gradient(100deg,rgba(194,65,141,.22),rgba(107,63,176,.16))}
.fo-cof-p-bonneteau svg{color:#ff9ad5}
@media (hover:hover){.fo-cof-p-bonneteau:hover{background:linear-gradient(100deg,rgba(194,65,141,.3),rgba(107,63,176,.22))}}
@media (prefers-reduced-motion:reduce){.fo-bag-gant{display:none}}
/* LA RAFALE DE COFFRES (04/10/2026, user : « plusieurs coffres melanges avec une vitesse de publication entre chaque,
   avance quoi ») : compteurs par genre, ecart, melange, l ordre exact qui partira ; puis le suivi dans le fil. */
.fo-cof-p-rafale-btn{box-shadow:inset 0 0 0 1px rgba(254,195,136,.38);color:var(--fo-or-txt)}
.fo-cof-p-rafale-btn svg{color:#fec388}
/* LES MOTS INTERDITS dans le panneau des coffres (18/10/2026) : le bouton large du bas, puis la liste */
.fo-cof-p-mots-btn{box-shadow:inset 0 0 0 1px rgba(255,128,128,.36);color:#ffd0d0}
.fo-cof-p-mots-btn svg{color:#ff8f8f}
.fo-mots{display:flex;flex-direction:column;gap:10px}
.fo-mots-aide{margin:0;font-size:12.5px;line-height:1.4;color:var(--fo-sourd2)}
.fo-mots-ajout{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}
.fo-mots-champ{min-width:0;height:44px;padding:0 12px;border:0;border-radius:12px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);color:inherit;font:inherit;font-size:16px}
.fo-mots-champ::placeholder{color:var(--fo-sourd2)}
.fo-mots-champ:focus-visible{outline:2px solid #bba6ff;outline-offset:1px}
.fo-mots-champ[aria-invalid="true"]{box-shadow:inset 0 0 0 1px #ff8f8f}
.fo-mots-ajouter{height:44px;padding:0 16px;border:0;border-radius:12px;background:#ff8f8f;color:#2a0b0b;font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.fo-mots-ajouter[aria-disabled="true"]{opacity:.5;cursor:default}
.fo-mots-ajouter:focus-visible,.fo-mots-mot button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.fo-mots-strict{grid-column:1 / -1;display:flex;align-items:center;gap:8px;min-height:32px;font-size:13px;color:#ece6fa}
.fo-mots-strict input{width:18px;height:18px;margin:0;accent-color:#ff8f8f}
.fo-mots-strict small{font-size:12px;color:var(--fo-sourd2)}
.fo-mots-erreur{margin:0;font-size:13px;line-height:1.4;color:#ffa3a3}
.fo-mots-vide{margin:0;font-size:13px;color:var(--fo-sourd2)}
.fo-mots-liste{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.fo-mots-mot{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 4px 0 12px;border-radius:999px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);font-size:14px;color:#f4f0fb}
.fo-mots-mot--strict{box-shadow:inset 0 0 0 1px rgba(255,128,128,.5)}
.fo-mots-mot small{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#ff8f8f}
.fo-mots-mot button{display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:50%;background:rgba(255,255,255,.08);color:inherit;cursor:pointer}
.fo-mots-mot button svg{width:14px;height:14px}
.fo-raf{display:flex;flex-direction:column;gap:10px;width:100%;max-width:480px;margin:0 auto}
.fo-raf-vide{width:32px;flex:none}
.fo-raf-genres{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.fo-raf-genre{display:grid;grid-template-columns:14px minmax(0,1fr) 30px minmax(18px,auto) 30px;align-items:center;column-gap:3px;min-height:40px;padding:4px 4px 4px 7px;border-radius:12px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);color:var(--fo-txt2)}
.fo-raf-genre>svg{width:15px;height:15px}
.fo-raf-actif{background:rgba(254,195,136,.09);box-shadow:inset 0 0 0 1px rgba(254,195,136,.34);color:var(--fo-txt)}
.fo-raf-nom{min-width:0;font-size:12px;letter-spacing:-.01em;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fo-raf-pas{display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:99px;background:rgba(255,255,255,.07);color:var(--fo-txt2);cursor:pointer}
.fo-raf-pas svg{width:14px;height:14px}
.fo-raf-pas:disabled{opacity:.32;cursor:default}
.fo-raf-n{text-align:center;font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--fo-txt)}
.fo-raf-ligne{display:grid;gap:6px}
.fo-raf-etiquette{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--fo-sourd)}
.fo-raf-rythme{grid-template-columns:repeat(6,minmax(0,1fr))}
.fo-raf-rythme .fo-cof-p-rapide{font-size:12px;white-space:nowrap}
.fo-raf-options{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.fo-raf-option{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 10px;border:0;border-radius:99px;background:rgba(255,255,255,.05);color:var(--fo-txt2);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.fo-raf-option[aria-pressed="true"]{background:rgba(254,195,136,.12);color:var(--fo-txt)}
.fo-raf-option:disabled{opacity:.4;cursor:default}
.fo-raf-case{display:grid;place-items:center;width:16px;height:16px;border-radius:5px;box-shadow:inset 0 0 0 1.5px currentColor}
.fo-raf-case svg{width:12px;height:12px;color:var(--fo-or-txt)}
.fo-raf-remelanger{margin-left:auto}
.fo-raf-remelanger svg{width:14px;height:14px}
.fo-raf-ordre{display:flex;flex-wrap:wrap;gap:4px;margin:0;padding:8px;list-style:none;border-radius:12px;background:rgba(0,0,0,.25);max-height:118px;overflow-y:auto}
.fo-raf-pas-ordre{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:99px;background:rgba(255,255,255,.06);font-size:11.5px;font-weight:600;color:var(--fo-txt)}
.fo-raf-pas-ordre svg{width:12px;height:12px}
.fo-raf-pas-ordre time{font-size:10.5px;font-weight:500;color:var(--fo-sourd);font-variant-numeric:tabular-nums}
.fo-raf-berrys svg{color:#fec388}.fo-raf-hasard svg{color:#ffeedf}.fo-raf-quiz svg{color:#fff}.fo-raf-wanted svg{color:#feddbe}.fo-raf-maudit svg{color:#9dffc4}.fo-raf-baggy svg{color:#ffcf3a}.fo-raf-rat svg{color:#ffd34d}.fo-raf-badge svg{color:#bba6ff}
.fo-raf-bonneteau svg{color:#ff9ad5}.fo-raf-uno svg{color:#ff6f96}.fo-raf-gambling svg{color:#ffd34d}.fo-raf-marine svg{color:#ffe08a}.fo-raf-pirate svg{color:#ffd3aa}.fo-raf-tour svg{color:#a0b4ff}.fo-raf-room svg{color:#9fd8ff}.fo-raf-flamme svg{color:#ffb15a}
.fo-raf-rien{margin:0;font-size:12.5px;color:var(--fo-sourd);text-align:center}
.fo-cof-p-poser:disabled{opacity:.45;cursor:default}
.fo-raf-suivi{width:100%;max-width:420px;display:grid;gap:8px;padding:10px 12px;border-radius:16px;background:linear-gradient(100deg,rgba(254,195,136,.1),rgba(255,255,255,.03));box-shadow:inset 0 0 0 1px rgba(254,195,136,.3)}
.fo-raf-suivi-tete{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--fo-txt)}
.fo-raf-suivi-tete>svg{flex:none;width:16px;height:16px;color:#fec388}
.fo-raf-arreter{margin-left:auto;min-height:32px;padding:0 12px;border:0;border-radius:99px;background:rgba(255,80,90,.14);color:#ff9aa6;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.fo-raf-fermer{margin-left:auto;display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:10px;background:rgba(255,255,255,.06);color:var(--fo-txt2);cursor:pointer}
.fo-raf-fermer svg{width:14px;height:14px}
.fo-raf-barre{display:block;height:6px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.fo-raf-barre>span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#fec388,#ffd479);transition:width .4s var(--fo-out)}
.fo-raf-suivi-texte{margin:0;font-size:12.5px;line-height:1.4;color:var(--fo-txt2)}
.fo-raf-chrono{font-variant-numeric:tabular-nums;color:var(--fo-or-txt)}
.fo-raf-puces{display:flex;flex-wrap:wrap;gap:4px;margin:0;padding:0;list-style:none}
.fo-raf-puce{display:grid;place-items:center;width:24px;height:24px;border-radius:8px;background:rgba(255,255,255,.05);color:var(--fo-txt2)}
.fo-raf-puce svg{width:13px;height:13px}
.fo-raf-puce.fo-raf-prevu{opacity:.45}
.fo-raf-puce.fo-raf-pose{background:rgba(254,195,136,.16);box-shadow:inset 0 0 0 1px rgba(254,195,136,.42);color:#ffd479}
.fo-raf-puce.fo-raf-refuse{background:rgba(255,80,90,.16);box-shadow:inset 0 0 0 1px rgba(255,80,90,.45);color:#ff9aa6}
.fo-raf-puce.fo-raf-annule{opacity:.22}
/* LES COFFRES A DISTRIBUER (Brankz, 04/10/2026) : deux grands boutons, ce qui reste aujourd hui, l attente */
.fo-dist-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fo-dist-btn{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:8px;row-gap:2px;min-height:64px;padding:10px 12px;border:0;border-radius:14px;font:inherit;text-align:left;cursor:pointer;color:var(--fo-txt)}
.fo-dist-btn svg{grid-row:1 / 3;width:22px;height:22px}
.fo-dist-nom{font-size:13px;font-weight:700}
.fo-dist-reste{font-size:18px;font-weight:900;font-variant-numeric:tabular-nums}
.fo-dist-reste small{font-size:12px;font-weight:600;opacity:.6}
.fo-dist-hasard{background:linear-gradient(100deg,rgba(231,235,240,.14),rgba(255,47,85,.14));box-shadow:inset 0 0 0 1px rgba(255,232,213,.42)}
.fo-dist-hasard svg{color:#ffeedf}
.fo-dist-maudit{background:linear-gradient(100deg,rgba(120,40,200,.24),rgba(0,90,40,.18));box-shadow:inset 0 0 0 1px rgba(176,77,255,.45)}
.fo-dist-maudit svg{color:#9dffc4}
.fo-dist-rat{background:linear-gradient(100deg,rgba(110,140,80,.2),rgba(254,157,8,.12));box-shadow:inset 0 0 0 1px rgba(170,185,150,.42)}
.fo-dist-rat svg{color:#ffd34d}
.fo-dist-btn:disabled{opacity:.42;cursor:default}
.fo-dist-note{margin:0;font-size:12.5px;color:var(--fo-sourd);text-align:center}
@media (prefers-reduced-motion:reduce){.fo-raf-barre>span{transition:none}}
/* LES COFFRES LOIN DE L ECRAN (04/10/2026, « ca rame avec beaucoup de coffres ») : a plus de 600 px de l ecran, un
   coffre n est ni mis en page ni dessine, sa hauteur est gardee ; ses animations s arretent. data-loin est pose par
   coffres-loin.ts, retire des qu il approche : a l ecran, rien ne change.
   13/10/2026 : la pause passe par data-fige, pose UNE IMAGE AVANT data-loin. Posee par le meme attribut que le gel,
   elle n etait jamais appliquee (un sous-arbre en content-visibility:hidden n est plus restyle) : les animations des
   coffres lointains tournaient toujours (331 en cours dans 100 coffres geles, mesure ; 0 depuis). */
/* 18/10/2026 : data-fige suit la VUE (hors de la vue = en pause ; gel toujours à 600 px), et la pause prend aussi le halo et
   l anneau de l ENVELOPPE (ses propres ::before/::after, cof-souffle), qui tournaient encore coffre en pause. */
.fo-coffre-fil[data-fige] *,.fo-coffre-fil[data-fige] *::before,.fo-coffre-fil[data-fige] *::after,.fo-coffre-fil[data-fige]::before,.fo-coffre-fil[data-fige]::after{animation-play-state:paused!important}
.fo-coffre-fil[data-loin]{content-visibility:hidden;contain-intrinsic-size:auto var(--fo-h,160px)}
/* L ANNEAU DES COFFRES A PRENDRE, SANS LE FIL PRINCIPAL (13/10/2026, joueurs un soir de coffres : « ca lag a mort »).
   Mesure sur un fil de 102 coffres (processeur non ralenti) : UN coffre a prendre a l ecran, dont l anneau respirait par
   box-shadow, et le fil principal redessinait a chaque rafraichissement (204 images par seconde sur ce PC, occupe 80 %,
   contre 17 % l anneau coupe). box-shadow ne s anime pas sur le compositeur ; transform et opacity, si. L anneau est donc
   decoupe en trois calques qui ne bougent que par ces deux proprietes :
     - l ombre portee, fixe, et le halo qui grandit de 8 px en s effacant : deux pseudo-elements de l ENVELOPPE, sous la
       carte (un pseudo-element de la carte serait rogne par son overflow), places et mis a l echelle par les mesures de
       coffres-anneau.ts (--an-x, --an-y, --an-l, --an-h, --an-sx, --an-sy ; la couleur du halo et le rayon recopies) ;
     - l anneau de 2 px, fixe sur la carte, et sa version vive par-dessus (::before), dont seule l opacite change.
   Memes durees, memes temps forts (55 %, ou 50 % pour question / avis de recherche / devine le prix), meme courbe. Sans
   data-anneau (vieux navigateur, coffre pas encore mesure, coffre hors d un fil), l ancienne animation reste. Le 777
   garde l ancienne : son cadre arc-en-ciel et son titre s animent deja hors du compositeur. Rien sous mouvement reduit. */
@media (prefers-reduced-motion:no-preference){
/* will-change : l enveloppe du coffre a prendre a son propre calque. Sans lui, le halo (calque du compositeur, cale sur des
   pixels entiers) et la carte (peinte au sous-pixel pres dans la page) ne tombaient pas toujours au meme endroit : un filet
   du halo depassait d un cote, 1 px, selon la position du coffre dans le fil (mesure : 5 coffres sur 12). Sur le meme calque,
   carte, ombre et halo partagent le meme calage — 0 depassement mesure a 1x, 2x et 3x. */
.fo-coffre-fil[data-anneau]:has(> .cof-prenable:not(.cof-777)){position:relative;isolation:isolate;will-change:transform}
.fo-coffre-fil[data-anneau]:has(> .cof-prenable:not(.cof-777))::before,.fo-coffre-fil[data-anneau]:has(> .cof-prenable:not(.cof-777))::after{content:"";display:block;position:absolute;left:var(--an-x);top:var(--an-y);width:var(--an-l);height:var(--an-h);border-radius:var(--an-r);pointer-events:none}
.fo-coffre-fil[data-anneau]:has(> .cof-prenable:not(.cof-777))::after{z-index:-2;box-shadow:0 14px 34px -18px #000}
.fo-coffre-fil[data-anneau]:has(> .cof-prenable:not(.cof-777))::before{z-index:-1;background:var(--an-halo);animation:cof-souffle 2.6s ease-in-out var(--an-retard,0s) infinite}
.fo-coffre-fil[data-anneau] > .cof-prenable:not(.cof-777){animation:none;transition:none;box-shadow:inset 0 0 0 2px var(--anneau)}
.fo-coffre-fil[data-anneau] > .cof-prenable:not(.cof-777)::before{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 2px var(--anneau-vif);opacity:0;animation:cof-eclat 2.6s ease-in-out var(--an-retard,0s) infinite;pointer-events:none}
/* question, avis de recherche, devine le prix : leur anneau a eux (il s epaissit, un filet clair de 5 px apparait autour).
   L anneau epais du temps fort est pose par-dessus l anneau de repos et seule son opacite change : les deux temps forts
   (repos, 50 %) sont rendus au point pres ; entre les deux, la bande qui s ajoute passe par un fondu au lieu d avancer.
   (Essaye le 13/10 : un cadre mis a l echelle, bord net en mouvement — moins fidele AUX TEMPS FORTS, ou l oeil se pose :
   rayon des coins interieurs faux de 0,6 px, bord adouci. Abandonne.) */
.fo-coffre-fil[data-anneau]:has(> .cof-quiz.cof-prenable)::after,.fo-coffre-fil[data-anneau]:has(> .cof-wanted.cof-prenable)::after,.fo-coffre-fil[data-anneau]:has(> .cof-prix.cof-prenable)::after{box-shadow:0 12px 30px -18px #000}
.fo-coffre-fil[data-anneau]:has(> .cof-quiz.cof-prenable)::before{background:none;box-shadow:0 0 0 5px rgba(255,255,255,.22);opacity:0;animation:cof-eclat-m 2.2s ease-in-out var(--an-retard,0s) infinite}
.fo-coffre-fil[data-anneau]:has(> .cof-wanted.cof-prenable)::before{background:none;box-shadow:0 0 0 5px rgba(222,230,240,.22);opacity:0;animation:cof-eclat-m 2.4s ease-in-out var(--an-retard,0s) infinite}
.fo-coffre-fil[data-anneau]:has(> .cof-prix.cof-prenable)::before{background:none;box-shadow:0 0 0 5px rgba(233,196,106,.16);opacity:0;animation:cof-eclat-m 2.4s ease-in-out var(--an-retard,0s) infinite}
.fo-coffre-fil[data-anneau] > .cof-quiz.cof-prenable{box-shadow:inset 0 0 0 2.5px #0b0b0b}
.fo-coffre-fil[data-anneau] > .cof-quiz.cof-prenable::before{box-shadow:inset 0 0 0 4px #000;animation:cof-eclat-m 2.2s ease-in-out var(--an-retard,0s) infinite}
.fo-coffre-fil[data-anneau] > .cof-wanted.cof-prenable{box-shadow:inset 0 0 0 2px #323437,inset 0 0 18px rgba(58,60,63,.28)}
.fo-coffre-fil[data-anneau] > .cof-wanted.cof-prenable::before{box-shadow:inset 0 0 0 3.5px #1a1c1f;animation:cof-eclat-m 2.4s ease-in-out var(--an-retard,0s) infinite}
.fo-coffre-fil[data-anneau] > .cof-prix.cof-prenable{box-shadow:inset 0 0 0 1.5px rgba(233,196,106,.55)}
.fo-coffre-fil[data-anneau] > .cof-prix.cof-prenable::before{box-shadow:inset 0 0 0 2.5px #ffe39a;animation:cof-eclat-m 2.4s ease-in-out var(--an-retard,0s) infinite}
.fo-coffre-fil[data-fige]::before,.fo-coffre-fil[data-fige]::after{animation-play-state:paused!important}
}
@keyframes cof-souffle{0%,100%{transform:scale(1);opacity:1}55%{transform:scale(var(--an-sx,1),var(--an-sy,1));opacity:0}}
@keyframes cof-eclat{0%,100%{opacity:0}55%{opacity:1}}
@keyframes cof-eclat-m{0%,100%{opacity:0}50%{opacity:1}}
/* LE COMPTE A REBOURS DES COFFRES (04/10/2026, user : un compte a rebours que tout le monde voit en petit) : une ligne
   discrete sous la carte, sur son bord gauche ; ambre les cinq dernieres minutes. Le coffre disparait a l heure. */
.fo-coffre-fil{flex-wrap:wrap;row-gap:5px}
/* EN ROUGE (user 04/10 : met le timer en rouge). */
.fo-coffre-chrono{flex:0 0 100%;display:flex;flex-wrap:wrap;align-items:center;column-gap:5px;row-gap:1px;min-width:0;margin:0;padding-left:4px;font-size:11.5px;font-weight:600;line-height:1.35;color:#ff6b6b;font-variant-numeric:tabular-nums}
.fo-coffre-chrono-t{white-space:nowrap}
.fo-coffre-notif{padding:0;border:0;background:none;font:inherit;font-weight:500;color:var(--fo-sourd);text-align:left}
button.fo-coffre-notif{cursor:pointer;text-decoration:underline;text-decoration-color:var(--fo-trait-fort);text-underline-offset:2px}
button.fo-coffre-notif:focus-visible{outline:2px solid var(--fo-or);outline-offset:2px;border-radius:3px}
.fo-coffre-chrono svg{flex:none;width:12px;height:12px;opacity:.85}
.fo-coffre-chrono b{font-weight:800;color:#ff6b6b}
.fo-coffre-chrono[data-bientot],.fo-coffre-chrono[data-bientot] b{color:#ff4040}
/* LE COFFRE DE BERRYS PRIS, EN PHRASE (06/10/2026) : une ligne grise, centrée comme une date du fil (LigneCoffrePris). */
.fo-cp{align-self:center;max-width:min(100%,460px);margin:6px 0 4px;padding:0 12px;text-align:center;font-size:11.5px;line-height:1.5;color:var(--fo-sourd);text-wrap:pretty}
@media (prefers-reduced-motion:reduce){
  .cof-prenable,.c3-av>u,.cof-p3 .c3-av>b::before,.cof-p4 .c3-av>b::before,.cof-p5 .c3-av::before,.c3-couv,.c3-lum,.cof-tremble .c3,.cof-rayons,.cof-secousse,.cof-eclats i,.cof-aura,.cof-777::after,.cof-777 .cof-titre .cof-montant,.cof-rouleaux>span.arret,.fo-rou-perdu,.fo-rou-medaille-res,.fo-rou-montant{animation:none!important}
  .cof-pieces-arc,.cof-colonne,.cof-onde,.cof-flash,.cof-plus,.fo-res-part{display:none}
}
.cof-eteint .c3-dedans{background:radial-gradient(ellipse at 50% 40%,#3b3d40 0%,#1a1c1e 78%)}
@media (prefers-reduced-motion:reduce){
  .cof-halo,.cof-pieces i,.c3-boite{animation:none}
  .c3-boite{transform:rotateX(-13deg) rotateY(-22deg)}
  .c3-couv,.c3-lum{transition:none}}

/* ═══════════ FORUM PC, FIDÈLE AU TÉLÉPHONE (29/09/2026) ═══════════
   Demandes user du 29/09 : « le forum en version PC est décentré, il faut le centrer » ; « mets un
   fond ligne pour délimiter le forum » ; puis, sur la version en panneaux de verre et en tableau :
   « esthétiquement j'aime pas, je veux qu'il soit fidèle à la version téléphone dans les échanges,
   pense pro ». Le téléphone et la tablette ne lisent AUCUNE règle de ce bloc (tout est à 1024 px et
   plus). Le principe : la mise en page des messageries pro sur ordinateur (les salons à gauche,
   l'échange au centre dans un panneau), mais TOUT ce qu'elle contient a l'allure du téléphone :
   même en-tête de page, mêmes cartes de sujets, mêmes bulles dans une colonne de téléphone agrandie.
   LE DÉCALAGE (corrigé le 29/09) : la règle de base du rail (.fo-sal.fo-sal-colonne{display:none})
   est écrite APRÈS la règle PC qui l'affiche ; « .fo-page> » lui donne le poids qui manquait. */
@media (min-width:1024px){
/* Le rail des salons colle SOUS l'en-tête du site (il collait à 72 px sous un en-tête de 122). */
.fo-page>.fo-sal.fo-sal-colonne{display:flex;margin-top:10px;border-radius:22px;top:var(--hauteur-header,122px);max-height:calc(100vh - var(--hauteur-header,122px) - 16px)}
.fo-sal-colonne .fo-sal-section{color:rgba(255,255,255,.55)}
/* LE PANNEAU : fond de verre et filet d'un pixel, le forum ne se fond plus dans la planche. */
.fo-page>.fo-principal{position:relative;margin-top:10px;padding:0 20px 24px;border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.026) 260px,rgba(255,255,255,.018));box-shadow:inset 0 0 0 1px rgba(255,255,255,.13),0 34px 90px -44px #000}
.fo-page>.fo-principal>.fo-barre-nav{margin:0 -20px;border-radius:22px 22px 0 0}
/* La barre d'un sujet colle sous l'en-tête DÈS le premier affichage : --fo-entete n'est posé qu'une
   fois la page vivante, et pendant ce temps la barre montait à 56 px, sous l'en-tête du site. */
.fo[data-chat] .fo-barre-nav{top:var(--hauteur-header,122px)}
/* Un seul « Nouveau sujet » (celui du rail) ; vignette de carte citée à 30 px (elle s'étirait). */
.fo-cta-zone{display:none}
.fo-carte .fo-carte-img,.fo-carte .fo-chev{flex:none}
.fo-ariane{font-size:12px}
/* LES ÉCHANGES COMME AU TÉLÉPHONE : une colonne de 760 px au centre du panneau (la taille d'un
   téléphone agrandi, comme les messageries de bureau), et les bulles à 84 % de cette colonne — la
   proportion du téléphone. Le texte garde sa taille ; rien d'autre ne change dans les messages. */
.fo[data-chat] .fo-fil{box-sizing:border-box;width:100%;max-width:792px;margin-left:auto;margin-right:auto}
/* 84 % comme au téléphone, mais jamais au point de chasser hors de l'écran la barre d'actions du
   survol (répondre, réagir : 182 px posés À CÔTÉ de la bulle) — mesuré : +64 px à 1 024, +15 px à 1 280. */
.fo[data-chat] .fo-col{max-width:min(84%,calc(100% - 190px))}
/* LA ZONE D'ÉCRITURE du téléphone, sur la même colonne : même largeur, même centre. --r = début du
   panneau dans la rangée du composeur (rail + gouttière : 316, 276 puis 344 px). Elle est posée
   dans le BAS DU PANNEAU : le panneau s'ouvre en bas, la rangée du composeur en dessine la fin
   (fond, filets, coins), si bien que l'échange et sa zone d'écriture forment une seule fenêtre. */
.fo[data-chat] .fo-page>.fo-principal{padding-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}
.fo[data-chat]>.fo-compose{isolation:isolate;padding-bottom:14px}
.fo[data-chat]>.fo-compose::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:calc(24px + var(--r,316px));right:24px;border-radius:0 0 22px 22px;background:color-mix(in srgb,var(--fo-fond) 90%,transparent);-webkit-backdrop-filter:blur(24px) saturate(1.3);backdrop-filter:blur(24px) saturate(1.3);box-shadow:inset 1px 0 0 rgba(255,255,255,.13),inset -1px 0 0 rgba(255,255,255,.13),inset 0 -1px 0 rgba(255,255,255,.13)}
.fo[data-chat]>.fo-compose .fo-compose-in{--w:min(760px,calc(100% - var(--r,316px) - 72px));width:var(--w);max-width:none;margin-left:calc(var(--r,316px) + (100% - var(--r,316px) - var(--w)) / 2);border:1px solid var(--fo-bord);border-radius:18px;box-shadow:none}
.fo[data-chat]>.fo-compose{--r:316px}
}
@media (min-width:1024px) and (max-width:1199px){
.fo[data-chat]>.fo-compose{--r:276px}
/* Rail de 260 px : le nom du salon passe avant l'heure du dernier message. */
.fo-sal-colonne .fo-sal-chip:not(.fo-sal-recents) .fo-sal-sous{display:none}
}
/* LE CADRE DU SITE dès 1280 px : 1 400 px comme l'en-tête, rail 320 + gouttière 24. */
@media (min-width:1280px){
.fo-page{max-width:1400px;padding:0 20px;grid-template-columns:320px minmax(0,1fr);column-gap:24px}
.fo>.fo-compose{max-width:1400px;padding:0 20px}
/* Hors d'un sujet (si un composeur s'y trouve), il reprend le début du panneau. */
.fo>.fo-compose .fo-compose-in{margin-left:344px}
.fo[data-chat]>.fo-compose{--r:344px;padding-bottom:14px}
.fo[data-chat]>.fo-compose::before{left:calc(20px + var(--r));right:20px}
/* Contraste de la dernière activité (2,28:1 → 5,2:1) et des sujets fermés (4,48 → 5,3:1). */
.fo-bl-quand{color:#5b6577}
.fo-bl.fo-clos .fo-bl-titre{color:#5b6577}
}
/* Survol d'une carte de sujet : elle monte d'un pixel, l'appui la renfonce (règle d'origine). */
@media (min-width:1024px) and (hover:hover){.fo-bl{transition:background 180ms var(--fo-out),box-shadow 180ms var(--fo-out),transform 180ms var(--fo-out)}.fo-bl:hover{transform:translateY(-1px)}.fo-bl:hover:active{transform:scale(.985)}}
@media (min-width:1024px) and (prefers-reduced-motion:reduce){.fo-bl{transition:none}.fo-bl:hover{transform:none}}
/* LES CARTES DE SUJETS SUR DEUX COLONNES (29/09, « continue à améliorer »). Sur une seule colonne
   de 976 px, la carte du téléphone gardait tout son contenu à gauche et un grand vide au milieu.
   Deux par rangée, chacune retrouve à peu près la largeur du téléphone (320 à 470 px) : c'est la
   même carte, à la même proportion, et le regard balaie deux fois plus de sujets. L'en-tête du
   salon garde toute la largeur au-dessus de ses cartes. */
@media (min-width:1024px){.fo-blocs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
/* L'EN-TÊTE DU SITE OPAQUE AU-DESSUS D'UN SUJET. Son dégradé vers la transparence laisse voir la
   planche du site ; sur un sujet, ce sont les MESSAGES qui défilent dessous, et leur texte
   transparaissait sous la ligne « Comparateur prix Display ». Sur un sujet, et sur PC seulement
   (au téléphone l'en-tête du site est masqué sur un sujet), il devient plein. */
@media (min-width:1024px){body:has(.fo[data-chat]) .entete-app{background:color-mix(in srgb,var(--color-background) 97%,transparent)}}
/* LA BARRE D'ÉCRITURE DU TÉLÉPHONE (29/09, « continue à améliorer, dont la barre de message du
   bas »). Au téléphone, c'est une simple BANDE : le +, le champ arrondi, le micro, un filet au-dessus.
   Sur PC elle était enfermée dans une boîte encadrée (bord, coins de 18 px, fond, flou) qui
   contenait elle-même le champ arrondi : un cadre dans un cadre, plus lourd que le téléphone. La
   boîte disparaît ; la bande du bas du panneau en tient lieu (son fond, son flou, le filet du
   panneau au-dessus). Le champ garde tout du téléphone : 16 px, anneau or quand on écrit, il
   grandit avec le texte jusqu'à 140 px. Marges de la bande : 14 px au-dessus, 18 en dessous
   (le bas porte les coins arrondis du panneau). */
@media (min-width:1024px){
.fo[data-chat]>.fo-compose .fo-compose-in{border:0;border-radius:0;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
.fo[data-chat]>.fo-compose{padding-top:6px;padding-bottom:10px}
}


/* ── LES SONDAGES DE L'ADMIN (02/10/2026) : la carte dans le fil (à la place de la bulle de texte du message) et le
   panneau du composeur. La carte reste une bulle : mêmes coins, même colonne, liseré or des messages de l'admin. ── */
.fo-bul.fo-scr{display:flex;flex-direction:column;gap:10px;width:min(340px,100%);padding:12px 12px 10px;white-space:normal;font-weight:400}
.fo-autre .fo-bul.fo-scr,.fo-moi .fo-bul.fo-scr{color:var(--fo-txt);background:linear-gradient(160deg,rgba(254,195,136,.14),rgba(255,255,255,.05) 46%,rgba(255,255,255,.035));box-shadow:inset 0 0 0 1px rgba(254,195,136,.30),inset 0 1px 0 rgba(255,220,150,.14),0 10px 26px -18px rgba(0,0,0,.9)}
.fo-scr-tete{display:flex;align-items:center;justify-content:space-between;gap:8px}
.fo-scr-kick{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#e0b558}
.fo-scr-kick svg{width:15px;height:15px}
.fo-scr-fin{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;color:var(--fo-sourd2);font-variant-numeric:tabular-nums;white-space:nowrap}
.fo-scr-fin svg{width:13px;height:13px}
.fo-scr-q{font-size:15.5px;font-weight:700;line-height:1.35;color:#f4f8fd;white-space:pre-wrap;overflow-wrap:anywhere}
.fo-scr-liste{display:flex;flex-direction:column;gap:7px;margin:0;padding:0;list-style:none}
/* LA PRIME DU SONDAGE (04/10/2026) : « +500 ฿ pour ton vote » en or avant le vote, « ✓ 500 ฿ gagnés » en sourdine après. */
.fo-scr-prime{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;min-height:28px;margin:-2px 0 0;padding:0 11px;border-radius:99px;background:rgba(254,195,136,.13);box-shadow:inset 0 0 0 1px rgba(254,195,136,.34);color:var(--fo-or-txt);font-size:12.5px;font-weight:600;line-height:1.2}
.fo-scr-prime b{font-weight:800;font-variant-numeric:tabular-nums}
.fo-scr-prime svg{width:13px;height:13px;flex:none}
.fo-scr-prime[data-gagne]{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);color:var(--fo-txt2)}
.fo-scr-c{position:relative;display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:0 12px 0 10px;border:0;border-radius:12px;overflow:hidden;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);color:var(--fo-txt);font:inherit;font-size:14px;text-align:left;cursor:pointer;transition:box-shadow .2s,background .2s,transform .12s}
.fo-scr-c:not(:disabled):active{transform:scale(.985)}
.fo-scr-c:disabled{cursor:default}
.fo-scr-c[aria-pressed="true"]{box-shadow:inset 0 0 0 1.5px var(--fo-or);background:rgba(254,195,136,.10)}
.fo-scr-barre{position:absolute;inset:0;transform-origin:left center;background:linear-gradient(90deg,rgba(255,255,255,.12),rgba(255,255,255,.07));transition:transform .55s var(--fo-out);pointer-events:none}
.fo-scr-c[aria-pressed="true"] .fo-scr-barre{background:linear-gradient(90deg,rgba(254,195,136,.44),rgba(254,195,136,.24))}
.fo-scr-c[data-tete] .fo-scr-barre{background:linear-gradient(90deg,rgba(254,195,136,.52),rgba(255,197,61,.28))}
.fo-scr-rond{position:relative;display:grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35)}
.fo-scr-c[aria-pressed="true"] .fo-scr-rond{background:var(--fo-or);box-shadow:none;color:var(--fo-sur-or)}
.fo-scr-rond svg{width:13px;height:13px}
.fo-scr-lib{position:relative;flex:1;min-width:0;padding:10px 0;line-height:1.3;overflow-wrap:anywhere}
.fo-scr-pct{position:relative;flex:none;font-size:13.5px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--fo-txt2)}
.fo-scr-c[aria-pressed="true"] .fo-scr-pct,.fo-scr-c[data-tete] .fo-scr-pct{color:var(--fo-or-txt)}
.fo-scr-pied{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:24px;font-size:12px;color:var(--fo-sourd2)}
.fo-scr-clore{flex:none;min-height:32px;padding:0 12px;border:0;border-radius:99px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);color:var(--fo-txt2);font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.fo-bul.fo-scr[data-clos] .fo-scr-kick{color:var(--fo-sourd2)}
@media (prefers-reduced-motion:reduce){.fo-scr-barre,.fo-scr-c{transition:none}}
.fo-scr-panneau{display:flex;flex-direction:column;gap:8px;max-height:min(46vh,380px);overflow-y:auto;overscroll-behavior:contain;padding:10px 12px;border-bottom:1px solid var(--fo-filet)}
.fo-scr-p-tete{display:flex;align-items:center;justify-content:space-between;gap:8px}
.fo-scr-p-tete .fo-coffre-titre{display:inline-flex;align-items:center;gap:6px}
.fo-scr-p-tete .fo-coffre-titre svg{width:15px;height:15px}
.fo-scr-p-x{display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:10px;background:rgba(255,255,255,.06);color:var(--fo-txt2);cursor:pointer}
.fo-scr-p-x svg{width:16px;height:16px}
.fo-scr-p-aide{margin:0;font-size:12px;line-height:1.45;color:var(--fo-sourd2)}
.fo-scr-p-liste{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}
.fo-scr-p-choix{display:flex;align-items:center;gap:6px}
.fo-scr-p-champ{flex:1;min-width:0;height:40px;padding:0 12px;border:0;border-radius:12px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);color:var(--fo-txt);font:inherit;font-size:16px}
.fo-scr-p-champ:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--fo-or)}
.fo-scr-p-moins{display:grid;place-items:center;flex:none;width:36px;height:36px;border:0;border-radius:10px;background:transparent;color:var(--fo-sourd2);cursor:pointer}
.fo-scr-p-moins svg{width:16px;height:16px}
.fo-scr-p-ajout{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;min-height:34px;padding:0 12px;border:0;border-radius:99px;background:rgba(254,195,136,.12);box-shadow:inset 0 0 0 1px rgba(254,195,136,.38);color:#ffd479;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.fo-scr-p-ajout svg{width:15px;height:15px}
.fo-scr-p-souci{margin:0;font-size:12px;color:var(--fo-ambre)}
.fo-scr-p-durees{display:flex;flex-wrap:wrap;gap:6px}
.fo-scr-p-duree{height:32px;padding:0 12px;border:0;border-radius:99px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);color:var(--fo-txt2);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.fo-scr-p-duree[aria-pressed="true"]{background:rgba(254,195,136,.16);box-shadow:inset 0 0 0 1px rgba(254,195,136,.55);color:#ffd479}


.fo-vis{position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;background:rgba(0,0,0,.94);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);touch-action:none}
.fo-vis-barre{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:calc(env(safe-area-inset-top,0px) + 10px) 14px 10px;flex:none}
.fo-vis-compte{font-size:13px;font-weight:800;color:rgba(255,255,255,.72);font-variant-numeric:tabular-nums}
.fo-vis-x{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:999px;
  background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.16)}
.fo-vis-x svg{width:20px;height:20px}
.fo-vis-scene{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:0 10px 14px;overflow:hidden}
.fo-vis-img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:10px;
  transition:transform 140ms ease-out;user-select:none;-webkit-user-drag:none}
.fo-vis-fleche{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;color:#fff;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16)}
.fo-vis-fleche svg{width:22px;height:22px}
.fo-vis-g{left:8px}
.fo-vis-d{right:8px}
@media (hover:hover){.fo-vis-x:hover,.fo-vis-fleche:hover{background:rgba(255,255,255,.2)}}
@media (prefers-reduced-motion:reduce){.fo-vis-img{transition:none}}

.fo-lv{position:relative;width:100%;max-width:calc(min(70vh,560px) * var(--lv-ratio,1.78));border-radius:14px;background:#000;
  color:#fff;isolation:isolate;outline:none;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.fo-lv:focus-visible{box-shadow:0 0 0 2px var(--fo-or)}
.fo-lv-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;border-radius:inherit}
.fo-lv-toucher{position:absolute;inset:0;z-index:1;border-radius:inherit}
.fo-lv--cache{cursor:none}
.fo-lv-grand{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:8px;
  min-width:64px;height:64px;padding:0 18px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:rgba(10,10,14,.62);color:#fff;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.fo-lv-grand svg{width:28px;height:28px;fill:currentColor}
.fo-lv-duree{font-size:14px;font-weight:800;font-variant-numeric:tabular-nums}
.fo-lv-attente{position:absolute;z-index:3;left:50%;top:50%;width:42px;height:42px;margin:-21px 0 0 -21px;border-radius:50%;
  border:3px solid rgba(255,255,255,.25);border-top-color:#fff;animation:fo-lv-tourne .8s linear infinite}
@keyframes fo-lv-tourne{to{transform:rotate(360deg)}}
.fo-lv-erreur{position:absolute;z-index:4;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  padding:16px;text-align:center;background:rgba(0,0,0,.8);font-size:14px;border-radius:inherit}
.fo-lv-erreur button{min-height:40px;padding:0 16px;border-radius:999px;border:0;background:var(--fo-or);color:var(--fo-sur-or);font-weight:800}
.fo-lv-saut{position:absolute;z-index:2;top:0;bottom:0;width:38%;display:flex;align-items:center;justify-content:center;pointer-events:none;
  background:radial-gradient(circle at center,rgba(255,255,255,.18),rgba(255,255,255,0) 70%);animation:fo-lv-fondu .65s ease-out forwards}
.fo-lv-saut span{font-size:15px;font-weight:800;padding:6px 12px;border-radius:999px;background:rgba(0,0,0,.55)}
.fo-lv-saut--g{left:0;border-radius:14px 0 0 14px}
.fo-lv-saut--d{right:0;border-radius:0 14px 14px 0}
@keyframes fo-lv-fondu{0%{opacity:0}15%{opacity:1}100%{opacity:0}}
.fo-lv-bas{position:absolute;z-index:3;left:0;right:0;bottom:0;padding:14px 8px calc(4px + env(safe-area-inset-bottom,0px));pointer-events:none;
  border-radius:0 0 14px 14px;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.72));transition:opacity .22s ease,transform .22s ease}
.fo-lv--cache .fo-lv-bas{opacity:0;transform:translateY(8px);pointer-events:none}
.fo-lv-bas :is(.fo-lv-barre,button,input,a,.fo-lv-menu){pointer-events:auto}
.fo-lv--cache .fo-lv-bas :is(.fo-lv-barre,button,input,a){pointer-events:none}
.fo-lv-barre{position:relative;height:22px;margin:0 6px;cursor:pointer;touch-action:none;outline:none}
.fo-lv-barre:focus-visible .fo-lv-pouce{box-shadow:0 0 0 3px rgba(255,255,255,.45)}
.fo-lv-piste,.fo-lv-charge,.fo-lv-lu{position:absolute;left:0;top:50%;height:4px;margin-top:-2px;border-radius:999px}
.fo-lv-piste{right:0;background:rgba(255,255,255,.22)}
.fo-lv-charge{background:rgba(255,255,255,.42)}
.fo-lv-lu{background:var(--fo-or)}
.fo-lv-pouce{position:absolute;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#fff}
.fo-lv-bulle{position:absolute;bottom:22px;transform:translateX(-50%);padding:3px 8px;border-radius:8px;background:rgba(0,0,0,.8);
  font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.fo-lv-rangee{display:flex;align-items:center;gap:2px}
.fo-lv-rangee button{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:0;border-radius:10px;background:none;color:#fff}
.fo-lv-rangee button svg{width:21px;height:21px}
.fo-lv-rangee button[data-lv="lecture"] svg{fill:currentColor}
.fo-lv-rangee button[aria-pressed="true"],.fo-lv-rangee button[aria-expanded="true"]{color:var(--fo-or)}
.fo-lv-volume{display:none;width:72px;accent-color:var(--fo-or)}
.fo-lv-temps{margin-left:6px;font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;color:rgba(255,255,255,.92)}
.fo-lv-espace{flex:1}
.fo-lv-puce{font-size:11.5px;font-weight:800;padding:2px 6px;border-radius:6px;background:rgba(255,255,255,.16)}
.fo-lv-menu{position:fixed;top:0;left:0;z-index:95;color:#fff;font-family:inherit;width:min(248px,calc(100vw - 16px));padding:10px;border-radius:14px;
  background:rgba(18,18,24,.94);border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.fo-lv-menu-titre{margin:0 2px 6px;font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.fo-lv-vitesses{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-bottom:6px}
.fo-lv-vitesses button{min-height:36px;border-radius:9px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#fff;font-size:13px;font-weight:700}
.fo-lv-vitesses button[aria-checked="true"]{background:var(--fo-or,#f5a623);border-color:var(--fo-or,#f5a623);color:var(--fo-sur-or,#1a1206)}
.fo-lv-ligne{display:flex;align-items:center;gap:10px;width:100%;min-height:42px;padding:0 6px;border:0;border-radius:9px;background:none;color:#fff;
  font-size:14px;text-decoration:none;text-align:left}
.fo-lv-ligne svg{width:18px;height:18px;flex:none}
.fo-lv-ligne span{flex:1}
.fo-lv-ligne b{font-size:12.5px;color:rgba(255,255,255,.7)}
.fo-lv--plein,.fo-lv:fullscreen{max-width:none;width:100%;height:100%;border-radius:0;aspect-ratio:auto!important}
@media (hover:hover){
  .fo-lv-volume{display:block}
  .fo-lv-rangee button:hover,.fo-lv-ligne:hover{background:rgba(255,255,255,.12)}
  .fo-lv-vitesses button:hover{border-color:rgba(255,255,255,.4)}
}
@media (prefers-reduced-motion:reduce){.fo-lv-attente{animation-duration:2.4s}.fo-lv-saut{animation:none;opacity:1}.fo-lv-bas{transition:none}}

.fo-wanted{margin:0;width:100%}
.fo-wa-ouvrir{display:block;width:100%;padding:0;border:0;background:none;color:inherit;cursor:zoom-in;-webkit-tap-highlight-color:transparent;transition:transform .15s ease}
.fo-wa-ouvrir:active{transform:scale(.97)}
.fo-wa-ouvrir:focus-visible{outline:2px solid var(--fo-or,#f5a623);outline-offset:4px;border-radius:4px}
.fo-wa-grand{width:min(390px,90vw,calc((100svh - 90px) * .7077))}
.fo-wa-zoom{position:fixed;inset:0;z-index:140;display:grid;place-items:center;align-content:center;gap:14px;padding:16px;
  background:rgba(6,6,10,.84);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);cursor:zoom-out;animation:fo-wa-zoom .18s ease-out}
.fo-wa-zoom-aide{font:500 12.5px/1 system-ui,sans-serif;color:rgba(255,255,255,.6)}
@keyframes fo-wa-zoom{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.fo-wa-papier{container-type:inline-size;position:relative;width:100%;aspect-ratio:736/1040;box-sizing:border-box;overflow:hidden;
  padding:4.2cqw 5.5cqw 3.4cqw;display:flex;flex-direction:column;align-items:center;color:#2b1b19;border-radius:1cqw;
  background:
    radial-gradient(16% 11% at var(--t1x) var(--t1y),rgba(150,95,45,.14),transparent 72%),
    radial-gradient(20% 13% at var(--t2x) var(--t2y),rgba(140,85,40,.12),transparent 74%),
    radial-gradient(12% 8% at var(--t3x) var(--t3y),rgba(120,70,30,.14),transparent 70%),
    radial-gradient(85% 70% at 50% 44%,#f7e6d0 0%,#f0d2b0 38%,#e2b48c 64%,#c68f68 84%,#8a5638 100%);
  box-shadow:inset 0 0 8cqw rgba(110,62,25,.5),inset 0 0 1.6cqw rgba(80,45,18,.55),0 10px 24px rgba(0,0,0,.5),0 2px 4px rgba(0,0,0,.35)}
.fo-wa-papier::before{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;opacity:.22;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.018' numOctaves='4' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .3 0 0 0 0 .1 1.6 0 0 0 -.62'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");background-size:100% 100%}
.fo-wa-papier::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;opacity:.26;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .28 0 0 0 0 .1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:200px 200px}
.fo-wa-papier>*{position:relative;z-index:1}
.fo-wanted p{margin:0;line-height:1;text-align:center}
.fo-wa-titre{font-family:"Libre Caslon Condensed","Playfair Display",Georgia,serif;font-weight:700;font-size:27cqw;letter-spacing:.01em;
  transform:scaleY(1.08);transform-origin:top;margin:0 0 3.6cqw!important;color:#2b1b19;mix-blend-mode:multiply}
.fo-wa-photo{width:100%;aspect-ratio:650/470;overflow:hidden;background:#3a2615;box-shadow:0 0 0 .45cqw #2b1b19}
.fo-wa-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 22%;filter:saturate(.95) contrast(1.03)}
.fo-wa-initiale{display:grid;place-items:center;width:100%;height:100%;font-family:"Playfair Display",Georgia,serif;font-weight:800;font-size:30cqw;color:#f0dcb8;
  background:radial-gradient(90% 90% at 50% 40%,#5a3b1f,#2c1b0d)}
.fo-wa-bas{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;padding:0 8cqw 2.2cqw;mix-blend-mode:multiply}
.fo-wa-acc{position:absolute;left:-.6cqw;top:4.2cqw;bottom:0;width:6.2cqw;height:auto;color:#2b1b19}
.fo-wa-acc-d{left:auto;right:-.6cqw;transform:scaleX(-1)}
.fo-wa-dead{margin-top:5.2cqw!important;font-family:Montserrat,"Arial Black",sans-serif;font-weight:800;font-size:6.6cqw;letter-spacing:.2em;padding-left:.2em;white-space:nowrap}
.fo-wa-nom{width:max-content;max-width:none;margin-top:3cqw!important;font-family:"Libre Caslon Condensed","Playfair Display",Georgia,serif;font-weight:700;letter-spacing:.01em;white-space:nowrap;transform:scaleY(1.08);transform-origin:top;margin-bottom:1.4cqw!important}
.fo-wa-prime{margin-top:2.6cqw!important;font-family:Montserrat,Arial,sans-serif;font-weight:700;font-size:7.6cqw;letter-spacing:.06em;white-space:nowrap;display:flex;align-items:center;gap:2cqw;font-variant-numeric:lining-nums}
.fo-wa-berry{font-family:Georgia,serif;font-weight:700;font-size:1.25em;letter-spacing:0}
.fo-wa-pied{margin-top:auto;width:100%;display:flex;justify-content:space-between;align-items:flex-end;gap:2cqw;mix-blend-mode:multiply}
.fo-wa-mentions{display:grid;gap:.5cqw;text-align:left;font-family:Montserrat,Arial,sans-serif;font-weight:700;font-size:1.65cqw;line-height:1.05;letter-spacing:.03em;opacity:.92}
.fo-wa-mentions .fo-wa-site{font-weight:800;font-size:2.9cqw;letter-spacing:.14em;margin-bottom:.4cqw;opacity:1}
.fo-wa-mentions i{font-style:normal;white-space:nowrap}
.fo-wa-pied b{font-family:"Libre Caslon Condensed","Playfair Display",Georgia,serif;font-weight:700;font-size:9.2cqw;letter-spacing:.05em;line-height:.8;transform:scaleY(1.08);transform-origin:bottom}
/* LA FICHE (3e version) : une ligne d'identité, le panneau de bois avec l'affiche et la plaque, la règle, les actions. */
.fo-fiche-profil>.fo-feuille-titre{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fo-fiche-tete{display:flex;align-items:center;gap:22px;margin:34px 6px 22px 40px;min-width:0}
.fo-fiche-tete-txt{display:grid;gap:3px;min-width:0}
.fo-fiche-id-nom{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0;font-size:19px;font-weight:800;line-height:1.15;overflow-wrap:anywhere}
.fo-fiche-id-sous{margin:0;font-size:12.5px;color:var(--fo-sourd,#a8a29e)}
.fo-fiche-tete .fo-pmoi-grade{margin:0}
.fo-tableau{position:relative;display:grid;justify-items:center;gap:12px;margin:0 2px 10px;padding:22px 16px 16px;border-radius:16px;overflow:hidden;
  background:
    radial-gradient(70% 55% at 50% 38%,rgba(255,196,120,.22),transparent 70%),
    repeating-linear-gradient(90deg,rgba(0,0,0,.28) 0 2px,transparent 2px 25%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 7px),
    linear-gradient(90deg,#4a2f1b,#5c3b23 18%,#4f321d 35%,#613f25 52%,#4b301c 70%,#5a3a22 86%,#472d1a);
  box-shadow:inset 0 0 0 1px rgba(255,210,150,.12),inset 0 12px 28px rgba(0,0,0,.45),inset 0 -10px 24px rgba(0,0,0,.4)}
.fo-tableau::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;opacity:.55;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .28 0 0 0 0 .1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:160px 160px}
.fo-tableau>*{position:relative;z-index:1}
.fo-tableau-affiche{position:relative;width:min(222px,60vw);transform:rotate(-1deg)}
.fo-clou{position:absolute;top:1.6%;width:11px;height:11px;border-radius:50%;z-index:2;pointer-events:none;
  background:radial-gradient(circle at 35% 30%,#f4f4f4 0 10%,#a7a9ae 30%,#55585e 70%,#26282c 100%);box-shadow:0 2px 3px rgba(0,0,0,.6)}
.fo-clou-g{left:6%}
.fo-clou-d{right:6%}
.fo-plaque{display:flex;align-items:baseline;gap:10px;margin:2px 0 0;padding:7px 16px 8px;border-radius:8px;
  background:linear-gradient(180deg,#f3d58c,#d9a948 48%,#b9832a 52%,#e2b75c);color:#2a1a08;
  box-shadow:0 3px 8px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(0,0,0,.25)}
.fo-plaque small{font:800 10.5px/1 Montserrat,system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;opacity:.8}
.fo-plaque b{font:700 18px/1 "Playfair Display",Georgia,serif;letter-spacing:.04em;font-variant-numeric:lining-nums;white-space:nowrap}
.fo-telecharger{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 16px;border:0;border-radius:999px;cursor:pointer;
  font:700 13.5px/1 system-ui,sans-serif;color:#f6e3cc;background:rgba(20,12,6,.55);box-shadow:inset 0 0 0 1px rgba(245,200,120,.35)}
.fo-telecharger svg{width:16px;height:16px}
.fo-telecharger:active{transform:scale(.97)}
.fo-telecharger:disabled{opacity:.7;cursor:progress}
.fo-telecharger:focus-visible{outline:2px solid var(--fo-or,#f5a623);outline-offset:3px}
.fo-fiche-regle{margin:0 8px 14px;text-align:center;font-size:12.5px;color:var(--fo-sourd,#a8a29e)}
@media (prefers-reduced-motion:reduce){.fo-wa-zoom{animation:none}.fo-wa-ouvrir{transition:none}}

.fo-nr-lien{display:flex;align-items:center;gap:10px;width:calc(100% - 8px);min-height:48px;margin:0 4px 10px;padding:10px 12px;border:0;border-radius:14px;background:var(--fo-verre);box-shadow:inset 0 0 0 1px var(--fo-bord);color:var(--fo-txt);font:inherit;text-align:left;cursor:pointer}
.fo-nr-lien:active{background:rgba(255,255,255,.08)}
.fo-nr-lien span{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0;font-size:14px;font-weight:600;line-height:1.35}
.fo-nr-lien b{font-weight:600}
.fo-nr-lien small{font-size:12.5px;font-weight:400;color:var(--fo-sourd)}
.fo-nr-lien svg{flex:none;width:18px;height:18px;color:var(--fo-sourd)}
.fo-nr-retour{min-height:44px;margin-bottom:12px;padding:8px 10px;background:transparent;box-shadow:none}
.fo-nr-retour span{font-size:13px;font-weight:700;color:var(--fo-sourd)}
.fo-nr{padding:0 4px 2px}
.fo-nr h4{margin:16px 8px 6px;font-size:10.5px;font-weight:700;letter-spacing:1.47px;text-transform:uppercase;color:rgba(255,255,255,.45)}
.fo-nr h4:first-of-type{margin-top:4px}
.fo-nr-pause{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:14px;background:rgba(245,166,35,.1);box-shadow:inset 0 0 0 1px rgba(245,166,35,.28);line-height:1.35}
.fo-nr-pause svg{flex:none;width:20px;height:20px;color:var(--fo-or)}
.fo-nr-pause b{display:block;font-size:14px;font-weight:700;color:var(--fo-or-txt)}
.fo-nr-pause small{display:block;margin-top:2px;font-size:12.5px;color:var(--fo-sourd)}
.fo-nr-reprendre{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:44px;margin-top:10px;border:0;border-radius:14px;background:var(--fo-or);color:var(--fo-sur-or);font:inherit;font-size:14px;font-weight:800;cursor:pointer}
.fo-nr-durees{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.fo-nr-duree{min-height:44px;border:0;border-radius:12px;background:var(--fo-verre);box-shadow:inset 0 0 0 1px var(--fo-bord);color:var(--fo-txt);font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.fo-nr-duree:active{background:rgba(245,166,35,.13);box-shadow:inset 0 0 0 1px rgba(245,166,35,.55);color:var(--fo-or-txt)}
.fo-nr-modes{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.fo-nr-mode{min-height:44px;padding:6px 11px;border:0;border-radius:12px;background:var(--fo-verre);box-shadow:inset 0 0 0 1px var(--fo-bord);color:var(--fo-txt);font:inherit;font-size:13px;font-weight:700;text-align:left;cursor:pointer}
.fo-nr-mode[aria-pressed="true"]{background:rgba(245,166,35,.13);box-shadow:inset 0 0 0 1px rgba(245,166,35,.55);color:var(--fo-or-txt);font-weight:800}
.fo-nr-detail{margin:8px 8px 0;color:var(--fo-sourd);font-size:12.5px;line-height:1.45}
.fo-nr-ligne{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:10px 12px;border:0;border-radius:14px;background:transparent;color:var(--fo-txt);font:inherit;font-size:14px;font-weight:600;text-align:left;cursor:pointer}
.fo-nr-ligne:active{background:rgba(255,255,255,.08)}
.fo-nr-ligne span{flex:1 1 auto;min-width:0}
.fo-nr-ligne svg{flex:none;width:18px;height:18px;color:var(--fo-sourd)}
.fo-nr-inter{flex:none;width:46px;height:28px;border-radius:99px;background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px var(--fo-bord);transition:background .16s ease}
.fo-nr-inter i{display:block;width:22px;height:22px;margin:3px;border-radius:50%;background:#fff;transition:transform .16s ease}
.fo-nr-ligne[aria-pressed="true"] .fo-nr-inter{background:var(--fo-or);box-shadow:none}
.fo-nr-ligne[aria-pressed="true"] .fo-nr-inter i{transform:translateX(18px)}
.fo-nr-note{margin:14px 8px 2px;color:var(--fo-sourd);font-size:12.5px;line-height:1.5}
.fo-nr-etat{margin:2px 4px 10px;padding:10px 12px;border-radius:14px;background:var(--fo-verre);box-shadow:inset 0 0 0 1px var(--fo-bord);color:var(--fo-txt2);font-size:13px;line-height:1.45}
.fo-nr[data-occupe="1"]{opacity:.6;pointer-events:none}
@media (prefers-reduced-motion:reduce){.fo-nr-inter,.fo-nr-inter i{transition:none}}

/* ── la carte du fil ── */
.cof-tour{--carte-fond:radial-gradient(90% 130% at 12% 50%,rgba(90,130,255,.34),transparent 60%),linear-gradient(100deg,#090c1f 0%,#1a1540 46%,#3a1b54 80%,#6a2140 100%);background:var(--carte-fond);box-shadow:inset 0 0 0 1px rgba(150,170,255,.34),0 12px 30px -18px #000}
.cof-tour.cof-petit{display:grid;grid-template-columns:104px minmax(0,1fr) auto;column-gap:10px;row-gap:8px;align-items:center}
.cof-tour.cof-petit .cof-scene{grid-column:1;grid-row:1 / 3;width:104px;height:138px}
.cof-tour.cof-petit .cof-texte{grid-column:2 / 4;grid-row:1}
.cof-tour.cof-petit .cof-ouvrir{grid-column:2 / 4;grid-row:2;justify-self:end;margin:0;background:linear-gradient(180deg,#ffe28a,#f2a51b);color:#2a1604}
.cof-tour.cof-petit .cof-res{grid-column:1 / 4}
.cof-tour .cof-halo{width:96px;height:120px;background:radial-gradient(circle at 50% 40%,rgba(120,160,255,.55),transparent 62%),radial-gradient(circle at 50% 80%,rgba(255,140,60,.38),transparent 60%)}
.cof-tour-scene{overflow:visible}
.cof-tour-hero{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 10px rgba(0,0,0,.55));transform-origin:50% 90%;animation:tour-respire 4.6s ease-in-out infinite}
.cof-tour-eclair{position:absolute;inset:-6px;z-index:2;border-radius:14px;pointer-events:none;background:radial-gradient(circle at 60% 18%,rgba(210,225,255,.9),transparent 55%);opacity:0;animation:tour-flash-carte 7s linear infinite}
.cof-tour .cof-rang{color:#b9c8ff;letter-spacing:.12em}
.cof-tour .cof-titre{color:#fff3d0}
.cof-tour.cof-tour-perdu{--titre-coul:#ffb0b0}
.cof-tour.cof-tour-perdu .cof-titre{color:#ffb0b0}
.cof-tour .cof-res{background:rgba(6,8,26,.6);box-shadow:inset 0 0 0 1px rgba(150,170,255,.22)}
.cof-tour .cof-res-val{color:#cfe0ff}
.cof-tour .cof-res-perte .cof-res-val{color:#ff9a9a}
.cof-tour .cof-res-tresor .cof-res-val{color:#ffe08a}
.cof-tour.cof-tremble .cof-tour-hero{animation:c3-tremble 110ms linear infinite}
.cof-tour-paliers{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.cof-tour-paliers i{display:inline-flex;flex-direction:column;align-items:center;min-width:44px;padding:3px 6px;border-radius:8px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,226,138,.28);font-style:normal;line-height:1.1}
.cof-tour-paliers b{font-size:11.5px;color:#ffe08a;font-variant-numeric:tabular-nums}
.cof-tour-paliers small{font-size:9.5px;color:#b9c8ff}
@keyframes tour-respire{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-2px) rotate(-.6deg)}}
@keyframes tour-flash-carte{0%,86%,100%{opacity:0}87%{opacity:.85}88%{opacity:.1}89.5%{opacity:.6}91%{opacity:0}}

/* ── la fenêtre de jeu ── */
.fo-tour{position:fixed;left:50%;top:50%;z-index:91;transform:translate(-50%,-50%);width:min(94vw,400px);max-height:calc(100dvh - 20px);overflow:auto;overscroll-behavior:contain;padding:10px 14px 14px;border-radius:20px;color:#f2f4ff;
  background:radial-gradient(120% 60% at 50% 0%,rgba(110,140,255,.30),transparent 60%),radial-gradient(90% 50% at 50% 100%,rgba(255,110,50,.22),transparent 65%),linear-gradient(180deg,#0a0d22 0%,#16123a 55%,#2a1430 100%);
  box-shadow:inset 0 0 0 1px rgba(160,180,255,.32),0 30px 80px -10px rgba(0,0,0,.92);display:grid;gap:10px;text-align:center}
.fo-tour-tete{display:flex;align-items:center;gap:8px;min-height:32px}
.fo-tour-titre{flex:1;min-width:0;text-align:left;font-size:13px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:#ffe08a;text-shadow:0 0 12px rgba(255,200,80,.35)}
.fo-tour-main{flex:none;padding:4px 10px;border-radius:99px;background:rgba(255,226,138,.12);box-shadow:inset 0 0 0 1px rgba(255,226,138,.4);font-size:12px;color:#ffe9b0}
.fo-tour-quitter{flex:none;display:grid;place-items:center;width:44px;height:44px;margin:-6px -6px -6px 0;border:0;border-radius:50%;background:rgba(0,0,0,.32);box-shadow:inset 0 0 0 1px rgba(255,226,138,.35);color:#ffe9b0;font-size:24px;line-height:1;cursor:pointer}
.fo-tour-quitter:focus-visible{outline:2px solid #ffe08a;outline-offset:2px}
.fo-tour-main b{font-variant-numeric:tabular-nums;color:#fff3c8}

/* l'ouverture : la tour fermée s'efface sur la tour ouverte, l'éclair, le flash */
.fo-tour-ouverture{position:relative;height:300px;display:grid;place-items:center;overflow:hidden;border-radius:14px;background:radial-gradient(80% 60% at 50% 30%,rgba(120,150,255,.25),transparent 70%)}
.fo-tour-ouverture img{position:absolute;left:50%;bottom:24px;height:250px;transform:translateX(-50%);filter:drop-shadow(0 10px 18px rgba(0,0,0,.6))}
.fo-tour-ouv-ferme{animation:tour-ouv-ferme 1.9s ease-in both}
.fo-tour-ouv-ouverte{opacity:0;animation:tour-ouv-ouverte 1.9s ease-out both}
.fo-tour-flash{position:absolute;inset:0;background:radial-gradient(circle at 50% 70%,rgba(255,240,190,.95),rgba(255,200,90,.4) 35%,transparent 65%);opacity:0;animation:tour-ouv-flash 1.9s ease-out both}
.fo-tour-attente{position:absolute;bottom:4px;left:0;right:0;font-size:12.5px;font-weight:700;color:#cfd8ff;letter-spacing:.06em}
.fo-tour-eclair-g,.fo-tour-eclair-d{position:absolute;top:0;width:70px;height:150px;background:center/contain no-repeat;opacity:0;pointer-events:none;filter:drop-shadow(0 0 10px rgba(170,200,255,.9))}
.fo-tour-eclair-g{left:6%;animation:tour-eclair 2.2s linear .4s both}
.fo-tour-eclair-d{right:6%;animation:tour-eclair 2.2s linear 1.1s both}
@keyframes tour-ouv-ferme{0%{opacity:1;transform:translateX(-50%) scale(1)}20%,40%{transform:translateX(calc(-50% - 2px)) rotate(-1deg)}30%,50%{transform:translateX(calc(-50% + 2px)) rotate(1deg)}62%{opacity:1}78%,100%{opacity:0;transform:translateX(-50%) scale(1.03)}}
@keyframes tour-ouv-ouverte{0%,58%{opacity:0;transform:translateX(-50%) scale(.98)}78%{opacity:1;transform:translateX(-50%) scale(1.04)}100%{opacity:1;transform:translateX(-50%) scale(1)}}
@keyframes tour-ouv-flash{0%,60%{opacity:0}70%{opacity:1}100%{opacity:0}}
@keyframes tour-eclair{0%,100%{opacity:0}4%{opacity:1}7%{opacity:.15}10%{opacity:.9}16%{opacity:0}}

/* la scène : la tour et l'échelle des gains */
.fo-tour-scene{display:grid;grid-template-columns:minmax(0,1fr) 128px;align-items:center;gap:8px;min-height:150px}
.fo-tour-hero{width:100%;max-height:170px;object-fit:contain;filter:drop-shadow(0 8px 14px rgba(0,0,0,.55))}
.fo-tour-echelle{display:flex;flex-direction:column;gap:4px;margin:0;padding:0;list-style:none}
.fo-tour-barreau{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:6px;height:28px;padding:0 8px 0 4px;border-radius:9px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(160,180,255,.18);font-size:12px;transition:background .3s,box-shadow .3s,transform .3s}
.fo-tour-barreau i{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:rgba(160,180,255,.18);font-style:normal;font-size:10px;font-weight:900;color:#cfd8ff}
.fo-tour-barreau b{text-align:left;font-variant-numeric:tabular-nums;color:#eef1ff}
.fo-tour-barreau small{font-size:9.5px;color:#ff9a9a;font-variant-numeric:tabular-nums}
.fo-tour-barreau.fo-tour-ici{background:linear-gradient(90deg,rgba(255,210,90,.28),rgba(255,210,90,.10));box-shadow:inset 0 0 0 1.5px #ffd25a,0 0 14px rgba(255,200,80,.35);transform:scale(1.04)}
.fo-tour-barreau.fo-tour-ici i{background:#ffd25a;color:#2a1604}
.fo-tour-barreau.fo-tour-fait{background:rgba(255,210,90,.14);box-shadow:inset 0 0 0 1px rgba(255,210,90,.45)}
.fo-tour-barreau.fo-tour-fait i{background:#7fe0a0;color:#06240f}
.fo-tour-barreau.fo-tour-fait b{color:#ffe08a}
.fo-tour-barreau.fo-tour-perdu{background:rgba(255,60,60,.16);box-shadow:inset 0 0 0 1px rgba(255,90,90,.55)}
.fo-tour-barreau.fo-tour-perdu i{background:#ff5a5a;color:#fff}

/* la consigne, l'étage en arcades de marbre, les petits coffres */
.fo-tour-consigne{margin:0;font-size:13px;line-height:1.4;color:#dfe5ff}
.fo-tour-consigne b{color:#fff}
.fo-tour-g{color:#ffe08a!important}
.fo-tour-p{color:#ff9a9a!important}
.fo-tour-msg{margin:0;font-size:12.5px;color:#ffb3a8}
.fo-tour-galerie{display:grid;gap:6px;padding:10px 8px 8px;border-radius:14px;background:linear-gradient(180deg,#efe7d6,#d9ccb0 70%,#bfae8a);box-shadow:inset 0 2px 0 rgba(255,255,255,.6),inset 0 -3px 0 rgba(90,70,40,.35),0 10px 24px -14px #000}
.fo-tour-n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.fo-tour-n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.fo-tour-n4{grid-template-columns:repeat(4,minmax(0,1fr))}
.fo-tour-n5{grid-template-columns:repeat(6,minmax(0,1fr))}
.fo-tour-n5 .fo-tour-arche{grid-column:span 2}
.fo-tour-n5 .fo-tour-arche:nth-child(4){grid-column:2 / span 2}
.fo-tour-n6{grid-template-columns:repeat(3,minmax(0,1fr))}
.fo-tour-arche{position:relative;display:grid;place-items:end center;min-height:84px;padding:14px 4px 6px;border:0;border-radius:44% 44% 6px 6px / 34% 34% 6px 6px;background:radial-gradient(70% 60% at 50% 30%,#3a2c52,#140f24 80%);box-shadow:inset 0 0 0 3px #f6efe0,inset 0 0 0 5px #b8a682,0 4px 0 #9a8a64;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .15s}
.fo-tour-arche img{width:min(100%,76px);height:auto;filter:drop-shadow(0 4px 4px rgba(0,0,0,.5));pointer-events:none}
.fo-tour-arche:not(:disabled):hover{transform:translateY(-2px)}
.fo-tour-arche:not(:disabled):active{transform:scale(.97)}
.fo-tour-arche:focus-visible{outline:3px solid #ffd25a;outline-offset:2px}
.fo-tour-arche:disabled{cursor:default}
.fo-tour-num{position:absolute;top:5px;left:50%;transform:translateX(-50%);font-size:11px;font-weight:900;color:#e8dcc0;opacity:.85}
.fo-tour-etiquette{position:absolute;top:4px;left:50%;transform:translateX(-50%);padding:1px 7px;border-radius:99px;font-size:10.5px;font-weight:900;white-space:nowrap}
.fo-tour-vu-yamato{box-shadow:inset 0 0 0 3px #ffe08a,inset 0 0 0 5px #c99a2a,0 0 16px rgba(255,210,90,.75),0 4px 0 #9a8a64}
.fo-tour-vu-yamato .fo-tour-etiquette{background:#ffe08a;color:#3a2604}
.fo-tour-vu-kaido{box-shadow:inset 0 0 0 3px #ff7a6a,inset 0 0 0 5px #8a1a1a,0 4px 0 #9a8a64}
.fo-tour-vu-kaido .fo-tour-etiquette{background:#b3202a;color:#fff}
.fo-tour-vu-kaido img{filter:grayscale(.6) brightness(.7) drop-shadow(0 4px 4px rgba(0,0,0,.5))}
.fo-tour-arche-visee:not(.fo-tour-vu-kaido):not(.fo-tour-vu-yamato){animation:tour-viser 1s ease-in-out infinite}
.fo-tour-arche-cle img{animation:tour-cle-ouvre 1.7s ease-in-out both}
.fo-tour-arche-or{box-shadow:inset 0 0 0 3px #ffe08a,inset 0 0 0 5px #c99a2a,0 0 22px rgba(255,210,90,.85),0 4px 0 #9a8a64}
.fo-tour-arche-or img{animation:tour-or 1.2s ease-out both}
.fo-tour-tremble img{animation:c3-tremble 110ms linear infinite}
@keyframes tour-viser{0%,100%{box-shadow:inset 0 0 0 3px #f6efe0,inset 0 0 0 5px #b8a682,0 4px 0 #9a8a64}50%{box-shadow:inset 0 0 0 3px #ffe08a,inset 0 0 0 5px #c99a2a,0 0 14px rgba(255,210,90,.7),0 4px 0 #9a8a64}}
@keyframes tour-cle-ouvre{0%{transform:scale(1)}15%{transform:scale(1.12) rotate(-3deg)}25%,80%{transform:scale(1.14)}100%{transform:scale(1)}}
@keyframes tour-or{0%{transform:scale(.9);filter:brightness(1.8) drop-shadow(0 0 18px #ffd25a)}60%{transform:scale(1.12)}100%{transform:scale(1);filter:drop-shadow(0 0 10px rgba(255,210,90,.8))}}

/* la question de la clé : l'habit Marine (bleu, blanc, or, le soldat qui salue) ou Pirate (bois sombre, rouge, le boulet) */
.fo-tour-question{position:relative;display:grid;gap:8px;padding:12px 12px 12px;border-radius:14px;overflow:hidden;animation:tour-pop .45s cubic-bezier(.2,1.4,.4,1) both}
.fo-tour-q-marine{background:radial-gradient(90% 70% at 85% 0%,rgba(90,169,230,.45),transparent 60%),linear-gradient(160deg,#16386f,#0c2350 70%);box-shadow:inset 0 0 0 2px #e9b949,0 10px 24px -12px #000}
.fo-tour-q-pirate{background:radial-gradient(90% 70% at 85% 0%,rgba(233,120,40,.4),transparent 60%),linear-gradient(160deg,#3a1608,#160a04 75%);box-shadow:inset 0 0 0 2px #c9922e,0 10px 24px -12px #000}
.fo-tour-q-tete{display:flex;align-items:center;gap:8px;padding-right:62px}
.fo-tour-q-logo{width:30px;height:30px;animation:tour-q-logo 1.2s ease-out both}
.fo-tour-q-tete b{flex:1;min-width:0;text-align:left;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#ffe08a}
.fo-tour-q-s{font-style:normal;font-size:16px;font-weight:900;color:#fff;font-variant-numeric:tabular-nums}
.fo-tour-q-soldat{position:absolute;right:6px;top:4px;width:54px;height:auto;animation:tour-q-salut 1.1s ease-out both}
.fo-tour-q-boulet{position:absolute;right:-90px;top:10px;width:70px;height:auto;animation:tour-q-boulet .9s ease-in .15s both}
.fo-tour-q-txt{margin:0;padding-right:44px;text-align:left;font-size:15px;font-weight:800;line-height:1.35;color:#fff}
.fo-tour-question .fo-mar-corde{grid-template-columns:minmax(0,1fr);grid-template-rows:32px}
.fo-tour-q-feu{position:absolute;left:-9px;top:-12px;width:18px;height:24px;border-radius:50% 50% 45% 45%;background:radial-gradient(circle at 50% 70%,#fff6c4,#ffd23a 45%,#ff4a12);animation:mar-braise .22s ease-in-out infinite alternate}
.fo-tour-q-choix{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.fo-tour-q-c{min-height:48px;padding:8px 10px;border:0;border-radius:12px;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1.5px rgba(255,226,138,.45);color:#fff;font:inherit;font-size:13.5px;font-weight:800;line-height:1.2;cursor:pointer;transition:transform .12s,background .12s}
.fo-tour-q-c:hover{background:rgba(255,226,138,.2)}
.fo-tour-q-c:active{transform:scale(.97)}
.fo-tour-q-c:focus-visible{outline:3px solid #ffd25a;outline-offset:2px}
.fo-tour-cle.fo-tour-cle-gagner{background:linear-gradient(180deg,#ffe28a,#f2a51b);box-shadow:0 6px 16px -8px #f2a51b;color:#3a2200;animation:tour-cle-appel 1.8s ease-in-out infinite}
.fo-tour-cle-gagner img{width:30px}
@keyframes tour-cle-appel{0%,100%{box-shadow:0 6px 16px -8px #f2a51b,0 0 0 0 rgba(255,210,90,.55)}50%{box-shadow:0 6px 16px -8px #f2a51b,0 0 0 6px rgba(255,210,90,0)}}
.fo-tour-sans-cle{align-self:center;font-size:12px;color:#b9c4ee}
@keyframes tour-q-logo{0%{transform:scale(.3) rotate(-200deg);opacity:0}70%{transform:scale(1.2) rotate(10deg);opacity:1}100%{transform:none}}
@keyframes tour-q-salut{0%{transform:translateY(40px);opacity:0}60%{transform:translateY(-4px);opacity:1}100%{transform:none}}
@keyframes tour-q-boulet{0%{transform:translateX(0) rotate(0);opacity:1}100%{transform:translateX(-420px) rotate(-30deg);opacity:0}}

/* les boutons : la clé, encaisser, continuer */
.fo-tour-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.fo-tour-cle,.fo-tour-encaisser{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 16px;border:0;border-radius:99px;font:inherit;font-size:13.5px;font-weight:800;cursor:pointer}
.fo-tour-cle{background:rgba(255,226,138,.12);box-shadow:inset 0 0 0 1.5px rgba(255,226,138,.6);color:#ffe9b0}
.fo-tour-cle img{width:34px;height:auto}
.fo-tour-cle-active{background:rgba(255,210,90,.3);box-shadow:inset 0 0 0 2px #ffd25a,0 0 16px rgba(255,200,80,.5);color:#fff}
.fo-tour-cle-active img{animation:tour-cle-tourne .9s ease-in-out infinite}
.fo-tour-cle:disabled{opacity:.5;cursor:default}
.fo-tour-encaisser{background:linear-gradient(180deg,#7fe0a0,#2fa55e);color:#04210f;box-shadow:0 6px 16px -8px #2fa55e}
.fo-tour-encaisser:disabled{opacity:.5;cursor:default}
.fo-tour-continuer{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;height:auto;min-height:48px;padding:6px 18px;margin:0;line-height:1.15;background:linear-gradient(180deg,#ffe28a,#f2a51b)}
.fo-tour-continuer small{font-size:11px;font-weight:700;opacity:.85}
/* continuer ou partir (09/10) : la question s'écrit, puis les deux choix montent */
.fo-tour-decision{display:grid;gap:12px;padding:14px 12px;border-radius:14px;background:radial-gradient(90% 120% at 50% 0%,rgba(255,210,90,.22),transparent 70%),rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,210,90,.4);text-align:center;animation:tour-pop .45s cubic-bezier(.2,1.4,.4,1) both}
.fo-tour-decision-q{margin:0;min-height:2.6em;font-size:18px;font-weight:900;line-height:1.3;color:#fff6d6;text-shadow:0 2px 0 rgba(0,0,0,.4)}
.fo-tour-decision-curseur{display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-2px;background:#ffd25a;animation:tour-curseur .6s steps(1) infinite}
.fo-tour-decision-choix{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;opacity:0;transform:translateY(10px);transition:opacity .35s ease,transform .35s cubic-bezier(.2,1.4,.4,1)}
.fo-tour-decision-pret .fo-tour-decision-choix{opacity:1;transform:none}
.fo-tour-decision .fo-tour-continuer{width:100%}
.fo-tour-partir{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-height:48px;padding:6px 12px;border:0;border-radius:99px;font:inherit;font-size:13.5px;font-weight:800;line-height:1.15;cursor:pointer;background:linear-gradient(180deg,#7fe0a0,#2fa55e);color:#04210f;box-shadow:0 6px 16px -8px #2fa55e}
.fo-tour-partir small{font-size:11px;font-weight:700;opacity:.85}
.fo-tour-partir:disabled,.fo-tour-decision .fo-tour-continuer:disabled{cursor:default}
@keyframes tour-curseur{0%{opacity:1}50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.fo-tour-decision,.fo-tour-decision-curseur{animation:none!important}.fo-tour-decision-choix{transition:none}}
@keyframes tour-cle-tourne{0%,100%{transform:rotate(0)}50%{transform:rotate(-24deg)}}

/* l'étage réussi : Yamato donne, le gain monte */
.fo-tour-gagne{position:relative;display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center;gap:10px;min-height:104px;padding:6px 10px;border-radius:14px;background:radial-gradient(90% 120% at 20% 50%,rgba(255,210,90,.28),transparent 65%),rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,210,90,.35);overflow:visible}
.fo-tour-gagne .fo-res-part i{top:40px}
.fo-tour-yamato-petite{width:96px;height:auto;max-height:120px;object-fit:contain;animation:tour-pop .7s cubic-bezier(.2,1.6,.4,1) both;filter:drop-shadow(0 6px 8px rgba(0,0,0,.5))}
.fo-tour-gagne-txt{display:grid;gap:3px;text-align:left}
.fo-tour-gagne-titre{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:#7fe0a0}
.fo-tour-gagne-gain{font-size:22px;font-weight:900;color:#ffe08a;font-variant-numeric:tabular-nums;animation:tour-gain .8s ease-out both}
.fo-tour-gagne-txt small{font-size:12px;line-height:1.35;color:#e9ddff;font-style:italic}
@keyframes tour-pop{0%{opacity:0;transform:translateY(24px) scale(.6)}100%{opacity:1;transform:none}}
@keyframes tour-gain{0%{opacity:0;transform:translateY(10px) scale(.8)}60%{transform:scale(1.12)}100%{opacity:1;transform:none}}

/* les fins : Kaido (de l'humain au Bolo Breath), Yamato (de la bouderie à la joie) */
.fo-tour-fin{position:relative;display:grid;justify-items:center;gap:6px;min-height:380px;padding:10px 6px 4px;border-radius:16px;overflow:hidden}
.fo-tour-fin .fo-res-part i{top:150px}
.fo-tour-ciel{position:absolute;inset:0;z-index:0;pointer-events:none}
.fo-tour-fin-kaido .fo-tour-ciel{background:radial-gradient(80% 60% at 50% 35%,rgba(90,60,160,.45),transparent 70%),linear-gradient(180deg,#07081a,#1b0f2a)}
.fo-tour-k4 .fo-tour-fin-kaido .fo-tour-ciel,.fo-tour-k5 .fo-tour-fin-kaido .fo-tour-ciel{background:radial-gradient(80% 60% at 50% 45%,rgba(255,90,40,.45),transparent 70%),linear-gradient(180deg,#14040a,#3a0a0a)}
.fo-tour-fin-yamato .fo-tour-ciel{background:radial-gradient(70% 55% at 50% 40%,rgba(255,220,120,.4),transparent 70%),linear-gradient(180deg,#101a3a,#24164a)}
.fo-tour-kaido,.fo-tour-yamato,.fo-tour-kaido-vide,.fo-tour-montant,.fo-tour-nom,.fo-tour-sous,.fo-tour-revele,.fo-tour-ok{position:relative;z-index:1}
.fo-tour-fin .fo-tour-eclair-g,.fo-tour-fin .fo-tour-eclair-d{z-index:2}
.fo-tour-fin .fo-res-part{position:absolute;z-index:2}
.fo-tour-kaido,.fo-tour-yamato{width:min(78%,250px);height:220px;object-fit:contain;filter:drop-shadow(0 12px 18px rgba(0,0,0,.6))}
.fo-tour-kaido-vide{display:block;height:220px}
.fo-tour-kaido{animation:tour-kaido-arrive .9s cubic-bezier(.2,1.3,.4,1) both}
.fo-tour-kaido-4,.fo-tour-kaido-5{width:min(96%,320px);height:240px;animation:tour-dragon-arrive 1.1s cubic-bezier(.2,1.2,.4,1) both}
.fo-tour-yamato{animation:tour-pop .8s cubic-bezier(.2,1.6,.4,1) both}
.fo-tour-yamato-5{animation:tour-pop .8s cubic-bezier(.2,1.6,.4,1) both,tour-saut 1.1s ease-in-out .8s infinite}
.fo-tour-cri{position:absolute;top:14px;left:0;right:0;z-index:3;font-size:26px;font-weight:900;letter-spacing:.04em;color:#ffe08a;-webkit-text-stroke:2px #3a0a0a;paint-order:stroke;text-shadow:0 4px 0 #3a0a0a;animation:tour-cri 1.4s ease-out .5s both}
.fo-tour-k1 .fo-tour-cri{font-size:20px;color:#e6dcff}
.fo-tour-k5 .fo-tour-cri{font-size:30px;color:#ffb02a}
.fo-tour-montant{font-size:32px;font-weight:900;color:#ffe08a;font-variant-numeric:tabular-nums;text-shadow:0 0 18px rgba(255,200,80,.45);animation:tour-gain .9s ease-out .3s both}
.fo-tour-montant-perte{color:#ff8a8a;text-shadow:0 0 18px rgba(255,60,60,.45)}
.fo-tour-nom{font-size:15px;color:#fff}
.fo-tour-sous{max-width:34ch;font-size:13px;line-height:1.4;color:#dde3ff}
.fo-tour-revele{font-size:12px;color:#b9c4ee}
.fo-tour-ok{margin-top:4px}
.fo-tour-nuages{position:absolute;inset:0;z-index:0;pointer-events:none}
.fo-tour-nuages i{position:absolute;left:-30%;width:52%;height:62px;background:center/contain no-repeat;opacity:.8;animation:tour-nuage 5s linear calc(var(--k) * -1.6s) infinite}
.fo-tour-nuages i:nth-child(1){top:3%}
.fo-tour-nuages i:nth-child(2){top:20%}
.fo-tour-nuages i:nth-child(3){top:37%;opacity:.6}
.fo-tour-souffle{position:absolute;left:0;right:0;top:34%;z-index:2;height:110px;pointer-events:none}
.fo-tour-souffle i{position:absolute;top:0;left:30%;width:120px;height:110px;background:center/contain no-repeat;opacity:0;filter:drop-shadow(0 0 16px rgba(255,140,40,.9));animation:tour-souffle 1.6s ease-in calc(.9s + var(--k) * .12s) 2 both}
.fo-tour-k5{animation:tour-secousse-forte .5s linear .9s 4}
.fo-tour-k4{animation:tour-secousse .45s linear .3s 3}
.fo-tour-k3{animation:tour-secousse .4s linear .5s 2}
.fo-tour-artifices{position:absolute;inset:0;z-index:0;pointer-events:none}
.fo-tour-artifices i{position:absolute;width:4px;height:4px;border-radius:50%;background:#fff6d0;opacity:0;box-shadow:46px 0px 0 2px #ffd25a,31px 13px 0 1px #ff6b8a,33px 33px 0 2px #6be0a0,13px 31px 0 1px #6bb8ff,0px 46px 0 2px #ffd25a,-13px 31px 0 1px #ff6b8a,-33px 33px 0 2px #6be0a0,-31px 13px 0 1px #6bb8ff,-46px 0px 0 2px #ffd25a,-31px -13px 0 1px #ff6b8a,-33px -33px 0 2px #6be0a0,-13px -31px 0 1px #6bb8ff,0px -46px 0 2px #ffd25a,13px -31px 0 1px #ff6b8a,33px -33px 0 2px #6be0a0,31px -13px 0 1px #6bb8ff;filter:drop-shadow(0 0 4px rgba(255,230,150,.9));animation:tour-artifice 1.5s ease-out calc(var(--k) * .4s) infinite}
.fo-tour-artifices i:nth-child(1){left:16%;top:12%}
.fo-tour-artifices i:nth-child(2){right:16%;top:8%}
.fo-tour-artifices i:nth-child(3){left:10%;top:34%}
.fo-tour-artifices i:nth-child(4){right:12%;top:30%}
@keyframes tour-kaido-arrive{0%{opacity:0;transform:translateY(40px) scale(.7)}100%{opacity:1;transform:none}}
@keyframes tour-dragon-arrive{0%{opacity:0;transform:translate(60%,-10%) scale(.6) rotate(12deg)}70%{transform:translate(-4%,2%) scale(1.06) rotate(-3deg)}100%{opacity:1;transform:none}}
@keyframes tour-saut{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes tour-cri{0%{opacity:0;transform:scale(.4) rotate(-6deg)}20%{opacity:1;transform:scale(1.2) rotate(3deg)}35%{transform:scale(1) rotate(0)}80%{opacity:1}100%{opacity:0;transform:scale(1.1)}}
@keyframes tour-nuage{0%{transform:translateX(0)}100%{transform:translateX(230%)}}
@keyframes tour-souffle{0%{opacity:0;transform:translateX(0) scale(.4)}15%{opacity:1}100%{opacity:0;transform:translateX(-160%) scale(2.2)}}
@keyframes tour-secousse{0%,100%{transform:translate(-50%,-50%)}25%{transform:translate(calc(-50% - 4px),calc(-50% + 2px))}75%{transform:translate(calc(-50% + 4px),calc(-50% - 2px))}}
@keyframes tour-secousse-forte{0%,100%{transform:translate(-50%,-50%)}20%{transform:translate(calc(-50% - 8px),calc(-50% + 4px)) rotate(-1deg)}40%{transform:translate(calc(-50% + 7px),calc(-50% - 3px)) rotate(1deg)}60%{transform:translate(calc(-50% - 6px),calc(-50% - 4px))}80%{transform:translate(calc(-50% + 5px),calc(-50% + 3px))}}
@keyframes tour-artifice{0%{opacity:0;transform:scale(.1)}12%{opacity:1}70%{opacity:.9}100%{opacity:0;transform:scale(1.25) translateY(8px)}}

/* LES ÉVÉNEMENTS RARES (09/10) : la question de Kaido (l'alcool), Yamato qui souffle, le coffre piégé, les six fins rares */
.fo-tour-q-kaido{background:radial-gradient(90% 70% at 85% 0%,rgba(190,90,255,.4),transparent 60%),linear-gradient(160deg,#2a0e3a,#12061c 75%);box-shadow:inset 0 0 0 2px #b98aff,0 10px 24px -12px #000}
.fo-tour-q-kaido-tete{width:40px;height:40px;object-fit:contain;border-radius:50%;background:rgba(255,255,255,.08)}
.fo-tour-q-gourde{position:absolute;right:12px;top:10px;width:30px;height:42px;border-radius:40% 40% 46% 46% / 30% 30% 60% 60%;background:linear-gradient(160deg,#e0a050,#8a4a14);box-shadow:inset 0 0 0 2px #4a2a0a;transform-origin:50% 0;animation:tour-gourde 1.2s ease-in-out infinite}
.fo-tour-q-gourde::before{content:"";position:absolute;left:9px;top:-7px;width:12px;height:9px;border-radius:3px;background:#5a3410}
.fo-tour-q-kaido .fo-tour-q-c{box-shadow:inset 0 0 0 1.5px rgba(200,160,255,.6)}
.fo-tour-aide{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.fo-tour-aide-y,.fo-tour-aide-k{display:flex;align-items:center;gap:6px;min-width:0}
.fo-tour-aide img{width:44px;height:54px;object-fit:contain;flex:none;filter:drop-shadow(0 4px 4px rgba(0,0,0,.5))}
.fo-tour-aide i{min-width:0;font-style:normal;font-size:11.5px;font-weight:800;line-height:1.2;padding:5px 7px;border-radius:10px}
.fo-tour-aide-y{animation:tour-pop .5s cubic-bezier(.2,1.6,.4,1) .3s both}
.fo-tour-aide-y i{background:#fff6d6;color:#3a2a06}
.fo-tour-aide-k{flex-direction:row-reverse;animation:tour-pop .5s cubic-bezier(.2,1.6,.4,1) 1s both}
.fo-tour-aide-k i{background:#ffd0d0;color:#5a0a0a;text-transform:uppercase;animation:tour-hurle .25s linear 1.2s 6}
.fo-tour-q-soufflee{animation:tour-souffle-rep 1s ease-in-out .6s infinite}
@keyframes tour-gourde{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(10deg)}}
@keyframes tour-hurle{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px) rotate(-2deg)}75%{transform:translateX(3px) rotate(2deg)}}
@keyframes tour-souffle-rep{0%,100%{box-shadow:inset 0 0 0 1.5px rgba(255,226,138,.45)}50%{box-shadow:inset 0 0 0 3px #7fe0a0,0 0 16px rgba(127,224,160,.8);background:rgba(127,224,160,.18)}}
.fo-tour-arche-piege img:first-child{animation:c3-tremble 90ms linear infinite}
.fo-tour-arche .fo-tour-boum{position:absolute;left:50%;top:50%;width:150%;max-width:none;z-index:3;transform:translate(-50%,-50%) scale(0);animation:tour-boum .5s ease-out .42s both}
@keyframes tour-boum{0%{transform:translate(-50%,-50%) scale(0);opacity:1}70%{transform:translate(-50%,-50%) scale(1.3);opacity:1}100%{transform:translate(-50%,-50%) scale(1.5);opacity:.7}}
.fo-tour-fin-rare .fo-tour-ciel{background:radial-gradient(80% 60% at 50% 35%,rgba(90,60,160,.45),transparent 70%),linear-gradient(180deg,#07081a,#1b0f2a)}
.fo-tour-fin-absent .fo-tour-ciel{background:radial-gradient(70% 55% at 50% 40%,rgba(120,190,255,.35),transparent 70%),linear-gradient(180deg,#0c1a3a,#1a2450)}
.fo-tour-fin-dette .fo-tour-ciel{background:radial-gradient(70% 55% at 50% 40%,rgba(120,230,160,.35),transparent 70%),linear-gradient(180deg,#081a12,#1a2a20)}
.fo-tour-fin-attaque .fo-tour-ciel,.fo-tour-fin-piege .fo-tour-ciel{background:radial-gradient(80% 60% at 50% 45%,rgba(255,90,40,.45),transparent 70%),linear-gradient(180deg,#14040a,#3a0a0a)}
.fo-tour-fin-marine .fo-tour-ciel{background:radial-gradient(80% 60% at 50% 30%,rgba(255,255,255,.3),transparent 70%),linear-gradient(180deg,#1a4a8a,#0c2350)}
.fo-tour-fin-ivre .fo-tour-ciel{background:radial-gradient(70% 55% at 50% 50%,rgba(200,120,255,.3),transparent 70%),linear-gradient(180deg,#160a26,#2a1240)}
.fo-tour-yamato-pleure{animation:tour-pop .8s cubic-bezier(.2,1.6,.4,1) both,tour-sanglot .5s ease-in-out .9s infinite}
@keyframes tour-sanglot{0%,100%{transform:translateY(0)}30%{transform:translateY(3px) scaleY(.98)}60%{transform:translateY(-1px)}}
.fo-tour-larmes{position:absolute;left:0;right:0;top:66px;height:180px;z-index:2;pointer-events:none}
.fo-tour-larmes i{position:absolute;top:0;width:8px;height:12px;border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;background:linear-gradient(180deg,#e8f6ff,#6cc4ff);opacity:0;animation:tour-larme 1.1s ease-in calc(.8s + var(--k) * .22s) infinite}
.fo-tour-larmes i:nth-child(odd){left:45%}
.fo-tour-larmes i:nth-child(even){left:53%}
@keyframes tour-larme{0%{opacity:0;transform:translateY(0)}15%{opacity:1}100%{opacity:0;transform:translateY(120px)}}
.fo-tour-perso-dette{animation:tour-kaido-arrive .9s cubic-bezier(.2,1.3,.4,1) both,tour-saut .5s ease-in-out .9s 4}
.fo-tour-perso-attaque{animation:tour-attaque .9s cubic-bezier(.2,1.3,.4,1) both}
@keyframes tour-attaque{0%{opacity:0;transform:translateX(-60%) scale(.6) rotate(-10deg)}60%{opacity:1;transform:translateX(8%) scale(1.15) rotate(4deg)}100%{opacity:1;transform:none}}
.fo-tour-r-attaque{animation:tour-secousse-forte .5s linear .5s 3}
.fo-tour-r-piege{animation:tour-secousse-forte .5s linear 0s 4}
.fo-tour-perso-ivre{transform-origin:50% 95%;animation:tour-ivre 3.2s ease-in-out both}
@keyframes tour-ivre{0%{opacity:0;transform:translateY(30px)}10%{opacity:1;transform:none}24%{transform:rotate(-8deg)}38%{transform:rotate(9deg) translateX(6px)}52%{transform:rotate(-12deg) translateX(-6px)}66%{transform:rotate(7deg)}82%{transform:rotate(-5deg) translateY(4px)}100%{opacity:1;transform:translateY(-96px) rotate(-80deg) scale(.74)}}
.fo-tour-zzz{position:absolute;left:0;right:0;top:40px;height:220px;z-index:2;pointer-events:none}
.fo-tour-zzz i{position:absolute;font-style:normal;font-weight:900;font-size:17px;color:#f2e6ff;-webkit-text-stroke:1px #2a1240;paint-order:stroke;opacity:0;animation:tour-hic .9s ease-out both}
.fo-tour-zzz i:nth-of-type(1){left:60%;top:20px;animation-delay:.9s}
.fo-tour-zzz i:nth-of-type(2){left:22%;top:44px;animation-delay:1.7s}
.fo-tour-zzz b{position:absolute;left:30%;top:150px;font-size:22px;color:#cfe0ff;opacity:0;animation:tour-z 2.4s ease-out 3.2s infinite}
.fo-tour-zzz b:nth-of-type(2){animation-delay:3.8s}
.fo-tour-zzz b:nth-of-type(3){animation-delay:4.4s}
@keyframes tour-hic{0%{opacity:0;transform:scale(.4)}30%{opacity:1;transform:scale(1.25)}100%{opacity:0;transform:translateY(-22px)}}
@keyframes tour-z{0%{opacity:0;transform:translate(0,0) scale(.6)}20%{opacity:1}100%{opacity:0;transform:translate(34px,-90px) scale(1.4)}}
.fo-tour-coffre-piege{position:relative;z-index:1;width:120px;height:auto;margin-top:96px;margin-bottom:4px;filter:brightness(.55) sepia(.6) drop-shadow(0 10px 14px rgba(0,0,0,.7));animation:tour-carbonise 1s ease-out both}
@keyframes tour-carbonise{0%{transform:scale(1.2) rotate(-6deg)}100%{transform:none}}
.fo-tour-explosion{position:absolute;left:50%;top:30px;width:260px;height:260px;margin-left:-130px;z-index:2;pointer-events:none}
.fo-tour-explosion img{width:100%;height:100%;animation:tour-explose 1.1s ease-out both}
.fo-tour-explosion i{position:absolute;left:50%;top:50%;width:10px;height:10px;border-radius:2px;background:#6a3410;opacity:0;--a:calc(var(--k) * 45deg);animation:tour-eclat .9s ease-out both}
@keyframes tour-explose{0%{transform:scale(.1);opacity:1}40%{transform:scale(1.1);opacity:1}100%{transform:scale(1.35);opacity:0}}
@keyframes tour-eclat{0%{opacity:1;transform:rotate(var(--a)) translateX(0) rotate(0)}100%{opacity:0;transform:rotate(var(--a)) translateX(140px) rotate(400deg)}}
.fo-tour-marins{position:relative;z-index:1;display:flex;align-items:flex-end;justify-content:center;gap:4px;width:100%;height:220px}
.fo-tour-marine-logo{position:absolute;top:8px;left:50%;width:80px;height:auto;margin-left:-40px;animation:tour-q-logo 1.2s ease-out both}
.fo-tour-marin{width:31%;max-width:96px;height:auto;filter:drop-shadow(0 8px 10px rgba(0,0,0,.5));animation:tour-marche .8s ease-out calc(.4s + var(--k) * .2s) both}
@keyframes tour-marche{0%{opacity:0;transform:translateX(120px)}100%{opacity:1;transform:none}}
.fo-tour-fin-marine .fo-tour-cri{top:96px;color:#fff;-webkit-text-stroke:2px #0c2350;text-shadow:0 4px 0 #0c2350}
.fo-tour-fin-ivre .fo-tour-cri{color:#f2e6ff}
@media (prefers-reduced-motion:reduce){
  .fo-tour-q-gourde,.fo-tour-aide-y,.fo-tour-aide-k,.fo-tour-aide-k i,.fo-tour-q-soufflee,.fo-tour-arche-piege img:first-child,.fo-tour-arche .fo-tour-boum,.fo-tour-yamato-pleure,.fo-tour-larmes i,.fo-tour-perso-dette,.fo-tour-perso-attaque,.fo-tour-r-attaque,.fo-tour-r-piege,.fo-tour-perso-ivre,.fo-tour-zzz i,.fo-tour-zzz b,.fo-tour-coffre-piege,.fo-tour-explosion img,.fo-tour-explosion i,.fo-tour-marine-logo,.fo-tour-marin{animation:none!important}
  .fo-tour-q-soufflee{box-shadow:inset 0 0 0 3px #7fe0a0}.fo-tour-zzz b{opacity:1}.fo-tour-explosion img{opacity:.5}
}

/* le panneau du « + » : le bouton du coffre Tour */
.fo-cof-p-tour{background:linear-gradient(100deg,rgba(40,50,140,.55),rgba(120,40,90,.45));box-shadow:inset 0 0 0 1px rgba(160,180,255,.5);color:#e3e8ff}

@media (max-width:360px){.fo-tour-scene{grid-template-columns:minmax(0,1fr) 112px}.fo-tour-arche{min-height:74px}}
@media (prefers-reduced-motion:reduce){
  .cof-tour-hero,.cof-tour-eclair,.fo-tour-ouv-ferme,.fo-tour-ouv-ouverte,.fo-tour-flash,.fo-tour-eclair-g,.fo-tour-eclair-d,.fo-tour-arche img,.fo-tour-arche-visee,.fo-tour-cle-active img,
  .fo-tour-question,.fo-tour-q-logo,.fo-tour-q-soldat,.fo-tour-q-boulet,.fo-tour-q-feu,.fo-tour-cle-gagner,.fo-tour-yamato-petite,.fo-tour-gagne-gain,.fo-tour-kaido,.fo-tour-yamato,.fo-tour-cri,.fo-tour-montant,.fo-tour-nuages i,.fo-tour-souffle i,.fo-tour-artifices i,.fo-tour-k3,.fo-tour-k4,.fo-tour-k5{animation:none!important}
  .fo-tour-ouv-ferme{opacity:0}.fo-tour-ouv-ouverte{opacity:1}.fo-tour-cri{opacity:1}
}

/* ── la carte du fil ── */
.cof-room{background:radial-gradient(90% 130% at 14% 50%,rgba(91,184,255,.36),transparent 60%),linear-gradient(100deg,#08142a 0%,#102a52 48%,#2a2410 82%,#5a4408 100%);box-shadow:inset 0 0 0 1px rgba(159,216,255,.4);color:#eaf4ff}
.cof-room.cof-petit{display:grid;grid-template-columns:104px minmax(0,1fr) auto;column-gap:10px;row-gap:8px;align-items:center}
.cof-room.cof-petit .cof-scene{grid-column:1;grid-row:1 / 3;width:104px;height:132px;position:relative}
.cof-room.cof-petit .cof-texte{grid-column:2 / 4;grid-row:1}
.cof-room.cof-petit .cof-ouvrir{grid-column:2 / 4;grid-row:2;justify-self:end;margin:0;background:linear-gradient(180deg,#ffe066,#f6c21c);color:#2a1e02}
.cof-room.cof-petit .cof-res{grid-column:1 / 4}
.cof-room .cof-rang{color:#9fd8ff}
.cof-room-dome{position:absolute;left:50%;top:50%;width:112px;height:112px;transform:translate(-50%,-50%);animation:room-respire 3.6s ease-in-out infinite;pointer-events:none}
.cof-room-law{position:absolute;left:50%;bottom:0;height:126px;width:auto;transform:translateX(-50%);filter:drop-shadow(0 6px 8px rgba(0,0,0,.5));pointer-events:none}
.cof-room-places{display:flex;gap:6px;margin-top:6px}
.cof-room-places i{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;border:1.5px dashed rgba(159,216,255,.55);font-style:normal;font-size:10px;font-weight:800;color:#cfeeff;overflow:hidden}
.cof-room-places i.cof-room-p{border-style:solid;background:rgba(43,107,182,.55)}
.cof-room-places i.cof-room-p-moi{border-style:solid;border-color:#ffe066;background:rgba(246,194,28,.35);color:#fff6c8}
.cof-room-dedans{box-shadow:inset 0 0 0 2px #ffe066,0 0 18px rgba(246,194,28,.35)}
.cof-room-msg{grid-column:1 / 4;font-size:12px;color:#ffb0b0}
@keyframes room-respire{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.9}50%{transform:translate(-50%,-50%) scale(1.05);opacity:1}}

/* ── la fenêtre ── */
.fo-room{position:fixed;left:50%;top:50%;z-index:91;transform:translate(-50%,-50%);width:min(94vw,400px);max-height:calc(100dvh - 20px);overflow:auto;overscroll-behavior:contain;padding:10px 14px 14px;border-radius:20px;color:#eaf4ff;background:radial-gradient(120% 70% at 50% 18%,rgba(91,184,255,.28),transparent 60%),linear-gradient(180deg,#08142a,#0c1f3e 60%,#1a1608);box-shadow:inset 0 0 0 1px rgba(159,216,255,.45),0 24px 60px -20px #000;text-align:center}
.fo-room-tete{display:flex;align-items:center;gap:8px;min-height:32px}
.fo-room-titre{flex:1;min-width:0;text-align:left;font-size:12px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:#ffe066}
.fo-room-chrono{font-size:16px;font-weight:900;font-variant-numeric:tabular-nums;color:#fff;padding:2px 10px;border-radius:99px;background:rgba(91,184,255,.2);box-shadow:inset 0 0 0 1px rgba(159,216,255,.5)}
.fo-room-x{width:36px;height:36px;border:0;border-radius:99px;background:rgba(255,255,255,.08);color:#fff;font-size:22px;line-height:1;cursor:pointer}
.fo-room-x:focus-visible,.fo-room-quitter:focus-visible,.fo-room-vote-c:focus-visible{outline:3px solid #ffe066;outline-offset:2px}
.fo-room-scene{position:relative;height:220px;margin:4px 0 2px;overflow:hidden;border-radius:16px;background:radial-gradient(80% 70% at 50% 60%,rgba(43,107,182,.35),transparent 70%)}
.fo-room-dome{position:absolute;left:50%;top:50%;width:230px;height:230px;transform:translate(-50%,-50%) scale(.75);opacity:.75;pointer-events:none}
.fo-room-dome-ouvre{animation:room-ouvre 1.2s cubic-bezier(.2,1.2,.3,1) both}
.fo-room-dome-ferme{animation:room-ferme 1.4s ease-in .9s both}
.fo-room-law{position:absolute;left:50%;bottom:-4px;height:200px;width:auto;transform:translateX(-50%);filter:drop-shadow(0 10px 14px rgba(0,0,0,.6));animation:room-arrive .7s ease-out both}
.fo-room-law-geste{animation:room-geste .5s ease-in-out 2}
.fo-room-cri{position:absolute;left:0;right:0;top:12px;z-index:4;font-size:28px;font-weight:900;letter-spacing:.06em;color:#cfeeff;-webkit-text-stroke:2px #0a2a5a;paint-order:stroke;text-shadow:0 4px 0 #0a2a5a,0 0 22px rgba(91,184,255,.8);animation:room-cri 1.2s ease-out both}
.fo-room-ev-attaque .fo-room-cri,.fo-room-ev-bombe .fo-room-cri{color:#ffe27a;-webkit-text-stroke-color:#5a0a0a;text-shadow:0 4px 0 #5a0a0a,0 0 22px rgba(255,120,40,.8)}
.fo-room-bulle{position:absolute;left:10px;right:10px;bottom:10px;z-index:5;padding:7px 10px;border-radius:12px;background:#fff8e4;color:#1d1a20;font-size:13px;font-weight:800;line-height:1.3;box-shadow:0 6px 14px -6px #000;animation:room-pop .4s cubic-bezier(.2,1.5,.4,1) .2s both}
.fo-room-bulle-pika{background:#fff36a;color:#3a2a00}
.fo-room-bulle-fleurs{background:#ffd6e8;color:#4a1030}
/* les 4 places : des cubes de lumière bleue, la coupe de Kikoku, le cœur arraché */
.fo-room-salle{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:8px 0}
.fo-room-place{display:grid;justify-items:center;gap:3px;min-width:0;animation:room-pop .45s cubic-bezier(.2,1.5,.4,1) calc(var(--k) * .08s) both}
.fo-room-cube{position:relative;width:62px;height:62px}
.fo-room-cube img{position:absolute;inset:0;width:100%;height:100%;transition:transform .5s ease-in,opacity .5s ease-in}
.fo-room-cube-h{clip-path:polygon(0 0,100% 0,100% 40%,0 62%)}
.fo-room-cube-b{clip-path:polygon(0 62%,100% 40%,100% 100%,0 100%)}
.fo-room-vide .fo-room-cube{opacity:.35;filter:grayscale(.6)}
.fo-room-moi .fo-room-cube{filter:drop-shadow(0 0 8px rgba(255,224,102,.9))}
.fo-room-coupe .fo-room-cube-h{transform:translate(-10px,-14px) rotate(-16deg);opacity:.25}
.fo-room-coupe .fo-room-cube-b{transform:translate(8px,14px) rotate(10deg);opacity:.25}
.fo-room-coupe .fo-room-pseudo{opacity:.5;text-decoration:line-through}
.fo-room-gagnant .fo-room-cube{animation:room-or 1s ease-out both}
.fo-room-frappe .fo-room-cube{animation:room-frappe .5s linear 3}
.fo-room-tue .fo-room-cube-h,.fo-room-tue .fo-room-cube-b{opacity:.35;filter:grayscale(1)}
.fo-room-coeur{position:absolute;left:12px;top:12px;width:38px!important;height:38px!important;z-index:2;animation:room-coeur 1.4s cubic-bezier(.2,1.3,.4,1) both}
.fo-room-lame{position:absolute;left:-70px;top:22px;width:200px!important;height:24px!important;z-index:3;transform:rotate(-22deg);animation:room-lame .45s ease-in both;filter:drop-shadow(0 0 8px #fff)}
.fo-room-lame-pika{left:auto;right:-10px;top:40px;animation-duration:.6s}
.fo-room-pseudo{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:#eaf4ff}
.fo-room-moi .fo-room-pseudo{color:#ffe066}
.fo-room-gain{font-style:normal;font-size:13px;font-weight:900;color:#7fe0a0;font-variant-numeric:tabular-nums;animation:room-pop .4s ease-out both}
.fo-room-perte{color:#ff8a8a}
/* le Counter Shock, la flemme, les fleurs, Pikachu, la bombe */
.fo-room-eclairs{position:absolute;inset:0;z-index:3;pointer-events:none}
.fo-room-eclairs i{position:absolute;top:0;left:calc(8% + var(--k) * 15%);width:10px;height:100%;background:linear-gradient(180deg,transparent,#fff 20%,#9fd8ff 50%,#fff 80%,transparent);clip-path:polygon(40% 0,100% 30%,55% 34%,100% 70%,0 100%,45% 60%,0 56%);opacity:0;animation:room-eclair .5s steps(2) calc(var(--k) * .12s) 3}
.fo-room-zzz{position:absolute;right:22%;top:24%;z-index:3}
.fo-room-zzz b{position:absolute;font-size:22px;color:#cfeeff;opacity:0;animation:room-z 1.8s ease-out infinite}
.fo-room-zzz b:nth-child(2){animation-delay:.6s}
.fo-room-zzz b:nth-child(3){animation-delay:1.2s}
.fo-room-fleurs{position:absolute;inset:0;z-index:3;pointer-events:none}
.fo-room-robin,.fo-room-nami{position:absolute;bottom:-6px;height:150px;width:auto;filter:drop-shadow(0 8px 10px rgba(0,0,0,.5));animation:room-arrive .7s ease-out both}
.fo-room-robin{left:4px}
.fo-room-nami{right:4px;animation-delay:.25s}
.fo-room-fleurs i{position:absolute;top:-10px;left:calc(4% + var(--k) * 6.8%);width:14px;height:14px;border-radius:60% 0 60% 0;background:#f4a6c8;box-shadow:inset 0 0 0 2px #c8508a;opacity:0;animation:room-petale 2.2s ease-in calc(var(--k) * .09s) both}
.fo-room-pika{position:absolute;inset:0;z-index:3}
.fo-room-pikachu{position:absolute;right:8px;bottom:6px;width:108px;height:auto;animation:room-saute .6s ease-out both,room-trepigne .4s ease-in-out .6s infinite}
.fo-room-pancarte{position:absolute;right:104px;bottom:60px;width:110px;height:auto;animation:room-pop .4s ease-out .3s both}
.fo-room-pika-fuit .fo-room-pikachu{animation:room-fuit .9s ease-in .35s both}
.fo-room-pika-fuit .fo-room-pancarte{animation:room-tombe .7s ease-in .3s both}
.fo-room-bombe{position:absolute;left:50%;top:50%;width:130px;height:130px;transform:translate(-50%,-50%);animation:room-tremble .14s linear infinite}
.fo-room-bombe-boum{animation:room-boum .5s ease-out both}
.fo-room-flash{position:absolute;inset:0;z-index:4;background:radial-gradient(circle,#fffbe0,#ffb02a 40%,rgba(90,16,4,0) 75%);animation:room-flash 1.2s ease-out both}
.fo-room-ev-bombe.fo-room-e-anim,.fo-room-ev-attaque.fo-room-e-anim{animation:room-secousse .45s linear 1.6s 3}
/* le vote */
.fo-room-vote{display:grid;gap:8px;padding:10px;border-radius:14px;background:rgba(200,16,46,.16);box-shadow:inset 0 0 0 1.5px rgba(255,120,140,.5);animation:room-pop .4s ease-out both}
.fo-room-vote-q{margin:0;font-size:16px;font-weight:900;color:#fff}
.fo-room-vote-q i{font-style:normal;color:#ffb0b8;margin-left:6px;font-variant-numeric:tabular-nums}
.fo-room-vote-corde{display:block;height:6px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden}
.fo-room-vote-corde i{display:block;height:100%;background:linear-gradient(90deg,#ff5a6a,#ffd25a);transition:width .25s linear}
.fo-room-vote-choix{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.fo-room-vote-c{min-height:44px;padding:6px;border:0;border-radius:12px;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1.5px rgba(255,160,170,.5);color:#fff;font:inherit;font-size:13px;font-weight:800;cursor:pointer;overflow:hidden;text-overflow:ellipsis}
.fo-room-vote-mien{background:rgba(200,16,46,.55);box-shadow:inset 0 0 0 2px #ff8a9a}
.fo-room-vote-c:disabled{opacity:.6;cursor:default}
.fo-room-vote-n{font-size:12px;color:#ffd0d6}
/* l'attente, la fin */
.fo-room-attente{display:grid;gap:6px;justify-items:center;font-size:13px}
.fo-room-attente p{margin:0}
.fo-room-attente small{color:#b9cde8}
.fo-room-quitter{min-height:44px;padding:0 18px;border:0;border-radius:99px;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1.5px rgba(159,216,255,.5);color:#eaf4ff;font:inherit;font-weight:800;cursor:pointer}
.fo-room-fin{display:grid;gap:4px;justify-items:center;padding:10px;border-radius:14px;background:rgba(255,255,255,.05);animation:room-pop .45s cubic-bezier(.2,1.4,.4,1) both}
.fo-room-fin-titre{font-size:15px;color:#ffe066;letter-spacing:.04em}
.fo-room-fin-montant{font-size:32px;font-weight:900;font-variant-numeric:tabular-nums;color:#eaf4ff}
.fo-room-fin-gagne .fo-room-fin-montant{color:#7fe0a0;text-shadow:0 0 18px rgba(127,224,160,.5)}
.fo-room-fin-perd .fo-room-fin-montant{color:#ff8a8a;text-shadow:0 0 18px rgba(255,60,60,.4)}
.fo-room-fin-sous{font-size:13px;color:#cfdcf2}
.fo-room-msg{margin:6px 0 0;font-size:12px;color:#ffb0b0}
.fo-room .fo-res-part{position:absolute;z-index:3}
@keyframes room-ouvre{0%{transform:translate(-50%,-50%) scale(.05);opacity:0}60%{opacity:1}100%{transform:translate(-50%,-50%) scale(1);opacity:1}}
@keyframes room-ferme{to{transform:translate(-50%,-50%) scale(.05);opacity:0}}
@keyframes room-arrive{from{opacity:0;transform:translateX(-50%) translateY(24px)}to{opacity:1;transform:translateX(-50%)}}
@keyframes room-geste{0%,100%{transform:translateX(-50%) rotate(0)}50%{transform:translateX(-50%) rotate(-5deg) scale(1.04)}}
@keyframes room-cri{0%{opacity:0;transform:scale(.4)}20%{opacity:1;transform:scale(1.18)}35%{transform:scale(1)}85%{opacity:1}100%{opacity:0}}
@keyframes room-pop{from{opacity:0;transform:translateY(12px) scale(.85)}to{opacity:1;transform:none}}
@keyframes room-or{0%{filter:brightness(1)}40%{filter:brightness(2) drop-shadow(0 0 18px #ffd25a)}100%{filter:drop-shadow(0 0 12px #ffd25a)}}
@keyframes room-frappe{0%,100%{transform:translate(0)}25%{transform:translate(-3px,2px)}75%{transform:translate(3px,-2px)}}
@keyframes room-coeur{0%{transform:translateY(0) scale(.4);opacity:0}40%{opacity:1;transform:translateY(-34px) scale(1.15)}100%{transform:translateY(-40px) scale(1)}}
@keyframes room-lame{from{transform:translateX(-120px) rotate(-22deg);opacity:0}30%{opacity:1}to{transform:translateX(120px) rotate(-22deg);opacity:0}}
@keyframes room-eclair{0%,100%{opacity:0}50%{opacity:1}}
@keyframes room-z{0%{opacity:0;transform:translate(0,0) scale(.6)}20%{opacity:1}100%{opacity:0;transform:translate(26px,-60px) scale(1.3)}}
@keyframes room-petale{0%{opacity:0;transform:translateY(0) rotate(0)}10%{opacity:1}100%{opacity:0;transform:translateY(230px) rotate(320deg)}}
@keyframes room-saute{0%{transform:translateX(140px) translateY(-30px);opacity:0}60%{transform:translateX(-6px) translateY(0);opacity:1}100%{transform:none}}
@keyframes room-trepigne{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes room-fuit{to{transform:translateX(220px) translateY(-80px) rotate(40deg);opacity:0}}
@keyframes room-tombe{to{transform:translateY(160px) rotate(-30deg);opacity:0}}
@keyframes room-tremble{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(calc(-50% + 2px),calc(-50% - 1px))}}
@keyframes room-boum{0%{transform:translate(-50%,-50%) scale(1)}100%{transform:translate(-50%,-50%) scale(2.2);opacity:0}}
@keyframes room-flash{0%{opacity:0}15%{opacity:1}100%{opacity:0}}
@keyframes room-secousse{0%,100%{transform:translate(-50%,-50%)}25%{transform:translate(calc(-50% - 6px),calc(-50% + 3px))}75%{transform:translate(calc(-50% + 6px),calc(-50% - 3px))}}

/* le panneau du « + » : le bouton du coffre Room */
.fo-cof-p-room{background:linear-gradient(100deg,rgba(43,107,182,.6),rgba(246,194,28,.35));box-shadow:inset 0 0 0 1px rgba(159,216,255,.55);color:#eaf4ff}
@media (prefers-reduced-motion:reduce){
  .cof-room-dome,.fo-room-dome-ouvre,.fo-room-dome-ferme,.fo-room-law,.fo-room-law-geste,.fo-room-cri,.fo-room-bulle,.fo-room-place,.fo-room-gagnant .fo-room-cube,.fo-room-frappe .fo-room-cube,
  .fo-room-coeur,.fo-room-lame,.fo-room-eclairs i,.fo-room-zzz b,.fo-room-robin,.fo-room-nami,.fo-room-fleurs i,.fo-room-pikachu,.fo-room-pancarte,.fo-room-bombe,.fo-room-flash,.fo-room-vote,.fo-room-fin,.fo-room-gain,
  .fo-room-ev-bombe.fo-room-e-anim,.fo-room-ev-attaque.fo-room-e-anim{animation:none!important}
  .fo-room-cube img{transition:none}.fo-room-dome-ouvre{transform:translate(-50%,-50%) scale(1);opacity:1}.fo-room-cri{opacity:1}
}

:root .fo,:root .fo[data-chat]{--fo-fond:#0f0a1c;--fo-surface:rgba(28,19,46,.92);--fo-opaque:#1a1230;--fo-sourd:#aea7c6;--fo-sourd2:#b7b0cd}
:root .fo:not(.fo-sans-fond)::before,:root .fo[data-chat]:not(.fo-sans-fond)::before{background:radial-gradient(120% 60% at 70% -12%,rgba(168,85,247,.2),transparent 62%),radial-gradient(90% 50% at 0% 100%,rgba(99,102,241,.1),transparent 65%),linear-gradient(180deg,#170d2b 0%,#0f0a1c 50%,#0a0812 100%)}
:root .fo-compose-in{background:rgba(16,10,30,.88)}
:root .fga{--fga-fond:#0a0812;background:#0a0812}
:root .fga .fga-fond,:root .fga[data-vue] .fga-fond{background:radial-gradient(140% 50% at 50% -12%,rgba(168,85,247,.3),transparent 68%),linear-gradient(180deg,#1c1233 0%,#0f0a1c 38%,#0a0812 100%)}
:root .fga .fga-liste--plate .fga-r,:root .fga .fga-r,:root .fga .fga-rappel .fga-rappel-ligne[class],:root .fga .fga-rappel:has(+ .fga-absence) .fga-rappel-ligne[class]{background:linear-gradient(180deg,#211837 0%,#1a1230 100%)}
:root .fga[data-vue=accueil] .fo-page{background:linear-gradient(180deg,transparent calc(100% - 140px),#120c20)}
:root .fga .fga-profil-actions>.fga-ecrire{background:#241b38}
:root .fga .fga-profil-actions .fo-pastille,:root .fga .fga-profil-actions .fo-cloche i{box-shadow:0 0 0 2px #1d1338}
:root .fst-invite-bulle{background:linear-gradient(180deg,#2a2040 0%,#1f1733 100%)}
:root .fga .fga-r-coffre-x{box-shadow:0 0 0 2px #201736,0 3px 8px -2px rgba(0,0,0,.6)}
@media (max-width:1023px){
  :root .fga[data-vue=accueil] .fga-fond{background:#0f0a1c}
  :root .fga[data-vue=accueil] .fo-ariane,:root .fga[data-vue=accueil] .fga-profil{background:#1d1338}
  :root .fga[data-vue=accueil] .fga-profil::after{background:#0f0a1c}
  :root .fga[data-vue=accueil] .fga-profil-actions>.fo-cloche,:root .fga[data-vue=accueil] .fga-profil-actions .fo-serie-bouton{background:#2b2142}
  :root .fga .fo-cta{background:linear-gradient(180deg,#2a2040,#1f1733)}
}
@media (min-width:1024px){
  :root .fo.fga .fo-page>.fo-sal.fo-sal-colonne,:root .fo.fga .fo-principal{background:linear-gradient(180deg,#1d1530 0%,#120c20 100%)}
  :root .fga[data-vue=accueil] .fga-profil{background:linear-gradient(180deg,#24173f 0%,#1a1230 100%)}
}