/* ============================================================================ ETHERYA — GUIDE SYSTEM Feuille de style partagée — guide.html / black-clover.html / chainsaw-man.html / my-hero-academia.html ========================================================================== */ :root{ --bg:#F6F5F1;--surface:#FFFFFF;--border:#E5E3DC;--border-md:#CCC9BF; --text:#18171A;--muted:#6A6870;--hint:#AAA8B0; --accent:#E53E3E;--accent-soft:#FCEAEA;--accent-txt:#B8281F; --ok:#1B6B42;--ok-soft:#E6F4ED; --gold:#B07D2A;--gold-soft:#FBF3E2;--gold-border:#E8D5A3; --cinema:#8B3DBF;--cinema-soft:#F3EAFB; --blue:#2840C8;--blue-soft:#EEF1FE; --red:#B8321F;--red-soft:#FCECEA; --font:'Cabinet Grotesk','Segoe UI',sans-serif;--mono:'Geist Mono','SF Mono',monospace; --r:8px;--rl:12px;--rxl:18px; --nav-h:60px; /* thème par page — surchargé dans le */ --theme:#E53E3E;--theme-soft:#FCEAEA;--theme-txt:#B8281F;--theme-line:#F1CFCB; } *{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ margin:0;background:var(--bg);color:var(--text); font-family:var(--font);-webkit-font-smoothing:antialiased; } a{color:inherit} code{font-family:var(--mono)} /* ── Fond texturé discret ─────────────────────────────────────────────── */ body::before{ content:'';position:fixed;inset:0;z-index:-1;pointer-events:none; background-image:radial-gradient(circle at 1.5px 1.5px, rgba(0,0,0,.035) 1px, transparent 0); background-size:26px 26px; } /* ── Nav ───────────────────────────────────────────────────────────────── */ nav{ position:fixed;top:0;left:0;right:0;z-index:300; background:rgba(246,245,241,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--border);height:var(--nav-h); display:flex;align-items:center;justify-content:space-between;padding:0 22px; } .nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:800;letter-spacing:-.03em;font-size:15px;color:var(--text)} .nav-logo .dot{width:9px;height:9px;border-radius:50%;background:var(--theme);box-shadow:0 0 0 3px var(--theme-soft)} .nav-crumb{font-family:var(--mono);font-size:11.5px;color:var(--hint);display:flex;align-items:center;gap:6px;margin-left:6px} .nav-crumb span{color:var(--theme-txt);font-weight:700} .nav-right{display:flex;align-items:center;gap:6px} .nav-link{padding:7px 13px;border-radius:var(--r);font-size:12.5px;font-weight:600;color:var(--muted);text-decoration:none;transition:all .14s;white-space:nowrap;display:flex;align-items:center;gap:6px} .nav-link:hover{background:var(--surface);color:var(--text)} .nav-link.active{background:var(--theme-soft);color:var(--theme-txt)} .nav-burger{display:none;width:36px;height:36px;border-radius:var(--r);background:var(--surface);border:1px solid var(--border);align-items:center;justify-content:center;cursor:pointer;color:var(--muted)} .mobile-menu{position:fixed;top:var(--nav-h);left:0;right:0;background:var(--surface);border-bottom:1px solid var(--border);z-index:290;display:none;flex-direction:column;padding:8px;box-shadow:0 12px 24px rgba(0,0,0,.08)} .mobile-menu.open{display:flex} .mobile-menu a{padding:12px 14px;border-radius:var(--r);font-size:14px;font-weight:650;color:var(--text);text-decoration:none} .mobile-menu a.active{background:var(--theme-soft);color:var(--theme-txt)} @media(max-width:760px){.nav-right .nav-link{display:none}.nav-burger{display:flex}} /* ── Layout ────────────────────────────────────────────────────────────── */ .page{max-width:1040px;margin:0 auto;padding:0 22px 90px} .shell{padding-top:var(--nav-h)} /* ── Hero ──────────────────────────────────────────────────────────────── */ .hero{ position:relative;overflow:hidden; padding:64px 22px 46px;margin-bottom:8px; border-bottom:1px solid var(--border); background: radial-gradient(120% 140% at 12% -10%, var(--theme-soft) 0%, transparent 58%), linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%); } .hero-inner{max-width:1040px;margin:0 auto} .hero-tag{ display:inline-flex;align-items:center;gap:7px; font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase; color:var(--theme-txt);background:var(--theme-soft);border:1px solid var(--theme-line); padding:5px 12px;border-radius:20px;margin-bottom:16px; } .hero-tag .pulse{width:6px;height:6px;border-radius:50%;background:var(--theme);animation:pulse 1.8s infinite} @keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.4)}} .hero h1{font-size:38px;font-weight:900;letter-spacing:-.045em;line-height:1.03;margin:0 0 12px} .hero h1 em{font-style:normal;background:linear-gradient(120deg,var(--text) 30%,var(--theme));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .hero p.lead{font-size:15px;color:var(--muted);max-width:600px;line-height:1.65;margin:0 0 26px} .hero-stats{display:flex;gap:10px;flex-wrap:wrap} .hero-stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--rl);padding:11px 16px;min-width:112px} .hero-stat-val{font-size:19px;font-weight:800;font-family:var(--mono);color:var(--theme-txt);line-height:1.1} .hero-stat-lbl{font-size:10.5px;color:var(--muted);margin-top:2px;letter-spacing:.02em} /* ── Sticky quick-nav (scrollspy) ─────────────────────────────────────── */ .quicknav-wrap{position:sticky;top:var(--nav-h);z-index:150;background:rgba(246,245,241,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);margin-bottom:34px} .quicknav{max-width:1040px;margin:0 auto;padding:10px 22px;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;-webkit-mask:linear-gradient(to right,transparent 0,black 14px,black calc(100% - 14px),transparent 100%)} .quicknav::-webkit-scrollbar{display:none} .qn-link{flex-shrink:0;padding:7px 14px;border-radius:20px;font-size:12.5px;font-weight:600;color:var(--muted);text-decoration:none;white-space:nowrap;border:1px solid transparent;transition:all .14s} .qn-link:hover{background:var(--surface);color:var(--text)} .qn-link.active{background:var(--theme);color:#fff} /* ── Sections ──────────────────────────────────────────────────────────── */ .section{margin-bottom:46px;scroll-margin-top:calc(var(--nav-h) + 56px)} .eyebrow{font-family:var(--mono);font-size:10.5px;font-weight:700;color:var(--theme-txt);letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px;display:flex;align-items:center;gap:7px} .eyebrow::before{content:'';width:14px;height:1.5px;background:var(--theme)} .section-title{font-size:21px;font-weight:850;letter-spacing:-.035em;margin-bottom:8px;display:flex;align-items:center;gap:9px} .section-sub{font-size:13.5px;color:var(--muted);margin-bottom:20px;line-height:1.65;max-width:680px} /* ── Notices ───────────────────────────────────────────────────────────── */ .notice{display:flex;gap:12px;padding:14px 16px;border-radius:var(--r);font-size:13px;line-height:1.55;margin-bottom:16px} .notice-icon{font-size:16px;flex-shrink:0;margin-top:1px} .notice.warn{background:var(--gold-soft);border:1px solid var(--gold-border);color:#6A4A10} .notice.info{background:var(--blue-soft);border:1px solid #C5D0FA;color:var(--blue)} .notice.tip{background:var(--ok-soft);border:1px solid #A7D8BC;color:#134F30} .notice.danger{background:var(--red-soft);border:1px solid #F0B3A8;color:#7A1A0A} .notice.theme{background:var(--theme-soft);border:1px solid var(--theme-line);color:var(--theme-txt)} /* ── Cards ─────────────────────────────────────────────────────────────── */ .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--rl);overflow:hidden} .card-header{padding:14px 16px 11px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:10px} .card-title{font-size:13.5px;font-weight:750;letter-spacing:-.01em;display:flex;align-items:center;gap:7px} .card-body{padding:15px 16px} .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px} .grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px} .pill{font-size:11px;font-weight:650;padding:3px 9px;border-radius:20px;font-family:var(--mono);display:inline-block;white-space:nowrap} .pill-gold{background:var(--gold-soft);color:var(--gold)} .pill-blue{background:var(--blue-soft);color:var(--blue)} .pill-green{background:var(--ok-soft);color:var(--ok)} .pill-purple{background:var(--cinema-soft);color:var(--cinema)} .pill-red{background:var(--red-soft);color:var(--red)} .pill-muted{background:var(--bg);color:var(--muted);border:1px solid var(--border)} .pill-theme{background:var(--theme-soft);color:var(--theme-txt);border:1px solid var(--theme-line)} /* ── Command rows / copy ──────────────────────────────────────────────── */ .cmd-list{display:flex;flex-direction:column;gap:7px} .cmd-row{display:flex;align-items:flex-start;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:12px 14px;transition:border-color .13s} .cmd-row:hover{border-color:var(--border-md)} .cmd-code{font-family:var(--mono);font-size:12px;font-weight:650;color:var(--text);background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:4px 9px;white-space:nowrap;flex-shrink:0;cursor:pointer;transition:all .12s} .cmd-code:hover{border-color:var(--theme);background:var(--theme-soft);color:var(--theme-txt)} .cmd-info{flex:1;min-width:0} .cmd-desc{font-size:13.5px;color:var(--text);line-height:1.55} .cmd-note{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.45} .cmd-chance{font-size:12px;font-family:var(--mono);font-weight:650;color:var(--theme-txt);margin-top:3px} /* ── Risk meter (comparateur work/slut/crime) ─────────────────────────── */ .risk-board{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px} .risk-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--rl);padding:16px;cursor:pointer;transition:all .16s;position:relative} .risk-card:hover{border-color:var(--border-md);transform:translateY(-2px)} .risk-card.active{border-color:var(--theme);box-shadow:0 0 0 3px var(--theme-soft)} .risk-card-cmd{font-family:var(--mono);font-size:12.5px;font-weight:700;margin-bottom:6px;display:flex;align-items:center;justify-content:space-between} .risk-card-desc{font-size:12px;color:var(--muted);line-height:1.5;margin-bottom:10px;min-height:36px} .risk-meter{height:6px;border-radius:4px;background:var(--border);overflow:hidden;margin-bottom:6px} .risk-meter-fill{height:100%;border-radius:4px;transition:width .3s} .risk-label{font-size:10.5px;font-family:var(--mono);color:var(--muted);display:flex;justify-content:space-between} .sim-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--rxl);padding:20px 22px;margin-bottom:16px} .sim-title{font-size:11.5px;font-weight:700;font-family:var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:14px;display:flex;align-items:center;gap:7px} .sim-controls{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-bottom:16px} .sim-input-group{display:flex;flex-direction:column;gap:4px} .sim-input-label{font-size:10.5px;color:var(--muted);font-family:var(--mono);text-transform:uppercase;letter-spacing:.05em} .sim-input,.power-input{width:96px;padding:7px 10px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r);font-family:var(--mono);font-size:13px;color:var(--text);outline:none;-webkit-appearance:none} .sim-input:focus,.power-input:focus{border-color:var(--theme)} .sim-btn{padding:8px 16px;background:var(--theme);color:#fff;border:none;border-radius:var(--r);font-size:13px;font-weight:650;cursor:pointer;font-family:var(--font);transition:opacity .13s} .sim-btn:hover{opacity:.88} .sim-results{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .sim-result{background:var(--bg);border:1px solid var(--border);border-radius:var(--r);padding:12px 14px;text-align:center} .sim-result-lbl{font-size:10.5px;color:var(--muted);font-family:var(--mono);margin-bottom:4px;text-transform:uppercase;letter-spacing:.04em} .sim-result-val{font-size:19px;font-weight:800;font-family:var(--mono)} /* ── Steps ─────────────────────────────────────────────────────────────── */ .steps{display:flex;border:1px solid var(--border);border-radius:var(--rl);overflow:hidden;background:var(--surface);margin-bottom:20px} .step{flex:1;padding:16px 12px;text-align:center;border-right:1px solid var(--border);transition:background .15s;position:relative} .step:last-child{border-right:none} .step:hover{background:var(--bg)} .step-num{font-size:22px;font-weight:850;letter-spacing:-.05em;line-height:1;margin-bottom:5px;color:var(--theme)} .step-label{font-size:11.5px;color:var(--muted);font-family:var(--mono);line-height:1.4} /* ── Search / filters ──────────────────────────────────────────────────── */ .search-wrap{position:relative;margin-bottom:14px} .search-input{width:100%;padding:11px 16px 11px 40px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);font-family:var(--font);font-size:14px;color:var(--text);outline:none;transition:border-color .14s;-webkit-appearance:none} .search-input:focus{border-color:var(--theme)} .search-input::placeholder{color:var(--hint)} .search-icon{position:absolute;left:13px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--hint)} .search-clear{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:var(--border);border:none;border-radius:50%;width:20px;height:20px;cursor:pointer;display:none;align-items:center;justify-content:center;color:var(--muted);font-size:12px} .search-clear.visible{display:flex} .filter-chips{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:14px} .chip{padding:6px 14px;border-radius:20px;font-size:12px;font-weight:650;font-family:var(--mono);cursor:pointer;border:1px solid var(--border);background:var(--surface);color:var(--muted);transition:all .13s;white-space:nowrap} .chip:hover{border-color:var(--border-md);color:var(--text)} .chip.active{background:var(--theme);border-color:var(--theme);color:#fff} /* ── Tables ────────────────────────────────────────────────────────────── */ .tbl-wrap{width:100%;overflow-x:auto;border:1px solid var(--border);border-radius:var(--rl);background:var(--surface)} .tbl{width:100%;border-collapse:collapse;min-width:600px} .tbl th{background:var(--bg);font-size:10.5px;font-weight:700;font-family:var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:10px 13px;text-align:left;border-bottom:1px solid var(--border);cursor:pointer;white-space:nowrap;user-select:none} .tbl th:hover{color:var(--text)} .tbl th.sorted-asc::after{content:' ↑';color:var(--theme)} .tbl th.sorted-desc::after{content:' ↓';color:var(--theme)} .tbl td{padding:10px 13px;font-size:13px;border-bottom:1px solid var(--border);vertical-align:middle;white-space:nowrap} .tbl tr:last-child td{border-bottom:none} .tbl tr:hover td{background:var(--bg)} .chance-bar-wrap{display:flex;align-items:center;gap:7px;min-width:90px} .chance-bar{height:5px;border-radius:3px;background:var(--border);flex:1;overflow:hidden;min-width:40px} .chance-bar-fill{height:100%;border-radius:3px;background:var(--theme);transition:width .3s} .chance-val{font-size:11px;font-family:var(--mono);font-weight:650;color:var(--muted);min-width:30px} /* ── Accordion (paliers étoiles etc.) ─────────────────────────────────── */ .acc-grid{display:flex;flex-direction:column;gap:10px} .acc-row{background:var(--surface);border:1px solid var(--border);border-radius:var(--rl);overflow:hidden;transition:border-color .13s} .acc-row:hover{border-color:var(--border-md)} .acc-header{padding:14px 16px 11px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;user-select:none} .acc-header:hover{background:var(--bg)} .acc-label{font-size:14px;font-weight:800;letter-spacing:-.03em;display:flex;align-items:center;gap:6px;flex-wrap:wrap} .acc-tag{font-size:11.5px;font-family:var(--mono);color:var(--muted);padding:3px 9px;background:var(--bg);border:1px solid var(--border);border-radius:20px;white-space:nowrap} .acc-body{padding:14px 16px;display:grid;grid-template-columns:1fr 1fr;gap:9px} .acc-arrow{display:inline-flex;transition:transform .2s;color:var(--hint);flex-shrink:0} .acc-row.open .acc-arrow{transform:rotate(180deg)} .acc-row:not(.open) .acc-body{display:none} .acc-item{background:var(--bg);border:1px solid var(--border);border-radius:var(--r);padding:11px 13px} .acc-item-name{font-size:13px;font-weight:700;margin-bottom:2px;display:flex;align-items:center;gap:6px;flex-wrap:wrap} .acc-item-sub{font-size:12px;color:var(--muted)} .acc-item-val{font-size:12px;color:var(--gold);font-weight:650;font-family:var(--mono);margin-top:4px} /* ── Ability / entity grid (démons, alters, grimoires) ────────────────── */ .ent-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:11px} .ent-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--rl);padding:14px 16px;transition:all .15s} .ent-card:hover{border-color:var(--border-md);box-shadow:0 4px 16px rgba(0,0,0,.05);transform:translateY(-2px)} .ent-name{font-size:13.5px;font-weight:800;letter-spacing:-.03em;margin-bottom:4px;display:flex;align-items:center;gap:6px} .ent-type{font-size:11px;font-family:var(--mono);color:var(--muted);margin-bottom:8px} .ent-ability{font-size:12.5px;color:var(--text);line-height:1.5;margin-bottom:8px} .ent-cd{font-size:11px;font-family:var(--mono);color:var(--theme-txt);display:flex;align-items:center;gap:4px} /* ── Games grid ────────────────────────────────────────────────────────── */ .games-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px} .game-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--rl);overflow:hidden;transition:border-color .15s,box-shadow .15s} .game-card:hover{border-color:var(--border-md);box-shadow:0 4px 20px rgba(0,0,0,.06)} .game-header{padding:14px 16px 11px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between} .game-name{font-size:14px;font-weight:800;letter-spacing:-.03em;display:flex;align-items:center;gap:7px} .game-body{padding:13px 16px} .game-cmd{font-family:var(--mono);font-size:11.5px;background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:2px 7px;margin-bottom:9px;display:inline-block;cursor:pointer} .game-cmd:hover{border-color:var(--theme);background:var(--theme-soft)} .game-desc{font-size:13px;color:var(--muted);line-height:1.55;margin-bottom:9px} .game-rule{display:flex;align-items:flex-start;gap:7px;font-size:12.5px;color:var(--text);margin-bottom:5px;line-height:1.4} .game-rule-dot{width:5px;height:5px;border-radius:50%;background:var(--border-md);flex-shrink:0;margin-top:6px} .game-tip{margin-top:9px;background:var(--theme-soft);border-radius:var(--r);padding:8px 11px;font-size:12px;color:var(--theme-txt);display:flex;align-items:flex-start;gap:6px;line-height:1.45} /* ── Lycée / roll grid ─────────────────────────────────────────────────── */ .roll-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:18px} .roll-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--rl);padding:13px 14px;text-align:center} .roll-name{font-size:13px;font-weight:800;margin-bottom:3px} .roll-chance{font-size:11.5px;color:var(--muted);margin-bottom:7px;font-family:var(--mono)} .roll-gain{font-size:14px;font-weight:700;color:var(--theme-txt)} .roll-gain-sub{font-size:11px;color:var(--muted);font-family:var(--mono)} /* ── Reroll simulator ──────────────────────────────────────────────────── */ .reroll-prob-row{display:flex;justify-content:space-between;align-items:center;font-size:13px;padding:6px 8px;border-radius:6px;transition:background .12s} .reroll-prob-row .bar-bg{flex:1;height:5px;background:var(--border);border-radius:3px;margin:0 10px;overflow:hidden} .reroll-prob-row .bar-fill{height:100%;border-radius:3px} .reroll-btn{margin-top:12px;width:100%;padding:10px;background:var(--theme-soft);border:1px solid var(--theme);color:var(--theme-txt);border-radius:var(--r);font-size:13px;font-weight:650;cursor:pointer;transition:all .14s;font-family:var(--font)} .reroll-btn:hover{background:var(--theme);color:#fff} .reroll-result{margin-top:9px;font-size:12.5px;font-weight:650;text-align:center;min-height:22px;font-family:var(--mono)} /* ── Relationship / flow map (Black Clover grimoires) ─────────────────── */ .flow-map{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;padding:22px;background:var(--surface);border:1px solid var(--border);border-radius:var(--rxl);margin-bottom:18px} .flow-node{background:var(--bg);border:1px solid var(--border);border-radius:var(--r);padding:10px 14px;font-size:12.5px;font-weight:650;text-align:center;min-width:110px} .flow-node.theme{background:var(--theme-soft);border-color:var(--theme);color:var(--theme-txt)} .flow-arrow{color:var(--hint);font-size:15px} /* ── FAQ accordion ─────────────────────────────────────────────────────── */ .faq{display:flex;flex-direction:column;gap:8px} .faq-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden} .faq-q{padding:13px 15px;font-size:13.5px;font-weight:650;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:10px} .faq-q:hover{background:var(--bg)} .faq-a{padding:0 15px;font-size:13px;color:var(--muted);line-height:1.6;max-height:0;overflow:hidden;transition:all .2s} .faq-item.open .faq-a{padding:0 15px 15px;max-height:400px} .faq-item.open .faq-arrow{transform:rotate(180deg)} .faq-arrow{transition:transform .2s;flex-shrink:0;color:var(--hint)} /* ── Cross-link cards (vers les pages licences) ───────────────────────── */ .link-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .link-card{ display:block;text-decoration:none;color:var(--text); background:var(--surface);border:1px solid var(--border);border-radius:var(--rxl); padding:20px;transition:all .18s;position:relative;overflow:hidden; } .link-card:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(0,0,0,.08)} .link-card-glow{position:absolute;top:-40px;right:-40px;width:120px;height:120px;border-radius:50%;filter:blur(30px);opacity:.5} .link-card-tag{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px;display:inline-block} .link-card-title{font-size:17px;font-weight:850;letter-spacing:-.03em;margin-bottom:6px} .link-card-desc{font-size:12.5px;color:var(--muted);line-height:1.55;margin-bottom:14px} .link-card-cta{font-size:12.5px;font-weight:700;display:flex;align-items:center;gap:5px} /* ── Command palette (recherche globale) ──────────────────────────────── */ .palette-btn{ display:flex;align-items:center;gap:10px;width:100%; background:var(--surface);border:1px solid var(--border);border-radius:var(--rl); padding:12px 16px;cursor:pointer;font-family:var(--font);font-size:13.5px;color:var(--hint); margin-bottom:24px;transition:border-color .14s; } .palette-btn:hover{border-color:var(--border-md)} .palette-btn kbd{margin-left:auto;font-family:var(--mono);font-size:10.5px;background:var(--bg);border:1px solid var(--border);border-radius:5px;padding:2px 7px;color:var(--muted)} .palette-overlay{position:fixed;inset:0;background:rgba(20,18,15,.55);z-index:500;display:none;align-items:flex-start;justify-content:center;padding-top:12vh;backdrop-filter:blur(2px)} .palette-overlay.open{display:flex} .palette-box{width:min(560px,90vw);background:var(--surface);border-radius:var(--rxl);overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.3)} .palette-input{width:100%;border:none;outline:none;padding:16px 18px;font-size:15px;font-family:var(--font);border-bottom:1px solid var(--border);background:transparent;color:var(--text)} .palette-results{max-height:50vh;overflow-y:auto;padding:6px} .palette-result{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r);cursor:pointer} .palette-result:hover,.palette-result.sel{background:var(--bg)} .palette-result-cmd{font-family:var(--mono);font-size:12px;font-weight:700;background:var(--bg);border:1px solid var(--border);border-radius:5px;padding:2px 7px;flex-shrink:0} .palette-result-desc{font-size:12.5px;color:var(--muted);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .palette-empty{padding:24px;text-align:center;font-size:13px;color:var(--hint)} /* ── Footer ────────────────────────────────────────────────────────────── */ footer{border-top:1px solid var(--border);padding:24px 22px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;max-width:1040px;margin:0 auto} .foot-txt{font-size:12px;color:var(--hint);font-family:var(--mono)} .foot-links{display:flex;gap:18px;flex-wrap:wrap} .foot-links a{font-size:12.5px;color:var(--hint);text-decoration:none;font-weight:600} .foot-links a:hover{color:var(--text)} body[data-theme="clover"]{--theme:#B07D2A;--theme-soft:#FBF3E2;--theme-txt:#8A5F1C;--theme-line:#E8D5A3} body[data-theme="chainsaw"]{--theme:#B8321F;--theme-soft:#FCECEA;--theme-txt:#8E2314;--theme-line:#F0B3A8} body[data-theme="hero"]{--theme:#2840C8;--theme-soft:#EEF1FE;--theme-txt:#1E30A0;--theme-line:#C5D0FA} .icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0} @keyframes fadein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .page{animation:fadein .4s ease both} /* ── Responsive ────────────────────────────────────────────────────────── */ @media(max-width:820px){ .grid-2,.grid-3,.games-grid,.risk-board,.link-grid{grid-template-columns:1fr} .ent-grid{grid-template-columns:1fr 1fr} .roll-grid{grid-template-columns:1fr 1fr} .sim-results{grid-template-columns:1fr} .hero h1{font-size:29px} .acc-body{grid-template-columns:1fr} } @media(max-width:600px){ .nav-crumb{display:none} .nav-link span.txt{display:none} .hero{padding:48px 16px 34px} .page{padding:0 16px 70px} .ent-grid,.roll-grid{grid-template-columns:1fr} .flow-map{padding:16px 10px;gap:6px} .flow-node{min-width:88px;font-size:11px;padding:8px 10px} }