/* ==========================================================================
   SYLX — Thème « Registre » pour Bootstrap 5.3 (mode sombre)
   Charger APRÈS bootstrap.min.css. Page : <html data-bs-theme="dark">
   Polices : Archivo (variable, wdth 62–125) + JetBrains Mono
   ========================================================================== */

/* ---------- 1. Jetons ---------- */
:root, [data-bs-theme="dark"] {
  --sylx-graphite: #0c0d0e;
  --sylx-ardoise: #17191a;
  --sylx-ardoise-2: #202324;
  --sylx-trait: #2a2d2e;
  --sylx-craie: #e9ebe8;
  --sylx-craie-2: #c3c6c4;
  --sylx-gris: #a9adab;
  --sylx-cendre: #8d918f;
  --sylx-citron: #c8f04a;
  --sylx-citron-2: #d6f57a;
  --sylx-erreur: #ff7a5c;

  --sylx-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --sylx-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --sylx-measure: 68ch;
  --sylx-pad: clamp(20px, 3vw, 48px);
  --sylx-pad-rail: clamp(20px, 2vw, 32px);
  --sylx-header-h: 72px;

  /* Surcharge des variables Bootstrap */
  --bs-body-bg: var(--sylx-graphite);
  --bs-body-color: var(--sylx-craie);
  --bs-body-font-family: var(--sylx-sans);
  --bs-body-font-size: clamp(1.0625rem, .4vw + .95rem, 1.1875rem);
  --bs-body-line-height: 1.65;
  --bs-font-monospace: var(--sylx-mono);
  --bs-emphasis-color: var(--sylx-craie);
  --bs-secondary-color: var(--sylx-cendre);
  --bs-secondary-bg: var(--sylx-ardoise);
  --bs-tertiary-bg: var(--sylx-ardoise-2);
  --bs-border-color: var(--sylx-trait);
  --bs-border-radius: 0; --bs-border-radius-sm: 0; --bs-border-radius-lg: 0; --bs-border-radius-pill: 0;
  --bs-link-color: var(--sylx-craie);
  --bs-link-color-rgb: 233, 235, 232;
  --bs-link-hover-color: var(--sylx-citron);
  --bs-link-hover-color-rgb: 200, 240, 74;
  --bs-link-decoration: none;
  --bs-primary: var(--sylx-citron);
  --bs-primary-rgb: 200, 240, 74;
  --bs-danger: var(--sylx-erreur);
  --bs-danger-rgb: 255, 122, 92;
  --bs-focus-ring-color: rgba(200, 240, 74, .5);
  --bs-code-color: var(--sylx-citron);
}

/* ---------- 2. Base ---------- */
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { text-decoration: none; transition: color .18s ease-out, background-color .18s ease-out; }
::selection { background: var(--sylx-citron); color: var(--sylx-graphite); }
:focus-visible { outline: 2px solid var(--sylx-citron); outline-offset: 2px; box-shadow: none; }
p { text-wrap: pretty; }
hr { border-color: var(--sylx-trait); opacity: 1; margin: 3em 0; }
.skip { position: absolute; z-index: 1100; background: var(--sylx-citron); color: var(--sylx-graphite) !important; padding: 12px 16px; font: 600 13px var(--sylx-mono); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- 3. Typographie ---------- */
.meta { font: 13px/1.6 var(--sylx-mono); color: var(--sylx-cendre); }
.label { font: 600 12px/1.4 var(--sylx-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--sylx-cendre); margin: 0; }
.accent { color: var(--sylx-citron) !important; }
.measure { max-width: var(--sylx-measure); }
.display-sylx, .h-sylx, .h2-sylx, .h3-sylx, .prose h2 {
  font-family: var(--sylx-sans); text-transform: uppercase; letter-spacing: -.01em; margin: 0; text-wrap: balance; color: var(--sylx-craie);
}
.display-sylx { font-weight: 900; font-stretch: 62%; font-size: clamp(88px, 20vw, 260px); line-height: .78; letter-spacing: -.02em; }
.h-sylx { font-weight: 900; font-stretch: 62%; font-size: clamp(64px, 11vw, 150px); line-height: .8; }
.h2-sylx { font-weight: 800; font-stretch: 75%; font-size: clamp(30px, 3.4vw, 44px); line-height: .95; }
.h3-sylx { font-weight: 800; font-stretch: 75%; font-size: clamp(22px, 2.2vw, 30px); line-height: 1; }
.subtitle { font: 700 clamp(19px, 2vw, 24px)/1.2 var(--sylx-sans); font-stretch: 85%; text-transform: uppercase; color: var(--sylx-craie-2); margin: 0; }
.lead-sylx { font-size: clamp(19px, 1.4vw, 22px); line-height: 1.5; max-width: 720px; text-wrap: pretty; }

/* ---------- 4. En-tête (navbar Bootstrap) ---------- */
.site-header { background: var(--sylx-graphite); border-bottom: 1px solid var(--sylx-trait); }
.site-header .navbar { min-height: var(--sylx-header-h); }
.brand { display: flex; align-items: center; gap: 12px; margin: 0; padding: 0 var(--sylx-pad-rail); border-right: 1px solid var(--sylx-trait); color: var(--sylx-craie) !important; min-height: var(--sylx-header-h); }
.brand-mark { width: 30px; height: 30px; flex: none; color: var(--sylx-craie); }
.wordmark { font: 900 30px/1 var(--sylx-sans); font-stretch: 70%; letter-spacing: -.01em; }
.wordmark b { color: var(--sylx-citron); font-weight: inherit; }
.navbar-toggler { margin: 0 var(--sylx-pad-rail) 0 auto; padding: 10px 14px; border: 1px solid var(--sylx-trait); font: 600 12px var(--sylx-mono); text-transform: uppercase; color: var(--sylx-craie); }
.navbar-toggler:focus { box-shadow: 0 0 0 2px var(--sylx-citron); }
.site-header .nav-link { display: flex; align-items: center; height: 100%; padding: 16px 22px !important; white-space: nowrap; border-right: 1px solid var(--sylx-trait); font: 600 12px var(--sylx-mono); text-transform: uppercase; letter-spacing: .04em; color: var(--sylx-cendre); }
.site-header .nav-link:hover { background: var(--sylx-ardoise); color: var(--sylx-craie); }
.site-header .nav-link.active { background: var(--sylx-citron); color: var(--sylx-graphite) !important; }
.site-header .nav-link--end { border-right: 0; border-left: 1px solid var(--sylx-trait); }
@media (min-width: 992px) and (max-width: 1199.98px) { .site-header .nav-link { padding: 16px 14px !important; } }
@media (max-width: 991.98px) {
  .navbar-collapse { border-top: 1px solid var(--sylx-trait); }
  .site-header .nav-link { border-right: 0; border-bottom: 1px solid var(--sylx-trait); }
  .site-header .nav-link--end { border-left: 0; }
}

/* ---------- 5. Grille à rail ---------- */
.rail-row { border-bottom: 1px solid var(--sylx-trait); }
.rail { padding: 40px var(--sylx-pad-rail); border-right: 1px solid var(--sylx-trait); display: flex; flex-direction: column; gap: 6px; }
.rail-meta { display: flex; flex-direction: column; gap: 6px; }
.main { padding: 40px var(--sylx-pad) 56px; min-width: 0; }
.rail-row--flush > .main { padding: 0; }
@media (max-width: 767.98px) {
  .rail { border-right: 0; border-bottom: 1px solid var(--sylx-trait); padding: 18px var(--sylx-pad); flex-direction: row; flex-wrap: wrap; gap: 6px 18px; }
  .rail-meta { flex-direction: row; flex-wrap: wrap; gap: 6px 18px; }
}

/* ---------- 6. Boutons, badges ---------- */
.btn { --bs-btn-padding-x: 22px; --bs-btn-padding-y: 15px; --bs-btn-font-family: var(--sylx-mono); --bs-btn-font-size: 13px; --bs-btn-font-weight: 600; --bs-btn-border-radius: 0; text-transform: uppercase; letter-spacing: .02em; }
.btn-primary { --bs-btn-color: var(--sylx-graphite); --bs-btn-bg: var(--sylx-citron); --bs-btn-border-color: var(--sylx-citron); --bs-btn-hover-color: var(--sylx-graphite); --bs-btn-hover-bg: var(--sylx-citron-2); --bs-btn-hover-border-color: var(--sylx-citron-2); --bs-btn-active-color: var(--sylx-graphite); --bs-btn-active-bg: var(--sylx-citron-2); --bs-btn-active-border-color: var(--sylx-citron-2); --bs-btn-focus-shadow-rgb: 200, 240, 74; }
.btn-outline-light { --bs-btn-color: var(--sylx-craie); --bs-btn-border-color: var(--sylx-trait); --bs-btn-hover-color: var(--sylx-citron); --bs-btn-hover-bg: var(--sylx-ardoise); --bs-btn-hover-border-color: var(--sylx-trait); --bs-btn-active-color: var(--sylx-citron); --bs-btn-active-bg: var(--sylx-ardoise); --bs-btn-active-border-color: var(--sylx-citron); }
.badge-sylx { padding: 4px 8px; border: 1px solid var(--sylx-trait); background: transparent; font: 600 11px var(--sylx-mono); text-transform: uppercase; letter-spacing: .04em; color: var(--sylx-cendre); }
.badge-sylx--on { background: var(--sylx-citron); border-color: var(--sylx-citron); color: var(--sylx-graphite); }

/* ---------- 7. Registre ---------- */
.entry { padding: 26px var(--sylx-pad) 26px var(--sylx-pad-rail); border-bottom: 1px solid var(--sylx-trait); color: var(--sylx-craie); --bs-gutter-x: 0; row-gap: 8px; }
.entry > * { padding-right: 20px; }
.entry:hover { background: var(--sylx-ardoise); color: var(--sylx-craie); }
.entry:hover .entry-title { color: var(--sylx-citron); }
.entry-n { font: 600 13px var(--sylx-mono); color: var(--sylx-citron); }
.entry-body { display: flex; flex-direction: column; gap: 8px; }
.entry-title { font: 800 clamp(24px, 2.6vw, 34px)/1 var(--sylx-sans); font-stretch: 75%; text-transform: uppercase; transition: color .18s ease-out; }
.entry-excerpt { font-size: 16px; line-height: 1.5; color: var(--sylx-gris); }
.entry-meta, .entry-date { font: 12px/1.5 var(--sylx-mono); color: var(--sylx-cendre); }
.entry-date { text-align: right; padding-right: 0; }

/* ---------- 8. Épopées ---------- */
.epopees { border-bottom: 1px solid var(--sylx-trait); }
.epopee { height: 100%; padding: 32px; border-right: 1px solid var(--sylx-trait); display: flex; flex-direction: column; gap: 18px; color: var(--sylx-craie); }
.epopees > div:last-child .epopee { border-right: 0; }
.epopee:hover { background: var(--sylx-ardoise); color: var(--sylx-craie); }
.epopee-code { font: 900 88px/.8 var(--sylx-sans); font-stretch: 62%; color: var(--sylx-citron); }
.rail .epopee-code { font-size: 64px; }
.epopee-name { font: 800 22px/1 var(--sylx-sans); font-stretch: 75%; text-transform: uppercase; }
@media (max-width: 767.98px) {
  .epopee { border-right: 0; border-bottom: 1px solid var(--sylx-trait); flex-direction: row; align-items: center; gap: 20px; }
  .epopee-code { font-size: 56px; }
}

/* ---------- 9. Pagination ---------- */
.pagination-sylx { --bs-pagination-padding-x: 18px; --bs-pagination-padding-y: 16px; --bs-pagination-font-size: 13px; --bs-pagination-color: var(--sylx-cendre); --bs-pagination-bg: transparent; --bs-pagination-border-width: 0; --bs-pagination-border-radius: 0; --bs-pagination-hover-color: var(--sylx-craie); --bs-pagination-hover-bg: var(--sylx-ardoise); --bs-pagination-focus-box-shadow: 0 0 0 2px var(--sylx-citron); --bs-pagination-active-color: var(--sylx-graphite); --bs-pagination-active-bg: var(--sylx-citron); --bs-pagination-active-border-color: var(--sylx-citron); flex-wrap: wrap; border-top: 1px solid var(--sylx-trait); font-family: var(--sylx-mono); font-weight: 600; }
.pagination-sylx .page-link { border-right: 1px solid var(--sylx-trait) !important; min-width: 56px; text-align: center; }

/* ---------- 10. Index ---------- */
.index { columns: 3 240px; column-gap: 32px; margin: 0; padding: 0; list-style: none; font: 13px/1.9 var(--sylx-mono); }
.index li { break-inside: avoid; }
.index a { color: var(--sylx-craie-2); }
.index a:hover { color: var(--sylx-citron); }
.index a::before { content: "— "; color: var(--sylx-cendre); }

/* ---------- 11. Article ---------- */
.article { border-bottom: 1px solid var(--sylx-trait); }
.article-rail { padding-top: 64px; }
.rail-sticky { position: sticky; top: calc(var(--sylx-header-h) + 32px); }
.toc { flex-direction: column; gap: 6px; margin: 20px 0 0; padding: 20px 0 0; border-top: 1px solid var(--sylx-trait); }
.toc a { font: 12px/1.5 var(--sylx-mono); color: var(--sylx-cendre); }
.toc a:hover { color: var(--sylx-citron); }
.prose { padding: 64px var(--sylx-pad) 96px; min-width: 0; }
.prose-header { display: flex; flex-direction: column; gap: 22px; margin-bottom: 48px; }
.prose h2 { font-weight: 800; font-stretch: 75%; line-height: 1; margin: 2.2em 0 .8em; font-size: clamp(26px, 2.6vw, 32px); scroll-margin-top: calc(var(--sylx-header-h) + 24px); }
.prose h2 .num { color: var(--sylx-citron); }
.prose p, .prose li { max-width: var(--sylx-measure); }
.prose a:not(.btn) { color: var(--sylx-citron); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.epigraph { margin: 0 0 1.4em; padding: 20px 24px; border: 1px solid var(--sylx-trait); font-size: 17px; line-height: 1.55; color: var(--sylx-craie-2); max-width: 600px; }
.epigraph p { margin: 0 0 10px; }
.epigraph cite { font: normal 12px var(--sylx-mono); color: var(--sylx-citron); }
.piece { margin: 2em 0; padding: 28px 32px; background: var(--sylx-citron); color: var(--sylx-graphite); font: 400 16px/1.7 var(--sylx-mono); max-width: var(--sylx-measure); }
.piece-title { display: block; font-weight: 600; text-transform: uppercase; margin-bottom: 14px; }
.piece p { margin: 0 0 1em; max-width: none; }
.piece p:last-child { margin: 0; }
.poem { margin: 2em 0; padding-left: 24px; border-left: 3px solid var(--sylx-citron); }
.poem-title { font: 600 12px var(--sylx-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--sylx-citron); margin-bottom: 14px; }
.poem p { margin: 0 0 1em; line-height: 1.6; }
.dialogue { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 10px 16px; margin: 1.6em 0; max-width: var(--sylx-measure); }
.dialogue dt { font: 600 13px/1.9 var(--sylx-mono); color: var(--sylx-citron); }
.dialogue dd { margin: 0; }
.comment { padding: 24px 0; border-top: 1px solid var(--sylx-trait); max-width: var(--sylx-measure); }
.comment-head { display: flex; gap: 16px; align-items: baseline; margin-bottom: 8px; }
.comment-author { font: 700 17px var(--sylx-sans); }
.adjacent { border-bottom: 1px solid var(--sylx-trait); }
.adjacent a { padding: 28px var(--sylx-pad-rail); display: flex; flex-direction: column; gap: 8px; color: var(--sylx-craie); }
.adjacent a + a { border-left: 1px solid var(--sylx-trait); }
.adjacent a:hover { background: var(--sylx-ardoise); color: var(--sylx-craie); }
.adjacent .entry-title { font-size: 24px; }
@media (max-width: 767.98px) {
  .article-rail { padding-top: 18px; }
  .rail-sticky { position: static; }
  .adjacent a + a { border-left: 0; border-top: 1px solid var(--sylx-trait); }
  .piece { padding: 22px; font-size: 15px; }
}

/* ---------- 12. Formulaires ---------- */
.form-sylx { max-width: 640px; }
.form-label { font: 600 12px var(--sylx-mono); text-transform: uppercase; letter-spacing: .04em; color: var(--sylx-cendre); }
.form-control { padding: 14px 16px; background: var(--sylx-ardoise-2); color: var(--sylx-craie); border: 1px solid var(--sylx-trait); border-radius: 0; font: 400 17px/1.5 var(--sylx-sans); }
.form-control:focus { background: var(--sylx-ardoise-2); color: var(--sylx-craie); border-color: var(--sylx-citron); box-shadow: 0 0 0 1px var(--sylx-citron); }
.form-control::placeholder { color: #6e7270; }
.form-text { font: 12px var(--sylx-mono); color: var(--sylx-cendre); }
.form-check-input { border-radius: 0 !important; background-color: var(--sylx-ardoise-2); border-color: var(--sylx-trait); }
.form-check-input:checked { background-color: var(--sylx-citron); border-color: var(--sylx-citron); }
.form-check-input:checked[type=checkbox] { --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230c0d0e' stroke-linecap='square' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"); }
.form-check-label { font-size: 15px; color: var(--sylx-craie-2); }
.captcha-img { width: 160px; height: 52px; background: repeating-linear-gradient(45deg, var(--sylx-ardoise) 0 6px, var(--sylx-ardoise-2) 6px 12px); border: 1px solid var(--sylx-trait); display: flex; align-items: center; justify-content: center; font: 600 11px var(--sylx-mono); color: var(--sylx-cendre); }

/* ---------- 13. Pied de page ---------- */
.site-footer { background: var(--sylx-ardoise); border-top: 1px solid var(--sylx-trait); }
.footer-bottom { padding: 24px var(--sylx-pad-rail); font: 12px var(--sylx-mono); color: var(--sylx-cendre); text-transform: uppercase; }
.footer-bottom a { color: var(--sylx-cendre); }
.footer-bottom a:hover { color: var(--sylx-citron); }

/* ---------- 14. Charte ---------- */
.charte-logos { border: 1px solid var(--sylx-trait); }
.charte-tile { margin: 0; padding: 40px 28px 20px; background: var(--sylx-graphite); display: flex; flex-direction: column; justify-content: space-between; gap: 28px; border-right: 1px solid var(--sylx-trait); }
.charte-tile:last-child { border-right: 0; }
.charte-tile--light { background: #f2f3f0; }
.charte-tile--light .meta { color: #4d504e; }
.logo-live { display: flex; align-items: center; gap: 18px; color: var(--sylx-craie); }
.logo-live .brand-mark { width: 84px; height: 84px; }
.logo-live .wordmark { font-size: clamp(56px, 6vw, 92px); }
.charte-tile--light .logo-live, .charte-tile--light .brand-mark { color: var(--sylx-graphite); }
.charte-tile--light .wordmark b { color: #6f9410; }
.charte-rules { margin-top: 12px; font: 13px/1.6 var(--sylx-mono); color: var(--sylx-craie-2); }
.swatch { display: flex; flex-direction: column; gap: 4px; }
.swatch-chip { height: 88px; border: 1px solid var(--sylx-trait); margin-bottom: 8px; }
.swatch strong { font: 800 18px var(--sylx-sans); font-stretch: 75%; text-transform: uppercase; }

/* ---------- 15. Ticker bas de page ---------- */
#muv-apply-banner-container {
  position: fixed;
  left: 0;
  bottom: 0;
  height: 48px;
  width: 100%;
  z-index: 1040;
  background: var(--sylx-ardoise);
  border-top: 1px solid var(--sylx-trait);
  overflow: hidden;
}
#muv-apply-banner-container .sylx-ticker-viewport {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.sylx-ticker-track {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  width: max-content;
  animation: sylx-ticker-scroll 90s linear infinite;
}
.sylx-ticker-track:hover { animation-play-state: paused; }
.sylx-ticker-item {
  flex: 0 0 auto;
  font: 600 13px/1 var(--sylx-mono);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--sylx-cendre);
  padding: 0 4px;
}
.sylx-ticker-item:hover { color: var(--sylx-citron); }
.sylx-ticker-sep {
  flex: 0 0 auto;
  color: var(--sylx-trait);
  padding: 0 1.25rem;
  user-select: none;
}
@keyframes sylx-ticker-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
body { padding-bottom: 48px; }
@media (prefers-reduced-motion: reduce) {
  .sylx-ticker-track { animation: none; }
}

/* ---------- 16. Menu utilisateur / alertes ---------- */
.sylx-user-menu {
  --bs-dropdown-bg: var(--sylx-ardoise);
  --bs-dropdown-border-color: var(--sylx-trait);
  --bs-dropdown-link-color: var(--sylx-craie);
  --bs-dropdown-link-hover-bg: var(--sylx-ardoise-2);
  --bs-dropdown-link-hover-color: var(--sylx-citron);
  --bs-dropdown-header-color: var(--sylx-cendre);
  --bs-dropdown-divider-bg: var(--sylx-trait);
  border-radius: 0;
  font: 600 12px var(--sylx-mono);
  text-transform: uppercase;
}
.alert { border-radius: 0; }
.sylx-post-body { max-width: var(--sylx-measure); }
.sylx-post-body img { max-width: 100%; height: auto; }