/* ============================================================ La Dragonnerie — thème « parchemin raffiné » (modernisé) Mêmes couleurs d'époque, mise en page élargie (90%) et soignée. ============================================================ */ :root{ --or:#bc9e58; --bord:#d0b16e; --parchemin:#e8d29a; --encre:#2a1d0e; --fond:#241808; --or-clair:#d8b25e; --or-fonce:#8a6d2f; --ombre:#6d4f1e; --vert:#2e9c3e; --vert-clair:#5bd16a; --lien:#7a5a14; --serif:"Palatino Linotype","Book Antiqua",Palatino,Georgia,serif; --sans:"Segoe UI",system-ui,-apple-system,Verdana,Geneva,sans-serif; } *{ box-sizing:border-box; } /* overflow-x:clip = filet anti-débordement horizontal GLOBAL. Un seul îlot à largeur fixe plus large que l'écran (carte de combat, fenêtre de chat, panneau…) suffit, SUR iOS SAFARI, à dilater le viewport de mise en page → tous les points de rupture sautent (nav non repliée, page en demi-largeur, bande sombre). `clip` (et non `hidden`) n'établit PAS de conteneur de défilement → ne casse pas le header `position:sticky`. Les débordements légitimes restent gérés localement (`.table-wrap`, `overflow-x:auto`, etc.). */ html{ -webkit-text-size-adjust:100%; overflow-x:clip; } body{ margin:0; min-height:100vh; background:radial-gradient(120% 90% at 50% -5%, #2e2009 0%, var(--fond) 55%, #180f04 100%) fixed; color:var(--encre); font-family:var(--sans); font-size:15px; line-height:1.55; overflow-x:clip; /* cf. html : le filet doit être sur html ET body pour contenir un îlot trop large */ } a{ color:var(--lien); } img{ max-width:100%; } /* ---------- Barre de navigation (collante, raffinée) ---------- */ .bandeau{ position:sticky; top:0; z-index:100; background:linear-gradient(180deg, #caa85f, var(--or)); border-bottom:3px solid var(--or-fonce); box-shadow:0 3px 14px rgba(0,0,0,.35); display:flex; align-items:center; gap:2px; padding:0 22px; min-height:56px; flex-wrap:wrap; } .bandeau .brand{ font-family:var(--serif); font-weight:700; font-size:19px; letter-spacing:.3px; color:var(--encre); text-decoration:none; margin-right:16px; display:inline-flex; align-items:center; gap:8px; } .bandeau-nav{ display:flex; align-items:center; gap:2px; flex-wrap:wrap; } .bandeau-nav a{ position:relative; color:var(--encre); text-decoration:none; font-weight:600; font-size:14.5px; padding:8px 12px; border-radius:9px; opacity:.82; transition:opacity .15s, background .15s; } .bandeau-nav a:hover{ opacity:1; background:rgba(42,29,14,.08); } .bandeau-nav a::after{ content:""; position:absolute; left:12px; right:12px; bottom:4px; height:2px; background:var(--encre); border-radius:2px; transform:scaleX(0); transform-origin:left; transition:transform .18s; } .bandeau-nav a:hover::after{ transform:scaleX(1); } .bandeau-nav a.actif{ opacity:1; background:rgba(42,29,14,.13); } .bandeau-nav a.actif::after{ transform:scaleX(1); } .bandeau form{ margin:0; } .bandeau-actions{ margin-left:auto; display:flex; align-items:center; gap:10px; } /* pousse l'action de droite */ /* ---------- Conteneur de page (90% de l'écran) ---------- */ .page{ width:92%; max-width:1500px; margin:0 auto; padding:26px 0 52px; } /* ---------- Panneau « parchemin » (composant réutilisable) ---------- */ .parchemin{ background: repeating-linear-gradient(135deg, rgba(255,255,255,.02) 0 2px, transparent 2px 6px), linear-gradient(180deg, #ecd79f, var(--parchemin)); border:1px solid var(--bord); border-radius:14px; box-shadow:0 14px 38px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.4); padding:26px 30px; color:var(--encre); margin:0 0 18px; } .parchemin:last-child{ margin-bottom:0; } /* encart secondaire : parchemin imbriqué -> plus clair et plat */ .parchemin .parchemin{ background:rgba(255,255,255,.28); box-shadow:none; } /* ---------- Titres ---------- */ h1{ font-family:var(--serif); font-size:30px; line-height:1.15; margin:0 0 12px; } h2{ font-family:var(--serif); font-size:23px; margin:26px 0 10px; } h3{ font-family:var(--serif); font-size:18px; margin:0 0 6px; } /* ---------- Boutons ---------- */ .bouton{ display:inline-block; font-family:inherit; font-size:14.5px; font-weight:700; cursor:pointer; color:var(--encre); text-decoration:none; background:linear-gradient(var(--or-clair), var(--or)); border:2px solid var(--or-fonce); border-radius:9px; padding:9px 18px; box-shadow:0 3px 0 var(--ombre); transition:transform .12s, box-shadow .12s, filter .12s; } .bouton:hover{ transform:translateY(-2px); box-shadow:0 5px 0 var(--ombre); filter:brightness(1.02); } .bouton:active{ transform:translateY(1px); box-shadow:0 1px 0 var(--ombre); } .bouton.ghost{ background:rgba(255,255,255,.30); color:#5a431f; box-shadow:none; } .bouton.ghost:hover{ background:rgba(255,255,255,.5); transform:translateY(-1px); box-shadow:none; } /* ---------- Formulaires ---------- */ label{ font-weight:600; } input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea{ font-family:inherit; font-size:14.5px; color:var(--encre); margin-top:4px; background:rgba(255,255,255,.6); border:1px solid var(--or-fonce); border-radius:8px; padding:8px 10px; min-width:240px; max-width:100%; } textarea{ width:100%; } input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--encre); box-shadow:0 0 0 3px rgba(188,158,88,.35); } .erreurs{ background:#f5d9d2; border:1px solid #b06a52; color:#7a2e1a; border-radius:8px; padding:10px 14px; font-weight:600; } /* ---------- Tables (modernes, jamais débordantes) ---------- */ .table-wrap{ overflow-x:auto; border:1px solid var(--bord); border-radius:10px; } table{ border-collapse:collapse; width:100%; background:var(--parchemin); font-size:13.5px; } table th{ background:var(--encre); color:var(--parchemin); text-align:left; padding:10px 12px; white-space:nowrap; font-size:12.5px; letter-spacing:.3px; } table td{ padding:9px 12px; border-bottom:1px solid #cdb277; color:#3f2f14; vertical-align:top; } table tr:nth-child(even){ background:rgba(255,255,255,.32); } table tr:hover{ background:rgba(255,255,255,.55); } table td a{ font-weight:600; } table td .bouton{ padding:6px 12px; font-size:13px; box-shadow:0 2px 0 var(--ombre); } table td button:not(.bouton){ font-family:inherit; font-size:12.5px; color:var(--encre); cursor:pointer; background:#e9cf90; border:1px solid var(--or-fonce); border-radius:7px; padding:4px 9px; } table td button:not(.bouton):hover{ background:#f0e3b8; } table td select{ min-width:auto; } /* ---------- Pied de page ---------- */ .pied{ text-align:center; color:#9d8b63; font-size:12.5px; padding:6px 0 26px; } .pied a{ color:#c9a85c; text-decoration:none; } .pied a:hover{ text-decoration:underline; } /* ---------- Éléments hérités (combat / RP) ---------- */ .barre{ background:#b98c4a; border:1px solid var(--ombre); border-radius:6px; height:14px; overflow:hidden; } .barre>span{ display:block; height:100%; background:linear-gradient(var(--vert-clair), var(--vert)); } .journal{ background:#0f0b05; color:#e7d9b3; border-radius:8px; padding:10px 12px; font-size:13px; } .hrp{ background:var(--ombre); color:var(--parchemin); border-radius:4px; padding:1px 6px; font-size:11px; } .badge{ display:inline-block; background:#9a4a2f; color:#fff; border-radius:11px; padding:0 7px; font-size:12px; font-weight:700; vertical-align:middle; } /* ============================================================ ACCUEIL — page d'atterrissage cinématographique ============================================================ */ :root{ --titre:"Cinzel", var(--serif); --plume:"Cormorant Garamond", var(--serif); } /* L'accueil sort du cadre « parchemin » : scène sombre et cinématographique */ body.accueil-page .parchemin{ background:none; border:0; box-shadow:none; padding:0; } .accueil{ text-align:center; } /* ---- Héros ---- */ .accueil .hero{ position:relative; padding:14px 0 4px; margin:0 0 10px; } .accueil .hero-halo{ position:absolute; inset:-30px 4%; z-index:0; pointer-events:none; background:radial-gradient(58% 62% at 50% 42%, rgba(224,186,98,.30), rgba(224,186,98,0) 70%); filter:blur(6px); } .accueil .hero-cadre{ position:relative; z-index:1; display:inline-block; width:100%; max-width:1024px; padding:10px; border-radius:18px; background:linear-gradient(150deg, rgba(224,186,98,.55), rgba(138,109,47,.22)); box-shadow:0 22px 60px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,240,200,.28); } .accueil .hero-banniere{ margin:0; line-height:0; } .accueil .hero-banniere img{ display:block; width:100%; height:auto; border-radius:12px; box-shadow:0 8px 26px rgba(0,0,0,.45); } .accueil .hero-accroche{ position:relative; z-index:1; font-family:var(--plume); font-weight:500; font-size:23px; line-height:1.4; color:#f1dda3; max-width:640px; margin:24px auto 22px; text-shadow:0 2px 12px rgba(0,0,0,.65); } .accueil .hero-accroche b{ color:#fff; font-weight:600; } /* ---- Boutons d'appel centrés ---- */ .accueil .cta{ position:relative; z-index:1; display:flex; gap:14px; flex-wrap:wrap; justify-content:center; } .accueil .cta .bouton{ font-size:16px; padding:13px 30px; } .accueil .bouton-or{ position:relative; overflow:hidden; font-family:var(--titre); font-weight:600; letter-spacing:.4px; background:linear-gradient(180deg, #f2d484, var(--or)); border-color:#7a5e22; } .accueil .bouton-or::after{ content:""; position:absolute; top:0; left:-130%; width:60%; height:100%; transform:skewX(-18deg); background:linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); } .accueil .bouton-or:hover::after{ animation:reflet .8s ease; } @keyframes reflet{ to{ left:150%; } } .accueil .cta .bouton.ghost{ background:rgba(20,12,4,.45); color:#f1dda3; border:2px solid var(--or-fonce); box-shadow:none; backdrop-filter:blur(2px); } .accueil .cta .bouton.ghost:hover{ background:rgba(44,28,8,.6); filter:none; } /* ---- Séparateur ornemental ---- */ .accueil .orne{ display:flex; align-items:center; justify-content:center; gap:16px; max-width:520px; margin:30px auto; color:var(--or); } .accueil .orne::before, .accueil .orne::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg, transparent, var(--or-fonce), transparent); } .accueil .orne span{ font-size:18px; opacity:.9; } /* ---- Piliers (cartes d'invitation) ---- */ .accueil .piliers{ display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; margin:6px auto; text-align:left; } .accueil .pilier{ display:block; text-decoration:none; color:var(--encre); background:linear-gradient(180deg, #efdaa1, var(--parchemin)); border:1px solid var(--bord); border-radius:14px; padding:22px 20px 20px; box-shadow:0 10px 24px rgba(0,0,0,.35); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .accueil .pilier:hover{ transform:translateY(-6px); border-color:var(--or); box-shadow:0 16px 34px rgba(0,0,0,.45), 0 0 0 1px rgba(216,178,94,.55); } .accueil .pilier-crete{ display:flex; align-items:center; justify-content:center; width:48px; height:48px; margin-bottom:13px; font-size:24px; border-radius:12px; background:radial-gradient(circle at 30% 25%, #fff3cf, #d8b25e); box-shadow:inset 0 0 0 1px rgba(122,94,34,.5), 0 3px 8px rgba(0,0,0,.25); } .accueil .pilier h3{ font-family:var(--titre); font-size:15.5px; letter-spacing:.3px; margin:0 0 7px; color:var(--encre); } .accueil .pilier p{ margin:0; font-size:13.5px; line-height:1.5; color:#5a431f; } /* ---- Prologue / lore ---- */ .accueil .intro-lore{ background:linear-gradient(180deg, #ecd79f, var(--parchemin)); border:1px solid var(--bord); border-radius:16px; box-shadow:0 12px 30px rgba(0,0,0,.35); padding:30px 36px; margin:26px auto 0; max-width:760px; text-align:left; } .accueil .intro-rendu{ font-family:var(--plume); font-size:18.5px; line-height:1.65; color:#3a2a10; } .accueil .intro-rendu::first-letter{ font-family:var(--titre); font-size:3em; line-height:.82; float:left; margin:.02em .1em 0 0; color:var(--or-fonce); } .accueil .intro-edit{ margin-top:14px; } .accueil .intro-edit summary{ cursor:pointer; color:var(--lien); font-size:13px; } /* ---- Apparition en cascade ---- */ @media (prefers-reduced-motion: no-preference){ .accueil .hero-cadre, .accueil .hero-accroche, .accueil .cta, .accueil .orne, .accueil .pilier, .accueil .intro-lore{ animation:monte .7s cubic-bezier(.2,.7,.2,1) both; } .accueil .hero-accroche{ animation-delay:.12s; } .accueil .cta{ animation-delay:.2s; } .accueil .orne{ animation-delay:.28s; } .accueil .piliers .pilier:nth-child(1){ animation-delay:.30s; } .accueil .piliers .pilier:nth-child(2){ animation-delay:.38s; } .accueil .piliers .pilier:nth-child(3){ animation-delay:.46s; } .accueil .piliers .pilier:nth-child(4){ animation-delay:.54s; } .accueil .intro-lore{ animation-delay:.5s; } } @keyframes monte{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:translateY(0); } } @media (max-width:860px){ .accueil .piliers{ grid-template-columns:repeat(2, 1fr); } } @media (max-width:520px){ .accueil .piliers{ grid-template-columns:1fr; } .accueil .hero-accroche{ font-size:20px; } } @media (max-width:760px){ .page{ width:94%; } } /* ============================================================ VERSIONS — journal (timeline) sur sa page dédiée ============================================================ */ .versions .sec-titre{ display:flex; align-items:center; gap:10px; margin:0 0 4px; } .versions .sec-titre h2{ font-family:var(--titre); letter-spacing:.5px; } .versions .chapo{ color:#5a431f; margin:0 0 18px; max-width:760px; } .versions .chapo b{ color:var(--encre); } .versions .filet{ height:2px; background:linear-gradient(90deg, var(--or-fonce), transparent); border-radius:2px; margin:6px 0 26px; } .versions .timeline{ position:relative; margin-left:8px; padding-left:30px; border-left:3px solid #c9a85c; } .versions .ev{ position:relative; padding:0 0 26px; } .versions .ev:last-child{ padding-bottom:2px; } .versions .ev::before{ content:""; position:absolute; left:-39px; top:3px; width:16px; height:16px; border-radius:50%; background:var(--or); border:3px solid #f0e3b8; box-shadow:0 0 0 2px var(--or-fonce); } .versions .ev.wip::before{ background:var(--vert); } .versions .ev .tete{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .versions .ev h3{ margin:0; font-size:17px; font-family:var(--serif); } .versions .ver{ font-family:var(--titre); font-weight:600; font-size:12.5px; letter-spacing:.5px; background:var(--encre); color:var(--parchemin); padding:3px 11px; border-radius:20px; } .versions .date{ color:#8a6a28; font-size:12.5px; } .versions .etiquette-wip{ background:var(--vert); color:#06210a; font-size:11px; font-weight:700; padding:2px 8px; border-radius:20px; } .versions .ev p{ margin:7px 0 0; color:#5a431f; font-size:14px; line-height:1.55; max-width:820px; } /* ============================================================ ÉCRAN DE COMBAT — refonte (badges d'effets, chips, journal par tour) ============================================================ */ #combat .cbt-combattants{ display:grid; grid-template-columns:1fr auto 1fr; gap:16px; align-items:stretch; margin-bottom:18px; } #combat .cbt-vs{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:var(--or-fonce); } #combat .cbt-vs .emb{ width:50px; height:50px; display:flex; align-items:center; justify-content:center; font-size:24px; border-radius:50%; background:radial-gradient(circle at 30% 25%, #fff3cf, #d8b25e); border:2px solid var(--or-fonce); box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 4px 10px rgba(0,0,0,.3); } #combat .cbt-vs .lbl{ font-family:var(--titre); font-weight:700; font-size:12px; letter-spacing:1px; } @media(max-width:680px){ #combat .cbt-combattants{ grid-template-columns:1fr; } #combat .cbt-vs{ flex-direction:row; } } #combat .cbt-cb{ position:relative; overflow:hidden; border:1px solid var(--bord); border-radius:14px; padding:15px 16px; background:linear-gradient(180deg,#f7ecd2,#efe1bd); box-shadow:0 10px 24px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.5); } #combat .cbt-cb::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg, transparent, var(--or), transparent); } #combat .cbt-cb.ennemi{ background:radial-gradient(120% 90% at 50% -10%, rgba(154,59,42,.18), transparent 60%), linear-gradient(180deg,#f1dcc2,#e8cda4); border-color:#c08a6a; } #combat .cbt-cb.ennemi::before{ background:linear-gradient(90deg, transparent, #c0392b, transparent); } #combat .cbt-tete{ display:flex; align-items:center; gap:11px; margin:0 0 12px; } #combat .cbt-tete::before{ content:"🛡️"; width:42px; height:42px; flex:none; display:flex; align-items:center; justify-content:center; font-size:21px; border-radius:12px; background:radial-gradient(circle at 30% 25%, #fff3cf, #d8b25e); border:1px solid var(--or-fonce); box-shadow:inset 0 1px 0 rgba(255,255,255,.6); } #combat .cbt-cb.ennemi .cbt-tete::before{ content:"⚔️"; background:radial-gradient(circle at 30% 25%, #d88a6a, #9a3b2a); border-color:#7a2a1c; } #combat .cbt-tete .nom{ flex:1; min-width:0; font-family:var(--serif); font-size:19px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #combat .cbt-tete .meta{ flex:none; font-size:10.5px; font-weight:700; color:#6a5526; text-transform:uppercase; letter-spacing:.5px; background:rgba(255,255,255,.5); border:1px solid var(--bord); border-radius:20px; padding:2px 9px; } #combat .cbt-cb.ennemi .cbt-tete .meta{ color:#9a3b2a; border-color:#caa07a; } #combat .cbt-jauge{ margin:8px 0; } #combat .cbt-jauge .lib{ display:flex; justify-content:space-between; font-size:12px; color:#5a431f; margin-bottom:4px; font-weight:600; } #combat .cbt-barre{ position:relative; height:18px; border-radius:10px; overflow:hidden; background:linear-gradient(180deg,#cdb27e,#b98c4a); border:1px solid var(--ombre); box-shadow:inset 0 2px 4px rgba(0,0,0,.3); } #combat .cbt-barre>span{ display:block; height:100%; border-radius:9px; box-shadow:inset 0 1px 0 rgba(255,255,255,.4); transition:width .35s ease; } #combat .cbt-barre.pv>span{ background:linear-gradient(180deg,#6fd07e,#2e9c3e); } #combat .cbt-barre.pv.bas>span{ background:linear-gradient(180deg,#e8a04a,#c0392b); box-shadow:0 0 10px rgba(224,86,31,.6), inset 0 1px 0 rgba(255,220,150,.4); } #combat .cbt-barre.res>span{ background:linear-gradient(180deg,#8fc0ea,#3f72a8); } #combat .cbt-statuts{ display:flex; flex-wrap:wrap; gap:6px; margin-top:11px; min-height:24px; } #combat .cbt-sbadge{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700; color:#fff; border-radius:20px; padding:2px 9px; box-shadow:inset 0 1px 0 rgba(255,255,255,.25); } #combat .cbt-sbadge .t{ background:rgba(0,0,0,.22); border-radius:10px; padding:0 6px; font-size:11px; } #combat .cbt-sbadge.controle{ background:#5d4a8a; } #combat .cbt-sbadge.dot{ background:#b0682c; } #combat .cbt-sbadge.buff{ background:#2e7d32; } #combat .cbt-sbadge.debuff{ background:#7a6748; } #combat .cbt-vide{ color:#8a7a52; font-size:12px; font-style:italic; align-self:center; } #combat .cbt-phase{ display:inline-flex; align-items:center; gap:8px; margin:10px 0 3px; padding:6px 13px; border-radius:22px; font-size:13px; font-weight:700; color:#e9e6f5; background:linear-gradient(180deg,#3a3560,#211d3c); border:1px solid #6a5fae; box-shadow:inset 0 1px 0 rgba(255,255,255,.18); } #combat .cbt-phase .ph-ico{ font-size:19px; line-height:1; } #combat .cbt-phase .ph-eff{ font-weight:600; color:#c9c3ec; } #combat .cbt-phase.pleine{ color:#fff; background:linear-gradient(180deg,#6a5fae,#46377e); border-color:#cbb86a; box-shadow:0 0 16px rgba(220,200,120,.55), inset 0 1px 0 rgba(255,255,255,.3); } #combat .cbt-phase.pleine .ph-eff{ color:#ffe9a8; } /* Frise de lune (Lune Changeante) : la jauge sans ressource montre le cycle qui croît vers la Pleine. */ #combat .cbt-jauge.lune .lib{ color:#5a4a8a; } #combat .cbt-barre.lune > span{ background:linear-gradient(180deg,#cfd6ff,#7d86c8); transition:width .5s ease; } #combat .cbt-barre.lune.pleine > span{ background:linear-gradient(180deg,#ffe9a8,#cbb86a); box-shadow:0 0 12px rgba(220,200,120,.6), inset 0 1px 0 rgba(255,255,255,.4); } #combat .cbt-zone{ display:grid; grid-template-columns:1.1fr .9fr; gap:16px; align-items:start; margin-bottom:6px; } @media(max-width:680px){ #combat .cbt-zone{ grid-template-columns:1fr; } } #combat .cbt-titre{ font-family:var(--titre); font-size:14px; font-weight:600; letter-spacing:.6px; text-transform:uppercase; color:#8a6a28; margin:4px 0 11px; } #combat .cbt-actions{ display:flex; flex-direction:column; gap:11px; align-content:flex-start; } #combat .cbt-grp{ display:flex; align-items:flex-start; gap:12px; } #combat .cbt-grp-lib{ flex:0 0 auto; min-width:92px; font-family:var(--titre); font-size:12px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; padding:8px 11px; border-radius:9px; border:2px solid; box-shadow:0 2px 0 var(--ombre); } #combat .cbt-grp-btns{ display:flex; flex-wrap:wrap; gap:9px; flex:1 1 auto; } #combat .cbt-grp-lib.z-actions{ color:#6a5a3c; border-color:#a99873; background:#e8dcc0; } #combat .cbt-grp-lib.z-attaque{ color:#8a2f1d; border-color:#c98b6e; background:#f4ddd0; } #combat .cbt-grp-lib.z-controle{ color:#5a3a8a; border-color:#a98bc9; background:#e8def4; } #combat .cbt-grp-lib.z-defense{ color:#1d5a8a; border-color:#6ea0c9; background:#d8e6f4; } #combat .cbt-grp-lib.z-soin{ color:#2f6a1d; border-color:#86c96e; background:#e0eed6; } @media(max-width:680px){ #combat .cbt-grp{ flex-direction:column; gap:6px; } #combat .cbt-grp-lib{ min-width:0; align-self:flex-start; } } #combat .cbt-btn{ position:relative; font-family:inherit; font-size:14.5px; font-weight:700; cursor:pointer; color:var(--encre); background:linear-gradient(var(--or-clair), var(--or)); border:2px solid var(--or-fonce); border-radius:9px; padding:9px 14px; box-shadow:0 3px 0 var(--ombre); display:inline-flex; align-items:center; gap:8px; } #combat .cbt-btn:hover{ filter:brightness(1.03); } #combat .cbt-btn:active{ transform:translateY(1px); box-shadow:0 1px 0 var(--ombre); } #combat .cbt-btn .chip{ font-size:11.5px; font-weight:700; border-radius:20px; padding:1px 7px; background:rgba(0,0,0,.16); } #combat .cbt-btn .chip.cd{ background:#5d4a8a; color:#fff; } #combat .cbt-btn.off{ cursor:not-allowed; color:#6a5a3c; background:linear-gradient(#cdbe93,#c4b485); border-color:#a99873; box-shadow:0 2px 0 #b3a279; filter:saturate(.7); } #combat .cbt-btn.off:hover{ filter:saturate(.7); } #combat .cbt-btn .cadenas{ font-size:13px; opacity:.7; } #combat .cbt-info{ background:rgba(255,255,255,.34); border:1px solid var(--bord); border-radius:12px; padding:14px 16px; min-height:96px; } #combat .cbt-info .it-tete{ display:flex; align-items:center; gap:8px; margin-bottom:6px; } #combat .cbt-info .cat{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:#fff; background:var(--or-fonce); border-radius:20px; padding:2px 9px; } #combat .cbt-info .nom{ font-family:var(--serif); font-size:18px; font-weight:700; } #combat .cbt-info ul{ margin:0 0 10px; padding:0; list-style:none; } #combat .cbt-info li{ display:flex; gap:8px; padding:4px 0; font-size:13.5px; border-bottom:1px dashed rgba(138,109,47,.35); } #combat .cbt-info li:last-child{ border-bottom:0; } #combat .cbt-info li .p{ width:20px; text-align:center; } #combat .cbt-info .pied{ display:flex; gap:14px; font-size:12.5px; color:#5a431f; font-weight:600; } #combat .cbt-info .pied b{ color:var(--encre); } #combat .cbt-hint{ color:#6a5526; font-size:13px; font-style:italic; margin:0; } #combat .cbt-journal{ display:flex; flex-direction:column; gap:12px; } #combat .cbt-tour{ background:rgba(255,255,255,.26); border:1px solid var(--bord); border-radius:12px; overflow:hidden; } #combat .cbt-tour .tour-tete{ background:rgba(42,29,14,.92); color:var(--parchemin); padding:5px 14px; font-family:var(--serif); font-weight:700; font-size:13.5px; letter-spacing:.5px; } #combat .cbt-tour .tour-tete .num{ background:var(--or); color:var(--encre); border-radius:20px; padding:0 10px; font-size:12px; } #combat .cbt-tour .evs{ padding:4px 14px; } #combat .cbt-tour .ev{ display:flex; align-items:center; gap:10px; padding:5px 0; border-bottom:1px solid rgba(138,109,47,.16); } #combat .cbt-tour .ev:last-child{ border-bottom:0; } #combat .cbt-tour .ev .ic{ width:22px; text-align:center; font-size:15px; flex:none; } #combat .cbt-tour .ev .txt{ flex:1; } #combat .cbt-tour .ev.deg .txt{ color:#9a3b2a; } #combat .cbt-tour .ev.soin .txt{ color:#2e7d32; } #combat .cbt-tour .ev.statut .txt{ color:#5d4a8a; font-weight:600; } #combat .cbt-tour .ev.tick .txt{ color:#b0682c; } #combat .cbt-tour .ev.ultime{ background:rgba(184,134,11,.14); margin:0 -14px; padding-left:14px; padding-right:14px; } #combat .cbt-tour .ev.ultime .txt{ color:#7a5800; font-weight:700; letter-spacing:.03em; } #combat .cbt-tour .ev.ultime .ic{ filter:drop-shadow(0 0 4px #d4a017); } #combat .cbt-tour .ev.skip{ background:rgba(93,74,138,.10); margin:0 -14px; padding-left:14px; padding-right:14px; } #combat .cbt-tour .ev.skip .txt{ color:#5d4a8a; font-weight:700; } #combat .cbt-tour .ev.dissipe .txt{ color:#8a7a52; font-style:italic; } #combat .cbt-tour .ev.resiste{ background:rgba(138,109,47,.12); margin:0 -14px; padding-left:14px; padding-right:14px; } #combat .cbt-tour .ev.resiste .txt{ color:#6f5a2a; font-weight:700; } /* Journal regroupé par ACTEUR (« qui fait quoi ») */ #combat .cbt-acteur{ border-top:1px solid rgba(138,109,47,.18); } #combat .cbt-acteur:first-of-type{ border-top:0; } #combat .cbt-ac-tete{ display:flex; align-items:center; gap:9px; padding:8px 14px 3px; } #combat .cbt-ac-disc{ width:24px; height:24px; flex:none; border-radius:50%; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; font-family:var(--serif); font-weight:700; font-size:13px; color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.25); } #combat .cbt-ac-disc img{ width:100%; height:100%; object-fit:cover; } #combat .cbt-ac-disc.cote-allie{ background:#2e7d32; } #combat .cbt-ac-disc.cote-ennemi{ background:#9a3b2a; } #combat .cbt-ac-nom{ font-family:var(--serif); font-weight:700; font-size:14px; color:var(--encre); } #combat .cbt-acteur.cote-ennemi .cbt-ac-nom{ color:#9a3b2a; } #combat .cbt-acteur .evs{ padding-top:1px; padding-bottom:3px; } #combat .cbt-fin{ margin:2px 0 18px; text-align:center; font-family:var(--titre); font-weight:700; font-size:18px; color:var(--encre); background:linear-gradient(180deg,#fbeebc,#f3dd97); border:1px solid var(--or); border-radius:12px; padding:14px 18px; box-shadow:0 12px 28px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.5); } #combat .cbt-fin a{ font-family:var(--sans); font-size:14px; font-weight:600; } /* Rejouage : réutilise le journal de combat (combat-journal.js) hors de #combat → mêmes styles (sinon avatars en pleine taille). */ #rejouage-root .cbt-journal{ display:flex; flex-direction:column; gap:12px; max-width:680px; } #rejouage-root .cbt-tour{ background:rgba(255,255,255,.26); border:1px solid var(--bord); border-radius:12px; overflow:hidden; } #rejouage-root .cbt-tour .tour-tete{ background:rgba(42,29,14,.92); color:var(--parchemin); padding:5px 14px; font-family:var(--serif); font-weight:700; font-size:13.5px; letter-spacing:.5px; } #rejouage-root .cbt-tour .tour-tete .num{ background:var(--or); color:var(--encre); border-radius:20px; padding:0 10px; font-size:12px; } #rejouage-root .cbt-tour .evs{ padding:4px 14px; } #rejouage-root .cbt-tour .ev{ display:flex; align-items:center; gap:10px; padding:5px 0; border-bottom:1px solid rgba(138,109,47,.16); } #rejouage-root .cbt-tour .ev:last-child{ border-bottom:0; } #rejouage-root .cbt-tour .ev .ic{ width:22px; text-align:center; font-size:15px; flex:none; } #rejouage-root .cbt-tour .ev .txt{ flex:1; } #rejouage-root .cbt-tour .ev.deg .txt{ color:#9a3b2a; } #rejouage-root .cbt-tour .ev.soin .txt{ color:#2e7d32; } #rejouage-root .cbt-tour .ev.statut .txt{ color:#5d4a8a; font-weight:600; } #rejouage-root .cbt-tour .ev.tick .txt{ color:#b0682c; } #rejouage-root .cbt-tour .ev.ultime{ background:rgba(184,134,11,.14); margin:0 -14px; padding-left:14px; padding-right:14px; } #rejouage-root .cbt-tour .ev.ultime .txt{ color:#7a5800; font-weight:700; letter-spacing:.03em; } #rejouage-root .cbt-tour .ev.ultime .ic{ filter:drop-shadow(0 0 4px #d4a017); } /* Raid : même teinte or pour l'ultime (le raid consomme le renderer partagé depuis la fusion des journaux). */ #raid .cbt-tour .ev.ultime{ background:rgba(184,134,11,.14); margin:0 -14px; padding-left:14px; padding-right:14px; } #raid .cbt-tour .ev.ultime .txt{ color:#7a5800; font-weight:700; letter-spacing:.03em; } #raid .cbt-tour .ev.ultime .ic{ filter:drop-shadow(0 0 4px #d4a017); } #rejouage-root .cbt-tour .ev.skip{ background:rgba(93,74,138,.10); margin:0 -14px; padding-left:14px; padding-right:14px; } #rejouage-root .cbt-tour .ev.skip .txt{ color:#5d4a8a; font-weight:700; } #rejouage-root .cbt-tour .ev.dissipe .txt{ color:#8a7a52; font-style:italic; } #rejouage-root .cbt-tour .ev.resiste{ background:rgba(138,109,47,.12); margin:0 -14px; padding-left:14px; padding-right:14px; } #rejouage-root .cbt-tour .ev.resiste .txt{ color:#6f5a2a; font-weight:700; } #rejouage-root .cbt-acteur{ border-top:1px solid rgba(138,109,47,.18); } #rejouage-root .cbt-acteur:first-of-type{ border-top:0; } #rejouage-root .cbt-ac-tete{ display:flex; align-items:center; gap:9px; padding:8px 14px 3px; } #rejouage-root .cbt-ac-disc{ width:26px; height:26px; flex:none; border-radius:50%; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; font-family:var(--serif); font-weight:700; font-size:13px; color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.25); } #rejouage-root .cbt-ac-disc img{ width:100%; height:100%; object-fit:cover; } #rejouage-root .cbt-ac-disc.cote-allie{ background:#2e7d32; } #rejouage-root .cbt-ac-disc.cote-ennemi{ background:#9a3b2a; } #rejouage-root .cbt-ac-nom{ font-family:var(--serif); font-weight:700; font-size:14px; color:var(--encre); } #rejouage-root .cbt-acteur.cote-ennemi .cbt-ac-nom{ color:#9a3b2a; } #rejouage-root .cbt-acteur .evs{ padding-top:1px; padding-bottom:3px; } /* Lisibilité du journal (2026-07) : dans chaque bloc d'acteur, l'ACTION décidée est mise en avant ; les conséquences & l'entretien (ticks, régéns, absorptions, statuts posés) passent en sous-lignes discrètes — les récurrences de même nature sont agrégées côté JS (« ☠️ Poisons : −N »). */ /* NB : #raid est inclus depuis que le raid consomme le renderer partagé (combat-journal.js) — sans lui, le journal du raid retomberait à plat (aucune hiérarchie action/conséquence). */ #combat .cbt-tour .ev.ev-fort .ic, #rejouage-root .cbt-tour .ev.ev-fort .ic, #raid .cbt-tour .ev.ev-fort .ic{ font-size:17px; } #combat .cbt-tour .ev.ev-fort .txt, #rejouage-root .cbt-tour .ev.ev-fort .txt, #raid .cbt-tour .ev.ev-fort .txt{ font-size:15px; font-weight:700; } /* Sous-lignes : petites, grisées, indentées sous l'action, sans filet de séparation. */ #combat .cbt-tour .ev.ev-sous, #rejouage-root .cbt-tour .ev.ev-sous, #raid .cbt-tour .ev.ev-sous{ padding:2px 0 2px 20px; border-bottom:0; gap:7px; } #combat .cbt-tour .ev.ev-sous .ic, #rejouage-root .cbt-tour .ev.ev-sous .ic, #raid .cbt-tour .ev.ev-sous .ic{ width:18px; font-size:12.5px; opacity:.85; } #combat .cbt-tour .ev.ev-sous .txt, #rejouage-root .cbt-tour .ev.ev-sous .txt, #raid .cbt-tour .ev.ev-sous .txt{ font-size:12.5px; color:#8a7a52; font-weight:400; } /* La sous-ligne garde une teinte de nature, mais atténuée — jamais le poids d'une action. */ #combat .cbt-tour .ev.ev-sous.deg .txt, #rejouage-root .cbt-tour .ev.ev-sous.deg .txt, #raid .cbt-tour .ev.ev-sous.deg .txt{ color:#a76050; } #combat .cbt-tour .ev.ev-sous.tick .txt, #rejouage-root .cbt-tour .ev.ev-sous.tick .txt, #raid .cbt-tour .ev.ev-sous.tick .txt{ color:#a97a45; } #combat .cbt-tour .ev.ev-sous.soin .txt, #rejouage-root .cbt-tour .ev.ev-sous.soin .txt, #raid .cbt-tour .ev.ev-sous.soin .txt{ color:#5a8a5c; } #combat .cbt-tour .ev.ev-sous.statut .txt, #rejouage-root .cbt-tour .ev.ev-sous.statut .txt, #raid .cbt-tour .ev.ev-sous.statut .txt{ color:#7a6ca0; font-weight:600; } /* Dégâts passifs (riposte, proc, AoE) : un cran de présence de plus — teinte dégât + gras, mais toujours en petit. */ #combat .cbt-tour .ev.ev-sous-deg .txt, #rejouage-root .cbt-tour .ev.ev-sous-deg .txt, #raid .cbt-tour .ev.ev-sous-deg .txt{ color:#9a3b2a; font-weight:600; } #combat .cbt-tour .ev.ev-sous-deg .ic, #rejouage-root .cbt-tour .ev.ev-sous-deg .ic, #raid .cbt-tour .ev.ev-sous-deg .ic{ opacity:1; } /* Agrégats : sous-lignes dont le détail exact vit dans le survol (title). */ #combat .cbt-tour .ev.ev-agg, #rejouage-root .cbt-tour .ev.ev-agg, #raid .cbt-tour .ev.ev-agg{ cursor:help; } /* Marqueur crit / coup dévié dans le journal (live arène, rejouage par tour, raid). Petit fanion TEXTUEL (jamais couleur seule) : CRITIQUE = or gravé, coup dévié = discret/atténué. */ .jr-issue{ display:inline-block; margin-left:5px; font-size:10.5px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; vertical-align:baseline; white-space:nowrap; } .jr-issue.jr-crit{ color:#8a5a12; } .jr-issue.jr-crit::before{ content:"✦ "; } .jr-issue.jr-devie{ color:#8a7a52; font-weight:700; letter-spacing:.3px; opacity:.9; text-transform:none; font-style:italic; } /* Bouton « Signaler » discret sous un message de forum (modération). */ .msg-signaler{ margin-top:6px; } .msg-signaler>summary{ cursor:pointer; font-size:12.5px; color:#8a7a52; list-style:none; display:inline-block; } .msg-signaler>summary::-webkit-details-marker{ display:none; } .msg-signaler[open]>summary{ color:#8a2f1d; } .msg-signaler form{ display:flex; gap:.5rem; margin-top:.4rem; flex-wrap:wrap; align-items:center; } .msg-signaler input[name="motif"]{ flex:1; min-width:220px; padding:.3rem .5rem; border:1px solid var(--bord); border-radius:6px; } .rej-pied{ display:flex; gap:.5rem; flex-wrap:wrap; margin:0 0 1rem; justify-content:center; } /* Rejouage — avatars collés aux noms dans le titre + journal centré ; le vainqueur est couronné (doré + halo). */ .rej-titre{ display:flex; align-items:center; justify-content:center; gap:.7rem; flex-wrap:wrap; } .rej-combattant{ display:inline-flex; align-items:center; gap:.55rem; } .rej-av-mini{ width:54px; height:54px; flex:none; border-radius:13px; overflow:hidden; border:2px solid var(--or); background:rgba(42,29,14,.10); display:inline-flex; align-items:center; justify-content:center; font-family:var(--titre); font-weight:800; font-size:22px; color:var(--or-fonce); box-shadow:0 4px 12px rgba(0,0,0,.25); } .rej-av-mini img{ width:100%; height:100%; object-fit:cover; } .rej-combattant.att .rej-av-mini{ border-color:#2e7d32; } .rej-combattant.def .rej-av-mini{ border-color:#9a3b2a; } .rej-av-mini.gagnant{ border-color:#d4a017; box-shadow:0 0 0 2px rgba(212,160,23,.45), 0 0 18px rgba(212,160,23,.6); } .rej-pseudo.gagnant{ color:#b8860b; text-shadow:0 0 14px rgba(212,160,23,.55); } .rej-vs-x{ color:var(--or-fonce); } #rejouage-root .cbt-journal{ margin-left:auto; margin-right:auto; } @media (max-width:560px){ .rej-av-mini{ width:42px; height:42px; font-size:17px; } } #combat .cbt-fin .cbt-butin{ font-family:var(--sans); font-size:14.5px; font-weight:600; color:#6a4f1c; margin-top:8px; } #combat .cbt-fin .cbt-plafond{ font-family:var(--sans); font-size:13.5px; font-weight:600; color:#7a5f2c; margin-top:6px; } /* ============================================================ ÉDITEUR D'EFFET (admin sorts & aptitudes) — sans JSON ============================================================ */ .champ-effet{ margin:18px 0 6px; } .champ-effet strong{ font-size:15px; } .champ-effet .aide-effet{ display:block; font-size:12.5px; color:#6a5526; font-weight:400; margin-top:2px; } #editeur-effet .ed-carte{ background:rgba(255,255,255,.30); border:1px solid var(--bord); border-radius:12px; padding:14px 16px; margin:0 0 14px; } #editeur-effet .ed-titre{ font-family:var(--serif); font-size:16px; margin:0 0 10px; } #editeur-effet .ed-seg{ display:inline-flex; border:1px solid var(--or-fonce); border-radius:9px; overflow:hidden; } #editeur-effet .ed-seg button{ font-family:inherit; font-weight:700; font-size:14px; padding:8px 16px; cursor:pointer; border:0; background:rgba(255,255,255,.4); color:#6a5526; } #editeur-effet .ed-seg button.on{ background:linear-gradient(var(--or-clair), var(--or)); color:var(--encre); } #editeur-effet .ed-ligne{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; } #editeur-effet .ed-inline{ display:inline-flex; align-items:center; gap:6px; font-weight:600; } #editeur-effet .ed-inline input{ min-width:70px; width:90px; } #editeur-effet .ed-suf{ font-weight:700; color:#5a431f; } #editeur-effet .ed-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; } @media(max-width:760px){ #editeur-effet .ed-row{ grid-template-columns:1fr 1fr; } } #editeur-effet .ed-c{ display:flex; flex-direction:column; gap:3px; font-size:13px; font-weight:600; } #editeur-effet .ed-c input, #editeur-effet .ed-c select{ min-width:0; width:100%; } #editeur-effet .ed-aide{ font-size:12px; color:#6a5526; margin:8px 0 0; } #editeur-effet .ed-apercu{ background:rgba(42,29,14,.06); } #editeur-effet .ed-bandeau{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:#5a431f; margin-bottom:8px; } #editeur-effet .ed-apercu ul{ list-style:none; margin:0; padding:0; } #editeur-effet .ed-apercu li{ display:flex; gap:8px; padding:5px 0; font-size:14px; border-bottom:1px dashed rgba(138,109,47,.35); } #editeur-effet .ed-apercu li:last-child{ border-bottom:0; } #editeur-effet .ed-apercu li .p{ width:20px; text-align:center; } #editeur-effet .ed-err{ color:#7a2e1a; font-weight:600; margin:8px 0 0; } /* ============================================================ ÉDITION DES TALENTS PAR L'ARBRE (admin) — fonds pleins ============================================================ */ .ta-classe{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 16px; } .ta-aide{ font-size:12.5px; color:#6a5526; } #arbre-admin .ta-layout{ display:grid; grid-template-columns:1.5fr 1fr; gap:16px; align-items:start; } @media(max-width:900px){ #arbre-admin .ta-layout{ grid-template-columns:1fr; } } #arbre-admin .ta-tree{ display:flex; gap:14px; overflow-x:auto; padding-bottom:6px; } #arbre-admin .ta-branche{ background:linear-gradient(180deg,#f3e6bf,#ead9ac); border:1px solid var(--bord); border-radius:12px; padding:10px 10px 14px; min-width:228px; box-shadow:inset 0 1px 0 rgba(255,255,255,.5); } #arbre-admin .ta-branche h3{ font-family:var(--serif); font-size:16px; margin:0 0 8px; text-align:center; border-bottom:1px solid var(--bord); padding-bottom:7px; display:flex; align-items:center; justify-content:center; gap:6px; } #arbre-admin .ta-pen, #arbre-admin .ta-ren{ font-size:12px; opacity:.5; cursor:pointer; } #arbre-admin .ta-pen:hover, #arbre-admin .ta-ren:hover{ opacity:1; } #arbre-admin .ta-porte{ font-size:10px; color:#8a6a28; text-transform:uppercase; letter-spacing:.5px; text-align:center; border-top:1px dashed #b9a06a; padding-top:5px; margin:10px 0 8px; } #arbre-admin .ta-rang{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; } #arbre-admin .ta-node{ width:98px; min-height:62px; border-radius:10px; padding:7px 6px; text-align:center; cursor:pointer; border:2px solid var(--or-fonce); background:linear-gradient(180deg,#fbf4df,#f1e4c0); transition:transform .12s, box-shadow .12s; } #arbre-admin .ta-node:hover{ transform:translateY(-2px); box-shadow:0 4px 10px rgba(0,0,0,.18); } #arbre-admin .ta-node .nom{ font-size:11.5px; font-weight:700; line-height:1.15; } #arbre-admin .ta-node .rg{ font-size:10px; color:#6b5526; margin-top:4px; } #arbre-admin .ta-plus{ width:98px; min-height:62px; border-radius:10px; border:2px dashed #b9a06a; background:rgba(255,255,255,.25); color:#a98c4f; font-size:24px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; } #arbre-admin .ta-plus:hover{ background:rgba(46,156,62,.12); border-color:var(--vert); color:var(--vert); } #arbre-admin .ta-addp{ margin-top:10px; text-align:center; } #arbre-admin .ta-addp button, #arbre-admin .ta-addb button{ font-family:inherit; font-weight:700; font-size:12.5px; cursor:pointer; background:rgba(255,255,255,.4); border:1px dashed var(--or-fonce); border-radius:8px; padding:6px 12px; color:#6a5526; } #arbre-admin .ta-addb{ display:flex; align-items:flex-start; } #arbre-admin .ta-panel{ position:sticky; top:14px; } #arbre-admin .ta-carte{ background:linear-gradient(180deg,#fbf3da,#f3e7c6); border:1px solid var(--or-fonce); border-radius:12px; padding:14px 16px; margin:0 0 12px; box-shadow:inset 0 1px 0 rgba(255,255,255,.5); } #arbre-admin .ta-vide{ color:#6a5526; font-style:italic; } #arbre-admin .ta-tete{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; } #arbre-admin .ta-tete .t{ font-family:var(--serif); font-size:17px; font-weight:700; } #arbre-admin .ta-tete .ctx{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:#fff; background:var(--or-fonce); border-radius:20px; padding:2px 9px; } #arbre-admin .ta-titre{ font-family:var(--serif); font-size:15px; margin:0 0 8px; } #arbre-admin .ta-c{ display:flex; flex-direction:column; gap:3px; font-size:13px; font-weight:600; margin-bottom:10px; } #arbre-admin .ta-c input, #arbre-admin .ta-c select, #arbre-admin .ta-c textarea{ width:100%; min-width:0; } #arbre-admin .ta-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; } #arbre-admin .ta-row.r3{ grid-template-columns:1fr 1fr 1fr; } @media(max-width:520px){ #arbre-admin .ta-row, #arbre-admin .ta-row.r3{ grid-template-columns:1fr; } } #arbre-admin .ta-checks{ display:flex; flex-direction:column; gap:3px; max-height:140px; overflow-y:auto; background:rgba(255,255,255,.5); border:1px solid var(--bord); border-radius:8px; padding:7px 9px; font-weight:400; } #arbre-admin .ta-chk{ font-size:13px; display:flex; align-items:center; gap:6px; } #arbre-admin .ta-apercu{ background:rgba(42,29,14,.06); border:1px solid var(--bord); border-radius:10px; padding:8px 12px; } #arbre-admin .ta-apercu .ta-bandeau{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:#5a431f; margin-bottom:4px; } #arbre-admin .ta-apercu ul{ list-style:none; margin:0; padding:0; } #arbre-admin .ta-apercu li{ display:flex; gap:8px; font-size:13.5px; padding:3px 0; } #arbre-admin .ta-apercu li .p{ width:18px; text-align:center; } #arbre-admin .ta-err{ color:#7a2e1a; font-weight:600; margin:6px 0 0; } #arbre-admin .ta-boutons{ display:flex; gap:10px; } .bouton.danger{ background:linear-gradient(#d98a6a,#c0392b); color:#fff; border-color:#822417; box-shadow:0 3px 0 #5e1a11; } /* ============================================================ ADMIN — menu en onglets groupés + tableau de bord en cartes ============================================================ */ .adm-nav{ position:relative; background: repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, transparent 2px 7px), linear-gradient(180deg,#f3e6bd,#e7d5a4); border:1px solid var(--bord); border-radius:16px; box-shadow:0 12px 30px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.55); padding:8px 20px 12px; margin:0 0 16px; } .adm-head{ display:flex; align-items:center; padding:12px 2px 13px; border-bottom:2px solid #d8bf80; margin-bottom:4px; } .adm-brand{ font-family:var(--serif); font-weight:700; font-size:20px; display:flex; align-items:center; gap:10px; } .adm-brand .dr{ font-size:22px; filter:drop-shadow(0 1px 1px rgba(0,0,0,.25)); } .adm-brand .tag{ font-family:var(--sans); font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:1.4px; color:#fdf3d6; background:linear-gradient(180deg,#9a7b34,var(--or-fonce)); border-radius:20px; padding:3px 11px; box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 1px 2px rgba(0,0,0,.28); } .adm-links{ display:flex; flex-direction:column; } .adm-cluster{ display:flex; align-items:center; padding:11px 2px; } .adm-cluster + .adm-cluster{ border-top:1px solid #dcc383; } .adm-cluster.lead{ padding-top:12px; padding-bottom:13px; } .adm-cluster.lead + .adm-cluster{ border-top:2px solid #cdae66; } .adm-grp{ flex:0 0 142px; display:flex; align-items:center; gap:7px; font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:1px; color:#8a6a28; } .adm-grp .gi{ font-size:13px; opacity:.85; } .adm-cluster.lead .adm-grp{ color:#6d5320; } .adm-pills{ flex:1; display:flex; flex-wrap:wrap; gap:7px; padding-left:20px; margin-left:6px; border-left:2px solid #d6ba76; } .adm-pill{ display:inline-flex; align-items:center; gap:6px; line-height:1; font-size:13.5px; font-weight:600; text-decoration:none; color:var(--encre); background:rgba(255,255,255,.52); border:1px solid #d8bd80; border-radius:11px; padding:7px 13px; box-shadow:inset 0 1px 0 rgba(255,255,255,.5); transition:background .12s, transform .12s, box-shadow .12s, border-color .12s; } .adm-pill .ic{ font-size:14px; opacity:.92; } .adm-pill:hover{ background:#fff7e2; border-color:var(--or); transform:translateY(-1px); box-shadow:0 5px 11px rgba(90,60,10,.18); } .adm-pill.actif{ background:linear-gradient(180deg,#e6c877,var(--or)); border-color:var(--or-fonce); font-weight:700; box-shadow:0 2px 0 var(--ombre), inset 0 1px 0 rgba(255,255,255,.42); } @media(max-width:640px){ .adm-cluster{ flex-direction:column; align-items:flex-start; gap:7px; } .adm-grp{ flex:none; } .adm-pills{ padding-left:0; margin-left:0; border-left:0; } } .adm-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; } @media(max-width:760px){ .adm-stats{ grid-template-columns:1fr 1fr; } } .adm-stat{ background:linear-gradient(180deg,#fbf3da,#f1e4c0); border:1px solid var(--or-fonce); border-radius:12px; padding:16px; box-shadow:inset 0 1px 0 rgba(255,255,255,.5); } .adm-stat .ic{ font-size:22px; } .adm-stat .n{ font-family:var(--serif); font-size:30px; font-weight:700; line-height:1.1; margin:6px 0 2px; } .adm-stat .l{ font-size:12.5px; color:#6a5526; font-weight:600; } .adm-stat.alerte{ background:linear-gradient(180deg,#f7e2cf,#f0cdb0); border-color:#b06a52; } .adm-stat.alerte .n{ color:#9a3b2a; } /* Tableau de bord hiérarchisé (en-tête + sections À traiter / chiffres / raccourcis) */ .adm-dash-head{ margin:0 0 24px; } .adm-dash-head h1{ margin:0 0 4px; } .adm-dash-head p{ margin:0; color:#6a5526; font-size:14.5px; } .adm-sec{ margin:0 0 26px; } .adm-sec:last-child{ margin-bottom:0; } .adm-seclabel{ display:flex; align-items:center; gap:9px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:1.1px; color:#8a6a28; margin:0 0 13px; } .adm-seclabel::before{ content:""; width:6px; height:6px; background:var(--or-fonce); transform:rotate(45deg); border-radius:1px; flex:0 0 auto; } .adm-seclabel::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg,#cdb069,transparent); } .adm-todo-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; } .adm-todo{ display:flex; align-items:center; gap:15px; padding:15px 17px; border-radius:12px; text-decoration:none; color:inherit; background:linear-gradient(180deg,#fbf3da,#f1e4c0); border:1px solid var(--or-fonce); box-shadow:inset 0 1px 0 rgba(255,255,255,.5); transition:transform .12s, box-shadow .12s; } a.adm-todo:hover{ transform:translateY(-2px); box-shadow:0 7px 16px rgba(90,60,10,.18); } .adm-todo .ti{ font-size:24px; width:48px; height:48px; display:grid; place-items:center; border-radius:12px; background:rgba(255,255,255,.55); flex:0 0 auto; } .adm-todo .tx{ flex:1; min-width:0; } .adm-todo .tn{ font-family:var(--serif); font-size:27px; font-weight:700; line-height:1; } .adm-todo .tl{ font-size:13px; color:#6a5526; font-weight:600; margin-top:3px; } .adm-todo .cta{ font-size:13px; font-weight:700; color:#8a5a1a; white-space:nowrap; } .adm-todo.alerte{ background:linear-gradient(180deg,#f7e2cf,#f0cdb0); border-color:#b06a52; } .adm-todo.alerte .ti{ background:rgba(255,255,255,.4); } .adm-todo.alerte .tn{ color:#9a3b2a; } .adm-todo.calme{ background:linear-gradient(180deg,#eef3df,#e2ecca); border-color:#7a9a52; } .adm-todo.calme .tn{ color:#3f7a40; font-size:20px; } .adm-todo.calme .cta{ color:#5a7a2e; } .adm-metrics{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px; } .adm-quick{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:11px; } .adm-quick a{ display:flex; align-items:center; gap:11px; padding:13px 15px; border-radius:11px; text-decoration:none; color:var(--encre); font-weight:600; font-size:14px; background:rgba(255,255,255,.42); border:1px solid var(--bord); transition:background .12s, transform .12s, border-color .12s; } .adm-quick a:hover{ background:#fff7e2; border-color:var(--or); transform:translateY(-1px); } .adm-quick .qi{ font-size:19px; flex:0 0 auto; } .adm-quick .qa{ margin-left:auto; opacity:.45; font-size:15px; } @media(max-width:620px){ .adm-todo-grid{ grid-template-columns:1fr; } } /* En-tête des listes CRUD génériques (titre + décompte à gauche, action à droite) */ .adm-list-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:0 0 18px; } .adm-list-head h1{ margin:0; } .adm-list-sub{ margin:4px 0 0; color:#6a5526; font-size:14px; } /* Réglages regroupés */ .reg-sect{ border-left:3px solid var(--or); padding-left:14px; margin:0 0 20px; } .reg-lib{ font-family:var(--serif); font-size:16px; font-weight:700; margin-bottom:10px; display:flex; align-items:center; gap:8px; } .reg-grille{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; } @media(max-width:760px){ .reg-grille{ grid-template-columns:1fr; } } .reg-c{ display:flex; flex-direction:column; gap:3px; font-size:13px; font-weight:600; } .reg-c input{ width:100%; } .reg-aide{ font-weight:400; font-size:11.5px; color:#6a5526; } /* Interrupteurs (boutons 1-clic) */ .reg-bascules{ display:flex; flex-direction:column; gap:10px; } .reg-bascule{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:8px 12px; background:rgba(188,158,88,.08); border:1px solid rgba(188,158,88,.35); border-radius:8px; } .reg-bascule-txt{ display:flex; flex-direction:column; gap:2px; flex:1 1 240px; font-size:13px; } .reg-etat{ font-size:12px; font-weight:700; padding:2px 10px; border-radius:999px; white-space:nowrap; } .reg-etat.on{ color:#2f6b2f; background:rgba(76,150,76,.16); } .reg-etat.off{ color:#9a3b2e; background:rgba(170,70,55,.16); } /* Réglages — refonte : intro, sommaire, sections macro, groupes co-localisés, barre d'enregistrement, zone opérations */ .reg-intro{ font-size:13.5px; color:#6a5526; margin:0 0 16px; max-width:760px; line-height:1.5; } .reg-sommaire{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; padding:10px 14px; margin:0 0 22px; background:rgba(188,158,88,.08); border:1px solid rgba(188,158,88,.35); border-radius:10px; font-size:12.5px; } .reg-sommaire .reg-somm-sec{ font-weight:700; color:#6a5526; margin-left:6px; } .reg-sommaire .reg-somm-sec:first-child{ margin-left:0; } .reg-sommaire a{ text-decoration:none; color:#7a5c14; padding:2px 9px; border-radius:999px; background:rgba(188,158,88,.16); } .reg-sommaire a:hover{ background:rgba(188,158,88,.32); } .reg-sommaire .reg-somm-ops{ margin-left:auto; background:rgba(170,70,55,.14); color:#9a3b2e; } .reg-section-titre{ font-family:var(--serif); font-size:19px; font-weight:700; color:var(--encre); margin:26px 0 12px; padding-bottom:5px; border-bottom:2px solid var(--or); } .reg-groupe{ border-left:3px solid var(--or); padding:2px 0 2px 14px; margin:0 0 18px; scroll-margin-top:16px; } .reg-groupe .reg-bascules{ margin-bottom:12px; } .reg-save-barre{ position:sticky; bottom:0; z-index:20; display:flex; justify-content:flex-end; padding:12px 0 12px; margin:6px 0 8px; background:#f4ead0; border-top:1px solid rgba(188,158,88,.5); } .reg-ops{ background:rgba(170,70,55,.05); border:1px solid rgba(170,70,55,.25); border-radius:12px; padding:16px 18px; } .reg-ops .reg-groupe{ border-left-color:#c7773b; margin-bottom:16px; } .reg-ops .reg-groupe:last-child{ margin-bottom:0; } .reg-ops .reg-danger{ border-left-color:#8a2f1d; } /* Crises de la Gazette — bandeau d'invasion en tête de zone */ .crise-bandeau{ margin:0 0 16px; padding:12px 16px; border:1px solid #c46b3a; border-left:4px solid #a83e1d; border-radius:10px; background:rgba(200,80,40,.09); } .crise-tete{ font-size:14px; color:#7a2e18; line-height:1.5; } .crise-ic{ font-size:16px; } .crise-pv{ display:flex; align-items:center; gap:8px; margin-top:8px; } .crise-pv-barre{ flex:1; height:10px; border-radius:999px; background:rgba(120,40,20,.18); overflow:hidden; } .crise-pv-barre i{ display:block; height:100%; background:linear-gradient(90deg,#c0392b,#e07b3a); } .crise-pv-txt{ font-size:12px; font-weight:700; color:#7a2e18; min-width:34px; text-align:right; } /* Personnages — édition (resserrée) */ .pe-wrap{ max-width:760px; margin:0 auto; } .pe-head{ display:flex; flex-wrap:wrap; gap:6px 12px; align-items:center; font-size:13.5px; color:#5a431f; margin:-4px 0 16px; } .pe-head .tag{ background:var(--or-fonce); color:#fff; border-radius:20px; padding:2px 11px; font-size:12px; font-weight:700; } .pe-head .pe-retour{ margin-left:auto; font-weight:600; } .pe-carte{ background:linear-gradient(180deg,#fbf3da,#f3e7c6); border:1px solid var(--or-fonce); border-radius:12px; padding:13px 16px 15px; margin:0 0 14px; box-shadow:inset 0 1px 0 rgba(255,255,255,.5); } .pe-carte h3{ font-family:var(--serif); font-size:15px; margin:0 0 11px; border-bottom:1px solid var(--bord); padding-bottom:7px; } .pe-grid{ display:grid; gap:12px; } .pe-grid.g3{ grid-template-columns:repeat(3,minmax(0,1fr)); } /* minmax(0,…) : autorise le rétrécissement, pas de débordement */ @media(max-width:560px){ .pe-grid.g3{ grid-template-columns:1fr; } } .pe-grid.nums{ display:flex; flex-wrap:wrap; gap:14px; } /* champs-nombres : cellules égales qui remplissent la carte */ .pe-grid.nums .pe-f{ flex:1 1 96px; align-items:center; } .pe-grid.nums .pe-f label{ text-align:center; } .pe-grid.nums .pe-f input{ width:100%; max-width:100%; } .pe-f{ display:flex; flex-direction:column; gap:4px; font-size:12.5px; font-weight:600; min-width:0; } .pe-f label{ color:#6a5526; } .pe-f input, .pe-f select{ width:100%; min-width:0; } /* Le min-width:240px global des inputs (3 :not() → spécificité (0,3,1)) écrasait .pe-f input{min-width:0} et faisait déborder/chevaucher les champs-nombres. On le bat à spécificité égale (plus tardif). */ .pe-carte .pe-grid .pe-f input, .pe-carte .pe-grid .pe-f select{ min-width:0; } .pe-grid.nums .pe-f input{ text-align:center; } .pe-nom input{ font-size:16px; } .pe-actions{ margin:4px 0 0; } .pe-danger{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:14px; background:rgba(154,59,42,.07); border:1px solid #caa07a; border-radius:10px; padding:11px 14px; } /* ============================================================ PROFIL — vitrine du personnage (visiteur / propriétaire) ============================================================ */ .profil .hero{ display:flex; gap:22px; align-items:flex-start; } .profil .portrait{ width:130px; height:130px; flex:none; border-radius:14px; border:3px solid var(--or-fonce); background:linear-gradient(160deg,#3a2a12,#1c1305); display:flex; align-items:center; justify-content:center; font-size:54px; overflow:hidden; box-shadow:inset 0 2px 0 rgba(255,255,255,.15); } .profil .portrait img{ width:100%; height:100%; object-fit:cover; } /* Portrait cliquable (propriétaire) : bouton + voile « Changer la photo » au survol/focus */ .profil button.portrait{ padding:0; cursor:pointer; font-family:inherit; color:inherit; -webkit-appearance:none; appearance:none; position:relative; } .profil button.portrait:focus-visible{ outline:2px solid var(--or); outline-offset:2px; } .profil .portrait-voile{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; background:rgba(28,19,5,.62); color:#f1dda3; opacity:0; transition:opacity .15s ease; } .profil button.portrait:hover .portrait-voile, .profil button.portrait:focus-visible .portrait-voile, .profil button.portrait.portrait-envoi .portrait-voile{ opacity:1; } .profil .portrait-voile .ic{ font-size:26px; line-height:1; } .profil .portrait-voile .txt{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; text-align:center; padding:0 6px; } .profil .hero-main{ flex:1; min-width:0; } .profil .hero-meta{ color:#5a431f; font-weight:600; margin:0 0 10px; } .profil .hero-stats{ display:flex; gap:10px; flex-wrap:wrap; margin:0 0 12px; } .profil .hstat{ background:linear-gradient(180deg,#fbf3da,#f1e4c0); border:1px solid var(--or-fonce); border-radius:12px; padding:8px 16px; text-align:center; box-shadow:inset 0 1px 0 rgba(255,255,255,.5); } .profil .hstat .n{ font-family:var(--serif); font-size:24px; font-weight:700; line-height:1; } .profil .hstat .l{ font-size:11px; color:#6a5526; font-weight:700; text-transform:uppercase; letter-spacing:.4px; margin-top:3px; } .profil .presentation{ background:rgba(255,255,255,.30); border-left:3px solid var(--or-fonce); border-radius:0 8px 8px 0; padding:10px 14px; font-style:italic; color:#4a3818; margin:0 0 14px; } .profil .actions{ display:flex; gap:10px; flex-wrap:wrap; } .profil .cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; } .profil .cards.c3{ grid-template-columns:repeat(3,1fr); } .profil .card{ background:linear-gradient(180deg,#fbf3da,#f1e4c0); border:1px solid var(--or-fonce); border-radius:12px; padding:14px; text-align:center; box-shadow:inset 0 1px 0 rgba(255,255,255,.5); } .profil .card .ic{ font-size:20px; } .profil .card .n{ font-family:var(--serif); font-size:26px; font-weight:700; margin:5px 0 2px; } .profil .card .l{ font-size:12px; color:#6a5526; font-weight:600; } .profil .attrs{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; } .profil .attr{ background:rgba(255,255,255,.30); border:1px solid var(--bord); border-radius:10px; padding:9px; text-align:center; } .profil .attr .n{ font-family:var(--serif); font-size:22px; font-weight:700; } .profil .attr .l{ font-size:11px; color:#6a5526; text-transform:uppercase; letter-spacing:.4px; } .profil .attr-secret{ position:relative; border-radius:12px; overflow:hidden; } .profil .attr-secret .gabarit{ filter:blur(7px); opacity:.85; user-select:none; pointer-events:none; } .profil .voile{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; text-align:center; background:radial-gradient(120% 120% at 50% 50%, rgba(36,24,8,.18), rgba(36,24,8,.42)); border-radius:12px; } .profil .voile .cad{ font-size:24px; } .profil .voile .t{ font-family:var(--serif); font-weight:700; font-size:16px; text-shadow:0 1px 2px rgba(255,255,255,.5); } .profil .voile .d{ font-size:12.5px; color:#3f2f14; max-width:420px; background:rgba(232,210,154,.7); border-radius:20px; padding:3px 12px; } .profil .two{ display:grid; grid-template-columns:1fr 1fr; gap:18px; } .profil ul.liste{ list-style:none; margin:0; padding:0; } .profil ul.liste li{ display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px dashed rgba(138,109,47,.4); font-size:14px; } .profil ul.liste li:last-child{ border-bottom:0; } .profil ul.liste .ic{ width:24px; text-align:center; font-size:16px; flex:none; } .profil ul.liste .gr{ flex:1; min-width:0; } .profil ul.liste .meta{ color:#7a6128; font-size:12px; } .profil .pill{ font-size:11px; font-weight:700; border-radius:20px; padding:1px 9px; color:#fff; } .profil .pill.ok{ background:var(--vert); } .profil .pill.cours{ background:#b0682c; } .profil .pill.ferme{ background:#7a6748; } .profil .issue.victoire{ color:#2e7d32; font-weight:700; } .profil .issue.defaite{ color:#9a3b2a; font-weight:700; } .profil .issue.nul{ color:#7a6748; font-weight:700; } .profil .edit{ background:rgba(255,255,255,.30); border:1px solid var(--bord); border-radius:10px; padding:14px 16px; margin-top:10px; } @media(max-width:820px){ .profil .two{ grid-template-columns:1fr; } .profil .cards{ grid-template-columns:1fr 1fr; } .profil .hero{ flex-direction:column; } } .pe-danger-txt{ font-size:12.5px; color:#6a5526; } /* Bouton désactivé (ex. « Attaquer » bloqué) + raison affichée en clair */ .bouton:disabled, .bouton.off{ cursor:not-allowed; opacity:.55; filter:saturate(.4); } .bouton:disabled:hover, .bouton.off:hover{ transform:none; box-shadow:0 3px 0 var(--ombre); filter:saturate(.4); } .profil .attaque-bloquee{ display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap; } .profil .attaque-bloquee .raison{ color:#9a3b2a; font-size:13px; font-weight:600; } /* ============================================================ FORUM — refonte (cartes, dernier message cliquable) ============================================================ */ .fo-fil{ font-size:14px; color:#6b5526; margin:0 0 16px; } .fo-fil a{ color:var(--lien); text-decoration:none; font-weight:600; } .fo-fil a:hover{ text-decoration:underline; } .fo-fil .sep{ opacity:.55; margin:0 5px; } .fo-cat{ display:flex; align-items:center; gap:12px; margin:20px 0 0; background:linear-gradient(180deg,#34250f,#241808); color:var(--parchemin); border-radius:12px 12px 0 0; padding:11px 18px; box-shadow:0 5px 14px rgba(0,0,0,.30); } .fo-cat .titre{ font-family:var(--serif); font-size:19px; font-weight:700; } .fo-cat .titre a{ color:var(--parchemin); text-decoration:none; } .fo-cat .titre a:hover{ color:#fff; } .fo-cat .desc{ font-size:12.5px; color:#cbb178; } .fo-groupe{ border:1px solid var(--bord); border-radius:12px; overflow:hidden; box-shadow:0 12px 28px rgba(0,0,0,.18); margin:0 0 18px; } .fo-cat + .fo-groupe{ border-top:0; border-radius:0 0 12px 12px; } .fo-forum{ display:grid; grid-template-columns:auto 1fr auto minmax(196px,236px); gap:15px; align-items:center; background:linear-gradient(180deg,#f6ead0,#efe1bd); padding:13px 16px; border-bottom:1px solid #d9c28d; } .fo-forum:last-child{ border-bottom:0; } .fo-forum:hover{ background:linear-gradient(180deg,#fbf1d8,#f3e6c5); } .fo-ic{ width:46px; height:46px; border-radius:12px; flex:none; display:flex; align-items:center; justify-content:center; font-size:23px; background:radial-gradient(120% 120% at 30% 22%, #fff5d6, #e6cd90); border:1px solid var(--or-fonce); box-shadow:inset 0 1px 0 rgba(255,255,255,.6); } .fo-main{ min-width:0; } .fo-main .nom{ font-family:var(--serif); font-size:17px; font-weight:700; } .fo-main .nom a{ color:var(--encre); text-decoration:none; } .fo-main .nom a:hover{ color:var(--lien); } .fo-main .desc{ font-size:12.5px; color:#6b5526; margin:2px 0 0; } .fo-sous{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; } .fo-sous .lbl{ font-size:10.5px; text-transform:uppercase; letter-spacing:.5px; color:#8a6a28; align-self:center; } .fo-chip{ font-size:11.5px; font-weight:600; text-decoration:none; color:#5a431f; background:rgba(255,255,255,.62); border:1px solid var(--bord); border-radius:20px; padding:2px 11px; } .fo-chip:hover{ background:#fff6df; } .fo-chip .n{ color:#9a7d34; font-weight:700; } .fo-cpt{ text-align:center; white-space:nowrap; color:#6b5526; } .fo-cpt .n{ font-family:var(--serif); font-size:18px; font-weight:700; color:var(--encre); line-height:1.05; } .fo-cpt .l{ font-size:10.5px; text-transform:uppercase; letter-spacing:.4px; } .fo-der{ display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.45); border:1px solid var(--bord); border-radius:10px; padding:7px 10px; min-width:0; text-decoration:none; } .fo-der .av{ width:38px; height:38px; border-radius:9px; flex:none; overflow:hidden; border:2px solid var(--or-fonce); background:linear-gradient(160deg,#3a2a12,#1c1305); display:flex; align-items:center; justify-content:center; font-size:17px; font-weight:700; color:#e8d29a; } .fo-der .av img{ width:100%; height:100%; object-fit:cover; } .fo-der .txt{ min-width:0; font-size:12px; line-height:1.4; } .fo-der .titre{ display:block; font-weight:700; color:var(--lien); text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .fo-der .titre:hover{ text-decoration:underline; } .fo-der .meta{ display:block; color:#7a6128; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .fo-der .meta a{ color:#5a431f; font-weight:700; text-decoration:none; } .fo-der .meta a:hover{ text-decoration:underline; } .fo-der.vide{ color:#9a875a; font-style:italic; justify-content:center; } .fo-bloc-titre{ display:flex; align-items:center; gap:10px; margin:24px 0 10px; } .fo-bloc-titre h2{ margin:0; font-size:18px; } .fo-bloc-titre .sp{ flex:1; } .fo-sujets{ border:1px solid var(--bord); border-radius:12px; overflow:hidden; box-shadow:0 12px 28px rgba(0,0,0,.18); } .fo-sujet{ display:grid; grid-template-columns:auto 1fr auto auto minmax(176px,210px); gap:15px; align-items:center; background:linear-gradient(180deg,#f6ead0,#efe1bd); padding:11px 16px; border-bottom:1px solid #d9c28d; } .fo-sujet:last-child{ border-bottom:0; } .fo-sujet:hover{ background:linear-gradient(180deg,#fbf1d8,#f3e6c5); } .fo-sujet .st{ width:30px; text-align:center; font-size:19px; flex:none; } .fo-sujet .titre{ font-size:15px; font-weight:700; } .fo-sujet .titre a{ color:var(--encre); text-decoration:none; } .fo-sujet .titre a:hover{ color:var(--lien); } .fo-sujet .par{ font-size:12px; color:#6b5526; margin-top:1px; } .fo-sujet .par a{ color:#5a431f; font-weight:700; text-decoration:none; } .fo-sujet .par a:hover{ text-decoration:underline; } .fo-rep, .fo-vues{ text-align:center; color:#6b5526; white-space:nowrap; } .fo-rep .n, .fo-vues .n{ font-family:var(--serif); font-size:17px; font-weight:700; color:var(--encre); line-height:1.05; } .fo-rep .l, .fo-vues .l{ font-size:10.5px; text-transform:uppercase; letter-spacing:.4px; } .fo-badge{ display:inline-block; font-size:10px; font-weight:700; border-radius:20px; padding:1px 8px; color:#fff; vertical-align:middle; margin-left:6px; } .fo-badge.quete{ background:var(--vert); } .fo-badge.ferme{ background:#7a6748; } .fo-badge.epingle{ background:#b0682c; } @media(max-width:780px){ .fo-forum{ grid-template-columns:auto 1fr; } .fo-forum .fo-cpt{ grid-column:2; justify-self:start; display:flex; gap:14px; } .fo-forum .fo-der{ grid-column:1 / -1; } .fo-sujet{ grid-template-columns:auto 1fr; } .fo-sujet .fo-rep, .fo-sujet .fo-vues{ grid-column:2; justify-self:start; } .fo-sujet .fo-der{ grid-column:1 / -1; } } /* ============================================================ FORUM — carte d'auteur (un message) ============================================================ */ .msg{ display:grid; grid-template-columns:212px 1fr; border:1px solid var(--bord); border-radius:12px; overflow:hidden; margin:0 0 14px; box-shadow:0 10px 26px rgba(0,0,0,.16); background:linear-gradient(180deg,#f6ead0,#efe1bd); scroll-margin-top:80px; } /* Séparateur « reprendre où j'en étais » : posé juste avant le premier message non lu. */ .fo-nouveaux{ display:flex; align-items:center; gap:12px; margin:18px 0; scroll-margin-top:80px; color:var(--ombre); } .fo-nouveaux::before, .fo-nouveaux::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg, transparent, var(--or-fonce), transparent); } .fo-nouveaux span{ font-family:var(--serif); font-weight:700; font-size:12px; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; padding:3px 12px; border:1px solid var(--or-fonce); border-radius:999px; background:rgba(255,255,255,.5); } .msg-auteur{ background:linear-gradient(180deg,#efe0b8,#e7d4a2); border-right:1px solid #d2b878; padding:14px 12px; text-align:center; } .msg-ava{ width:120px; height:120px; margin:0 auto 10px; border-radius:14px; overflow:hidden; display:flex; align-items:center; justify-content:center; font-size:54px; background:linear-gradient(160deg,#3a2a12,#1c1305); color:#e8d29a; } .msg-ava img{ width:100%; height:100%; object-fit:cover; } .msg-nom{ font-family:var(--serif); font-size:17px; font-weight:700; text-decoration:none; color:var(--encre); display:block; } .msg-nom:hover{ color:var(--lien); } .msg-rc{ font-size:12px; color:#6b5526; margin-top:2px; } .msg-role{ display:inline-block; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:#fff; border-radius:20px; padding:1px 9px; margin-top:9px; } .msg-role.mj{ background:#3f72a8; } .msg-role.admin{ background:#9a3b2a; } .msg-tier{ font-size:11.5px; font-weight:700; margin-top:9px; } .msg-cnt{ font-size:11px; color:#8a6a28; margin-top:2px; } .msg-corps{ padding:13px 18px; min-width:0; } .msg-tete{ display:flex; justify-content:flex-end; align-items:center; gap:8px; color:#8a6a28; font-size:12px; border-bottom:1px dashed rgba(138,109,47,.35); padding-bottom:6px; margin-bottom:10px; } .msg-contenu{ font-size:14.5px; line-height:1.6; color:#3f2f14; word-wrap:break-word; } .cadre-r1{ border:2px solid #7a6748; } .cadre-r2{ border:3px solid #9c7b3e; box-shadow:inset 0 0 0 1px rgba(255,255,255,.2); } .cadre-r3{ border:3px solid #b8702f; box-shadow:0 0 6px rgba(184,112,47,.45); } .cadre-r4{ border:3px solid #cf7a2c; box-shadow:0 0 9px rgba(207,122,44,.55); } .cadre-r5{ border:3px solid #e08a2e; box-shadow:0 0 11px rgba(224,138,46,.6); } .cadre-r6{ border:3px solid #ecb53f; box-shadow:0 0 12px rgba(236,181,63,.7); } .cadre-r7{ border:3px solid var(--or); box-shadow:0 0 14px rgba(188,158,88,.8); } .cadre-r8{ border:3px solid #f0c24a; box-shadow:0 0 16px rgba(240,120,40,.6), 0 0 8px rgba(255,210,90,.85); } .cadre-r9{ border:3px solid #ffd766; box-shadow:0 0 22px rgba(255,170,40,.9), inset 0 0 12px rgba(255,220,120,.55); } .t-r1{ color:#7a6748; } .t-r2{ color:#8a6a2e; } .t-r3{ color:#a9621f; } .t-r4{ color:#b85e1f; } .t-r5{ color:#c2551a; } .t-r6{ color:#a9781e; } .t-r7{ color:#8a6a1e; } .t-r8{ color:#b8860b; } .t-r9{ color:#b8860b; } @media(max-width:680px){ .msg{ grid-template-columns:1fr; } .msg-auteur{ border-right:0; border-bottom:1px solid #d2b878; display:flex; gap:12px; align-items:center; text-align:left; flex-wrap:wrap; } .msg-ava{ margin:0; width:78px; height:78px; font-size:36px; } } /* ============================================================ FORUM — en-tête de sujet (masthead : fil, titre, barre d'actions) ============================================================ */ .zone-tete.sujet-tete{ margin-bottom:16px; } /* la barre d'actions suit le titre : on resserre */ .sujet-barre{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px; margin:2px 0 4px; } .sujet-barre > form{ margin:0; display:inline-flex; } .sujet-votes form{ display:contents; } /* le bouton « Voter » rejoint le compteur dans la même pilule */ /* Votes : compteur + appel à voter réunis en une pilule */ .sujet-votes{ display:inline-flex; align-items:stretch; border:1px solid var(--or-fonce); border-radius:24px; overflow:hidden; background:rgba(255,255,255,.40); box-shadow:inset 0 1px 0 rgba(255,255,255,.55); } .sujet-votes .sv-n{ display:inline-flex; align-items:center; gap:8px; padding:8px 18px; font-family:var(--serif); font-weight:700; font-size:14.5px; color:var(--encre); white-space:nowrap; } .sujet-votes .sv-n b{ font-size:18px; line-height:1; } .sujet-votes .sv-cta{ display:inline-flex; align-items:center; gap:7px; padding:8px 18px; font-family:var(--titre); letter-spacing:.4px; font-size:13px; font-weight:600; cursor:pointer; color:var(--encre); background:linear-gradient(var(--or-clair),var(--or)); border:0; border-left:1px solid var(--or-fonce); transition:filter .12s; } .sujet-votes .sv-cta:hover{ filter:brightness(1.04); } .sujet-votes .sv-cta:active{ filter:brightness(.97); } /* Actions secondaires : pilules cohérentes (suivre / épingler / modération) */ .sujet-act{ display:inline-flex; align-items:center; gap:7px; font-family:inherit; font-size:13.5px; font-weight:700; cursor:pointer; text-decoration:none; color:#5a431f; background:rgba(255,255,255,.45); border:1px solid var(--bord); border-radius:24px; padding:8px 16px; transition:background .12s, transform .12s, box-shadow .12s; } .sujet-act:hover{ background:#fff6df; transform:translateY(-1px); box-shadow:0 3px 8px rgba(0,0,0,.12); } .sujet-act:active{ transform:translateY(0); box-shadow:none; } .sujet-act.on{ background:linear-gradient(var(--or-clair),var(--or)); border-color:var(--or-fonce); color:var(--encre); box-shadow:0 2px 0 var(--ombre); } .sujet-act.on:hover{ filter:brightness(1.03); transform:translateY(-1px); box-shadow:0 2px 0 var(--ombre); } /* Filet ornemental entre le masthead et la conversation */ .sujet-filet{ display:flex; align-items:center; justify-content:center; gap:14px; max-width:560px; margin:22px auto; color:var(--or-fonce); } .sujet-filet::before, .sujet-filet::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg, transparent, var(--or-fonce), transparent); } .sujet-filet span{ font-size:14px; opacity:.85; } /* ============================================================ FORUM — éditeur BBCode + rendu du contenu ============================================================ */ .bb{ border:1px solid var(--or-fonce); border-radius:10px; overflow:hidden; background:rgba(255,255,255,.5); } .bb-toolbar{ display:flex; flex-wrap:wrap; gap:3px; padding:6px 8px; background:linear-gradient(180deg,#efe0b8,#e7d4a2); border-bottom:1px solid var(--or-fonce); } .bb-btn{ min-width:30px; height:30px; padding:0 8px; display:inline-flex; align-items:center; justify-content:center; gap:3px; font-family:var(--serif); font-size:15px; font-weight:700; cursor:pointer; color:var(--encre); background:rgba(255,255,255,.55); border:1px solid var(--bord); border-radius:7px; } .bb-btn:hover{ background:#fff6df; } .bb-btn.i{ font-style:italic; } .bb-btn.u{ text-decoration:underline; } .bb-btn.s{ text-decoration:line-through; } .bb-sep{ width:1px; background:var(--bord); margin:2px 4px; } .bb-menu{ position:relative; display:inline-flex; } .bb-pop{ display:none; position:absolute; top:34px; left:0; z-index:30; background:#f3e7c6; border:1px solid var(--or-fonce); border-radius:8px; box-shadow:0 8px 20px rgba(0,0,0,.3); padding:5px; min-width:120px; } .bb-pop-it{ display:block; width:100%; text-align:left; font-family:inherit; font-size:13.5px; cursor:pointer; background:transparent; border:0; border-radius:6px; padding:5px 9px; color:var(--encre); } .bb-pop-it:hover{ background:#fff6df; } .bb-area{ width:100%; border:0; background:transparent; padding:12px 14px; font-family:var(--sans); font-size:14.5px; color:var(--encre); resize:vertical; min-height:140px; display:block; } .bb-area:focus{ outline:none; } .bb-foot{ display:flex; align-items:center; gap:10px; padding:7px 10px; border-top:1px dashed var(--bord); font-size:12px; color:#6b5526; } .bb-foot .sp{ flex:1; } .bb-foot .bb-apercu{ height:auto; } .apercu{ background:rgba(255,255,255,.4); border:1px solid var(--bord); border-radius:10px; padding:14px 16px; margin-top:12px; } .apercu .lbl{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:#8a6a28; margin-bottom:8px; } .rendu, .msg-contenu{ word-wrap:break-word; } .msg-contenu blockquote, .rendu blockquote{ margin:8px 0; padding:6px 14px; border-left:3px solid var(--or-fonce); background:rgba(42,29,14,.06); border-radius:0 8px 8px 0; font-style:italic; } .msg-contenu ul, .rendu ul{ margin:8px 0; padding-left:22px; } .msg-contenu li, .rendu li{ margin:2px 0; } .msg-contenu a, .rendu a{ color:var(--lien); font-weight:600; } .msg-contenu img.bb-img, .rendu img.bb-img{ max-width:100%; height:auto; border-radius:8px; border:1px solid var(--or-fonce); margin:6px 0; display:block; } /* tailles d'image : scoper comme la règle de base (.msg-contenu img.bb-img) pour la même spécificité, sinon le max-width:100% l'emporte */ .msg-contenu img.bb-img-petit, .rendu img.bb-img-petit{ max-width:180px; } .msg-contenu img.bb-img-moyen, .rendu img.bb-img-moyen{ max-width:360px; } .msg-contenu img.bb-img-grand, .rendu img.bb-img-grand{ max-width:600px; } .msg-contenu img.bb-img-pleine, .rendu img.bb-img-pleine{ max-width:100%; } .msg-modifie{ color:#9a875a; font-style:italic; margin-right:auto; } .msg-actions{ display:flex; gap:8px; justify-content:flex-end; margin-top:10px; padding-top:8px; border-top:1px dashed rgba(138,109,47,.25); } .msg-act{ font-size:12px; font-weight:600; text-decoration:none; color:#5a431f; background:rgba(255,255,255,.5); border:1px solid var(--bord); border-radius:7px; padding:4px 10px; cursor:pointer; font-family:inherit; } .msg-act:hover{ background:#fff6df; } .msg-act.danger{ color:#9a3b2a; border-color:#caa07a; } .msg-act.danger:hover{ background:#f7e2cf; } /* --- Réactions emoji sur les messages de forum --- */ .reactions{ display:inline-flex; gap:4px; margin-left:8px; vertical-align:middle; } .reactions .reac{ display:inline-flex; align-items:center; gap:3px; padding:1px 7px; border:1px solid var(--bord, #c9b48a); border-radius:999px; background:transparent; cursor:pointer; font-size:13px; line-height:1.4; color:var(--encre, #3a2c1a); } .reactions .reac:hover{ background:rgba(0,0,0,.05); } .reactions .reac.actif{ border-color:var(--lien, #8a5a2b); background:rgba(176,141,87,.18); font-weight:700; } .reactions .reac.vide{ opacity:.55; } .reactions .reac.vide:hover{ opacity:1; } .reactions .reac-g{ font-size:14px; line-height:1; } .reactions .reac-n{ font-variant-numeric:tabular-nums; min-width:.8em; text-align:center; } .bb-center{ text-align:center; } /* global : [center] doit centrer partout (aperçu, chat, wiki…), pas seulement dans .msg-contenu/.rendu — audit H5 */ .msg-contenu details.spoiler, .rendu details.spoiler{ background:rgba(42,29,14,.06); border:1px solid var(--bord); border-radius:8px; padding:4px 12px; margin:8px 0; } /* [combat=ID] : carte de combat embarquée dans un post (pont combat↔forum) */ .bb-combat{ margin:10px 0; } .bb-combat > a, .bb-combat-sec{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 14px; padding:10px 14px; border:1px solid var(--or-fonce); border-radius:10px; background:rgba(42,29,14,.05); text-decoration:none; color:inherit; font-weight:normal; } .bb-combat > a:hover{ background:rgba(42,29,14,.09); border-color:var(--lien); } .bb-combat-sec{ border-style:dashed; } /* Post « Héraut » (compte-rendu neutre, ex. issue d'un duel de forum) */ .msg-systeme{ margin:12px 0; padding:12px 16px; border:1px solid var(--or-fonce); border-left:4px solid var(--or); border-radius:10px; background:rgba(188,158,88,.08); } .msg-heraut-tete{ display:flex; align-items:center; gap:8px; margin-bottom:6px; font-family:var(--serif); } .msg-heraut-nom{ font-weight:700; } .msg-heraut-date{ margin-left:auto; color:#9a875a; font-size:12px; } .bb-combat-duel{ font-weight:700; } .bb-combat-x{ color:var(--or-fonce); } .bb-combat-issue{ color:#6b5836; } .bb-combat-voir{ margin-left:auto; color:var(--lien); font-weight:600; white-space:nowrap; } /* Bloc « Raconter ce combat en RP » sur la page de rejouage */ .rej-recit{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px 12px; margin:14px auto; max-width:720px; padding:10px 14px; border:1px dashed var(--or-fonce); border-radius:10px; } .rej-recit-lbl{ font-weight:700; } .rej-recit-code{ color:#6b5836; } .rej-recit-code code{ background:rgba(42,29,14,.08); padding:1px 6px; border-radius:5px; } .msg-contenu details.spoiler summary, .rendu details.spoiler summary{ cursor:pointer; font-weight:700; color:#6a5526; } /* — Mentions cliquables : [[page]], @perso, @dieu:, @ville:, @combat: (couleurs de la palette BBCode) — */ .mention{ text-decoration:none; border-bottom:1px dotted currentColor; padding:0 1px; font-weight:600; } .mention:hover{ border-bottom-style:solid; } .mention-page{ color:#5d4a8a; } .mention-perso{ color:#3f72a8; } .mention-dieu{ color:#bc9e58; } .mention-ville{ color:#2e7d32; } .mention-combat{ color:#9a3b2a; } /* ============================================================ FORUM — parité pixel avec le design handoff (2026-07-06) Classes PAGE-SCOPÉES via .forum-page : ces règles n'affectent QUE les écrans forum enveloppés dans .forum-page (index, liste des sujets, fil). La grande carte parchemin remplace le panneau .parchemin du layout (neutralisé via :has, comme .auth-carte / .hub-page). Les classes existantes (.fo-*, .msg*, .zone-tete…) sont RÉ-ALIGNÉES sous ce scope, sans casser leur logique PHP ni leurs tests. ============================================================ */ .parchemin:has(.forum-page){ background:none; border:0; box-shadow:none; padding:0; } .forum-page{ max-width:1500px; margin:0 auto; background:#f3e6c2; background-image:radial-gradient(rgba(138,109,47,.05) 1px, transparent 1.4px); background-size:8px 8px; border-radius:20px; box-shadow:0 24px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.5); padding:38px 40px 44px; color:#2a1d0e; } .forum-page.drilldown{ padding:30px 34px 34px; box-shadow:0 24px 60px rgba(0,0,0,.5); } @media (prefers-reduced-motion: no-preference){ .forum-page{ animation:monte .55s cubic-bezier(.2,.7,.2,1) both; } } /* — Boutons forum partagés (scopés .forum-page : utilisés uniquement dans les templates forum) — */ .forum-page .fbtn{ display:inline-flex; align-items:center; gap:7px; background:#fbf3dc; color:#5a3d12; font-weight:700; font-size:13px; padding:9px 15px; border-radius:10px; border:1px solid #c9b06a; cursor:pointer; text-decoration:none; font-family:inherit; line-height:1.2; transition:filter .15s ease; } .forum-page .fbtn:hover{ filter:brightness(.98); } .forum-page .fbtn.on{ background:linear-gradient(180deg,#3a2a12,#241809); color:#f0dca0; border-color:#6b4c22; } .forum-page .fbtn.on:hover{ color:#f0dca0; } .forum-page .fbtn.gold{ background:linear-gradient(180deg,#e0bb65,#c9a24a 60%,#a8842f); color:#2a1d0e; border-color:#8a6d2f; box-shadow:0 3px 8px rgba(0,0,0,.22); } /* — HERO (index, 1er niveau) — */ .forum-hero{ text-align:center; margin-bottom:26px; } .forum-hero-pill{ display:inline-block; background:#fff8e6; border:1px solid #c9b06a; color:#6b5124; font-family:var(--serif); font-size:12px; letter-spacing:2px; text-transform:uppercase; padding:5px 15px; border-radius:20px; } .forum-hero-titre{ font-family:var(--serif); font-weight:700; font-size:44px; text-transform:uppercase; letter-spacing:1px; margin:14px 0 0; line-height:1.1; color:#2a1d0e; } .forum-hero-sous{ font-family:var(--serif); font-size:16px; font-style:italic; color:#6b5124; margin:4px auto 0; } .forum-hero-orn{ color:#a8842f; margin-top:14px; letter-spacing:6px; } /* — Barre de recherche (index) — */ .forum-recherche{ display:flex; gap:10px; justify-content:center; align-items:center; margin-bottom:32px; flex-wrap:wrap; } .forum-recherche input[type=text]{ width:440px; max-width:60vw; background:#fbf3dc; border:1px solid #c9b06a; border-radius:10px; padding:11px 15px; color:#2a1d0e; font-size:14px; outline:none; font-family:inherit; } /* — Micro-titre de groupe : rendu par .fo-cat (voir plus bas), pas de classe dédiée. — */ /* — En-tête drill-down (fil d'ariane + titre gauche) — */ .forum-page .fo-fil{ font-size:13px; color:#8a5f18; margin:0 0 12px; } .forum-page .fo-fil a{ color:#8a5f18; font-weight:400; text-decoration:none; } .forum-page .fo-fil a:hover{ text-decoration:underline; } .forum-page .fo-fil .sep{ opacity:1; color:#8a5f18; margin:0 5px; } .forum-page .fo-fil .courant{ color:#6b5124; } /* En drill-down, l'en-tête cérémonieux (.zone-tete, centré/Cinzel) passe à gauche/serif. */ .forum-page .zone-tete{ text-align:left; margin:0; } .forum-page .zone-kicker{ display:inline-block; margin:0 0 8px; background:#fff8e6; border:1px solid #c9b06a; color:#6b5124; font-family:var(--serif); font-weight:400; font-size:12px; letter-spacing:2px; text-transform:uppercase; padding:5px 15px; border-radius:20px; box-shadow:none; } .forum-dd-titre.zone-titre{ font-family:var(--serif); font-weight:400; font-size:32px; line-height:1.1; letter-spacing:0; text-transform:none; text-shadow:none; margin:0; color:#2a1d0e; } .forum-page .sujet-tete .forum-dd-titre.zone-titre{ font-size:30px; } .forum-dd-desc.zone-desc{ font-family:var(--sans, "Segoe UI", system-ui, sans-serif); font-style:normal; font-size:13.5px; color:#6b5124; margin:2px 0 0; max-width:none; } .forum-dd-filet{ height:1px; background:linear-gradient(90deg,#c9b06a,transparent); margin:18px 0 20px; } /* — Ligne d'en-tête « Sujets » + bouton or — */ .forum-page .fo-bloc-titre{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 0 16px; } .forum-page .fo-bloc-titre h2{ font-family:var(--serif); font-weight:400; font-size:19px; color:#3a280f; margin:0; } .forum-page .fo-bloc-titre .sp{ flex:1; } /* ============================================================ FORUM V2 — rangées catégorie (.fo-forum) ré-alignées en cartes .frow ============================================================ */ .forum-page .fo-groupe{ display:flex; flex-direction:column; gap:10px; margin:0 0 32px; border:0; border-radius:0; overflow:visible; box-shadow:none; } .forum-page .fo-cat + .fo-groupe{ border:0; border-radius:0; } /* La bannière sombre .fo-cat devient un micro-titre serif MAJ + filet */ .forum-page .fo-cat{ display:flex; align-items:center; gap:12px; margin:0 0 14px; padding:0; background:none; color:#8a6d2f; border-radius:0; box-shadow:none; } .forum-page .fo-cat::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg,#c9b06a,transparent); } .forum-page .fo-cat .titre{ font-family:var(--serif); font-size:15px; font-weight:400; text-transform:uppercase; letter-spacing:2px; } .forum-page .fo-cat .titre a{ color:#8a6d2f; } .forum-page .fo-cat .titre a:hover{ color:#6b5124; } .forum-page .fo-cat .desc{ font-size:11.5px; letter-spacing:.5px; color:#a8916a; font-style:italic; } .forum-page .fo-forum{ display:grid; grid-template-columns:auto 1fr auto minmax(236px,236px); gap:16px; align-items:center; background:#fbf3dc; border:1px solid #e7d5a6; border-radius:12px; padding:13px 16px; box-shadow:none; } .forum-page .fo-forum:hover{ background:#f7eccf; } .forum-page .fo-ic{ width:44px; height:44px; border-radius:10px; font-size:19px; background:linear-gradient(180deg,#f2e2ac,#dcbf6e); border:1px solid #bc9e58; box-shadow:inset 0 1px 0 rgba(255,255,255,.5); } .forum-page .fo-main .nom{ font-family:var(--serif); font-size:16px; font-weight:700; } .forum-page .fo-main .nom a{ color:#2a1d0e; } .forum-page .fo-main .desc{ font-size:12.5px; color:#7a5f2c; } .forum-page .fo-sous{ gap:7px; margin-top:9px; } .forum-page .fo-sous .lbl{ display:none; } .forum-page .fo-chip{ font-size:11.5px; font-weight:400; background:rgba(42,29,14,.05); border:1px solid #cdb377; color:#6b5124; padding:3px 9px; border-radius:8px; } .forum-page .fo-chip:hover{ background:rgba(138,95,24,.12); color:#5a3d12; } .forum-page .fo-chip .n{ color:#6b5124; font-weight:400; } .forum-page .fo-cpt{ display:flex; gap:18px; align-items:flex-start; } .forum-page .fo-cpt .cnt{ text-align:center; } .forum-page .fo-cpt .n{ font-family:var(--serif); font-size:17px; font-weight:700; color:#2a1d0e; line-height:1.05; } .forum-page .fo-cpt .l{ font-size:10.5px; text-transform:uppercase; letter-spacing:.5px; color:#7a5f2c; } .forum-page .fo-der{ width:236px; background:#f3e6c2; border:1px solid #e0cf9f; border-radius:10px; padding:8px 10px; gap:9px; } .forum-page .fo-der .av{ width:34px; height:34px; border-radius:8px; border:0; } .forum-page .fo-der .titre{ font-size:12.5px; font-weight:700; color:#2a1d0e; } .forum-page .fo-der .meta{ font-size:11px; color:#7a5f2c; } .forum-page .fo-der .meta a{ color:#7a5f2c; font-weight:700; } .forum-page .fo-der.vide{ background:rgba(42,29,14,.04); border:1px dashed #cdb377; color:#a8916a; min-height:50px; } /* ============================================================ FORUM V2 — rangées sujet (.fo-sujet) ré-alignées en cartes .frow ============================================================ */ .forum-page .fo-sujets{ display:flex; flex-direction:column; gap:9px; border:0; border-radius:0; overflow:visible; box-shadow:none; } .forum-page .fo-sujet{ display:grid; grid-template-columns:auto 1fr auto auto minmax(210px,210px); gap:16px; align-items:center; background:#fbf3dc; border:1px solid #e7d5a6; border-radius:12px; padding:12px 16px; } .forum-page .fo-sujet:hover{ background:#f7eccf; } .forum-page .fo-sujet .st{ width:40px; height:40px; border-radius:10px; font-size:17px; flex:none; display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg,#f2e2ac,#dcbf6e); border:1px solid #bc9e58; box-shadow:inset 0 1px 0 rgba(255,255,255,.5); } .forum-page .fo-sujet .titre{ font-family:var(--serif); font-size:15px; font-weight:700; display:flex; align-items:center; gap:9px; } .forum-page .fo-sujet .titre a{ color:#2a1d0e; } .forum-page .fo-sujet .par{ font-size:12px; color:#7a5f2c; } .forum-page .fo-sujet .par a{ color:#2a1d0e; font-weight:700; } .forum-page .fo-rep, .forum-page .fo-vues{ color:#7a5f2c; } .forum-page .fo-rep .n, .forum-page .fo-vues .n{ font-family:var(--serif); font-size:15px; font-weight:700; color:#2a1d0e; } .forum-page .fo-rep .l, .forum-page .fo-vues .l{ font-size:10px; letter-spacing:0; color:#7a5f2c; } .forum-page .fo-sujet .fo-der{ width:210px; } .forum-page .fo-sujet .fo-der .av{ width:32px; height:32px; } /* Badge « épinglé » : pastille 📌 penchée (parité) + secours pour les autres badges */ .forum-page .fo-badge.epingle{ background:none; color:#a8842f; font-size:12px; padding:0; border-radius:0; transform:rotate(20deg); display:inline-block; } /* Le libellé « épinglé » reste dans l'arbre a11y (lecteurs d'écran) mais masqué visuellement. */ .forum-page .fo-badge.epingle .lbl-txt{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; } .forum-page .zone-pied a, .forum-page .fo-retour{ display:inline-flex; align-items:center; gap:7px; background:#fbf3dc; color:#5a3d12; font-weight:700; font-size:13px; padding:9px 15px; border-radius:10px; border:1px solid #c9b06a; text-decoration:none; } .forum-page .zone-pied{ margin-top:20px; } /* ============================================================ FORUM V2 — barre d'actions du fil (.sujet-barre → boutons .fbtn) ============================================================ */ .forum-page .sujet-barre{ display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:9px; margin:18px 0; } .forum-page .sujet-votes{ border:0; background:none; box-shadow:none; border-radius:0; } .forum-page .sujet-votes .sv-n{ display:inline-flex; align-items:center; gap:7px; background:#fbf3dc; color:#5a3d12; font-family:var(--serif); font-weight:700; font-size:13px; padding:9px 15px; border-radius:10px; border:1px solid #c9b06a; } .forum-page .sujet-votes .sv-n b{ font-size:13px; } .forum-page .sujet-votes .sv-cta{ display:inline-flex; align-items:center; gap:7px; background:#fbf3dc; color:#5a3d12; font-family:inherit; font-weight:700; font-size:13px; padding:9px 15px; border-radius:10px; border:1px solid #c9b06a; border-left:1px solid #c9b06a; letter-spacing:0; } .forum-page .sujet-act{ display:inline-flex; align-items:center; gap:7px; background:#fbf3dc; color:#5a3d12; font-family:inherit; font-weight:700; font-size:13px; padding:9px 15px; border-radius:10px; border:1px solid #c9b06a; } .forum-page .sujet-act:hover{ background:#fbf3dc; filter:brightness(.98); transform:none; box-shadow:none; } .forum-page .sujet-act.on{ background:linear-gradient(180deg,#3a2a12,#241809); color:#f0dca0; border-color:#6b4c22; box-shadow:none; } .forum-page .sujet-act.on:hover{ filter:brightness(1.02); transform:none; box-shadow:none; } .forum-page .sujet-deplacer summary.sujet-act{ list-style:none; } .forum-page .sujet-deplacer summary::-webkit-details-marker{ display:none; } .forum-page .sondage-ajout{ flex:1; text-align:right; margin:0; } .forum-page .sondage-ajout .sujet-act{ margin-left:auto; } /* Le filet ornemental d'origine n'a plus lieu d'être dans la maquette drill-down */ .forum-page .sujet-filet{ display:none; } /* ============================================================ FORUM V2 — post (.msg) : sidebar 210 + avatar 156, corps clair ============================================================ */ .forum-page .msg{ display:flex; grid-template-columns:none; background:#fbf3dc; border:1px solid #e7d5a6; border-radius:14px; overflow:hidden; margin:0 0 14px; box-shadow:none; } .forum-page .msg-auteur{ width:210px; flex:none; background:#f3e6c2; border-right:1px solid #e0cf9f; border-bottom:0; padding:18px 16px; text-align:center; } .forum-page .msg-ava{ width:156px; height:156px; margin:0 auto; border-radius:18px; font-size:64px; background:radial-gradient(circle at 35% 30%,#4a6a4a,#141e14); } .forum-page .msg-ava.cadre-r1,.forum-page .msg-ava.cadre-r2,.forum-page .msg-ava.cadre-r3, .forum-page .msg-ava.cadre-r4,.forum-page .msg-ava.cadre-r5,.forum-page .msg-ava.cadre-r6, .forum-page .msg-ava.cadre-r7,.forum-page .msg-ava.cadre-r8,.forum-page .msg-ava.cadre-r9{ border:2px solid #bc9e58; } .forum-page .msg-nom{ font-family:var(--serif); font-size:16px; font-weight:700; margin-top:10px; color:#2a1d0e; } .forum-page .msg-rc{ font-size:11px; color:#7a5f2c; margin-top:0; } .forum-page .msg-role{ display:inline-block; margin-top:7px; font-size:10px; font-weight:700; letter-spacing:.5px; color:#f6e3d8; padding:2px 9px; border-radius:6px; text-transform:uppercase; } .forum-page .msg-role.admin{ background:#7a281c; } .forum-page .msg-role.mj{ background:#3f5a7a; } .forum-page .msg-tier{ font-size:11px; color:#a8842f; margin-top:8px; } .forum-page .msg-cnt{ font-size:11px; color:#7a5f2c; margin-top:2px; } .forum-page .msg-cnt a{ color:#8a5f18; } .forum-page .msg-ami{ margin-top:0; } .forum-page .msg-ami .msg-act{ margin-top:10px; width:100%; justify-content:center; font-size:12px; padding:7px; display:inline-flex; align-items:center; gap:7px; background:#fbf3dc; color:#5a3d12; font-weight:700; border-radius:10px; border:1px solid #c9b06a; } .forum-page .msg-corps{ flex:1; padding:16px 18px; min-width:0; } .forum-page .msg-tete{ display:flex; justify-content:flex-end; align-items:center; gap:8px; border-bottom:0; padding-bottom:0; margin-bottom:12px; font-size:11px; color:#7a5f2c; } .forum-page .msg-tete .hrp{ font-size:10px; font-weight:700; background:rgba(42,29,14,.1); border:1px solid #b89a5a; color:#6b5124; padding:2px 7px; border-radius:5px; } .forum-page .msg-modifie{ font-size:11px; color:#a8916a; font-style:italic; margin-right:0; } .forum-page .msg-contenu{ font-size:14px; line-height:1.6; color:#2a1d0e; } /* Pied du post : Signaler + réactions + Supprimer, filet pointillé clair. align-items:flex-start ⇒ quand le
« Signaler » s'ouvre (summary + formulaire empilés), il grandit vers le BAS sans recentrer verticalement les réactions/actions, qui restent sur la ligne du résumé. */ .forum-page .msg-pied{ display:flex; align-items:flex-start; gap:10px; margin-top:16px; padding-top:12px; border-top:1px dashed #d8c393; } .forum-page .msg-signaler{ margin:0; } .forum-page .msg-signaler > summary{ font-size:12px; color:#a2321f; } .forum-page .msg-signaler[open] > summary{ color:#a2321f; } /* Le champ « motif » ne doit pas déborder du flex gap:10px en mobile (min-width global = 220px). */ .forum-page .msg-signaler input[name="motif"]{ min-width:0; } .forum-page .msg-pied .reactions{ margin:0 0 0 auto; } .forum-page .msg-pied .reactions .reac{ font-size:11px; background:#f3e6c2; border:1px solid #e0cf9f; border-radius:14px; padding:3px 8px; } .forum-page .msg-actions{ margin:0; padding:0; border-top:0; } .forum-page .msg-actions .msg-act{ display:inline-flex; align-items:center; gap:7px; background:#fbf3dc; color:#5a3d12; font-weight:700; font-size:12px; padding:6px 12px; border-radius:10px; border:1px solid #c9b06a; } .forum-page .msg-actions .msg-act.danger{ color:#5a3d12; border-color:#c9b06a; } /* — Bloc « Répondre » — */ .forum-page .fo-repondre{ margin-top:18px; background:#fbf3dc; border:1px solid #e7d5a6; border-radius:14px; padding:16px; } .forum-page .fo-repondre-titre{ font-family:var(--serif); font-size:15px; font-weight:700; margin-bottom:10px; } .forum-page .fo-repondre textarea{ width:100%; background:#fffbef; border:1px solid #d8c393; border-radius:10px; min-height:80px; padding:12px; color:#2a1d0e; font-size:13px; font-family:inherit; } .forum-page .fo-repondre-actions{ display:flex; justify-content:flex-end; align-items:center; gap:10px; margin-top:12px; } @media(max-width:900px){ .forum-page{ padding:26px 20px 30px; } .forum-page.drilldown{ padding:24px 18px 26px; } .forum-page .fo-forum{ grid-template-columns:auto 1fr; } .forum-page .fo-forum .fo-cpt{ grid-column:2; justify-self:start; } .forum-page .fo-forum .fo-der{ grid-column:1 / -1; width:auto; } .forum-page .fo-sujet{ grid-template-columns:auto 1fr; } .forum-page .fo-sujet .fo-rep, .forum-page .fo-sujet .fo-vues{ grid-column:2; justify-self:start; display:inline-block; margin-right:14px; } .forum-page .fo-sujet .fo-der{ grid-column:1 / -1; width:auto; } } @media(max-width:640px){ .forum-hero-titre{ font-size:34px; } .forum-dd-titre, .forum-page .sujet-tete .forum-dd-titre{ font-size:24px; } .forum-page .msg{ flex-direction:column; } .forum-page .msg-auteur{ width:auto; border-right:0; border-bottom:1px solid #e0cf9f; display:flex; gap:12px; align-items:center; text-align:left; flex-wrap:wrap; } .forum-page .msg-ava{ width:84px; height:84px; margin:0; font-size:34px; } .forum-page .msg-ami{ width:100%; } } /* — Prologue : texte d'introduction du monde, en tête de l'accueil (éditable par les admins) — */ .accueil .intro-lore{ position:relative; background:linear-gradient(180deg,#fbf3da,#f1e4c0); border:1px solid var(--or-fonce); border-left:4px solid var(--or); border-radius:14px; padding:22px 28px; margin:26px 0 8px; box-shadow:inset 0 1px 0 rgba(255,255,255,.55); } .accueil .intro-rendu{ color:#4f3a18; font-size:15.5px; line-height:1.72; max-width:760px; } .accueil .intro-rendu strong{ color:var(--encre); } .accueil .intro-rendu ul{ margin:12px 0; padding-left:20px; list-style:none; } .accueil .intro-rendu li{ margin:7px 0; padding-left:4px; } .accueil .intro-edit{ margin-top:16px; } .accueil .intro-edit > summary{ display:inline-flex; align-items:center; gap:6px; cursor:pointer; list-style:none; font-size:13px; font-weight:700; color:#5a431f; background:rgba(255,255,255,.45); border:1px solid var(--or-fonce); border-radius:8px; padding:6px 12px; } .accueil .intro-edit > summary::-webkit-details-marker{ display:none; } .accueil .intro-edit > summary:hover{ background:rgba(255,255,255,.72); } .accueil .intro-edit[open] > summary{ margin-bottom:12px; } .accueil .intro-edit textarea{ width:100%; } /* ============================================================ FICHE MONSTRE/BOSS — onglets + capacités + pattern (admin) ============================================================ */ .creature-form .onglets{ display:flex; gap:4px; flex-wrap:wrap; border-bottom:2px solid var(--or-fonce); margin:0 0 16px; } .creature-form .onglet{ font-family:inherit; font-weight:700; font-size:14px; cursor:pointer; border:1px solid var(--or-fonce); border-bottom:0; border-radius:9px 9px 0 0; padding:9px 18px; background:rgba(255,255,255,.30); color:#6a5526; position:relative; top:2px; } .creature-form .onglet.on{ background:linear-gradient(var(--or-clair), var(--or)); color:var(--encre); top:0; padding-bottom:11px; } .creature-form .ed-carte{ background:rgba(255,255,255,.30); border:1px solid var(--bord); border-radius:12px; padding:14px 16px; margin:0 0 14px; } .creature-form .ed-titre{ font-family:var(--serif); font-size:16px; margin:0 0 10px; display:flex; align-items:center; gap:8px; } .creature-form .ed-etiquette{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:#fff; background:var(--or-fonce); border-radius:20px; padding:2px 10px; } .creature-form .aide-effet{ display:block; font-size:12.5px; color:#6a5526; margin:0 0 10px; } .creature-form .champs-grille{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; } .creature-form .champ{ display:flex; flex-direction:column; gap:3px; font-size:13px; font-weight:600; color:#5a431f; } .creature-form .champ-large{ grid-column:1 / -1; } .creature-form .champ input, .creature-form .champ select{ width:100%; } @media(max-width:760px){ .creature-form .champs-grille{ grid-template-columns:1fr 1fr; } } #cap-filtre{ width:100%; max-width:320px; } .cap-pastilles{ display:flex; flex-wrap:wrap; gap:7px; align-items:center; margin:12px 0; min-height:24px; } .cap-pastille{ font-family:inherit; font-size:13px; cursor:pointer; background:linear-gradient(var(--or-clair),var(--or)); border:1px solid var(--or-fonce); border-radius:20px; padding:3px 11px; color:var(--encre); } .cap-pastille:hover{ filter:brightness(1.05); } .cap-compte{ font-size:12px; color:#6a5526; } .cap-liste{ display:grid; grid-template-columns:1fr 1fr; gap:2px 22px; } .cap-groupe{ grid-column:1 / -1; font-family:var(--serif); font-size:14px; font-weight:700; color:#5a431f; margin:10px 0 2px; border-bottom:1px dashed var(--bord); padding-bottom:3px; } .cap-item{ display:flex; align-items:center; gap:8px; padding:5px 4px; font-size:14px; border-radius:7px; } .cap-item:hover{ background:rgba(255,255,255,.35); } .cap-nom{ flex:1; } .cap-classe{ font-size:11px; color:#6a5526; border:1px solid var(--bord); border-radius:10px; padding:1px 7px; } @media(max-width:680px){ .cap-liste{ grid-template-columns:1fr; } } .pat-etape{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; background:rgba(255,255,255,.30); border:1px solid var(--bord); border-radius:10px; padding:8px 10px; margin:0 0 8px; } .pat-etape.pat-invalide{ border-color:#c0392b; background:rgba(192,57,43,.08); } .pat-num{ width:24px; height:24px; flex:none; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.5); border:1px solid var(--or-fonce); border-radius:50%; font-size:12px; font-weight:700; color:#5a431f; } .pat-lancer{ display:inline-flex; gap:8px; flex-wrap:wrap; } .pat-suite{ font-size:13px; color:#6a5526; } .pat-btns{ margin-left:auto; display:flex; gap:4px; } .pat-btns button{ font-family:inherit; font-weight:700; cursor:pointer; background:#e9cf90; border:1px solid var(--or-fonce); border-radius:7px; padding:3px 9px; color:#5a431f; } .pat-btns button:hover:not(:disabled){ background:#f0e3b8; } .pat-btns button:disabled{ opacity:.4; cursor:not-allowed; } .pat-apercu{ font-size:13.5px; line-height:1.7; margin:0; color:#4a3a1a; } .creature-form .ed-apercu{ background:rgba(42,29,14,.06); } .creature-form .ed-bandeau{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:#5a431f; margin-bottom:8px; } .creature-form .ed-aide{ font-size:12px; color:#6a5526; } /* Passifs : race-editeur.js réutilisé — re-scope des styles d'éditeur dans la fiche */ .creature-form .ed-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; } .creature-form .ed-c{ display:flex; flex-direction:column; gap:3px; font-size:13px; font-weight:600; } .creature-form .ed-c input, .creature-form .ed-c select{ min-width:0; width:100%; } .creature-form .ed-l{ list-style:none; margin:0; padding:0; } .creature-form .ed-l li{ display:flex; gap:8px; padding:5px 0; font-size:14px; border-bottom:1px dashed rgba(138,109,47,.35); } .creature-form .ed-err{ color:#7a2e1a; font-weight:600; margin:8px 0 0; } @media(max-width:760px){ .creature-form .ed-row{ grid-template-columns:1fr 1fr; } } /* ============================================================ ÉDITEUR DE SIGNATURE & PASSIFS (passif-form.js → îlot catalogue-de-briques) Monté dans race-atelier / classe-atelier / creature-form. Doit suivre les règles .creature-form ci-dessus pour gagner en ordre de source. ============================================================ */ .pf-toggle{ display:inline-flex; align-items:center; gap:9px; font-size:13px; font-weight:600; color:var(--encre); margin:0 0 10px; cursor:pointer; } .pf-toggle input{ width:auto; } .pf-card{ border:1px solid var(--bord); border-radius:12px; background:rgba(255,255,255,.16); padding:12px 14px; margin:0 0 12px; } .pf-card .pf-del{ margin-top:8px; } .pf-add{ margin-top:2px; } .pf-editeur .ed-carte{ background:rgba(255,255,255,.30); border:1px solid var(--bord); border-radius:12px; padding:12px 14px; margin:0 0 12px; } .pf-editeur .ed-titre{ font-family:var(--serif); font-weight:700; font-size:15px; margin:0 0 10px; color:var(--encre); } .pf-editeur .ed-row{ display:flex; flex-wrap:wrap; gap:12px; } .pf-editeur .st-body, .pf-editeur .fc-statut{ display:contents; } .pf-editeur .ed-c{ display:flex; flex-direction:column; gap:3px; font-size:12.5px; font-weight:600; color:var(--encre); flex:1 1 160px; min-width:0; } .pf-editeur .ed-c input, .pf-editeur .ed-c select{ width:100%; min-width:0; box-sizing:border-box; } .pf-editeur .ed-c input[type=checkbox]{ width:auto; align-self:flex-start; } .pf-editeur .ed-apercu{ background:rgba(42,29,14,.06); } .pf-editeur .ed-apercu ul{ list-style:none; margin:6px 0 0; padding:0; } .pf-editeur .ed-apercu li{ display:flex; gap:8px; padding:4px 0; font-size:13.5px; border-bottom:1px dashed rgba(138,109,47,.35); } .pf-editeur .ed-apercu li:last-child{ border-bottom:0; } .pf-editeur .ed-apercu li .p{ width:20px; text-align:center; } .pf-editeur .ed-bandeau{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:#5a431f; margin-bottom:6px; } .pf-editeur .ed-err{ color:#7a2e1a; font-weight:600; margin:8px 0 0; } .pf-editeur .ed-aide{ font-size:12px; color:#6a5526; } /* ============================================================ FORUM — EN-TÊTE DE LIEU (zone RP : présence, chronique, gardien) Refonte « faste raffiné + gardien cinématique ». ============================================================ */ /* — En-tête cérémonieux du lieu (titre + ornement) — */ .zone-tete{ text-align:center; margin:2px 0 24px; } .zone-kicker{ display:inline-block; font-family:var(--titre); font-weight:600; font-size:11px; letter-spacing:2.5px; text-transform:uppercase; color:#8a6a28; background:rgba(255,255,255,.42); border:1px solid var(--bord); border-radius:20px; padding:4px 15px; margin:0 0 12px; box-shadow:inset 0 1px 0 rgba(255,255,255,.6); } .zone-titre{ font-family:var(--titre); font-weight:700; letter-spacing:.5px; font-size:clamp(27px,3.6vw,42px); line-height:1.08; margin:0; color:var(--encre); text-shadow:0 1px 0 rgba(255,255,255,.4); } .zone-desc{ font-family:var(--plume); font-style:italic; font-size:18.5px; color:#5a431f; margin:9px auto 0; max-width:680px; } .zone-orne{ display:flex; align-items:center; justify-content:center; gap:14px; max-width:320px; margin:17px auto 0; color:var(--or-fonce); } .zone-orne::before, .zone-orne::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg, transparent, var(--or-fonce), transparent); } .zone-orne span{ font-size:15px; opacity:.85; } /* — Corps de zone : forums à gauche, flanc (Présents + Chronique) à droite — */ .zone-corps{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:22px; align-items:start; margin:0 0 18px; } .zone-corps.sans-flanc{ grid-template-columns:1fr; } .zone-principal{ min-width:0; } .zone-principal .fo-bloc-titre:first-child{ margin-top:0; } /* le flanc : un seul grand rectangle regroupant les deux blocs */ .zone-flanc{ background:linear-gradient(180deg,#f7ecd2,#efe1bd); border:1px solid var(--bord); border-radius:14px; padding:16px 18px; box-shadow:0 10px 24px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.55); } .zf-bloc + .zf-bloc{ margin-top:16px; padding-top:16px; border-top:1px solid rgba(138,109,47,.28); } /* — Cartes d'info (Présents / Chronique) côte à côte — (vue catégorie) */ .zone-infos{ display:grid; grid-template-columns:repeat(auto-fit, minmax(290px,1fr)); gap:16px; margin:0 0 18px; } .zone-carte{ background:linear-gradient(180deg,#f7ecd2,#efe1bd); border:1px solid var(--bord); border-radius:14px; padding:15px 18px 16px; box-shadow:0 10px 24px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.55); } .zc-tete{ display:flex; align-items:center; gap:11px; margin:0 0 12px; } .zc-medaillon{ width:40px; height:40px; flex:none; display:flex; align-items:center; justify-content:center; font-size:20px; border-radius:12px; background:radial-gradient(circle at 30% 25%, #fff3cf, #d8b25e); border:1px solid var(--or-fonce); box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 3px 8px rgba(0,0,0,.22); } .zc-titre{ font-family:var(--serif); font-size:18px; font-weight:700; margin:0; flex:1; } .zc-lien{ font-size:12.5px; font-weight:700; text-decoration:none; color:#5a431f; white-space:nowrap; background:rgba(255,255,255,.6); border:1px solid var(--bord); border-radius:20px; padding:4px 12px; transition:background .15s, transform .12s; } .zc-lien:hover{ background:#fff6df; transform:translateY(-1px); } /* présence : pastilles de personnages */ .zone-persos{ display:flex; flex-wrap:wrap; gap:8px; } .zone-perso{ display:inline-flex; align-items:center; gap:8px; text-decoration:none; font-size:13.5px; font-weight:600; color:var(--encre); background:rgba(255,255,255,.62); border:1px solid var(--bord); border-radius:22px; padding:3px 13px 3px 4px; transition:background .15s, transform .12s, box-shadow .12s; } .zone-perso:hover{ background:#fff6df; transform:translateY(-1px); box-shadow:0 3px 9px rgba(0,0,0,.14); } .zone-perso .pt{ width:24px; height:24px; flex:none; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:12.5px; font-weight:700; color:#e8d29a; background:linear-gradient(160deg,#3a2a12,#1c1305); box-shadow:inset 0 1px 0 rgba(255,255,255,.12); } .zone-souszones{ margin:12px 0 0; padding-top:11px; border-top:1px dashed rgba(138,109,47,.3); display:flex; flex-wrap:wrap; gap:7px; align-items:center; } .zone-souszones .lbl{ font-size:10.5px; text-transform:uppercase; letter-spacing:.5px; color:#8a6a28; } /* état vide doux */ .zone-vide{ color:#8a7a52; font-style:italic; font-size:13.5px; margin:2px 0 0; } /* chronique : mini timeline */ .zone-chron{ list-style:none; margin:0; padding:0; } .zone-chron li{ display:flex; align-items:flex-start; gap:10px; padding:8px 0; border-top:1px solid rgba(138,109,47,.18); } .zone-chron li:first-child{ border-top:0; padding-top:1px; } .zone-chron .ic{ width:27px; height:27px; flex:none; display:flex; align-items:center; justify-content:center; font-size:14px; border-radius:9px; background:rgba(255,255,255,.5); border:1px solid var(--bord); } .zone-chron .txt{ flex:1; font-size:13.5px; line-height:1.45; color:#3f2f14; } .zone-chron .txt a{ font-weight:700; } .zone-chron time{ font-size:11.5px; color:#8a6a28; white-space:nowrap; padding-top:3px; } .zone-chron-plus{ display:inline-block; margin-top:12px; font-size:12.5px; font-weight:700; color:#5a431f; text-decoration:none; background:rgba(255,255,255,.55); border:1px solid var(--bord); border-radius:20px; padding:6px 14px; transition:background .15s, transform .12s; } .zone-chron-plus:hover{ background:#fff6df; transform:translateY(-1px); } /* — GARDIEN DU LIEU : scène d'arène cinématique — */ .zone-gardien{ position:relative; overflow:hidden; margin:0 0 22px; border-radius:16px; padding:20px 24px 22px; background: radial-gradient(120% 90% at 50% -10%, rgba(216,120,40,.20), transparent 60%), linear-gradient(180deg,#2c1d0c,#160f06); border:1px solid #5e4220; color:#f1dda3; box-shadow:0 20px 46px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,210,120,.12), inset 0 1px 0 rgba(255,210,120,.18); } .zone-gardien::before{ /* braise/halo respirant */ content:""; position:absolute; left:50%; top:-45%; width:75%; height:130%; transform:translateX(-50%); background:radial-gradient(closest-side, rgba(224,86,31,.26), transparent 70%); pointer-events:none; opacity:.85; } .zg-tete{ position:relative; display:flex; align-items:center; gap:14px; margin:0 0 15px; } .zg-blason{ width:52px; height:52px; flex:none; display:flex; align-items:center; justify-content:center; font-size:25px; border-radius:14px; background:radial-gradient(circle at 30% 25%, #5a3a18, #221507); border:1px solid #7a5320; box-shadow:inset 0 1px 0 rgba(255,210,120,.28), 0 5px 12px rgba(0,0,0,.45); } .zg-id{ flex:1; min-width:0; } .zg-kicker{ display:block; font-family:var(--titre); font-weight:600; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:#e0b463; } .zg-nom{ font-family:var(--titre); font-weight:700; font-size:23px; line-height:1.1; margin:2px 0 0; color:#fff4d8; text-shadow:0 2px 12px rgba(0,0,0,.6); } .zg-niv{ flex:none; font-family:var(--titre); font-weight:600; font-size:12px; letter-spacing:.5px; color:#3a2208; background:linear-gradient(180deg,#f2d484,var(--or)); border:1px solid #7a5e22; border-radius:20px; padding:4px 13px; box-shadow:0 2px 6px rgba(0,0,0,.3); } .zg-jauge-wrap{ position:relative; } .zg-barre{ position:relative; height:24px; border-radius:13px; overflow:hidden; background:linear-gradient(180deg,#0d0905,#1a120a); border:1px solid #4a3318; box-shadow:inset 0 2px 7px rgba(0,0,0,.75); } .zg-jauge{ position:relative; height:100%; min-width:14px; border-radius:12px; overflow:hidden; background:linear-gradient(180deg,#e86a2a,#a8231a 58%,#7a1710); box-shadow:0 0 16px rgba(224,86,31,.6), inset 0 1px 0 rgba(255,225,160,.5); transition:width .4s ease; } .zg-jauge::after{ /* crans de la jauge */ content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg, rgba(0,0,0,.16) 0 1px, transparent 1px 28px); pointer-events:none; } .zg-sheen{ position:absolute; top:0; left:-45%; width:38%; height:100%; transform:skewX(-20deg); background:linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent); } .zg-pv{ position:relative; margin:10px 0 15px; font-size:13.5px; color:#e7d2a0; } .zg-pv b{ font-family:var(--titre); font-weight:600; font-size:15.5px; color:#fff4d8; } .zg-pv .hint{ color:#c79a5a; font-style:italic; } .zg-cta{ position:relative; overflow:hidden; font-family:var(--titre); font-weight:600; letter-spacing:.4px; background:linear-gradient(180deg,#f2d484,var(--or)); border-color:#7a5e22; } .zg-cta::after{ content:""; position:absolute; top:0; left:-130%; width:60%; height:100%; transform:skewX(-18deg); background:linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); } .zg-cta:hover::after{ animation:reflet .8s ease; } .zg-note{ position:relative; color:#c79a5a; font-size:13px; margin:0; } @media (prefers-reduced-motion: no-preference){ .zone-tete, .zone-infos, .zone-flanc, .zone-gardien{ animation:monte .6s cubic-bezier(.2,.7,.2,1) both; } .zone-infos, .zone-flanc{ animation-delay:.08s; } .zone-gardien{ animation-delay:.16s; } .zg-sheen{ animation:zg-sheen 3s ease-in-out infinite; } .zone-gardien::before{ animation:zg-braise 4.5s ease-in-out infinite; } } @keyframes zg-sheen{ 0%{ left:-45%; } 55%,100%{ left:135%; } } @keyframes zg-braise{ 0%,100%{ opacity:.7; } 50%{ opacity:1; } } /* — Bloc « Sujets » : état vide soigné + bas de page — */ .zone-sujets-vide{ text-align:center; padding:32px 18px; border:1px dashed var(--bord); border-radius:14px; background:rgba(255,255,255,.28); color:#6b5526; } .zone-sujets-vide .ic{ font-size:32px; display:block; margin:0 0 8px; opacity:.8; } .zone-sujets-vide p{ margin:0; font-size:15px; } .zone-sujets-vide .sous{ font-size:13px; color:#8a7a52; margin:5px 0 16px; } .zone-pied{ display:flex; margin-top:18px; } .zone-pied a{ font-size:13px; font-weight:600; color:#5a431f; text-decoration:none; background:rgba(255,255,255,.4); border:1px solid var(--bord); border-radius:20px; padding:7px 15px; transition:background .15s; } .zone-pied a:hover{ background:#fff6df; } @media(max-width:900px){ .zone-corps{ grid-template-columns:1fr; } } @media(max-width:680px){ .zone-infos{ grid-template-columns:1fr; } .zg-tete{ flex-wrap:wrap; } } /* ============================================================ ACCUEIL — refonte audacieuse « le seuil du royaume » (héraut lisible sur fond sombre + piliers en mosaïque + braises) ============================================================ */ /* — Hero : braises ambiantes qui montent autour de la bannière — */ .accueil .hero-embers{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; } .accueil .hero-embers span{ position:absolute; bottom:6%; width:7px; height:7px; border-radius:50%; opacity:0; background:radial-gradient(circle, #ffd98a 0%, rgba(224,138,46,.5) 45%, rgba(224,138,46,0) 72%); } .accueil .hero-embers span:nth-child(1){ left:12%; } .accueil .hero-embers span:nth-child(2){ left:28%; width:5px; height:5px; } .accueil .hero-embers span:nth-child(3){ left:70%; } .accueil .hero-embers span:nth-child(4){ left:86%; width:5px; height:5px; } .accueil .hero-embers span:nth-child(5){ left:50%; width:4px; height:4px; } @keyframes ember{ 0%{ transform:translateY(0) scale(.7); opacity:0; } 12%{ opacity:.85; } 80%{ opacity:.45; } 100%{ transform:translateY(-300px) scale(1.15); opacity:0; } } /* — Le Héraut du Royaume : chiffres vivants + manchettes (cartes sombres lisibles) — */ .accueil .heraut{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:16px; margin:8px auto 2px; text-align:left; } .accueil .royaume, .accueil .manchettes-cadre.parchemin{ background:linear-gradient(180deg, rgba(44,30,13,.92), rgba(20,14,7,.95)); border:1px solid #5e4220; border-radius:16px; box-shadow:0 16px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,210,120,.15); } .accueil .royaume{ padding:16px 18px; } .accueil .royaume-lbl{ display:block; font-family:var(--titre); font-weight:600; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:#e0b463; margin:0 0 13px; } .accueil .royaume-pouls{ display:grid; grid-template-columns:repeat(auto-fit, minmax(108px,1fr)); gap:12px; } .accueil .rp-tuile{ text-align:center; padding:13px 8px; border-radius:12px; background:rgba(255,225,150,.05); border:1px solid rgba(216,178,94,.22); } .accueil .rp-tuile .n{ display:block; font-family:var(--titre); font-weight:700; font-size:30px; line-height:1; color:#fff4d8; text-shadow:0 2px 10px rgba(0,0,0,.55); } .accueil .rp-tuile .l{ display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.6px; color:#c79a5a; margin-top:7px; } /* manchettes : on bat « body.accueil-page .parchemin » (spécificité (0,3,0) > (0,2,1)) ; marge/padding inline → !important */ .accueil .manchettes-cadre.parchemin{ margin:0 !important; padding:16px 18px !important; color:#ecd9a8; } .accueil .manchettes-cadre strong{ color:#fff4d8; font-family:var(--titre); font-weight:600; letter-spacing:.5px; } .accueil .manchettes-cadre a{ color:#e0b463; text-decoration:none; } .accueil .manchettes-cadre a:hover{ color:#fff4d8; text-decoration:underline; } .accueil .manchettes-cadre ul li{ border-top:1px solid rgba(216,178,94,.18) !important; } .accueil .manchettes-cadre ul li:first-child{ border-top:0 !important; } .accueil .manchettes-cadre .meta{ color:#bd924f !important; } .accueil .manchettes-cadre .meta em{ color:#d8b25e; font-style:italic; } /* — Piliers en mosaïque asymétrique (un pilier vedette) — */ .accueil .piliers{ grid-template-columns:repeat(6,1fr); grid-template-areas: "forge forge forge arene arene arene" "forge forge forge saga saga saga" "lore lore lore lore lore lore"; } .accueil .piliers .pilier:nth-child(1){ grid-area:forge; } .accueil .piliers .pilier:nth-child(2){ grid-area:arene; } .accueil .piliers .pilier:nth-child(3){ grid-area:saga; } .accueil .piliers .pilier:nth-child(4){ grid-area:lore; } .accueil .pilier{ position:relative; overflow:hidden; } .accueil .pilier::before{ content:""; position:absolute; top:0; left:14%; right:14%; height:3px; border-radius:0 0 3px 3px; background:linear-gradient(90deg, transparent, var(--or), transparent); opacity:.5; transition:opacity .2s; } .accueil .pilier:hover::before{ opacity:1; } .accueil .pilier.featured{ display:flex; flex-direction:column; justify-content:center; padding:26px 28px; background:linear-gradient(180deg,#f4e3ac,#e7cd84); border-color:var(--or); box-shadow:0 16px 34px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,240,200,.4); } .accueil .pilier.featured::after{ content:""; position:absolute; top:-30%; right:-18%; width:62%; height:160%; background:radial-gradient(closest-side, rgba(255,220,130,.4), transparent 70%); pointer-events:none; } .accueil .pilier.featured .pilier-crete{ width:64px; height:64px; font-size:31px; margin-bottom:16px; } .accueil .pilier.featured h3{ font-size:21px; } .accueil .pilier.featured p{ font-size:14.5px; max-width:40ch; } .accueil .pilier-appel{ position:relative; margin-top:15px; font-family:var(--titre); font-weight:600; font-size:13px; letter-spacing:.5px; color:var(--or-fonce); } .accueil .pilier.featured:hover .pilier-appel{ color:#7a5320; } @media (prefers-reduced-motion: no-preference){ .accueil .hero-embers span{ animation:ember 8s linear infinite; } .accueil .hero-embers span:nth-child(2){ animation-delay:2.5s; animation-duration:9s; } .accueil .hero-embers span:nth-child(3){ animation-delay:1.2s; animation-duration:7.5s; } .accueil .hero-embers span:nth-child(4){ animation-delay:3.4s; } .accueil .hero-embers span:nth-child(5){ animation-delay:4.6s; animation-duration:10s; } .accueil .heraut{ animation:monte .7s cubic-bezier(.2,.7,.2,1) both; animation-delay:.16s; } } @media(max-width:900px){ .accueil .piliers{ grid-template-columns:1fr 1fr; grid-template-areas:"forge forge" "arene saga" "lore lore"; } } @media(max-width:560px){ .accueil .piliers{ grid-template-columns:1fr; grid-template-areas:"forge" "arene" "saga" "lore"; } } /* ============================================================ HEADER — bouton profil (menu déroulant avatar) + barre raffinée ============================================================ */ .bandeau{ gap:8px; } .bandeau-actions .bouton{ padding:8px 16px; } .nav-profil{ position:relative; } .nav-profil > summary{ list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:9px; user-select:none; padding:4px 12px 4px 5px; border-radius:24px; border:1px solid var(--or-fonce); background:linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,.12)); box-shadow:inset 0 1px 0 rgba(255,255,255,.45); transition:background .15s, box-shadow .15s; } .nav-profil > summary::-webkit-details-marker{ display:none; } .nav-profil > summary::marker{ content:""; } .nav-profil > summary:hover{ background:rgba(255,255,255,.58); box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 2px 8px rgba(0,0,0,.16); } .np-ava{ width:34px; height:34px; flex:none; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-weight:700; font-size:15px; color:#e8d29a; background:linear-gradient(160deg,#3a2a12,#1c1305); border:2px solid var(--or-fonce); box-shadow:inset 0 1px 0 rgba(255,255,255,.15); } .np-ava img{ width:100%; height:100%; object-fit:cover; } .np-id{ display:flex; flex-direction:column; line-height:1.12; min-width:0; } .np-nom{ font-family:var(--serif); font-weight:700; font-size:14.5px; color:var(--encre); max-width:170px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .np-id small{ font-size:11px; color:#6a5526; font-weight:600; max-width:170px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .np-caret{ font-size:11px; color:#5a431f; transition:transform .2s; margin-left:2px; } .nav-profil[open] > summary .np-caret{ transform:rotate(180deg); } .np-menu{ position:absolute; right:0; top:calc(100% + 9px); min-width:220px; z-index:200; background:linear-gradient(180deg,#f3e7c6,#ecdcae); border:1px solid var(--or-fonce); border-radius:13px; box-shadow:0 18px 40px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.5); padding:7px; display:flex; flex-direction:column; gap:2px; } .np-menu::before{ content:""; position:absolute; right:22px; top:-7px; width:13px; height:13px; transform:rotate(45deg); background:#f3e7c6; border-left:1px solid var(--or-fonce); border-top:1px solid var(--or-fonce); } .np-menu a, .np-menu button{ position:relative; z-index:1; display:flex; align-items:center; gap:10px; width:100%; text-align:left; font-family:inherit; font-size:14px; font-weight:600; color:var(--encre); text-decoration:none; cursor:pointer; background:transparent; border:0; border-radius:8px; padding:9px 12px; } .np-menu a:hover, .np-menu button:hover{ background:rgba(42,29,14,.10); } .np-menu form{ margin:2px 0 0; padding-top:5px; border-top:1px solid rgba(138,109,47,.3); } .np-menu .danger{ color:#9a3b2a; } .np-menu .danger:hover{ background:rgba(154,59,42,.12); } @media(max-width:780px){ .bandeau{ padding:8px 14px; } .bandeau-nav{ order:3; width:100%; justify-content:center; margin-top:2px; } .bandeau-actions{ margin-left:auto; } .np-nom, .np-id small{ max-width:130px; } } @media(max-width:420px){ .nav-profil .np-id{ display:none; } /* très petits écrans : avatar seul */ .nav-profil > summary{ padding:4px 8px 4px 5px; } } /* ============================================================ GAZETTE / CLASSEMENT / LORE — refonte En-tête cérémonieux réutilisé (.zone-tete / .zone-titre / .zone-orne). ============================================================ */ /* — Gazette : hauts faits en cartes héraldiques — */ .gaz-liste{ display:flex; flex-direction:column; gap:12px; } .gaz-fait{ display:flex; align-items:center; gap:14px; background:linear-gradient(180deg,#f7ecd2,#efe1bd); border:1px solid var(--bord); border-radius:14px; padding:13px 16px; box-shadow:0 8px 20px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.5); transition:transform .15s, box-shadow .15s; } .gaz-fait:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(0,0,0,.2); } .gaz-medaillon{ width:46px; height:46px; flex:none; display:flex; align-items:center; justify-content:center; font-size:23px; border-radius:13px; background:radial-gradient(circle at 30% 25%,#fff3cf,#d8b25e); border:1px solid var(--or-fonce); box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 3px 8px rgba(0,0,0,.22); } .gaz-corps{ flex:1; min-width:0; } .gaz-corps .txt{ font-size:15px; line-height:1.4; color:#3f2f14; } .gaz-corps .txt a{ font-weight:700; } .gaz-corps .txt strong{ color:var(--encre); } .gaz-meta{ font-size:12.5px; color:#8a6a28; margin-top:3px; } .gaz-meta em{ color:#6a5526; font-style:italic; } .gaz-voir{ flex:none; font-size:12.5px; font-weight:700; text-decoration:none; color:#5a431f; background:rgba(255,255,255,.6); border:1px solid var(--bord); border-radius:20px; padding:5px 13px; } .gaz-voir:hover{ background:#fff6df; } .gaz-fait.une{ background:radial-gradient(120% 90% at 0% 0%, rgba(216,178,94,.30), transparent 55%), linear-gradient(180deg,#f6e6b8,#efdca6); border-color:var(--or); box-shadow:0 12px 28px rgba(0,0,0,.2), inset 0 0 0 1px rgba(255,240,200,.45); } .gaz-fait.une .gaz-medaillon{ width:54px; height:54px; font-size:27px; } .gaz-fait.une .txt{ font-size:17px; font-family:var(--serif); } /* — Classement : podium (top 3) + liste — */ .cls-podium{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; align-items:end; margin:0 0 22px; } .cls-marche{ position:relative; text-align:center; padding:18px 12px 18px; border:1px solid var(--bord); border-radius:14px 14px 0 0; background:linear-gradient(180deg,#f7ecd2,#efe1bd); box-shadow:0 10px 24px rgba(0,0,0,.16); } .cls-marche .rang{ position:absolute; top:-15px; left:50%; transform:translateX(-50%); width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--titre); font-weight:700; font-size:15px; color:#3a2208; border:2px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.3); } .cls-marche .ava{ width:66px; height:66px; margin:8px auto; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-weight:700; font-size:26px; color:#e8d29a; background:linear-gradient(160deg,#3a2a12,#1c1305); border:3px solid var(--or-fonce); } .cls-marche .ava img{ width:100%; height:100%; object-fit:cover; } .cls-marche .nom{ font-family:var(--serif); font-weight:700; font-size:16px; } .cls-marche .nom a{ color:var(--encre); text-decoration:none; } .cls-marche .nom a:hover{ color:var(--lien); } .cls-marche .sous{ font-size:11.5px; color:#6a5526; } .cls-marche .puiss{ margin-top:9px; font-family:var(--titre); font-weight:700; font-size:21px; color:var(--encre); line-height:1; } .cls-marche .puiss small{ display:block; font-size:9.5px; letter-spacing:.6px; text-transform:uppercase; color:#8a6a28; font-weight:600; margin-top:3px; } .cls-marche.or{ order:2; padding-top:28px; background:linear-gradient(180deg,#fbeebc,#f3dd97); border-color:var(--or); box-shadow:0 14px 30px rgba(0,0,0,.22); } .cls-marche.or .ava{ width:80px; height:80px; border-color:var(--or); box-shadow:0 0 16px rgba(216,178,94,.6); } .cls-marche.or .rang{ background:linear-gradient(180deg,#ffe9a3,#e9c45e); } .cls-marche.argent{ order:1; background:linear-gradient(180deg,#eef0f2,#dde2e8); } .cls-marche.argent .rang{ background:linear-gradient(180deg,#f2f4f6,#c3cad3); } .cls-marche.bronze{ order:3; background:linear-gradient(180deg,#f1ddc4,#e6c6a0); } .cls-marche.bronze .rang{ background:linear-gradient(180deg,#f0cfa6,#cf9b6a); } .cls-liste{ display:flex; flex-direction:column; gap:6px; } .cls-ligne{ display:grid; grid-template-columns:38px 42px 1fr auto auto auto; gap:12px; align-items:center; background:linear-gradient(180deg,#f6ead0,#efe1bd); border:1px solid var(--bord); border-radius:11px; padding:8px 14px; } .cls-ligne:hover{ background:linear-gradient(180deg,#fbf1d8,#f3e6c5); } .cls-ligne .rg{ font-family:var(--titre); font-weight:700; font-size:15px; color:#8a6a28; text-align:center; } .cls-ligne .ava{ width:38px; height:38px; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-weight:700; font-size:15px; color:#e8d29a; background:linear-gradient(160deg,#3a2a12,#1c1305); border:2px solid var(--or-fonce); } .cls-ligne .ava img{ width:100%; height:100%; object-fit:cover; } .cls-ligne .id{ min-width:0; } .cls-ligne .id .nom{ font-family:var(--serif); font-weight:700; font-size:15px; } .cls-ligne .id .nom a{ color:var(--encre); text-decoration:none; } .cls-ligne .id .nom a:hover{ color:var(--lien); } .cls-ligne .id .sous{ font-size:12px; color:#6a5526; } .cls-ligne .stat{ text-align:center; font-size:11.5px; color:#8a6a28; white-space:nowrap; } .cls-ligne .stat b{ display:block; font-family:var(--serif); font-size:15px; color:var(--encre); } .cls-ligne .puiss{ font-family:var(--titre); font-weight:700; font-size:18px; color:var(--encre); text-align:right; min-width:60px; } .cls-ligne.cls-moi{ border-color:var(--or); background:linear-gradient(180deg,#fbeec0,#f3e3ad); box-shadow:0 0 0 1px var(--or), 0 6px 16px rgba(0,0,0,.16); } @media(max-width:640px){ .cls-podium{ grid-template-columns:1fr; align-items:stretch; } .cls-marche.or,.cls-marche.argent,.cls-marche.bronze{ order:0; border-radius:14px; padding-top:18px; } .cls-ligne{ grid-template-columns:30px 36px 1fr auto; } .cls-ligne .stat{ display:none; } } /* — Lore : rayon de grimoires reliés cuir — */ .lore-grille{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:22px; align-items:start; } .lore-carte{ position:relative; overflow:hidden; isolation:isolate; color:#f0e0b4; background: radial-gradient(130% 110% at 50% 0%, rgba(140,92,44,.4), transparent 62%), linear-gradient(160deg, #4c3018 0%, #3a2413 55%, #2b190b 100%); border:1px solid #170d04; border-radius:8px; padding:22px 22px 20px 32px; box-shadow: 0 16px 34px rgba(18,9,2,.5), inset 0 0 0 2px rgba(0,0,0,.4), inset 0 0 0 3px rgba(200,162,86,.55), inset 0 0 0 4px rgba(0,0,0,.28), inset 0 2px 10px rgba(255,214,140,.08); transition:transform .2s ease, box-shadow .2s ease; } /* dos relié à nerfs (bandes surélevées) */ .lore-carte::before{ content:""; position:absolute; inset:0 auto 0 0; width:13px; z-index:2; background: repeating-linear-gradient(180deg, transparent 0 20px, rgba(0,0,0,.5) 20px 23px, rgba(255,216,142,.3) 23px 24px, transparent 24px 30px), linear-gradient(90deg, #5c3b1d 0%, #3a2412 100%); border-right:1px solid rgba(200,162,86,.45); box-shadow:inset -3px 0 5px rgba(0,0,0,.55); } /* filigrane fleur-de-lis, or en réserve */ .lore-carte::after{ content:"⚜"; position:absolute; top:-14px; right:2px; z-index:0; pointer-events:none; font-size:92px; line-height:1; color:rgba(200,162,86,.11); } .lore-carte:hover{ transform:translateY(-6px); box-shadow: 0 26px 50px rgba(18,9,2,.6), inset 0 0 0 2px rgba(0,0,0,.4), inset 0 0 0 3px rgba(232,190,110,.85), inset 0 0 0 4px rgba(0,0,0,.28), inset 0 2px 14px rgba(255,220,150,.14); } .lore-tete{ position:relative; z-index:1; display:flex; align-items:center; gap:15px; text-decoration:none; color:inherit; } /* initiale enluminée, sceau doré (à la manière d'un manuscrit) */ .lore-initiale{ position:relative; flex:none; width:56px; height:56px; display:flex; align-items:center; justify-content:center; font-family:var(--titre,var(--serif)); font-size:30px; font-weight:700; color:#3a2a0f; background:linear-gradient(158deg,#fff4cf 0%,#e8c265 52%,#c2933a 100%); border:2px solid #7a5a24; border-radius:10px; box-shadow:inset 0 1px 0 rgba(255,255,255,.8), inset 0 -3px 8px rgba(110,78,18,.5), 0 6px 15px rgba(12,6,1,.5), 0 0 0 1px rgba(0,0,0,.35); text-shadow:0 1px 0 rgba(255,255,255,.5); transition:transform .2s ease, box-shadow .2s ease; } /* coins gravés du sceau */ .lore-initiale::before, .lore-initiale::after{ content:""; position:absolute; width:8px; height:8px; border:1.5px solid rgba(90,67,20,.75); } .lore-initiale::before{ top:4px; left:4px; border-right:0; border-bottom:0; } .lore-initiale::after{ bottom:4px; right:4px; border-left:0; border-top:0; } .lore-tete:hover .lore-initiale{ transform:rotate(-3deg) scale(1.06); box-shadow:inset 0 1px 0 rgba(255,255,255,.8), inset 0 -3px 8px rgba(110,78,18,.5), 0 8px 20px rgba(12,6,1,.55), 0 0 0 1px rgba(0,0,0,.35), 0 0 18px rgba(255,214,130,.35); } .lore-titrebloc{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; } .lore-nom{ font-family:var(--titre,var(--serif)); font-size:19px; font-weight:700; letter-spacing:.5px; line-height:1.16; color:#f4e6b4; text-shadow:0 1px 2px rgba(0,0,0,.4); transition:color .15s ease; } .lore-tete:hover .lore-nom{ color:#ffd980; } .lore-compte{ font-family:var(--serif); font-size:12px; font-style:italic; color:#cba869; letter-spacing:.2px; } .lore-compte::before{ content:"❧ "; font-style:normal; } .lore-desc{ position:relative; z-index:1; font-size:13.5px; color:rgba(240,225,186,.72); line-height:1.55; margin:14px 0 0; } /* séparateur : fleuron entre deux filets dorés */ .lore-sep{ position:relative; z-index:1; display:flex; align-items:center; gap:10px; margin:16px 0 13px; color:#c8a256; } .lore-sep::before, .lore-sep::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg, transparent, rgba(200,162,86,.65), transparent); } .lore-sep span{ font-size:14px; line-height:1; } /* chapitres (sous-catégories cliquables) */ .lore-sous{ position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:8px; } .lore-souschip{ display:inline-flex; align-items:center; gap:7px; font-family:var(--serif); font-size:12.5px; font-weight:600; color:#eedcac; text-decoration:none; background:rgba(255,238,196,.06); border:1px solid rgba(200,162,86,.45); border-radius:5px; padding:5px 12px 5px 10px; line-height:1.2; box-shadow:inset 0 1px 0 rgba(255,255,255,.06); transition:background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease; } .lore-souschip::before{ content:"◆"; font-size:7px; color:#c8a256; transition:color .15s ease; } .lore-souschip:hover, .lore-souschip:focus-visible{ background:linear-gradient(180deg,#e8c877,var(--or)); color:#2a1808; border-color:#f0d488; transform:translateY(-2px); box-shadow:0 6px 14px rgba(12,6,1,.45); outline:none; } .lore-souschip:hover::before, .lore-souschip:focus-visible::before{ color:#3a2a0f; } @media (prefers-reduced-motion: no-preference){ .gaz-fait, .cls-marche, .cls-ligne, .lore-carte{ animation:monte .5s cubic-bezier(.2,.7,.2,1) both; } .lore-carte{ animation-delay:calc(var(--i,0) * 55ms); } } /* ============================================================ ARÈNE (cibles PvP) & JOURNAL DES COMBATS — refonte ============================================================ */ /* — Bandeau « combat en cours » — */ .arene-encours{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:0 0 16px; background:radial-gradient(120% 90% at 0 0, rgba(154,59,42,.12), transparent 55%), linear-gradient(180deg,#f6e8cf,#efe0bd); border:1px solid #caa07a; border-left:4px solid #9a3b2a; border-radius:12px; padding:13px 16px; } .arene-encours .ic{ font-size:22px; } .arene-encours .txt{ flex:1; min-width:0; font-weight:600; color:#5a431f; } .arene-encours .txt b{ color:var(--encre); } /* — Liens utilitaires (chips, centrés) — */ .arene-liens{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin:0 0 18px; } .arene-liens a{ font-size:13px; font-weight:600; text-decoration:none; color:#5a431f; background:rgba(255,255,255,.5); border:1px solid var(--bord); border-radius:20px; padding:6px 14px; } .arene-liens a:hover{ background:#fff6df; } /* — Cibles en cartes — */ .arene-grille{ display:grid; grid-template-columns:repeat(auto-fill, minmax(244px,1fr)); gap:14px; } .arene-cible{ display:flex; flex-direction:column; gap:12px; background:linear-gradient(180deg,#f7ecd2,#efe1bd); border:1px solid var(--bord); border-radius:14px; padding:14px 16px; box-shadow:0 8px 20px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.5); transition:transform .15s, box-shadow .15s; } .arene-cible:hover{ transform:translateY(-3px); box-shadow:0 14px 28px rgba(0,0,0,.2); } .ac-tete{ display:flex; align-items:center; gap:11px; } .ac-ava{ width:48px; height:48px; flex:none; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-weight:700; font-size:20px; color:#e8d29a; background:linear-gradient(160deg,#3a2a12,#1c1305); border:2px solid var(--or-fonce); } .ac-ava img{ width:100%; height:100%; object-fit:cover; } .ac-id{ flex:1; min-width:0; } .ac-nom{ font-family:var(--serif); font-weight:700; font-size:16px; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ac-nom a{ color:var(--encre); text-decoration:none; } .ac-nom a:hover{ color:var(--lien); } .ac-sous{ font-size:12.5px; color:#6a5526; } .ac-niv{ flex:none; font-family:var(--titre); font-weight:600; font-size:11.5px; color:#3a2208; background:linear-gradient(180deg,#f2d484,var(--or)); border:1px solid #7a5e22; border-radius:20px; padding:3px 10px; } .arene-cible form{ margin:0; } .arene-cible .bouton{ width:100%; text-align:center; } .arene-cible .ac-attente{ font-size:12.5px; color:#8a7a52; font-style:italic; text-align:center; } /* Pastille « à ta portée » — force de combat relative (arc Puissance ; stuff+enchant compris) */ .ac-force{ align-self:flex-start; margin-top:-4px; display:inline-flex; align-items:center; gap:5px; font-family:var(--titre); font-weight:600; font-size:11px; letter-spacing:.02em; border-radius:20px; padding:2px 10px; border:1px solid; } .ac-force-ic{ font-size:12px; line-height:1; } .ac-force-faible{ color:#2f5d2a; background:#e6efd4; border-color:#a9c47f; } .ac-force-egal{ color:#7a5b12; background:#f5e6b8; border-color:#d9be6e; } .ac-force-fort{ color:#7d2f1e; background:#f2d9cf; border-color:#d29a86; } /* — Journal : cartes de duel (att ⚔ def) — */ .jrn-liste{ display:flex; flex-direction:column; gap:12px; } .jrn-duel{ background:linear-gradient(180deg,#f6ead0,#efe1bd); border:1px solid var(--bord); border-radius:14px; padding:13px 16px; box-shadow:0 8px 20px rgba(0,0,0,.13), inset 0 1px 0 rgba(255,255,255,.5); } .jrn-ligne{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; } .jrn-comb{ display:flex; align-items:center; gap:10px; text-decoration:none; min-width:0; } .jrn-comb.def{ flex-direction:row-reverse; } .jrn-ava{ width:44px; height:44px; flex:none; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-weight:700; font-size:18px; color:#e8d29a; background:linear-gradient(160deg,#3a2a12,#1c1305); border:2px solid var(--or-fonce); } .jrn-ava img{ width:100%; height:100%; object-fit:cover; } .jrn-nom{ font-family:var(--serif); font-weight:700; font-size:15px; color:var(--encre); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .jrn-comb:hover .jrn-nom{ color:var(--lien); } .jrn-comb.gagnant .jrn-ava{ border-color:var(--or); box-shadow:0 0 0 2px var(--or), 0 0 12px rgba(216,178,94,.55); } .jrn-comb.gagnant .jrn-nom::after{ content:" 👑"; } .jrn-milieu{ text-align:center; color:#8a6a28; } .jrn-milieu .ic{ font-size:20px; display:block; } .jrn-milieu .tours{ display:block; font-size:11px; text-transform:uppercase; letter-spacing:.4px; } .jrn-issue{ display:inline-block; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; border-radius:20px; padding:1px 9px; margin-top:4px; } .jrn-issue.victoire{ background:var(--vert); color:#06210a; } .jrn-issue.fuite{ background:#7a6748; color:#fff; } .jrn-issue.nul{ background:#5a6b7a; color:#fff; } .jrn-pied{ display:flex; justify-content:center; align-items:center; gap:14px; margin-top:10px; padding-top:9px; border-top:1px dashed rgba(138,109,47,.3); font-size:12px; color:#8a6a28; } .jrn-pied a{ font-weight:700; text-decoration:none; color:#5a431f; background:rgba(255,255,255,.55); border:1px solid var(--bord); border-radius:20px; padding:4px 12px; } .jrn-pied a:hover{ background:#fff6df; } @media(max-width:560px){ .jrn-nom{ font-size:13px; } .jrn-ava{ width:38px; height:38px; } } @media (prefers-reduced-motion: no-preference){ .arene-cible, .jrn-duel{ animation:monte .5s cubic-bezier(.2,.7,.2,1) both; } } /* — Combat : bandeau « à blanc » + barre d'outils — */ .cbt-barre-outils{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:0 0 16px; } .cbt-blanc{ display:flex; align-items:center; gap:10px; margin:0 0 16px; font-weight:600; color:#7a2e1a; background:rgba(154,59,42,.10); border:1px solid #caa07a; border-left:4px solid #9a3b2a; border-radius:12px; padding:11px 15px; } /* — Rejouage : journal pas à pas (le JS pilote #rejouage > li ; .tour / .ligne conservés) — */ #rejouage{ list-style:none; margin:0; padding:0; } #rejouage li.tour{ font-family:var(--titre); font-weight:700; font-size:12.5px; letter-spacing:.6px; text-transform:uppercase; color:var(--parchemin); background:rgba(42,29,14,.92); border-radius:8px; padding:6px 13px; margin:14px 0 6px; } #rejouage li.tour:first-child{ margin-top:0; } #rejouage li.ligne{ display:flex; gap:9px; font-size:14px; line-height:1.5; color:#3f2f14; padding:7px 13px; border-bottom:1px solid rgba(138,109,47,.16); } #rejouage li.ligne:before{ content:"⚔️"; flex:none; opacity:.6; font-size:13px; } .rej-pied{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:16px 0 0; } /* — Aventure (PvE) : cartes de créatures, boss mis en avant — */ .arene-cible .ac-ava.glyphe{ font-size:24px; } .arene-cible.boss{ border-color:var(--or); background:radial-gradient(120% 90% at 50% -10%, rgba(216,178,94,.22), transparent 60%), linear-gradient(180deg,#f8ecc6,#efdca6); box-shadow:0 12px 26px rgba(0,0,0,.2), inset 0 0 0 1px rgba(255,240,200,.45); } .arene-cible.boss .ac-ava{ background:radial-gradient(circle at 30% 25%, #ffe6a0, #c8902f); color:#3a2208; border-color:var(--or); } .arene-cible.boss .ac-niv{ background:linear-gradient(180deg,#f0c24a,var(--or)); } /* ============================================================ HUBS PVE / PVP — parité pixel avec le design handoff (2026-07-06) Grande carte parchemin claire + hero centré + cartes ouvertes + tuiles « à venir » recessées (badge 🔒). Classes page-scopées : n'affectent QUE /pve et /pvp (les autres écrans gardent .zone-tete, .arene-cible, .hub-tuile…). La carte remplace le panneau .parchemin du layout (neutralisé via :has, comme .auth-carte). ============================================================ */ .parchemin:has(.hub-page){ background:none; border:0; box-shadow:none; padding:0; } .hub-page{ max-width:1080px; margin:0 auto; background:#f3e6c2; background-image:radial-gradient(rgba(138,109,47,.05) 1px, transparent 1.4px); background-size:8px 8px; border-radius:20px; box-shadow:0 24px 60px rgba(0,0,0,.5); padding:34px 38px 40px; color:#2a1d0e; } @media (prefers-reduced-motion: no-preference){ .hub-page{ animation:monte .55s cubic-bezier(.2,.7,.2,1) both; } } /* — Hero centré sur parchemin — */ .hub-hero{ text-align:center; margin-bottom:26px; } .hub-pill{ display:inline-block; background:#fff8e6; border:1px solid #c9b06a; color:#6b5124; font-size:12px; letter-spacing:2px; text-transform:uppercase; padding:5px 15px; border-radius:20px; } .hub-h1{ font-family:var(--serif); font-size:44px; text-transform:uppercase; letter-spacing:1px; margin:12px 0 0; line-height:1.1; color:#2a1d0e; } .hub-sub{ font-family:var(--serif); font-size:16px; font-style:italic; color:#6b5124; margin:4px auto 0; max-width:640px; } .hub-orn{ color:#a8842f; margin-top:14px; letter-spacing:6px; } /* — Titres de section (⚔ Ouverts / 🔒 À venir) + filet — */ .hub-seclbl{ font-family:var(--serif); font-weight:400; color:#8a6d2f; text-transform:uppercase; letter-spacing:2px; font-size:14px; display:flex; align-items:center; gap:12px; margin:0 0 16px; } .hub-seclbl .rule{ flex:1; height:1px; background:linear-gradient(90deg,#c9b06a,transparent); } /* — Cartes de mode ouvert — */ .hub-open-solo{ max-width:420px; margin-bottom:30px; } .hub-open-duo{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:30px; } .hub-open{ background:#fbf3dc; border:1px solid #e7d5a6; border-radius:14px; padding:20px; box-shadow:inset 0 1px 0 rgba(255,255,255,.5); display:flex; flex-direction:column; } .hub-open .hub-btn-gold{ margin-top:auto; } /* bouton collé en bas -> aligné entre cartes de hauteurs inégales */ .hub-open-tete{ display:flex; align-items:center; gap:13px; } .hub-oic{ width:48px; height:48px; flex:none; border-radius:12px; background:linear-gradient(180deg,#f2e2ac,#dcbf6e); border:1px solid #bc9e58; box-shadow:inset 0 1px 0 rgba(255,255,255,.5); display:flex; align-items:center; justify-content:center; font-size:22px; } .hub-open-nom{ font-family:var(--serif); font-size:18px; font-weight:700; color:#2a1d0e; line-height:1.15; } .hub-open-sous{ font-size:12px; color:#7a5f2c; } .hub-open-desc{ font-size:13.5px; line-height:1.55; margin:14px 0; color:#2a1d0e; } .hub-recompense{ font-size:12px; color:#6a5526; margin-top:8px; } .hub-btn-gold{ display:block; text-align:center; text-decoration:none; font-weight:700; padding:11px; border-radius:10px; border:1px solid #8a6d2f; color:#2a1d0e; background:linear-gradient(180deg,#e0bb65,#c9a24a 60%,#a8842f); } .hub-btn-sec{ display:block; text-align:center; text-decoration:none; font-weight:700; padding:11px; border-radius:10px; border:1px solid #c9b06a; color:#5a3d12; background:#f3e6c2; } /* — Tuiles « à venir » recessées + badge 🔒 — */ .hub-soongrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:11px; } .hub-soon{ position:relative; background:#eeddb0; border:1px solid #ddc794; border-radius:12px; padding:13px 14px; display:flex; align-items:center; gap:11px; cursor:default; } .hub-soon .ic{ width:38px; height:38px; flex:none; border-radius:9px; background:#f6ecc9; border:1px solid #d3ba7f; display:flex; align-items:center; justify-content:center; font-size:17px; opacity:.9; } .hub-soon > div:not(.ic):not(.lk){ flex:1; min-width:0; } .hub-soon .nm{ font-family:var(--serif); font-weight:700; font-size:13.5px; color:#4a3413; line-height:1.15; overflow-wrap:anywhere; } .hub-soon .sb{ font-size:10.5px; color:#8a6f3a; margin-top:1px; } .hub-soon .lk{ order:2; margin-left:auto; align-self:center; padding-left:8px; font-size:9px; font-weight:700; letter-spacing:.5px; color:#8a6d2f; text-transform:uppercase; white-space:nowrap; } .hub-soon-repli{ margin-top:14px; } .hub-soon-repli > summary{ cursor:pointer; font-family:var(--titre); color:var(--or-fonce); font-size:14px; letter-spacing:.04em; list-style:none; padding:8px 0; } .hub-soon-repli > summary::-webkit-details-marker{ display:none; } .hub-soon-repli > summary::before{ content:'▸ '; } .hub-soon-repli[open] > summary::before{ content:'▾ '; } .hub-soon-repli[open] > summary{ margin-bottom:10px; } @media(max-width:900px){ .hub-soongrid{ grid-template-columns:repeat(2,1fr); } } @media(max-width:600px){ .hub-page{ padding:24px 18px 28px; } .hub-h1{ font-size:34px; } .hub-open-duo{ grid-template-columns:1fr; } .hub-soongrid{ grid-template-columns:1fr; } } /* ============================================================ CONTRATS DE CHASSE — tableau de primes (réutilise .hub-page/.hub-hero) ============================================================ */ .contrats-page .ctr-grille{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } .ctr-vide{ text-align:center; font-family:var(--serif); font-style:italic; color:#6b5124; background:#fbf3dc; border:1px dashed #d3ba7f; border-radius:14px; padding:30px 20px; } /* — Carte de prime — */ .ctr-carte{ position:relative; display:flex; flex-direction:column; background:#fbf3dc; border:1px solid #e7d5a6; border-radius:14px; padding:18px 18px 16px; box-shadow:inset 0 1px 0 rgba(255,255,255,.5); } .ctr-carte.est-boss{ border-color:#c9a24a; background:linear-gradient(180deg,#fdf4d6,#f6e7b7); box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 6px 18px rgba(168,132,47,.28); } .ctr-ruban{ position:absolute; top:-1px; right:-1px; font-size:10.5px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:#4a3413; padding:4px 11px; background:linear-gradient(180deg,#e6c86f,#c9a24a); border:1px solid #a8842f; border-top-right-radius:14px; border-bottom-left-radius:12px; } .ctr-tete{ display:flex; align-items:center; gap:12px; } .ctr-seal{ width:46px; height:46px; flex:none; border-radius:12px; background:linear-gradient(180deg,#f2e2ac,#dcbf6e); border:1px solid #bc9e58; box-shadow:inset 0 1px 0 rgba(255,255,255,.5); display:flex; align-items:center; justify-content:center; font-size:22px; } .ctr-info{ min-width:0; } .ctr-nom{ font-family:var(--serif); font-size:17px; font-weight:700; color:#2a1d0e; line-height:1.15; } .ctr-meta{ font-size:12px; color:#7a5f2c; margin-top:2px; } /* — Bandeau de prime (Runes) — */ .ctr-prime{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:14px 0; padding:9px 13px; border-radius:10px; background:#f6ecc9; border:1px solid #e0cf9c; } .ctr-prime-lbl{ font-size:10.5px; letter-spacing:1.5px; text-transform:uppercase; color:#8a6d2f; } .ctr-runes{ font-family:var(--serif); font-size:18px; font-weight:700; color:#2a1d0e; white-space:nowrap; } .ctr-runes-u{ font-size:12px; font-weight:400; color:#7a5f2c; } /* — Zone d'action (bouton / suivi / fait) — */ .ctr-action{ margin-top:auto; } .ctr-action .hub-btn-gold{ width:100%; } .ctr-btn-pret{ background:linear-gradient(180deg,#f0cf72,#d8ac47 60%,#b8912f); } .ctr-suivi-txt{ font-size:12px; color:#7a5f2c; margin-top:7px; text-align:center; } .ctr-btn-combat{ width:100%; margin-top:9px; } .ctr-barre{ height:9px; border-radius:6px; overflow:hidden; background:#e8d8ab; border:1px solid #d3ba7f; } .ctr-barre > span{ display:block; height:100%; border-radius:6px; background:linear-gradient(90deg,#c9a24a,#e6c86f); } .ctr-fait{ text-align:center; font-weight:700; color:#5a7a3d; font-size:13.5px; padding:10px; border-radius:10px; background:#eef3df; border:1px solid #cdd9a8; } @media(max-width:900px){ .contrats-page .ctr-grille{ grid-template-columns:repeat(2,1fr); } } @media(max-width:600px){ .contrats-page .ctr-grille{ grid-template-columns:1fr; } } /* — Fiche de personnage : en-têtes de section élevés (cohésion avec le nouveau style) — */ .profil h2{ font-family:var(--titre); font-size:18px; font-weight:700; letter-spacing:.3px; display:flex; align-items:center; gap:9px; margin:0 0 14px; padding:0 0 9px; border-bottom:2px solid rgba(216,178,94,.45); } /* ============================================================ PAGES DE COMPTE (auth) — carte centrée sur la scène :has() neutralise le panneau parchemin du layout (repli gracieux sinon). ============================================================ */ .parchemin:has(.auth-carte){ background:none; border:0; box-shadow:none; padding:22px 0; } .auth-carte{ width:min(440px, 100%); margin:14px auto; padding:30px 32px 26px; text-align:center; background:linear-gradient(180deg,#f3e7c6,#ecdcae); border:1px solid var(--or-fonce); border-radius:18px; box-shadow:0 22px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.5); } @media (prefers-reduced-motion: no-preference){ .auth-carte{ animation:monte .55s cubic-bezier(.2,.7,.2,1) both; } } .auth-crete{ width:60px; height:60px; margin:0 auto 14px; display:flex; align-items:center; justify-content:center; font-size:30px; border-radius:50%; background:radial-gradient(circle at 30% 25%, #fff3cf, #d8b25e); border:2px solid var(--or-fonce); box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 6px 16px rgba(0,0,0,.35); } .auth-kicker{ display:block; font-family:var(--titre); font-weight:600; font-size:10.5px; letter-spacing:2.5px; text-transform:uppercase; color:#8a6a28; margin:0 0 4px; } .auth-titre{ font-family:var(--titre); font-weight:700; font-size:26px; line-height:1.1; margin:0; color:var(--encre); } .auth-sous{ font-family:var(--plume); font-style:italic; font-size:16px; color:#5a431f; margin:8px 0 20px; } .auth-form{ text-align:left; display:flex; flex-direction:column; gap:13px; } .auth-champ{ display:flex; flex-direction:column; gap:5px; } .auth-champ label{ font-size:13px; font-weight:700; color:#5a431f; } .auth-champ .auth-hint{ font-weight:400; color:#8a6a28; } .auth-champ input{ width:100%; min-width:0 !important; margin-top:0; } .auth-form .bouton{ width:100%; text-align:center; margin-top:5px; font-size:15px; padding:11px; } .auth-liens{ margin:18px 0 0; display:flex; flex-direction:column; gap:7px; font-size:13.5px; } .auth-liens a{ color:var(--lien); font-weight:600; text-decoration:none; } .auth-liens a:hover{ text-decoration:underline; } .auth-erreurs{ text-align:left; background:#f5d9d2; border:1px solid #b06a52; color:#7a2e1a; border-radius:10px; padding:10px 14px; margin:0 0 16px; font-size:13.5px; } .auth-erreurs ul{ margin:0; padding-left:18px; } .auth-msg{ background:rgba(46,156,62,.12); border:1px solid #7bbf86; color:#1f6b2e; border-radius:10px; padding:12px 14px; margin:0 0 12px; font-size:14px; } .auth-note{ color:#5a431f; font-size:14.5px; line-height:1.5; margin:0 0 18px; } /* ============================================================ ADMIN — ATELIER DE CLASSE (maitre-detail + onglets) ============================================================ */ .atl{ display:grid; grid-template-columns:262px 1fr; gap:16px; align-items:start; } @media(max-width:820px){ .atl{ grid-template-columns:1fr; } } .atl .rail{ background:linear-gradient(180deg,#f1e2b6,#e7d5a4); border:1px solid var(--bord); border-radius:14px; box-shadow:0 8px 22px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.5); padding:13px; position:sticky; top:14px; } .atl .rail-tete{ display:flex; align-items:center; justify-content:space-between; margin:0 2px 10px; } .atl .rail-tete h2{ font-family:var(--serif); font-size:16px; margin:0; } .atl .rail-add{ font-size:12.5px; font-weight:700; color:var(--encre); text-decoration:none; background:linear-gradient(var(--or-clair),var(--or)); border:1px solid var(--or-fonce); border-radius:11px; padding:4px 11px; box-shadow:0 2px 0 var(--ombre), inset 0 1px 0 rgba(255,255,255,.4); } .atl .rail-find{ width:100%; font-size:13px; min-width:0; margin:0 0 10px; } .atl .rail-grp{ display:flex; align-items:center; gap:7px; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.8px; color:#8a6a28; margin:6px 6px 4px; } .atl .rail-grp::before{ content:""; width:5px; height:5px; background:var(--or-fonce); transform:rotate(45deg); border-radius:1px; opacity:.75; flex:0 0 auto; } .atl .rail-item{ display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:10px; color:var(--encre); text-decoration:none; } .atl .rail-item .nm{ font-weight:600; font-size:14px; } .atl .rail-item:hover{ background:#fff6df; } .atl .rail-item.on{ background:linear-gradient(180deg,#e6c877,var(--or)); box-shadow:0 2px 0 var(--ombre), inset 0 1px 0 rgba(255,255,255,.42); } .atl .rail-item--sub{ margin-left:14px; padding-left:14px; border-left:2px solid #cbb070; } .atl .rail-item--sub .nm{ font-size:13px; } .atl .ws{ background:repeating-linear-gradient(135deg, rgba(255,255,255,.02) 0 2px, transparent 2px 6px), linear-gradient(180deg, #ecd79f, var(--parchemin)); border:1px solid var(--bord); border-radius:14px; box-shadow:0 14px 38px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.4); padding:20px 24px; } .atl .ws-fil{ font-size:12.5px; color:#6b5526; } .atl .ws-fil b{ color:var(--encre); } .atl .ws-tete{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:4px 0 10px; } .atl .ws-tete h1{ font-family:var(--serif); font-size:28px; margin:0; line-height:1.1; } .atl .ws-tete .grade{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:#fff; background:var(--or-fonce); border-radius:20px; padding:3px 11px; } .atl .ws-save{ margin-left:auto; } .atl .ws-chips{ display:flex; gap:8px; flex-wrap:wrap; margin:0 0 14px; } .atl .chip{ font-size:12px; font-weight:600; color:#5a431f; background:rgba(255,255,255,.55); border:1px solid #d8bd80; border-radius:9px; padding:3px 11px; } .atl .chip b{ color:var(--encre); } .atl .tabs{ display:flex; gap:6px; flex-wrap:wrap; border-bottom:2px solid rgba(138,109,47,.4); padding-bottom:10px; margin:0 0 16px; } .atl .tab{ font-family:inherit; font-size:13.5px; font-weight:600; color:var(--encre); cursor:pointer; background:rgba(255,255,255,.45); border:1px solid #d8bd80; border-radius:11px; padding:7px 15px; box-shadow:inset 0 1px 0 rgba(255,255,255,.5); } .atl .tab:hover{ background:#fff7e2; border-color:var(--or); } .atl .tab.on{ background:linear-gradient(180deg,#e6c877,var(--or)); border-color:var(--or-fonce); box-shadow:0 2px 0 var(--ombre), inset 0 1px 0 rgba(255,255,255,.42); font-weight:700; } .atl .grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; } @media(max-width:680px){ .atl .grid{ grid-template-columns:1fr; } } .atl .carte{ background:linear-gradient(180deg,#fbf3da,#f1e4c0); border:1px solid var(--or-fonce); border-radius:12px; padding:14px 16px; box-shadow:inset 0 1px 0 rgba(255,255,255,.5); } .atl .carte h3{ font-family:var(--serif); font-size:15px; margin:0 0 11px; border-bottom:1px solid var(--bord); padding-bottom:7px; display:flex; align-items:center; justify-content:space-between; } .atl .carte h3 a{ font-family:var(--sans); font-size:12px; font-weight:700; color:var(--lien); text-decoration:none; } .atl .attrs{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px; } .atl .attr{ background:rgba(255,255,255,.34); border:1px solid var(--bord); border-radius:10px; padding:9px 4px; text-align:center; } .atl .attr .n{ font-family:var(--serif); font-size:22px; font-weight:700; line-height:1; } .atl .attr .l{ font-size:10px; color:#6a5526; text-transform:uppercase; letter-spacing:.4px; margin-top:4px; } .atl .kv{ display:flex; flex-direction:column; gap:7px; } .atl .kv div{ display:flex; justify-content:space-between; gap:10px; font-size:14px; border-bottom:1px dashed rgba(138,109,47,.3); padding-bottom:6px; } .atl .kv div:last-child{ border-bottom:0; padding-bottom:0; } .atl .kv .v{ font-weight:700; } .atl .kv .v a{ color:var(--lien); text-decoration:none; } .atl .sig{ font-style:italic; color:#4a3818; background:rgba(255,255,255,.3); border-left:3px solid var(--or-fonce); border-radius:0 8px 8px 0; padding:8px 12px; font-size:13.5px; margin-top:6px; } .atl .hint{ font-size:12.5px; color:#6a5526; margin:14px 2px 0; } .atl .two{ display:grid; grid-template-columns:1fr 1fr; gap:14px; } @media(max-width:680px){ .atl .two{ grid-template-columns:1fr; } } .atl .pool{ background:rgba(255,255,255,.30); border:1px solid var(--bord); border-radius:10px; padding:12px; } .atl .pool h4{ margin:0 0 9px; font-size:12px; text-transform:uppercase; letter-spacing:.4px; color:#8a6a28; } .atl .sline{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:7px 9px; border-radius:8px; background:rgba(255,255,255,.5); border:1px solid var(--bord); margin-bottom:6px; font-size:13.5px; } .atl .sline .cat{ font-size:10px; color:#6a5526; } .atl .sline.herite{ opacity:.7; } .atl .sline .lock{ font-size:13px; } .atl .sline button, .atl .sline a.edit{ font-family:inherit; cursor:pointer; border:1px solid var(--or-fonce); border-radius:7px; padding:3px 11px; font-weight:700; font-size:12.5px; text-decoration:none; color:#4a3411; display:inline-block; line-height:1.5; } .atl .sline button:hover, .atl .sline a.edit:hover{ filter:brightness(1.04); } .atl .sline .add, .atl .sline a.edit{ background:linear-gradient(var(--or-clair),var(--or)); } .atl .sline .rem{ background:#e9cf90; } .atl .sline-actions{ display:flex; gap:6px; align-items:center; flex:none; } .atl .placeholder{ color:#6a5526; font-style:italic; padding:24px; text-align:center; background:rgba(255,255,255,.25); border:1px dashed var(--or-fonce); border-radius:10px; } /* Le formulaire des onglets reutilise .cf-* de crud-form.php (deja stylees). */ .atl form.cf .cf-sec{ border:1px solid var(--bord); border-radius:12px; background:rgba(255,255,255,.16); padding:6px 16px 16px; } /* ============================================================ CRÉATION / RE-SPEC — écran pédagogique (formulaire + « fiche vivante ») ============================================================ */ .crea-layout{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,360px); gap:22px; align-items:start; } @media(max-width:900px){ .crea-layout{ grid-template-columns:1fr; } } .crea-form{ min-width:0; } .crea-panneau{ position:sticky; top:14px; display:flex; flex-direction:column; gap:14px; } @media(max-width:900px){ .crea-panneau{ position:static; } } .crea-carte{ background:linear-gradient(180deg,#fbf3da,#f1e4c0); border:1px solid var(--or-fonce); border-radius:12px; padding:14px 16px; box-shadow:inset 0 1px 0 rgba(255,255,255,.5); } .crea-carte-tete{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:6px; } .crea-nom{ font-family:var(--serif); font-size:18px; font-weight:700; } .crea-tag{ font-size:11px; font-weight:700; color:#fff; background:var(--or-fonce); border-radius:20px; padding:2px 10px; } .crea-desc{ margin:0 0 10px; font-size:13.5px; color:#4a3818; } .crea-fiche .crea-desc{ font-style:italic; } .crea-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; } .crea-chip{ font-size:12.5px; font-weight:700; border-radius:8px; padding:2px 9px; } .crea-chip.up{ color:#1f5a26; background:#dceccf; } .crea-chip.dn{ color:#8a2f1d; background:#f1d9cd; } .crea-chip.neutre{ color:#6a5526; background:rgba(255,255,255,.5); } .crea-trait{ display:flex; gap:8px; align-items:center; font-size:13px; color:#3f2f14; background:rgba(255,255,255,.45); border-left:3px solid var(--or); padding:8px 11px; border-radius:0 8px 8px 0; } .crea-trait::before{ content:"✦"; color:var(--or-fonce); font-size:15px; flex:none; } .crea-trait-txt::before{ content:"Trait : "; font-weight:700; } .crea-cle{ display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:700; color:#5a431f; background:#f0e3b8; border:1px solid var(--or); border-radius:20px; padding:4px 13px; margin-bottom:11px; } .crea-cle::before{ content:"★"; color:var(--or-fonce); } .crea-barres{ display:flex; flex-direction:column; gap:5px; } .crea-barre{ display:flex; align-items:center; gap:9px; font-size:12.5px; } .crea-barre-lab{ flex:0 0 78px; color:#5a431f; } .crea-barre-track{ flex:1; height:9px; background:rgba(138,109,47,.22); border-radius:6px; overflow:hidden; } .crea-barre-fill{ display:block; height:100%; background:linear-gradient(90deg,#caa85f,#9c7d34); border-radius:6px; } .crea-barre-num{ flex:0 0 22px; text-align:right; color:#3f2f14; } .crea-barre.cle .crea-barre-lab{ color:var(--encre); font-weight:700; } .crea-barre.cle .crea-barre-fill{ background:linear-gradient(90deg,#f2d484,var(--or-fonce)); box-shadow:0 0 6px rgba(188,158,88,.7); } .crea-legende-titre{ font-family:var(--serif); font-size:15px; font-weight:700; margin-bottom:6px; } .crea-attr{ display:grid; grid-template-columns:78px 1fr; column-gap:8px; row-gap:1px; padding:7px 0; border-bottom:1px dashed rgba(138,109,47,.3); } .crea-attr:last-child{ border-bottom:0; } .crea-attr-nom{ grid-column:1; grid-row:1 / 3; align-self:start; font-size:13.5px; font-weight:700; } .crea-attr-role{ grid-column:2; grid-row:1; font-size:12.5px; color:#5a431f; } .crea-attr-form{ grid-column:2; grid-row:2; font-size:11.5px; color:#7a6128; font-style:normal; } .crea-attr.cle{ background:rgba(240,227,184,.6); border-radius:8px; padding:7px 8px; margin:0 -8px; border-bottom-color:transparent; } .crea-attr.cle .crea-attr-nom{ color:var(--encre); } /* Champs race/lignée/classe/croyance sur deux colonnes (les blocs masqués sortent du flux) */ .crea-champs{ display:grid; grid-template-columns:1fr 1fr; gap:14px 18px; align-items:start; margin-bottom:6px; } @media(max-width:560px){ .crea-champs{ grid-template-columns:1fr; } } .crea-champs > p{ margin:0; } .crea-champs select{ width:100%; min-width:0; } .crea-champs .sub{ display:block; margin-top:3px; } /* Tableau des attributs : colonnes alignées, champs empilés et de largeur égale */ .crea-attrs{ display:grid; grid-template-columns:max-content max-content max-content 4.5em max-content max-content; column-gap:10px; row-gap:9px; align-items:center; max-width:430px; margin-top:4px; } .crea-attrs-lab{ font-weight:600; } .crea-attrs-base{ color:#6a5526; font-size:13.5px; white-space:nowrap; } .crea-attrs-sep{ color:#8a6a28; text-align:center; } .crea-attrs .total{ font-size:15px; } #attributs .crea-attrs input{ min-width:0; width:100%; text-align:center; } /* Socle concret (stats.concretes) : les 5 stats posées par la classe, en LECTURE SEULE (pas de pool) */ .crea-socle-aide{ margin:2px 0 12px; font-size:13px; color:#5a431f; } .crea-socle-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:8px; } .crea-socle-stat{ display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:13.5px; background:rgba(255,255,255,.4); border:1px solid #e7d5a6; border-radius:9px; padding:7px 11px; } .crea-socle-stat b{ font-size:16px; } /* Effets « en clair » (trait de race, signature de classe) — issus de DescripteurPassif */ .crea-effets{ display:flex; flex-direction:column; gap:5px; margin-top:9px; } .crea-effets:empty{ display:none; } .crea-effet{ display:flex; gap:7px; align-items:flex-start; font-size:12.5px; color:#3f2f14; } .crea-effet-ic{ flex:none; } /* Carte « En combat » : stats dérivées (live) + aperçu chiffré du sort de niveau 1 */ .crea-combat-niv{ font-size:12px; font-weight:400; color:#8a6a28; } .crea-stats{ display:grid; grid-template-columns:1fr 1fr; gap:6px 12px; } .crea-stat{ display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:13px; background:rgba(255,255,255,.4); border-radius:7px; padding:4px 9px; } .crea-stat-lab{ color:#5a431f; } .crea-stat-val{ font-size:15px; } .crea-sort{ margin-top:10px; background:rgba(255,255,255,.4); border-left:3px solid var(--or); border-radius:0 8px 8px 0; padding:8px 11px; } .crea-sort-tete{ font-weight:700; font-size:12.5px; color:#5a431f; } .crea-sort-corps{ font-size:13px; margin-top:2px; } .crea-sort-num{ font-size:15px; color:var(--encre); } .crea-combat-note{ font-size:11.5px; color:#7a6128; font-style:italic; margin:9px 0 0; } /* ============================================================ AVENTURE — « Chasse aux créatures » (PVE) — parité pixel avec le design handoff (source/Aventures PVE.dc.html, 2026-07-06). Page-scopé sous .aventure-page : n'affecte QUE /aventure (les autres écrans gardent .zone-tete / .arene-*). La grande carte parchemin remplace le panneau .parchemin du layout (neutralisé via :has). ============================================================ */ .parchemin:has(.aventure-page){ background:none; border:0; box-shadow:none; padding:0; } .aventure-page{ max-width:1200px; margin:0 auto; background:#f3e6c2; background-image:radial-gradient(rgba(138,109,47,.05) 1px, transparent 1.4px); background-size:8px 8px; border-radius:22px; box-shadow:0 24px 60px rgba(0,0,0,.55); padding:36px 40px 42px; color:#2a1d0e; } @media (prefers-reduced-motion: no-preference){ .aventure-page{ animation:monte .55s cubic-bezier(.2,.7,.2,1) both; } } .aventure-page .hub-hero{ margin-bottom:22px; } .aventure-page .hub-h1{ margin-top:14px; } /* Bandeau « combat en cours » */ .av-encours{ display:flex; align-items:center; gap:12px; background:#fbf3dc; border:1px solid #e0cf9f; border-radius:12px; padding:12px 16px; margin-bottom:18px; font-size:14px; box-shadow:inset 0 1px 0 rgba(255,255,255,.5); } .av-encours .ic{ font-size:18px; } .av-encours .hub-btn-gold{ display:inline-block; width:auto; margin-left:auto; padding:8px 16px; } /* Premier combat guidé — mis en avant tant que le joueur n'a pas sa 1re victoire. */ .av-premier{ display:flex; align-items:center; gap:14px; margin-bottom:18px; padding:14px 18px; border-radius:14px; background:linear-gradient(150deg,#fbf0cf,#f3e3b4); border:1px solid var(--or,#bc9e58); box-shadow:0 8px 22px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.6); } .av-premier .av-premier-ic{ font-size:30px; flex:none; } .av-premier .av-premier-tx{ flex:1; min-width:0; color:var(--encre,#2a1d0e); } .av-premier .av-premier-tx b{ display:block; font-family:var(--titre,var(--serif)); font-size:16px; color:var(--or-fonce,#8a6d2f); } .av-premier .av-premier-tx small{ display:block; font-size:13px; margin-top:2px; } .av-premier form{ margin:0; flex:none; } .av-premier .hub-btn-gold{ display:inline-block; width:auto; padding:9px 18px; } /* Barre énergie + filtres */ .av-bar{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:26px; } .av-epill{ display:flex; align-items:center; gap:12px; background:#fbf3dc; border:1px solid #e0cf9f; border-radius:14px; padding:11px 18px; box-shadow:inset 0 1px 0 rgba(255,255,255,.5); } .av-epill.est-vide{ border-color:#d9a08f; } .av-elt{ font-size:16px; } .av-epips{ display:flex; gap:4px; } .av-epip{ width:16px; height:20px; border-radius:4px; background:linear-gradient(180deg,#f0d67e,#c9a24a); border:1px solid #a8842f; box-shadow:inset 0 1px 0 rgba(255,255,255,.5); } .av-epip.off{ background:#e7d9b0; border-color:#d3bd82; box-shadow:none; opacity:.6; } .av-etxt{ font-size:13px; color:#6b5124; } .av-etxt b{ color:#2a1d0e; } .av-blanc{ font-size:11.5px; color:#a2321f; font-weight:600; margin-left:4px; } .av-filtres{ display:flex; gap:9px; align-items:center; } .av-filtres-lbl{ font-size:12px; color:#8a6f3a; font-style:italic; margin-right:2px; } .aventure-page .chip{ display:inline-flex; align-items:center; gap:7px; font-family:var(--serif); text-transform:uppercase; letter-spacing:1.2px; font-size:12.5px; font-weight:700; color:#7a5f2c; background:#f3e6c2; border:1px solid #d8c393; padding:8px 16px; border-radius:20px; cursor:pointer; transition:all .14s ease; } .aventure-page .chip:hover{ background:#fbf3dc; } .aventure-page .chip.on{ background:linear-gradient(180deg,#e0bb65,#c9a24a 60%,#a8842f); color:#2a1d0e; border-color:#8a6d2f; box-shadow:0 3px 8px rgba(0,0,0,.25); } /* Grille bestiaire */ .av-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; } .av-vide{ text-align:center; padding:40px 16px; color:#6b5124; } .av-vide .ic{ font-size:42px; display:block; margin-bottom:10px; } .av-vide p{ margin:4px 0; } .av-vide .sous{ font-size:13px; color:#8a6f3a; font-style:italic; } /* Carte monstre */ .mcard{ position:relative; background:#fbf3dc; border:1px solid #e7d5a6; border-radius:14px; padding:15px; box-shadow:0 6px 16px rgba(0,0,0,.28); transition:transform .15s ease, box-shadow .15s ease; } .mcard:hover{ transform:translateY(-4px); box-shadow:0 16px 30px rgba(0,0,0,.4); } /* Cible d'un lien « Aller combattre » (#c) : on la met en vedette + on decolle du bandeau collant. */ .mcard{ scroll-margin-top:90px; } .mcard:target{ opacity:1 !important; border-color:#c9a24a; box-shadow:0 0 0 3px rgba(201,162,74,.55), 0 16px 34px rgba(168,132,47,.45); } @media (prefers-reduced-motion: no-preference){ .mcard:target{ animation:ctrPulse 1.4s ease-out 2; } } @keyframes ctrPulse{ 0%,100%{ box-shadow:0 0 0 3px rgba(201,162,74,.55), 0 16px 34px rgba(168,132,47,.45); } 50%{ box-shadow:0 0 0 6px rgba(201,162,74,.85), 0 16px 34px rgba(168,132,47,.5); } } .mcard-tete{ display:flex; gap:13px; align-items:center; } .mport{ position:relative; flex:none; } .mring{ border-radius:50%; padding:4px; box-shadow:0 4px 10px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.5); } .mcore{ width:56px; height:56px; border-radius:50%; background:radial-gradient(circle at 38% 30%,#3a2f22,#140f08); display:flex; align-items:center; justify-content:center; font-size:30px; box-shadow:inset 0 2px 6px rgba(0,0,0,.6); } .mlvl{ position:absolute; bottom:-6px; left:50%; transform:translateX(-50%); font-family:var(--serif); font-weight:700; font-size:11px; padding:2px 9px; border-radius:10px; background:linear-gradient(180deg,#3a2a12,#241809); color:#f0dca0; border:1px solid #6b4c22; white-space:nowrap; } .mcard-id{ flex:1; min-width:0; } .mcard-nom{ font-family:var(--serif); font-size:16px; font-weight:700; line-height:1.15; overflow-wrap:anywhere; color:#2a1d0e; } .mribbon{ font-family:var(--serif); text-transform:uppercase; letter-spacing:1px; font-size:9.5px; font-weight:700; padding:3px 9px; border-radius:6px; display:inline-block; margin-top:6px; } .mrew{ display:flex; align-items:center; gap:14px; margin:13px 2px 12px; } .mrew .rew{ display:inline-flex; align-items:center; gap:5px; font-size:12px; color:#6b5124; } .mrew .rew b{ color:#2a1d0e; } .btnFight{ display:flex; align-items:center; justify-content:center; gap:7px; width:100%; font-family:inherit; background:linear-gradient(180deg,#e0bb65,#c9a24a 60%,#a8842f); color:#2a1d0e; font-weight:700; font-size:13.5px; padding:10px; border-radius:10px; border:1px solid #8a6d2f; box-shadow:0 3px 7px rgba(0,0,0,.22); cursor:pointer; transition:filter .14s ease; } .btnFight:hover{ filter:brightness(1.06); } .av-reco{ position:absolute; top:-9px; right:12px; font-family:var(--serif); font-size:9.5px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; background:linear-gradient(180deg,#5cb46a,#2e7d3c); color:#fff; padding:3px 10px; border-radius:12px; box-shadow:0 3px 7px rgba(0,0,0,.3); border:1px solid #1f7d34; } .mcard-attente{ display:block; text-align:center; font-size:12px; color:#8a6f3a; font-style:italic; padding:8px 0 2px; } /* Section + carte BOSS de zone (l'apothéose) */ .av-boss-wrap{ margin-top:28px; } .av-seclbl{ font-family:var(--serif); color:#8a6d2f; text-transform:uppercase; letter-spacing:2px; font-size:14px; display:flex; align-items:center; gap:12px; margin-bottom:14px; } .av-seclbl .rule{ flex:1; height:1px; background:linear-gradient(90deg,#c9b06a,transparent); } /* Sections de proximité du bestiaire (à ta portée / redoutables / plus faibles) — espacement entre bandes */ .av-grid + .av-seclbl, .av-grid + .av-faibles{ margin-top:28px; } .av-faibles-sum{ cursor:pointer; list-style:none; user-select:none; margin-bottom:0; } .av-faibles-sum::-webkit-details-marker{ display:none; } .av-faibles-sum::before{ content:"▸"; color:#a8842f; display:inline-block; } .av-faibles[open] .av-faibles-sum::before{ content:"▾"; } .av-faibles-n{ font-size:11px; font-weight:700; color:#8a6f3a; background:#eeddb0; border:1px solid #ddc794; border-radius:10px; padding:1px 8px; } .av-faibles-grid{ margin-top:14px; } /* `.av-grid{display:grid}` (auteur) écrase le masquage natif de
fermé (règle UA) : on masque donc explicitement la grille tant que la section n'est pas dépliée. */ .av-faibles:not([open]) .av-faibles-grid{ display:none; } .av-packs-desc{ font-size:13.5px; color:#6b5124; margin:0 0 14px; } .av-boss{ position:relative; overflow:hidden; background:linear-gradient(140deg,#2a1732,#170c1e 60%,#120a16); border:1px solid #6a4a86; border-radius:18px; box-shadow:0 18px 44px rgba(0,0,0,.55); padding:26px 30px; } .av-boss-aura{ position:absolute; left:112px; top:50%; width:260px; height:260px; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle, rgba(150,90,200,.5), rgba(150,90,200,0) 68%); animation:bossAura 4.2s ease-in-out infinite; pointer-events:none; } .av-boss-rays{ position:absolute; left:112px; top:50%; width:240px; height:240px; transform:translate(-50%,-50%); border-radius:50%; background:repeating-conic-gradient(from 0deg, rgba(190,140,230,.14) 0deg 6deg, transparent 6deg 20deg); -webkit-mask:radial-gradient(circle,#000 30%,transparent 62%); mask:radial-gradient(circle,#000 30%,transparent 62%); animation:bossSpin 22s linear infinite; pointer-events:none; } .av-ember{ position:absolute; border-radius:50%; background:radial-gradient(circle,#dcbcf2,#8a5cc0); pointer-events:none; } .av-ember.e1{ left:14%; bottom:12%; width:5px; height:5px; animation:bossEmber 4.5s linear infinite; animation-delay:.4s; } .av-ember.e2{ left:9%; bottom:20%; width:4px; height:4px; animation:bossEmber 6s linear infinite; animation-delay:2.2s; } .av-ember.e3{ left:17%; bottom:8%; width:4px; height:4px; animation:bossEmber 5.3s linear infinite; animation-delay:3.5s; } .av-boss-row{ position:relative; display:flex; align-items:center; gap:26px; } .av-boss-med{ flex:none; position:relative; } .av-boss-crown{ position:absolute; top:-20px; left:50%; transform:translateX(-50%); font-size:26px; filter:drop-shadow(0 3px 5px rgba(0,0,0,.5)); z-index:2; } .av-boss-ring{ border-radius:50%; padding:6px; background:conic-gradient(from 210deg,#5a3a86,#c9a8e8 14%,#7a4fa0 30%,#e0c8f5 46%,#6a4a86 60%,#c9a8e8 76%,#5a3a86 100%); box-shadow:0 6px 18px rgba(0,0,0,.5), inset 0 2px 3px rgba(255,255,255,.5); } .av-boss-core{ width:104px; height:104px; border-radius:50%; background:radial-gradient(circle at 38% 30%,#4a2f5e,#160c1e); display:flex; align-items:center; justify-content:center; font-size:54px; box-shadow:inset 0 3px 10px rgba(0,0,0,.7); } /* Halo clair autour du glyphe : les emojis sombres (🦂 🕷️ 🐀) restent lisibles sur le médaillon foncé. */ .mcore, .av-boss-core{ text-shadow:0 0 7px rgba(255,236,190,.6), 0 0 2px rgba(255,236,190,.95); } .av-boss-id{ flex:1; min-width:0; } .av-boss-tag{ font-family:var(--serif); text-transform:uppercase; letter-spacing:1.5px; font-size:10.5px; font-weight:700; color:#e0c8f5; background:rgba(150,90,200,.2); border:1px solid rgba(190,140,230,.5); padding:3px 11px; border-radius:14px; } .av-boss-nom{ font-family:var(--serif); font-size:32px; color:#f0e2ff; margin:8px 0 2px; text-shadow:0 0 18px rgba(170,110,215,.4); } .av-boss-sous{ color:#c3a8d6; font-size:14px; } .av-boss-rew{ display:flex; gap:20px; margin-top:12px; flex-wrap:wrap; } .av-boss-rew span{ display:inline-flex; align-items:center; gap:6px; font-size:13px; color:#c3a8d6; } .av-boss-rew b{ color:#f0e2ff; } .av-boss-rew span:last-child b{ color:#e0c8f5; } .av-boss-act{ flex:none; text-align:center; } .av-boss-btn{ display:inline-flex; align-items:center; gap:8px; text-decoration:none; background:linear-gradient(180deg,#a86bd6,#7a4fa0 60%,#5a3a86); color:#fff; font-weight:700; font-size:15px; padding:14px 28px; border-radius:12px; border:1px solid #4a2f6e; box-shadow:0 5px 14px rgba(0,0,0,.4); cursor:pointer; } .av-boss-btn:hover{ filter:brightness(1.06); color:#fff; } .av-boss-note{ font-size:11px; color:#9c86b0; margin-top:8px; } .av-boss-note b{ color:#c3a8d6; } /* Meutes & groupes (hors maquette) */ .av-pack-actions{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:12px; } .av-pack-actions form{ flex:1; min-width:130px; margin:0; } .av-pack-actions .btnFight, .av-pack-actions .hub-btn-sec{ width:100%; padding:10px; } @keyframes bossAura{ 0%,100%{ opacity:.5; transform:translate(-50%,-50%) scale(1);} 50%{ opacity:.85; transform:translate(-50%,-50%) scale(1.12);} } @keyframes bossSpin{ to{ transform:translate(-50%,-50%) rotate(360deg);} } @keyframes bossEmber{ 0%{ transform:translateY(0) scale(1); opacity:0;} 14%{ opacity:.8;} 100%{ transform:translateY(-120px) scale(.3); opacity:0;} } @media(max-width:1000px){ .av-grid{ grid-template-columns:repeat(2,1fr); } } @media(max-width:720px){ .av-boss-row{ flex-direction:column; text-align:center; gap:16px; } .av-boss-aura,.av-boss-rays{ left:50%; } .av-boss-rew{ justify-content:center; } } @media(max-width:600px){ .aventure-page{ padding:24px 18px 30px; border-radius:18px; } .av-bar{ flex-direction:column; align-items:stretch; } .av-filtres{ flex-wrap:wrap; } .av-grid{ grid-template-columns:1fr; } } /* ============================================================ BILAN DE BOSS — butin d'une mise à mort à barre partagée (encart de fin de combat + page /boss/bilan/{id} + page du jour) ============================================================ */ .bilan-boss{ margin:18px 0 4px; } .bb-tete{ display:flex; align-items:center; gap:14px; } .bb-blason{ font-size:34px; line-height:1; filter:drop-shadow(0 2px 3px rgba(0,0,0,.3)); } .bb-id{ display:flex; flex-direction:column; } .bb-kicker{ font-family:var(--serif); text-transform:uppercase; letter-spacing:2px; font-size:11px; color:#8a6d2f; } .bb-nom{ font-family:var(--serif); font-size:26px; color:#5a3d1e; line-height:1.1; } .bb-sous{ margin:8px 0 16px; color:#6a5636; font-size:14px; } .bb-moi{ background:linear-gradient(180deg,#fbf3d9,#f3e6be); border:1px solid #d8bd77; border-radius:12px; padding:14px 16px; margin:0 0 18px; box-shadow:0 2px 6px rgba(120,90,30,.12); display:grid; grid-template-columns:auto 1fr auto; grid-template-areas:"t g r" "i i i"; gap:6px 14px; align-items:center; } .bb-moi-titre{ grid-area:t; font-family:var(--serif); font-size:16px; color:#7a5518; font-weight:600; } .bb-moi-gain{ grid-area:g; font-size:18px; font-weight:700; color:#3f7a3f; } .bb-moi-rang{ grid-area:r; font-size:13px; color:#8a6d2f; } .bb-moi-items{ grid-area:i; display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; } .bb-seclbl{ font-family:var(--serif); font-weight:400; color:#8a6d2f; text-transform:uppercase; letter-spacing:2px; font-size:13px; display:flex; align-items:center; gap:12px; margin:0 0 10px; } .bb-seclbl .rule{ flex:1; height:1px; background:linear-gradient(90deg,#c9b06a,transparent); } .bb-table-wrap{ overflow-x:auto; } .bb-table{ width:100%; border-collapse:collapse; font-size:14px; } .bb-table th{ text-align:left; font-family:var(--serif); font-weight:400; color:#8a6d2f; text-transform:uppercase; letter-spacing:1px; font-size:11px; padding:6px 10px; border-bottom:1px solid #d8bd77; } .bb-table td{ padding:8px 10px; border-bottom:1px solid #ecdfbe; vertical-align:top; } .bb-table .bb-num{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; } .bb-rang{ color:#8a6d2f; font-weight:600; width:2ch; } .bb-est-moi{ background:#fbf3d9; } .bb-est-moi td{ border-bottom-color:#d8bd77; } .bb-toi{ color:#3f7a3f; font-size:12px; font-weight:600; } .bb-item{ display:inline-block; background:#f0e4c2; border:1px solid #d8bd77; border-radius:6px; padding:1px 7px; font-size:13px; color:#5a3d1e; } .bb-vide{ color:#a08b5c; } @media(max-width:560px){ .bb-moi{ grid-template-columns:1fr; grid-template-areas:"t" "g" "r" "i"; } .bb-table th:nth-child(3), .bb-table td:nth-child(3){ display:none; } /* masque Dégâts sur mobile étroit */ } /* B5 — bannière de montée de niveau */ .lvl-banniere{background:#fbf3dc;border:1px solid #e7d5a6;border-radius:14px;padding:16px 20px;margin:0 0 18px;box-shadow:0 1px 0 #fff8 inset;animation:lvl-pop .5s ease} .lvl-titre{font-family:var(--titre,'Cinzel',serif);color:var(--or-fonce,#8a6d2f);font-size:1.25rem;margin-bottom:6px} .lvl-gains{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px} .lvl-gains li{color:var(--encre,#2a1d0e)} .lvl-suite{opacity:.7;font-style:italic} .lvl-cta{color:var(--or-fonce,#8a6d2f);font-weight:600;text-decoration:underline} @keyframes lvl-pop{from{transform:translateY(-6px);opacity:0}to{transform:none;opacity:1}} /* B5 — capteur courbe de difficulté (admin) */ .parchemin:has(.b5-page){background:none;border:0;box-shadow:none;padding:0} .b5-scroll{overflow-x:auto} .b5-tab{width:100%;border-collapse:collapse;font-family:var(--plume,'Cormorant Garamond',serif)} .b5-tab th,.b5-tab td{padding:6px 10px;border-bottom:1px solid #e7d5a6;text-align:center} .b5-trou{background:#f3e0d3} .b5-alerte{background:#f6efcf} /* Carte « Premiers pas » (onboarding D.3) */ .pp-carte{ background:#fbf3dc; border:1px solid #e7d5a6; border-radius:14px; padding:18px 20px; margin-bottom:6px; } .pp-tete{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; } .pp-kicker{ font-family:var(--titre); color:var(--or-fonce); letter-spacing:.08em; font-size:12px; text-transform:uppercase; } .pp-masquer{ margin:0; } .pp-x{ background:none; border:0; color:#8a7a52; cursor:pointer; font-size:12px; } .pp-liste{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; } .pp-etape a{ text-decoration:none; color:var(--encre); display:inline-flex; gap:8px; align-items:center; flex-wrap:wrap; } .pp-etape.pp-fait a{ color:#6a7a4a; } .pp-ic{ font-weight:700; width:1.1em; text-align:center; } .pp-fait .pp-ic{ color:#5c8a3a; } .pp-recompense{ font-size:11px; font-family:var(--sans); color:var(--or-fonce); background:rgba(188,158,88,.15); border:1px solid var(--bord); border-radius:999px; padding:1px 8px; }