/* ===================================================================================== FICHES ET FENETRES (30/09/2026) - habillage premium des fenetres du club. ------------------------------------------------------------------------------------- Perimetre : la fenetre generique (#ov / .modal), la fiche joueur et staff, la fiche d'un club du monde, la negociation (.ng-*), le rachat (.rb-*), l'annonce de signature (.sig-*), l'accueil de la recrue (.modal.acc) et les toasts. Regles tenues ici : - aucune police a empattements (consigne du proprietaire : reservee au grand titre de page) ; - mouvement en transform/opacity seulement, court (moins de 300 ms) et jamais bloquant : la fenetre recoit les clics des la premiere image ; - specificite volontairement basse (:where) : les variantes .modal.nego, .modal.business, .modal.carriere... gardent leur propre fond ; - body.anim-off et prefers-reduced-motion coupent tout le mouvement, pas l'habillage. Le JS compagnon (motion-fiches.js) pose #ov.mf-in a l'ouverture seulement (jamais quand une fenetre deja ouverte se repeint) et joue un fantome de fermeture non cliquable. ===================================================================================== */ /* ---------- 1. LE VOILE : sombre, legerement flou, une lueur froide en haut ---------- */ :where(#ov,.mf-fantome){ background: radial-gradient(90% 60% at 50% 0%,#1d2a5a66,transparent 70%), radial-gradient(120% 90% at 50% 110%,#000000aa,transparent 60%), #05070fc4; -webkit-backdrop-filter:blur(5px) saturate(.9);backdrop-filter:blur(5px) saturate(.9); overscroll-behavior:contain; } @media (max-width:640px){ :where(#ov,.mf-fantome){-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)} } /* ---------- 2. LA FENETRE : identite nuit et or, lisible sur tous les themes ---------- */ :where(#ov,.mf-fantome) .modal{ background: radial-gradient(130% 55% at 50% -12%,#f4c04a12,transparent 62%), linear-gradient(180deg,#1b2449 0%,#141b3a 58%,#10172f 100%); border:1px solid #33427a; box-shadow: inset 0 1px 0 #f4c04a33, inset 0 0 0 1px #ffffff05, 0 2px 0 #00000040, 0 28px 70px -18px #000000e0, 0 0 0 1px #05070f80; } /* Les variantes ont leur propre fond : on ne leur donne que le liseré et l'ombre. */ :where(#ov,.mf-fantome) .modal.nego,:where(#ov,.mf-fantome) .modal.business,:where(#ov,.mf-fantome) .modal.carriere{ box-shadow:inset 0 1px 0 #f4c04a33,0 28px 70px -18px #000000e0,0 0 0 1px #05070f80; } /* Titre de fenetre : plus d'air, un trait or discret dessous (pas de serif). */ :where(#ov,.mf-fantome) .modal > h2, :where(#ov,.mf-fantome) .modal > .rowb h2{letter-spacing:.2px;text-shadow:0 1px 14px #0008} :where(#ov,.mf-fantome) .modal > h2{padding-bottom:10px;margin-bottom:12px; background:linear-gradient(90deg,#f4c04a88,#f4c04a22 38%,transparent 70%) left bottom/100% 1px no-repeat} /* Croix : une vraie pastille, meme cible de 44 px qu'avant (regle d'index.html). */ :where(#ov,.mf-fantome) .modal .close{color:#b7c3e6;transition:color .15s} :where(#ov,.mf-fantome) .modal .close:hover{color:#fff} :where(#ov,.mf-fantome) .modal .sec{letter-spacing:1.4px} /* ---------- 3. MOUVEMENT D'OUVERTURE ---------- Le voile apparait en fondu, la fenetre monte de 10 px en passant de 96,5 % a 100 %. `both` n'est PAS utilise sur la fenetre : si l'animation est coupee, elle est a sa place. */ #ov.mf-in{animation:mfVoile .2s ease-out} #ov.mf-in .modal{animation:mfFenetre .28s cubic-bezier(.2,.9,.25,1);transform-origin:50% 0} @keyframes mfVoile{from{opacity:0}to{opacity:1}} @keyframes mfFenetre{from{opacity:0;transform:translateY(10px) scale(.965)}to{opacity:1;transform:none}} /* Le fantome de fermeture : une copie inerte qui s'efface pendant que la page est deja cliquable dessous (pointer-events:none). */ .mf-fantome{pointer-events:none!important;animation:mfVoileOut .18s ease-in forwards;z-index:100} .mf-fantome .modal{animation:mfFenetreOut .18s ease-in forwards;transform-origin:50% 0} .mf-fantome *{pointer-events:none!important} @keyframes mfVoileOut{to{opacity:0}} @keyframes mfFenetreOut{to{opacity:0;transform:translateY(6px) scale(.975)}} /* ---------- 4. FICHE JOUEUR ET STAFF (reconnue a son bloc #fj-profil) ---------- */ :where(#ov,.mf-fantome) .modal:has(#fj-profil) .avatar-lg{ box-shadow:0 0 0 2px #f4c04a99,0 0 0 6px #f4c04a14,0 10px 26px #000a} :where(#ov,.mf-fantome) .modal:has(#fj-profil) > .rowb:first-of-type{ padding-bottom:12px;margin-bottom:12px!important; background:linear-gradient(90deg,#f4c04a80,#f4c04a1a 40%,transparent 75%) left bottom/100% 1px no-repeat} :where(#ov,.mf-fantome) .modal:has(#fj-profil) h2{font-size:21px;letter-spacing:.2px} :where(#ov,.mf-fantome) .modal .mood{box-shadow:inset 0 1px 2px #0008} :where(#ov,.mf-fantome) .modal .caracs .car{ background:linear-gradient(180deg,#141d40,#0f1733); border:1px solid #ffffff0d;box-shadow:inset 0 1px 0 #ffffff08} :where(#ov,.mf-fantome) .modal .caracs .car b{font-variant-numeric:tabular-nums} :where(#ov,.mf-fantome) .modal #fj-profil .chip, :where(#ov,.mf-fantome) .modal .chips .chip{background:#0c1432} /* La barre d'actions collee (mobile-modales.css) suit le nouveau fond de la fenetre. */ @media (max-width:640px){ :where(#ov,.mf-fantome) .modal .fiche-actions{background:linear-gradient(180deg,#131a37,#10172f)} } /* ---------- 5. FICHE D'UN CLUB DU MONDE (bloc .mar-* / .mo-club) ---------- */ :where(#ov,.mf-fantome) .modal .mar-c{border-radius:12px;box-shadow:inset 0 1px 0 #ffffff0a} :where(#ov,.mf-fantome) .modal > h2 svg{filter:drop-shadow(0 4px 10px #0009)} /* ---------- 6. NEGOCIATION (.ng-*) : on habille, on ne touche ni aux jauges ni aux curseurs ---------- */ :where(#ov,.mf-fantome) .ng-tete{box-shadow:inset 0 -1px 0 #ffffff0a,inset 0 1px 0 #ffffff14} :where(#ov,.mf-fantome) .ng-tete::after{content:"";position:absolute;left:18px;right:18px;bottom:-1px;height:1px; background:linear-gradient(90deg,transparent,#f4c04a66,transparent);pointer-events:none} :where(#ov,.mf-fantome) .ng-av{box-shadow:0 0 0 3px #ffffff10,0 8px 20px #0009} :where(#ov,.mf-fantome) .ng-qui{letter-spacing:.2px} :where(#ov,.mf-fantome) .ng-joueur{background:linear-gradient(180deg,#101a38,#0b1329);box-shadow:inset 0 1px 0 #ffffff0a} :where(#ov,.mf-fantome) .ng-b{box-shadow:0 6px 16px -8px #000c} :where(#ov,.mf-fantome) .ngo{background:linear-gradient(180deg,#0f1836,#0b1229);box-shadow:inset 0 1px 0 #ffffff0a} :where(#ov,.mf-fantome) .ngo-barre i{box-shadow:0 0 10px -2px currentColor} :where(#ov,.mf-fantome) .ng-terme{box-shadow:inset 0 1px 0 #ffffff08} /* ---------- 7. RACHAT (.rb-*) ---------- */ :where(#ov,.mf-fantome) .rb-tete{box-shadow:inset 0 1px 0 #ffffff14} :where(#ov,.mf-fantome) .rb-tete::after{content:"";position:absolute;left:18px;right:18px;bottom:0;height:1px; background:linear-gradient(90deg,transparent,#f4c04a77,transparent);pointer-events:none} :where(#ov,.mf-fantome) .rb-homme,:where(#ov,.mf-fantome) .rb-lev,:where(#ov,.mf-fantome) .rb-atelier{ background:linear-gradient(180deg,#101a38,#0b1329);box-shadow:inset 0 1px 0 #ffffff0a} :where(#ov,.mf-fantome) .rb-kick{letter-spacing:2px} /* ---------- 8. ACCUEIL DE LA RECRUE (.modal.acc) ---------- */ :where(#ov,.mf-fantome) .modal.acc{border-color:#f4c04a55} :where(#ov,.mf-fantome) .modal.acc .acc-tete{border-bottom:0; background:linear-gradient(90deg,#f4c04a99,#f4c04a22 45%,transparent 80%) left bottom/100% 1px no-repeat} :where(#ov,.mf-fantome) .modal.acc .acc-tete .avatar-lg{box-shadow:0 0 0 2px #f4c04aaa,0 0 22px #f4c04a33} :where(#ov,.mf-fantome) .modal.acc .acc-appo{background:linear-gradient(180deg,#0e1633,#0a1026);border:1px solid #ffffff0d} :where(#ov,.mf-fantome) .modal.acc .acc-choix .instr{ background:linear-gradient(180deg,#17204a,#111937);border:1px solid #ffffff12; box-shadow:inset 0 1px 0 #ffffff0d,0 10px 22px -14px #000;transition:border-color .2s,box-shadow .2s} @media (hover:hover) and (pointer:fine){ :where(#ov,.mf-fantome) .modal.acc .acc-choix .instr:not(.off):hover{border-color:#f4c04a66; box-shadow:inset 0 1px 0 #ffffff14,0 14px 28px -14px #000,0 0 0 1px #f4c04a22} } #ov.mf-in .modal.acc .acc-choix .instr{animation:mfCarte .34s cubic-bezier(.2,.9,.25,1)} #ov.mf-in .modal.acc .acc-choix .instr:nth-child(2){animation-delay:.05s} #ov.mf-in .modal.acc .acc-choix .instr:nth-child(3){animation-delay:.1s} #ov.mf-in .modal.acc .acc-choix .instr:nth-child(n+4){animation-delay:.14s} @keyframes mfCarte{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} /* ---------- 9. ANNONCE DE SIGNATURE (.sig-*) : les elements se posent en cascade ---------- */ .sig-carte{box-shadow:0 30px 80px #000c,inset 0 1px 0 #ffffff26,0 0 60px -20px var(--sig-c2,#f4c04a)} .sig-ov.on .sig-kick,.sig-ov.on .sig-portrait,.sig-ov.on .sig-nom,.sig-ov.on .sig-sous, .sig-ov.on .sig-club,.sig-ov.on .sig-lignes{animation:mfSig .42s cubic-bezier(.2,.9,.25,1) backwards} .sig-ov.on .sig-kick{animation-delay:.12s} .sig-ov.on .sig-portrait{animation-delay:.18s} .sig-ov.on .sig-nom{animation-delay:.24s} .sig-ov.on .sig-sous{animation-delay:.29s} .sig-ov.on .sig-club{animation-delay:.33s} .sig-ov.on .sig-lignes{animation-delay:.37s} @keyframes mfSig{from{opacity:0;transform:translateY(8px)}} .sig-portrait .avatar{box-shadow:0 0 0 6px #ffffff0d,0 0 34px -6px var(--sig-c2,#f4c04a),0 14px 30px #0009} .sig-lignes{border-top-color:transparent; background:linear-gradient(90deg,transparent,#ffffff2a,transparent) top/100% 1px no-repeat} /* ---------- 10. TOASTS ---------- */ #toasts .toast{ background:linear-gradient(180deg,#18214a,#101735); border:1px solid #33427a;border-left:3px solid var(--gold,#f4c04a);border-radius:12px; box-shadow:inset 0 1px 0 #ffffff12,0 14px 34px -10px #000000d0,0 0 0 1px #05070f66; color:#eaf0ff;line-height:1.45;max-width:min(380px,calc(100vw - 36px));overflow-wrap:anywhere; animation:mfToastIn .34s cubic-bezier(.2,.9,.25,1),mfToastOut .3s ease-in 3.85s forwards} @keyframes mfToastIn{from{opacity:0;transform:translateX(24px) scale(.96)}to{opacity:1;transform:none}} @keyframes mfToastOut{to{opacity:0;transform:translateX(12px)}} /* Une seule notif a la fois : la nouvelle REMPLACE l'ancienne (toast(), index.html). La releve est un petit sursaut sur place, sans glissement, puis la sortie repart de zero. */ #toasts .toast.mf-remplace{animation:mfToastSwap .24s cubic-bezier(.2,.9,.25,1),mfToastOut .3s ease-in 3.85s forwards} @keyframes mfToastSwap{from{opacity:.35;transform:scale(.97)}to{opacity:1;transform:none}} @media (max-width:640px){ #toasts .toast.mf-remplace{animation:mfToastSwap .24s cubic-bezier(.2,.9,.25,1),mfToastOut .3s ease-in 3.85s forwards} #toasts{left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));align-items:stretch} #toasts .toast{max-width:none;font-size:13px; animation:mfToastInM .32s cubic-bezier(.2,.9,.25,1),mfToastOut .3s ease-in 3.85s forwards} @keyframes mfToastInM{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}} } /* ---------- 11. MOBILE : aucun debordement, la fenetre defile avec le voile ---------- */ @media (max-width:640px){ /* Element de flex : sans min-width:0 la fiche d un club du monde prenait 470 px en 390. */ :where(#ov,.mf-fantome) > div{max-width:100%;min-width:0} :where(#ov,.mf-fantome) .modal{max-width:100%;min-width:0;overflow-wrap:anywhere} :where(#ov,.mf-fantome) .modal img,:where(#ov,.mf-fantome) .modal svg{max-width:100%} } /* ---------- 12. SANS MOUVEMENT : on garde l'habillage, on coupe les animations ---------- */ body.anim-off #ov.mf-in,body.anim-off #ov.mf-in .modal,body.anim-off #ov.mf-in .modal *, body.anim-off .sig-ov .sig-carte *,body.anim-off #toasts .toast{animation:none!important} body.anim-off .mf-fantome{display:none!important} @media (prefers-reduced-motion:reduce){ #ov.mf-in,#ov.mf-in .modal,#ov.mf-in .modal .instr,.sig-ov .sig-carte *{animation:none!important} #toasts .toast{animation:mfToastFade .3s ease-in 3.85s forwards!important} @keyframes mfToastFade{to{opacity:0}} .mf-fantome{display:none!important} }