/* ============================================================
   Style.css — v5 GLASS
   Fondation Les Nids — OGR
   Intégration par YAM
   Design glassmorphism dark-first
   bg-login.jpg en fond fixe via body::before
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=DM+Mono:ital,wght@0,300;0,400;0,500;1,400&display=swap');

/* ══════════════════════════════════════════════════════════
   1. TOKENS — thème SOMBRE (défaut v5)
   ══════════════════════════════════════════════════════════ */
:root {
  /* Dimensions */
  --sidebar-w: 256px;

  /* Palette marque */
  --violet:      #8064A2;
  --violet-light:#C4B5E8;
  --violet-dark: #6048A0;
  --orange:      #F79646;
  --gold:        #F0B429;
  --rose:        #FB7185;
  --green:       #34D399;
  --blue:        #60A5FA;

  /* Surfaces glass */
  --glass-bg:       rgba(255,255,255,.06);
  --glass-bg-hover: rgba(255,255,255,.10);
  --glass-border:   rgba(255,255,255,.11);
  --glass-border-hover: rgba(128,100,162,.5);
  --glass-shadow:   0 8px 32px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
  --glass-blur:     blur(22px) saturate(1.3);

  /* Sidebar glass */
  --sidebar-bg:          rgba(255,255,255,.04);
  --sidebar-border:      rgba(255,255,255,.09);
  --sidebar-active-bg:   rgba(128,100,162,.22);
  --sidebar-active-bar:  #8064A2;
  --sidebar-hover-bg:    rgba(255,255,255,.07);
  --sidebar-text:        rgba(255,255,255,.55);
  --sidebar-text-active: #fff;
  --sidebar-text-muted:  rgba(255,255,255,.28);

  /* Fond page */
  --page-bg:     transparent;
  --card-bg:     var(--glass-bg);
  --card-radius: 16px;
  --card-shadow: var(--glass-shadow);

  /* Texte */
  --text-main:   #fff;
  --text-sub:    rgba(255,255,255,.82);
  --text-muted:  rgba(255,255,255,.5);
  --text-light:  rgba(255,255,255,.28);

  /* Inputs glass */
  --input-bg:     rgba(255,255,255,.07);
  --input-border: rgba(255,255,255,.14);
  --input-focus:  #8064A2;

  /* Borders */
  --border:      rgba(255,255,255,.1);
  --border-gold: rgba(128,100,162,.4);
  --surface-2:   rgba(255,255,255,.05);

  /* Overlay orbs */
  --orb-violet: rgba(128,100,162,.22);
  --orb-orange: rgba(240,180,41,.14);
}

/* ══════════════════════════════════════════════════════════
   1b. THÈME CLAIR — "glass clair" (overlay plus lumineux)
   ══════════════════════════════════════════════════════════ */
[data-theme="light"] {
  --glass-bg:       rgba(255,255,255,.72);
  --glass-bg-hover: rgba(255,255,255,.85);
  --glass-border:   rgba(128,100,162,.18);
  --glass-border-hover: rgba(128,100,162,.4);
  --glass-shadow:   0 8px 32px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.9);

  --sidebar-bg:         rgba(255,255,255,.82);
  --sidebar-border:     rgba(128,100,162,.14);
  --sidebar-active-bg:  rgba(128,100,162,.13);
  --sidebar-active-bar: #8064A2;
  --sidebar-hover-bg:   rgba(128,100,162,.07);
  --sidebar-text:       #534669;
  --sidebar-text-active:#18112B;
  --sidebar-text-muted: #9A8AB4;

  --card-bg:     var(--glass-bg);

  --text-main:   #18112B;
  --text-sub:    #2E2148;
  --text-muted:  #534669;
  --text-light:  #9A8AB4;

  --input-bg:     rgba(255,255,255,.85);
  --input-border: rgba(128,100,162,.22);

  --border:      rgba(128,100,162,.15);
  --border-gold: rgba(128,100,162,.28);
  --surface-2:   rgba(128,100,162,.06);

  --orb-violet: rgba(128,100,162,.12);
  --orb-orange: rgba(247,150,70,.08);
}

/* ══════════════════════════════════════════════════════════
   2. BASE — fond photo fixe via body::before / ::after
   ══════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 15px; line-height: 1.65;
  color: var(--text-main);
  background: #07080F;
  -webkit-font-smoothing: antialiased;
  position: relative; overflow-x: hidden;
}

/* ── Fond photo floutée (calque -2) ── */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -2;
  background: url('bg-login.jpg') center/cover no-repeat;
  filter: blur(4px) brightness(.38) saturate(1.25);
  transform: scale(1.06);
  pointer-events: none;
}

/* ── Overlay dégradé sombre par-dessus la photo (calque -1) ── */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 70% 55% at 10% 15%, rgba(128,100,162,.18) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 90% 85%, rgba(240,180,41,.10) 0%, transparent 60%),
    linear-gradient(180deg, rgba(7,8,15,.45) 0%, rgba(7,8,15,.55) 100%);
  pointer-events: none;
}

/* Thème clair : overlay beaucoup plus transparent */
[data-theme="light"] body::before { filter: blur(6px) brightness(.55) saturate(1.1); }
[data-theme="light"] body::after {
  background:
    radial-gradient(ellipse 70% 55% at 10% 15%, rgba(255,255,255,.45) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 90% 85%, rgba(255,255,255,.35) 0%, transparent 60%),
    linear-gradient(180deg, rgba(245,243,251,.72) 0%, rgba(245,243,251,.80) 100%);
}

/* ══════════════════════════════════════════════════════════
   3. ORBES LUMINEUX — injectés via navbar.php (fixes, déco)
   ══════════════════════════════════════════════════════════ */
.yam-orb-bg {
  position: fixed; border-radius: 50%;
  pointer-events: none; z-index: 0;
  animation: yam-orb-float linear infinite;
}
.yam-orb-bg-1 {
  width: 480px; height: 480px; top: -100px; right: -80px;
  background: radial-gradient(circle, var(--orb-violet) 0%, transparent 70%);
  animation-duration: 20s;
}
.yam-orb-bg-2 {
  width: 360px; height: 360px; bottom: -80px; left: -60px;
  background: radial-gradient(circle, var(--orb-orange) 0%, transparent 70%);
  animation-duration: 15s; animation-delay: -7s;
}
.yam-orb-bg-3 {
  width: 280px; height: 280px; top: 45%; left: 38%;
  background: radial-gradient(circle, rgba(128,100,162,.1) 0%, transparent 70%);
  animation-duration: 25s; animation-delay: -11s;
}
@keyframes yam-orb-float {
  0%,100% { transform: translateY(0) rotate(0deg) scale(1); }
  33%      { transform: translateY(-28px) rotate(5deg) scale(1.03); }
  66%      { transform: translateY(14px) rotate(-3deg) scale(.97); }
}

/* ══════════════════════════════════════════════════════════
   4. LAYOUT
   ══════════════════════════════════════════════════════════ */
.app-shell     { display: flex; min-height: 100vh; align-items: stretch; position: relative; z-index: 1; }
.content-shell { flex: 1; min-width: 0; overflow-x: hidden; }
.page-content  { padding: 2.25rem 2.75rem; min-height: 100vh; }

@media (max-width: 991px) {
  .app-shell    { display: block; }
  .page-content { padding: 1.25rem 1rem 90px; }
}

/* ══════════════════════════════════════════════════════════
   5. SIDEBAR GLASS
   ══════════════════════════════════════════════════════════ */
.sidebar {
  width: var(--sidebar-w); flex-shrink: 0;
  position: sticky; top: 0; height: 100vh;
  background: var(--sidebar-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  display: flex; flex-direction: column;
  z-index: 100; overflow-y: auto;
  border-right: 1px solid var(--sidebar-border);
  transition: background .3s, border-color .3s;
}
.sidebar::after {
  content: ''; position: absolute; top: 0; right: 0;
  width: 1px; height: 40%;
  background: linear-gradient(to bottom, rgba(128,100,162,.5), transparent);
  pointer-events: none;
}
.sidebar::-webkit-scrollbar { width: 2px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(128,100,162,.3); border-radius: 2px; }

.sidebar-brand {
  padding: 1.75rem 1.25rem 1.25rem;
  border-bottom: 1px solid var(--sidebar-border);
  position: relative;
}
.sidebar-brand::after {
  content: ''; position: absolute; bottom: 0; left: 1.25rem; right: 1.25rem;
  height: 1px; background: linear-gradient(90deg, rgba(128,100,162,.5), transparent);
}
.sidebar-brand-logo {
  width: 38px; height: 38px; object-fit: contain; border-radius: 10px;
  background: rgba(255,255,255,.12); padding: 4px;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s;
  box-shadow: 0 0 0 1px rgba(128,100,162,.4), 0 2px 12px rgba(0,0,0,.3);
}
.sidebar-brand:hover .sidebar-brand-logo {
  transform: rotate(-5deg) scale(1.1);
  box-shadow: 0 0 24px rgba(128,100,162,.5), 0 0 0 1px rgba(128,100,162,.6);
}
[data-theme="light"] .sidebar-brand-logo { filter: none; }
.sidebar-brand-title {
  font-size: .74rem; font-weight: 700; color: var(--sidebar-text-active);
  letter-spacing: .06em; text-transform: uppercase; line-height: 1.2; margin-top: .55rem;
}
.sidebar-brand-sub { font-size: .64rem; color: var(--sidebar-text-muted); margin-top: 2px; }

.sidebar-section       { padding: 1.1rem .75rem .5rem; }
.sidebar-section-label {
  font-size: .58rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sidebar-text-muted); padding: 0 .6rem; margin-bottom: .55rem;
}

.sidebar-link {
  display: flex; align-items: center; gap: .72rem;
  padding: .58rem .75rem; border-radius: 10px;
  text-decoration: none; color: var(--sidebar-text);
  font-size: .875rem; font-weight: 500;
  transition: background .18s, color .18s, padding-left .2s;
  margin-bottom: 3px; position: relative;
}
.sidebar-link:hover { background: var(--sidebar-hover-bg); color: var(--sidebar-text-active); padding-left: 1.1rem; }
.sidebar-link.active,
.sidebar-link[aria-current="page"] {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-text-active); font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
}
.sidebar-link.active::before,
.sidebar-link[aria-current="page"]::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 55%;
  background: var(--sidebar-active-bar); border-radius: 0 2px 2px 0;
  box-shadow: 0 0 8px rgba(128,100,162,.6);
}
.sidebar-link-icon {
  flex-shrink: 0; width: 20px; text-align: center;
  min-width: 36px; min-height: 36px; display: inline-flex; align-items: center; justify-content: center;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1);
}
.sidebar-link:hover .sidebar-link-icon { transform: scale(1.15); }
.sidebar-link[href="logout.php"]       { color: rgba(251,113,133,.6); }
.sidebar-link[href="logout.php"]:hover { background: rgba(251,113,133,.08); color: #FB7185; }

.sidebar-link-icon svg, .mobile-nav-link-icon svg {
  width: 18px; height: 18px; stroke: currentColor;
  stroke-width: 1.75; fill: none; flex-shrink: 0; vertical-align: middle;
}

.sidebar-sep {
  margin: .75rem; height: 1px; border: none;
  background: linear-gradient(90deg, transparent, rgba(128,100,162,.35), transparent);
}
.sidebar-footer {
  margin-top: auto; padding: 1rem 1.25rem;
  border-top: 1px solid var(--sidebar-border);
  font-size: .64rem; color: var(--sidebar-text-muted);
}

/* ══════════════════════════════════════════════════════════
   6. MOBILE NAV GLASS
   ══════════════════════════════════════════════════════════ */
.mobile-nav {
  display: none; position: fixed; bottom: 0; left: 0; right: 0;
  background: rgba(7,8,15,.85);
  backdrop-filter: blur(28px) saturate(1.4);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  border-top: 1px solid rgba(255,255,255,.1);
  z-index: 100; padding: .5rem .5rem .6rem;
}
[data-theme="light"] .mobile-nav {
  background: rgba(245,243,251,.88);
  border-top-color: rgba(128,100,162,.15);
}
.mobile-nav-links { display: flex; justify-content: space-around; align-items: center; }
.mobile-nav-link {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  text-decoration: none; color: var(--text-muted);
  font-size: .62rem; font-weight: 500; padding: .3rem .7rem; border-radius: 10px;
  transition: color .15s, transform .15s;
}
.mobile-nav-link.active { color: var(--violet-light); }
[data-theme="light"] .mobile-nav-link.active { color: var(--violet); }
.mobile-nav-link:hover  { color: var(--text-main); transform: translateY(-2px); }
.mobile-nav-link-icon   { font-size: 1.25rem; display: inline-block; }

@media (max-width: 991px) { .sidebar { display: none; } .mobile-nav { display: block; } }

/* ══════════════════════════════════════════════════════════
   7. PAGE HEADER
   ══════════════════════════════════════════════════════════ */
.page-header { margin-bottom: 2rem; animation: fadeInUp 280ms ease both; }

.page-header-icon {
  width: 54px; height: 54px; border-radius: 15px; margin-bottom: .9rem;
  background: rgba(128,100,162,.22);
  border: 1px solid rgba(128,100,162,.4);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  box-shadow: 0 4px 20px rgba(128,100,162,.3), inset 0 1px 0 rgba(255,255,255,.15);
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s; cursor: default;
  backdrop-filter: blur(10px);
}
.page-header-icon:hover {
  transform: rotate(-8deg) scale(1.1);
  box-shadow: 0 6px 30px rgba(128,100,162,.5), inset 0 1px 0 rgba(255,255,255,.2);
}
.page-title {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 1.85rem; font-weight: 400; font-style: italic;
  color: var(--text-main); margin: 0 0 .3rem; letter-spacing: -.01em; line-height: 1.2;
  text-shadow: 0 2px 12px rgba(0,0,0,.3);
}
.page-subtitle { font-size: .875rem; color: var(--text-muted); margin: 0; }

/* ══════════════════════════════════════════════════════════
   8. CARTES GLASS
   ══════════════════════════════════════════════════════════ */
.v2-card {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: var(--card-radius);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  transition: border-color .25s, box-shadow .25s, transform .2s;
  animation: fadeInUp 320ms ease both; will-change: transform;
}
.v2-card:nth-child(2) { animation-delay: 55ms; }
.v2-card:nth-child(3) { animation-delay: 110ms; }
.v2-card:nth-child(4) { animation-delay: 165ms; }
.v2-card:hover {
  border-color: rgba(128,100,162,.4);
  box-shadow: 0 16px 56px rgba(0,0,0,.55), 0 0 0 1px rgba(128,100,162,.2), inset 0 1px 0 rgba(255,255,255,.12);
  transform: translateY(-2px);
}
.v2-card-header   { padding: 1.15rem 1.5rem 1rem; border-bottom: 1px solid var(--glass-border); }
.v2-card-title    { font-size: .92rem; font-weight: 600; color: var(--text-main); margin: 0; }
.v2-card-subtitle { font-size: .77rem; color: var(--text-muted); margin: 3px 0 0; }
.v2-card-body     { padding: 1.5rem; }

/* ══════════════════════════════════════════════════════════
   9. LAST-GEN CARD
   ══════════════════════════════════════════════════════════ */
.last-gen-card {
  background: rgba(128,100,162,.14);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(128,100,162,.35);
  border-radius: 14px;
  padding: .88rem 1.2rem; margin-bottom: 1.75rem;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  animation: fadeInUp 260ms ease both;
  box-shadow: 0 4px 20px rgba(0,0,0,.3);
}
.last-gen-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #34D399; flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(52,211,153,.2), 0 0 10px rgba(52,211,153,.5);
  animation: yam-pulse-dot 2s ease infinite;
}

/* ══════════════════════════════════════════════════════════
   10. DROP ZONE GLASS
   ══════════════════════════════════════════════════════════ */
.drop-zone {
  border: 1.5px dashed rgba(128,100,162,.35);
  border-radius: 14px;
  background: rgba(128,100,162,.06);
  padding: 2.75rem 1.5rem;
  text-align: center; cursor: pointer;
  transition: border-color .2s, background .2s, transform .15s, box-shadow .2s;
  position: relative;
  backdrop-filter: blur(8px);
}
.drop-zone:hover, .drop-zone.drag-over {
  border-color: rgba(128,100,162,.65);
  background: rgba(128,100,162,.14);
  transform: scale(1.005);
  box-shadow: 0 0 40px rgba(128,100,162,.15), inset 0 0 30px rgba(128,100,162,.06);
}
.drop-zone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.drop-icon  { font-size: 2.4rem; margin-bottom: .65rem; display: block; color: rgba(128,100,162,.8); }
.drop-label { font-weight: 600; color: var(--violet-light); font-size: .95rem; }
.drop-sub   { font-size: .77rem; color: var(--text-muted); margin-top: .35rem; }
.drop-zone:hover .drop-icon,
.drop-zone.drag-over .drop-icon { display: inline-block; animation: yam-bounce-icon 900ms ease infinite; }

/* ══════════════════════════════════════════════════════════
   11. FILE LIST
   ══════════════════════════════════════════════════════════ */
.file-list { margin-top: .85rem; display: flex; flex-direction: column; gap: 6px; }
.file-item {
  display: flex; align-items: center; gap: .55rem;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  padding: .5rem .85rem; font-size: .82rem;
  transition: background .15s, border-color .15s, transform .12s;
  animation: yam-slide-in 180ms ease both;
  backdrop-filter: blur(8px);
}
.file-item:hover {
  background: rgba(128,100,162,.14);
  border-color: rgba(128,100,162,.4);
  transform: translateX(2px);
}
.file-name   { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-sub); font-weight: 500; }
.file-size   { color: var(--text-muted); font-size: .74rem; font-family: 'DM Mono', monospace; white-space: nowrap; }
.file-remove {
  background: none; border: none; cursor: pointer; padding: 0;
  color: var(--rose); font-size: 1rem; line-height: 1; flex-shrink: 0;
  min-width: 36px; min-height: 36px; display: inline-flex; align-items: center; justify-content: center;
  transition: transform .1s;
}
.file-remove:hover { transform: scale(1.25); }

/* ══════════════════════════════════════════════════════════
   12. BADGES
   ══════════════════════════════════════════════════════════ */
.badge-xlsx, .badge-xls, .badge-xlsm, .badge-bdd,
.badge-type3, .badge-argos, .badge-convivio {
  display: inline-block; font-size: .62rem; font-weight: 700;
  border-radius: 5px; padding: 2px 7px; flex-shrink: 0;
  letter-spacing: .05em; line-height: 1.5; font-family: 'DM Mono', monospace;
}
.badge-xlsx     { background: rgba(96,165,250,.18);  color: #93C5FD; border: 1px solid rgba(96,165,250,.25); }
.badge-xls      { background: rgba(251,113,133,.15); color: #FCA5A5; border: 1px solid rgba(251,113,133,.22); }
.badge-xlsm     { background: rgba(52,211,153,.12);  color: #6EE7B7; border: 1px solid rgba(52,211,153,.2); }
.badge-bdd      { background: rgba(167,139,250,.15); color: #C4B5FD; border: 1px solid rgba(167,139,250,.22); }
.badge-type3    { background: rgba(96,165,250,.12);  color: #7DD3FC; border: 1px solid rgba(96,165,250,.2); }
.badge-argos    { background: rgba(167,139,250,.15); color: #C4B5FD; border: 1px solid rgba(167,139,250,.22); }
.badge-convivio { background: rgba(240,180,41,.14);  color: #FCD34D; border: 1px solid rgba(240,180,41,.22); }

/* ══════════════════════════════════════════════════════════
   13. BOUTONS
   ══════════════════════════════════════════════════════════ */
/* Bouton principal violet glass */
.btn-charte {
  background: linear-gradient(135deg, #8064A2, #6048A0);
  color: #fff; border: none;
  font-weight: 700; font-size: .92rem; font-family: 'DM Sans', sans-serif;
  padding: .72rem 1.5rem; border-radius: 11px; cursor: pointer;
  letter-spacing: .01em;
  transition: transform .15s, box-shadow .2s, filter .2s;
  box-shadow: 0 6px 24px rgba(128,100,162,.5);
  position: relative; overflow: hidden;
}
.btn-charte::after {
  content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
  transition: left .5s ease;
}
.btn-charte:hover:not(:disabled)::after { left: 150%; }
.btn-charte:hover:not(:disabled)  { filter: brightness(1.1); transform: translateY(-2px); box-shadow: 0 10px 32px rgba(128,100,162,.65); }
.btn-charte:active:not(:disabled) { transform: translateY(0); }
.btn-charte:disabled               { opacity: .3; cursor: not-allowed; box-shadow: none; }
[data-theme="light"] .btn-charte { box-shadow: 0 4px 18px rgba(128,100,162,.35); }

/* Bouton secondaire glass */
.btn-secondary-v2 {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  color: var(--text-sub); font-weight: 600; font-size: .82rem;
  font-family: 'DM Sans', sans-serif; padding: .46rem 1rem; border-radius: 9px;
  cursor: pointer; text-decoration: none; display: inline-block;
  transition: background .15s, border-color .15s, color .15s, transform .15s;
  backdrop-filter: blur(8px);
}
.btn-secondary-v2:hover { background: rgba(128,100,162,.2); border-color: rgba(128,100,162,.45); color: var(--text-main); transform: translateY(-1px); }
[data-theme="light"] .btn-secondary-v2 { background: rgba(128,100,162,.08); border-color: rgba(128,100,162,.2); color: var(--text-sub); }

/* Bouton violet transparent */
.btn-violet {
  background: rgba(128,100,162,.18);
  border: 1px solid rgba(128,100,162,.35);
  color: var(--violet-light); font-weight: 600; font-size: .82rem;
  font-family: 'DM Sans', sans-serif; padding: .46rem 1.05rem; border-radius: 9px;
  cursor: pointer; text-decoration: none; display: inline-block;
  transition: background .15s, color .15s, border-color .15s;
}
.btn-violet:hover { background: rgba(128,100,162,.32); color: #fff; border-color: rgba(128,100,162,.6); }
[data-theme="light"] .btn-violet { color: var(--violet); }

/* Bouton outline violet */
.btn-outline-violet {
  border: 1px solid rgba(128,100,162,.4); color: var(--violet-light);
  background: transparent; font-size: .78rem; font-weight: 600;
  padding: 4px 12px; border-radius: 8px; cursor: pointer;
  text-decoration: none; display: inline-block; transition: background .14s, color .14s;
}
.btn-outline-violet:hover { background: rgba(128,100,162,.2); color: #fff; border-color: rgba(128,100,162,.6); }
[data-theme="light"] .btn-outline-violet { color: var(--violet); }

/* ══════════════════════════════════════════════════════════
   14. PROGRESS OVERLAY GLASS
   ══════════════════════════════════════════════════════════ */
/* ── Liquid Glass Overlay ── */
.progress-overlay {
  position: fixed; inset: 0;
  background: rgba(4,4,12,.45);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  z-index: 999; display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .4s cubic-bezier(.4,0,.2,1);
}
.progress-overlay.visible { opacity: 1; pointer-events: auto; }

/* ── Liquid Glass Card ── */
.progress-box {
  position: relative;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(60px) saturate(2) brightness(1.1);
  -webkit-backdrop-filter: blur(60px) saturate(2) brightness(1.1);
  border-radius: 32px;
  padding: 2.5rem 2.75rem 2.25rem;
  width: min(420px, 90vw);
  text-align: center;
  overflow: hidden;
  /* Refraction ring */
  border: 1px solid rgba(255,255,255,.18);
  box-shadow:
    0 0 0 .5px rgba(255,255,255,.06) inset,
    0 1.5px 0 rgba(255,255,255,.22) inset,   /* highlight haut */
    0 -1px 0 rgba(255,255,255,.06) inset,
    0 24px 64px rgba(0,0,0,.55),
    0 8px 24px rgba(0,0,0,.3),
    0 0 80px rgba(128,100,162,.18);
}
/* Orbe coloré derrière la box */
.progress-box::before {
  content: '';
  position: absolute; inset: -40%; border-radius: 50%;
  background: radial-gradient(ellipse at 40% 30%,
    rgba(128,100,162,.22) 0%, rgba(247,150,70,.10) 45%, transparent 70%);
  pointer-events: none; z-index: 0;
}
.progress-box > * { position: relative; z-index: 1; }

.progress-box-icon  { margin-bottom: .85rem; }
.progress-box-title {
  font-family: 'DM Serif Display', serif;
  font-size: 1.25rem; font-style: italic;
  color: #fff; margin-bottom: .35rem;
  text-shadow: 0 1px 8px rgba(128,100,162,.5);
}
.progress-box-msg {
  font-size: .83rem; color: rgba(255,255,255,.55);
  min-height: 1.4em; margin-bottom: 1.4rem;
  letter-spacing: .01em;
}

/* ── Barre liquid ── */
.progress-track {
  height: 5px;
  background: rgba(255,255,255,.08);
  border-radius: 99px; overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.3);
}
.progress-fill {
  height: 100%; border-radius: 99px; width: 0%;
  background: linear-gradient(90deg, #8064A2, #c084fc, #F79646, #8064A2);
  background-size: 300% auto;
  animation: yam-shimmer 2s linear infinite;
  transition: width .45s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 0 12px rgba(192,132,252,.6), 0 0 4px rgba(247,150,70,.4);
}
.progress-pct {
  font-family: 'DM Mono', monospace;
  font-size: .8rem; color: rgba(192,132,252,.9);
  margin-top: .55rem; letter-spacing: .05em;
}

/* ══════════════════════════════════════════════════════════
   15. CHECKLIST
   ══════════════════════════════════════════════════════════ */
.checklist-item {
  display: flex; align-items: flex-start; gap: .45rem;
  font-size: .79rem; line-height: 1.4; margin-bottom: .38rem;
  color: var(--text-muted); padding: .2rem .3rem; border-radius: 7px;
  transition: color .2s, background .15s;
}
.checklist-item.found {
  color: var(--text-sub); font-weight: 500;
  background: rgba(52,211,153,.07);
  animation: yam-slide-in 220ms ease both;
}
.checklist-item.found .checklist-icon { filter: drop-shadow(0 0 4px rgba(52,211,153,.5)); }
.checklist-icon { flex-shrink: 0; font-size: .88rem; margin-top: 1px; }
.checklist-icon .fa-solid  { color: #34D399; }
.checklist-icon .fa-regular { color: var(--text-muted); }

.badge-mois-v2 {
  display: inline-block;
  background: rgba(128,100,162,.2);
  border: 1px solid rgba(128,100,162,.4);
  color: var(--violet-light);
  border-radius: 20px; padding: .26rem .9rem;
  font-size: .77rem; font-weight: 600; font-family: 'DM Mono', monospace;
}

.compteur-badge {
  font-family: 'DM Mono', monospace; font-size: .72rem; font-weight: 700;
  padding: 3px 11px; border-radius: 20px; color: #fff;
  transition: background .35s, transform .15s; cursor: default;
}
.compteur-badge:hover { transform: scale(1.08); }

/* ══════════════════════════════════════════════════════════
   16. TABLEAUX GLASS
   ══════════════════════════════════════════════════════════ */
.v2-table { width: 100%; border-collapse: collapse; font-size: .845rem; }
.v2-table thead th {
  background: rgba(255,255,255,.04);
  color: var(--text-muted);
  font-weight: 600; font-size: .7rem; text-transform: uppercase; letter-spacing: .1em;
  padding: .78rem 1.1rem; border-bottom: 1px solid var(--glass-border);
  position: sticky; top: 0; z-index: 2; font-family: 'DM Mono', monospace;
}
.v2-table tbody tr { border-bottom: 1px solid rgba(255,255,255,.06); transition: background .12s; }
.v2-table tbody tr:hover {
  background: rgba(128,100,162,.1) !important;
  box-shadow: inset 2px 0 0 rgba(128,100,162,.6);
}
.v2-table tbody tr:hover td { color: var(--text-main); }
.v2-table tbody td { padding: .82rem 1.1rem; vertical-align: middle; color: var(--text-sub); }
.v2-table-wrap { border-radius: 0 0 var(--card-radius) var(--card-radius); overflow: hidden; }
.sources-row td { padding: 0; }
.sources-panel {
  background: rgba(255,255,255,.03);
  border-top: 1px solid rgba(255,255,255,.07);
  padding: 1.1rem 1.35rem;
  animation: yam-slide-in 200ms ease both;
}

/* ══════════════════════════════════════════════════════════
   17. FILTRES GLASS
   ══════════════════════════════════════════════════════════ */
.filter-bar { display: flex; align-items: center; flex-wrap: wrap; gap: .65rem; margin-bottom: 1.35rem; }
.filter-bar label { font-size: .78rem; color: var(--text-muted); font-weight: 500; }
.filter-select, .filter-input {
  border: 1px solid var(--input-border);
  border-radius: 9px;
  background: var(--input-bg);
  color: var(--text-main);
  font-size: .82rem; padding: .42rem .82rem; outline: none;
  font-family: 'DM Sans', sans-serif;
  transition: border-color .2s, box-shadow .2s, background .2s;
  backdrop-filter: blur(8px);
}
.filter-select option { background: #13141F; color: #fff; }
[data-theme="light"] .filter-select option { background: #fff; color: #18112B; }
.filter-select:hover, .filter-input:hover { border-color: rgba(128,100,162,.4); }
.filter-select:focus, .filter-input:focus {
  border-color: rgba(128,100,162,.7);
  box-shadow: 0 0 0 3px rgba(128,100,162,.18);
  background: rgba(128,100,162,.1);
}
.btn-reset-filters {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: var(--text-muted);
  font-size: .78rem; font-family: 'DM Sans', sans-serif; padding: .38rem .8rem;
  border-radius: 9px; cursor: pointer; transition: all .15s; display: none;
  backdrop-filter: blur(8px);
}
.btn-reset-filters.visible { display: inline-block; }
.btn-reset-filters:hover { background: rgba(128,100,162,.15); color: var(--violet-light); border-color: rgba(128,100,162,.4); }

/* ══════════════════════════════════════════════════════════
   18. STATUTS
   ══════════════════════════════════════════════════════════ */
.status-ok, .status-alerte, .status-missing {
  font-size: .7rem; font-weight: 600; font-family: 'DM Mono', monospace;
  padding: 3px 10px; border-radius: 20px; white-space: nowrap;
}
.status-ok      { background: rgba(52,211,153,.14);  color: #6EE7B7; border: 1px solid rgba(52,211,153,.25); }
.status-alerte  { background: rgba(240,180,41,.14);  color: #FCD34D; border: 1px solid rgba(240,180,41,.25); }
.status-missing { background: rgba(255,255,255,.06); color: var(--text-muted); border: 1px solid rgba(255,255,255,.1); }
[data-theme="light"] .status-ok      { background: rgba(22,101,52,.1);  color: #065F46; border-color: rgba(22,101,52,.2); }
[data-theme="light"] .status-alerte  { background: rgba(120,53,15,.1);  color: #78350F; border-color: rgba(120,53,15,.2); }

/* ══════════════════════════════════════════════════════════
   19. WIKI
   ══════════════════════════════════════════════════════════ */
.wiki-tip, .wiki-warning, .wiki-success {
  border-left: 3px solid; border-radius: 0 12px 12px 0;
  padding: .9rem 1.15rem; font-size: .875rem; margin-bottom: 1rem;
  backdrop-filter: blur(8px);
}
.wiki-tip     { background: rgba(128,100,162,.12); border-color: rgba(128,100,162,.7); color: var(--violet-light); }
.wiki-warning { background: rgba(96,165,250,.09);  border-color: rgba(96,165,250,.6);  color: #93C5FD; }
.wiki-success { background: rgba(52,211,153,.09);  border-color: rgba(52,211,153,.6);  color: #6EE7B7; }
[data-theme="light"] .wiki-tip     { background: rgba(128,100,162,.07); border-color: #8064A2; color: #3D1F60; }
[data-theme="light"] .wiki-warning { background: rgba(29,78,216,.05);   border-color: #1D4ED8; color: #1E3A8A; }
[data-theme="light"] .wiki-success { background: rgba(22,101,52,.06);   border-color: #166534; color: #064E3B; }

.wiki-section-title {
  font-family: 'DM Serif Display', serif; font-style: italic;
  border-bottom: 1px solid rgba(128,100,162,.35); padding-bottom: .5rem;
  color: var(--violet-light); margin-top: 2.75rem; margin-bottom: 1.3rem;
  font-size: 1.15rem; font-weight: 400;
}
.wiki-section-title:first-child { margin-top: 0; }
[data-theme="light"] .wiki-section-title { color: var(--violet); }

.regime-card {
  border: 1px solid var(--glass-border); border-radius: 11px;
  background: var(--glass-bg); backdrop-filter: blur(12px);
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.regime-card:hover { border-color: rgba(128,100,162,.4); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,.4); }

.wiki-filter-item, .wiki-shortcut-item {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); border-radius: 10px;
  padding: .65rem .9rem; transition: border-color .15s, background .15s;
  backdrop-filter: blur(8px);
}
.wiki-filter-item:hover, .wiki-shortcut-item:hover { border-color: rgba(128,100,162,.4); background: rgba(128,100,162,.12); }
[data-theme="light"] .wiki-filter-item,
[data-theme="light"] .wiki-shortcut-item { background: rgba(255,255,255,.5); border-color: rgba(128,100,162,.14); }

.col-badge {
  font-family: 'DM Mono', monospace; font-size: .72rem;
  background: rgba(128,100,162,.18); color: var(--violet-light);
  border-radius: 5px; padding: 2px 8px; transition: transform .15s; cursor: default;
}
.col-badge:hover { transform: scale(1.1); }

.toc-link {
  display: block; padding: 5px 12px; font-size: .81rem;
  color: var(--text-muted); text-decoration: none;
  border-left: 2px solid transparent; border-radius: 0 7px 7px 0;
  transition: color .15s, border-left-color .15s, background .15s, padding-left .15s;
}
.toc-link:hover, .toc-link.active {
  color: var(--violet-light); border-left-color: rgba(128,100,162,.7);
  background: rgba(128,100,162,.1); padding-left: 16px;
}
.toc-link.section { font-weight: 600; color: var(--text-sub); font-size: .84rem; }

.wiki-sidebar { position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow-y: auto; }
.wiki-sidebar::-webkit-scrollbar { width: 2px; }
.wiki-sidebar::-webkit-scrollbar-thumb { background: rgba(128,100,162,.25); border-radius: 2px; }

/* ══════════════════════════════════════════════════════════
   20. UTILITAIRES
   ══════════════════════════════════════════════════════════ */
.text-orange    { color: var(--orange) !important; }
.text-violet    { color: var(--violet-light) !important; }
.text-framboise { color: var(--rose) !important; }
.text-v2-muted  { color: var(--text-muted); }
.text-v2-sub    { color: var(--text-sub); }
[data-theme="light"] .text-orange { color: #8C3E00 !important; }
[data-theme="light"] .text-violet { color: var(--violet) !important; }

.section-year {
  font-family: 'DM Mono', monospace; font-size: .74rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .12em; color: var(--violet-light);
  border-bottom: 1px solid rgba(128,100,162,.3); padding-bottom: .4rem;
  margin: 1.85rem 0 .85rem; position: relative;
}
.section-year::after {
  content: ''; position: absolute; bottom: -1px; left: 0; height: 1px; width: 0;
  background: rgba(128,100,162,.6); transition: width .45s ease;
}
.section-year:hover::after { width: 100%; }

/* ══════════════════════════════════════════════════════════
   21. ANIMATIONS
   ══════════════════════════════════════════════════════════ */
@keyframes fadeInUp        { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
@keyframes yam-shimmer     { 0%{background-position:-200% center} 100%{background-position:200% center} }
@keyframes yam-slide-in    { from{opacity:0;transform:translateX(-10px)} to{opacity:1;transform:translateX(0)} }
@keyframes yam-bounce-icon { 0%,100%{transform:translateY(0)} 45%{transform:translateY(-6px)} 70%{transform:translateY(-2px)} }
@keyframes yam-pulse-dot   { 0%,100%{box-shadow:0 0 0 3px rgba(52,211,153,.25)} 50%{box-shadow:0 0 0 7px rgba(52,211,153,0)} }
@keyframes yam-pop-in      { 0%{opacity:0;transform:scale(.88) translateY(6px)} 70%{transform:scale(1.03) translateY(-2px)} 100%{opacity:1;transform:scale(1) translateY(0)} }
@keyframes yam-spin        { to{transform:rotate(360deg)} }
@keyframes yam-spin-rev    { to{transform:rotate(-360deg)} }
@keyframes yam-footer-in   { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
@keyframes yam-shake-in    { 0%{transform:translateX(0);opacity:0} 15%{transform:translateX(-8px);opacity:1} 35%{transform:translateX(7px)} 55%{transform:translateX(-5px)} 75%{transform:translateX(4px)} 90%,100%{transform:translateX(0)} }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ══════════════════════════════════════════════════════════
   22. FORMULAIRES GLASS
   ══════════════════════════════════════════════════════════ */
.form-label-v2 { font-size: .8rem; font-weight: 600; color: var(--text-sub); margin-bottom: .38rem; display: block; }
.form-control, .form-select {
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--text-main);
  border-radius: 10px; font-size: .875rem; font-family: 'DM Sans', sans-serif;
  transition: border-color .2s, box-shadow .2s, background .2s;
  backdrop-filter: blur(8px);
}
.form-control::placeholder { color: var(--text-light); }
.form-control:focus, .form-select:focus {
  border-color: rgba(128,100,162,.7); outline: none;
  box-shadow: 0 0 0 3px rgba(128,100,162,.18);
  background: rgba(128,100,162,.1); color: var(--text-main);
}
.form-select option { background: #13141F; color: #fff; }
[data-theme="light"] .form-select option { background: #fff; color: #18112B; }
[data-theme="light"] .form-control,
[data-theme="light"] .form-select {
  background: rgba(255,255,255,.75);
  color: #18112B;
}

/* ══════════════════════════════════════════════════════════
   23. ALERTS GLASS
   ══════════════════════════════════════════════════════════ */
.alert { border-radius: 12px; font-size: .875rem; backdrop-filter: blur(8px); }
.alert-success { background: rgba(52,211,153,.12);  color: #A7F3D0; border: 1px solid rgba(52,211,153,.25); }
.alert-danger  { background: rgba(251,113,133,.1);  color: #FCA5A5; border: 1px solid rgba(251,113,133,.22); animation: yam-shake-in 500ms ease both; }
.alert-warning { background: rgba(240,180,41,.1);   color: #FCD34D; border: 1px solid rgba(240,180,41,.22); }
[data-theme="light"] .alert-success { background: rgba(22,101,52,.08);   color: #065F46; border-color: rgba(22,101,52,.2); }
[data-theme="light"] .alert-danger  { background: rgba(185,28,28,.07);   color: #991B1B; border-color: rgba(185,28,28,.2); }
[data-theme="light"] .alert-warning { background: rgba(120,53,15,.07);   color: #78350F; border-color: rgba(120,53,15,.2); }
.btn-close { filter: invert(1); opacity: .5; }
.btn-close:hover { opacity: 1; }
[data-theme="light"] .btn-close { filter: none; opacity: .5; }

/* ══════════════════════════════════════════════════════════
   24. MODAL GLASS
   ══════════════════════════════════════════════════════════ */
.modal-content {
  /* Modal hors app-shell → backdrop-filter safe (plus de stacking context parent qui bloque) */
  background: rgba(18,10,32,.55);
  backdrop-filter: blur(32px) saturate(1.5);
  -webkit-backdrop-filter: blur(32px) saturate(1.5);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 20px; color: var(--text-main);
  box-shadow: 0 32px 80px rgba(0,0,0,.6);
}
.modal-content::before { display: none; }
[data-theme="light"] .modal-content { background: rgba(255,255,255,.88); border-color: rgba(128,100,162,.2); }
.modal-header { border-bottom: 1px solid rgba(255,255,255,.1); }
.modal-footer { border-top: 1px solid rgba(255,255,255,.1); }
.modal-body   { color: var(--text-sub); }

/* ══════════════════════════════════════════════════════════
   25. SPINNER GLASS
   ══════════════════════════════════════════════════════════ */
.yam-spinner { width: 56px; height: 56px; position: relative; margin: 0 auto .6rem; }
.yam-spinner::before, .yam-spinner::after { content: ''; position: absolute; border-radius: 50%; border: 2.5px solid transparent; }
.yam-spinner::before { inset: 0; border-top-color: #c084fc; border-right-color: #c084fc; animation: yam-spin 900ms linear infinite; filter: drop-shadow(0 0 6px rgba(192,132,252,.7)); }
.yam-spinner::after  { inset: 9px; border-bottom-color: #F79646; border-left-color: #F79646; animation: yam-spin-rev 700ms linear infinite; filter: drop-shadow(0 0 5px rgba(247,150,70,.6)); }

.yam-steps    { margin-top: 1.25rem; display: flex; align-items: center; justify-content: center; gap: .5rem; font-size: .72rem; }
.yam-step {
  color: rgba(255,255,255,.35); padding: 5px 13px; border-radius: 99px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: all .35s cubic-bezier(.4,0,.2,1);
  font-family: 'DM Mono', monospace; letter-spacing: .02em;
}
.yam-step.active {
  background: linear-gradient(135deg, rgba(128,100,162,.45), rgba(192,132,252,.3));
  color: #e9d5ff;
  border-color: rgba(192,132,252,.45);
  font-weight: 600;
  box-shadow: 0 0 16px rgba(128,100,162,.35), 0 1px 0 rgba(255,255,255,.15) inset;
  text-shadow: 0 0 12px rgba(192,132,252,.6);
}
.yam-step-sep { color: rgba(255,255,255,.2); font-size: .6rem; }

/* ══════════════════════════════════════════════════════════
   26. BOOTSTRAP OVERRIDES
   ══════════════════════════════════════════════════════════ */
.table {
  color: var(--text-sub);
  --bs-table-bg: transparent;
  --bs-table-border-color: rgba(255,255,255,.08);
}
.table > :not(caption) > * > * { background-color: transparent !important; color: var(--text-sub); border-color: rgba(255,255,255,.08); }
.table > thead > * > * { color: rgba(255,255,255,.65) !important; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; }
.table tbody tr:hover > * { background-color: rgba(128,100,162,.1) !important; color: var(--text-main) !important; }

.accordion-item   { background: var(--glass-bg); border-color: rgba(255,255,255,.08); backdrop-filter: blur(12px); }
.accordion-button { background: rgba(255,255,255,.05); color: var(--text-main); font-family: 'DM Sans', sans-serif; }
.accordion-button:not(.collapsed) { background: rgba(128,100,162,.15); color: var(--violet-light); box-shadow: none; }
.accordion-button:focus { box-shadow: none; }
.accordion-body   { background: rgba(255,255,255,.03); color: var(--text-sub); }
.accordion-button::after { filter: invert(1) opacity(.6); }

kbd  { background: rgba(255,255,255,.1); color: var(--text-sub); border: 1px solid rgba(255,255,255,.15); border-radius: 5px; font-family: 'DM Mono', monospace; font-size: .75rem; }
code { color: var(--violet-light); background: rgba(128,100,162,.15); padding: 1px 5px; border-radius: 4px; font-family: 'DM Mono', monospace; }

.btn-outline-secondary { border-color: rgba(255,255,255,.14); color: var(--text-muted); background: rgba(255,255,255,.06); font-family: 'DM Sans', sans-serif; transition: all .15s; backdrop-filter: blur(8px); }
.btn-outline-secondary:hover { background: rgba(128,100,162,.15); color: var(--text-main); border-color: rgba(128,100,162,.4); }

.btn-danger { background: rgba(251,113,133,.25); border: 1px solid rgba(251,113,133,.4); color: #FCA5A5; font-weight: 700; }
.btn-danger:hover { background: rgba(251,113,133,.4); color: #fff; }
.btn.btn-sm.btn-secondary { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: var(--text-muted); font-family: 'DM Sans', sans-serif; }
.btn.btn-sm.btn-secondary:hover { background: rgba(255,255,255,.14); color: var(--text-main); }

.text-muted { color: var(--text-muted) !important; }
hr { border-color: rgba(255,255,255,.1); opacity: 1; }

/* ══════════════════════════════════════════════════════════
   27. ACCESSIBILITÉ & FOCUS
   ══════════════════════════════════════════════════════════ */
:focus         { outline: none; }
:focus-visible { outline: 2px solid rgba(128,100,162,.8); outline-offset: 3px; border-radius: 4px; }

a, button, [role="button"], select,
.sidebar-link, .mobile-nav-link, .btn-charte, .btn-secondary-v2,
.btn-violet, .btn-outline-violet, .btn-reset-filters, .file-remove,
.btn-toggle-pw, .toc-link, .btn-outline-secondary, .btn-outline-danger,
.accordion-button { cursor: pointer; }

a, button, [role="button"], label,
.sidebar-link, .mobile-nav-link, .drop-zone, .file-remove { touch-action: manipulation; }

[disabled], .btn-charte:disabled { cursor: not-allowed; opacity: .3; }

/* Skip link */
.skip-link {
  position: absolute; top: -999px; left: 1rem;
  background: var(--violet); color: #fff;
  font-weight: 700; font-size: .875rem;
  padding: .5rem 1rem; border-radius: 9px;
  z-index: 9999; text-decoration: none; transition: top .1s;
}
.skip-link:focus { top: 1rem; }

/* GPU hints */
.v2-card, .sidebar-link, .btn-charte, .progress-fill { will-change: transform; }

/* ══════════════════════════════════════════════════════════
   28. TOGGLE THÈME v5
   ══════════════════════════════════════════════════════════ */
.theme-toggle {
  display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--text-muted); font-size: .75rem; font-weight: 600;
  font-family: 'DM Sans', sans-serif; padding: .5rem .75rem; border-radius: 9px;
  cursor: pointer;
  transition: background .18s, color .18s, border-color .18s;
  margin-top: .5rem; backdrop-filter: blur(8px);
}
.theme-toggle:hover { background: rgba(128,100,162,.2); border-color: rgba(128,100,162,.4); color: var(--violet-light); }
[data-theme="light"] .theme-toggle { background: rgba(128,100,162,.08); border-color: rgba(128,100,162,.18); color: var(--text-muted); }
[data-theme="light"] .theme-toggle:hover { background: rgba(128,100,162,.15); border-color: rgba(128,100,162,.35); color: var(--violet); }
.theme-toggle svg { width: 15px; height: 15px; stroke: currentColor; fill: none; flex-shrink: 0; }

/* Icône : lune en sombre par défaut, soleil en clair */
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="light"] .theme-toggle .icon-sun  { display: block; }
[data-theme="light"] .theme-toggle .icon-moon { display: none; }

.theme-toggle .theme-label-light { display: none; }
.theme-toggle .theme-label-dark  { display: inline; }
[data-theme="light"] .theme-toggle .theme-label-light { display: inline; }
[data-theme="light"] .theme-toggle .theme-label-dark  { display: none; }

/* ══════════════════════════════════════════════════════════
   29. FONT AWESOME
   ══════════════════════════════════════════════════════════ */
.fa-solid, .fa-regular, .fa-brands { font-style: normal; line-height: 1; }
h1 .fa-solid, h2 .fa-solid, .v2-card-title .fa-solid, .wiki-section-title .fa-solid { margin-right: .35em; }
.btn-charte .fa-solid, .btn-secondary-v2 .fa-solid, .btn-violet .fa-solid { margin-right: .35em; }
.file-remove .fa-solid   { font-size: .85rem; }
.page-header-icon .fa-solid { font-size: 1.35rem; }
.status-ok .fa-solid, .status-alerte .fa-solid, .status-missing .fa-solid { margin-right: .25em; vertical-align: -.05em; }
.checklist-icon .fa-solid, .checklist-icon .fa-regular { font-size: .82rem; }