/* ============================================================ base.css — reset, en-tête et pied de page communs L'en-tête est injecté par site.js et se thème selon l'attribut data-section porté par . ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; } img { max-width: 100%; } /* Les cartes filtrées portent [hidden] ; sans !important, le display:flex ou display:grid de la carte l'emporterait sur le display:none de l'UA. */ [hidden] { display: none !important; } /* Réservé aux lecteurs d'écran */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Lien d'évitement : premier élément focusable de chaque page */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; padding: 12px 18px; font: 700 14px/1 'Inter', system-ui, sans-serif; background: #f0b232; color: #111; text-decoration: none; } .skip-link:focus { left: 8px; top: 8px; } :focus-visible { outline: 2px solid #f0b232; outline-offset: 2px; } /* ====== EN-TÊTE DE NAVIGATION ====== */ .site-header { position: sticky; top: 0; z-index: 500; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; padding: 12px 24px; font-family: 'Inter', system-ui, sans-serif; } .site-brand { display: flex; align-items: baseline; gap: 10px; text-decoration: none; font-weight: 800; font-size: 14px; letter-spacing: 2px; text-transform: uppercase; white-space: nowrap; } .site-brand .brand-sub { font-size: 11px; font-weight: 600; letter-spacing: 1px; opacity: 0.7; } .site-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-right: auto; } .site-nav a { padding: 7px 12px; border-radius: 5px; font-size: 13px; font-weight: 600; text-decoration: none; transition: background 0.2s, color 0.2s; } /* Bascule vers l'autre section du site */ .site-switch { padding: 7px 14px; border-radius: 5px; font-size: 12px; font-weight: 700; text-decoration: none; white-space: nowrap; border: 1px solid transparent; transition: background 0.2s, color 0.2s, border-color 0.2s; } /* ====== PIED DE PAGE ====== */ .site-footer { margin-top: auto; padding: 28px 24px; font-family: 'Inter', system-ui, sans-serif; font-size: 12px; line-height: 1.7; text-align: center; } .site-footer a { font-weight: 600; text-decoration: none; } .site-footer a:hover { text-decoration: underline; } /* ====== THÈME « RÈGLEMENT » (sombre, Discord) ====== */ body[data-section='reglement'] .site-header, body[data-section='portail'] .site-header { background: #1e1f22; border-bottom: 1px solid rgba(0, 0, 0, 0.4); color: #dbdee1; } body[data-section='reglement'] .site-brand, body[data-section='portail'] .site-brand { color: #fff; } body[data-section='reglement'] .site-nav a, body[data-section='portail'] .site-nav a { color: #949ba4; background: rgba(255, 255, 255, 0.04); } body[data-section='reglement'] .site-nav a:hover, body[data-section='portail'] .site-nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.09); } body[data-section='reglement'] .site-nav a[aria-current='page'], body[data-section='portail'] .site-nav a[aria-current='page'] { color: #fff; background: rgba(242, 63, 66, 0.25); } body[data-section='reglement'] .site-switch, body[data-section='portail'] .site-switch { color: #a0faff; border-color: rgba(52, 249, 255, 0.35); background: rgba(52, 249, 255, 0.08); } body[data-section='reglement'] .site-switch:hover, body[data-section='portail'] .site-switch:hover { background: rgba(52, 249, 255, 0.18); color: #fff; } body[data-section='reglement'] .site-footer, body[data-section='portail'] .site-footer { background: #1e1f22; color: #6b7079; border-top: 1px solid rgba(255, 255, 255, 0.05); } body[data-section='reglement'] .site-footer a, body[data-section='portail'] .site-footer a { color: #949cf7; } /* ====== THÈME « STAFF » (Discord, accent cyan admin) ====== */ body[data-section='staff'] .site-header { background: #1e1f22; border-bottom: 1px solid rgba(0, 212, 255, 0.25); color: #dbdee1; } body[data-section='staff'] .site-brand { color: #fff; } body[data-section='staff'] .site-nav a { color: #949ba4; background: rgba(255, 255, 255, 0.04); } body[data-section='staff'] .site-nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.09); } body[data-section='staff'] .site-nav a[aria-current='page'] { color: #fff; background: rgba(0, 212, 255, 0.22); } body[data-section='staff'] .site-switch { color: #7fe4ff; border-color: rgba(0, 212, 255, 0.35); background: rgba(0, 212, 255, 0.08); } body[data-section='staff'] .site-switch:hover { background: rgba(0, 212, 255, 0.2); color: #fff; } body[data-section='staff'] .site-footer { background: #1e1f22; color: #6b7079; border-top: 1px solid rgba(255, 255, 255, 0.05); } body[data-section='staff'] .site-footer a { color: #7fe4ff; } /* ====== THÈME « LORE » (dossier papier) ====== */ body[data-section='lore'] .site-header { background: #1a1a1a; border-bottom: 3px solid #f9a825; color: #ddd; } body[data-section='lore'] .site-brand { color: #fff; font-family: 'Special Elite', 'Inconsolata', monospace; letter-spacing: 3px; } body[data-section='lore'] .site-nav a { font-family: 'Inconsolata', monospace; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #bbb; background: rgba(255, 255, 255, 0.06); border-radius: 2px; } body[data-section='lore'] .site-nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.14); } body[data-section='lore'] .site-nav a[aria-current='page'] { color: #1a1a1a; background: #f9a825; } body[data-section='lore'] .site-switch { font-family: 'Inconsolata', monospace; text-transform: uppercase; border-radius: 2px; color: #ff9b9b; border-color: rgba(198, 40, 40, 0.6); background: rgba(198, 40, 40, 0.15); } body[data-section='lore'] .site-switch:hover { background: #c62828; color: #fff; } body[data-section='lore'] .site-footer { background: #1a1a1a; color: #888; border-top: 1px solid rgba(255, 255, 255, 0.08); } body[data-section='lore'] .site-footer a { color: #f9a825; } @media (max-width: 700px) { .site-header { padding: 10px 14px; } .site-nav a { font-size: 12px; padding: 6px 10px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } }