/* 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;
  --emerald:#2A7A66;--emerald-2:#1B856A;--gold:#C1A57E;--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,var(--emerald),var(--emerald-2));border-color:transparent;color:#fff;box-shadow:0 6px 16px #000a}
.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 #C2DDD9;
  background:linear-gradient(180deg,var(--emerald-2),var(--emerald));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:#2A7A66;--pr2:#1B856A}
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}
nav.mn a{color:var(--hx-text);padding:8px 12px;border-radius:8px;font-weight:600;display:inline-block}
nav.mn a:hover{background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01))}
nav.mn a.active{background:linear-gradient(180deg,var(--emerald-2),var(--emerald));box-shadow:0 8px 28px rgba(26,97,84,0.12)}

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:hover > ul, 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}

@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}