/* Combined main stylesheet for HEXEKTA (migrated from inline styles in index.php and admin.php) */
:root{
  --hx-bg:#0A1013;--hx-text:#E9EEF0;--border:#6d6f6a55;--surface:#ffffff0E;
  /* Logo-derived palette */
  --logo-dark:#071018;--logo-cyan:#25C6C9;--logo-cyan-2:#1BA9AA;--logo-cyan-3:#8FF6F7;--logo-gold:#C1A57E;
  /* compatibility aliases */
  --emerald:var(--logo-cyan);--emerald-2:var(--logo-cyan-2);--gold:var(--logo-gold);
  --star:#D6DADE;--shadow:0 10px 30px #0008;
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;color:var(--hx-text);background:var(--hx-bg);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu}
a{text-decoration:none;color:inherit}

.hd{padding:24px 20px;border-bottom:1px solid var(--border)}
.mn{display:flex;gap:8px;flex-wrap:wrap;padding:10px 20px;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10;background:#0a1013d9;backdrop-filter:blur(4px)}
.mn a{padding:8px 12px;border:1px solid var(--border);border-radius:999px;background:var(--surface)}
.mn a.active{
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  color: var(--hx-text);
  border: 1px solid var(--logo-cyan-2);
  box-shadow: none;
  font-weight: 600;
  outline: 2px solid rgba(37,198,201,0.10);
  outline-offset: 2px;
}
.ct{padding:24px 20px;max-width:1200px;margin:0 auto;min-height:60vh}
.ft{padding:24px 20px;border-top:1px solid var(--border);color:#c9d2cf88}

/* CARD composant */
.card{display:grid;width:100%;margin:0 0 16px;border-radius:18px;border:1px solid var(--border);
  background:linear-gradient(180deg,#ffffff14,#ffffff08);box-shadow:var(--shadow);break-inside:avoid;overflow:hidden}
.card h3{margin:0;padding:14px 14px 0}
.card p{margin:0;padding:10px 14px 14px;color:#dfe7e3cc}
.tag{display:inline-block;margin:12px 14px 0;padding:4px 8px;border-radius:999px;border:1px solid rgba(37,198,201,0.12);
  background:linear-gradient(180deg,var(--logo-cyan-2),var(--logo-cyan));color:#eafff7;font-size:.75rem;letter-spacing:.06em}
.card.gold .tag{border-color:#D0BC9E;background:linear-gradient(180deg,var(--gold),#AD8D65);color:#221}

/* Layouts */
.cards-layout.masonry{column-width:300px;column-gap:16px}
.cards-layout.magazine{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.cards-layout.carousel{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px}
.cards-layout.carousel .card{flex:0 0 320px;scroll-snap-align:start}
@media (max-width:640px){.cards-layout.masonry{column-width:220px}}

/* Toggle visible/hidden par route */
section{display:none}
section.active{display:block}

/* Admin styles (migrated) */
:root{--bg:#0A1013;--tx:#E9EEF0;--bd:#6d6f6a55;--pr:var(--logo-cyan);--pr2:var(--logo-cyan-2)}
input,select,textarea{width:100%;padding:8px;border:1px solid var(--bd);border-radius:10px;background:#0f1619;color:var(--tx)}
label{font-size:.9rem;opacity:.9}
.row{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
.col-6{grid-column:span 6} .col-4{grid-column:span 4} .col-3{grid-column:span 3} .col-12{grid-column:span 12}
.btn{display:inline-block;padding:8px 12px;border-radius:999px;border:1px solid var(--bd);background:#ffffff12;color:var(--tx);text-decoration:none}
.btn.primary{background:linear-gradient(180deg,var(--pr),var(--pr2));border-color:transparent}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:900px){.grid{grid-template-columns:1fr}}
table{width:100%;border-collapse:collapse;font-size:.95rem}
th,td{border-top:1px solid var(--bd);padding:8px 6px;vertical-align:top}
th{opacity:.8;text-align:left}
.small{font-size:.85rem;opacity:.8}

/* Utility */
.wrap{max-width:1200px;margin:0 auto;padding:20px}
.card-component{border:1px solid var(--bd);border-radius:14px;background:#ffffff0e;padding:16px;margin:0 0 16px}

/* Header grid: left text, right logo */
.hd{display:grid;grid-template-columns:1fr auto;align-items:start;gap:12px}
.hd-right img{width: 140px;border: solid 1px #0f4356b5;height:auto;display:block}
@media(max-width:640px){.hd{grid-template-columns:1fr;}.hd-right{justify-self:end}.hd-right img{width:48px}}

/* Submenu / dropdown styles (from index_new.html) */
nav.mn ul{margin:0;padding:0;display:flex;gap:8px;align-items:center}
/* top-level nav links (compact) */
nav.mn a{
  color:var(--hx-text);
  padding:8px 12px;
  border-radius:10px;
  font-weight:600;
  display:inline-block;
  background:transparent;
  border:1px solid transparent;
  transition:background .14s ease, color .14s ease, box-shadow .14s ease;
}
nav.mn a:hover{
  background:rgba(255,255,255,0.02);
  border-color:var(--border);
}
nav.mn a.active{
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  color: var(--hx-text);
  border: 1px solid var(--logo-cyan-2);
  box-shadow: none;
  font-weight: 600;
  outline: 2px solid rgba(37,198,201,0.10);
  outline-offset: 2px;
}

/* Accessible navigation (site nav with list) */
.mn#site-nav{background:transparent}
.mn#site-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:8px;align-items:center}
.mn#site-nav li{margin:0}
.mn#site-nav a{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;color:var(--hx-text);background:transparent;border:1px solid transparent;text-decoration:none;transition:background .14s ease,color .14s ease}
.mn#site-nav a:hover{background:rgba(255,255,255,0.03);color:var(--hx-text);border-color:var(--border)}

/* Active state (server-side via aria-current or .active) */
.mn#site-nav a[aria-current="page"], .mn#site-nav a.active{
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  color: var(--hx-text);
  font-weight:600;
  border: 1px solid var(--logo-cyan-2);
  box-shadow: none;
  outline: 2px solid rgba(37,198,201,0.10);
  outline-offset: 2px;
}

/* High-visibility focus for keyboard users */
.mn#site-nav a:focus-visible{outline:3px solid rgba(37,198,201,0.18);outline-offset:2px}

/* Ensure contrast for small screens */
@media(max-width:640px){
  .mn#site-nav ul{flex-wrap:wrap}
  .mn#site-nav a{padding:8px 10px}
}

/* Skip link for keyboard users */
.skip-link{position:absolute;left:-999px;top:1rem;padding:0.75rem 1.2rem;border-radius:6px;border:1px solid var(--bd);background:rgba(5,12,20,0.92);color:var(--tx);z-index:2000}
.skip-link:focus{left:1rem;box-shadow:0 6px 18px rgba(0,0,0,0.6)}

.mn#site-nav a:focus{outline:3px solid rgba(37,198,201,0.12);outline-offset:2px}

li.has-subnav{position:relative}
li.has-subnav > ul{position:absolute;left:0;top:42px;background:rgba(10,16,19,0.98);border:1px solid rgba(255,255,255,0.03);padding:6px;border-radius:8px;display:flex;flex-direction:column;gap:6px;min-width:140px;box-shadow:0 8px 30px rgba(0,0,0,0.5);opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .18s ease,transform .18s ease}
li.has-subnav:focus-within > ul, li.has-subnav.open > ul{opacity:1;transform:none;pointer-events:auto}
li.has-subnav > ul a{padding:8px 10px;border-radius:6px;white-space:nowrap}

/* Submenu using ordered lists (Codex: Artifacts, Lore, Legend) */
li.has-subnav > ol{position:absolute;left:0;top:42px;background:rgba(10,16,19,0.98);border:1px solid rgba(255,255,255,0.03);padding:8px;border-radius:8px;display:flex;flex-direction:column;gap:6px;min-width:180px;box-shadow:0 8px 30px rgba(0,0,0,0.5);opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .18s ease,transform .18s ease}
li.has-subnav:focus-within > ol, li.has-subnav.open > ol{opacity:1;transform:none;pointer-events:auto}
li.has-subnav > ol li{list-style:decimal;margin:0;padding:0}
li.has-subnav > ol a{padding:8px 10px;border-radius:6px;white-space:nowrap;display:block}

/* Submenu hover / active — sober neon borders, no heavy backgrounds */
li.has-subnav > ol a:hover{background:rgba(255,255,255,0.02);border-color:rgba(27,169,170,0.25)}
li.has-subnav > ol a[aria-current="page"], li.has-subnav > ol a.active{
  background:transparent;
  color:var(--hx-text);
  font-weight:600;
  border-left:4px solid var(--logo-cyan-2);
  padding-left:10px;
}

/* Reveal submenu on hover for devices that support hover; keep focus/open behavior for touch */
@media (hover: hover) and (pointer: fine) {
  li.has-subnav > ul,
  li.has-subnav > ol {
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
  }

  li.has-subnav.smn:hover > ul,
  li.has-subnav.smn:hover > ol {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}

@media (max-width:980px){nav.mn{padding:10px 12px} nav.mn ul{flex-wrap:wrap} li.has-subnav > ul{position:static;transform:none;opacity:1;pointer-events:auto;margin-top:8px}}

/* page visibility helper for legacy SPA pages */
.page{transition:opacity .38s ease,transform .38s ease;opacity:0;transform:translateY(-6px);max-height:0;overflow:hidden}
.page.visible{opacity:1;transform:none;max-height:2000px;visibility:visible}
.page.hidden{opacity:0;transform:translateY(-6px);max-height:0;visibility:hidden}

/* Modal for admin edit */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.6);display:none;align-items:center;justify-content:center;z-index:1000}
.modal-backdrop.open{display:flex}
.modal{background:#0b1213;padding:18px;border-radius:12px;border:1px solid rgba(255,255,255,0.04);width:min(920px,96%);max-height:90vh;overflow:auto}
.modal .modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.modal .modal-body{margin-bottom:12px}
.modal .modal-actions{text-align:right}
.modal .close-btn{background:transparent;border:1px solid var(--bd);padding:6px 10px;border-radius:8px;color:var(--tx)}

.small-muted{font-size:.85rem;opacity:.8}