/* ============================================================
   SILICON OASIS ACADEMY — site.css
   Academic layer on top of lambda-style main.css tokens.
   ============================================================ */

:root {
  --pad-section: 96px;
  --line: rgba(231, 230, 217, 0.12);
  --line-strong: rgba(231, 230, 217, 0.25);
}

html { scroll-behavior: smooth; }
body {
  background: var(--color-background, #0b0b0b);
  color: var(--color-text-primary, #e7e6d9);
  font-family: var(--font-sans, 'Suisse Intl', sans-serif);
  -webkit-font-smoothing: antialiased;
}
main { padding-top: var(--header-nav-height, 100px); }

a { color: var(--color-text-link, #a186f8); }
img { max-width: 100%; display: block; }

/* ---------- utilities ---------- */
.pixel, .pixel span {
  font-family: var(--font-pixel, 'apkarchivr21', monospace) !important;
  letter-spacing: 0.04em;
}
[data-variant="pixel"] { font-family: var(--font-pixel, 'apkarchivr21', monospace); }

.container {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 24px;
}
.center { text-align: center; margin-inline: auto; }

.eyebrow {
  font-family: var(--font-mono, 'Suisse Intl Mono', monospace);
  font-size: var(--text-sm, 0.875rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-link, #a186f8);
  margin-bottom: 20px;
}
.eyebrow::before { content: "— "; color: var(--color-text-secondary); }

.h1-large {
  font-size: clamp(2.6rem, 6vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  font-weight: 500;
  margin: 0 0 24px;
}
.h2 {
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-weight: 500;
  margin: 0 0 16px;
}
.h4 { font-size: 1.15rem; font-weight: 500; line-height: 1.3; margin: 8px 0; }
.h4 a { color: inherit; text-decoration: none; }
.h4 a:hover { color: var(--color-text-link); }
.h6 {
  font-family: var(--font-mono, monospace);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin: 0 0 12px;
}
.subhead {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--color-text-secondary, #9a988c);
  max-width: 640px;
  margin: 0 0 8px;
}

.sectionLabel {
  border-top: 1px solid var(--line);
  padding: 12px 0 0;
  margin-bottom: 56px;
}
.sectionLabel span {
  font-family: var(--font-mono, monospace);
  font-size: 0.8rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

/* ---------- buttons (fallback if main.css missing) ---------- */
.button {
  display: inline-block;
  font-family: var(--font-mono, monospace);
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  padding: 15px 28px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--color-text-primary, #e7e6d9);
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.button:hover { background: var(--color-ultraviolet, #6c3df5); border-color: var(--color-ultraviolet); color: #fff; transform: translateY(-1px); }
.button--secondary { background: var(--color-ultraviolet, #6c3df5); border-color: var(--color-ultraviolet); color: #fff; }
.button--secondary:hover { background: #5428e6; }
.button--tertiary {
  padding: 8px 2px; border: 0; background: none;
  color: var(--color-text-link); letter-spacing: 0.1em;
}
.button--tertiary::after { content: " →"; }
.button--tertiary:hover { background: none; color: #c7b6ff; transform: none; }
.buttonGroup { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
[data-align="center"] { justify-content: center; }

/* ---------- header ---------- */
.siteHeader {
  position: fixed; inset-inline: 0; top: 0; z-index: 1000;
  height: var(--header-nav-height, 100px);
  background: rgba(11, 11, 11, 0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.siteHeader .siteHeader .mainNav { padding-left: 32px; }
.siteHeader .mainNav > ul { column-gap: 0; }
.siteHeader .mainNav > ul > li > a { padding: 0 30px; }
.siteHeader .mainNav > ul > li > a::before { width: calc(100% - 44px); }
.siteHeader .container { display: flex; align-items: center; height: 100%; }
.headerContentWrapper { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 32px; }
.headerLogo { display: inline-flex; align-items: center; }
.headerLogo img { display: block; height: 36px; width: auto; }

.mainNav ul { display: flex; list-style: none; gap: 4px; margin: 0; padding: 0; align-items: center; }
.mainNav > ul > li { position: relative; }
.mainNav a {
  font-family: var(--font-mono, monospace);
  font-size: 0.86rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: 10px 14px;
  display: inline-block;
  transition: color .15s ease;
}
.mainNav a:hover, .mainNav .is-active a, .mainNav .is-active > a { color: var(--color-text-primary); }

/* dropdown (Formations) */
.dropdownWrapper {
  position: absolute; top: calc(100% + 14px); left: -20px;
  background: #101010;
  border: 1px solid var(--line);
  padding: 28px 32px;
  width: min(860px, calc(100vw - 48px));
  display: none;
  box-shadow: 0 30px 60px rgba(0,0,0,.5);
}
.hasDropdown:hover .dropdownWrapper, .hasDropdown:focus-within .dropdownWrapper { display: block; }
.dropdownWrapper::before {
  content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px;
}
.dropdownColumns { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 24px; list-style: none; margin: 0; padding: 0; }
.dropdownColumnHeading {
  font-family: var(--font-mono, monospace); font-size: 0.72rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-text-link);
  margin-bottom: 10px;
}
.dropdownLinks { list-style: none; margin: 0 0 8px; padding: 0; }
.dropdownLinks a {
  display: block; padding: 6px 0; font-size: 0.82rem;
  letter-spacing: 0.02em; text-transform: none;
  color: var(--color-text-secondary); white-space: normal;
}
.dropdownLinks a:hover { color: var(--color-text-primary); }
.dropdownFooter { margin-top: 10px; }
.dropdownFooter a { font-size: 0.78rem; color: var(--color-text-link); text-decoration: none; }
.dropdownFooter a::after { content: " →"; }

.headerActions { display: flex; align-items: center; gap: 16px; }
.button--header { padding: 12px 20px; font-size: 0.78rem; }
.siteHeader .menuToggle { display: none; }

/* ---------- animated background (data dust + ultraviolet glow) ---------- */
body { background-color: transparent; } /* #0b0b0b reste sur <html> — le canvas passe sous le contenu */
.module-comp { background-color: transparent; } /* laisse voir le fond animé */
#bg-particles {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(231, 230, 217, 0.045) 1px, transparent 1.4px);
  background-size: 26px 26px;
}
main, .footer, .oasisTerminal { position: relative; z-index: 1; }
.siteHeader { z-index: 1000; }

/* ---------- hero ---------- */
.homeHero { position: relative; padding-top: 44px; padding-bottom: 96px; overflow: hidden; }
.heroBg {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1100px 520px at 70% -20%, rgba(102,54,244,0.22), transparent 62%),
    radial-gradient(700px 400px at 15% 10%, rgba(102,54,244,0.10), transparent 60%);
}
.heroContent { position: relative; }
.heroSub { font-size: 1.12rem; line-height: 1.65; color: var(--color-text-secondary); max-width: 620px; margin-bottom: 36px; }

.heroCards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: 56px;
  border: 1px solid var(--line);
  background: var(--line);
}
.heroCard {
  background: #0d0d0d;
  padding: 28px 26px 26px;
  position: relative;
  display: flex; flex-direction: column; gap: 14px;
  min-height: 240px;
  transition: background .2s ease;
}
.heroCard:hover { background: #111017; }
.heroCardNumber {
  position: absolute; top: 20px; right: 22px;
  font-size: 0.8rem; color: var(--color-text-secondary); opacity: .7;
}
.heroCard .h6 { margin-bottom: 0; }
.heroCardCopy { color: var(--color-text-secondary); font-size: .95rem; line-height: 1.6; flex: 1; }
.heroCard .button--tertiary { align-self: flex-start; }

/* ---------- stats ---------- */
.statsBand { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #0d0d0d; }
.stats { gap: 0; }
.stats > .cell { padding: 28px 20px; border-left: 1px solid var(--line); }
.stats > .cell:first-child { border-left: 0; }
.stat { display: flex; flex-direction: column; gap: 6px; }
.statNum { font-size: 2.4rem; line-height: 1; color: var(--color-text-primary); }
.statLabel {
  font-family: var(--font-mono, monospace); font-size: .78rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--color-text-secondary);
}

/* ---------- categories ---------- */
.catGrid { row-gap: 24px; }
.catCell { display: flex; }
.catCard {
  display: flex; flex-direction: column; gap: 12px;
  width: 100%; padding: 28px 26px;
  border: 1px solid var(--line);
  background: #0d0d0d;
  color: inherit; text-decoration: none;
  transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
.catCard:hover { border-color: var(--color-ultraviolet); transform: translateY(-3px); background: #100f16; }
.catCardTop { display: flex; justify-content: space-between; align-items: baseline; }
.catNum { font-size: 1.4rem; color: var(--color-text-link); }
.catCount { font-family: var(--font-mono, monospace); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--color-text-secondary); }
.catCard .h4 { font-size: 1.3rem; margin: 4px 0 0; }
.catDesc { color: var(--color-text-secondary); font-size: .95rem; line-height: 1.6; flex: 1; }

/* ---------- course cards ---------- */
.courseHead { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 40px; flex-wrap: wrap; }
.courseGrid { row-gap: 28px; }
.courseCard {
  border: 1px solid var(--line);
  background: #0d0d0d;
  height: 100%;
  display: flex; flex-direction: column;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.courseCard:hover { border-color: var(--color-ultraviolet); transform: translateY(-3px); box-shadow: 0 18px 40px rgba(0,0,0,.35); }
.courseCover {
  position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: #101014;
}
.courseCover img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.92) contrast(1.02); transition: transform .35s ease; }
.courseCard:hover .courseCover img { transform: scale(1.04); }
.badgeStatus {
  position: absolute; top: 14px; left: 14px;
  background: var(--color-ultraviolet); color: #fff;
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  padding: 6px 10px;
}
.badgeStatusLg { display: inline-block; background: var(--color-ultraviolet); color:#fff; font-size:.72rem; letter-spacing:.16em; padding: 8px 12px; margin-bottom: 20px; }
.courseBody { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.courseMeta { font-family: var(--font-mono, monospace); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--color-text-secondary); display: flex; gap: 8px; }
.courseMeta .dot { color: var(--color-text-link); }
.courseBlurb { color: var(--color-text-secondary); font-size: .93rem; line-height: 1.55; flex: 1; }
.courseFooter { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; }
.courseFact { font-family: var(--font-mono, monospace); font-size: .76rem; color: var(--color-text-secondary); letter-spacing: .08em; }

/* ---------- filter chips ---------- */
.filterBar { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.chip {
  font-family: var(--font-mono, monospace); font-size: .8rem;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 10px 16px; border: 1px solid var(--line-strong);
  color: var(--color-text-secondary); text-decoration: none;
  transition: all .15s ease;
}
.chip:hover { border-color: var(--color-ultraviolet); color: var(--color-text-primary); }
.chip.is-on { background: var(--color-ultraviolet); border-color: var(--color-ultraviolet); color: #fff; }

.pageHero { position: relative; padding-bottom: 56px; overflow: hidden; }
.pageHero .container { position: relative; }

/* ---------- course detail ---------- */
.courseHero { position: relative; }
.courseIntro { margin-top: 40px; }
.courseIntro p { color: var(--color-text-secondary); line-height: 1.7; font-size: 1.02rem; }
.courseInfoBox { border: 1px solid var(--line-strong); background: #0d0d0d; padding: 26px 26px 20px; }
.courseInfoBox dl { display: grid; gap: 14px; margin: 14px 0 0; }
.courseInfoBox dl > div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; align-items: baseline; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.courseInfoBox dt { font-family: var(--font-mono, monospace); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--color-text-secondary); }
.courseInfoBox dd { margin: 0; font-size: .95rem; }
.badgeImg { margin-top: 22px; }
.badgeImg img { max-height: 110px; margin-inline: auto; opacity: .92; }

.learnCell { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--line); }
.learnCell p { margin: 0; color: var(--color-text-secondary); line-height: 1.55; font-size: .96rem; }
.learnMark { color: var(--color-text-link); font-size: 1rem; }
.prereqBox {
  margin-top: 28px; border: 1px solid var(--line); border-left: 3px solid var(--color-ultraviolet);
  background: #0d0d0d; padding: 18px 22px; color: var(--color-text-secondary); line-height: 1.6;
}
.prereqBox .pixel { color: var(--color-text-link); margin-right: 10px; font-size: .78rem; letter-spacing: .18em; }

/* accordion */
.accordion { border-top: 1px solid var(--line); }
.accordionItem { border-bottom: 1px solid var(--line); }
.accordionItemHeader {
  display: flex; align-items: center; gap: 18px;
  padding: 20px 4px; cursor: pointer; list-style: none;
}
.accordionItemHeader::-webkit-details-marker { display: none; }
.accordionIndex { color: var(--color-text-link); font-size: 1rem; }
.accordionTitle { font-size: 1.12rem; font-weight: 500; flex: 1; }
.accordionChevron {
  width: 12px; height: 12px; position: relative; flex: none;
}
.accordionChevron::before, .accordionChevron::after {
  content: ""; position: absolute; background: var(--color-text-secondary);
  top: 50%; left: 0; width: 100%; height: 1px; transition: transform .2s ease, opacity .2s;
}
.accordionChevron::after { transform: rotate(90deg); }
.accordionItem.open .accordionChevron::after { opacity: 0; }
.accordionItemContent { padding: 0 4px 22px 52px; }
.lessonList { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lessonList li { color: var(--color-text-secondary); line-height: 1.5; font-size: .95rem; }
.lessonList .pixel { color: var(--color-text-link); margin-right: 8px; }

.courseCard--sm .courseCover { aspect-ratio: 16 / 8; }

/* ---------- partners ---------- */
.partnersBand { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #0d0d0d; }
.partnersLabel { text-align: center; letter-spacing: .3em; font-size: .74rem; color: var(--color-text-secondary); margin-bottom: 28px; }
.partnerLogos {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 56px; margin-top: 48px;
}
.partnerLogos img { height: 44px; width: auto; opacity: .8; filter: brightness(1.6); transition: opacity .2s ease, transform .2s ease; }
.partnerLogos img:hover { opacity: 1; transform: scale(1.05); }

.ctaBand { text-align: center; }
.ctaBand .subhead { margin-inline: auto; }
.ctaBand .buttonGroup { margin-top: 32px; }

/* ---------- forms ---------- */
.formLayout { display: grid; grid-template-columns: 7fr 4fr; gap: 56px; align-items: start; }
.soaForm { display: grid; gap: 20px; }
.formRow { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.formField { display: flex; flex-direction: column; gap: 8px; }
.formField label {
  font-family: var(--font-mono, monospace); font-size: .72rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--color-text-secondary);
}
.formField input, .formField select, .formField textarea {
  background: #0d0d0d; border: 1px solid var(--line-strong); color: var(--color-text-primary);
  padding: 13px 14px; font-size: .98rem; font-family: var(--font-sans, sans-serif);
  width: 100%; box-sizing: border-box;
  transition: border-color .15s ease;
}
.formField input:focus, .formField select:focus, .formField textarea:focus {
  outline: none; border-color: var(--color-ultraviolet);
}
.formField select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--color-text-secondary) 50%), linear-gradient(135deg, var(--color-text-secondary) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.priceNote { justify-content: flex-end; align-items: center; gap: 8px; border: 1px dashed var(--line-strong); padding: 10px 16px; }
.priceNote .pixel { color: var(--color-text-link); font-size: .72rem; letter-spacing: .18em; }
.priceNote strong { font-size: 1.2rem; letter-spacing: .04em; }
.radioRow { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.radioRow legend { font-family: var(--font-mono, monospace); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--color-text-secondary); margin-bottom: 4px; }
.radioRow { flex-direction: row; flex-wrap: wrap; gap: 12px; }
.radioChip {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid var(--line-strong); padding: 12px 18px; cursor: pointer;
  font-family: var(--font-mono, monospace); font-size: .84rem; letter-spacing: .06em;
  color: var(--color-text-secondary); transition: all .15s ease;
}
.radioChip input { accent-color: var(--color-ultraviolet); }
.radioChip:hover, .radioChip.is-on { border-color: var(--color-ultraviolet); color: var(--color-text-primary); }
.formErrors { border: 1px solid #b3383a; background: rgba(179,56,58,.08); padding: 16px 20px; }
.formErrors .pixel { color: #e26a6c; font-size: .74rem; letter-spacing: .2em; }
.formErrors ul { margin: 8px 0 0; padding-left: 18px; color: var(--color-text-secondary); }
.button--submit { justify-self: start; }
.formAside { display: grid; gap: 20px; }
.asideCard { border: 1px solid var(--line); background: #0d0d0d; padding: 24px; }
.asideCard ol { margin: 12px 0 0; padding-left: 18px; color: var(--color-text-secondary); line-height: 1.8; }
.asideCard .pixel { color: var(--color-text-primary); letter-spacing: .08em; margin: 6px 0; }
.asideCard .button--tertiary { margin-top: 12px; }

.successBox { border: 1px solid var(--color-ultraviolet); background: rgba(102,54,244,.07); padding: 48px 40px; text-align: center; }
.successBox .pixel { color: var(--color-text-link); letter-spacing: .3em; font-size: .78rem; margin-bottom: 14px; }
.successBox p { color: var(--color-text-secondary); line-height: 1.6; }
.successBox strong { color: var(--color-text-primary); }
.successBox .buttonGroup { justify-content: center; }

/* ---------- contact ---------- */
.contactCards { display: grid; gap: 18px; }
.contactCard { border: 1px solid var(--line); background: #0d0d0d; padding: 22px 24px; }
.contactCard p { margin: 6px 0; color: var(--color-text-secondary); line-height: 1.5; }
.contactCard .pixel { letter-spacing: .04em; color: var(--color-text-primary); }
.phoneLink { color: var(--color-text-link); text-decoration: none; font-family: var(--font-mono, monospace); letter-spacing: .04em; }
.phoneLink:hover { text-decoration: underline; }

/* ---------- chat ---------- */
.chatLayout { display: grid; grid-template-columns: 5fr 4fr; gap: 40px; align-items: start; }
.chatWindow { border: 1px solid var(--line-strong); background: #0d0d0d; }
.chatTitle { padding: 14px 20px; border-bottom: 1px solid var(--line); color: var(--color-text-link); font-size: .72rem; letter-spacing: .24em; }
.chatList { max-height: 520px; overflow-y: auto; }
.chatEmpty { padding: 40px 20px; color: var(--color-text-secondary); text-align: center; }
.chatMsg { padding: 16px 20px; border-bottom: 1px solid var(--line); }
.chatMsg:last-child { border-bottom: 0; }
.chatMeta { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 6px; }
.chatName { color: var(--color-text-link); font-size: .78rem; letter-spacing: .1em; }
.chatTime { font-size: .7rem; color: var(--color-text-secondary); }
.chatBody { margin: 0; color: var(--color-text-secondary); line-height: 1.55; font-size: .95rem; }
.chatComposer { border: 1px solid var(--line); background: #0d0d0d; padding: 26px; }

/* ---------- legal / misc ---------- */
.legal { max-width: 820px; }
.legal h2 { margin-top: 40px; }
.legal p { color: var(--color-text-secondary); line-height: 1.7; }
.checkList { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 12px; }
.checkList li { display: flex; gap: 12px; color: var(--color-text-secondary); line-height: 1.5; }
.checkList .pixel { color: var(--color-text-link); }

/* ---------- admin ---------- */
.adminMeta { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 24px; color: var(--color-text-secondary); font-size: .82rem; letter-spacing: .08em; }
.btnDanger { color: #e26a6c; font-family: var(--font-mono, monospace); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; }
.inlineForm { display: inline; }
.tableWrap { overflow-x: auto; border: 1px solid var(--line); }
.soaTable { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 760px; }
.soaTable th, .soaTable td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.soaTable th {
  font-family: var(--font-mono, monospace); font-size: .7rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--color-text-secondary); background: #0d0d0d;
  position: sticky; top: 0;
}
.soaTable tr:last-child td { border-bottom: 0; }
.soaTable .cellWrap { max-width: 340px; }

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--line); padding-top: 120px; padding-bottom: 60px; background: transparent; }
.footer .sectionLabel { margin-bottom: 0; border-top: 0; padding: 0 0 40px; }
.footer .title {
  font-family: var(--font-mono, monospace); font-size: .82rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--color-text-primary);
  padding-bottom: 14px; margin: 0 0 18px; border-bottom: 1px solid var(--line-strong);
}
.footer .heading {
  font-family: var(--font-mono, monospace); font-size: .72rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--color-text-link);
  margin: 26px 0 10px;
}
.footer .heading::before { content: "— "; color: var(--color-text-secondary); }
.footer .links { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer .links a, .footer .links .plain {
  color: var(--color-text-secondary); text-decoration: none; font-size: .9rem;
  transition: color .15s ease;
}
.footer .links a:hover { color: var(--color-text-primary); }
.socialLinks { display: flex; gap: 12px; margin-top: 8px; }
.socialLinks a { display: inline-flex; padding: 10px; border: 1px solid var(--line-strong); color: var(--color-text-secondary); transition: all .15s ease; }
.socialLinks a:hover { color: var(--color-text-primary); border-color: var(--color-ultraviolet); }
.footerBranding { margin-top: 90px; padding-top: 40px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 20px; align-items: center; }
.footerBranding .logo img { display: block; height: 26px; width: auto; opacity: .85; }
.copyright { color: var(--color-text-secondary); font-size: .82rem; font-family: var(--font-mono, monospace); letter-spacing: .06em; margin: 0; }

/* ---------- oasis terminal ---------- */
.oasisTerminal { position: fixed; right: 20px; bottom: 20px; z-index: 900; width: min(380px, calc(100vw - 40px)); font-family: var(--font-mono, monospace); }
.oasisTab {
  display: block; width: 100%; text-align: left;
  background: #101010; border: 1px solid var(--color-ultraviolet); color: var(--color-text-primary);
  font-family: inherit; font-size: .78rem; letter-spacing: .12em;
  padding: 12px 16px; cursor: pointer;
}
.oasisTab:hover { background: #15131d; }
.oasisPanel { background: #0c0c0c; border: 1px solid var(--color-ultraviolet); border-top: 0; }
.oasisHeader { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.oasisTitle { color: var(--color-text-link); font-size: .72rem; letter-spacing: .16em; }
.oasisClose { background: none; border: 0; cursor: pointer; color: var(--color-text-secondary); font-size: .9rem; padding: 2px 8px; }
.oasisClose::before { content: "×"; }
.oasisClose:hover { color: var(--color-text-primary); }
.oasisContent { padding: 16px 18px; max-height: 300px; overflow-y: auto; font-size: .78rem; line-height: 1.75; }
.oasisLine { margin: 0 0 6px; color: var(--color-text-secondary); opacity: 0; animation: oasisIn .5s ease forwards; }
.oasisLine .oasisPrefix { color: var(--color-text-link); margin-right: 8px; }
.oasisOk { color: #7fd6a0; }
.oasisHi { color: var(--color-text-primary); }
.oasisCursor .oasisCaret { display: inline-block; width: 8px; height: 14px; background: var(--color-text-link); vertical-align: -2px; animation: oasisBlink 1s steps(1) infinite; }
@keyframes oasisIn { to { opacity: 1; } }
@keyframes oasisBlink { 50% { opacity: 0; } }
.oasisTerminal.is-closed .oasisPanel { display: none; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .heroCards { grid-template-columns: repeat(2, 1fr); }
  .catGrid .cell { margin-bottom: 0; }
}
@media (max-width: 1279px) {
  main { padding-top: 76px; }
  .siteHeader { height: 76px; }
  /* main.css hides .siteHeader .mainNav below 1280px — match its specificity
     (site.css loads after main.css) to turn it into a slide-down drawer */
  .siteHeader .mainNav {
    display: block;
    position: fixed; inset: 76px 0 auto 0;
    height: auto; max-height: calc(100vh - 76px); overflow-y: auto;
    border-left: 0; padding-left: 0;
    background: #0c0c0c; border-bottom: 1px solid var(--line-strong);
    transform: translateY(-130%); transition: transform .25s ease;
    box-shadow: 0 30px 40px rgba(0,0,0,.5);
    z-index: 1001;
  }
  .siteHeader .mainNav.is-open { transform: translateY(0); }
  .siteHeader .mainNav > ul {
    width: auto; height: auto;
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    column-gap: 0; padding: 8px 24px 20px;
  }
  .siteHeader .mainNav > ul > li { height: auto; flex: none; border-bottom: 1px solid var(--line); }
  .siteHeader .mainNav > ul > li > a {
    height: auto; padding: 14px 0; width: 100%;
    justify-content: flex-start; display: block;
  }
  .siteHeader .mainNav > ul > li > a::before { display: none; }
  .siteHeader .hasDropdown > a::after { content: " +"; }
  .siteHeader .dropdownWrapper {
    position: static; display: block; width: auto;
    opacity: 1; visibility: visible; pointer-events: auto;
    border: 0; background: none; padding: 4px 0 14px;
    box-shadow: none; filter: none; transform: none; transition: none;
  }
  .siteHeader .dropdownContent { border: 0; background: none; }
  .siteHeader .dropdownColumns { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
  .siteHeader .dropdownColumns > li { min-width: 0; border-right: 0; opacity: 1; transform: none; }
  .siteHeader .dropdownColumnHeading { padding: 12px 0 4px; }
  .siteHeader .dropdownLinks { padding: 6px 0 10px; }
  .siteHeader .dropdownLinks a { padding: 9px 0; }
  .siteHeader .menuToggle {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    width: 44px; height: 44px; margin-left: 16px; padding: 0;
    background: transparent; border: 1px solid var(--line-strong); border-radius: 0;
    color: var(--color-text-primary); cursor: pointer; font: inherit; text-transform: none; letter-spacing: normal;
  }
  .siteHeader .menuToggle span { display: block; width: 20px; height: 2px; background: currentColor; transition: transform .2s ease, opacity .2s ease; }
  .siteHeader .menuToggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .siteHeader .menuToggle.active span:nth-child(2) { opacity: 0; }
  .siteHeader .menuToggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .button--header { display: none; }
}
@media (max-width: 860px) {
  .headerLogo svg { height: 26px; }
  .formLayout, .chatLayout { grid-template-columns: 1fr; }
  .heroCards { grid-template-columns: 1fr; }
  .stats > .cell { border-left: 0; border-top: 1px solid var(--line); }
  .stats > .cell:first-child { border-top: 0; }
  .formRow { grid-template-columns: 1fr; }
  .oasisTerminal { right: 12px; bottom: 12px; }
}

/* ================= ADMIN PANEL ================= */
body.adminPage { background-color: transparent; }
.adminLayout { display: flex; min-height: 100vh; }
.adminSidebar {
  width: 236px; flex: 0 0 236px;
  background: #0c0c0c; border-right: 1px solid var(--line);
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column;
  padding: 28px 0 22px; overflow-y: auto;
}
.adminBrand { display: block; padding: 0 24px 18px; }
.adminBrand img { display: block; height: 34px; width: auto; }
.adminSidebarLabel { font-size: .58rem; letter-spacing: .24em; color: var(--color-text-tertiary); padding: 0 24px; margin: 0 0 12px; }
.adminNav { display: flex; flex-direction: column; gap: 2px; }
.adminNav a {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 24px; color: var(--color-text-secondary); text-decoration: none;
  font-family: var(--font-sans); font-size: .95rem;
  border-left: 2px solid transparent;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.adminNav a:hover { color: var(--color-text-primary); background: rgba(231,230,217,.03); }
.adminNav a.is-active {
  color: var(--color-text-primary);
  border-left-color: var(--color-ultraviolet);
  background: rgba(98,54,244,.08);
}
.adminNavIdx { font-size: .6rem; color: var(--color-text-tertiary); }
.adminNav a.is-active .adminNavIdx { color: #9d7bff; }
.adminSidebarFoot {
  margin-top: auto; padding: 18px 24px 0;
  display: flex; flex-direction: column; gap: 10px;
  border-top: 1px solid var(--line);
}
.adminSideLink {
  color: var(--color-text-secondary); text-decoration: none;
  font-family: var(--font-sans); font-size: .9rem;
  background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
}
.adminSideLink:hover { color: var(--color-text-primary); }
.btnLogout { color: #ff5470 !important; }
.adminBody { flex: 1; min-width: 0; padding: 40px 48px 96px; }
.adminContent { max-width: 1080px; }
.adminTop { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.adminTop .eyebrow { margin-bottom: 6px; }
.adminTitle { font-size: 2.1rem; line-height: 1.1; margin: 0; font-family: var(--font-sans); font-weight: var(--font-weight-medium, 500); color: var(--color-text-primary); }
.adminUser { color: var(--color-text-tertiary); font-size: .65rem; letter-spacing: .2em; white-space: nowrap; }
.adminFlash {
  display: flex; gap: 10px; align-items: center;
  background: rgba(98,54,244,.1); border: 1px solid rgba(98,54,244,.4);
  color: var(--color-text-primary); padding: 12px 16px; margin-bottom: 24px;
  font-size: .92rem;
}
.adminPageActions { display: flex; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
.statCards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 32px; }
.statCard {
  display: flex; flex-direction: column; gap: 8px;
  border: 1px solid var(--line); background: #0e0e0e;
  padding: 18px 20px; text-decoration: none; color: inherit;
  transition: border-color .15s ease, transform .15s ease;
}
.statCard:hover { border-color: #4a3a9e; transform: translateY(-1px); }
.statCardNum { font-size: 1.9rem; line-height: 1; color: var(--color-text-primary); }
.statCardLabel {
  font-family: var(--font-mono); font-size: .68rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--color-text-tertiary);
}
.adminPanels { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.adminPanel { border: 1px solid var(--line); background: #0d0d0d; padding: 24px; }
.adminPanelHead { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.adminPanelHead .h3 { margin: 0; font-family: var(--font-sans); font-size: 1.12rem; font-weight: var(--font-weight-medium, 500); color: var(--color-text-primary); }
.adminLink {
  color: #9d7bff; text-decoration: none;
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  background: none; border: 0; cursor: pointer; padding: 0;
}
.adminLink:hover { color: #b9a3ff; text-decoration: underline; }
.adminEmpty { padding: 40px 0; text-align: center; color: var(--color-text-tertiary); font-size: .7rem; letter-spacing: .2em; }
.adminQuick { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; align-items: center; }
.btnDanger {
  color: #ff5470; background: none; border: 0; cursor: pointer;
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  padding: 0; text-decoration: none;
}
.btnDanger:hover { text-decoration: underline; }
.adminMetaCell { font-size: .75rem; color: var(--color-text-tertiary); white-space: nowrap; }
.adminMetaLine { margin-top: 14px; font-size: .68rem; letter-spacing: .18em; color: var(--color-text-tertiary); }
.adminSlug { font-family: var(--font-mono); font-size: .72rem; color: var(--color-text-tertiary); }
.adminActions { white-space: nowrap; }
.adminActions form { display: inline; }
.adminActions .adminLink, .adminActions .btnDanger, .adminActions form button { margin-right: 14px; }
.adminActions .adminActions:last-child { margin-right: 0; }
.adminHint { color: var(--color-text-secondary); font-size: .9rem; line-height: 1.65; margin: 0 0 20px; max-width: 720px; }
.adminForm { max-width: 760px; }
.adminForm .formRow { margin-bottom: 0; }
.adminFieldset {
  border: 1px solid var(--line); background: #0d0d0d;
  margin: 0 0 24px; padding: 18px 24px 6px;
}
.adminFieldset legend {
  font-size: .62rem; letter-spacing: .22em;
  color: var(--color-text-tertiary); padding: 0 8px;
}
.adminFieldset .formField { margin-bottom: 20px; }
.adminFormFoot { display: flex; gap: 14px; align-items: center; margin-top: 26px; flex-wrap: wrap; }
.adminHidden { display: none; }
.rowUnread { background: rgba(98,54,244,.06); }
.rowUnread td:first-child { color: var(--color-ultraviolet); }
.msgDetail { display: none; }
.msgDetail.isShown { display: table-row; }
.msgDetail td { background: #0e0e0e; border-top: 1px dashed var(--line-strong); padding: 18px 16px; }
.msgDetailBody { margin: 0; color: var(--color-text-secondary); line-height: 1.65; font-family: var(--font-sans); font-size: .95rem; }
.loginCard {
  max-width: 380px; margin: 48px auto 0;
  border: 1px solid var(--line-strong); background: #0d0d0d;
  padding: 36px 32px; text-align: center;
}
.loginCard .pixel { color: var(--color-text-primary); }
.loginCard form { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; }
.loginCard input[type="password"] {
  width: 100%; box-sizing: border-box;
  background: #0b0b0b; border: 1px solid var(--line-strong);
  color: var(--color-text-primary); padding: 13px 14px;
  font-family: var(--font-sans); font-size: 1rem;
}
.loginCard input[type="password"]:focus { outline: none; border-color: var(--color-ultraviolet); }
.loginHint { color: var(--color-text-secondary); font-size: .9rem; }

/* admin — responsive */
@media (max-width: 1023px) {
  .adminLayout { flex-direction: column; }
  .adminSidebar {
    width: 100%; flex: none; height: auto; position: static;
    border-right: 0; border-bottom: 1px solid var(--line);
    padding: 16px 0 10px;
  }
  .adminBrand { padding: 0 20px 12px; }
  .adminSidebarLabel { display: none; }
  .adminNav { flex-direction: row; flex-wrap: wrap; gap: 0; padding: 0 12px; }
  .adminNav a { border-left: 0; border-bottom: 2px solid transparent; padding: 10px 14px; }
  .adminNav a.is-active { border-bottom-color: var(--color-ultraviolet); background: none; }
  .adminNavIdx { display: none; }
  .adminSidebarFoot { margin-top: 12px; padding: 12px 20px 0; flex-direction: row; gap: 20px; border-top: 0; }
  .adminBody { padding: 28px 20px 64px; }
  .adminTop { flex-direction: column; align-items: flex-start; gap: 8px; }
  .adminTitle { font-size: 1.7rem; }
  .statCards { grid-template-columns: repeat(2, 1fr); }
  .adminPanels { grid-template-columns: 1fr; }
}

/* ============================================================
   Editable pages — admin editor (Panneau > Pages)
   ============================================================ */
.adminFormActions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

.pageTabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.pageTab {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .04em;
  padding: 9px 16px; border: 1px solid var(--color-border-subtle, #2a2a2e);
  border-radius: 6px; color: var(--color-text-secondary, #a3a29a); text-decoration: none;
  transition: all .15s ease;
}
.pageTab:hover { border-color: var(--color-ultraviolet); color: var(--color-text-primary); }
.pageTab.is-active { background: var(--color-ultraviolet); border-color: var(--color-ultraviolet); color: #fff; }

.pageHint { font-size: 13px; color: var(--color-text-secondary, #a3a29a); margin: 0 0 20px; max-width: 70ch; }

.pageEditorBar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 8px; margin-bottom: 0;
  border: 1px solid var(--color-border-subtle, #2a2a2e); border-bottom: none;
  border-radius: 8px 8px 0 0; background: rgba(255,255,255,.02);
}
.editorBtn {
  font-family: var(--font-mono); font-size: 12px; color: var(--color-text-secondary, #a3a29a);
  background: transparent; border: 1px solid var(--color-border-subtle, #2a2a2e);
  border-radius: 5px; padding: 5px 10px; cursor: pointer; transition: all .12s ease;
}
.editorBtn:hover { border-color: var(--color-ultraviolet); color: var(--color-text-primary); }
.editorBtn.is-active { background: var(--color-ultraviolet); border-color: var(--color-ultraviolet); color: #fff; }
.editorSep { width: 1px; height: 18px; background: var(--color-border-subtle, #2a2a2e); margin: 0 4px; }
.editorSpacer { flex: 1; }

.pageEditor,
.pageEditorSource {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--color-border-subtle, #2a2a2e);
  background: rgba(0,0,0,.25); color: var(--color-text-primary);
  padding: 18px; min-height: 320px; outline: none;
}
.pageEditor { border-radius: 0 0 8px 8px; line-height: 1.65; }
.pageEditor:focus { border-color: var(--color-ultraviolet); }
.pageEditor h1, .pageEditor h2, .pageEditor h3 { margin: 18px 0 10px; }
.pageEditor p { margin: 0 0 12px; }
.pageEditor ul { margin: 0 0 12px; padding-left: 22px; }

.pageEditorSource {
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.55;
  border-radius: 0 0 8px 8px; resize: vertical; display: block;
}
.pageEditorSource:focus { border-color: var(--color-ultraviolet); }

.pagePreview {
  margin-top: 18px; padding: 8px 4px; border: 1px dashed var(--color-border-subtle, #2a2a2e);
  border-radius: 8px;
}
.pagePreview .previewMain { padding: 8px 0; }
.pagePreview .module-comp { background: transparent; }

.pageMeta { font-size: 12px; color: var(--color-text-secondary, #a3a29a); margin-top: 10px; font-family: var(--font-mono); }