/* ═══════════════════════════════════════════════
   Patrice-LalumiereLabs.com — Global CSS
   Palette : Bleu acier · Or/Ambre · Blanc tech
   Inspiré du logo PL : orbe bleue + sweep doré
═══════════════════════════════════════════════ */

:root {
  /* Couleurs logo */
  --bleu-deep:   #0B1E3D;
  --bleu-acier:  #1A3A6B;
  --bleu-clair:  #2A6FC7;
  --bleu-vif:    #38A3F5;
  --bleu-pale:   #DBEAFE;
  --or:          #C8960C;
  --or-vif:      #F0B429;
  --or-pale:     #FEF3C7;
  --or-mid:      #FDE68A;
  --blanc:       #F8FAFC;
  --blanc-2:     #F1F5F9;
  --blanc-3:     #E2E8F0;
  --gris:        #64748B;
  --gris-clair:  #94A3B8;
  --gris-pale:   #CBD5E1;
  --noir:        #0B1220;
  --noir-2:      #111827;
  --vert:        #059669;
  --vert-pale:   #D1FAE5;
  --rouge:       #DC2626;
  --rouge-pale:  #FEE2E2;
  --violet:      #7C3AED;
  --violet-pale: #EDE9FE;

  /* Typo */
  --fd: 'Plus Jakarta Sans', sans-serif;
  --fb: 'Outfit', sans-serif;
  --fm: 'JetBrains Mono', 'Courier New', monospace;

  /* Géométrie */
  --r:   6px;
  --rl:  12px;
  --rx:  20px;
  --nav: 68px;

  /* Ombres */
  --sh-sm: 0 1px 4px rgba(11,30,61,.08), 0 1px 2px rgba(11,30,61,.04);
  --sh:    0 4px 20px rgba(11,30,61,.12), 0 2px 8px rgba(11,30,61,.06);
  --sh-lg: 0 12px 48px rgba(11,30,61,.18), 0 4px 16px rgba(11,30,61,.10);
  --sh-or: 0 4px 20px rgba(200,150,12,.30);

  /* Dégradés */
  --grad-hero:    linear-gradient(145deg, #0B1E3D 0%, #1A3A6B 40%, #0F2D5A 100%);
  --grad-or:      linear-gradient(135deg, #C8960C 0%, #F0B429 50%, #C8960C 100%);
  --grad-acier:   linear-gradient(135deg, #1A3A6B 0%, #2A6FC7 100%);
  --grad-light:   linear-gradient(135deg, #F8FAFC 0%, #EEF4FF 50%, #FFF9EE 100%);

  --tr: 0.22s cubic-bezier(.4,0,.2,1);
}

/* ─── RESET ─── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family: var(--fb);
  background: var(--blanc);
  color: var(--noir);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { text-decoration: none; color: inherit; }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--blanc-2); }
::-webkit-scrollbar-thumb { background: var(--bleu-acier); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--or-vif); }

/* ─── NAV ─── */
nav#mainNav {
  position: fixed; top:0; left:0; right:0; z-index:1000;
  height: var(--nav);
  background: rgba(11,30,61,.97);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(200,150,12,.18);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 2.5rem;
  transition: box-shadow var(--tr);
}
nav#mainNav.scrolled { box-shadow: 0 4px 24px rgba(0,0,0,.35); }

.nav-logo {
  display: flex; align-items: center; gap: .75rem; text-decoration: none;
}
.nav-logo img { height: 38px; width: auto; border-radius: 6px; }
.nav-logo-text {
  font-family: var(--fd); font-size: 1rem; font-weight: 800;
  letter-spacing: -.02em; color: #fff; line-height: 1.1;
}
.nav-logo-text span { color: var(--or-vif); }
.nav-logo-sub {
  font-family: var(--fm); font-size: .55rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--gris-clair); margin-top: .1rem;
}

.nav-links { display:flex; gap:0; list-style:none; }
.nav-links a {
  display: block; padding: .45rem .9rem;
  font-size: .8rem; font-weight: 500; letter-spacing: .01em;
  color: var(--gris-clair); transition: color var(--tr); border-radius: var(--r);
}
.nav-links a:hover { color: #fff; }
.nav-links a.active { color: var(--or-vif); font-weight: 600; }
.nav-links a.accent { color: var(--bleu-vif); }

.nav-brands {
  display: flex; align-items: center; gap: .5rem;
  border-left: 1px solid rgba(255,255,255,.1);
  padding-left: 1rem; margin-left: .5rem;
}
.brand-pill {
  font-family: var(--fm); font-size: .62rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  padding: .2rem .65rem; border-radius: 20px;
  transition: all var(--tr);
}
.brand-zyneris {
  background: rgba(42,111,199,.2); color: var(--bleu-vif);
  border: 1px solid rgba(42,111,199,.35);
}
.brand-zyneris:hover { background: rgba(42,111,199,.35); color: #fff; }
.brand-vocarya {
  background: rgba(200,150,12,.15); color: var(--or-vif);
  border: 1px solid rgba(200,150,12,.3);
}
.brand-vocarya:hover { background: rgba(200,150,12,.3); color: #fff; }

.nav-cta { display:flex; gap:.65rem; align-items:center; }

/* ─── BOUTONS ─── */
.btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .55rem 1.3rem; border-radius: var(--r);
  font-family: var(--fb); font-size: .82rem; font-weight: 600;
  cursor: pointer; border: none; transition: all var(--tr);
  text-decoration: none; white-space: nowrap; letter-spacing: .01em;
}
.btn-or {
  background: var(--grad-or); color: var(--bleu-deep);
  box-shadow: var(--sh-or);
}
.btn-or:hover { filter: brightness(1.1); transform: translateY(-1px); box-shadow: 0 6px 24px rgba(200,150,12,.45); }
.btn-acier {
  background: var(--grad-acier); color: #fff;
  box-shadow: 0 4px 16px rgba(42,111,199,.35);
}
.btn-acier:hover { filter: brightness(1.1); transform: translateY(-1px); }
.btn-outline {
  background: transparent; border: 1.5px solid rgba(255,255,255,.25); color: #fff;
}
.btn-outline:hover { border-color: var(--or-vif); color: var(--or-vif); }
.btn-outline-dark {
  background: transparent; border: 1.5px solid var(--blanc-3); color: var(--noir);
}
.btn-outline-dark:hover { border-color: var(--bleu-clair); color: var(--bleu-clair); }
.btn-ghost {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); color: #fff;
}
.btn-ghost:hover { background: rgba(255,255,255,.15); }

/* ─── PAGE WRAP ─── */
.page-wrap { padding-top: var(--nav); min-height: 100vh; }

/* ─── PAGE HEADER ─── */
.page-header-dark {
  background: var(--grad-hero); color: #fff;
  border-bottom: 1px solid rgba(200,150,12,.15);
  padding: 3.5rem 5rem;
  position: relative; overflow: hidden;
}
.page-header-dark::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 70% 50%, rgba(42,111,199,.12), transparent 60%);
}
.page-header-light {
  background: var(--grad-light);
  border-bottom: 1px solid var(--blanc-3);
  padding: 3.5rem 5rem;
}
.page-header-inner { max-width: 1280px; margin: 0 auto; position: relative; z-index: 1; }
.page-breadcrumb {
  font-family: var(--fm); font-size: .65rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--or-vif); margin-bottom: .75rem;
  display: flex; align-items: center; gap: .5rem;
}
.page-breadcrumb::before {
  content: ''; display: block; width: 1.5rem; height: 1.5px; background: var(--or-vif);
}
.page-title-h1 {
  font-family: var(--fd); font-size: clamp(1.8rem,3.5vw,2.8rem);
  font-weight: 800; letter-spacing: -.04em; line-height: 1.1; margin-bottom: .5rem;
}
.page-subtitle-p { font-size: 1rem; opacity: .75; line-height: 1.65; }

/* ─── SECTION ─── */
.section { padding: 5rem; max-width: 1280px; margin: 0 auto; }
.section-sm { padding: 3rem 5rem; max-width: 1280px; margin: 0 auto; }

.section-label {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--fm); font-size: .65rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--or); background: var(--or-pale); padding: .25rem .75rem; border-radius: 20px;
  margin-bottom: 1.1rem; border: 1px solid var(--or-mid);
}
.section-label.blue {
  color: var(--bleu-clair); background: var(--bleu-pale);
  border-color: rgba(42,111,199,.3);
}
.section-title {
  font-family: var(--fd); font-size: clamp(1.8rem,3vw,2.5rem);
  font-weight: 800; letter-spacing: -.04em; line-height: 1.15;
  margin-bottom: 1rem; color: var(--bleu-deep);
}
.section-sub {
  font-size: 1.02rem; color: var(--gris); line-height: 1.75;
  max-width: 580px; margin-bottom: 3rem;
}
.sub-title {
  font-family: var(--fd); font-size: 1.1rem; font-weight: 700;
  letter-spacing: -.02em; margin-bottom: 1rem; margin-top: 2rem; color: var(--bleu-deep);
}
.sub-title:first-child { margin-top: 0; }
.divider { border: none; border-top: 1px solid var(--blanc-3); }

/* ─── CARDS ─── */
.card {
  background: #fff; border: 1px solid var(--blanc-3); border-radius: var(--rl);
  padding: 1.5rem; box-shadow: var(--sh-sm); transition: all var(--tr);
}
.card:hover { box-shadow: var(--sh); transform: translateY(-2px); }
.card-dark {
  background: var(--bleu-deep); border: 1px solid rgba(200,150,12,.2);
  border-radius: var(--rl); padding: 1.5rem; color: #fff;
}
.card-gold { border-top: 3px solid var(--or-vif); }
.card-blue { border-top: 3px solid var(--bleu-vif); }

/* ─── TAGS ─── */
.tag {
  font-family: var(--fm); font-size: .63rem; letter-spacing: .05em;
  padding: .2rem .6rem; border-radius: 20px; display: inline-block;
  background: var(--or-pale); color: #7C4D00; border: 1px solid var(--or-mid);
}
.tag-blue { background: var(--bleu-pale); color: #1E40AF; border-color: #BFDBFE; }
.tag-green { background: var(--vert-pale); color: #065F46; border-color: #A7F3D0; }
.tag-red { background: var(--rouge-pale); color: #991B1B; border-color: #FECACA; }
.tag-violet { background: var(--violet-pale); color: #5B21B6; border-color: #DDD6FE; }
.tags-row { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }

/* ─── STATUS ─── */
.status {
  font-family: var(--fm); font-size: .63rem; letter-spacing: .05em;
  padding: .22rem .6rem; border-radius: 20px; display: inline-block; font-weight: 700;
}
.status-live    { background: var(--vert-pale); color: #065F46; }
.status-active  { background: var(--or-pale); color: #7C4D00; }
.status-done    { background: var(--vert-pale); color: #065F46; }
.status-progress{ background: var(--bleu-pale); color: #1E40AF; }
.status-locked  { background: var(--blanc-2); color: var(--gris); }

/* ─── PROGRESS ─── */
.progress-wrap { background: var(--blanc-3); border-radius: 4px; height: 5px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--grad-or); border-radius: 4px; transition: width .8s ease; }

/* ─── FORMS ─── */
.form-group { display: flex; flex-direction: column; gap: .42rem; }
.form-group label {
  font-family: var(--fm); font-size: .65rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gris); font-weight: 500;
}
.form-group input,
.form-group textarea,
.form-group select {
  background: #fff; border: 1.5px solid var(--blanc-3);
  border-radius: var(--r); padding: .72rem 1rem;
  color: var(--noir); font-family: var(--fb); font-size: .9rem;
  outline: none; transition: border-color var(--tr), box-shadow var(--tr); width: 100%;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--or-vif); box-shadow: 0 0 0 3px rgba(200,150,12,.12);
}
.form-group textarea { resize: vertical; min-height: 130px; }
.form-row { display: flex; flex-direction: column; gap: 1.1rem; }

/* ─── FILTER INPUTS ─── */
.filter-input {
  background: #fff; border: 1.5px solid var(--blanc-3); border-radius: var(--r);
  padding: .48rem .9rem; color: var(--noir); font-family: var(--fb);
  font-size: .8rem; outline: none; transition: border-color var(--tr);
}
.filter-input:focus { border-color: var(--or-vif); }
.filter-input.search { flex:1; min-width:200px; }

/* ─── TABLE ─── */
.data-table {
  background: #fff; border: 1px solid var(--blanc-3); border-radius: var(--rl);
  overflow: hidden; box-shadow: var(--sh-sm); width: 100%;
}
.data-table table { width: 100%; border-collapse: collapse; }
.data-table th {
  text-align: left; padding: .88rem 1.25rem;
  font-family: var(--fm); font-size: .63rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gris); border-bottom: 1px solid var(--blanc-3);
  background: var(--blanc-2); cursor: pointer; user-select: none;
}
.data-table th:hover { color: var(--bleu-deep); }
.data-table td {
  padding: .88rem 1.25rem; font-size: .85rem;
  border-bottom: 1px solid var(--blanc-2); vertical-align: middle;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--blanc); }

/* ─── NOTE BADGES ─── */
.note-badge {
  display: inline-block; font-family: var(--fm); font-size: .73rem;
  font-weight: 700; padding: .18rem .52rem; border-radius: 20px; min-width: 40px; text-align: center;
}
.note-A { background: var(--vert-pale); color: #065F46; }
.note-B { background: var(--or-pale); color: #7C4D00; }
.note-C { background: var(--bleu-pale); color: #1E40AF; }
.note-D { background: var(--rouge-pale); color: #991B1B; }

/* ─── RESSOURCES LIST ─── */
.ressources-list {
  background: #fff; border: 1px solid var(--blanc-3);
  border-radius: var(--rl); overflow: hidden; box-shadow: var(--sh-sm);
}
.ressource-item {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.5rem; border-bottom: 1px solid var(--blanc-2);
  transition: background var(--tr); cursor: pointer;
}
.ressource-item:last-child { border-bottom: none; }
.ressource-item:hover { background: var(--blanc); }
.ressource-ext {
  font-family: var(--fm); font-size: .62rem; font-weight: 700;
  padding: .22rem .52rem; border-radius: 6px; min-width: 42px; text-align: center;
}
.ext-pdf  { background: var(--rouge-pale); color: #991B1B; }
.ext-zip  { background: var(--bleu-pale); color: #1E40AF; }
.ext-html { background: var(--or-pale); color: #7C4D00; }
.ext-md   { background: var(--vert-pale); color: #065F46; }
.ressource-name { flex:1; font-size: .875rem; color: var(--noir); }
.ressource-meta { font-family: var(--fm); font-size: .63rem; color: var(--gris-clair); white-space: nowrap; }
.ressource-dl {
  width: 30px; height: 30px; background: var(--blanc-2); border: 1px solid var(--blanc-3);
  border-radius: var(--r); display: flex; align-items: center; justify-content: center;
  font-size: .8rem; color: var(--gris); transition: all var(--tr); flex-shrink: 0;
}
.ressource-item:hover .ressource-dl { background: var(--or-pale); border-color: var(--or-mid); color: #7C4D00; }

/* ─── DASHBOARD LAYOUT ─── */
.dashboard { max-width: 1280px; margin: 0 auto; padding: 2.5rem 5rem; }
.dashboard-grid { display: grid; grid-template-columns: 260px 1fr; gap: 2rem; }

/* ─── SIDEBAR ─── */
.sidebar { position: sticky; top: 88px; height: fit-content; }
.sidebar-menu {
  background: var(--bleu-deep); border: 1px solid rgba(200,150,12,.18);
  border-radius: var(--rl); overflow: hidden; box-shadow: var(--sh);
}
.sidebar-section {
  padding: 1rem 1.25rem .5rem;
  font-family: var(--fm); font-size: .58rem; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(200,150,12,.6);
}
.sidebar-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .72rem 1.25rem; font-size: .84rem; font-weight: 500;
  color: var(--gris-clair); cursor: pointer; transition: all var(--tr);
  border-left: 2.5px solid transparent; text-decoration: none;
}
.sidebar-item:hover { color: #fff; background: rgba(255,255,255,.05); }
.sidebar-item.active {
  color: var(--or-vif); border-left-color: var(--or-vif);
  background: rgba(200,150,12,.08); font-weight: 600;
}
.sidebar-item.danger { color: #EF4444; }
.sidebar-icon { font-size: .9rem; width: 18px; text-align: center; }
.sidebar-badge {
  margin-left: auto; background: var(--or-vif); color: var(--bleu-deep);
  font-family: var(--fm); font-size: .58rem; font-weight: 800;
  padding: .08rem .42rem; border-radius: 20px;
}

/* ─── KPI CARDS ─── */
.kpi-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; margin-bottom: 2rem; }
.kpi-grid-3 { grid-template-columns: repeat(3,1fr); }
.kpi-grid-2 { grid-template-columns: repeat(2,1fr); }
.kpi-card {
  background: #fff; border: 1px solid var(--blanc-3);
  border-radius: var(--rl); padding: 1.3rem 1.5rem;
  box-shadow: var(--sh-sm); transition: all var(--tr);
}
.kpi-card:hover { box-shadow: var(--sh); transform: translateY(-1px); }
.kpi-label { font-family: var(--fm); font-size: .63rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); margin-bottom: .45rem; }
.kpi-value { font-family: var(--fd); font-size: 1.9rem; font-weight: 800; color: var(--bleu-deep); line-height: 1; margin-bottom: .25rem; letter-spacing: -.04em; }
.kpi-value-sm { font-size: 1.2rem; }
.kpi-change { font-size: .73rem; color: var(--vert); font-weight: 600; }
.kpi-change.down { color: var(--rouge); }

/* ─── BAR CHART ─── */
.chart-container {
  background: #fff; border: 1px solid var(--blanc-3); border-radius: var(--rl);
  padding: 1.5rem; box-shadow: var(--sh-sm);
}
.chart-title-sm {
  font-family: var(--fm); font-size: .63rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--gris); margin-bottom: 1.25rem;
}
.bar-chart { display:flex; align-items:flex-end; gap:.5rem; height:110px; }
.bar-item { flex:1; display:flex; flex-direction:column; align-items:center; gap:.35rem; height:100%; justify-content:flex-end; }
.bar { width:100%; background:var(--or-mid); border-radius:4px 4px 0 0; transition:background var(--tr); }
.bar:hover { background:var(--or-vif); }
.bar-label { font-family:var(--fm); font-size:.58rem; color:var(--gris); }
.charts-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:2rem; }

/* ─── TABS ─── */
.tabs { display:flex; border-bottom:2px solid var(--blanc-3); margin-bottom:1.5rem; }
.tab {
  padding: .65rem 1.2rem; font-size: .8rem; font-weight: 600;
  color: var(--gris); cursor: pointer; border-bottom: 2px solid transparent;
  margin-bottom: -2px; transition: all var(--tr);
}
.tab:hover { color: var(--bleu-deep); }
.tab.active { color: var(--or); border-bottom-color: var(--or-vif); }
.tab-content { display:none; }
.tab-content.active { display:block; }

/* ─── QUIZ ─── */
.quiz-card {
  background:#fff; border:1px solid var(--blanc-3); border-radius:var(--rl);
  padding:1.5rem 2rem; margin-bottom:1rem; box-shadow:var(--sh-sm);
}
.quiz-q { font-weight:700; margin-bottom:1rem; line-height:1.6; color:var(--bleu-deep); }
.quiz-options { display:flex; flex-direction:column; gap:.5rem; }
.quiz-option {
  padding:.72rem 1rem; background:var(--blanc); border:1.5px solid var(--blanc-3);
  border-radius:var(--r); cursor:pointer; font-size:.875rem; transition:all var(--tr);
  display:flex; align-items:center; gap:.75rem; color:var(--noir);
}
.quiz-option:hover { background:var(--or-pale); border-color:var(--or-mid); color:#7C4D00; }
.quiz-option.correct { background:var(--vert-pale); border-color:#6EE7B7; color:#065F46; pointer-events:none; }
.quiz-option.wrong   { background:var(--rouge-pale); border-color:#FCA5A5; color:#991B1B; pointer-events:none; }
.quiz-letter { font-family:var(--fm); font-size:.68rem; width:24px; height:24px; border-radius:6px; background:var(--blanc-3); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-weight:700; }

/* ─── NOTIFICATIONS ─── */
.notif-list { display:flex; flex-direction:column; gap:.65rem; }
.notif-item {
  display:flex; gap:.85rem; align-items:flex-start; padding:.9rem 1.1rem;
  background:#fff; border:1px solid var(--blanc-3); border-radius:var(--rl);
  font-size:.84rem; box-shadow:var(--sh-sm);
}
.notif-dot { width:8px; height:8px; border-radius:50%; margin-top:.42rem; flex-shrink:0; }
.notif-dot.or    { background:var(--or-vif); }
.notif-dot.green { background:var(--vert); }
.notif-dot.blue  { background:var(--bleu-vif); }
.notif-text { flex:1; line-height:1.5; color:var(--noir); }
.notif-time { font-family:var(--fm); font-size:.62rem; color:var(--gris-clair); white-space:nowrap; }

/* ─── AVATAR ─── */
.avatar {
  border-radius:50%; background:var(--or-pale); display:inline-flex;
  align-items:center; justify-content:center; font-family:var(--fm);
  font-weight:700; color:#7C4D00; flex-shrink:0;
}
.avatar-sm { width:32px; height:32px; font-size:.63rem; }
.avatar-md { width:42px; height:42px; font-size:.8rem; }
.avatar-lg { width:60px; height:60px; font-size:1rem; }

/* ─── MODAL ─── */
.modal-overlay {
  position:fixed; inset:0; background:rgba(11,18,32,.7);
  backdrop-filter:blur(8px); z-index:2000;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity var(--tr);
}
.modal-overlay.open { opacity:1; pointer-events:all; }
.modal {
  background:#fff; border:1px solid var(--blanc-3);
  border-radius:var(--rx); padding:2.5rem; width:400px; max-width:92vw;
  box-shadow:var(--sh-lg); transform:translateY(10px); transition:transform var(--tr);
}
.modal-overlay.open .modal { transform:translateY(0); }
.modal-title { font-family:var(--fd); font-size:1.5rem; font-weight:800; letter-spacing:-.04em; margin-bottom:.3rem; color:var(--bleu-deep); }
.modal-sub { font-size:.84rem; color:var(--gris); margin-bottom:1.75rem; }
.modal-footer { margin-top:1.5rem; text-align:center; font-size:.8rem; color:var(--gris); }
.modal-footer a { color:var(--or); font-weight:700; }
.role-toggle {
  display:flex; border:1.5px solid var(--blanc-3); border-radius:var(--r);
  overflow:hidden; margin-bottom:1.5rem; background:var(--blanc-2);
}
.role-btn {
  flex:1; padding:.58rem; background:transparent; border:none;
  color:var(--gris); font-family:var(--fb); font-size:.8rem; font-weight:600;
  cursor:pointer; transition:all var(--tr);
}
.role-btn.active { background:#fff; color:var(--bleu-deep); box-shadow:var(--sh-sm); border-radius:var(--r); }

/* ─── USER BADGE ─── */
.user-badge {
  display:flex; align-items:center; gap:.5rem;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15);
  border-radius:20px; padding:.3rem .85rem .3rem .35rem;
  cursor:pointer; text-decoration:none; transition:all var(--tr);
}
.user-badge:hover { border-color:var(--or-vif); }
.user-badge .av { width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--grad-or); color:var(--bleu-deep); font-family:var(--fm); font-size:.6rem; font-weight:800; }
.user-badge .un { font-size:.8rem; color:#fff; font-weight:600; }

/* ─── FOOTER ─── */
footer {
  background: var(--bleu-deep); color: #fff;
  padding: 4rem 5rem; margin-top: 5rem;
  border-top: 1px solid rgba(200,150,12,.18);
}
.footer-inner { max-width:1280px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem; }
.footer-logo { display:flex; align-items:center; gap:.75rem; margin-bottom:1rem; }
.footer-logo img { height:40px; border-radius:6px; }
.footer-brand-text { font-family:var(--fd); font-size:1rem; font-weight:800; letter-spacing:-.03em; }
.footer-brand-text span { color:var(--or-vif); }
.footer-tagline { font-size:.85rem; color:var(--gris-clair); line-height:1.7; margin-bottom:1rem; }
.footer-brands { display:flex; gap:.5rem; }
.footer-col-title { font-family:var(--fm); font-size:.63rem; letter-spacing:.18em; text-transform:uppercase; color:var(--or-vif); margin-bottom:1rem; }
.footer-links { list-style:none; display:flex; flex-direction:column; gap:.5rem; }
.footer-links a { font-size:.84rem; color:var(--gris-clair); transition:color var(--tr); }
.footer-links a:hover { color:#fff; }
.footer-bottom { max-width:1280px; margin:2.5rem auto 0; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.08); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.5rem; }
.footer-copy { font-family:var(--fm); font-size:.62rem; color:var(--gris); }

/* ─── ANIMATIONS ─── */
@keyframes fadeUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
@keyframes pulse  { 0%,100%{opacity:1} 50%{opacity:.35} }
@keyframes float  { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes orb    { 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }
@keyframes shimmer{ 0%,100%{opacity:.5} 50%{opacity:1} }
@keyframes slideIn{ from{opacity:0;transform:translateX(-20px)} to{opacity:1;transform:translateX(0)} }

.fade-up   { animation:fadeUp .6s ease both; }
.fade-up-2 { animation:fadeUp .6s .15s ease both; }
.fade-up-3 { animation:fadeUp .6s .3s ease both; }
.reveal { opacity:0; transform:translateY(28px); transition:opacity .65s ease,transform .65s ease; }
.reveal.visible { opacity:1; transform:none; }

/* ─── NEWS CARDS ─── */
.news-card {
  background:#fff; border:1px solid var(--blanc-3); border-radius:var(--rl);
  padding:.95rem 1.15rem; cursor:pointer; transition:all var(--tr); box-shadow:var(--sh-sm);
}
.news-card:hover { box-shadow:var(--sh); transform:translateY(-1px); }
.news-source { font-family:var(--fm); font-size:.6rem; color:var(--or); font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.news-title  { font-weight:700; font-size:.86rem; line-height:1.42; margin:.28rem 0; color:var(--bleu-deep); }
.news-desc   { font-size:.76rem; color:var(--gris); line-height:1.52; }
.news-meta   { font-family:var(--fm); font-size:.6rem; color:var(--gris-clair); margin-top:.42rem; }
.filter-btn  {
  background:var(--blanc-2); border:1.5px solid var(--blanc-3); border-radius:20px;
  padding:.28rem .82rem; font-size:.76rem; font-weight:600; cursor:pointer;
  transition:all var(--tr); color:var(--gris);
}
.filter-btn:hover { border-color:var(--or-vif); color:var(--bleu-deep); }
.filter-btn.active { background:var(--or-pale); border-color:var(--or-mid); color:#7C4D00; }
.journal-filters { display:flex; gap:.65rem; flex-wrap:wrap; margin-bottom:1.5rem; align-items:center; }
.actions-row { display:flex; justify-content:flex-end; gap:.65rem; margin-bottom:1.5rem; }

/* ─── UTILS ─── */
.flex { display:flex; } .flex-col { flex-direction:column; }
.items-center { align-items:center; } .justify-between { justify-content:space-between; }
.gap-1{gap:.5rem} .gap-2{gap:1rem} .gap-3{gap:1.5rem} .gap-4{gap:2rem}
.mt-1{margin-top:.5rem} .mt-2{margin-top:1rem} .mt-3{margin-top:1.5rem} .mt-4{margin-top:2rem}
.mb-2{margin-bottom:1rem} .mb-3{margin-bottom:1.5rem} .mb-4{margin-bottom:2rem}
.text-muted{color:var(--gris)} .text-or{color:var(--or-vif)} .text-blue{color:var(--bleu-vif)}
.text-sm{font-size:.84rem} .text-xs{font-size:.74rem} .text-mono{font-family:var(--fm)}
.text-center{text-align:center} .w-full{width:100%}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.alert-ok  { background:var(--vert-pale); border:1px solid #A7F3D0; border-radius:var(--rl); padding:1.2rem 1.5rem; color:#065F46; line-height:1.6; }
.alert-err { background:var(--rouge-pale); border:1px solid #FECACA; border-radius:var(--rl); padding:1rem 1.5rem; color:#991B1B; line-height:1.8; }
.live-pill {
  display:inline-flex; align-items:center; gap:.4rem;
  border-radius:20px; padding:.3rem .75rem;
  font-family:var(--fm); font-size:.6rem; font-weight:700; letter-spacing:.08em;
}
.live-dot { width:7px; height:7px; border-radius:50%; animation:pulse 2s infinite; display:block; }