/* style.css — Thème WoW 3.3.5 (v3 propre, centré partout) ------------------------------------------------------------------ Objectif : tout est NET et CENTRÉ, avec un look World of Warcraft. S'utilise avec tes classes habituelles : .site-header .nav .container .card .grid .btn .badge .table Bonus : utilitaires .full / .wide / .narrow / .center et .section pour composer les pages. */ /* ===================== Variables ===================== */ :root{ --maxw: 1160px; /* largeur max du contenu */ --space: 16px; /* gouttière */ /* Couleurs */ --bg: #0b0f14; /* fond nuit */ --bg-2: #11161f; /* panneaux */ --ink: #eae4d7; /* texte principal */ --muted: #cfc8b8; /* texte secondaire */ --line: #273142; /* traits */ --gold: #d7a43a; /* or */ --gold-2: #f3d08a; /* or clair */ --blue: #7bb6ff; /* accent */ --green: #3dbb79; /* OK */ --red: #d25b5b; /* erreur */ --menu-hover:#1b202a; /* survol menus */ --menu-border:#303a4c; /* bord menus */ --radius: 14px; --shadow: 0 14px 30px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05); --ring: 0 0 0 2px rgba(215,164,58,.25), 0 0 0 4px rgba(215,164,58,.12); } /* ===================== Base & reset ===================== */ *{box-sizing:border-box} html,body{height:100%} html{scroll-behavior:smooth} body{ margin:0; color:var(--ink); font:16px/1.5 "Verdana","Segoe UI",system-ui,-apple-system,sans-serif; background: radial-gradient(1100px 800px at 70% -10%, rgba(123,182,255,.15), transparent 60%), radial-gradient(900px 600px at 0% 100%, rgba(215,164,58,.08), transparent 55%), linear-gradient(180deg,#070b10,#0b0f14 40%, #0b0f14); } img{max-width:100%;height:auto;display:block} a{color:var(--blue);text-decoration:none} a:hover{text-decoration:underline} /* ===================== Layout centré ===================== */ .container{max-width:var(--maxw); margin:24px auto; padding:0 var(--space)} .section{max-width:var(--maxw); margin:24px auto; padding:0 var(--space)} .center-wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--space)} .site-header{position:sticky; top:0; z-index:50; backdrop-filter:saturate(120%) blur(6px); background:linear-gradient(180deg, rgba(0,0,0,.8), rgba(0,0,0,.55)); border-bottom:1px solid var(--line); box-shadow:0 6px 12px rgba(0,0,0,.35)} .site-header .inner{max-width:var(--maxw); margin:0 auto; padding:10px var(--space); display:flex; align-items:center; justify-content:space-between; gap:12px} .logo{display:flex; align-items:center; gap:10px} .logo .title{font-family:Georgia,serif; font-weight:800; letter-spacing:.4px; color:var(--gold); text-shadow:0 1px 0 #000, 0 0 8px rgba(243,208,138,.3)} .nav{display:flex; gap:12px; flex-wrap:wrap; justify-content:center; padding:6px; border-radius:12px; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid var(--menu-border)} .nav a{position:relative; display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:12px; color:var(--ink); border:1px solid transparent; opacity:.96; text-decoration:none; letter-spacing:.2px; background:rgba(255,255,255,.03); transition:background .18s ease, border-color .18s ease, box-shadow .18s ease, filter .18s ease, transform .12s ease} .nav a::after{content:""; position:absolute; left:10px; right:10px; bottom:6px; height:2px; border-radius:2px; opacity:.85; background:linear-gradient(90deg, transparent, var(--gold), transparent); transform:scaleX(0); transform-origin:center; transition:transform .18s ease} .nav a .ico{width:18px; height:18px; opacity:.9} .nav .sep{width:1px; height:28px; align-self:center; background:linear-gradient(180deg, transparent, var(--menu-border), transparent); margin:0 2px} .nav a:hover{background:var(--menu-hover); border-color:var(--menu-border); filter:saturate(110%); box-shadow:0 8px 18px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06); transform:translateY(-1px)} .nav a:hover::after{transform:scaleX(1)} .nav a:focus-visible{outline:none; box-shadow:0 0 0 2px rgba(255,255,255,.08), 0 0 0 4px rgba(215,164,58,.2); background:var(--menu-hover); border-color:var(--menu-border)} .nav a:focus-visible::after{transform:scaleX(1)} .nav a.active, .nav a[aria-current="page"], .nav a[aria-current="true"]{background:var(--menu-hover); border-color:rgba(215,164,58,.35); box-shadow:inset 0 0 0 1px rgba(215,164,58,.15), 0 8px 18px rgba(0,0,0,.25)} .nav a.active::after, .nav a[aria-current="page"]::after, .nav a[aria-current="true"]::after{transform:scaleX(1)} .site-footer{margin-top:36px; padding:24px 0; color:var(--muted); border-top:1px solid var(--line); background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.6))} .site-footer .inner{max-width:var(--maxw); margin:0 auto; padding:0 var(--space)} /* Mini dropdown pour menus (facultatif) */ .nav .dropdown{position:relative} .nav .dropdown > a::before{content:"▾"; font-size:.8em; opacity:.8; margin-left:2px} .nav .dropdown-menu{position:absolute; top:100%; left:0; min-width:200px; padding:6px; margin-top:8px; border-radius:12px; border:1px solid var(--menu-border); background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03)); box-shadow:0 14px 30px rgba(0,0,0,.45); display:none} .nav .dropdown:hover .dropdown-menu{display:block} .nav .dropdown-menu a{display:block; padding:10px 12px; border-radius:10px; color:var(--ink); background:transparent} .nav .dropdown-menu a:hover{background:var(--menu-hover)} $1 .wow-title{position:relative; display:inline-block; padding:6px 12px 8px; font-weight:900; letter-spacing:.5px; color:var(--gold-2); text-shadow:0 1px 0 #000, 0 0 10px rgba(243,208,138,.28)} .wow-title::before,.wow-title::after{content:""; position:absolute; height:2px; width:36px; top:50%; transform:translateY(-50%); background:linear-gradient(90deg, transparent, var(--gold), transparent)} .wow-title::before{left:-46px} .wow-title::after{right:-46px} /* ===================== Cartes ===================== */ .card{width:100%; margin:14px auto; padding:16px; border-radius:var(--radius); background: radial-gradient(140% 60% at 50% -20%, rgba(255,255,255,.06), rgba(255,255,255,0) 60%), linear-gradient(180deg, var(--bg-2), #0e141d); border:1px solid var(--line); box-shadow:var(--shadow)} .card h2,.card h3{margin:0 0 8px} /* Largeurs rapides (toujours centrées) */ .full{max-width:var(--maxw)} .wide{max-width:980px} .narrow{max-width:720px} .center{margin-left:auto; margin-right:auto} /* ===================== Grilles (centrées) ===================== */ .grid{display:grid; gap:16px; justify-content:center} .grid > .card{max-width:380px; width:100%; margin-left:auto; margin-right:auto} @media (min-width:640px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (min-width:1000px){.grid{grid-template-columns:repeat(3,minmax(0,1fr)); justify-content:center}} /* Étendre une carte sur plusieurs colonnes si besoin */ @media (min-width:1000px){ .span-2{grid-column:span 2} .span-3{grid-column:1 / -1} } /* ===================== Boutons ===================== */ .btn{appearance:none; border:0; cursor:pointer; user-select:none; display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:12px; font-weight:800; letter-spacing:.2px; color:#1a1207; text-shadow:0 1px 0 rgba(255,255,255,.35); background: radial-gradient(80% 120% at 50% 10%, rgba(255,255,255,.35), transparent 60%), linear-gradient(180deg, #f6e0a6, var(--gold) 60%, #b9862b); box-shadow:0 2px 0 #7a5a1c, 0 10px 18px rgba(0,0,0,.35); transition:transform .07s ease, filter .15s ease, box-shadow .15s ease} .btn:hover{filter:saturate(110%) brightness(1.03)} .btn:active{transform:translateY(1px)} .btn[disabled]{opacity:.55; cursor:not-allowed; filter:grayscale(25%)} .btn.ghost{background:transparent; color:var(--ink); border:1px solid rgba(255,255,255,.15); text-shadow:none} .btn.danger{background:linear-gradient(180deg,#ffc6c6,#d76868 70%, #a73e3e); box-shadow:0 2px 0 #7a2d2d, 0 10px 18px rgba(0,0,0,.35)} .btn.blue{background:linear-gradient(180deg,#cfe8ff,#7bb6ff 60%, #3c78c2); color:#0f1b2e; text-shadow:0 1px 0 rgba(255,255,255,.4)} /* ===================== Badges & pill ===================== */ .badge{display:inline-block; padding:4px 10px; border-radius:999px; font-size:.85rem; font-weight:800; background:rgba(215,164,58,.18); color:var(--gold-2); border:1px solid rgba(215,164,58,.35)} .badge.ok{background:rgba(61,179,112,.15); border-color:rgba(61,179,112,.35); color:#c7f6df} .badge.alert{background:rgba(210,91,91,.18); border-color:rgba(210,91,91,.35); color:#ffd6d6} .pill{display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.03)} /* ===================== Tableaux (Joueurs en ligne & co) ===================== */ .table-wrap{width:100%;} .table{width:100%; border-collapse:separate; border-spacing:0 8px} .table th,.table td{padding:12px 14px} .table thead th{color:var(--muted); font-weight:800; text-transform:uppercase; letter-spacing:.4px} .table tbody tr{background:linear-gradient(180deg, #182230, #131b27); border:1px solid var(--line)} .table tbody tr td:first-child{border-top-left-radius:10px;border-bottom-left-radius:10px} .table tbody tr td:last-child{border-top-right-radius:10px;border-bottom-right-radius:10px} .table tfoot th{color:var(--ink)} /* Faire un card/table plus large très facilement */ .card.table-card{max-width:980px} .card.full{max-width:var(--maxw)} /* ===================== Formulaires ===================== */ label{display:block; margin:6px 0 4px; color:var(--muted)} input[type=text],input[type=password],input[type=email],input[type=number],select,textarea{ width:100%; padding:10px 12px; color:var(--ink); background:#0f151f; border:1px solid var(--line); border-radius:10px; outline:none; box-shadow: inset 0 1px 0 rgba(255,255,255,.05) } input:focus,select:focus,textarea:focus{box-shadow:var(--ring); border-color:rgba(215,164,58,.55)} .help{font-size:.9em; color:var(--muted)} /* ===================== Statut serveur ===================== */ .status{display:inline-flex; align-items:center; gap:10px} .dot{width:10px; height:10px; border-radius:999px; background:#666; box-shadow:0 0 10px currentColor} .status-up .dot{background:var(--green)} .status-down .dot{background:var(--red)} /* ===================== Alertes ===================== */ .alert{padding:12px 14px; border-radius:12px; margin:12px 0; border:1px solid var(--line); background:linear-gradient(180deg,#151c27,#111722)} .alert.info{border-color:#2a4366; background:#0f1722} .alert.good{border-color:#265a3a; background:#0d1913} .alert.bad{border-color:#5a2626; background:#190d0d} /* ===================== Utilitaires ===================== */ .m-0{margin:0}.mt-1{margin-top:6px}.mt-2{margin-top:12px}.mt-3{margin-top:18px}.mt-4{margin-top:24px} .mb-1{margin-bottom:6px}.mb-2{margin-bottom:12px}.mb-3{margin-bottom:18px}.mb-4{margin-bottom:24px} .flex{display:flex; gap:10px}.centered{justify-content:center; align-items:center} .right{justify-content:flex-end}.between{justify-content:space-between} .text-center{text-align:center}.small{font-size:.9em; color:var(--muted)} /* ===================== Scrollbar (WebKit) ===================== */ ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#2a3140,#1e2633);border-radius:10px;border:2px solid var(--bg)} ::-webkit-scrollbar-track{background:var(--bg)} /* ===================== COMPAT: header.php actuel (header.top / .wrap / nav) ===================== */ /* Centrer les conteneurs .wrap présents dans ton HTML */ .wrap{max-width:var(--maxw); margin:24px auto; padding:0 var(--space)} /* Header existant */ header.top{position:sticky; top:0; z-index:60; backdrop-filter:saturate(120%) blur(6px); background:linear-gradient(180deg, rgba(0,0,0,.82), rgba(0,0,0,.55)); border-bottom:1px solid var(--line); box-shadow:0 6px 12px rgba(0,0,0,.35)} header.top > .wrap{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px var(--space)} a.brand{font-family:Georgia,serif; font-weight:800; letter-spacing:.4px; color:var(--gold); font-size:1.2rem} a.brand:hover{text-decoration:none; filter:saturate(115%)} /* Appliquer le style de .nav au