/* ══════════════════════════════════════════════════════════

   131e Escadron Virtual — Feuille de style principale

   Thème : militaire / aviation sombre

   ══════════════════════════════════════════════════════════ */



/* ── Variables ─────────────────────────────────────────── */

:root {

  color-scheme: dark;   /* menus déroulants, cases, scrollbars natifs rendus en SOMBRE (sinon texte noir sur fond sombre selon le navigateur) */

  --bg-base:      #0f141d;

  --bg-surface:   #161d29;

  --bg-card:      #1a2230;

  --bg-hover:     #232c3d;

  --bg-input:     #131927;



  --accent:       #f0a830;

  --accent-dim:   #b07814;

  --accent-glow:  rgba(240,168,48,.16);

  --green:        #3ab87a;

  --green-dim:    rgba(58,184,122,.15);

  --red:          #d23a2a;

  --blue:         #3a7fc8;



  /* 2e accent — rouge viper (alertes, statuts, priorités) */

  --accent2:      #d8402c;

  --accent2-glow: rgba(216,64,44,.16);



  /* galon bullion doré (broderie style képi) */

  --cord-hi:  #f8e2a0;

  --cord-mid: #caa23e;

  --cord-lo:  #6e4f12;

  --metal:    #46566a;



  --text-primary:   #dbe2ee;

  --text-secondary: #8b97ab;

  --text-muted:     #58647a;



  --border:       rgba(240,168,48,.20);

  --border-dim:   rgba(255,255,255,.07);



  --font-head: 'Rajdhani', sans-serif;

  --font-mono: 'Share Tech Mono', monospace;

  --font-body: 'Noto Sans', sans-serif;



  --radius:   4px;

  --radius-lg: 8px;

  --shadow:   0 2px 16px rgba(0,0,0,.5);



  /* ── Variables topbar / header (utilisées pour le thème jour) ── */

  --topbar-bg:    #090b10;

  --header-bg:    linear-gradient(180deg, #0a0d14 0%, #111520 100%);

  --dropdown-bg:  #0d1117;

}



/* ── Thème jour ──────────────────────────────────────────── */

[data-theme="light"] {

  color-scheme: light;   /* contrôles natifs rendus en CLAIR en mode jour */

  --bg-base:      #c8cdd8;

  --bg-surface:   #d4d9e4;

  --bg-card:      #dde1ea;

  --bg-hover:     #c0c5d0;

  --bg-input:     #d4d9e4;



  --accent:       #b86c08;

  --accent-dim:   #8a5006;

  --accent-glow:  rgba(184,108,8,.15);

  --green:        #1e8a56;

  --green-dim:    rgba(30,138,86,.15);

  --red:          #b03030;

  --blue:         #2058a8;



  --accent2:      #c0341f;

  --accent2-glow: rgba(192,52,31,.14);



  --text-primary:   #0e1118;

  --text-secondary: #2a3248;

  --text-muted:     #5a6280;



  --border:       rgba(184,108,8,.30);

  --border-dim:   rgba(0,0,0,.15);



  --shadow:   0 2px 16px rgba(0,0,0,.18);



  --topbar-bg:    #b8bcc8;

  --header-bg:    linear-gradient(180deg, #d4d9e4 0%, #c8cdd8 100%);

  --dropdown-bg:  #d4d9e4;

}



/* Overrides structurels pour le mode jour (couleurs codées en dur dans le CSS) */

[data-theme="light"] .topbar {

  background: var(--topbar-bg);

  border-bottom-color: var(--border);

}

[data-theme="light"] .site-header {

  background: var(--header-bg);

  box-shadow: 0 4px 24px rgba(0,0,0,.10);

}

[data-theme="light"] .site-nav__dropdown,

[data-theme="light"] .topbar__dropdown {

  background: var(--dropdown-bg);

  border-color: var(--border);

  box-shadow: 0 8px 24px rgba(0,0,0,.12);

}

[data-theme="light"] .site-nav__dropdown a,

[data-theme="light"] .topbar__dropdown a {

  color: var(--text-secondary);

}

[data-theme="light"] .site-nav__dropdown a:hover,

[data-theme="light"] .topbar__dropdown a:hover {

  background: rgba(184,108,8,.08);

  color: var(--accent);

}

[data-theme="light"] .site-nav__dropdown .dropdown-sep,

[data-theme="light"] .topbar__dropdown .dropdown-sep {

  background: rgba(0,0,0,.08);

}

[data-theme="light"] .topbar__divider {

  color: rgba(0,0,0,.2);

}



/* Bouton toggle thème */

#theme-toggle {

  background: none;

  border: 1px solid var(--border-dim);

  border-radius: 4px;

  cursor: pointer;

  font-size: 20px;

  padding: .1rem .35rem;

  line-height: 1;

  color: var(--text-secondary);

  transition: border-color .15s, background .15s;

  vertical-align: middle;

}

#theme-toggle:hover {

  border-color: var(--accent);

  background: var(--accent-glow);

}



/* ── Reset & Base ──────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }



html { scroll-behavior: smooth; }



body {

  background: var(--bg-base);

  color: var(--text-primary);

  font-family: var(--font-body);

  font-size: 16px;

  line-height: 1.65;

  min-height: 100vh;

  display: flex;

  flex-direction: column;

}



/* ── Image de fond d'ambiance (thème sombre uniquement) ── */

body::before {

  content: "";

  position: fixed;

  inset: 0;

  z-index: -1;

  pointer-events: none;

  background:

    radial-gradient(circle at 78% -10%, rgba(240,168,48,.10), transparent 45%),

    url('../img/bg_page.jpg?v=2') center/cover fixed;

  opacity: .9;

}

[data-theme="light"] body::before { display: none; }



/* ── Hero d'accueil (voile adapté au thème) ── */

.site-hero {

  background:

    linear-gradient(90deg, rgba(15,20,29,.9) 0%, rgba(15,20,29,.6) 50%, rgba(15,20,29,.28) 100%),

    var(--hero-img) center/cover;

  border: 1px solid var(--border);

  border-radius: var(--radius-lg);

  padding: 2.4rem 2rem;

  margin-bottom: 1.5rem;

  min-height: 250px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 2rem;

  flex-wrap: wrap;

  position: relative;

  overflow: visible;

  box-shadow: var(--shadow);

}

.site-hero h1, .site-hero p { text-shadow: 0 1px 4px rgba(0,0,0,.55); }



/* ── Écusson 131st : pièce qui tourne ── */

.hero-coin {

  flex: 1;

  display: flex;

  justify-content: center;

  align-items: center;

  perspective: 900px;

  min-width: 230px;

  margin-top: -34px;

}

.hero-coin__inner {

  width: 215px;

  height: 215px;

  position: relative;

  transform-style: preserve-3d;

  animation: heroCoinSpin 7s linear infinite;

}

.hero-coin__face {

  position: absolute;

  inset: 0;

  backface-visibility: hidden;

  display: grid;

  place-items: center;

  background: none;            /* plus de disque : seul le sigle est visible */

}

.hero-coin__face img {

  width: 100%;

  height: 100%;

  object-fit: contain;

  filter: brightness(1.2) drop-shadow(0 2px 6px rgba(0,0,0,.55));

}

.hero-coin__back { transform: rotateY(180deg); }

@keyframes heroCoinSpin { from { transform: rotateY(0); } to { transform: rotateY(360deg); } }

.hero-coin__inner:hover { animation-duration: 2.2s; }      /* accélère au survol */

@media (max-width: 760px) { .hero-coin { display: none; } } /* masqué sur mobile */



/* Mode jour : hero CLAIR avec texte foncé (s'intègre au thème clair) */

[data-theme="light"] .site-hero {

  background:

    linear-gradient(90deg, rgba(221,225,234,.93) 0%, rgba(221,225,234,.78) 55%, rgba(221,225,234,.5) 100%),

    var(--hero-img) center/cover;

  border-color: var(--border);

}

[data-theme="light"] .site-hero .hero-title { color: #16202e !important; text-shadow: none; }

[data-theme="light"] .site-hero .hero-sub   { color: #2c3856 !important; text-shadow: none; }

[data-theme="light"] .site-hero .hero-kicker { color: var(--accent) !important; }

[data-theme="light"] .site-hero .hero-online { color: #2c3856 !important; }

/* Puces & badges de la home : leur texte pastel (pensé pour le fond sombre) se lave
   sur les cadres clairs en mode JOUR. On NE touche PAS au mode nuit : les styles inline
   sombres restent tels quels ; ces règles n'assombrissent le texte qu'en thème clair. */
[data-theme="light"] .hb-partner { color: #3742a3 !important; background: rgba(88,101,242,.15) !important; }
[data-theme="light"] .hb-pvp     { color: #c62828 !important; background: rgba(244,67,54,.13) !important; }
[data-theme="light"] .hb-full    { color: #b02e2e !important; background: rgba(200,64,64,.13) !important; }
[data-theme="light"] .hb-comms   { color: #33405a !important; background: rgba(15,20,30,.06) !important; border-color: var(--border) !important; }
[data-theme="light"] .hb-freq    { color: #1f5fa8 !important; background: rgba(74,144,226,.14) !important; }
[data-theme="light"] .hb-oldnl   { background: rgba(20,26,40,.05) !important; }
[data-theme="light"] .nl-like    { border-color: rgba(20,26,40,.22); }



a { color: var(--accent); text-decoration: none; transition: color .15s; }

a:hover { color: #f0c060; }



img { max-width: 100%; height: auto; }



h1,h2,h3,h4,h5 {

  font-family: var(--font-head);

  font-weight: 700;

  letter-spacing: .04em;

  color: var(--text-primary);

}



/* ── Layout ────────────────────────────────────────────── */

.container {

  max-width: 1200px;

  margin: 0 auto;

  padding: 0 1.25rem;

}

/* Débordement négatif pour pages forum/topic : annule le padding du .container parent

   et reprend avec des marges quasi nulles — donne toute la largeur disponible */

.forum-wide {

  margin-left: -1.25rem;

  margin-right: -1.25rem;

}

.forum-wide .forum-category,

.forum-wide .forum-category__title,

.forum-wide .forum-row,

.forum-wide .topic-row,

.forum-wide .card,

.forum-wide .table-wrap,

.forum-wide > nav,

.forum-wide > h1,

.forum-wide > div {

  /* les enfants récupèrent un padding latéral minimal */

}

@media (min-width: 1400px) {

  .forum-wide { margin-left: -2rem; margin-right: -2rem; }

}



.main-content {

  flex: 1;

  padding: 1.5rem 0 3rem;

}



.layout-two-col {

  display: grid;

  grid-template-columns: 1fr 280px;

  gap: 1.5rem;

}

@media (max-width: 860px) {

  .layout-two-col { grid-template-columns: 1fr; }

}



/* ── Topbar ────────────────────────────────────────────── */

.topbar {

  background: #090b10;

  border-bottom: 1px solid var(--border);

  font-family: var(--font-mono);

  font-size: 12px;

  color: var(--text-secondary);

  padding: .35rem 0;

}

.topbar__inner {

  display: flex;

  align-items: center;

  gap: .5rem;

  flex-wrap: nowrap;          /* tout sur une seule ligne */

  white-space: nowrap;

  overflow-x: auto;            /* défilement horizontal si écran trop étroit */

  scrollbar-width: none;        /* barre masquée (Firefox) */

  -ms-overflow-style: none;     /* IE/Edge */

}

.topbar__inner::-webkit-scrollbar { display: none; height: 0; } /* Chrome/Safari */

.topbar__inner > * { flex: 0 0 auto; }

.topbar__clock { color: var(--green); font-weight: 600; }

.topbar__divider { color: var(--border); }

.topbar__admin { color: var(--accent) !important; }



/* ── Site Header ───────────────────────────────────────── */

.site-header {

  background: linear-gradient(180deg, #0a0d14 0%, #111520 100%);

  border-bottom: 1px solid var(--border);

  box-shadow: 0 4px 32px rgba(0,0,0,.6);

  position: sticky;

  top: 0;

  z-index: 100;

}

.site-header__inner {

  display: flex;

  align-items: center;

  gap: 2rem;

  padding-top: .75rem;

  padding-bottom: .75rem;

}

.site-header__logo {

  display: flex;

  align-items: center;

  gap: 1rem;

  color: inherit;

  text-decoration: none;

}

.logo-emblem {

  width: 52px;

  height: 52px;

  border: 2px solid var(--accent);

  border-radius: 50%;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  background: rgba(232,160,32,.08);

  flex-shrink: 0;

}

.logo-emblem__number {

  font-family: var(--font-head);

  font-size: 18px;

  font-weight: 700;

  color: var(--accent);

  line-height: 1;

}

.logo-emblem__wing { font-size: 14px; color: var(--text-secondary); }

.logo-text__name {

  display: block;

  font-family: var(--font-head);

  font-size: 24px;

  font-weight: 700;

  letter-spacing: .06em;

  color: var(--text-primary);

  white-space: nowrap;

}

.logo-text__sub {

  display: block;

  font-family: var(--font-mono);

  font-size: 12px;

  color: var(--text-muted);

  letter-spacing: .08em;

  text-transform: uppercase;

  white-space: nowrap;

}



.site-nav {

  display: flex;

  gap: .25rem;

  margin-left: auto;

}

.site-nav__link {

  font-family: var(--font-head);

  font-size: 17px;

  font-weight: 600;

  letter-spacing: .04em;

  color: var(--text-secondary);

  padding: .4rem .75rem;

  border-radius: var(--radius);

  transition: background .15s, color .15s;

  text-transform: uppercase;

}

.site-nav__link:hover,

.site-nav__link.active {

  background: var(--accent-glow);

  color: var(--accent);

}



.nav-toggle {

  display: none;

  background: none;

  border: none;

  color: var(--text-secondary);

  font-size: 28px;

  cursor: pointer;

  margin-left: auto;

}

@media (max-width: 760px) {

  .nav-toggle { display: block; }

  .site-nav {

    display: none;

    position: absolute;

    top: 100%;

    left: 0; right: 0;

    background: var(--bg-surface);

    border-top: 1px solid var(--border);

    flex-direction: column;

    padding: .5rem;

    max-height: calc(100vh - 100%);

    overflow-y: auto;

  }

  .site-nav--open { display: flex; }



  /* Sous-menus : affichés en accordéon dans le flux (plus de pop-up hors écran) */

  .site-nav__item { width: 100%; flex-direction: column; align-items: stretch; }

  .site-nav__link { width: 100%; }

  .site-nav__item::after { display: none; } /* pont invisible désactivé sur mobile */

  .site-nav__dropdown {

    position: static !important;

    transform: none !important;

    opacity: 1 !important;

    pointer-events: auto !important;

    min-width: 0;

    width: 100%;

    background: rgba(0,0,0,.22);

    border: none;

    border-radius: 0;

    box-shadow: none;

    padding: .15rem 0 .35rem 1rem;

    display: block;

  }

  .site-nav__dropdown a { padding: .55rem .75rem; }



  /* Bandeau du haut compact sur mobile */

  .topbar { font-size: 11px; padding: .25rem 0; }

  .topbar__inner { gap: .35rem; }

  .site-header__inner { gap: 1rem; padding-top: .5rem; padding-bottom: .5rem; }

  .site-header__logo img { height: 58px !important; }

  .logo-text__name { font-size: 19px; }

  .logo-text__sub { font-size: 10px; }

}



/* ── Cards ─────────────────────────────────────────────── */

.card {

  background: var(--bg-card);

  border: 1px solid var(--border-dim);

  border-radius: var(--radius-lg);

  overflow: hidden;

  position: relative;

}

/* ── Broderie bullion (galon doré nervuré, style képi) ── */

.card::after {

  content: "";

  position: absolute;

  inset: 5px;

  border-radius: calc(var(--radius-lg) - 1px);

  padding: 5px;

  background:

    repeating-linear-gradient(48deg, rgba(0,0,0,.45) 0 1px, rgba(255,240,200,.30) 1px 2px, rgba(0,0,0,.15) 2px 4px),

    linear-gradient(155deg, var(--cord-hi), var(--cord-mid) 42%, var(--cord-lo));

  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);

          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);

  -webkit-mask-composite: xor;

          mask-composite: exclude;

  filter: drop-shadow(0 1.5px 1.5px rgba(0,0,0,.8));

  pointer-events: none;

  z-index: 4;

}

/* possibilité de désactiver la broderie sur un cadre précis */

.card.no-bullion::after { display: none; }

.card__header {

  background: rgba(0,0,0,.25);

  border-bottom: 1px solid var(--border);

  padding: .75rem 1.25rem;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 1rem;

}

.card__title {

  font-family: var(--font-head);

  font-size: 23px;

  font-weight: 700;

  letter-spacing: .05em;

  text-transform: uppercase;

  color: var(--accent);

}

.card__body { padding: 1.25rem; }



/* ── Page Title ────────────────────────────────────────── */

.page-title {

  font-family: var(--font-head);

  font-size: 37px;

  font-weight: 700;

  letter-spacing: .05em;

  border-left: 4px solid var(--accent);

  padding-left: 1rem;

  margin-bottom: 1.5rem;

}

.page-title small {

  display: block;

  font-size: 19px;

  font-weight: 400;

  color: var(--text-secondary);

  letter-spacing: .02em;

}



/* ── Tables (forum, roster…) ───────────────────────────── */

.table-wrap { overflow-x: auto; }

table {

  width: 100%;

  border-collapse: collapse;

  font-size: 21px;

}

table th {

  font-family: var(--font-head);

  font-size: 18px;

  font-weight: 700;

  letter-spacing: .08em;

  text-transform: uppercase;

  color: var(--text-muted);

  padding: .6rem 1rem;

  text-align: left;

  border-bottom: 1px solid var(--border);

}

table td {

  padding: .7rem 1rem;

  border-bottom: 1px solid var(--border-dim);

  vertical-align: middle;

}

table tr:last-child td { border-bottom: none; }

table tbody tr:hover { background: var(--bg-hover); }



/* ── Forum specific ────────────────────────────────────── */

.forum-category {

  margin-bottom: 2rem;

  position: relative;

}

.forum-category::after {

  content: "";

  position: absolute;

  inset: 4px;

  border-radius: 6px;

  padding: 5px;

  background:

    repeating-linear-gradient(48deg, rgba(0,0,0,.45) 0 1px, rgba(255,240,200,.30) 1px 2px, rgba(0,0,0,.15) 2px 4px),

    linear-gradient(155deg, var(--cord-hi), var(--cord-mid) 42%, var(--cord-lo));

  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);

          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);

  -webkit-mask-composite: xor;

          mask-composite: exclude;

  filter: drop-shadow(0 1.5px 1.5px rgba(0,0,0,.8));

  pointer-events: none;

  z-index: 4;

}

.forum-category__title {

  font-family: var(--font-head);

  font-size: 19px;

  font-weight: 700;

  letter-spacing: .1em;

  text-transform: uppercase;

  color: var(--text-muted);

  padding: .5rem 1rem;

  background: var(--bg-surface);

  border-radius: var(--radius) var(--radius) 0 0;

  border: 1px solid var(--border-dim);

  border-bottom: none;

}



.forum-row {

  display: grid;

  grid-template-columns: var(--forum-icocol, 2.5rem) 1fr auto 6rem 6rem;

  align-items: center;

  gap: 1rem;

  padding: .85rem 1rem;

  background: var(--bg-card);

  border: 1px solid var(--border-dim);

  border-top: none;

  transition: background .12s;

}

.forum-row:hover { background: var(--bg-hover); }

.forum-row__icon { color: var(--accent); font-size: 26px; text-align: center; line-height: 1; }
.forum-row__icon img { display: block; margin: 0 auto; }

.forum-row__name { font-family: var(--font-head); font-size: 22px; font-weight: 600; }

.forum-row__desc { font-size: 19px; color: var(--text-secondary); margin-top: 2px; }

.forum-row__stats { font-size: 18px; color: var(--text-muted); text-align: right; font-family: var(--font-mono); }

.forum-row__last { font-size: 18px; color: var(--text-muted); text-align: right; }



.topic-row {

  display: grid;

  grid-template-columns: 1fr 5rem 5rem 200px;

  align-items: center;

  gap: 1rem;

  padding: .75rem 1rem;

  border-bottom: 1px solid var(--border-dim);

  transition: background .12s;

}

.topic-row:hover { background: var(--bg-hover); }
.topic-row--pinned { background: rgba(232,160,32,.04); border-left: 3px solid var(--accent); padding-left: calc(1rem - 3px); }
.topic-row--pinned:hover { background: rgba(232,160,32,.08); }
/* séparateur pinned retiré */

.topic-row__title { font-weight: 500; }

.topic-row__title small { display: block; font-size: 18px; color: var(--text-muted); }



.topic-row--closed .topic-row__title { color: var(--text-secondary); }



/* ── Post ──────────────────────────────────────────────── */

.post {

  display: grid;

  grid-template-columns: 180px 1fr;

  border-bottom: 1px solid var(--border-dim);

}

@media (max-width: 640px) {

  .post { grid-template-columns: 1fr; }

}

.post__author {

  background: var(--bg-surface);

  border-right: 1px solid var(--border-dim);

  padding: 1rem;

  text-align: center;

}

.post__author-name {

  font-family: var(--font-head);

  font-size: 15px;

  font-weight: 700;

  display: block;

  margin-bottom: .25rem;

}

.post__author-grade {

  font-size: 12px;

  color: var(--accent);

  font-family: var(--font-mono);

}

.post__author-posts { font-size: 12px; color: var(--text-muted); }

.post__avatar {

  width: 80px;

  height: 80px;

  border-radius: 50%;

  border: 2px solid var(--border);

  margin: 0 auto .5rem;

  object-fit: cover;

  background: var(--bg-base);

}

.post__body {

  padding: 1rem 1.25rem;

}

.post__meta {

  font-size: 12px;

  color: var(--text-muted);

  font-family: var(--font-mono);

  margin-bottom: .75rem;

  border-bottom: 1px solid var(--border-dim);

  padding-bottom: .5rem;

}

.post__content { line-height: 1.75; font-size: 15px; position: relative; /* contexte pour les images en placement libre (position:absolute) */ }

.post__content blockquote.bbcode-quote {

  border-left: 3px solid var(--accent);

  margin: .75rem 0;

  padding: .5rem 1rem;

  background: var(--bg-surface);

  border-radius: 0 var(--radius) var(--radius) 0;

  font-size: 14px;

  color: var(--text-secondary);

}

.post__content blockquote.bbcode-quote cite {

  display: block;

  font-family: var(--font-head);

  font-size: 13px;

  color: var(--accent);

  margin-bottom: .25rem;

}

.post__content pre.bbcode-code {

  background: var(--bg-base);

  border: 1px solid var(--border-dim);

  border-radius: var(--radius);

  padding: .75rem 1rem;

  overflow-x: auto;

  font-family: var(--font-mono);

  font-size: 13px;

  margin: .5rem 0;

}

.post__signature {

  margin-top: 1rem;

  padding-top: .75rem;

  border-top: 1px dashed var(--border-dim);

  font-size: 13px;

  color: var(--text-muted);

}



/* ── Buttons ───────────────────────────────────────────── */

.btn {

  display: inline-flex;

  align-items: center;

  gap: .4rem;

  padding: .45rem 1rem;

  border: 1px solid transparent;

  border-radius: var(--radius);

  font-family: var(--font-head);

  font-size: 20px;

  font-weight: 600;

  letter-spacing: .04em;

  cursor: pointer;

  text-decoration: none;

  transition: background .15s, border-color .15s, color .15s;

  text-transform: uppercase;

}

.btn-primary {

  background: var(--accent);

  color: #0d0f14;

  border-color: var(--accent);

}

.btn-primary:hover { background: #f0c060; color: #0d0f14; border-color: #f0c060; }

.btn-secondary {

  background: transparent;

  color: var(--text-secondary);

  border-color: var(--border-dim);

}

.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }

.btn-danger { background: var(--red); color: #fff; border-color: var(--red); }

.btn-sm { padding: .3rem .65rem; font-size: 18px; }



/* ── Forms ─────────────────────────────────────────────── */

.form-group { margin-bottom: 1rem; }

.form-label {

  display: block;

  font-family: var(--font-head);

  font-size: 13px;

  font-weight: 700;

  letter-spacing: .06em;

  text-transform: uppercase;

  color: var(--text-secondary);

  margin-bottom: .35rem;

}

.form-control {

  width: 100%;

  background: var(--bg-input);

  border: 1px solid var(--border-dim);

  border-radius: var(--radius);

  color: var(--text-primary);

  padding: .55rem .85rem;

  font-size: 15px;

  font-family: var(--font-body);

  transition: border-color .15s;

}

.form-control:focus {

  outline: none;

  border-color: var(--accent);

  box-shadow: 0 0 0 3px var(--accent-glow);

}

textarea.form-control { resize: vertical; min-height: 160px; }

select.form-control option { background: var(--bg-input); color: var(--text-primary); }

/* Cases à cocher & boutons radio : le coche natif du navigateur manque de contraste
   (surtout sur le thème sombre) — on force la couleur d'accent du site + une taille un
   peu plus grande pour qu'on voie clairement si la case est cochée. 2 thèmes via var(). */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
  cursor: pointer;
  vertical-align: middle;
}
/* Case verrouillée (ex. quand « Tout » est sélectionné) : garder le ✓ bien visible. */
input[type="checkbox"]:disabled,
input[type="radio"]:disabled { opacity: .8; }



/* ── Badges & Pills ────────────────────────────────────── */

.badge {

  display: inline-block;

  padding: .15rem .5rem;

  border-radius: 3px;

  font-family: var(--font-mono);

  font-size: 17px;

  font-weight: 600;

  letter-spacing: .04em;

}

.badge-gold    { background: rgba(232,160,32,.2); color: var(--accent); border: 1px solid var(--accent-dim); }

.badge-green   { background: var(--green-dim); color: var(--green); }

.badge-blue    { background: rgba(58,127,200,.15); color: var(--blue); }

.badge-muted   { background: rgba(255,255,255,.05); color: var(--text-muted); }

.badge-red     { background: rgba(200,64,64,.15); color: var(--red); }

.badge-online  { background: var(--green-dim); color: var(--green); animation: pulse 2s ease-in-out infinite; }

@keyframes pulse {

  0%,100% { opacity: 1; }

  50%      { opacity: .6; }

}



/* ── Grade colors ──────────────────────────────────────── */

.grade-general        { color: #f5c518; }

.grade-colonel        { color: #f5c518; }

.grade-lt-colonel     { color: #c8a020; }

.grade-commandant     { color: #c8a020; }

.grade-capitaine      { color: #a0c870; }

.grade-lieutenant     { color: #80b060; }

.grade-sous-lieutenant{ color: #60a050; }

.grade-aspirant       { color: #4a8040; }

.grade-eleve          { color: var(--text-secondary); }

.grade-admin          { color: var(--red); }

.grade-modo           { color: var(--blue); }



/* ── Stats bar ─────────────────────────────────────────── */

.stats-row {

  display: flex;

  gap: 1.5rem;

  flex-wrap: wrap;

  margin-bottom: 1.5rem;

}

.stat-item {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: .1rem;

  background: var(--bg-card);

  border: 1px solid var(--border-dim);

  border-radius: var(--radius);

  padding: .75rem 1.25rem;

  min-width: 100px;

}

.stat-item__value {

  font-family: var(--font-head);

  font-size: 34px;

  font-weight: 700;

  color: var(--accent);

  line-height: 1;

}

.stat-item__label {

  font-size: 17px;

  text-transform: uppercase;

  letter-spacing: .07em;

  color: var(--text-muted);

  font-family: var(--font-mono);

}



/* ── Shoutbox ──────────────────────────────────────────── */

.shoutbox { font-size: 19px; }

.shout-item {

  padding: .4rem 0;

  border-bottom: 1px solid var(--border-dim);

  display: flex;

  gap: .5rem;

}

.shout-item__author { color: var(--accent); font-weight: 600; flex-shrink: 0; }

.shout-item__time   { color: var(--text-muted); font-family: var(--font-mono); font-size: 17px; }

.shoutbox-form { display: flex; gap: .5rem; margin-top: .75rem; }

.shoutbox-form input {

  flex: 1;

  background: var(--bg-input);

  border: 1px solid var(--border-dim);

  color: var(--text-primary);

  padding: .4rem .75rem;

  border-radius: var(--radius);

  font-size: 19px;

}



/* ── Awards ────────────────────────────────────────────── */

.award-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));

  gap: 1rem;

}

.award-card {

  background: var(--bg-card);

  border: 1px solid var(--border-dim);

  border-radius: var(--radius-lg);

  padding: 1rem;

  text-align: center;

  transition: border-color .15s, transform .15s;

}

.award-card:hover {

  border-color: var(--accent);

  transform: translateY(-2px);

}

.award-card img { width: auto; max-width: 100%; height: 92px; object-fit: contain; margin-bottom: .5rem; image-rendering: auto; }

.award-card__name { font-family: var(--font-head); font-size: 20px; font-weight: 700; }

.award-card__count { font-size: 17px; color: var(--text-muted); font-family: var(--font-mono); }



/* ── Cursus ────────────────────────────────────────────── */

.progress-bar {

  height: 6px;

  background: var(--border-dim);

  border-radius: 3px;

  overflow: hidden;

  margin-top: .25rem;

}

.progress-bar__fill {

  height: 100%;

  background: var(--green);

  border-radius: 3px;

  transition: width .4s ease;

}



.module-status-ok      { color: var(--green); }

.module-status-pending { color: var(--accent); }

.module-status-none    { color: var(--text-muted); }



/* ── Pagination ────────────────────────────────────────── */

.pagination {

  display: flex;

  gap: .4rem;

  justify-content: center;

  margin-top: 1.5rem;

  flex-wrap: wrap;

}

.pagination a, .pagination span {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 34px;

  height: 34px;

  border: 1px solid var(--border-dim);

  border-radius: var(--radius);

  font-family: var(--font-mono);

  font-size: 19px;

  color: var(--text-secondary);

  text-decoration: none;

  transition: border-color .12s, color .12s;

}

.pagination a:hover { border-color: var(--accent); color: var(--accent); }

.pagination .current { border-color: var(--accent); background: var(--accent-glow); color: var(--accent); }



/* ── Flash messages ────────────────────────────────────── */

.flash {

  padding: .75rem 1rem;

  border-radius: var(--radius);

  margin-bottom: .75rem;

  font-size: 20px;

  border: 1px solid;

}

.flash--success { background: var(--green-dim); color: var(--green); border-color: rgba(58,184,122,.3); }

.flash--error   { background: rgba(200,64,64,.1); color: var(--red); border-color: rgba(200,64,64,.3); }

.flash--info    { background: rgba(58,127,200,.1); color: var(--blue); border-color: rgba(58,127,200,.3); }



/* ── Online indicator ──────────────────────────────────── */

.online-dot {

  display: inline-block;

  width: 8px; height: 8px;

  border-radius: 50%;

  background: var(--green);

  animation: pulse 2s ease-in-out infinite;

  margin-right: .3rem;

}



/* ── Onglets briefing : hauteur minimale demi-page ─────── */

.briefing-tab-panel .card__body { min-height: 50vh; }



/* ── Chips accordion (IA / waypoints / fréquences) ─────── */

.bf-chips-row { display:flex; flex-wrap:wrap; gap:.35rem; margin-bottom:.65rem; }

.bf-chip {

  display: inline-flex; align-items: center; gap: .3rem;

  padding: .22rem .65rem; border-radius: 12px;

  font-size: 18px; font-weight: 600; font-family: inherit;

  border: 1px solid rgba(255,255,255,.1);

  background: rgba(255,255,255,.04);

  color: var(--text-secondary);

  cursor: pointer; white-space: nowrap;

  transition: color .15s, background .15s, border-color .15s;

}

.bf-chip:hover  { border-color:rgba(232,160,32,.3); color:var(--text-primary); }

.bf-chip.bf-active { background:rgba(232,160,32,.12); color:var(--accent); border-color:rgba(232,160,32,.4); }

.bf-chip small  { font-weight:400; color:var(--text-muted); }

.bf-chip-panel  {

  display: none;

  padding: .7rem .9rem;

  background: var(--bg-card);

  border: 1px solid rgba(232,160,32,.18);

  border-radius: var(--radius);

  margin-bottom: .6rem;

  font-size: 19px;

}



/* ── Briefing rich content (onglets + hub IA) ──────────── */

.briefing-rich-content { font-size: 20px; line-height: 1.85; color: var(--text-secondary); }

.briefing-rich-content p {

  margin: 0 0 .9rem;

  line-height: 1.85;

}

.briefing-rich-content p:last-child { margin-bottom: 0; }

.briefing-rich-content ul,

.briefing-rich-content ol {

  margin: .15rem 0 .9rem 0;

  padding-left: 1.4rem;

}

.briefing-rich-content li {

  margin-bottom: .45rem;

  line-height: 1.75;

}

.briefing-rich-content li::marker { color: var(--accent); }

.briefing-rich-content strong {

  color: var(--text-primary);

  font-weight: 700;

}

.briefing-rich-content em { color: var(--text-muted); font-style: italic; }

.briefing-rich-content h3,

.briefing-rich-content h4 {

  font-family: var(--font-mono);

  font-weight: 700;

  letter-spacing: .07em;

  text-transform: uppercase;

  color: var(--accent);

  margin: 1.1rem 0 .55rem;

  padding-bottom: .3rem;

  border-bottom: 1px solid rgba(232,160,32,.2);

}

.briefing-rich-content h3 { font-size: 18px; }

.briefing-rich-content h4 { font-size: 17px; }

.briefing-rich-content br { line-height: 2.2; }



/* Images dans le contenu riche — neutralise les artefacts de l'éditeur */

.briefing-rich-content img {

  position: static !important; /* annule position:absolute des images "libres" */

  max-width: 100%;

  height: auto;

  display: block;

  margin: .5rem 0;

  border-radius: 6px;

  cursor: default;

}

/* Masque les poignées de redimensionnement de l'éditeur si elles ont été sauvegardées */

.briefing-rich-content .re-resize-handle,

.briefing-rich-content .re-resize-bar { display: none !important; }

.briefing-rich-content .re-resize-box {

  position: static !important;

  display: block !important;

  line-height: normal !important;

}



/* ── Sections IA (hub enricher) ────────────────────────── */

.hub-section {

  margin-bottom: 1.1rem;

  border: 1px solid var(--border-dim);

  border-radius: var(--radius);

  overflow: hidden;

}

.hub-section + .hub-section { margin-top: .75rem; }

.hub-section__header {

  display: flex;

  align-items: center;

  gap: .6rem;

  padding: .55rem .9rem;

  background: rgba(232,160,32,.06);

  border-bottom: 1px solid var(--border-dim);

}

.hub-section__icon { font-size: 21px; flex-shrink: 0; }

.hub-section__title {

  font-family: var(--font-mono);

  font-size: 17px;

  font-weight: 700;

  letter-spacing: .1em;

  text-transform: uppercase;

  color: var(--accent);

}

.hub-section__body {

  padding: .9rem 1rem;

  background: var(--bg-card);

}

.hub-section__body.briefing-rich-content { font-size: 19px; }



/* Bannière IA (validation DO) */

.hub-ia-banner {

  display: flex;

  align-items: center;

  gap: .4rem;

  padding: .35rem .75rem;

  background: rgba(232,160,32,.06);

  border-top: 1px solid rgba(232,160,32,.15);

  font-size: 16px;

  font-family: var(--font-mono);

  color: #e8a020;

  text-transform: uppercase;

  letter-spacing: .06em;

}



/* ── Briefing card ─────────────────────────────────────── */

.briefing-card {

  background: var(--bg-card);

  border: 1px solid var(--border-dim);

  border-radius: var(--radius-lg);

  overflow: hidden;

  display: flex;

  flex-direction: column;

  transition: border-color .15s;

}

.briefing-card__top {

  display: grid;

  grid-template-columns: 1fr auto;

  align-items: start;

  gap: 1rem;

  padding: 1rem 1.25rem;

}

.briefing-card__inner {

  display: contents;

}

.briefing-card:hover { border-color: var(--accent); }

/* Espace entre chaque briefing dans la liste */
.briefings-list > a {

  display: block;

  margin-bottom: .75rem;

}

/* Separateur entre briefings */
.briefing-card + .briefing-card {

  margin-top: 0;

}

.briefing-card__body {

  grid-column: 1 / -1;

  display: grid;

  grid-template-columns: 1fr auto;

  align-items: start;

  gap: 1rem;

  padding: 1rem 1.25rem;

}

.briefing-card__participants {

  grid-column: 1 / -1;

  padding: .45rem 1.25rem .6rem;

  border-top: 1px solid var(--border-dim);

  display: flex;

  flex-wrap: wrap;

  gap: .35rem;

  align-items: center;

  background: var(--bg-surface);

}

.briefing-card__title { font-family: var(--font-head); font-size: 23px; font-weight: 700; }

.briefing-card__meta { font-size: 18px; color: var(--text-muted); font-family: var(--font-mono); margin-top: .25rem; }

.briefing-card__date {

  font-family: var(--font-mono);

  font-size: 26px;

  color: var(--accent);

  text-align: right;

}

.briefing-card__date small { display: block; font-size: 17px; color: var(--text-muted); }



/* ── Profile ───────────────────────────────────────────── */

.profile-header {

  display: flex;

  gap: 1.5rem;

  align-items: flex-start;

  margin-bottom: 1.5rem;

}

.profile-avatar {

  width: 120px;

  height: 120px;

  border-radius: 50%;

  border: 3px solid var(--accent);

  object-fit: cover;

  flex-shrink: 0;

  background: var(--bg-card);

}

.profile-name {

  font-family: var(--font-head);

  font-size: 38px;

  font-weight: 700;

  line-height: 1;

  margin-bottom: .25rem;

}

.profile-grade {

  font-family: var(--font-mono);

  font-size: 20px;

  color: var(--accent);

  margin-bottom: .75rem;

}



/* ── Site footer ───────────────────────────────────────── */

.site-footer {

  background: #090b10;

  border-top: 1px solid var(--border);

  padding: 2rem 0 1rem;

  margin-top: auto;

  font-size: 19px;

}

.site-footer__inner {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 1.5rem;

}

@media (max-width: 760px) {

  .site-footer__inner { grid-template-columns: 1fr 1fr; }

}

.site-footer__col {

  display: flex;

  flex-direction: column;

  gap: .35rem;

  color: var(--text-muted);

}

.site-footer__col strong { color: var(--text-secondary); font-family: var(--font-head); letter-spacing: .04em; }

.site-footer__col a { color: var(--text-muted); }

.site-footer__col a:hover { color: var(--accent); }

.site-footer__col--right { text-align: right; }

.footer-badge {

  display: inline-block;

  background: var(--accent-glow);

  border: 1px solid var(--accent-dim);

  color: var(--accent);

  font-family: var(--font-mono);

  font-size: 18px;

  font-weight: 700;

  letter-spacing: .1em;

  padding: .3rem .75rem;

  border-radius: var(--radius);

  margin-bottom: .5rem;

}



/* ── Admin ─────────────────────────────────────────────── */

.admin-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

  gap: 1rem;

  margin-bottom: 1.5rem;

}

.admin-stat {

  background-color: var(--bg-card);

  /* feutre tissé subtil */

  background-image:

    repeating-linear-gradient(45deg, rgba(255,255,255,.022) 0 1px, transparent 1px 3px),

    repeating-linear-gradient(-45deg, rgba(0,0,0,.10) 0 1px, transparent 1px 3px),

    /* 4 rivets aux angles */

    radial-gradient(circle at 11px 11px, #697789 0 2.4px, rgba(0,0,0,.5) 2.6px 3.4px, transparent 3.6px),

    radial-gradient(circle at calc(100% - 11px) 11px, #697789 0 2.4px, rgba(0,0,0,.5) 2.6px 3.4px, transparent 3.6px),

    radial-gradient(circle at 11px calc(100% - 11px), #697789 0 2.4px, rgba(0,0,0,.5) 2.6px 3.4px, transparent 3.6px),

    radial-gradient(circle at calc(100% - 11px) calc(100% - 11px), #697789 0 2.4px, rgba(0,0,0,.5) 2.6px 3.4px, transparent 3.6px);

  background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat;

  border: 1px solid var(--metal, #46566a);

  border-radius: var(--radius-lg);

  padding: 1.4rem 1.25rem;

}

.admin-stat__value {

  font-family: var(--font-head);

  font-size: 42px;

  font-weight: 700;

  color: var(--accent);

}

.admin-stat__label {

  font-size: 18px;

  color: var(--text-muted);

  text-transform: uppercase;

  letter-spacing: .07em;

  font-family: var(--font-mono);

}



/* ── Responsive tweaks ─────────────────────────────────── */

@media (max-width: 640px) {

  .forum-row { grid-template-columns: var(--forum-icocol, 2.5rem) 1fr; }

  .forum-row__stats, .forum-row__last { display: none; }

  .topic-row { grid-template-columns: 1fr 5rem; }

  .award-grid { grid-template-columns: repeat(2, 1fr); }



/* Permalink discret */

.permalink {

  color: var(--text-muted);

  text-decoration: none;

  font-family: var(--font-mono);

  font-size: 17px;

  padding: .15rem .35rem;

  border-radius: 3px;

  transition: background .15s, color .15s;

}

.permalink:hover { background: var(--bg-hover); color: var(--accent); }



/* Pagination : flèches navig */

.pagination a, .pagination span.current {

  min-width: 2rem;

  padding: .35rem .55rem;

  text-align: center;

  display: inline-flex;

  align-items: center;

  justify-content: center;

}



/* Posts en mobile : passer en colonne */

@media (max-width: 760px) {

  .forum-post__grid {

    grid-template-columns: 1fr !important;

  }

  .forum-post__grid > div:first-child {

    border-right: none !important;

    border-bottom: 1px solid var(--border-dim);

    display: grid;

    grid-template-columns: 60px 1fr;

    gap: .75rem;

    align-items: center;

    text-align: left !important;

  }

  .forum-post__grid > div:first-child img {

    width: 50px !important;

    height: 50px !important;

    margin-bottom: 0 !important;

  }

}



/* Notification badge */

.notif-badge {

  display: inline-block;

  min-width: 18px;

  padding: 0 5px;

  background: var(--accent);

  color: var(--bg);

  border-radius: 10px;

  font-size: 17px;

  font-family: var(--font-mono);

  font-weight: 700;

  text-align: center;

  line-height: 18px;

  vertical-align: middle;

}



/* Aperçu BBCode */

#preview-area {

  animation: fadeIn .15s ease-out;

}

@keyframes fadeIn {

  from { opacity: 0; transform: translateY(-4px); }

  to   { opacity: 1; transform: translateY(0); }

}



/* Citation BBCode (existait peut-être déjà — version sûre) */

.bbcode-quote {

  border-left: 3px solid var(--accent);

  padding: .5rem .75rem;

  margin: .5rem 0;

  background: var(--bg-surface);

  font-size: 20px;

  color: var(--text-secondary);

}

.bbcode-quote cite {

  display: block;

  font-size: 17px;

  font-family: var(--font-mono);

  font-style: normal;

  color: var(--accent);

  margin-bottom: .25rem;

}



.bbcode-code {

  background: var(--bg-surface);

  border: 1px solid var(--border-dim);

  padding: .5rem .75rem;

  border-radius: var(--radius);

  overflow-x: auto;

  font-size: 19px;

}



}



/* ── Print / PDF ────────────────────────────────────────── */

@media print {

  nav, header, footer, .no-print, .btn, aside, .site-nav,

  .site-header, #hub-ia-panel, .shoutbox { display: none !important; }

  .kneeboard { page-break-after: always; break-after: page; }

  body { background: white !important; color: black !important; }

  .kneeboard * { color: black !important; background: white !important; border-color: #ccc !important; }

  a { color: black !important; text-decoration: none !important; }

}



/* ── Emoji Picker ────────────────────────────────────────── */
#re-ep {
  display: none;
  position: fixed;
  z-index: 9999;
  width: 320px;
  max-height: 380px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
  flex-direction: column;
  overflow: hidden;
}
#re-ep.open { display: flex; }
.re-ep-search { padding: .5rem; border-bottom: 1px solid var(--border-dim); }
.re-ep-search input {
  width: 100%;
  background: var(--bg-surface);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius);
  color: var(--text-primary);
  padding: .3rem .6rem;
  font-size: 13px;
  outline: none;
}
.re-ep-cats {
  display: flex;
  gap: .25rem;
  padding: .4rem .5rem;
  border-bottom: 1px solid var(--border-dim);
  overflow-x: auto;
  flex-shrink: 0;
}
.re-ep-cat {
  cursor: pointer;
  font-size: 16px;
  padding: .2rem .3rem;
  border-radius: 4px;
  transition: background .1s;
  white-space: nowrap;
}
.re-ep-cat:hover, .re-ep-cat.active { background: var(--bg-hover); }
.re-ep-body {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  padding: .4rem;
  overflow-y: auto;
  flex: 1;
}
.re-ep-e {
  cursor: pointer;
  font-size: 20px;
  text-align: center;
  padding: .2rem;
  border-radius: 4px;
  transition: background .1s, transform .1s;
  line-height: 1.4;
}
.re-ep-e:hover { background: var(--bg-hover); transform: scale(1.2); }
.re-ep-foot {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .6rem;
  border-top: 1px solid var(--border-dim);
  font-size: 12px;
  color: var(--text-muted);
  flex-shrink: 0;
}
#re-ep-pe { font-size: 20px; }

/* === Barre de navigation sous le logo (la barre orange la separe du header) === */
.site-navbar { position: relative; background: linear-gradient(180deg,#0b0e16 0%,#0d111a 100%); border-top: 2px solid var(--accent); }
.site-navbar > .container { display: flex; align-items: center; padding-top: .1rem; padding-bottom: .1rem; }
.site-navbar .site-nav { margin-left: 0; flex-wrap: wrap; }
@media (max-width: 760px) {
  .site-navbar > .container { padding-left: 0; padding-right: 0; }
}

/* Barre de navigation TOUJOURS sombre (même en mode JOUR) → sur ORDINATEUR, en thème clair, les
   liens du menu doivent rester CLAIRS ; sinon --text-secondary (#2a3248 foncé) devient illisible
   sur le fond sombre de la barre. Sur MOBILE (≤760px) le menu s'ouvre sur fond CLAIR : on n'y
   touche pas (les liens y restent foncés, donc lisibles sur le clair). */
@media (min-width: 761px) {
  [data-theme="light"] .site-navbar .site-nav__link { color: #8b97ab; }
  [data-theme="light"] .site-navbar .site-nav__link:hover,
  [data-theme="light"] .site-navbar .site-nav__link.active { color: #f0a830; background: rgba(240,168,48,.14); }
}

/* === Anti-débordement du contenu des cartes (texte masqué par le bord droit) === */
.card { min-width: 0; }
.card__header { flex-wrap: wrap; }
.card__title { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.card__body { overflow-wrap: anywhere; word-break: break-word; }
.card__body img, .card__body video, .card__body iframe, .card__body table { max-width: 100%; }
.card__body pre, .card__body code { white-space: pre-wrap; overflow-wrap: anywhere; }
/* Cellules de la home : autoriser le rétrécissement (évite le débordement en colonnes) */
.home-cell, .home-cell > .card, .home-cell > div { min-width: 0; }

/* === Pagination soignee (libelles + legende, integree au site) === */
.pagination { display:flex; gap:.35rem; justify-content:center; align-items:center; flex-wrap:wrap; margin:1.25rem 0 .35rem; }
.pagination a, .pagination span.current { width:auto; min-width:36px; height:34px; padding:0 .55rem; border:1px solid var(--border-dim); border-radius:var(--radius); display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:14px; line-height:1; color:var(--text-secondary); text-decoration:none; background:var(--bg-card); transition:background .15s,border-color .15s,color .15s; }
.pagination a:hover { border-color:var(--accent); color:var(--accent); background:var(--bg-hover); }
.pagination span.current { border-color:var(--accent); background:var(--accent-glow); color:var(--accent); font-weight:700; }
.pagination .pg-nav { font-family:var(--font-head); font-size:13px; letter-spacing:.02em; padding:0 .85rem; }
.pagination .pg-ellipsis { width:auto; min-width:0; height:34px; border:none; background:none; color:var(--text-muted); display:inline-flex; align-items:center; padding:0 .15rem; }
.pagination-caption { text-align:center; font-size:12px; color:var(--text-muted); font-family:var(--font-mono); letter-spacing:.05em; margin:0 0 1.1rem; }
/* === Lisibilite briefing importe / preview (2026-06-22) === */
.briefing-rich-content { font-size: 15px !important; line-height: 1.6 !important; }
.briefing-rich-content p { line-height: 1.6 !important; margin-bottom: .7rem !important; }
.briefing-rich-content h3 { font-size: 16px !important; }
.briefing-rich-content h4 { font-size: 15px !important; }
.briefing-rich-content br { line-height: 1.5 !important; }
.bf-chip-panel { font-size: 14px !important; max-height: 460px; overflow: auto; }
.hub-section__body.briefing-rich-content { font-size: 15px !important; }
/* Tables responsives dans le contenu importe */
.briefing-rich-content table { display: block; overflow-x: auto; max-width: 100%; font-size: 13px !important; border-collapse: collapse; }
.briefing-rich-content table th, .briefing-rich-content table td { padding: .35rem .55rem !important; white-space: nowrap; }
/* Sections empilees du preview */
.prev-section { scroll-margin-top: 90px; }
.prev-section + .prev-section { border-top: 1px solid var(--border-dim); margin-top: 1.25rem; padding-top: 1.25rem; }
.prev-section__title { font-family: var(--font-head); font-size: 15px; font-weight: 700; letter-spacing:.04em; color: var(--accent); margin: 0 0 .75rem; display:flex; align-items:center; gap:.5rem; }

/* === Fix Firefox : piece 3D du logo accueil (filter dans preserve-3d aplatit le 3D) === */
.hero-coin { filter: brightness(1.12) drop-shadow(0 2px 6px rgba(0,0,0,.55)); }
.hero-coin__inner { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; }
.hero-coin__face { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.hero-coin__front { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); }
.hero-coin__face img { filter: none !important; }

/* ── Icônes vectorielles des titres de page (PageIcon svg:…) ─────────── */
.page-icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.125em;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
}
/* Dans un titre de page, l'icône reprend la couleur d'accent du site. */
.page-title > .page-icon { color: var(--accent, #e8a020); }
/* Aperçu dans le dashboard : taille fixe, quelle que soit la police. */
.icon-preview > .page-icon { width: 22px; height: 22px; color: var(--accent, #e8a020); vertical-align: middle; }