/* ======================
   PAGE TRANSITIONS
   ====================== */

/*
  MPA View Transitions — élimine le clignotement du header lors des navigations.
  Supporté nativement dans Chrome/Edge 126+. Ignoré silencieusement par Firefox/Safari
  qui gardent le comportement standard (pas de régression).
*/
@view-transition {
  navigation: auto;
}

/* Le header reste figé pendant la transition (pas de flash) */
.site-header {
  view-transition-name: site-header;
}
::view-transition-old(site-header),
::view-transition-new(site-header) {
  animation: none;
  mix-blend-mode: normal;
}

/* Le contenu principal fait un fondu rapide */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) {
    animation: 80ms ease-in both km-page-out;
  }
  ::view-transition-new(root) {
    animation: 140ms ease-out both km-page-in;
  }
}
@keyframes km-page-out { to   { opacity: 0; } }
@keyframes km-page-in  { from { opacity: 0; } }

/* Fallback : fondu à l'entrée pour les navigateurs sans View Transitions */
@supports not (view-transition-name: none) {
  @media (prefers-reduced-motion: no-preference) {
    body { animation: km-body-in 0.12s ease; }
  }
}
@keyframes km-body-in { from { opacity: 0; } }

/*
  Ajustement métrique du fallback Georgia → Lora.
  Réduit le reflow de taille au premier chargement (avant que Lora soit en cache).
  size-adjust compense la différence de chasse entre les deux polices.
*/
@font-face {
  font-family: 'Lora';
  src: local('Georgia');
  size-adjust: 97%;
  ascent-override: 90%;
  descent-override: 22%;
  font-style: normal;
  font-weight: 600 700;
}

/* ======================
   PJAX
   ====================== */

#pjax-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-primary, #d65e2c);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  border-radius: 0 2px 2px 0;
}

/* ======================
   RESET & BASE
   ====================== */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

:root {
  --km-title-font: "Lora", Georgia, "Times New Roman", serif;
  --km-menu-font: "Lora", Georgia, "Times New Roman", serif;

  /* Palette commune */
  --color-primary:        #d65e2c;
  --color-primary-subtle: rgba(214, 94, 44, 0.08);
  --color-primary-light:  #f97316;
  --color-text:           #111827;
  --color-text-muted:     #64748b;
  --color-border:         #e5e7eb;
  --color-surface:        #ffffff;
}

body[data-theme="dark"] {
  --color-primary:        #e1784b;
  --color-primary-subtle: rgba(225, 120, 75, 0.12);
  --color-primary-light:  #fb923c;
  --color-text:           #d4d4d4;
  --color-text-muted:     #9ca3af;
  --color-border:         #3c3c3c;
  --color-surface:        #1e1e1e;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #f3eadf;
  color: #111827;
}

body.has-site-bg {
  background-image:
    linear-gradient(
      rgba(243, 234, 223, var(--km-site-bg-overlay-opacity, 0.72)),
      rgba(243, 234, 223, var(--km-site-bg-overlay-opacity, 0.72))
    ),
    var(--km-site-bg-image);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

h1,
h2,
h3,
h4 {
  font-family: var(--km-title-font);
  letter-spacing: 0.01em;
}

body.mobile-nav-open {
  overflow: hidden;
}

a {
  color: #15803d;                 /* lien mode clair */
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

.container {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 16px;
}

/* ======================
   HEADER / FOOTER
   ====================== */

.site-header .container {
  max-width: 1180px;
}

.site-main {
  padding: 24px 0 40px;
}

.site-footer {
  background: #f9f0e6;
  border-top: 1px solid #e5e7eb;
  padding: 16px 0;
  font-size: 0.85rem;
  color: #6b7280;
}

/* Header interne (ancien header simple, encore utilisé sur certaines pages ?) */

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 24px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.site-logo {
  margin: 0;
  line-height: 1;
  display: flex;
  align-items: center;
}

.site-logo-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  line-height: 0;
}

.site-logo-inline {
  display: block;
  height: auto;
  max-width: min(280px, 37vw);
}

.site-logo-inline-dark {
  display: none;
}

/* Navigation simple */

.site-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.9rem;
}

.site-nav a,
.nav-link {
  color: #111827;
  opacity: 0.85;
}
.site-nav a:hover,
.nav-link:hover {
  opacity: 1;
}

.nav-user {
  color: #6b7280;
}

.nav-login-btn {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid #16a34a;
  background: #16a34a;
  font-size: 0.85rem;
  color: #f9fafb;
}
.nav-login-btn:hover {
  background: #15803d;
  color: #f9fafb;
}

.nav-user-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.nav-user-name {
  font-size: 0.85rem;
  color: #111827;
}

.nav-user-links {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-link-small {
  font-size: 0.8rem;
  color: #4b5563;
}
.nav-link-small:hover {
  color: #111827;
}

/* Boutons génériques du header (nouvelle nav) */

.nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 500;
  border: 1px solid transparent;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Rechercher = bouton "ghost" */
.nav-btn-ghost {
  background: transparent;
  border-color: #d1d5db;
  color: #111827;
}
.nav-btn-ghost:hover {
  background: #e5e7eb;
}

/* Contribuer / Se connecter = bouton vert */
.nav-btn-primary {
  background: #16a34a;
  border-color: #16a34a;
  color: #f9fafb;
}
.nav-btn-primary:hover {
  background: #15803d;
}

/* Mon compte = bouton outline discret */
.nav-btn-outline {
  background: transparent;
  border-color: #d1d5db;
  color: #111827;
}
.nav-btn-outline:hover {
  background: #e5e7eb;
}

/* Déconnexion = bouton rouge */
.nav-btn-danger {
  background: #b91c1c;
  border-color: #b91c1c;
  color: #fef2f2;
}
.nav-btn-danger:hover {
  background: #991b1b;
}

/* Administration = bouton mauve */
.nav-btn-admin {
  background: #7c3aed;
  border-color: #7c3aed;
  color: #f5f3ff;
}
.nav-btn-admin:hover {
  background: #6d28d9;
}

/* Petit badge avec le nom dans "Mon compte" */

.nav-user-chip {
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  background: #e5e7eb;
  color: inherit;
}

/* Toggle thème (reste visuellement cohérent même si tu n'as plus de mode sombre) */

.theme-toggle {
  border: 1px solid #d1d5db;
  background: #ffffff;
  border-radius: 999px;
  padding: 4px 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #111827;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.theme-toggle:hover {
  background: #f3f4f6;
}

.theme-toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  color: #94a3b8;
  transition: color 0.15s ease;
}

.theme-toggle-icon i {
  font-size: 14px;
  line-height: 1;
}

.theme-toggle-track {
  position: relative;
  width: 34px;
  height: 18px;
  border-radius: 999px;
  background: #cbd5e1;
}

.theme-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.25);
  transition: transform 0.2s ease;
}

.theme-toggle.is-dark .theme-toggle-thumb {
  transform: translateX(16px);
}

body[data-theme="light"] .theme-toggle-icon-sun {
  color: #b45309;
}

body[data-theme="dark"] .theme-toggle-icon-moon {
  color: #e2e8f0;
}

.header-top-right {
  display: flex;
  align-items: center;
  gap: 5px;
  position: relative;
}

.header-admin-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 6px;
  background: #1e293b;
  color: #f1f5f9;
  font-size: 0.74rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.14s;
}
.header-admin-btn:hover {
  background: #334155;
  color: #fff;
  text-decoration: none;
}
.header-admin-btn i { font-size: 0.9rem; }

.header-icon-btn {
  min-height: 36px;
  min-width: 36px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid #d1d5db;
  background: #ffffff;
  color: #334155;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.header-icon-btn i {
  font-size: 18px;
  line-height: 1;
}

.header-icon-btn:hover {
  background: #f3f4f6;
  text-decoration: none;
}

.header-nav-toggle {
  display: none;
  min-height: 36px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid #d1d5db;
  background: #ffffff;
  color: #334155;
  cursor: pointer;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 700;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.header-nav-toggle:hover {
  background: #f3f4f6;
}

.header-nav-toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}

.header-nav-toggle-icon i {
  font-size: 16px;
  line-height: 1;
}

.header-nav-toggle-icon-close {
  display: none;
}

.header-nav-toggle-label {
  line-height: 1;
}

.header-nav-toggle[aria-expanded="true"] .header-nav-toggle-icon-open {
  display: none;
}

.header-nav-toggle[aria-expanded="true"] .header-nav-toggle-icon-close {
  display: inline-flex;
}

.header-nav-main-head {
  display: none;
}

.header-nav-theme-row {
  display: none;
}

.header-nav-close {
  min-height: 34px;
  min-width: 34px;
  border-radius: 999px;
  border: 1px solid #d1d5db;
  background: #ffffff;
  color: #334155;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.header-nav-close i {
  font-size: 14px;
  line-height: 1;
}

.user-menu {
  position: relative;
}

.user-menu-trigger {
  position: relative;
  min-height: 36px;
  padding: 0 10px 0 8px;
  border-radius: 999px;
  border: 1px solid #d1d5db;
  background: #ffffff;
  color: #334155;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.user-menu-trigger:hover {
  background: #f3f4f6;
}

.user-menu-trigger i {
  font-size: 18px;
  line-height: 1;
}

.user-menu-notification {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  border: 2px solid #f9f0e6;
  background: #16a34a;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 900;
  line-height: 1;
}

.user-menu-trigger-name {
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1;
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-menu.is-open .user-menu-trigger {
  background: #eef3f8;
  border-color: #cfd8e3;
  color: #1f2937;
}

.user-menu-panel {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 210px;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.13);
  z-index: 50;
}

.user-menu.is-open .user-menu-panel {
  display: block;
}

.user-menu-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  color: #1f2937;
  font-size: 0.86rem;
  font-weight: 600;
  text-decoration: none;
}

.user-menu-link i {
  width: 16px;
  text-align: center;
  font-size: 14px;
}

.user-menu-link:hover {
  background: #f3f4f6;
  text-decoration: none;
}

.user-menu-link.is-active {
  background: #eef3f8;
  color: #0f172a;
}

.user-menu-link-danger {
  color: #b91c1c;
}

.user-menu-link-badge {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #16a34a;
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: 900;
  line-height: 1;
}

.user-menu-separator {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0;
  padding: 0 4px;
  min-height: 1px;
}

.user-menu-separator::before,
.user-menu-separator::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e5e7eb;
}

.user-menu-separator span {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #9ca3af;
  white-space: nowrap;
}

/* =====================
   HEADER 2 LIGNES (variante)
   ===================== */

.header-inner-column {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 0 10px;
}

.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Ligne visiteur (logo + nav + thème + login) */

.header-row-visitor {
  gap: 16px;
}

.header-logo-block {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.site-nav-visitor {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.9rem;
}

.site-header a {
  text-decoration: none;
}
.site-header a:hover {
  text-decoration: none;
}

/* Ligne utilisateur (contributeur/admin) */

.header-row-user {
  min-height: 32px;
  font-size: 0.85rem;
}

.header-row-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-row-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-visitor-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.site-nav-user {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-user-hint {
  font-size: 0.8rem;
  color: #6b7280;
}

/* Pills / boutons du header */

.nav-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.85rem;
  border: 1px solid #d1d5db;
  background: #ffffff;
  color: #111827;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.05s ease;
}

.nav-pill:hover {
  transform: translateY(-1px);
}

.nav-pill-ghost {
  background: #ffffff;
}

.nav-pill-green {
  background: #16a34a;
  border-color: #16a34a;
  color: #f9fafb;
}
.nav-pill-green:hover {
  background: #15803d;
}

.nav-pill-admin {
  background: #8b5cf6;
  border-color: #8b5cf6;
  color: #f9fafb;
}
.nav-pill-admin:hover {
  background: #7c3aed;
}

.nav-pill-danger {
  background: #dc2626;
  border-color: #dc2626;
  color: #fef2f2;
}
.nav-pill-danger:hover {
  background: #b91c1c;
}

/* Séparateur entre les deux menus */
.header-separator {
  border-top: 1px solid #e5e7eb;
  margin-top: 4px;
  margin-bottom: 4px;
}

/* =====================
   HEADER NOUVELLE NAV
   ===================== */

.header-shell {
  padding: 6px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Ligne du haut */

.header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.header-brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: stretch;
  gap: 2px;
  min-width: max-content;
}

.header-brand-note {
  font-size: 0.68rem;
  color: #64748b;
  letter-spacing: 0.02em;
}

.header-nav-main {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--km-menu-font);
  font-size: 0.9rem;
  justify-content: center;
  flex: 1;
  padding: 6px;
  border-radius: 18px;
  background: #ffffff;
}

.nav-main-link {
  font-family: var(--km-menu-font);
  font-size: 1rem;
  color: #334155;
  opacity: 1;
  padding: 10px 16px;
  min-height: 42px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.nav-main-link i {
  font-size: 0.98rem;
  line-height: 1;
}

.nav-main-link:hover {
  background: rgba(12, 38, 69, 0.1);
  color: #0c2645;
}

.nav-main-link.is-active {
  background: #6f86a7;
  color: #ffffff;
  box-shadow: none;
}

/* Contribuer en CTA */

.nav-main-cta {
  background: #d65e2c;
  color: #ffffff;
  font-weight: 600;
}
.nav-main-cta:hover {
  background: #be5124;
  color: #ffffff;
}

.nav-main-cta.is-active {
  background: #d65e2c;
  color: #ffffff;
  box-shadow: none;
}

.nav-main-dropdown {
  position: relative;
  display: inline-flex;
}

.nav-main-dropdown::after {
  content: "";
  position: absolute;
  top: 100%;
  left: -12px;
  right: -12px;
  height: 16px;
}

.nav-main-dropdown-chevron {
  font-size: 0.72rem !important;
}

.nav-main-submenu {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  z-index: 160;
  display: grid;
  gap: 4px;
  min-width: 178px;
  padding: 6px;
  border: 1px solid #e4dfd6;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.16);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -4px);
  transition: opacity 0.14s ease, transform 0.14s ease;
}

.nav-main-dropdown:hover .nav-main-submenu,
.nav-main-dropdown:focus-within .nav-main-submenu {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.nav-main-submenu-link {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 10px;
  border-radius: 8px;
  color: #334155;
  font-size: 1rem;
  font-weight: 800;
  text-decoration: none;
}

.nav-main-submenu-link i {
  color: #d65e2c;
  font-size: 0.95rem;
}

.nav-main-submenu-link:hover,
.nav-main-submenu-link.is-active {
  background: #fff4e6;
  color: #0c2645;
  text-decoration: none;
}

/* Ligne du bas */

.header-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-size: 0.85rem;
  padding-top: 8px;
  border-top: 1px solid #e5e7eb;
}

.header-bottom-left {
  color: #6b7280;
}

.header-user-label {
  font-size: 0.8rem;
  font-weight: 500;
}

.header-bottom-guest {
  border-top: 1px solid #e5e7eb;
  padding-top: 8px;
}

.header-nav-user {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.nav-pill.is-active {
  background: #eef3f8;
  border-color: #cfd8e3;
  color: #1f2937;
}

/* Responsive header */

@media (max-width: 900px) {
  .site-header {
    position: sticky;
    top: 0;
    z-index: 200;
  }

  .header-shell.has-mobile-nav::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.44);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 109;
  }

  .header-shell.has-mobile-nav.is-mobile-nav-open::before {
    opacity: 1;
    pointer-events: auto;
  }

  .header-top {
    align-items: center;
    min-height: 58px;
  }

  .header-top-right {
    order: 2;
    margin-left: auto;
    align-self: center;
    align-items: center;
  }

  .header-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .header-shell.has-mobile-nav .header-nav-main {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(340px, 88vw);
    max-width: 100%;
    z-index: 120;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 8px;
    padding: 16px;
    border-radius: 0;
    border: none;
    background: #fff7ec;
    box-shadow: -12px 0 30px rgba(15, 23, 42, 0.24);
    transform: translateX(104%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.24s ease, opacity 0.18s ease;
    overflow-y: auto;
  }

  .header-shell.has-mobile-nav.is-mobile-nav-open .header-nav-main {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
  }

  .header-shell.has-mobile-nav .header-nav-main-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
    padding: 2px 0 12px;
    border-bottom: 1px solid #eadccd;
    color: #0c2645;
    font-size: 0.96rem;
    font-weight: 900;
  }

  .header-shell.has-mobile-nav .header-nav-theme-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid #eadccd;
  }

  .header-shell.has-mobile-nav .header-nav-theme-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: #475569;
  }

  .header-shell.has-mobile-nav .header-nav-theme-row .theme-toggle {
    min-height: 36px;
  }

  .header-shell.has-mobile-nav .header-theme-wrap {
    display: none;
  }

  .header-shell.has-mobile-nav .nav-main-link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-height: 50px;
    padding: 0 14px;
    border: 1px solid #eadccd;
    background: #ffffff;
    font-size: 1.05rem;
    font-weight: 800;
  }

  .header-shell.has-mobile-nav .nav-main-dropdown {
    display: grid;
    width: 100%;
    gap: 6px;
  }

  .header-shell.has-mobile-nav .nav-main-dropdown-chevron {
    margin-left: auto;
  }

  .header-shell.has-mobile-nav .nav-main-submenu {
    position: static;
    display: none;
    min-width: 0;
    width: 100%;
    padding: 0 0 0 14px;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  .header-shell.has-mobile-nav .nav-main-dropdown.is-open .nav-main-submenu {
    display: grid;
    gap: 6px;
  }

  .header-shell.has-mobile-nav .nav-main-dropdown.is-open .nav-main-dropdown-chevron {
    transform: rotate(180deg);
  }

  .header-shell.has-mobile-nav .nav-main-submenu-link {
    min-height: 42px;
    border: 1px solid #eadccd;
    border-radius: 12px;
    background: #fffaf3;
    font-size: 1rem;
  }

  .header-shell.has-mobile-nav .nav-main-link i {
    width: 22px;
    color: #d65e2c;
    text-align: center;
  }

  .header-shell.has-mobile-nav .nav-main-link.is-active {
    border-color: #0c2645;
    background: #0c2645;
  }

  .header-shell.has-mobile-nav .nav-main-link.is-active i {
    color: #ffffff;
  }

  .header-shell.has-mobile-nav .nav-main-cta {
    border-color: #d65e2c;
    background: #d65e2c;
    color: #ffffff;
  }

  .header-shell.has-mobile-nav .nav-main-cta i {
    color: #ffffff;
  }

  .header-shell.has-mobile-nav .header-brand {
    min-width: 0;
    max-width: calc(100% - 120px);
  }

  .header-shell.has-mobile-nav .user-menu-trigger-name {
    display: none;
  }

  .header-shell.has-mobile-nav .user-menu {
    display: block;
  }

  .header-shell.has-mobile-nav .user-menu-panel {
    right: 0;
    max-width: min(300px, 90vw);
    z-index: 130;
  }

  .header-nav-user-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid #eadccd;
  }

  .header-nav-user-id {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 14px 10px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #475569;
  }

  .header-nav-user-id i {
    font-size: 15px;
    color: #d65e2c;
  }

  .header-nav-user-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: #d65e2c;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1;
  }

  .header-shell.has-mobile-nav .nav-main-link-danger {
    color: #b91c1c;
  }

  .header-shell.has-mobile-nav .nav-main-link-danger i {
    color: #b91c1c;
  }
}

/* Desktop: user section is hidden — links live in the dropdown */
.header-nav-user-section {
  display: none;
}

@media (max-width: 560px) {
  .site-logo-inline {
    height: 36px;
    max-width: min(190px, 50vw);
  }

  .header-brand-note {
    display: none;
  }

  .header-nav-toggle-label {
    display: none;
  }

  .header-admin-btn-label {
    display: none;
  }

  .header-top-right {
    gap: 8px;
  }

  .user-menu-trigger-name {
    max-width: 96px;
  }
}

/* ======================
   MOBILE FINAL PASS (UX/UI)
   ====================== */

@media (max-width: 900px) {
  .container {
    padding: 0 14px;
  }

  .site-main {
    padding: 16px 0 28px;
  }

  .header-shell {
    padding: 4px 0;
    gap: 3px;
  }

  .header-top {
    gap: 8px;
  }

  .site-logo-inline {
    height: 36px;
    max-width: min(190px, 50vw);
  }

  .header-nav-toggle,
  .header-icon-btn,
  .user-menu-trigger {
    min-height: 42px;
    min-width: 42px;
    padding: 0;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
  }

  .header-nav-toggle-icon,
  .header-icon-btn i,
  .user-menu-trigger i {
    font-size: 19px;
  }

  .header-nav-toggle-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
  }

  .header-nav-toggle-icon i {
    display: block;
    width: 20px;
    height: 20px;
    font-size: 20px;
    line-height: 20px;
    text-align: center;
  }

  .header-shell.has-mobile-nav .header-nav-main {
    width: min(360px, 92vw);
    padding: 16px;
    gap: 10px;
  }

  .header-shell.has-mobile-nav .header-nav-main-head {
    padding-bottom: 12px;
  }

  .header-shell.has-mobile-nav .nav-main-link {
    min-height: 52px;
    font-size: 1.06rem;
    font-weight: 800;
  }

  .home-layout {
    margin-top: 20px;
    gap: 20px;
  }

  .home-actions {
    gap: 12px;
  }

  .home-logo-block {
    max-width: 280px;
    margin-bottom: 0;
  }

  .home-tagline {
    font-size: 0.92rem;
  }

  .home-btn {
    min-height: 58px;
    font-size: 1.02rem;
    font-weight: 700;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
  }

  .home-btn:hover {
    transform: none;
  }

  .home-hero-panel {
    border-radius: 20px;
    padding: 18px;
    line-height: 1.68;
  }

  .home-hero-panel h2 {
    margin-bottom: 10px;
    font-size: 1.25rem;
    line-height: 1.2;
  }

  .home-hero-panel p {
    margin: 0 0 12px;
  }

  .home-hero-panel p:last-child {
    margin-bottom: 0;
  }
}

@media (max-width: 560px) {
  .container {
    padding: 0 12px;
  }

  .site-main {
    padding-top: 14px;
  }

  .header-shell.has-mobile-nav .header-nav-main {
    width: 100vw;
    max-width: 100vw;
    padding: 14px;
  }

  .home-tagline {
    font-size: 0.88rem;
  }

  .home-btn {
    min-height: 56px;
    font-size: 0.98rem;
    padding: 12px 16px;
  }
}

/* ======================
   FORMULAIRES
   ====================== */

.search-form,
.song-form {
  margin-bottom: 24px;
  padding: 16px;
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.field-group {
  margin-bottom: 12px;
}

.field-inline {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}
.field-inline > div {
  flex: 1;
}

label {
  display: block;
  font-size: 0.85rem;
  margin-bottom: 4px;
  color: #6b7280;
}

input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="time"],
input[type="date"],
select,
textarea {
  width: 100%;
  padding: 9px 10px;
  border-radius: 10px;
  border: none;
  background: #eef3f8;
  color: #111827;
  font: inherit;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

textarea {
  resize: vertical;
}

input[type="text"]::placeholder,
input[type="number"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder,
input[type="url"]::placeholder,
textarea::placeholder {
  color: #66758a;
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="url"]:focus,
input[type="time"]:focus,
select:focus,
textarea:focus {
  outline: 0;
  background: #e8eff7;
  box-shadow: 0 0 0 3px rgba(125, 145, 173, 0.24);
}

button {
  padding: 8px 16px;
  border-radius: 999px;
  border: none;
  background: #16a34a;
  color: #f9fafb;
  font-weight: 600;
  cursor: pointer;
}
button:hover {
  background: #15803d;
}

/* Variantes de boutons (ajouter la classe sur <button> ou <a>) */

.btn-style-terre {
  background: linear-gradient(135deg, #d4592a 0%, #e1784b 100%);
  color: #ffffff;
  border: 1px solid #c44e22;
  box-shadow: 0 10px 20px rgba(140, 58, 24, 0.18);
}

.btn-style-terre:hover {
  background: linear-gradient(135deg, #c94f23 0%, #d86d41 100%);
  color: #ffffff;
}

.btn-style-ivoire {
  background: #f9f0e6;
  color: #0d2847;
  border: 1px solid #e2c6a6;
  box-shadow: 0 2px 8px rgba(13, 40, 71, 0.08);
}

.btn-style-ivoire:hover {
  background: #f3e5d5;
  color: #0d2847;
}

.btn-style-outline {
  background: transparent;
  color: #0d2847;
  border: 2px solid #0d2847;
  box-shadow: none;
}

.btn-style-outline:hover {
  background: #0d2847;
  color: #ffffff;
}

.btn-style-soft {
  background: #ffe1c1;
  color: #7a2f16;
  border: 1px solid #f2bb8e;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

.btn-style-soft:hover {
  background: #ffd3a8;
  color: #6a2712;
}

.required {
  color: #f97316;
}

.field-help {
  display: block;
  font-size: 0.8rem;
  color: #6b7280;
  margin-bottom: 4px;
}

.password-toggle-wrap {
  position: relative;
}

.password-toggle-wrap input[type="password"],
.password-toggle-wrap input[type="text"] {
  padding-right: 42px;
}

.password-toggle-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  color: #475569;
  padding: 0;
  margin: 0;
  min-width: 22px;
  min-height: 22px;
  line-height: 1;
  cursor: pointer;
  border-radius: 8px;
  font-size: 1rem;
}

.password-toggle-btn:hover {
  background: transparent;
  color: #0f172a;
}

/* ======================
   PAGE CONTRIBUER
   ====================== */

.contrib-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(260px, 0.8fr);
  gap: 16px;
  align-items: stretch;
  margin-bottom: 14px;
}

.contrib-hero-main,
.contrib-hero-side {
  min-width: 0;
}

.contrib-hero-main {
  padding: 24px;
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, rgba(220, 84, 38, 0.12), transparent 38%),
    linear-gradient(135deg, #fff8ec, #fffaf4 62%, #f3ecdf);
  border: 1px solid rgba(220, 84, 38, 0.14);
  color: #172033;
}

.contrib-kicker {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(220, 84, 38, 0.1);
  color: #d95528;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.contrib-hero h2 {
  margin: 12px 0 10px;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  line-height: 1.1;
}

.contrib-hero-text {
  margin: 0 0 14px;
  max-width: 56ch;
  color: #536273;
}

.contrib-hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.contrib-chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid #eadfce;
  color: #273243;
  font-size: 0.82rem;
  font-weight: 600;
}

.contrib-chip.is-done {
  background: #e7f8ee;
  border-color: #b9eccd;
  color: #166534;
}

.contrib-progress-card,
.contrib-side-card {
  border-radius: 18px;
  border: 1px solid #eadfce;
  background: #fffaf3;
  box-shadow: none;
}

.contrib-progress-card {
  height: 100%;
  padding: 20px;
}

.contrib-progress-label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.8rem;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.contrib-progress-value {
  display: block;
  margin-bottom: 8px;
  font-size: 2rem;
  line-height: 1;
}

.contrib-progress-text {
  margin: 0;
  font-size: 0.92rem;
  color: #4b5563;
}

.contrib-mobile-progress {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid #eadfce;
  background: #fffaf3;
  color: #536273;
  font-size: 0.86rem;
}

.contrib-mobile-progress strong {
  color: #0d2a4d;
}

.contrib-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(250px, 0.8fr);
  gap: 20px;
  align-items: start;
}

.site-main:has(.contrib-hero) {
  max-width: 1180px;
}

/* Admin-users : pleine hauteur viewport */
body:has(.admin-users-page) {
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

body:has(.admin-users-page) .site-footer { display: none; }
body:has(.admin-users-page) .site-header  { display: none; }

.site-main:has(.admin-users-page) {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0;
  max-width: none;
}

/* ── Admin topbar ──────────────────────────────────────────────────────────── */
.admin-topbar {
  flex-shrink: 0;
  height: 44px;
  background: #0f172a;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  gap: 12px;
  z-index: 100;
}

.admin-topbar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #f1f5f9;
  min-width: 0;
}
.admin-topbar-brand:hover { text-decoration: none; }
.admin-topbar-logo {
  width: 26px;
  height: 26px;
  object-fit: contain;
  flex-shrink: 0;
}
.admin-topbar-logo-light { display: none; }
.admin-topbar-logo-dark  { display: block; }

.admin-topbar-brand-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: #f1f5f9;
  white-space: nowrap;
}
.admin-topbar-admin-badge {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  background: #334155;
  color: #94a3b8;
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}

.admin-topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-topbar-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #cbd5e1;
  text-decoration: none;
  padding: 4px 11px;
  border: 1px solid #334155;
  border-radius: 6px;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  white-space: nowrap;
}
.admin-topbar-back:hover {
  background: #1e293b;
  color: #f1f5f9;
  border-color: #475569;
  text-decoration: none;
}

.admin-topbar-user {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  color: #64748b;
  max-width: 160px;
}
.admin-topbar-user span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-topbar .theme-toggle { color: #94a3b8; }
.admin-topbar .theme-toggle-track { background: #334155; }

body[data-theme="dark"] .admin-topbar {
  background: #080d14;
  border-bottom: 1px solid #1e293b;
}

.contrib-main,
.contrib-side {
  min-width: 0;
}

.contrib-form {
  padding: 16px;
  border-radius: 16px;
}

.contrib-form-section + .contrib-form-section {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #eef2f7;
}

.contrib-section-head {
  margin-bottom: 10px;
}

.contrib-section-head h3 {
  margin: 0 0 4px;
  font-size: 1.05rem;
}

.contrib-section-head p {
  margin: 0;
  color: #6b7280;
  font-size: 0.9rem;
}

.contrib-form input[type="url"],
.contrib-form input[type="file"] {
  width: 100%;
  padding: 8px;
  border-radius: 10px;
  border: none;
  background: #eef3f8;
  color: #111827;
  font: inherit;
}

.contrib-lyrics-section {
  padding: 16px;
  border-radius: 14px;
  border: 1px solid #eadfce;
  background:
    radial-gradient(circle at top right, rgba(220, 84, 38, 0.1), transparent 42%),
    linear-gradient(180deg, #fffaf3, #ffffff);
}

.contrib-lyrics-workbench {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contrib-lyrics-helper {
  margin: 0;
  color: #64748b;
  font-size: 0.78rem;
  line-height: 1.35;
}

.contrib-lyrics-workbench .tox-tinymce {
  border-radius: 12px !important;
  border-color: #eadfce !important;
  min-height: 440px;
}

.contrib-lyrics-workbench .tox .tox-toolbar__group .tox-tbtn[data-mce-name^="lyric"] {
  border-radius: 999px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #1f2937;
  font-weight: 700;
  padding: 0 10px;
  min-width: 0;
}

.contrib-lyrics-workbench .tox .tox-toolbar__group .tox-tbtn[data-mce-name^="lyric"]:hover {
  background: #eef2f7;
  border-color: #b9c6d8;
}

.contrib-lyrics-workbench .tox .tox-toolbar__group .tox-tbtn[data-mce-name="lyricChoeur"] {
  background: #e0f2fe;
  border-color: #7dd3fc;
  color: #075985;
  box-shadow: inset 0 0 0 1px rgba(14, 165, 233, 0.2);
}

.contrib-lyrics-workbench .tox .tox-toolbar__group .tox-tbtn[data-mce-name="lyricChoeur"]:hover,
.contrib-lyrics-workbench .tox .tox-toolbar__group .tox-tbtn[data-mce-name="lyricChoeur"].tox-tbtn--enabled,
.contrib-lyrics-workbench .tox .tox-toolbar__group .tox-tbtn[data-mce-name="lyricChoeur"][aria-pressed="true"],
.contrib-lyrics-workbench .tox .tox-toolbar__group .tox-tbtn[data-mce-name="lyricChoeur"].tox-tbtn--select,
.contrib-lyrics-workbench .tox .tox-toolbar__group .tox-tbtn[data-mce-name="lyricChoeur"].is-choeur-active {
  background: #0ea5e9;
  border-color: #0284c7;
  color: #ffffff;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.22);
}

.contrib-lyrics-workbench .tox .tox-toolbar__group .tox-tbtn[data-mce-name="lyricChoeur"].tox-tbtn--enabled svg,
.contrib-lyrics-workbench .tox .tox-toolbar__group .tox-tbtn[data-mce-name="lyricChoeur"][aria-pressed="true"] svg,
.contrib-lyrics-workbench .tox .tox-toolbar__group .tox-tbtn[data-mce-name="lyricChoeur"].tox-tbtn--select svg,
.contrib-lyrics-workbench .tox .tox-toolbar__group .tox-tbtn[data-mce-name="lyricChoeur"].is-choeur-active svg {
  fill: #ffffff;
}

.contrib-lyrics-workbench .tox .tox-edit-area__iframe {
  background: transparent;
}

.contrib-lyrics-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 2px;
  color: #475569;
  font-size: 0.8rem;
}

.contrib-lyrics-meta strong {
  color: #0f172a;
}

.contrib-lyrics-meta [data-lyrics-status] {
  text-transform: lowercase;
}

.contrib-lyrics-meta [data-lyrics-status].is-empty {
  color: #9a3412;
}

.contrib-lyrics-meta [data-lyrics-status].is-partial {
  color: #1d4ed8;
}

.contrib-lyrics-meta [data-lyrics-status].is-complete {
  color: #166534;
}

.contrib-form input[type="text"]:focus,
.contrib-form input[type="number"]:focus,
.contrib-form input[type="url"]:focus,
.contrib-form textarea:focus {
  outline: 0;
  background: #e8eff7;
  box-shadow: 0 0 0 3px rgba(125, 145, 173, 0.24);
}

.contrib-cover-preview {
  display: none;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
  padding: 12px;
  border-radius: 14px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
}

.contrib-cover-preview.is-visible {
  display: flex;
}

.contrib-cover-preview img {
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
}

.contrib-cover-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #4b5563;
  font-size: 0.86rem;
}

.contrib-cover-copy strong {
  color: #111827;
}

.contrib-form-actions {
  margin-top: 6px;
}

.contrib-action-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 12px;
}

.contrib-action-grid:has(.contrib-action-tertiary) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.contrib-action-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-height: 96px;
  padding: 16px;
  border-radius: 14px;
  text-align: left;
  box-shadow: none;
}

.contrib-action-title {
  font-size: 1rem;
  font-weight: 700;
}

.contrib-action-text {
  font-size: 0.88rem;
  line-height: 1.45;
  opacity: 0.92;
}

button.contrib-action-secondary {
  background: #fffaf3;
  color: #111827;
  border: 1px solid #eadfce;
}

button.contrib-action-secondary:hover {
  background: #f8efe2;
}

button.contrib-action-primary {
  background: #d95528;
  color: #fffaf3;
  border: 1px solid #c84d23;
}

button.contrib-action-primary:hover {
  background: #c84d23;
}

button.contrib-action-tertiary {
  background: #0d2a4d;
  color: #f8fafc;
  border: 1px solid #0d2a4d;
}

button.contrib-action-tertiary:hover {
  background: #17375e;
}

.contrib-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 18px;
}

.contrib-side-card {
  padding: 14px;
}

.contrib-side-card h3 {
  margin: 0 0 10px;
  font-size: 1rem;
}

.contrib-side-card p {
  margin: 0 0 10px;
  color: #4b5563;
  font-size: 0.9rem;
}

.contrib-side-card p:last-child {
  margin-bottom: 0;
}

.contrib-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contrib-checklist li {
  position: relative;
  padding-left: 22px;
  color: #4b5563;
  font-size: 0.9rem;
  transition: color 0.15s ease;
}

.contrib-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42rem;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #cbd5e1;
}

.contrib-checklist li.is-done {
  color: #166534;
  font-weight: 600;
}

.contrib-checklist li.is-done::before {
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.14);
}

@media (max-width: 860px) {
  .contrib-hero,
  .contrib-layout {
    grid-template-columns: 1fr;
  }

  .contrib-hero-side {
    display: none;
  }

  .contrib-mobile-progress {
    display: flex;
  }

  .contrib-side {
    position: static;
  }

  .contrib-action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contrib-action-grid:has(.contrib-action-tertiary) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contrib-lyrics-workbench .tox-tinymce {
    min-height: 380px;
  }
}

@media (max-width: 640px) {
  .contrib-lyrics-section {
    padding: 10px;
  }

  .contrib-lyrics-helper {
    font-size: 0.74rem;
  }

  .contrib-lyrics-workbench .tox-tinymce {
    min-height: 330px;
  }

  .contrib-lyrics-meta {
    gap: 8px;
    font-size: 0.76rem;
  }

  .contrib-action-grid {
    grid-template-columns: 1fr;
  }

  .contrib-action-grid:has(.contrib-action-tertiary) {
    grid-template-columns: 1fr;
  }

  .contrib-mobile-progress {
    align-items: flex-start;
    flex-direction: column;
  }

  .contrib-cover-preview.is-visible {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ======================
   LISTE MORCEAUX / DÉTAIL
   ====================== */

/* LISTE MORCEAUX – version compacte (on garde cette version) */

.song-list {
  display: grid;
  gap: 8px;
}

/* Carte cliquable */
.song-card {
  background: #ffffff;
  border-radius: 8px;
  padding: 8px 10px;
  border: 1px solid #e5e7eb;
  transition: background-color 0.12s ease, border-color 0.12s ease, transform 0.05s ease;
}

.song-card:hover {
  background: #ccffd3;
  border-color: #22c55e;
}

.song-card-link,
.song-card-link:hover {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.song-card-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

/* Titre en vert */
.song-card-title {
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #16a34a;
}

/* Auteur en noir */
.song-card-author {
  font-size: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #111827;
}

.song-card-year {
  opacity: 0.8;
}

/* Extrait compact */
.song-card-excerpt {
  margin-top: 2px;
  font-size: 0.8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #111827;
}

/* Détail morceau */

.song-detail {
  max-width: none;
}

.song-detail-page {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.song-detail-hero {
  margin: 0 0 8px;
  padding: 16px 10px 20px;
  border: 0;
  border-bottom: 1px solid #eadfce;
  border-radius: 0;
  background: transparent;
}

.song-detail-kicker {
  margin: 0 0 3px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #d95528;
}

.song-detail-title {
  margin: 0 0 5px;
  font-size: clamp(1.35rem, 2.4vw, 1.95rem);
  line-height: 1.08;
}

.song-detail-title-author {
  color: #536273;
  font-size: 0.9em;
  font-weight: 600;
}

.song-meta-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.song-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid #eadfce;
  background: rgba(255, 255, 255, 0.66);
}

.song-meta-item strong,
.song-meta-item span:last-child {
  font-size: 0.82rem;
  line-height: 1.18;
  color: #111827;
}

.song-meta-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #7b6b5b;
}

.song-lyrics-contributors {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 14px 0 0;
  padding-top: 10px;
  border-top: 1px solid #eadfce;
  color: #536273;
  font-size: 0.88rem;
  line-height: 1.35;
}

.song-lyrics-contributors span {
  color: #7b6b5b;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.song-lyrics-contributors strong {
  color: #172033;
}

.song-header-actions {
  margin-top: 5px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.song-header-actions .btn-meta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 28px;
  padding: 4px 8px;
  text-align: center;
  white-space: normal;
  line-height: 1.15;
}

.song-header-actions .btn-link {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 8px;
  font-size: 0.82rem;
}

.song-detail-side .song-block + .song-block {
  margin-top: 14px;
}

.song-video-panel,
.song-video-compact {
  margin-top: 0;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid #eadfce;
  background: #fffaf3;
}

.song-video-panel .song-block-head,
.song-video-compact .song-block-head {
  margin-bottom: 8px;
}

.song-video-panel h3,
.song-video-compact h3 {
  margin: 0;
}

.song-video-compact-text {
  margin: 0 0 8px;
  color: #536273;
  font-size: 0.84rem;
  line-height: 1.35;
}

.song-video-embed {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  background: #000;
  aspect-ratio: 16 / 9;
}

.song-video-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.song-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(240px, 0.72fr);
  gap: 22px;
  align-items: start;
  padding: 20px;
  background: #f9f0e6;
  border-radius: 20px;
}

.song-detail-content,
.song-detail-side {
  min-width: 0;
}

.song-detail-side {
  position: sticky;
  top: 18px;
}

.song-detail header {
  margin-bottom: 0;
}
.song-detail-top {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
}

.song-detail-main {
  flex: 1 1 220px;
  min-width: 0;
}

.song-hero-quick-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0 0 5px;
  font-size: 0.82rem;
  color: #334155;
}

.song-hero-quick-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid #eadfce;
}

.song-hero-quick-item strong {
  color: #111827;
}

.song-hero-quick-link {
  color: #0d2a4d;
  font-weight: 700;
  text-decoration: none;
}

.song-hero-quick-link:hover {
  color: #d95528;
}

.song-detail-cover {
  flex: 0 0 auto;
}

.song-detail-cover img {
  display: block;
  width: 76px;
  height: 76px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

.song-cover-fallback {
  width: 76px;
  height: 76px;
  border-radius: 10px;
  border: 1px solid #dbe2ea;
  background: linear-gradient(135deg, #d9e1eb, #eef3f8);
  color: #475569;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.song-detail .meta {
  font-size: 0.9rem;
  color: #6b7280;
  line-height: 1.55;
}

.song-detail h2,
.song-detail h3 {
  color: #111827;
}

.song-detail section + section {
  margin-top: 18px;
}

.song-block {
  border-radius: 14px;
}

.song-block-head {
  margin-bottom: 10px;
}

.song-block-head h3 {
  margin: 0;
}

.versions ul {
  margin: 10px 0 0;
  padding-left: 18px;
}

.versions li {
  margin-bottom: 12px;
  color: #374151;
}

.versions small {
  color: #6b7280;
}

/* ======================
   PAROLES / EXPLICATION
   ====================== */

.lyrics-html {
  position: relative;
  background:
    linear-gradient(180deg, #fffaf3, #ffffff);
  border-radius: 14px;
  border: 1px solid #eadfce;
  padding: 10px 18px 16px;
  font-size: 1.02rem;
  line-height: 1.8;
  white-space: normal;
  color: #111827;
}

.lyrics-html h3,
.tox .lyrics-section-title {
  margin-top: 11px;
  margin-bottom: 11px;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #d95528;
}

.lyrics-html > :first-child {
  margin-top: 0;
}

.lyrics-html p,
.tox .lyrics-line {
  margin: 0 0 7px;
  color: inherit;
  letter-spacing: 0.7px;
}

.lyrics-html p:empty {
  display: none;
}

.lyrics-html hr {
  border: none;
  border-top: 1px dashed #d1d5db;
  margin: 10px 0;
}

.lyrics-reader-tools {
  position: sticky;
  top: 86px;
  float: right;
  z-index: 8;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 18px 0 10px 12px;
  padding: 4px;
  border: 1px solid #eadfce;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(8px);
}

.lyrics-reader-tools button {
  min-width: 34px;
  min-height: 30px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #334155;
  font-weight: 900;
  cursor: pointer;
}

.lyrics-reader-tools button:hover {
  background: #fff7ed;
  color: #9a3412;
}

.lyrics-reader-body {
  font-size: calc(1em * var(--lyrics-reader-scale, 1));
}

.lyrics-html .lyrics-highlight,
.tox .lyrics-highlight {
  background: rgba(250, 204, 21, 0.25);
  padding: 0 2px;
  border-radius: 3px;
}

.lyrics-html .lyrics-choeur,
.tox .lyrics-choeur {
  background: rgba(14, 165, 233, 0.18);
  color: inherit;
  padding: 1px 5px;
  border-radius: 5px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.explanation-html {
  margin-top: 8px;
  background: #fffaf3;
  border-radius: 14px;
  border: 1px solid #eadfce;
  padding: 14px 16px;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #111827;
}

.song-report-panel {
  display: grid;
  gap: 12px;
  padding: 0;
  border-radius: 14px;
  border: 0;
  background: transparent;
}

.song-report-panel.is-open {
  padding: 16px 18px;
  border: 1px solid #eadfce;
  background: #fffaf3;
}

.song-report-toggle {
  justify-self: start;
  min-height: 36px;
  border: 0;
  border-radius: 999px;
  background: #efe0cf;
  color: #334155;
  padding: 8px 13px;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 850;
  cursor: pointer;
}

.song-report-toggle:hover {
  background: #e8d6c3;
  color: #0f172a;
}

.song-report-panel.is-open .song-report-toggle {
  background: #6f86a7;
  color: #fffaf3;
}

.song-report-content {
  display: grid;
  gap: 12px;
}

.song-report-content[hidden] {
  display: none;
}

.song-report-intro {
  margin: 0 0 12px;
  color: #536273;
  font-size: 0.92rem;
  line-height: 1.5;
}

.song-report-form {
  display: grid;
  gap: 12px;
}

.song-report-reasons {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.song-report-reasons legend,
.song-report-comment span {
  margin-bottom: 6px;
  color: #172033;
  font-size: 0.88rem;
  font-weight: 850;
}

.song-report-reasons label {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #fff4e6;
  color: #334155;
  font-size: 0.9rem;
  font-weight: 760;
}

.song-report-reasons input {
  width: 16px;
  height: 16px;
  accent-color: #d95528;
}

.song-report-comment {
  display: grid;
  gap: 6px;
}

.song-report-comment textarea {
  width: 100%;
  min-height: 92px;
  resize: vertical;
  border: 1px solid #eadfce;
  border-radius: 12px;
  background: #fffaf3;
  color: #111827;
  padding: 10px 12px;
  font: inherit;
}

.song-report-submit {
  justify-self: start;
  min-height: 38px;
  border: 0;
  border-radius: 999px;
  background: #6f86a7;
  color: #fffaf3;
  padding: 8px 14px;
  font-weight: 850;
  cursor: pointer;
}

.song-report-submit:hover {
  background: #5f7698;
}

.song-report-notice {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 750;
}

.song-report-notice p {
  margin: 0;
}

.song-report-notice.is-success {
  background: #ecfdf3;
  color: #166534;
}

.song-report-notice.is-error {
  background: #fff1f2;
  color: #9f1239;
}

/* ======================
   COMMENTAIRES / MESSAGES
   ====================== */

.comments {
  margin-top: 24px;
}

.song-comments-panel {
  margin-top: 0;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid #eadfce;
  background: #fffaf3;
}

.song-comments-panel h3 {
  margin-top: 0;
}

.comment-empty {
  margin: 0;
  color: #4b5563;
  line-height: 1.6;
}

.comment {
  background: #ffffff;
  border-radius: 8px;
  padding: 8px 12px;
  border: 1px solid #e5e7eb;
  margin-bottom: 8px;
}

.comment p:last-child {
  margin-bottom: 0;
  color: #111827;
  line-height: 1.32;
}

.comment-meta {
  font-size: 0.8rem;
  color: #6b7280;
}

.comment-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}

.comment-form textarea {
  width: 100%;
  border: 1.5px solid #d8cbbb;
  border-radius: 8px;
  padding: 10px 12px;
  font: inherit;
  font-size: 0.9rem;
  background: #fff;
  color: #111827;
  resize: vertical;
  box-sizing: border-box;
  transition: border-color 0.15s;
}

.comment-form textarea:focus {
  outline: none;
  border-color: #d95528;
  box-shadow: 0 0 0 3px rgba(217, 85, 40, 0.1);
}

.comment-form button[type="submit"] {
  align-self: flex-end;
  min-height: 36px;
  padding: 6px 18px;
  border: 1px solid #c94f20;
  border-radius: 999px;
  background: #d95528;
  color: #fff;
  font: inherit;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  transition: background 0.15s;
}

.comment-form button[type="submit"]:hover {
  background: #c94f20;
}

.comment-reply-form {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #eadfce;
}

.song-revision-panel,
.revision-compose-shell,
.revision-review-shell {
  border: 1px solid #eadfce;
  background: #fffaf3;
  border-radius: 14px;
}

.song-revision-panel {
  padding: 16px 18px;
}

.song-revision-intro,
.revision-compose-head p,
.revision-review-head p,
.revision-courtesy-note,
.song-video-compact-text {
  color: #536273;
}

.song-revision-action,
.revision-btn-primary,
.revision-btn-secondary {
  min-height: 38px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  font-weight: 800;
  text-decoration: none;
}

.song-revision-action,
.revision-btn-primary {
  border: 1px solid #c94f20;
  background: #d95528;
  color: #ffffff;
}

.song-revision-action:hover,
.revision-btn-primary:hover {
  background: #c94f20;
  color: #ffffff;
  text-decoration: none;
}

.revision-btn-secondary {
  border: 1px solid #d7c8b8;
  background: #fffaf3;
  color: #172033;
}

.song-revision-owner-alert {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #f2c89d;
  background: #fff4df;
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: #6b4b1f;
}

.song-revision-list {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.song-revision-list a {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 40px 9px 10px;
  border-radius: 10px;
  border: 1px solid #eadfce;
  background: #ffffff;
  color: #172033;
  text-decoration: none;
}

.song-revision-list span {
  color: #6b7280;
  font-size: 0.82rem;
}

.song-revision-list-meta {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.song-revision-status {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid #d1d5db;
  background: #f8fafc;
  color: #475569 !important;
  font-weight: 900;
}

.song-revision-status i {
  font-size: 0.78rem;
  line-height: 1;
}

.song-revision-status.is-accepted {
  border-color: #bbf7d0;
  background: #dcfce7;
  color: #166534 !important;
}

.song-revision-status.is-rejected {
  border-color: #fecaca;
  background: #fee2e2;
  color: #991b1b !important;
}

.revision-compose-shell,
.revision-review-shell {
  padding: 20px;
}

.site-main:has(.revision-compose-shell) {
  max-width: 1500px;
}

.revision-compose-head,
.revision-review-head {
  margin-bottom: 16px;
}

.revision-compose-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.revision-compose-head p {
  max-width: 760px;
}

.revision-mobile-tabs {
  display: none;
}

.revision-kicker {
  display: inline-flex;
  margin-bottom: 6px;
  color: #d95528;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.revision-compose-head h2,
.revision-review-head h2 {
  margin: 0;
  color: #172033;
  font-size: clamp(1.5rem, 3vw, 2rem);
}

.revision-compose-grid {
  display: grid;
  grid-template-columns: minmax(300px, 390px) minmax(560px, 1fr) minmax(280px, 330px);
  gap: 16px;
  align-items: start;
}

.revision-compare-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
  gap: 16px;
  align-items: start;
}

.revision-review-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.34fr);
  gap: 16px;
  align-items: start;
}

.revision-review-grid .revision-compare-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.revision-editor-main {
  min-width: 0;
}

.revision-validation-main {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.revision-validation-main .revision-summary-panel {
  margin-bottom: 0;
}

.revision-validation-main .revision-compare-card {
  min-width: 0;
}

.revision-review-editor-card .tox-tinymce {
  width: 100% !important;
  border-radius: 12px !important;
  border-color: #eadfce !important;
}

.revision-review-editor-card .tox .tox-toolbar,
.revision-review-editor-card .tox .tox-toolbar__primary {
  align-items: center;
}

.revision-review-editor-card .tox .tox-edit-area__iframe {
  background: transparent;
}

.revision-validation-annotations {
  align-self: start;
}

.revision-original-panel,
.revision-form,
.revision-compare-card,
.revision-summary-panel,
.revision-discussion-panel,
.revision-annotations-panel,
.revision-annotation-workbench {
  border: 1px solid #eadfce;
  border-radius: 14px;
  background: #ffffff;
  padding: 16px;
}

.revision-form {
  display: grid;
  gap: 14px;
  border: 0;
  background: transparent;
  padding: 0;
  min-width: 0;
}

.revision-form .field-group {
  margin-bottom: 0;
}

.revision-form > .field-group:first-of-type {
  max-width: none;
}

.revision-form .tox-tinymce {
  width: 100% !important;
}

.revision-summary-field,
.revision-editor-card,
.revision-notes-field {
  border: 1px solid #eadfce;
  border-radius: 14px;
  background: #ffffff;
  padding: 16px;
}

.revision-readonly-input,
.revision-readonly-note {
  width: 100%;
  border-radius: 10px;
  background: #eef3f8;
  color: #536273;
  line-height: 1.45;
}

.revision-readonly-input {
  min-height: 42px;
  display: flex;
  align-items: center;
  padding: 10px 12px;
  font-weight: 650;
}

.revision-readonly-note {
  min-height: 96px;
  padding: 12px;
}

.revision-validation-shell .revision-discussion-panel {
  margin-top: 16px;
}

.revision-editor-main .tox .tox-toolbar,
.revision-editor-main .tox .tox-toolbar__primary,
.revision-editor-main .tox .tox-toolbar__overflow {
  align-items: center;
}

.revision-editor-main .tox .tox-tbtn {
  min-width: 34px;
}

.revision-original-panel h3,
.revision-compare-card h3,
.revision-discussion-panel h3,
.revision-annotation-head h3 {
  margin-top: 0;
}

.revision-annotation-workbench {
  padding: 14px;
  background: #fffaf3;
  position: sticky;
  top: 92px;
  max-height: calc(100vh - 120px);
  overflow: auto;
}

.revision-original-panel {
  max-height: calc(100vh - 120px);
  overflow: auto;
}

.revision-panel-head {
  margin-bottom: 12px;
}

.revision-panel-head span {
  display: inline-flex;
  margin-bottom: 4px;
  color: #d95528;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.revision-panel-head h3 {
  margin: 0;
}

.revision-annotation-head {
  margin-bottom: 8px;
}

.revision-annotation-head h3 {
  margin-bottom: 0;
  color: #172033;
  font-size: 1rem;
}

.revision-annotation-head p {
  margin: 0;
  color: #64748b;
  font-size: 0.88rem;
  line-height: 1.45;
}

.revision-annotation-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.revision-annotation-empty {
  margin: 0;
  padding: 11px 12px;
  border-radius: 10px;
  border: 1px dashed #d8cbbb;
  background: rgba(255, 255, 255, 0.66);
  color: #64748b;
  font-size: 0.88rem;
}

.revision-annotation-draft,
.revision-annotation-card-main {
  width: 100%;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid #eadfce;
  background: #ffffff;
  text-align: left;
}

.revision-annotation-draft {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  align-items: start;
}

.revision-annotation-title {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
}

.revision-annotation-draft strong,
.revision-annotation-card strong {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  color: #172033;
  font-size: 0.9rem;
  line-height: 1.35;
  min-width: 0;
}

.revision-annotation-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.revision-annotation-jump {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.revision-annotation-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  background: #d95528;
  color: #ffffff;
  font-size: 0.74rem;
  font-weight: 900;
  line-height: 1;
  flex: 0 0 auto;
}

.revision-annotation-draft span,
.revision-annotation-card span {
  display: inline-flex;
  align-items: center;
  margin-top: 3px;
  color: #6b7280;
  font-size: 0.82rem;
  line-height: 1.35;
}

.revision-annotation-draft .revision-annotation-number,
.revision-annotation-card .revision-annotation-number {
  display: inline-flex;
  margin-top: 0;
  color: #ffffff;
}

.revision-annotation-draft [data-annotation-selected] {
  margin-top: 0;
  color: #172033;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.revision-annotation-selected {
  margin-top: 0 !important;
  color: #172033 !important;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.revision-annotation-type {
  margin-top: 0 !important;
  color: #64748b !important;
  font-weight: 900;
}

.revision-annotation-proposal {
  margin-top: 0 !important;
  color: #0f8f4f !important;
  font-weight: 800;
}

.revision-annotation-proposal.is-empty {
  display: none;
}

.revision-annotation-controls {
  display: grid;
  grid-template-columns: minmax(120px, 0.42fr) minmax(160px, 1fr);
  gap: 8px;
}

.revision-annotation-kind,
.revision-annotation-suggestion {
  display: grid;
  gap: 5px;
}

.revision-annotation-kind span,
.revision-annotation-suggestion span {
  color: #64748b;
  font-size: 0.76rem;
  font-weight: 800;
}

.revision-annotation-kind select,
.revision-annotation-suggestion input {
  width: 100%;
  min-height: 38px;
  border: 1px solid #d8cbbb;
  border-radius: 10px;
  background: #ffffff;
  color: #172033;
  padding: 0 10px;
  font: inherit;
}

.revision-annotation-kind select:focus,
.revision-annotation-suggestion input:focus {
  border-color: #d65e2c;
  box-shadow: 0 0 0 4px rgba(214, 94, 44, 0.12);
  outline: none;
}

.revision-annotation-suggestion.is-hidden {
  display: none;
}

.revision-annotation-draft p,
.revision-annotation-card p,
.revision-annotation-note {
  margin: 6px 0 0;
  color: #334155;
  font-size: 0.9rem;
  line-height: 1.45;
}

.revision-annotation-note p {
  margin: 0 0 0.45em;
}

.revision-annotation-note p:last-child {
  margin-bottom: 0;
}

.revision-annotation-note-editor {
  min-height: 86px;
  padding: 9px 10px;
  border-radius: 10px;
  border: 1px solid #d8cbbb;
  background: #fffaf3;
  color: #172033;
  line-height: 1.45;
  outline: none;
}

.revision-annotation-note-editor:focus {
  border-color: #d65e2c;
  box-shadow: 0 0 0 4px rgba(214, 94, 44, 0.12);
}

.revision-annotation-note-editor:empty::before {
  content: attr(data-placeholder);
  color: #94a3b8;
}

.revision-annotation-remove {
  justify-self: end;
  min-height: 26px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid #e2d4c3;
  background: #ffffff;
  color: #9a3412;
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
}

.revision-annotation-remove:hover {
  border-color: #f0b489;
  background: #fff7ed;
}

.revision-annotations-panel {
  position: sticky;
  top: 92px;
}

.revision-annotation-card-main {
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.revision-annotation-card {
  scroll-margin-top: 96px;
}

.revision-annotation-card:target .revision-annotation-card-main {
  border-color: #d95528;
  box-shadow: 0 0 0 4px rgba(217, 85, 40, 0.12);
}

.revision-annotation-card-main:hover {
  border-color: #f0b489;
  background: #fff7ed;
}

.revision-annotation-review {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 0;
}

.revision-annotation-review form {
  display: inline-flex;
  gap: 6px;
  margin: 0;
}

.revision-annotation-status,
.revision-annotation-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 900;
}

.revision-annotation-status {
  gap: 4px;
}

.revision-annotation-status i {
  font-size: 0.9rem;
  line-height: 1;
}

.revision-annotation-status {
  border: 1px solid #e2d4c3;
  background: #fff7ed;
  color: #8a4b18;
}

.revision-annotation-status.is-accepted {
  border-color: #bbf7d0;
  background: #dcfce7;
  color: #166534;
}

.revision-annotation-status.is-rejected {
  border-color: #fecaca;
  background: #fee2e2;
  color: #991b1b;
}

.revision-annotation-action {
  border: 1px solid #d8cbbb;
  background: #ffffff;
  color: #172033;
  cursor: pointer;
}

.revision-annotation-action.is-accept {
  border-color: #86efac;
  color: #166534;
}

.revision-annotation-action.is-reject {
  border-color: #fecaca;
  color: #991b1b;
}

.revision-annotation-action:hover {
  background: #fff7ed;
}

.lyrics-html .revision-annotation-marker,
.tox .revision-annotation-marker {
  background: rgba(250, 204, 21, 0.34);
  color: inherit;
  padding: 1px 4px;
  border-radius: 5px;
  outline: 1px solid rgba(180, 83, 9, 0.22);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.lyrics-html .revision-annotation-marker[data-revision-label]::after,
.tox .revision-annotation-marker[data-revision-label]::after {
  content: attr(data-revision-label);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35em;
  height: 1.35em;
  margin-left: 0.25em;
  padding: 0 0.32em;
  border-radius: 999px;
  background: #d95528;
  color: #ffffff;
  font-size: 0.68em;
  font-weight: 800;
  line-height: 1;
  vertical-align: text-top;
}

.lyrics-html .revision-annotation-suggestion-inline,
.tox .revision-annotation-suggestion-inline {
  display: inline;
  margin-left: 0.25em;
  background: transparent;
  color: #0f8f4f;
  font: inherit;
  font-weight: 700;
  white-space: nowrap;
}

.lyrics-html .revision-annotation-marker.is-focused {
  animation: revisionAnnotationPulse 0.9s ease-in-out 2;
}

@keyframes revisionAnnotationPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(217, 85, 40, 0);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(217, 85, 40, 0.22);
  }
}

.revision-form-actions,
.revision-review-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 14px;
}

.revision-summary-panel {
  margin-bottom: 16px;
}

.revision-summary-panel p {
  margin-bottom: 0;
  color: #536273;
  line-height: 1.55;
}

.revision-discussion-panel {
  margin-top: 16px;
}

.revision-chat-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.revision-chat-head h3 {
  margin: 0;
}

.revision-chat-head span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: #f1f5f9;
  border: 1px solid #d7dde6;
  color: #0b2a4a;
  font-size: 0.8rem;
  font-weight: 800;
  white-space: nowrap;
}

.revision-chat-thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 430px;
  overflow-y: auto;
  padding: 12px;
  border-radius: 14px;
  background: #f8fafc;
  border: 1px solid #e4e8ef;
}

.revision-chat-empty {
  text-align: center;
}

.song-favorite-btn {
  border: 1px solid #d8cbbb;
  background: #ffffff;
  color: #536273;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 999px;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
}

.song-favorite-btn:hover {
  background: #fff7ed;
  border-color: #f0b489;
  color: #9a3412;
  text-decoration: none;
}

.song-favorite-btn.is-favorite {
  background: #fff1f2;
  border-color: #fecdd3;
  color: #be123c;
}

.song-favorite-btn:disabled {
  opacity: 0.68;
  cursor: wait;
}

.song-detail-favorite {
  min-height: 32px;
  padding: 0 12px;
  font-size: 0.82rem;
}

.song-detail-playlist {
  min-height: 32px;
  padding: 0 12px;
  font-size: 0.82rem;
}

.revision-message {
  display: flex;
  flex-direction: column;
  max-width: min(76%, 620px);
  margin-bottom: 8px;
}

.revision-message.is-own {
  align-self: flex-start;
  align-items: flex-start;
}

.revision-message.is-other {
  align-self: flex-end;
  align-items: flex-end;
}

.revision-message-bubble {
  padding: 10px 13px;
  border-radius: 16px;
  border: 1px solid #eadfce;
  background: #fffaf3;
  color: #172033;
  box-shadow: 0 8px 18px rgba(78, 35, 14, 0.04);
}

.revision-message.is-own .revision-message-bubble {
  border-color: rgba(221, 84, 40, 0.2);
  background: #dd5428;
  color: #fffaf2;
  border-bottom-left-radius: 6px;
}

.revision-message.is-other .revision-message-bubble {
  border-bottom-right-radius: 6px;
}

.revision-message-bubble p {
  margin: 0;
  line-height: 1.45;
}

.revision-message p:last-child,
.revision-message-bubble p:last-child {
  margin-bottom: 0;
}

.revision-message-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 5px 4px 0;
  color: #6b7280;
  font-size: 0.76rem;
}

.revision-message-form {
  margin-top: 12px;
}

.revision-message-form label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.revision-chat-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid #e4e8ef;
  background: #ffffff;
}

.revision-chat-composer textarea {
  min-height: 44px;
  max-height: 150px;
  resize: vertical;
  border: 0;
  background: transparent;
  padding: 8px 6px;
}

.revision-chat-composer textarea:focus {
  outline: none;
  box-shadow: none;
}

.revision-chat-composer .btn-primary-large {
  min-height: 44px;
  padding: 10px 18px;
}

@media (max-width: 980px) {
  .playlist-shell {
    padding: 12px;
    border-radius: 16px;
  }

  .playlist-head,
  .playlist-public-hero,
  .playlist-add-panel {
    flex-direction: column;
  }

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

  .playlist-add-panel form {
    width: 100%;
    flex-direction: column;
  }

  .playlist-share {
    width: 100%;
    justify-items: start;
  }

  .playlist-song-list li {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .playlist-song-list form {
    grid-column: 2;
  }

  .song-detail-hero {
    padding: 0 0 9px;
  }

  .song-detail-layout {
    grid-template-columns: 1fr;
    padding: 20px;
  }

  .song-detail-side {
    position: static;
  }

  .song-detail-top {
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
  }

  .song-detail-cover img,
  .song-cover-fallback {
    width: 68px;
    height: 68px;
  }
}

@media (max-width: 680px) {
  .song-detail-page {
    gap: 8px;
  }

  .song-detail-hero {
    padding: 0 0 8px;
    border-radius: 0;
  }

  .song-detail-kicker {
    margin-bottom: 2px;
    font-size: 0.62rem;
  }

  .song-detail-title {
    margin-bottom: 5px;
    font-size: clamp(1.05rem, 5vw, 1.34rem);
    line-height: 1.12;
  }

  .song-detail-top {
    gap: 10px;
  }

  .song-hero-quick-meta {
    gap: 3px;
    margin-bottom: 8px;
    font-size: 0.83rem;
  }

  .song-detail-cover img,
  .song-cover-fallback {
    width: 58px;
    height: 58px;
    border-radius: 9px;
  }

  .song-meta-grid {
    display: flex;
    gap: 6px;
  }

  .song-meta-item {
    padding: 6px 8px;
    border-radius: 999px;
    gap: 2px;
  }

  .song-meta-label {
    font-size: 0.65rem;
    letter-spacing: 0.03em;
  }

  .song-meta-item strong,
  .song-meta-item span:last-child {
    font-size: 0.84rem;
    line-height: 1.28;
  }

  .song-header-actions {
    margin-top: 8px;
    gap: 6px;
  }

  .btn-meta,
  .btn-meta:hover {
    padding: 2px 8px;
    font-size: 0.68rem;
  }

  .song-header-actions .btn-meta {
    min-height: 26px;
    padding: 4px 7px;
    font-size: 0.66rem;
    line-height: 1.1;
  }

  .song-detail-layout {
    gap: 10px;
    padding: 12px;
    border-radius: 16px;
  }

  .song-block {
    border-radius: 12px;
  }

  .song-block-head {
    margin-bottom: 6px;
  }

  .song-video-panel {
    padding: 8px;
    border-radius: 12px;
  }

  .song-video-compact {
    padding: 10px;
    border-radius: 12px;
  }

  .song-video-embed {
    border-radius: 10px;
  }

  .lyrics-html {
    padding: 10px 11px 13px;
    border-radius: 10px;
    font-size: 0.97rem;
    line-height: 1.5;
  }

  .lyrics-html p,
  .tox .lyrics-line {
    margin: 0 0 5px;
  }

  .lyrics-html hr {
    margin: 8px 0;
  }

  .explanation-html {
    margin-top: 6px;
    padding: 9px 10px;
    border-radius: 10px;
    font-size: 0.9rem;
    line-height: 1.45;
  }

  .song-comments-panel {
    padding: 10px;
    border-radius: 12px;
  }

  .song-detail-side .song-block + .song-block {
    margin-top: 10px;
  }

  .comment {
    border-radius: 7px;
    padding: 7px 9px;
    margin-bottom: 6px;
  }

  .revision-compose-shell,
  .revision-review-shell {
    padding: 8px;
    border-radius: 16px;
  }

  .site-main:has(.revision-compose-shell) {
    padding-left: 6px;
    padding-right: 6px;
  }

  .revision-compose-head {
    flex-direction: column;
    gap: 10px;
  }

  .revision-mobile-tabs {
    position: sticky;
    top: 70px;
    z-index: 12;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 10px;
    padding: 6px;
    border: 1px solid #eadfce;
    border-radius: 14px;
    background: #fffaf3;
  }

  .revision-mobile-tabs button {
    min-height: 38px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #475569;
    font-weight: 900;
    cursor: pointer;
  }

  .revision-mobile-tabs button.is-active {
    background: #0c2645;
    color: #ffffff;
  }

  .revision-compose-grid,
  .revision-compare-grid,
  .revision-review-grid,
  .revision-review-grid .revision-compare-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .revision-compose-grid > [data-revision-pane] {
    display: none;
  }

  .revision-compose-grid > [data-revision-pane].is-mobile-active {
    display: block;
  }

  .revision-original-panel,
  .revision-annotation-workbench {
    max-height: none;
  }

  .revision-annotations-panel,
  .revision-annotation-workbench {
    position: static;
  }

  .song-revision-panel,
  .revision-original-panel,
  .revision-compare-card,
  .revision-summary-panel,
  .revision-discussion-panel,
  .revision-annotations-panel,
  .revision-annotation-workbench {
    padding: 12px;
    border-radius: 12px;
  }

  .revision-summary-field,
  .revision-editor-card,
  .revision-notes-field {
    padding: 10px;
    border-radius: 12px;
  }

  .revision-editor-card {
    margin-left: -2px;
    margin-right: -2px;
  }

  .revision-editor-main .tox-tinymce {
    border-left-width: 1px;
    border-right-width: 1px;
    min-height: min(72vh, 680px);
  }

  .revision-review-editor-card .tox-tinymce {
    min-height: min(72vh, 680px);
  }

  .revision-editor-main .tox .tox-edit-area,
  .revision-editor-main .tox .tox-edit-area__iframe,
  .revision-review-editor-card .tox .tox-edit-area,
  .revision-review-editor-card .tox .tox-edit-area__iframe {
    min-height: calc(min(72vh, 680px) - 96px);
  }

  .revision-editor-main .tox .tox-toolbar,
  .revision-editor-main .tox .tox-toolbar__primary,
  .revision-editor-main .tox .tox-toolbar__overflow,
  .revision-review-editor-card .tox .tox-toolbar,
  .revision-review-editor-card .tox .tox-toolbar__primary {
    gap: 2px;
  }

  .revision-editor-main .tox .tox-tbtn,
  .revision-review-editor-card .tox .tox-tbtn {
    min-width: 38px;
    min-height: 38px;
  }

  .revision-annotation-draft {
    grid-template-columns: 1fr;
  }

  .revision-annotation-controls,
  .revision-annotation-topline {
    grid-template-columns: 1fr;
  }

  .revision-annotation-topline {
    align-items: stretch;
    flex-direction: column;
  }

  .revision-annotation-review {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .revision-message {
    max-width: 88%;
  }

  .revision-chat-composer {
    grid-template-columns: 1fr;
  }

  .revision-chat-composer .btn-primary-large {
    width: 100%;
  }

  .revision-form-actions,
  .revision-review-actions {
    justify-content: stretch;
  }

  .revision-form-actions > *,
  .revision-review-actions > * {
    flex: 1 1 100%;
  }
}

@media (min-width: 981px) and (max-width: 1320px) {
  .site-main:has(.revision-compose-shell) {
    max-width: 1240px;
  }

  .revision-compose-grid {
    grid-template-columns: minmax(260px, 0.55fr) minmax(520px, 1fr);
  }

  .revision-annotation-workbench {
    grid-column: 2;
    position: static;
  }
}

.notice {
  padding: 8px 12px;
  border-radius: 6px;
  margin-bottom: 12px;
  font-size: 0.9rem;
}
.notice.success {
  background: #ecfdf3;
  border: 1px solid #bbf7d0;
}
.notice.error {
  background: #fef2f2;
  border: 1px solid #fecaca;
}
.notice.info {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e40af;
}

/* ======================
   Playlists de paroles
   ====================== */

.site-main:has(.playlist-shell) {
  max-width: 1180px;
}

.playlist-shell {
  padding: 20px;
  border: 1px solid #eadfce;
  border-radius: 16px;
  background: #fffaf3;
}

.playlist-head,
.playlist-public-hero,
.playlist-add-panel {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.playlist-head {
  margin-bottom: 16px;
}

.playlist-kicker {
  display: inline-flex;
  margin-bottom: 6px;
  color: #d95528;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.playlist-head h2,
.playlist-public-hero h2,
.playlist-panel h3,
.playlist-detail-head h3 {
  margin-top: 0;
  color: #172033;
}

.playlist-head p,
.playlist-public-hero p,
.playlist-detail-head p {
  color: #536273;
  line-height: 1.5;
}

/* ── Barre d'actions de la playlist ─────────────────── */

.playlist-detail-head {
  display: block; /* override l'ancien flex */
}

.playlist-detail-desc {
  color: #536273;
  line-height: 1.5;
  margin-bottom: 0;
}

.playlist-action-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}

/* Bouton générique de la barre */
.playlist-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  font-size: 0.84rem;
  font-weight: 700;
  border: 1.5px solid #d5c9b8;
  border-radius: 8px;
  background: transparent;
  color: #374151;
  cursor: pointer;
  user-select: none;
  list-style: none;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.playlist-action-btn:hover,
details[open] > summary.playlist-action-btn {
  background: #f3ede4;
  border-color: #b8a896;
}

.playlist-action-btn::-webkit-details-marker { display: none; }

/* Variante danger */
.playlist-action-btn--danger {
  border-color: #fca5a5;
  color: #b91c1c;
}

.playlist-action-btn--danger:hover {
  background: #fee2e2;
  border-color: #f87171;
}

/* Panneaux dépliables — prend toute la largeur quand ouvert */
.playlist-expandable[open] {
  flex-basis: 100%;
}

.playlist-expand-panel {
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px solid #eadfce;
}

.playlist-edit-form {
  margin-top: 0;
  border-top: none;
  padding-top: 0;
}

/* Panneau de partage */
.playlist-share-panel {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.playlist-share-panel .qrcode-container {
  flex-shrink: 0;
}

.playlist-share-link-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 200px;
  min-width: 0;
}

.playlist-share-url {
  flex: 1 1 0;
  min-width: 0;
  padding: 7px 10px;
  font-size: 0.82rem;
  border: 1.5px solid #d5c9b8;
  border-radius: 7px;
  background: #f9f6f2;
  color: #374151;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.playlist-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  font-size: 0.82rem;
  font-weight: 700;
  border: 1.5px solid #d5c9b8;
  border-radius: 7px;
  background: #fff;
  color: #374151;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
  flex-shrink: 0;
}

.playlist-copy-btn:hover {
  background: #f3ede4;
}

.playlist-open-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.84rem;
  color: #d95528;
  text-decoration: none;
  margin-top: 6px;
}

.playlist-open-link:hover {
  text-decoration: underline;
}

/* Compatibilité ancien .btn-danger-sm (admin_comments) */
.btn-danger-sm {
  padding: 5px 12px;
  font-size: 0.82rem;
  font-weight: 700;
  border: none;
  border-radius: 6px;
  background: #fee2e2;
  color: #b91c1c;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-danger-sm:hover {
  background: #fca5a5;
}

.playlist-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.36fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.playlist-sidebar {
  display: grid;
  gap: 12px;
}

.playlist-panel,
.playlist-add-panel,
.playlist-public-hero {
  border: 1px solid #eadfce;
  border-radius: 14px;
  background: #ffffff;
  padding: 16px;
}

.playlist-form,
.playlist-form label {
  display: grid;
  gap: 8px;
}

.playlist-form input,
.playlist-form textarea,
.playlist-add-panel select {
  width: 100%;
  border: 1px solid #d8cbbb;
  border-radius: 10px;
  background: #ffffff;
  color: #172033;
  padding: 10px 12px;
  font: inherit;
}

.playlist-form label span,
.playlist-add-panel span {
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 800;
}

.playlist-add-panel {
  margin-bottom: 14px;
}

.playlist-add-panel form {
  display: flex;
  gap: 8px;
  min-width: min(100%, 420px);
}

.playlist-nav {
  display: grid;
  gap: 8px;
}

.playlist-nav a,
.playlist-song-list a {
  color: inherit;
  text-decoration: none;
}

.playlist-nav a {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid #eadfce;
  border-radius: 10px;
  background: #fffaf3;
}

.playlist-nav a.is-active {
  border-color: #d95528;
  background: #fff4df;
}

.playlist-nav span,
.playlist-song-list span,
.playlist-share span {
  color: #64748b;
  font-size: 0.84rem;
}

.playlist-share {
  display: grid;
  justify-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.playlist-share .qrcode-container {
  width: 150px;
  height: 150px;
  border-radius: 12px;
  border: 1px solid #eadfce;
  background: #ffffff;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.playlist-share .qrcode-container canvas,
.playlist-share .qrcode-container img {
  width: 100% !important;
  height: 100% !important;
}

.playlist-song-list {
  display: grid;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
  counter-reset: playlistSongs;
}

.playlist-song-list li {
  counter-increment: playlistSongs;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid #eadfce;
  border-radius: 12px;
  background: #fffaf3;
}

.playlist-song-list li::before {
  content: counter(playlistSongs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #0c2645;
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 900;
}

.playlist-song-list a {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.playlist-song-list form {
  margin: 0;
}

.playlist-song-list button {
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid #e2d4c3;
  background: #ffffff;
  color: #9a3412;
  font-weight: 800;
  cursor: pointer;
}

.playlist-song-list.is-public li {
  grid-template-columns: auto minmax(0, 1fr);
}

.playlist-public-shell {
  display: grid;
  gap: 16px;
}

/* ======================
   AUTHENTIFICATION
   ====================== */

.auth-wrapper {
  min-height: min(620px, calc(100vh - 180px));
  display: grid;
  place-items: center;
  padding: 28px 0;
}

.auth-card {
  width: min(100%, 460px);
  padding: 28px;
  border: 1px solid #e7d8c7;
  border-radius: 20px;
  background:
    radial-gradient(circle at top right, rgba(214, 94, 44, 0.12), transparent 34%),
    linear-gradient(180deg, #fffaf3, #f9f0e6);
  box-shadow: 0 18px 40px rgba(66, 38, 20, 0.12);
}

.register-card { width: min(100%, 500px); }

.auth-card-head {
  margin-bottom: 18px;
}

.auth-kicker {
  display: inline-flex;
  margin-bottom: 6px;
  color: #d65e2c;
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.auth-title {
  margin: 0;
  color: #0f172a;
  font-size: 1.8rem;
  line-height: 1.1;
}

.auth-subtitle {
  margin: 8px 0 0;
  color: #475569;
  font-size: 0.96rem;
  line-height: 1.55;
}

.auth-form {
  display: grid;
  gap: 12px;
}

.auth-card .field-group {
  margin-bottom: 0;
}

.auth-card label {
  color: #64748b;
  font-weight: 700;
}

.auth-card input[type="text"],
.auth-card input[type="email"],
.auth-card input[type="password"] {
  min-height: 44px;
  border: 1px solid #dce3ec;
  background: #ffffff;
}

.auth-card input[type="text"]:focus,
.auth-card input[type="email"]:focus,
.auth-card input[type="password"]:focus {
  border-color: #9fb2c8;
  background: #ffffff;
}

.auth-submit {
  min-height: 46px;
  margin-top: 2px;
  border: 1px solid #c94f20;
  background: #d65e2c;
  color: #ffffff;
  font-size: 0.96rem;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 10px 24px rgba(173, 66, 22, 0.18);
}

.auth-submit:hover {
  background: #bd4d20;
}

/* ── Inscription : sections ── */

.reg-section {
  border-top: 1px solid var(--border-color, #e5e7eb);
  padding-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.reg-section:first-child { border-top: none; padding-top: 0; }

.reg-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent, #e05d00);
  margin: 0;
}

.reg-section-title i { font-size: 0.95rem; }

.reg-section-hint {
  font-size: 0.82rem;
  color: var(--text-secondary, #6c757d);
  margin: -4px 0 0;
}

/* ── Inscription : lien Réunion ── */

.reg-reunion-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.reg-reunion-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--border-color, #e5e7eb);
  background: var(--card-bg, #fff);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  user-select: none;
}

.reg-reunion-option input[type="radio"] { display: none; }

.reg-reunion-option i {
  font-size: 1.1rem;
  color: var(--text-secondary, #888);
  flex-shrink: 0;
  transition: color 0.15s;
}

.reg-reunion-option:hover {
  border-color: var(--accent, #e05d00);
  background: rgba(224, 93, 0, 0.04);
}

.reg-reunion-option.is-selected,
.reg-reunion-option:has(input:checked) {
  border-color: var(--accent, #e05d00);
  background: rgba(224, 93, 0, 0.07);
}

.reg-reunion-option.is-selected .reg-level-label,
.reg-reunion-option:has(input:checked) .reg-level-label {
  color: var(--accent, #e05d00);
}

.reg-reunion-option.is-selected i,
.reg-reunion-option:has(input:checked) i {
  color: var(--accent, #e05d00);
}

.reg-reunion-option.is-selected .reg-level-sub,
.reg-reunion-option:has(input:checked) .reg-level-sub {
  color: rgba(224, 93, 0, 0.7);
}

/* ── Inscription : niveau de créole ── */

.reg-level-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.reg-level-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--border-color, #e5e7eb);
  background: var(--card-bg, #fff);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  user-select: none;
}

.reg-level-option input[type="radio"] { display: none; }

.reg-level-option i {
  font-size: 1.1rem;
  color: var(--text-secondary, #888);
  flex-shrink: 0;
  transition: color 0.15s;
}

.reg-level-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.reg-level-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-primary, #333);
  transition: color 0.15s;
}

.reg-level-sub {
  font-size: 0.76rem;
  color: var(--text-secondary, #888);
  font-style: italic;
}

.reg-level-option:hover {
  border-color: var(--accent, #e05d00);
  background: rgba(224, 93, 0, 0.04);
}

.reg-level-option.is-selected,
.reg-level-option:has(input:checked) {
  border-color: var(--accent, #e05d00);
  background: rgba(224, 93, 0, 0.07);
}

.reg-level-option.is-selected .reg-level-label,
.reg-level-option:has(input:checked) .reg-level-label {
  color: var(--accent, #e05d00);
}

.reg-level-option.is-selected i,
.reg-level-option:has(input:checked) i {
  color: var(--accent, #e05d00);
}

.reg-level-option.is-selected .reg-level-sub,
.reg-level-option:has(input:checked) .reg-level-sub {
  color: rgba(224, 93, 0, 0.7);
}

/* ── Inscription : tranche d'âge ── */

.reg-age-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.reg-age-option {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 20px;
  border: 1.5px solid var(--border-color, #e5e7eb);
  background: var(--card-bg, #fff);
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary, #555);
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  user-select: none;
  white-space: nowrap;
}

.reg-age-option input[type="radio"] { display: none; }

.reg-age-option:hover {
  border-color: var(--accent, #e05d00);
  color: var(--accent, #e05d00);
  background: rgba(224, 93, 0, 0.04);
}

.reg-age-option.is-selected,
.reg-age-option:has(input:checked) {
  border-color: var(--accent, #e05d00);
  background: var(--accent, #e05d00);
  color: #fff;
}

.auth-help {
  display: grid;
  gap: 4px;
  margin-top: 4px;
  padding: 12px;
  border: 1px solid #e7d8c7;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.62);
  color: #64748b;
  font-size: 0.86rem;
  line-height: 1.45;
}

.auth-help strong {
  color: #0f172a;
}

.auth-link-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 2px 0 0;
  color: #64748b;
  font-size: 0.9rem;
}

.auth-link-row a {
  color: #0c5d8f;
  font-weight: 800;
  text-decoration: none;
}

.auth-link-row a:hover {
  color: #084b73;
  text-decoration: underline;
}

.auth-card .notice {
  border-radius: 12px;
}

.auth-card .notice ul {
  margin: 0;
  padding-left: 18px;
}

@media (max-width: 560px) {
  .auth-wrapper {
    min-height: auto;
    padding: 10px 0 22px;
  }

  .auth-card {
    padding: 20px;
    border-radius: 16px;
  }

  .auth-title {
    font-size: 1.55rem;
  }
}

/* ======================
   MISE EN PAGE 3 / 2 COLONNES
   ====================== */

.page-3cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1.3fr);
  gap: 24px;
  align-items: flex-start;
  margin-top: 12px;
}

.page-2cols {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 1.6fr);
  gap: 24px;
  align-items: flex-start;
  margin-top: 12px;
}

.page-col {
  min-width: 0;
}

.page-col-left {
  font-size: 0.85rem;
  opacity: 0.85;
}

.page-col-right {
  font-size: 0.9rem;
}

.page-col-right h3 {
  color: #111827;
}

/* Responsive colonnes */

@media (max-width: 1024px) {
  .page-3cols {
    grid-template-columns: 1fr;
  }
  .page-col-left {
    display: none;
  }

  .page-2cols {
    grid-template-columns: 1fr;
  }
  .page-col-right {
    margin-top: 16px;
  }
}

/* ======================
   BARRE D’INDEX A–Z
   ====================== */

.letter-filter {
  margin-top: 12px;
  margin-bottom: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.letter-btn {
  border-radius: 999px;
  border: 1px solid #d1d5db;
  background: transparent;
  padding: 4px 8px;
  font-size: 0.8rem;
  cursor: pointer;
  color: #000000;
}

.letter-btn.active {
  background: #16a34a;
  border-color: #16a34a;
  color: #f9fafb;
}

/* Switch Titre / Auteur */

.letter-mode-switch {
  margin-top: 12px;
  margin-bottom: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
}

.letter-mode-label {
  opacity: 0.8;
}

.letter-mode-btn {
  border-radius: 999px;
  border: 1px solid #d1d5db;
  background: transparent;
  padding: 3px 10px;
  font-size: 0.8rem;
  cursor: pointer;
  color: #000000;
}

.letter-mode-btn.active {
  background: #16a34a;
  border-color: #16a34a;
  color: #f9fafb;
}

/* ======================
   LISTE DES DERNIERS MORCEAUX
   ====================== */

.latest-songs {
  list-style: none;
  padding: 0;
  margin: 0;
}

.latest-song-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.latest-song-text {
  flex: 1;
  min-width: 0;
}

.latest-song-title a {
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.latest-song-meta {
  display: block;
  font-size: 0.75rem;
  opacity: 0.8;
}

.latest-song-cover {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 6px;
  flex-shrink: 0;
  overflow: hidden;
  background: #eef2f7;
}

.latest-song-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.latest-song-cover-fallback {
  display: inline-flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  color: #64748b;
  line-height: 1;
}

/* ======================
   INDEX DES MORCEAUX (A–Z complet)
   ====================== */

.song-index {
  margin-top: 24px;
}

.song-index-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.song-index-group {
  flex: 1 1 160px;
  min-width: 140px;
}

.song-index-letter {
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.song-index-group ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.song-index-group li {
  font-size: 0.85rem;
  margin-bottom: 2px;
}

.song-index-meta {
  font-size: 0.75rem;
  opacity: 0.8;
}

/* ======================
   BOUTON "DEMANDER UN MORCEAU"
   ====================== */

.ask-song-cta {
  margin-top: 32px;
  margin-bottom: 16px;
  text-align: center;
}

.btn-ask-song {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 999px;
  background: #0ea5e9;
  color: #f9fafb;
  font-weight: 600;
  font-size: 0.95rem;
}
.btn-ask-song:hover {
  background: #0284c7;
  text-decoration: none;
}

/* ======================
   PAGE DEMAND UN MORSO
   ====================== */

.request-morceau-shell {
  display: flex;
  justify-content: center;
  padding: 32px 16px 64px;
}

.request-morceau-card {
  width: 100%;
  max-width: 680px;
  background: #fffaf3;
  border: 1px solid #e7d8c7;
  border-radius: 22px;
  box-shadow: 0 10px 32px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}

.request-morceau-header {
  padding: 28px 28px 20px;
  border-bottom: 1px solid #e7d8c7;
}

.request-morceau-header h2 {
  margin: 6px 0 8px;
  font-size: 1.5rem;
  font-weight: 800;
  color: #111827;
  line-height: 1.2;
}

.request-morceau-header p {
  margin: 0;
  font-size: 0.9rem;
  color: #64748b;
  line-height: 1.5;
}

/* --- Succès --- */
.request-morceau-success {
  padding: 40px 28px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.request-morceau-success-icon {
  font-size: 3rem;
  color: #16a34a;
  line-height: 1;
}

.request-morceau-success h3 {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 800;
  color: #111827;
}

.request-morceau-success p {
  margin: 0;
  color: #64748b;
  font-size: 0.95rem;
}

.request-morceau-back-btn {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #374151;
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s;
}

.request-morceau-back-btn:hover {
  background: #e2e8f0;
  text-decoration: none;
}

/* ======================
   PAGE MON COMPTE
   ====================== */

.account-shell {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 620px;
  margin: 32px auto 64px;
  padding: 0 16px;
}

/* ── Hero identité ── */
.account-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: #fffaf3;
  border: 1px solid #e7d8c7;
  border-radius: 22px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
}

.account-avatar {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 0;
  background: #d65e2c;
  color: #ffffff;
  font-size: 1.4rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--km-title-font);
  overflow: hidden;
  position: relative;
  padding: 0;
}

.account-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.account-photo-trigger {
  cursor: pointer;
}

.account-photo-trigger:focus-visible {
  outline: 3px solid rgba(214, 94, 44, 0.35);
  outline-offset: 3px;
}

.account-avatar-edit {
  position: absolute;
  right: 4px;
  bottom: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: #111827;
  color: #ffffff;
  font-size: 0.78rem;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.2);
}

.account-hero-info {
  flex: 1;
  min-width: 0;
}

.account-hero-info h2 {
  margin: 0 0 4px;
  font-size: 1.15rem;
  font-weight: 800;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-hero-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.account-role-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1.6;
}

.account-role-badge i {
  font-size: 0.7rem;
  line-height: 0;
}

.account-role-badge.is-admin {
  background: #fef3c7;
  color: #92400e;
}

.account-role-badge.is-contributor {
  background: #d1fae5;
  color: #065f46;
}

.account-hero-lastlogin {
  font-size: 0.72rem;
  color: #94a3b8;
}

.account-hero-link {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.account-hero-link:hover {
  background: #e2e8f0;
  color: #1e293b;
  text-decoration: none;
}

.account-hero-link i {
  font-size: 0.8rem;
  line-height: 0;
}

/* ── Cartes formulaires ── */
.account-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.account-card-header {
  padding: 18px 24px 14px;
  border-bottom: 1px solid #f3f4f6;
}

.account-card-header h3 {
  margin: 5px 0 0;
  font-size: 1rem;
  font-weight: 800;
  color: #111827;
}

/* ── Notices ── */
.account-notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 14px 24px 0;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 0.875rem;
}

.account-notice i {
  flex-shrink: 0;
  margin-top: 1px;
  line-height: 1;
}

.account-notice ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.account-notice.is-success {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #166534;
}

.account-notice.is-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}

/* ── Formulaire ── */
.account-form {
  padding: 16px 24px 0;
}

.account-photo-field {
  gap: 10px;
}

.account-photo-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #334155;
  font-size: 0.88rem;
  font-weight: 800;
}

.account-photo-picker {
  display: flex;
  align-items: center;
  gap: 14px;
  width: fit-content;
  max-width: 100%;
  padding: 10px 14px 10px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #f8fafc;
  color: #334155;
  text-align: left;
  cursor: pointer;
}

.account-photo-picker:hover {
  border-color: #f0b08b;
  background: #fff7f0;
}

.account-photo-preview {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  border-radius: 50%;
  background: #d65e2c;
  color: #ffffff;
  font-family: var(--km-title-font);
  font-size: 2rem;
  font-weight: 900;
  flex-shrink: 0;
}

.account-photo-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.account-photo-picker-text {
  display: grid;
  gap: 3px;
}

.account-photo-picker-text strong {
  color: #1f2937;
  font-size: 0.92rem;
  font-weight: 900;
}

.account-photo-picker-text small {
  color: #64748b;
  font-size: 0.8rem;
  font-weight: 600;
}

.account-photo-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.account-photo-remove {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  font-size: 0.84rem;
  font-weight: 600;
  color: #64748b;
}

.account-form-actions {
  padding: 14px 0 20px;
}

.account-submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 20px;
  border: none;
  border-radius: 999px;
  background: #d65e2c;
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s;
}

.account-submit-btn:hover {
  background: #b84e22;
}

/* ── Déconnexion ── */
.account-footer-actions {
  display: flex;
  justify-content: center;
  padding: 4px 0 8px;
}

.account-logout-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 18px;
  border-radius: 999px;
  color: #b91c1c;
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s;
}

.account-logout-btn:hover {
  background: #fef2f2;
  text-decoration: none;
}

/* Dark mode */
body[data-theme="dark"] .account-hero {
  background: #1e1a15;
  border-color: #3d2f1f;
}

body[data-theme="dark"] .account-hero-info h2 {
  color: #f3f4f6;
}

body[data-theme="dark"] .account-hero-link {
  background: #27272a;
  color: #a1a1aa;
}

body[data-theme="dark"] .account-hero-link:hover {
  background: #3f3f46;
  color: #e4e4e7;
}

body[data-theme="dark"] .account-card {
  background: #18181b;
  border-color: #3f3f46;
}

body[data-theme="dark"] .account-card-header {
  border-bottom-color: #27272a;
}

body[data-theme="dark"] .account-card-header h3 {
  color: #f3f4f6;
}

body[data-theme="dark"] .account-notice.is-success {
  background: #052e16;
  border-color: #166534;
  color: #86efac;
}

body[data-theme="dark"] .account-notice.is-error {
  background: #450a0a;
  border-color: #991b1b;
  color: #fca5a5;
}

body[data-theme="dark"] .account-logout-btn:hover {
  background: #450a0a;
}

/* Mobile */
@media (max-width: 600px) {
  .account-shell {
    margin-top: 16px;
    padding: 0 12px;
  }

  .account-hero {
    flex-wrap: wrap;
    gap: 12px;
  }

  .account-hero-link {
    width: 100%;
    justify-content: center;
  }

  .account-card-header,
  .account-form,
  .account-notice {
    padding-left: 16px;
    padding-right: 16px;
  }

  .account-notice {
    margin-left: 16px;
    margin-right: 16px;
  }
}

/* One-page account redesign */
.account-page {
  width: min(1120px, calc(100% - 32px));
  margin: 28px auto 72px;
}

.account-page .account-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 24px;
  border-radius: 16px;
  background:
    radial-gradient(circle at 12% 12%, rgba(214, 94, 44, 0.16), transparent 34%),
    linear-gradient(135deg, #fff8ef 0%, #ffffff 62%, #f6fbf5 100%);
  border: 1px solid #ead8c7;
  box-shadow: 0 18px 42px rgba(43, 30, 22, 0.08);
}

.account-hero-main {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

.account-avatar.account-avatar-lg {
  width: 86px;
  height: 86px;
  font-size: 2.25rem;
  box-shadow: 0 12px 26px rgba(214, 94, 44, 0.24);
}

.account-eyebrow {
  display: inline-flex;
  margin-bottom: 5px;
  color: #9a5b36;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.account-page .account-hero-info h2 {
  max-width: 560px;
  margin: 0 0 8px;
  font-size: clamp(1.55rem, 3vw, 2.35rem);
  line-height: 1.05;
  color: #241913;
}

.account-page .account-hero-meta {
  gap: 8px;
}

.account-role-badge.is-native {
  background: #e5f8ec;
  color: #166534;
}

.account-page .account-hero-lastlogin {
  color: #7c6b5f;
  font-size: 0.78rem;
  font-weight: 700;
}

.account-hero-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.account-page .account-hero-link {
  min-height: 40px;
  padding: 9px 15px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.86rem;
  font-weight: 900;
}

.account-page .account-hero-link.is-primary {
  background: #d65e2c;
  color: #ffffff;
  box-shadow: 0 10px 22px rgba(214, 94, 44, 0.22);
}

.account-page .account-hero-link.is-primary:hover {
  background: #b84e22;
  color: #ffffff;
}

.account-page .account-hero-link.is-danger {
  background: #fff4f2;
  border-color: #ffd2ca;
  color: #b42318;
}

.account-page .account-hero-link.is-danger:hover {
  background: #fee2de;
  color: #8f1b12;
}

.account-onepage-grid {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  margin-top: 18px;
}

.account-side-panel {
  position: sticky;
  top: 86px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 12px;
  border: 1px solid #e8dfd6;
  border-radius: 16px;
  background: rgba(255, 252, 248, 0.92);
  box-shadow: 0 12px 30px rgba(43, 30, 22, 0.06);
  backdrop-filter: blur(10px);
}

.account-side-nav {
  display: grid;
  gap: 6px;
}

.account-side-link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 9px 11px;
  border-radius: 10px;
  color: #4f4038;
  font-size: 0.9rem;
  font-weight: 900;
  text-decoration: none;
}

.account-side-link:hover,
.account-side-link:focus-visible {
  background: #fff1e6;
  color: #a94720;
  text-decoration: none;
}

.account-side-link i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #f3e6d8;
  color: #a94720;
}

.account-side-summary {
  display: grid;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid #efe4da;
}

.account-side-summary div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #ffffff;
}

.account-side-summary span {
  color: #806f63;
  font-size: 0.76rem;
  font-weight: 800;
}

.account-side-summary strong {
  color: #241913;
  font-size: 0.95rem;
  font-weight: 950;
}

.account-main-flow {
  display: grid;
  gap: 18px;
}

.account-panel {
  scroll-margin-top: 94px;
}

.account-page .account-card {
  border-radius: 16px;
  border-color: #e9ded4;
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(43, 30, 22, 0.06);
}

.account-page .account-card-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  padding: 20px 24px 16px;
  background: linear-gradient(180deg, #fffaf5 0%, #ffffff 100%);
}

.account-page .account-card-header h3 {
  font-size: 1.2rem;
  color: #241913;
}

.account-page .account-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 18px;
  padding: 18px 24px 0;
}

.account-page .account-form .field-group,
.account-page .account-photo-field {
  min-width: 0;
}

.account-page .account-photo-field,
.account-page .account-form-actions,
.account-page .account-native-form > * {
  grid-column: 1 / -1;
}

.account-page .account-photo-preview {
  width: 104px;
  height: 104px;
  border: 2px solid #ffffff;
  box-shadow: 0 10px 24px rgba(43, 30, 22, 0.12);
}

.account-page .account-photo-picker {
  border-color: #ead8c7;
  background: #fffaf5;
}

.account-page .account-photo-picker:hover {
  border-color: #d65e2c;
  background: #fff3e8;
}

.account-page .account-form-actions {
  display: flex;
  justify-content: flex-end;
  padding: 6px 0 22px;
}

.account-page .account-submit-btn {
  min-height: 42px;
  padding: 10px 18px;
  box-shadow: 0 10px 20px rgba(214, 94, 44, 0.18);
}

.account-page .account-notice {
  margin: 16px 24px 0;
  border-radius: 12px;
}

.account-page .account-native-desc {
  max-width: 680px;
}

.account-choice-block {
  margin-bottom: 4px;
}

.account-choice-block.has-divider {
  padding-top: 18px;
  margin-top: 14px;
  border-top: 1px solid #efe4da;
}

.account-choice-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 10px;
  color: #30231b;
  font-size: 0.93rem;
}

.account-choice-title span {
  color: #8a7568;
  font-size: 0.8rem;
  font-weight: 700;
}

body[data-theme="dark"] .account-page .account-hero {
  background:
    radial-gradient(circle at 12% 12%, rgba(214, 94, 44, 0.24), transparent 34%),
    linear-gradient(135deg, #211814 0%, #18181b 62%, #132016 100%);
  border-color: #3d2f1f;
}

body[data-theme="dark"] .account-eyebrow,
body[data-theme="dark"] .account-page .account-hero-lastlogin {
  color: #d9b493;
}

body[data-theme="dark"] .account-page .account-hero-info h2,
body[data-theme="dark"] .account-side-summary strong,
body[data-theme="dark"] .account-page .account-card-header h3 {
  color: #f8fafc;
}

body[data-theme="dark"] .account-side-panel,
body[data-theme="dark"] .account-page .account-card {
  background: rgba(24, 24, 27, 0.94);
  border-color: #3f3f46;
}

body[data-theme="dark"] .account-side-link {
  color: #e4e4e7;
}

body[data-theme="dark"] .account-side-link:hover,
body[data-theme="dark"] .account-side-link:focus-visible,
body[data-theme="dark"] .account-side-summary div,
body[data-theme="dark"] .account-page .account-card-header {
  background: #27272a;
}

body[data-theme="dark"] .account-side-link i {
  background: #3d2f1f;
  color: #f2a36a;
}

body[data-theme="dark"] .account-side-summary {
  border-top-color: #3f3f46;
}

body[data-theme="dark"] .account-side-summary span {
  color: #a1a1aa;
}

body[data-theme="dark"] .account-choice-block.has-divider {
  border-top-color: #3f3f46;
}

body[data-theme="dark"] .account-choice-title {
  color: #f4f4f5;
}

body[data-theme="dark"] .account-choice-title span {
  color: #a1a1aa;
}

body[data-theme="dark"] .account-page .account-hero-link.is-danger {
  background: #3a1612;
  border-color: #7f241d;
  color: #fecaca;
}

body[data-theme="dark"] .account-photo-label,
body[data-theme="dark"] .account-photo-picker-text strong {
  color: #e4e4e7;
}

body[data-theme="dark"] .account-photo-picker {
  border-color: #3f3f46;
  background: #27272a;
  color: #e4e4e7;
}

body[data-theme="dark"] .account-photo-picker:hover {
  border-color: #d65e2c;
  background: #2f251f;
}

body[data-theme="dark"] .account-photo-picker-text small {
  color: #a1a1aa;
}

@media (max-width: 860px) {
  .account-page {
    width: min(100% - 24px, 720px);
    margin-top: 16px;
  }

  .account-page .account-hero {
    align-items: flex-start;
    flex-direction: column;
    padding: 20px;
  }

  .account-hero-actions {
    justify-content: flex-start;
    width: 100%;
  }

  .account-onepage-grid {
    grid-template-columns: 1fr;
  }

  .account-side-panel {
    position: static;
  }

  .account-side-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .account-side-link {
    justify-content: center;
  }

  .account-side-link span {
    display: none;
  }

  .account-page .account-form {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .account-page .account-hero-main {
    align-items: flex-start;
  }

  .account-avatar.account-avatar-lg {
    width: 68px;
    height: 68px;
    font-size: 1.85rem;
  }

  .account-page .account-hero-info h2 {
    font-size: 1.45rem;
  }

  .account-hero-actions,
  .account-page .account-hero-link {
    width: 100%;
  }

  .account-page .account-hero-link {
    justify-content: center;
  }

  .account-page .account-card-header {
    align-items: flex-start;
    flex-direction: column;
    padding: 18px 16px 14px;
  }

  .account-page .account-form,
  .account-page .account-notice {
    padding-left: 16px;
    padding-right: 16px;
  }

  .account-page .account-notice {
    margin-left: 16px;
    margin-right: 16px;
  }
}

/* ======================
   PAGE FAVORIS
   ====================== */

.favorites-shell {
  max-width: 860px;
  margin: 28px auto 64px;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ── Hero ── */
.favorites-hero {
  background: #fffaf3;
  border: 1px solid #e7d8c7;
  border-radius: 22px;
  padding: 20px 24px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.favorites-hero-identity {
  display: flex;
  align-items: center;
  gap: 14px;
}

.favorites-hero-avatar {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #d65e2c;
  color: #fff;
  font-size: 1.3rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--km-title-font);
}

.favorites-hero-copy {
  flex: 1;
  min-width: 0;
}

.favorites-hero-copy h2 {
  margin: 4px 0 0;
  font-size: 1.2rem;
  font-weight: 800;
  color: #111827;
  line-height: 1.2;
}

/* ── Sort pills ── */
/* ── Barre de recherche ── */
.favorites-search-form {
  width: 100%;
}

.favorites-search-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.favorites-search-input-wrap > i.bi-search {
  position: absolute;
  left: 12px;
  color: #94a3b8;
  font-size: 0.9rem;
  line-height: 0;
  pointer-events: none;
}

.favorites-search-input-wrap input {
  width: 100%;
  padding: 9px 38px 9px 36px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  font-size: 0.9rem;
  background: #ffffff;
  color: #111827;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.favorites-search-input-wrap input:focus {
  border-color: #d65e2c;
  box-shadow: 0 0 0 3px rgba(214, 94, 44, 0.12);
}

.favorites-search-clear {
  position: absolute;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #e2e8f0;
  color: #475569;
  font-size: 0.65rem;
  text-decoration: none;
  transition: background 0.15s;
  line-height: 0;
}

.favorites-search-clear:hover {
  background: #cbd5e1;
  text-decoration: none;
}

/* ── Contrôles tri + par page ── */
.favorites-controls {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;
}

.favorites-control-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.favorites-sort-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.favorites-control-label,
.favorites-control-label,
.favorites-sort-label {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #94a3b8;
  white-space: nowrap;
}

.favorites-sort-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.favorites-sort-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 13px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  color: #475569;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.favorites-sort-pill:hover {
  background: #e2e8f0;
  color: #1e293b;
  text-decoration: none;
}

.favorites-sort-pill.is-active {
  background: #d65e2c;
  color: #ffffff;
  border-color: #d65e2c;
}

/* ── État vide ── */
.favorites-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 56px 24px;
  text-align: center;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
}

.favorites-empty-icon {
  font-size: 2.8rem;
  color: #e7d8c7;
  line-height: 1;
}

.favorites-empty h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 800;
  color: #111827;
}

.favorites-empty p {
  margin: 0;
  color: #64748b;
  font-size: 0.9rem;
  max-width: 320px;
}

.favorites-empty-cta {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 20px;
  border-radius: 999px;
  background: #d65e2c;
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 800;
  text-decoration: none;
  transition: background 0.15s;
}

.favorites-empty-cta:hover {
  background: #b84e22;
  text-decoration: none;
}

/* Dark mode */
body[data-theme="dark"] .favorites-search-input-wrap input {
  background: #27272a;
  border-color: #3f3f46;
  color: #e4e4e7;
}

body[data-theme="dark"] .favorites-search-input-wrap input:focus {
  border-color: #d65e2c;
}

body[data-theme="dark"] .favorites-search-clear {
  background: #3f3f46;
  color: #a1a1aa;
}

body[data-theme="dark"] .favorites-hero {
  background: #1e1a15;
  border-color: #3d2f1f;
}

body[data-theme="dark"] .favorites-hero-copy h2 {
  color: #f3f4f6;
}

body[data-theme="dark"] .favorites-sort-pill {
  background: #27272a;
  color: #a1a1aa;
  border-color: #3f3f46;
}

body[data-theme="dark"] .favorites-sort-pill:hover {
  background: #3f3f46;
  color: #e4e4e7;
}

body[data-theme="dark"] .favorites-sort-pill.is-active {
  background: #d65e2c;
  color: #ffffff;
  border-color: #d65e2c;
}

body[data-theme="dark"] .favorites-empty {
  background: #18181b;
  border-color: #3f3f46;
}

body[data-theme="dark"] .favorites-empty h3 {
  color: #f3f4f6;
}

body[data-theme="dark"] .favorites-empty-icon {
  color: #3f3f46;
}

/* Mobile */
@media (max-width: 680px) {
  .favorites-shell {
    margin-top: 16px;
    padding: 0 12px;
  }

  .favorites-hero {
    padding: 16px;
  }

  .favorites-hero-copy h2 {
    font-size: 1rem;
  }
}

/* --- Erreurs --- */
.request-morceau-errors {
  margin: 20px 28px 0;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 10px;
  font-size: 0.875rem;
  color: #991b1b;
}

.request-morceau-errors i {
  flex-shrink: 0;
  margin-top: 2px;
  line-height: 1;
}

.request-morceau-errors ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --- Formulaire --- */
.request-morceau-form {
  padding: 4px 0 0;
}

.request-form-section {
  padding: 20px 28px;
}

.request-form-section + .request-form-section {
  border-top: 1px solid #e7d8c7;
}

.request-form-section-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 14px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #92400e;
  background: #fef3c7;
  border-radius: 7px;
  padding: 6px 10px;
}

.request-form-section-hint i {
  flex-shrink: 0;
  line-height: 1;
}

.request-form-section-optional {
  background: #f8fafc;
}

.request-form-section-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 14px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #475569;
}

.request-form-section-label i {
  flex-shrink: 0;
  line-height: 1;
}

.field-optional {
  font-weight: 400;
  color: #94a3b8;
}

/* --- Actions --- */
.request-morceau-actions {
  padding: 16px 28px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  border-top: 1px solid #e7d8c7;
}

.request-morceau-submit {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 22px;
  border: none;
  border-radius: 999px;
  background: #d65e2c;
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s;
}

.request-morceau-submit:hover {
  background: #b84e22;
}

.request-morceau-cancel {
  font-size: 0.875rem;
  color: #94a3b8;
  text-decoration: none;
  font-weight: 600;
}

.request-morceau-cancel:hover {
  color: #64748b;
  text-decoration: underline;
}

/* Dark mode */
body[data-theme="dark"] .request-morceau-card {
  background: #1e1a15;
  border-color: #3d2f1f;
}

body[data-theme="dark"] .request-morceau-header {
  border-bottom-color: #3d2f1f;
}

body[data-theme="dark"] .request-morceau-header h2 {
  color: #f3f4f6;
}

body[data-theme="dark"] .request-morceau-header p {
  color: #94a3b8;
}

body[data-theme="dark"] .request-morceau-success h3 {
  color: #f3f4f6;
}

body[data-theme="dark"] .request-morceau-back-btn {
  background: #27272a;
  color: #d4d4d8;
}

body[data-theme="dark"] .request-morceau-back-btn:hover {
  background: #3f3f46;
}

body[data-theme="dark"] .request-form-section + .request-form-section {
  border-top-color: #3d2f1f;
}

body[data-theme="dark"] .request-form-section-optional {
  background: #18181b;
}

body[data-theme="dark"] .request-morceau-actions {
  border-top-color: #3d2f1f;
}

body[data-theme="dark"] .request-morceau-cancel {
  color: #52525b;
}

/* Mobile */
@media (max-width: 600px) {
  .request-morceau-shell {
    padding: 16px 12px 48px;
  }

  .request-morceau-header,
  .request-form-section,
  .request-morceau-actions {
    padding-left: 18px;
    padding-right: 18px;
  }

  .field-inline {
    flex-direction: column;
    gap: 0;
  }
}

/* ======================
   LAYOUT DASHBOARD / STATS
   ====================== */

.dash-shell {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 4px;
  padding: 20px;
  border-radius: 22px;
  background: #f9f0e6;
}

.dash-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px;
  border-radius: 18px;
  border: 1px solid rgba(221, 84, 40, 0.18);
  background: #fffaf2;
  box-shadow: 0 12px 28px rgba(78, 35, 14, 0.06);
}

.dash-hero-kicker {
  display: inline-flex;
  align-items: center;
  padding: 6px 11px;
  border-radius: 999px;
  background: #fff0e6;
  color: #c94f2d;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dash-hero-main h2 {
  margin: 10px 0 8px;
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  line-height: 1.12;
  color: #0f172a;
}

.dash-hero-text {
  margin: 0;
  color: #5d6b7c;
  line-height: 1.6;
}

.dash-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
}

.dash-hero-secondary {
  padding: 10px 16px;
}

.btn-primary-large {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  border-radius: 999px;
  background: #dd5428;
  color: #fffaf2;
  font-weight: 700;
  font-size: 1rem;
  border: none;
  box-shadow: 0 10px 22px rgba(221, 84, 40, 0.18);
}

.btn-primary-large:hover {
  background: #bf4624;
  text-decoration: none;
}

.dash-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.dash-stat {
  min-height: 82px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(221, 84, 40, 0.16);
  background: #fffaf2;
  box-shadow: 0 10px 22px rgba(78, 35, 14, 0.04);
}

.dash-stat-label {
  display: block;
  font-size: 0.78rem;
  color: #6b7280;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.dash-stat-value {
  font-size: clamp(1.3rem, 2vw, 1.55rem);
  font-weight: 800;
  line-height: 1;
  color: #0f172a;
}

.dash-layout {
  margin-top: 2px;
}

.dash-section {
  margin-top: 0;
  margin-bottom: 14px;
  padding: 18px;
  border-radius: 16px;
  border: 1px solid rgba(221, 84, 40, 0.15);
  background: #fffaf2;
  box-shadow: 0 10px 22px rgba(78, 35, 14, 0.04);
}

.dash-section:last-child {
  margin-bottom: 0;
}

.dash-side-panel {
  position: sticky;
  top: 84px;
}

.dash-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.dash-section h3 {
  margin: 0;
  color: #0f172a;
  font-size: 1.05rem;
}

.dash-section-note {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 0.88rem;
  line-height: 1.45;
}

.dash-section-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #0b2a4a;
  background: #f1f5f9;
  border: 1px solid #d7dde6;
}

.dash-empty {
  margin: 0;
  padding: 13px 14px;
  border-radius: 12px;
  border: 1px dashed #d8cec2;
  background: rgba(255, 255, 255, 0.58);
  color: #64748b;
  font-size: 0.9rem;
}

.dash-empty.is-compact {
  padding: 10px 12px;
  font-size: 0.84rem;
}

.dash-focus-list,
.dash-content-groups,
.dash-request-list,
.dash-mini-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dash-focus-card,
.dash-item-card,
.dash-revision-card,
.dash-request-card,
.dash-mini-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid #eadfd3;
  background: rgba(255, 255, 255, 0.72);
}

.dash-focus-card h4,
.dash-content-group h4,
.dash-revision-grid h4 {
  margin: 0;
  color: #0f172a;
}

.dash-focus-card h4 {
  margin-top: 6px;
  font-size: 1rem;
}

.dash-focus-card p,
.dash-item-card span,
.dash-revision-card small,
.dash-request-card span,
.dash-request-card small,
.dash-mini-link span {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-size: 0.84rem;
  line-height: 1.4;
}

.dash-focus-card.is-urgent {
  border-color: rgba(221, 84, 40, 0.34);
  background: #fff3ea;
}

.dash-content-groups {
  gap: 16px;
}

.dash-content-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dash-content-group h4,
.dash-revision-grid h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
}

.dash-content-group h4 span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #334155;
  font-size: 0.78rem;
}

.dash-card-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.dash-revision-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.dash-revision-grid > div {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dash-revision-card > div {
  min-width: 0;
}

.dash-revision-card strong,
.dash-mini-link strong,
.dash-request-card strong,
.dash-item-card strong {
  color: #172033;
}

.dash-status {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 3px 8px;
  border-radius: 999px;
  background: #e8eef7;
  color: #28415f;
  font-size: 0.74rem;
  font-weight: 800;
}

.dash-status.is-pending {
  background: #fff2d6;
  color: #935a00;
}

.dash-status.is-accepted {
  background: #dcfce7;
  color: #166534;
}

.dash-status.is-rejected {
  background: #fee2e2;
  color: #991b1b;
}

.dash-status.is-closed {
  background: #e5e7eb;
  color: #374151;
}

.dash-request-list {
  max-height: 720px;
  overflow: auto;
  padding-right: 4px;
}

.dash-request-card {
  align-items: flex-start;
  flex-direction: column;
  gap: 4px;
}

.dash-request-card p {
  margin: 4px 0 0;
  color: #526173;
  font-size: 0.83rem;
  line-height: 1.45;
}

.dash-mini-link {
  color: inherit;
  text-decoration: none;
}

.dash-mini-link:hover {
  border-color: rgba(221, 84, 40, 0.32);
  text-decoration: none;
}

@media (max-width: 1180px) {
  .dash-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 920px) {
  .dash-hero {
    flex-direction: column;
    align-items: flex-start;
  }

  .dash-hero-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .dash-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dash-revision-grid {
    grid-template-columns: 1fr;
  }

  .dash-side-panel {
    position: static;
  }
}

@media (max-width: 640px) {
  .dash-hero,
  .dash-section,
  .dash-stat {
    border-radius: 16px;
  }

  .dash-stats {
    grid-template-columns: 1fr;
  }

  .dash-shell {
    padding: 14px;
    border-radius: 0;
  }

  .dash-focus-card,
  .dash-item-card,
  .dash-revision-card {
    align-items: flex-start;
    flex-direction: column;
  }

  .dash-card-actions {
    justify-content: flex-start;
  }
}

/* ======================
   BOUTONS SECONDAIRES / AUTEUR
   ====================== */

.btn-edit {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.8rem;
  background: #e5e7eb;
  color: #111827;
  text-decoration: none;
}
.btn-edit:hover {
  background: #d1d5db;
  color: #111827;
  text-decoration: none;
}

.btn-link {
  font-size: 0.8rem;
  color: #15803d;
  text-decoration: none;
}
.btn-link:hover {
  text-decoration: underline;
}

.author-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: 8px;
  vertical-align: middle;
}

.btn-meta,
.btn-meta:hover {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  border: 1px solid #d1d5db;
  background: #f3f4f6;
  color: #111827;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.btn-meta:hover {
  background: #e5e7eb;
}

/* Section info auteur */

.author-info {
  margin-top: 24px;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  font-size: 0.9rem;
  line-height: 1.45;
}

.author-info h3 {
  margin-top: 0;
}

.author-info p:last-child {
  margin-bottom: 0;
}

/* ======================
   PAGE D'ACCUEIL / HOME
   ====================== */

.home-layout {
  margin-top: 28px;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1.65fr);
  gap: 24px;
  align-items: stretch;
}

.home-actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.home-brand-card {
  padding: 14px;
  border-radius: 18px;
  border: 1px solid #e5e7eb;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
}

.home-logo-block {
  display: block;
  max-width: 330px;
  margin: 0 auto;
}

.home-logo-top {
  display: block;
  width: 100%;
  height: auto;
}

.home-logo-top-dark {
  display: none;
}

.home-tagline {
  margin: 10px 0 2px;
  text-align: center;
  color: #475569;
  font-size: 0.9rem;
  line-height: 1.4;
}

.footer-brand {
  display: flex;
  justify-content: center;
  margin-bottom: 6px;
}

.footer-logo {
  width: min(210px, 56vw);
  height: auto;
}

.footer-logo-dark {
  display: none;
}

.footer-copy {
  margin: 0;
  text-align: center;
}

.home-quick-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.home-btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  min-height: 58px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid #d1d5db;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  color: #111827;
  font-size: 0.94rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}

.home-btn i {
  font-size: 1rem;
  color: #475569;
}

.home-btn:hover {
  background: #eef2f7;
  border-color: #c7d3e1;
  transform: translateY(-1px);
  text-decoration: none;
}

.home-btn-primary {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  border-color: #1d4ed8;
  color: #f8fafc;
}

.home-btn-primary i {
  color: #e0e7ff;
}

.home-btn-primary:hover {
  background: linear-gradient(135deg, #1d4ed8, #1e40af);
  border-color: #1e40af;
}

.home-hero-panel {
  background:
    radial-gradient(circle at top right, rgba(37, 99, 235, 0.1), transparent 42%),
    linear-gradient(180deg, #ffffff, #f8fafc);
  border-radius: 18px;
  border: 1px solid #e5e7eb;
  padding: 18px 20px;
  font-size: 1rem;
  line-height: 1.65;
}

.home-hero-panel h2 {
  margin: 0 0 12px;
  font-size: clamp(1.45rem, 2.2vw, 1.9rem);
  line-height: 1.15;
}

@media (max-width: 900px) {
  .home-layout {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 18px;
  }

  .home-brand-card {
    padding: 12px;
  }

  .home-logo-block {
    max-width: 280px;
  }

  .home-quick-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .home-btn {
    min-height: 54px;
    border-radius: 12px;
    font-size: 0.96rem;
  }
}/* ======================
   RONDS MALOYA – LISTE
   ====================== */

.rond-portail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 16px 0 12px;
}

.rond-portail-intro {
  margin: 0;
  font-size: 0.9rem;
  color: #4b5563;
  max-width: 520px;
}

.rond-list {
  list-style: none;           /* plus de puces */
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}

.rond-card {
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}

.rond-card-main {
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding: 10px 12px;
  text-decoration: none;
  color: inherit;
}

.rond-card:hover {
  border-color: #22c55e;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.rond-card-image img {
  width: 120px;              /* image plus grande */
  height: 120px;
  object-fit: cover;
  border-radius: 10px;
}

.rond-card-info {
  flex: 1;
  min-width: 0;
}

.rond-card-title {
  margin: 0 0 4px;
  font-size: 1.05rem;
  font-weight: 600;
}

.rond-card-meta {
  margin: 0 0 4px;
  font-size: 0.85rem;
  color: #6b7280;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rond-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: #dcfce7;
  color: #166534;
  font-size: 0.75rem;
}

.rond-meta-ville {
  font-size: 0.85rem;
}

.rond-card-hours {
  margin: 0 0 4px;
  font-size: 0.9rem;
  color: #111827;
}

.rond-card-social {
  margin: 0;
  font-size: 0.85rem;
}

.rond-card-social a {
  color: #2563eb;
  text-decoration: none;
}
.rond-card-social a:hover {
  text-decoration: underline;
}

/* Responsive : pile l'image au-dessus sur mobile */
@media (max-width: 640px) {
  .rond-card-main {
    flex-direction: column;
  }

  .rond-card-image img {
    width: 100%;
    max-height: 180px;
  }
}

/* ======================
   RONDS MALOYA – DÉTAIL
   ====================== */

.rond-detail-header {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin-top: 16px;
}

.rond-detail-main {
  flex: 1;
  min-width: 0;
}

.rond-detail-meta {
  margin: 4px 0 8px;
  font-size: 0.9rem;
  color: #4b5563;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rond-detail-hours {
  margin: 0 0 8px;
  font-size: 0.9rem;
  color: #111827;
}

.rond-detail-line {
  margin: 0 0 6px;
  font-size: 0.9rem;
}

.rond-detail-created {
  margin-top: 8px;
  font-size: 0.8rem;
  color: #6b7280;
}

.rond-logo-large img {
  width: 180px;
  height: 180px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
}

/* Map */

.rond-map-section {
  margin-top: 24px;
}

.rond-map-wrapper {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
}

.rond-map {
  width: 100%;
  min-height: 260px;
  border: 0;
}

.rond-map-link {
  margin-top: 6px;
  font-size: 0.85rem;
}

.rond-map-link a {
  color: #2563eb;
  text-decoration: none;
}
.rond-map-link a:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .rond-detail-header {
    flex-direction: column-reverse;
  }

  .rond-logo-large img {
    width: 100%;
    max-width: 260px;
  }
}
.rond-detail-description {
  margin-top: 24px;
}

.rond-description-html {
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  padding: 12px 14px;
  font-size: 0.95rem;
  line-height: 1.5;
}
/* ======================
   RONDS MALOYA – LISTE (nouveau visuel)
   ====================== */

.rond-portail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 16px 0 12px;
}

.rond-portail-intro {
  margin: 0;
  font-size: 0.9rem;
  color: #4b5563;
  max-width: 520px;
}

.rond-list {
  list-style: none; /* pas de puces */
  padding: 0;
  margin: 0;
  display: grid;
  gap: 16px;
}

/* Carte type "agenda" */

.rond-card {
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  background: linear-gradient(to right, #f9fafb, #ffffff);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}

.rond-card-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  padding: 12px 16px;
  text-decoration: none;
  color: inherit;
  align-items: center;
}

.rond-card:hover {
  border-color: #22c55e;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

/* Image, un peu plus grande mais contenue */

.rond-card-image img {
  width: 110px;
  height: 110px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
}

/* Bloc texte */

.rond-card-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

/* Titre + ligne meta */

.rond-card-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
}

.rond-card-meta {
  margin: 0;
  font-size: 0.85rem;
  color: #6b7280;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* Badge secteur */

.rond-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  background: #dcfce7;
  color: #166534;
  font-size: 0.75rem;
  font-weight: 500;
}

.rond-meta-ville {
  font-size: 0.85rem;
}

/* Ligne jour + horaires */

.rond-card-hours {
  margin: 2px 0 0;
  font-size: 0.9rem;
  color: #111827;
}

.rond-card-hours strong {
  font-weight: 600;
}

/* Lien Facebook aligné bas */

.rond-card-social {
  margin: 4px 0 0;
  font-size: 0.85rem;
}

.rond-card-social a {
  color: #2563eb;
  text-decoration: none;
}
.rond-card-social a:hover {
  text-decoration: underline;
}

/* Mobile : on empile image + texte */

@media (max-width: 640px) {
  .rond-card-main {
    grid-template-columns: 1fr;
  }

  .rond-card-image img {
    width: 100%;
    max-width: 220px;
  }
}
/* ======================
   FORMULAIRE ROND MALOYA
   ====================== */

.rond-form {
  max-width: 900px;
  margin: 24px auto 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Titre de section */

.rond-form-section {
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
}

.rond-form-title {
  margin: 0 0 10px;
  font-size: 0.98rem;
  font-weight: 600;
  color: #111827;
}

/* Grille 2 colonnes compacte */

.rond-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 18px;
}

/* Harmonisation des champs */

.rond-form .field-group {
  margin-bottom: 0; /* on gère l'espacement via la grille */
}

.rond-form label {
  font-size: 0.85rem;
  font-weight: 500;
  color: #374151;
  margin-bottom: 4px;
}

.rond-form input[type="text"],
.rond-form input[type="number"],
.rond-form input[type="url"],
.rond-form input[type="time"],
.rond-form select,
.rond-form textarea {
  width: 100%;
  padding: 8px 10px;
  border-radius: 10px;
  border: none;
  background: #eef3f8;
  color: #111827;
  font-size: 0.9rem;
}

/* Champ file (logo) */

.rond-form input[type="file"] {
  border-radius: 999px;
  padding: 6px 10px;
  background: #f9fafb;
}

/* Aide sous les champs */

.rond-form .field-help {
  margin-top: 4px;
  margin-bottom: 0;
  font-size: 0.78rem;
  color: #6b7280;
}

/* Ligne horaires */

.rond-form-inline-times {
  display: flex;
  align-items: center;
  gap: 6px;
}

.rond-time-separator {
  font-size: 0.9rem;
  color: #6b7280;
}

/* Logo preview */

.rond-form-logo-row {
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(0, 1.1fr);
  gap: 16px;
  align-items: center;
}

.rond-logo-preview {
  border-radius: 12px;
  border: 1px dashed #d1d5db;
  background: #f9fafb;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}

.rond-logo-placeholder {
  font-size: 0.8rem;
  color: #6b7280;
}

.rond-logo-preview img {
  max-width: 100%;
  max-height: 130px;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.15);
}

/* Bouton de validation */

.rond-form-actions {
  text-align: right;
  margin-top: 4px;
}

.rond-form-actions button {
  padding: 9px 20px;
  border-radius: 999px;
  background: #22c55e;
  color: #022c22;
  font-weight: 600;
  border: none;
  cursor: pointer;
}

.rond-form-actions button:hover {
  background: #16a34a;
}

.rond-editor-page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 16px 22px 64px;
}

.rond-editor-shell {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.rond-editor-hero {
  margin-bottom: 16px;
  padding: 0;
}

.rond-editor-hero h1 {
  margin: 4px 0 0;
  color: #2f2119;
  font-size: clamp(1.7rem, 3.5vw, 2.8rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
}

.rond-editor-form {
  max-width: none;
  margin: 0;
  align-items: start;
}

.rond-editor-form .rond-form-section {
  padding: 18px;
  border: 1px solid rgba(214,94,44,.12);
  border-radius: 14px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 18px 48px rgba(89,54,25,.08);
}

.rond-editor-form .rond-form-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 15px;
  color: #2f2119;
  font-size: 1rem;
  font-weight: 950;
  text-transform: none;
  letter-spacing: 0;
}

.rond-editor-form .rond-form-grid {
  gap: 12px;
}

.rond-editor-form label {
  color: #4b3327;
  font-weight: 900;
}

.rond-editor-form input[type="text"],
.rond-editor-form input[type="number"],
.rond-editor-form input[type="url"],
.rond-editor-form input[type="time"],
.rond-editor-form input[type="date"],
.rond-editor-form select,
.rond-editor-form textarea {
  border: 1px solid rgba(93,69,56,.18);
  border-radius: 10px;
  background: rgba(255,255,255,.92);
}

.rond-editor-form input:focus,
.rond-editor-form select:focus,
.rond-editor-form textarea:focus {
  border-color: rgba(214,94,44,.58);
  box-shadow: 0 0 0 3px rgba(214,94,44,.12);
  outline: none;
}

.rond-editor-main {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.rond-form-wide {
  grid-column: 1 / -1;
}

.rond-form input[type="date"] {
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 10px;
  background: #eef3f8;
  color: #111827;
  font-size: 0.9rem;
}

.rond-editor-actions {
  display: grid;
  align-items: center;
  justify-content: stretch;
  gap: 10px;
  padding: 0;
  text-align: center;
}

.rond-editor-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  background: #d65e2c;
  color: #ffffff;
  border: 0;
  box-shadow: 0 12px 28px rgba(173, 66, 22, 0.18);
}

.rond-editor-actions button:hover {
  background: #bd4d20;
}

.rond-editor-secondary-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid #eadccc;
  border-radius: 999px;
  background: #ffffff;
  color: #6f6158;
  font-weight: 800;
  text-decoration: none;
}

.rond-editor-secondary-link:hover {
  color: #d65e2c;
  text-decoration: none;
}

.rond-editor-notice {
  margin: 0;
}

body[data-theme="dark"] .rond-editor-shell {
  border-color: rgba(255, 255, 255, 0.1);
  background:
    radial-gradient(circle at top right, rgba(214, 94, 44, 0.18), transparent 34%),
    #15191f;
}

body[data-theme="dark"] .rond-editor-hero h1 {
  color: #f8fafc;
}

body[data-theme="dark"] .rond-editor-form .rond-form-section,
body[data-theme="dark"] .rond-editor-secondary-link {
  border-color: rgba(255, 255, 255, 0.1);
  background: #20242b;
}

body[data-theme="dark"] .rond-form input[type="date"] {
  background: #2d333d;
  color: #f8fafc;
}

@media (max-width: 760px) {
  .rond-editor-page {
    padding: 10px;
  }

  .rond-editor-shell {
    padding: 14px;
    border-radius: 18px;
  }

  .rond-editor-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .rond-editor-actions button,
  .rond-editor-secondary-link {
    width: 100%;
  }
}

/* Intro texte */

.page-intro {
  font-size: 0.9rem;
  color: #4b5563;
  margin-top: 4px;
  margin-bottom: 12px;
}

/* Responsive */

@media (max-width: 800px) {
  .rond-form-grid {
    grid-template-columns: 1fr;
  }

  .rond-form-logo-row {
    grid-template-columns: 1fr;
  }
}

/* ================
   LISTE RONDS MALOYA
   ================ */

.rond-portail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.rond-portail-intro {
  margin: 0;
  font-size: 0.95rem;
  max-width: 520px;
}

/* Liste sans puces, compacte */
.rond-list {
list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0px;
}

/* Chaque rond = mini carte en ligne */
.rond-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  transition: background-color 0.12s ease, border-color 0.12s ease, transform 0.05s ease;
}

.rond-item:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
  transform: translateY(-1px);
}

/* Zone cliquable principale (logo + textes) */
.rond-link {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  text-decoration: none;
  color: inherit;
}

/* Logo */
.rond-thumb {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  background: #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rond-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Si pas de logo, petit placeholder */
.rond-thumb-placeholder span {
  font-size: 1.4rem;
}

/* Bloc textes */
.rond-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* Ligne 1 : nom + pill secteur */
.rond-line1 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rond-name {
  font-weight: 600;
  font-size: 0.98rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rond-region-pill {
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: #ecfdf3;
  color: #15803d;
  border: 1px solid #bbf7d0;
}

/* Ligne 2 : ville + horaires */
.rond-line2 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.8rem;
  color: #4b5563;
}

.rond-ville::before {
  content: "📍 ";
}

.rond-hours {
  opacity: 0.9;
}

/* Bouton Facebook à droite */
.rond-fb-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #d1d5db;
  font-size: 0.78rem;
  text-decoration: none;
  background: #eff6ff;
  color: #1d4ed8;
  flex-shrink: 0;
}

.rond-fb-btn:hover {
  background: #dbeafe;
  border-color: #bfdbfe;
}

.rond-fb-icon {
  font-size: 0.9rem;
}

/* Responsive : sur mobile, FB passe en dessous */
@media (max-width: 640px) {
  .rond-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .rond-fb-btn {
    margin-left: 74px; /* aligné sous le logo + texte */
  }
}

/* Pastilles ZORDI / DOMIN */
.rond-badge {
  font-size: 0.72rem;
  padding: 2px 7px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 600;
}

/* Aujourd’hui */
.rond-badge-zordi {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #bbf7d0;
}

/* Demain */
.rond-badge-domin {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
}
.lex-link {
  border-bottom: 1px dotted var(--km-accent, #22c55e);
  cursor: pointer;
}

.dico-results {
  font-size: 0.85rem;
  padding: 4px 0;
}

.dico-results-list .dico-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px solid #e5e7eb;
}

.dico-results-list .dico-row:last-child {
  border-bottom: none;
}

.dico-origin {
  font-size: 0.8rem;
  opacity: 0.7;
}

.dico-link-btn {
  font-size: 0.8rem;
  border-radius: 999px;
  border: none;
  padding: 4px 10px;
  background: #22c55e;
  color: #fff;
  cursor: pointer;
}

.dico-link-btn:hover {
  filter: brightness(0.95);
}

/* ======================
   PORTAIL CONTRIBUTION
   ====================== */

/* ═══════════════════════════════════════
   Contrib — Vue visiteur (non connecté)
   ═══════════════════════════════════════ */

.site-main:has(.cg-page) {
  max-width: 100%;
  padding: 0;
}

/* ── Page ── */
.cg-page {
  height: calc(100vh - 56px);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fffaf3;
  background-image:
    radial-gradient(ellipse at 76% 18%, rgba(217,85,40,0.32) 0%, transparent 54%),
    radial-gradient(ellipse at 24% 84%, rgba(217,85,40,0.20) 0%, transparent 50%);
}

/* ── Split ── */
.cg-split {
  width: 100%;
  max-width: 1040px;
  height: calc(100% - 56px);
  max-height: 620px;
  padding: 0 40px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 48px;
}

/* ── Hero (gauche) ── */
.cg-hero {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.cg-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #d95528;
  margin: 0 0 18px;
}

.cg-title {
  font-size: clamp(4rem, 6.5vw, 7rem);
  font-weight: 900;
  line-height: 0.91;
  color: #1a0e06;
  letter-spacing: -0.035em;
  margin: 0 0 20px;
}

.cg-lead {
  font-size: 1.05rem;
  color: #706050;
  line-height: 1.65;
  margin: 0 0 28px;
}

.cg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 24px;
}

.cg-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 28px;
  border-radius: 999px;
  background: #d95528;
  color: #fff;
  font-weight: 800;
  font-size: 0.97rem;
  text-decoration: none;
  box-shadow: 0 6px 28px rgba(217,85,40,0.44);
  transition: background 0.15s, box-shadow 0.15s, transform 0.12s;
}

.cg-btn:hover {
  background: #c04420;
  color: #fff;
  box-shadow: 0 10px 38px rgba(217,85,40,0.58);
  transform: translateY(-2px);
}

.cg-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 24px;
  border-radius: 999px;
  background: rgba(255,255,255,0.55);
  color: #3a2010;
  font-weight: 700;
  font-size: 0.97rem;
  text-decoration: none;
  border: 1px solid rgba(217,85,40,0.25);
  transition: background 0.15s, border-color 0.15s, transform 0.12s;
}

.cg-btn-ghost:hover {
  background: rgba(255,255,255,0.80);
  border-color: rgba(217,85,40,0.45);
  color: #1a0e06;
  transform: translateY(-1px);
}

body[data-theme="dark"] .cg-btn-ghost {
  background: rgba(30,16,4,0.55);
  color: #e0c8a8;
  border-color: rgba(217,85,40,0.22);
}

body[data-theme="dark"] .cg-btn-ghost:hover {
  background: rgba(40,22,6,0.80);
  border-color: rgba(217,85,40,0.44);
  color: #f0dfc0;
}

/* ── Stats ── */
.cg-stats {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 360px;
  padding: 12px 8px;
  margin-bottom: 18px;
  background: rgba(255,255,255,0.58);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.82);
  border-radius: 16px;
}

.cg-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.cg-stat-num {
  font-size: 1.45rem;
  font-weight: 900;
  color: #1a0e06;
  letter-spacing: -0.02em;
  line-height: 1;
}

.cg-stat-label {
  font-size: 0.65rem;
  font-weight: 700;
  color: #907060;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.cg-stat-sep {
  display: block;
  width: 1px;
  height: 28px;
  background: rgba(217,85,40,0.18);
  flex-shrink: 0;
}

/* ── Perks ── */
.cg-perks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.cg-perk {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(234,223,206,0.80);
  border-radius: 999px;
  font-size: 0.80rem;
  font-weight: 600;
  color: #5a4030;
}

.cg-perk i {
  color: #d95528;
  font-size: 0.82rem;
}

/* ── Feed panel (droite) ── */
.cg-feed-panel {
  flex: 0 0 320px;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,0.68);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.90);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(180,100,40,0.10);
}

.cg-feed-head {
  padding: 20px 22px 14px;
  border-bottom: 1px solid rgba(234,223,206,0.55);
  flex-shrink: 0;
}

.cg-feed {
  flex: 1;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 6px 14px 14px;
}

.cg-feed-item {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 9px 6px;
  border-radius: 9px;
  transition: background 0.12s;
}

.cg-feed-item:hover {
  background: rgba(217,85,40,0.05);
}

.cg-feed-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(217,85,40,0.12);
  color: #c94f20;
  font-size: 0.78rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  flex-shrink: 0;
}

.cg-feed-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.cg-feed-link {
  font-size: 0.87rem;
  font-weight: 600;
  color: #201408;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  transition: color 0.12s;
}

a.cg-feed-link:hover { color: #d95528; }

.cg-feed-by {
  font-size: 0.72rem;
  color: #a09080;
}

/* ── Dark mode ── */
body[data-theme="dark"] .cg-page {
  background: #120800;
  background-image:
    radial-gradient(ellipse at 76% 18%, rgba(217,85,40,0.24) 0%, transparent 54%),
    radial-gradient(ellipse at 24% 84%, rgba(217,85,40,0.14) 0%, transparent 50%);
}

body[data-theme="dark"] .cg-title { color: #f0e6d3; }
body[data-theme="dark"] .cg-lead  { color: #a09080; }

body[data-theme="dark"] .cg-stats {
  background: rgba(30,16,4,0.62);
  border-color: rgba(255,255,255,0.06);
}
body[data-theme="dark"] .cg-stat-num   { color: #c0ad9a; }
body[data-theme="dark"] .cg-stat-label { color: #907060; }
body[data-theme="dark"] .cg-stat-sep   { background: rgba(217,85,40,0.22); }

body[data-theme="dark"] .cg-perk {
  background: rgba(30,16,4,0.55);
  border-color: rgba(255,255,255,0.06);
  color: #c0a890;
}

body[data-theme="dark"] .cg-feed-panel {
  background: rgba(20,10,2,0.85);
  border-color: rgba(255,255,255,0.05);
  box-shadow: 0 8px 40px rgba(0,0,0,0.30);
}

body[data-theme="dark"] .cg-feed-head {
  border-bottom-color: rgba(255,255,255,0.06);
}

body[data-theme="dark"] .cg-feed-item:hover { background: rgba(217,85,40,0.07); }
body[data-theme="dark"] .cg-feed-avatar { background: rgba(217,85,40,0.18); color: #e07040; }
body[data-theme="dark"] .cg-feed-link   { color: #e8d8c0; }
body[data-theme="dark"] a.cg-feed-link:hover { color: #f0a060; }
body[data-theme="dark"] .cg-feed-by     { color: #7a6a58; }

/* ── Responsive ── */
@media (max-width: 860px) {
  .cg-page {
    height: auto;
    min-height: calc(100vh - 56px);
    overflow: visible;
    align-items: flex-start;
    padding: 36px 0 48px;
  }

  .cg-split {
    flex-direction: column;
    align-items: center;
    height: auto;
    max-height: none;
    padding: 0 24px;
    gap: 28px;
  }

  .cg-hero { width: 100%; }

  .cg-feed-panel {
    flex: none;
    width: 100%;
    max-width: 500px;
    height: 360px;
  }
}

@media (max-width: 480px) {
  .cg-title { font-size: 3.2rem; }

  .cg-split { padding: 0 16px; }

  .cg-stats { max-width: 100%; }

  .cg-feed-panel { height: 300px; }
}

/* ── */

.site-main:has(.contrib-portal-hero) {
  max-width: 1120px;
}

.site-main:has(.contrib-portal-dashboard-grid) {
  max-width: 1300px;
  padding-inline: 24px;
}

.contrib-portal-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(280px, 0.8fr);
  gap: 12px;
  align-items: stretch;
  margin-bottom: 12px;
}

.contrib-portal-hero-user {
  grid-template-columns: minmax(0, 1fr);
}

.contrib-portal-dashboard-head {
  margin-bottom: 10px;
}

.contrib-portal-hero-main {
  padding: 20px;
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, rgba(214, 94, 44, 0.16), transparent 34%),
    linear-gradient(180deg, #fffaf3, #f9f0e6);
  color: #f8fafc;
  border: 1px solid #e7d8c7;
  box-shadow: none;
}

.contrib-portal-dashboard-head .contrib-portal-hero-main {
  padding: 18px 20px;
  background:
    radial-gradient(circle at top right, rgba(214, 94, 44, 0.14), transparent 34%),
    linear-gradient(180deg, #fffaf3, #f9f0e6);
  border: 1px solid #e7d8c7;
  box-shadow: 0 10px 26px rgba(66, 38, 20, 0.06);
}

.contrib-portal-dashboard-head .contrib-portal-hero-main h2 {
  margin: 6px 0;
  font-size: clamp(1.45rem, 2.8vw, 2rem);
}

.contrib-portal-dashboard-head .contrib-portal-lead {
  max-width: 82ch;
  font-size: 0.94rem;
  line-height: 1.45;
}

.contrib-portal-kicker {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: none;
  color: #d65e2c;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.contrib-portal-hero-main h2 {
  margin: 10px 0;
  color: #0f172a;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  line-height: 1.06;
}

.contrib-portal-lead {
  margin: 0;
  max-width: 58ch;
  font-size: 1rem;
  line-height: 1.6;
  color: #475569;
}

.contrib-portal-hero-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.contrib-portal-hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 64px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.16);
  color: #f8fafc;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}

.contrib-portal-hero-btn i {
  font-size: 1rem;
  line-height: 1;
}

.contrib-portal-hero-btn:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.34);
  text-decoration: none;
}

.contrib-portal-hero-btn.is-alt {
  background: rgba(191, 219, 254, 0.2);
}

.contrib-portal-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.contrib-portal-tag {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: #fffaf3;
  border: 1px solid #e2d4c3;
  color: #475569;
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1;
}

.contrib-portal-tag.is-positive {
  background: rgba(187, 247, 208, 0.16);
  border-color: rgba(187, 247, 208, 0.26);
  color: #dcfce7;
}

.contrib-portal-hero-side {
  min-width: 0;
}

.contrib-portal-side-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  padding: 20px;
  border-radius: 18px;
  border: 1px solid #e4dfd6;
  background: #fffaf3;
  box-shadow: none;
}

.contrib-portal-side-card.is-accent {
  background:
    radial-gradient(circle at top right, rgba(34, 197, 94, 0.12), transparent 34%),
    #ffffff;
}

.contrib-portal-side-card strong {
  font-size: 1.2rem;
  line-height: 1.3;
  color: #111827;
}

.contrib-portal-side-card p {
  margin: 0;
  color: #4b5563;
  line-height: 1.55;
}

.contrib-portal-side-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #15803d;
}

.contrib-portal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.contrib-portal-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(214, 94, 44, 0.28);
  background:
    radial-gradient(circle at top right, rgba(214, 94, 44, 0.12), transparent 32%),
    #fff7ed;
  box-shadow: 0 10px 24px rgba(66, 38, 20, 0.06);
}

.contrib-portal-notice h3 {
  margin: 4px 0 4px;
  color: #0f172a;
  font-size: 1.08rem;
  line-height: 1.25;
}

.contrib-portal-notice p {
  margin: 0;
  color: #5d6b7c;
  line-height: 1.45;
}

.contrib-portal-notice-kicker {
  display: inline-flex;
  color: #d65e2c;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.contrib-portal-grid.is-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.contrib-portal-primary-actions {
  margin-bottom: 10px;
}

.contrib-portal-primary-actions.is-compact-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(100%, 560px);
  margin-left: auto;
  margin-right: auto;
}

.contrib-portal-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 148px;
  padding: 16px;
  border-radius: 14px;
  border: none;
  background: #f7eadc;
  box-shadow: none;
}

.contrib-portal-card h3 {
  margin: 0;
  font-size: 1.04rem;
  line-height: 1.3;
  color: #111827;
}

.contrib-portal-card p {
  margin: 0;
  color: #4b5563;
  font-size: 0.92rem;
  line-height: 1.48;
}

.contrib-portal-card-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 32px;
  min-width: 32px;
  padding: 0 10px;
  border-radius: 999px;
  background: #ffffff;
  color: #d65e2c;
  border: 1px solid #e7d8c7;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.contrib-portal-card-index i {
  font-size: 1rem;
  line-height: 1;
}

.contrib-portal-card-link {
  color: inherit;
  text-decoration: none;
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}

.contrib-portal-card-link:hover {
  transform: translateY(-2px);
  box-shadow: none;
  text-decoration: none;
}

.contrib-portal-action-btn {
  min-height: 150px;
  padding: 16px;
}

.contrib-portal-action-btn.is-primary-action {
  background:
    radial-gradient(circle at top right, rgba(214, 94, 44, 0.08), transparent 32%),
    #fffaf3;
}

.contrib-portal-primary-actions.is-compact-actions .contrib-portal-action-btn {
  min-height: 44px;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  border-color: transparent;
  background: #fffaf3;
  color: #334155;
  text-align: center;
  box-shadow: none;
  white-space: nowrap;
}

.contrib-portal-primary-actions.is-compact-actions .contrib-portal-action-btn h3 {
  color: #334155;
  font-size: 0.92rem;
  line-height: 1;
}

.contrib-portal-primary-actions.is-compact-actions .contrib-portal-card-index {
  background: rgba(111, 134, 167, 0.16);
  border-color: transparent;
  color: #6f86a7;
  min-height: 26px;
  min-width: 26px;
  padding: 0;
}

.contrib-portal-dashboard-grid .contrib-portal-card-index {
  border: none;
}

.contrib-portal-primary-actions.is-compact-actions .contrib-portal-card-index i {
  color: #6f86a7;
}

.contrib-portal-primary-actions.is-compact-actions .contrib-portal-action-btn:hover {
  background: #fdf3e8;
  border-color: transparent;
  box-shadow: none;
}

.contrib-portal-action-btn.is-single-action {
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Section "Demandes de relecture" */
.contrib-relecture-queue {
  margin-bottom: 12px;
  padding: 16px 18px;
  border-radius: 12px;
  background: #fff8f2;
  border: 1px solid #f0d9c6;
}

.contrib-relecture-queue-head {
  margin-bottom: 12px;
}

.contrib-relecture-queue-kicker {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #d65e2c;
}

.contrib-relecture-queue-head h3 {
  margin: 0 0 3px;
  font-size: 1rem;
  font-weight: 700;
  color: #1f2937;
}

.contrib-relecture-queue-head p {
  margin: 0;
  font-size: 0.8rem;
  color: #64748b;
}

.contrib-relecture-list {
  display: grid;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.contrib-relecture-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #ede3d8;
  text-decoration: none;
  transition: border-color 0.12s, background 0.12s;
}

.contrib-relecture-item:hover {
  border-color: #d65e2c;
  background: #fff4ee;
}

.contrib-relecture-item-body {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
}

.contrib-relecture-item-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.9rem;
  font-weight: 700;
  color: #111827;
}

.contrib-relecture-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0;
  font-size: 0.75rem;
  color: #94a3b8;
}

.contrib-relecture-item-meta span + span::before {
  content: ' · ';
  white-space: pre;
}

.contrib-relecture-item-cta {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f4e4d3;
  color: #d65e2c;
  font-size: 0.8rem;
  transition: background 0.12s, color 0.12s;
}

.contrib-relecture-item:hover .contrib-relecture-item-cta {
  background: #d65e2c;
  color: #fff;
}

body[data-theme="dark"] .contrib-relecture-queue {
  background: #2a2018;
  border-color: #3d2e1a;
}

body[data-theme="dark"] .contrib-relecture-item {
  background: #1f1f22;
  border-color: #3a2d20;
}

body[data-theme="dark"] .contrib-relecture-item:hover {
  border-color: #d65e2c;
  background: #2d1f14;
}

body[data-theme="dark"] .contrib-relecture-item-title {
  color: #e5e7eb;
}

body[data-theme="dark"] .contrib-relecture-item-meta {
  color: #6b7280;
}

body[data-theme="dark"] .contrib-relecture-item-cta {
  background: #3a2d20;
}

.contrib-relecture-queue-footer {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #ede3d8;
}

.contrib-relecture-see-all {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #e8d5c3;
  font-size: 0.84rem;
  font-weight: 600;
  color: #d65e2c;
  text-decoration: none;
  transition: background 0.12s, border-color 0.12s;
}

.contrib-relecture-see-all:hover {
  background: #fff4ee;
  border-color: #d65e2c;
}

.contrib-relecture-see-all-count {
  margin-left: 2px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #f4e4d3;
  font-size: 0.75rem;
  font-weight: 700;
  color: #b34a1e;
}

/* Page contrib_relecture.php */
.contrib-relecture-page {
  display: grid;
  gap: 28px;
}

.contrib-relecture-page-head {
  padding: 4px 0 0;
}

.contrib-relecture-page-head h2 {
  margin: 0 0 4px;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--color-text, #111827);
}

.contrib-relecture-page-head p {
  margin: 0;
  font-size: 0.9rem;
  color: #64748b;
}

.contrib-relecture-section {
  padding: 18px 20px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #e9ddd3;
}

.contrib-relecture-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.contrib-relecture-section-head h3 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 3px;
  font-size: 1.05rem;
  font-weight: 700;
  color: #1f2937;
}

.contrib-relecture-section-head p {
  margin: 0;
  font-size: 0.8rem;
  color: #64748b;
}

.contrib-relecture-total-badge {
  flex-shrink: 0;
  padding: 3px 10px;
  border-radius: 999px;
  background: #f4e4d3;
  font-size: 0.75rem;
  font-weight: 700;
  color: #b34a1e;
  white-space: nowrap;
}

.contrib-relecture-full-list {
  display: grid;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.contrib-relecture-full-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #f0e6da;
  background: #fdf9f6;
  text-decoration: none;
  transition: border-color 0.12s, background 0.12s;
}

.contrib-relecture-full-item:hover {
  border-color: #d65e2c;
  background: #fff4ee;
}

.contrib-relecture-full-body {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 3px;
}

.contrib-relecture-full-body > strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.92rem;
  font-weight: 700;
  color: #111827;
}

.contrib-relecture-full-meta {
  display: flex;
  flex-wrap: wrap;
  font-size: 0.76rem;
  color: #94a3b8;
}

.contrib-relecture-full-meta span + span::before {
  content: ' · ';
  white-space: pre;
}

.contrib-relecture-reasons {
  color: #d65e2c;
  font-weight: 600;
}

.contrib-relecture-report-comment {
  font-size: 0.78rem;
  color: #475569;
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contrib-relecture-empty {
  padding: 14px;
  border: 1px dashed #ddd0c4;
  border-radius: 8px;
  font-size: 0.88rem;
  color: #94a3b8;
  text-align: center;
}

.contrib-relecture-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
  font-size: 0.84rem;
  color: #64748b;
}

.contrib-relecture-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid #e2d5c8;
  background: #fff;
  color: #64748b;
  text-decoration: none;
  font-size: 0.85rem;
  transition: border-color 0.12s, color 0.12s;
}

.contrib-relecture-page-btn:hover {
  border-color: #d65e2c;
  color: #d65e2c;
}

body[data-theme="dark"] .contrib-relecture-section {
  background: #1f1f22;
  border-color: #2e2e33;
}

body[data-theme="dark"] .contrib-relecture-full-item {
  background: #252528;
  border-color: #3a2d20;
}

body[data-theme="dark"] .contrib-relecture-full-item:hover {
  border-color: #d65e2c;
  background: #2d1f14;
}

body[data-theme="dark"] .contrib-relecture-full-body > strong {
  color: #e5e7eb;
}

body[data-theme="dark"] .contrib-relecture-page-head h2 {
  color: #f3f4f6;
}

.contrib-portal-action-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #0f172a;
}

.contrib-portal-action-btn h3 {
  font-size: 1.14rem;
}

.contrib-portal-action-btn .contrib-portal-card-cta {
  font-size: 0.92rem;
}

.contrib-portal-card-cta {
  margin-top: auto;
  font-size: 0.85rem;
  font-weight: 700;
  color: #15803d;
}

.contrib-portal-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contrib-portal-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  gap: 24px;
  align-items: stretch;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

.contrib-portal-dashboard-main {
  min-width: 0;
  background: #fdf5ec;
  border-radius: 22px;
  border: 1px solid #ece4d8;
  padding: 24px;
}

.contrib-notif-group-label {
  margin: 0 0 6px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #94a3b8;
}

.contrib-notif-group-label.is-spaced {
  margin-top: 14px;
}

.contrib-status-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 18px;
  margin-bottom: 16px;
}

.contrib-status-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 2px 20px 2px 0;
}

.contrib-status-group-label {
  font-size: 0.67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #94a3b8;
}

.contrib-status-group.is-activity .contrib-status-group-label {
  color: #b45309;
}

.contrib-status-items {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.contrib-status-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.83rem;
  color: #374151;
  text-decoration: none;
  line-height: 1.2;
}

.contrib-status-item strong {
  font-weight: 700;
  color: #111827;
}

.contrib-status-item.is-urgent {
  color: #92400e;
}

.contrib-status-item.is-urgent strong {
  color: #78350f;
}

.contrib-status-item.is-success {
  color: #065f46;
}

.contrib-status-item.is-success strong {
  color: #064e3b;
}

.contrib-status-sep {
  width: 1px;
  height: 36px;
  background: #e2e8f0;
  margin: 0 20px 0 0;
  flex-shrink: 0;
  align-self: center;
}

body[data-theme="dark"] .contrib-status-bar {
  background: #1c1c1f;
  border-color: #2e2e33;
}

body[data-theme="dark"] .contrib-status-item {
  color: #9ca3af;
}

body[data-theme="dark"] .contrib-status-item strong {
  color: #e5e7eb;
}

body[data-theme="dark"] .contrib-status-item.is-urgent {
  color: #fcd34d;
}

body[data-theme="dark"] .contrib-status-item.is-success {
  color: #86efac;
}

body[data-theme="dark"] .contrib-status-sep {
  background: #3f3f46;
}

.contrib-portal-dashboard-title {
  margin-bottom: 14px;
  padding: 8px 2px 4px;
  text-align: center;
}

.contrib-portal-dashboard-title h2 {
  margin: 6px 0 0;
  color: #0f172a;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.08;
}

.contrib-portal-quick-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}

.contrib-portal-quick-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid #e4dfd6;
  background: #fffaf3;
  color: #334155;
  font-size: 0.88rem;
  font-weight: 800;
  text-decoration: none;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.contrib-portal-quick-link i {
  color: #d65e2c;
  font-size: 0.98rem;
  line-height: 1;
}

.contrib-portal-quick-link:hover {
  border-color: #e7c3a8;
  background: #fff4e6;
  color: #0f172a;
  text-decoration: none;
}

.contrib-portal-quick-link.is-alert {
  border-color: rgba(214, 94, 44, 0.32);
  background: #fff7ed;
  color: #9a3412;
}

.contrib-portal-discovery-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 2px;
}

.contrib-portal-discovery-links a {
  color: #166534;
  font-size: 0.86rem;
  font-weight: 800;
  text-decoration: none;
}

.contrib-portal-discovery-links a:hover {
  text-decoration: underline;
}

.contrib-portal-tabs {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 14px;
  border-radius: 16px;
  background: #efe0cf;
}

.contrib-portal-tab-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px;
  border-radius: 10px;
  background: #f8ead9;
  border: none;
}

.contrib-portal-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1 1 110px;
  min-height: 36px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 900;
}

.contrib-portal-tab.has-notice {
  background: #fff4e6;
  color: #223044;
}

.contrib-portal-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #6f86a7;
  color: #fffaf3;
  font-size: 0.72rem;
  font-weight: 950;
  line-height: 1;
}

.contrib-portal-tab:hover {
  background: #fff4e6;
  color: #0f172a;
}

.contrib-portal-tab.is-active {
  background: #d65e2c;
  color: #ffffff;
}

.contrib-portal-tab.is-active .contrib-portal-tab-badge {
  background: #fff7ee;
  color: #d65e2c;
}

.contrib-portal-tab-panel {
  display: grid;
  gap: 8px;
}

.contrib-portal-tab-panel[hidden] {
  display: none;
}

.contrib-portal-tab-link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid #e4dfd6;
  border-radius: 10px;
  background: #ffffff;
  color: #334155;
  font-size: 0.92rem;
  font-weight: 850;
  text-decoration: none;
}

.contrib-portal-tab-link i {
  color: #d65e2c;
}

.contrib-portal-tab-link:hover {
  border-color: #e7c3a8;
  background: #fffaf3;
  color: #0f172a;
  text-decoration: none;
}

.contrib-dashboard-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.contrib-dashboard-stat {
  display: grid;
  gap: 3px;
  min-height: 58px;
  padding: 9px 10px;
  border: none;
  border-radius: 8px;
  background: #fff7ee;
}

.contrib-dashboard-stat span {
  color: #64748b;
  font-size: 0.74rem;
  font-weight: 850;
}

.contrib-dashboard-stat strong {
  color: #0f172a;
  font-size: 1.22rem;
  line-height: 1;
}

.contrib-dashboard-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.contrib-dashboard-section {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 12px;
  background: #fbf1e6;
}

.contrib-dashboard-section.is-filled {
  order: 1;
}

.contrib-dashboard-section.is-empty {
  order: 2;
}

.contrib-dashboard-section h4 {
  margin: 0;
  color: #111827;
  font-size: 0.98rem;
}

.contrib-dashboard-list {
  display: grid;
  gap: 6px;
}

.contrib-dashboard-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 7px 9px;
  border: none;
  border-radius: 8px;
  background: #fff7ee;
  color: inherit;
  text-decoration: none;
}

.contrib-dashboard-row:hover {
  background: #f4e4d3;
  text-decoration: none;
}

.contrib-dashboard-row strong,
.contrib-dashboard-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contrib-dashboard-row strong {
  color: #1f2937;
  font-size: 0.92rem;
}

.contrib-dashboard-row small {
  color: #64748b;
  font-size: 0.78rem;
}

.contrib-dashboard-row em {
  color: #15803d;
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 900;
}

.contrib-dashboard-empty {
  margin: 0;
  padding: 10px;
  border: 1px dashed #d8cbbb;
  border-radius: 10px;
  color: #64748b;
  font-size: 0.88rem;
}

.contrib-portal-dashboard-hint {
  margin: 0.1rem 0 0;
  font-size: 0.85rem;
  color: var(--color-text-muted, #64748b);
  font-style: italic;
}

.contrib-dashboard-subsection-label {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94a3b8;
}

.contrib-review-status {
  flex-shrink: 0;
  display: inline-block;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.contrib-review-status.is-pending {
  background: #fff3cd;
  color: #92400e;
}

.contrib-review-status.is-accepted {
  background: #d1fae5;
  color: #065f46;
}

.contrib-review-status.is-rejected {
  background: #fee2e2;
  color: #991b1b;
}

.contrib-review-status.is-closed {
  background: #f1f5f9;
  color: #475569;
}

.contrib-notification-list,
.contrib-global-actions {
  display: grid;
  gap: 6px;
}

.contrib-notification-card,
.contrib-global-action {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 10px;
  border-radius: 9px;
  background: #fff7ee;
  color: inherit;
  text-decoration: none;
}

.contrib-notification-card i,
.contrib-global-action i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: rgba(111, 134, 167, 0.14);
  color: #6f86a7;
  font-size: 0.92rem;
}

.contrib-notification-card.is-important i {
  background: rgba(214, 94, 44, 0.14);
  color: #d65e2c;
}

.contrib-notification-card span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.contrib-notification-card strong,
.contrib-global-action span {
  color: #1f2937;
  font-size: 0.9rem;
  font-weight: 850;
}

.contrib-notification-card small {
  color: #64748b;
  font-size: 0.78rem;
}

.contrib-notification-card:hover,
.contrib-global-action:hover {
  background: #f4e4d3;
  text-decoration: none;
}

.contrib-global-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.contrib-global-action {
  grid-template-columns: auto auto;
  justify-content: center;
  min-height: 40px;
  white-space: nowrap;
}

.contrib-dashboard-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  background: #efe0cf;
  color: #334155;
  font-size: 0.84rem;
  font-weight: 850;
  text-decoration: none;
}

.contrib-dashboard-more:hover {
  background: #e8d6c3;
  color: #0f172a;
  text-decoration: none;
}

/* --- Nouvelles actions principales --- */
.contrib-portal-primary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.contrib-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  background: #d65e2c;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 800;
  text-decoration: none;
  transition: filter 0.12s ease, transform 0.1s ease;
}

.contrib-action-btn:hover {
  filter: brightness(0.9);
  transform: translateY(-1px);
  text-decoration: none;
  color: #fff;
}

.contrib-action-btn i {
  font-size: 1rem;
}

/* --- Barre de résumé des actions --- */
.contrib-action-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
}

.contrib-action-bar-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  color: #374151;
  background: transparent;
}

.contrib-action-bar-item strong {
  font-weight: 800;
}

.contrib-action-bar-item.is-urgent {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
}

.contrib-action-bar-item.is-urgent:hover {
  background: #fde68a;
  text-decoration: none;
  color: #78350f;
}

.contrib-action-bar-item.is-draft {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
}

a.contrib-action-bar-item.is-draft:hover {
  background: #e2e8f0;
  color: #1e293b;
  text-decoration: none;
}

.contrib-action-bar-item.is-pending {
  background: #fff3cd;
  color: #854d0e;
  border: 1px solid #fef08a;
}

a.contrib-action-bar-item.is-pending:hover {
  background: #fef08a;
  color: #713f12;
  text-decoration: none;
}

.contrib-action-bar-item.is-success {
  background: #d1fae5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

a.contrib-action-bar-item.is-success:hover {
  background: #a7f3d0;
  color: #064e3b;
  text-decoration: none;
}

/* --- Zone "Mes publications" (accent) --- */
.contrib-my-publications {
  margin-bottom: 20px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid #e7d8c7;
  background: #fffaf3;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.contrib-my-publications-kicker-row {
  margin-bottom: 10px;
}

/* --- Layout flat publications (sans onglets) --- */
.contrib-pub-content {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.contrib-pub-section {
  padding: 4px 0 16px;
  scroll-margin-top: 80px;
}

.contrib-pub-section:last-child {
  padding-bottom: 0;
}

.contrib-pub-section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.contrib-pub-section-head h4 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 800;
  color: #1e293b;
  letter-spacing: -0.01em;
}

.contrib-pub-section-head > i {
  font-size: 1.2rem;
  color: #a07850;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.contrib-pub-section-count {
  margin-left: auto;
  font-size: 0.72rem;
  font-weight: 700;
  color: #94a3b8;
  background: #f1f5f9;
  border-radius: 999px;
  padding: 2px 8px;
  line-height: 1.4;
}

.contrib-pub-divider {
  height: 1px;
  background: #e9d8c5;
  margin: 4px 0 20px;
}

/* --- Groupes dans les publications --- */
.contrib-pub-group {
  margin-bottom: 14px;
  scroll-margin-top: 80px;
}

#section-corrections {
  scroll-margin-top: 24px;
}

.contrib-pub-group:last-child {
  margin-bottom: 0;
}

.contrib-pub-group-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 12px 0 8px;
  padding: 5px 12px;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #64748b;
  background: #f1f5f9;
  border-radius: 8px;
}

.contrib-pub-group-label i.is-published { color: #15803d; }
.contrib-pub-group-label i.is-pending   { color: #b45309; }
.contrib-pub-group-label i.is-draft     { color: #64748b; }

.contrib-pub-group-secondary .contrib-pub-group-label {
  color: #94a3b8;
}

.contrib-pub-group-secondary .contrib-dashboard-row {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.contrib-pub-stats {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e9d8c5;
}

/* --- Chips de statut inline --- */
.contrib-item-chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  white-space: nowrap;
  line-height: 1;
}

.contrib-item-chip i {
  flex-shrink: 0;
  line-height: 1;
  font-size: 0.85rem;
}

.contrib-item-chip.is-published {
  background: #d1fae5;
  color: #065f46;
}

.contrib-item-chip.is-urgent {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
  animation: chip-pulse 2s ease-in-out infinite;
}

.contrib-item-chip.is-pending {
  background: #fff3cd;
  color: #92400e;
}

.contrib-item-chip.is-draft {
  background: #f1f5f9;
  color: #475569;
}

.contrib-item-chip.is-success {
  background: #d1fae5;
  color: #065f46;
}

.contrib-item-chip.is-accepted {
  background: #d1fae5;
  color: #065f46;
}

.contrib-item-chip.is-rejected {
  background: #fee2e2;
  color: #991b1b;
}

.contrib-item-chip.is-closed {
  background: #f1f5f9;
  color: #475569;
}

@keyframes chip-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.7; }
}

/* --- Ligne urgente --- */
.contrib-dashboard-row.has-urgent {
  border-left: 3px solid #f59e0b;
  background: #fffbeb;
}

.contrib-dashboard-row.has-urgent:hover {
  background: #fef3c7;
}

/* --- Corps d'une ligne (remplace le span générique) --- */
.contrib-dashboard-row-body {
  display: grid;
  gap: 2px;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.contrib-dashboard-row-body strong,
.contrib-dashboard-row-body small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

a.contrib-dashboard-row-body:hover strong {
  color: #d95528;
}

/* --- Bouton d'édition inline --- */
.contrib-row-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  color: #c0b0a0;
  font-size: 0.85rem;
  text-decoration: none;
  flex-shrink: 0;
  transition: background 0.12s, color 0.12s;
}

.contrib-row-edit:hover {
  background: rgba(217, 85, 40, 0.12);
  color: #d95528;
}

/* --- Zone activité (neutre) --- */
.contrib-activity-section {
  margin-bottom: 20px;
  padding: 22px;
  border-radius: 22px;
  border: 1px solid #e7e5e4;
  background: #fcfcfb;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.contrib-activity-head {
  margin-bottom: 12px;
}

.contrib-activity-head h3 {
  margin: 4px 0 0;
  font-size: 1.15rem;
  font-weight: 800;
  color: #111827;
  line-height: 1.2;
}

.contrib-activity-section .contrib-dashboard-row {
  background: #fff;
  border: 1px solid #e2e8f0;
}

.contrib-activity-section .contrib-dashboard-row:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}

/* --- État vide avec CTA --- */
.contrib-dashboard-empty-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0;
  padding: 12px 14px;
  border: 1px dashed #d8cbbb;
  border-radius: 10px;
  color: #64748b;
  font-size: 0.88rem;
}

.contrib-dashboard-empty-cta a {
  color: #d65e2c;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.contrib-dashboard-empty-cta a:hover {
  text-decoration: underline;
}

/* --- Compteur simple sur onglet --- */
.contrib-portal-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(111, 134, 167, 0.2);
  color: #64748b;
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1;
}

.contrib-portal-tab.is-active .contrib-portal-tab-count {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

/* --- Dark mode pour les nouveaux éléments --- */
body[data-theme="dark"] .contrib-action-bar {
  background: #1c1c1f;
  border-color: #3f3f46;
}

body[data-theme="dark"] .contrib-action-bar-item.is-urgent {
  background: #422006;
  border-color: #713f12;
  color: #fde68a;
}

body[data-theme="dark"] .contrib-action-bar-item.is-draft {
  background: #27272a;
  border-color: #3f3f46;
  color: #94a3b8;
}

body[data-theme="dark"] .contrib-action-bar-item.is-pending {
  background: #422006;
  border-color: #713f12;
  color: #fef08a;
}

body[data-theme="dark"] .contrib-action-bar-item.is-success {
  background: #064e3b;
  border-color: #065f46;
  color: #6ee7b7;
}

/* Boutons action en dark */
body[data-theme="dark"] .contrib-action-btn {
  background: #b84e22;
  color: #fff;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset;
}

body[data-theme="dark"] .contrib-action-btn:hover {
  background: #a34319;
}

/* Section Mes publications */
body[data-theme="dark"] .contrib-my-publications {
  background: #1e1a15;
  border-color: #3d2f1f;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
}

/* Rows warm à l'intérieur de la section chaude */
body[data-theme="dark"] .contrib-my-publications .contrib-dashboard-row {
  background: #2a2118;
  border-color: #3d2f1f;
}

body[data-theme="dark"] .contrib-my-publications .contrib-dashboard-row:hover {
  background: #332a1e;
}

/* Group label dans section warm */
body[data-theme="dark"] .contrib-my-publications .contrib-pub-group-label {
  background: #231c13;
  color: #94a3b8;
}

/* Stats boxes */
body[data-theme="dark"] .contrib-dashboard-stat {
  background: #27272a;
}

body[data-theme="dark"] .contrib-my-publications .contrib-dashboard-stat {
  background: #231c13;
}

body[data-theme="dark"] .contrib-pub-section-head h4 {
  color: #e5e7eb;
}

body[data-theme="dark"] .contrib-pub-group-label {
  background: #27272a;
  color: #94a3b8;
}

body[data-theme="dark"] .contrib-pub-stats {
  border-top-color: #3f3f46;
}

body[data-theme="dark"] .contrib-item-chip.is-published {
  background: #064e3b;
  color: #6ee7b7;
}

body[data-theme="dark"] .contrib-item-chip.is-urgent {
  background: #422006;
  border-color: #713f12;
  color: #fde68a;
}

body[data-theme="dark"] .contrib-item-chip.is-pending {
  background: #422006;
  color: #fde68a;
}

body[data-theme="dark"] .contrib-item-chip.is-draft {
  background: #27272a;
  color: #94a3b8;
}

body[data-theme="dark"] .contrib-item-chip.is-success,
body[data-theme="dark"] .contrib-item-chip.is-accepted {
  background: #064e3b;
  color: #6ee7b7;
}

body[data-theme="dark"] .contrib-item-chip.is-rejected {
  background: #450a0a;
  color: #fca5a5;
}

body[data-theme="dark"] .contrib-item-chip.is-closed {
  background: #27272a;
  color: #64748b;
}

body[data-theme="dark"] .contrib-dashboard-row.has-urgent {
  background: #1a1508;
  border-left-color: #d97706;
}

body[data-theme="dark"] .contrib-dashboard-row.has-urgent:hover {
  background: #231c0a;
}

body[data-theme="dark"] .contrib-activity-section {
  background: #18181b;
  border-color: #3f3f46;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
}

body[data-theme="dark"] .contrib-activity-head h3 {
  color: #e5e7eb;
}

body[data-theme="dark"] .contrib-activity-section .contrib-dashboard-row {
  background: #27272a;
  border-color: #3f3f46;
}

body[data-theme="dark"] .contrib-activity-section .contrib-dashboard-row:hover {
  background: #2e2e33;
  border-color: #52525b;
}

body[data-theme="dark"] .contrib-pub-group-secondary .contrib-dashboard-row {
  background: #1c1c1f;
  border-color: #3f3f46;
}

body[data-theme="dark"] .contrib-pub-section-head h4 {
  color: #94a3b8;
}

body[data-theme="dark"] .contrib-pub-section-head > i {
  color: #c89b6e;
}

body[data-theme="dark"] .contrib-pub-section-count {
  color: #a1a1aa;
  background: #27272a;
}

body[data-theme="dark"] .contrib-pub-divider {
  background: #3f3f46;
}

.contrib-portal-contributors {
  position: static;
}

.contrib-portal-contributors .contrib-portal-section-head {
  margin-bottom: 8px;
}

.contrib-portal-contributor-list {
  display: grid;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.contrib-portal-contributor-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 7px 9px;
  border-radius: 8px;
  background: #fbf1e6;
}

.contrib-portal-contributor-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.contrib-portal-contributor-name,
.contrib-portal-contributor-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contrib-portal-contributor-title {
  color: #1f2937;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
}

.contrib-portal-contributor-title:hover {
  color: #d65e2c;
  text-decoration: underline;
}

.contrib-portal-contributor-name {
  color: #94a3b8;
  font-size: 0.74rem;
  font-weight: 400;
}

.contrib-portal-contributor-kind {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: #eef2ff;
  color: #3730a3;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
}

.contrib-portal-contributor-kind.is-paroles {
  background: #fff7ed;
  color: #9a3412;
}

.contrib-portal-contributor-kind.is-lexique {
  background: #ecfdf3;
  color: #166534;
}

.contrib-portal-contributor-kind.is-correction {
  background: #eff6ff;
  color: #1d4ed8;
}

.contrib-portal-empty-small {
  margin: 0;
  color: #64748b;
  font-size: 0.9rem;
  line-height: 1.45;
}

.contrib-portal-steps,
.contrib-portal-panel {
  padding: 16px;
  border-radius: 14px;
  border: none;
  background: #f7eadc;
  box-shadow: none;
}

.contrib-portal-panel-soft {
  background:
    linear-gradient(180deg, #ffffff, #f8fafc);
}

.contrib-portal-section-head {
  margin-bottom: 12px;
}

.contrib-portal-section-head h3 {
  margin: 0 0 6px;
  font-size: 1.2rem;
  color: #111827;
}

.contrib-portal-section-head p {
  margin: 0;
  color: #6b7280;
  line-height: 1.55;
}

.contrib-portal-step-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.contrib-portal-step {
  padding: 18px;
  border-radius: 18px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.contrib-portal-step strong {
  display: block;
  margin-bottom: 8px;
  color: #111827;
}

.contrib-portal-step p {
  margin: 0;
  color: #4b5563;
  line-height: 1.55;
}

.contrib-portal-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.85fr);
  gap: 12px;
  align-items: start;
}

.contrib-portal-detail-grid-single {
  grid-template-columns: minmax(0, 1fr);
}

.contrib-portal-rond-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}

.contrib-portal-rond-card {
  padding: 14px;
  border-radius: 14px;
  background:
    radial-gradient(circle at top right, rgba(34, 197, 94, 0.1), transparent 32%),
    #f8fafc;
  border: 1px solid #dbe4f0;
}

.contrib-portal-rond-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.contrib-portal-rond-top h4 {
  margin: 0 0 6px;
  font-size: 1.15rem;
  color: #111827;
}

.contrib-portal-rond-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  color: #4b5563;
  font-size: 0.9rem;
}

.contrib-portal-rond-meta span {
  padding: 4px 10px;
  border-radius: 999px;
  background: #e5f7ec;
  color: #166534;
}

.contrib-portal-rond-schedule {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 0;
  color: #1f2937;
}

.contrib-portal-rond-desc {
  margin: 12px 0 0;
  color: #4b5563;
  line-height: 1.6;
}

.contrib-portal-empty {
  padding: 18px;
  border-radius: 18px;
  border: 1px dashed #cbd5e1;
  background: #f8fafc;
}

.contrib-portal-empty strong {
  display: block;
  margin-bottom: 6px;
  color: #111827;
}

.contrib-portal-empty p {
  margin: 0;
  color: #4b5563;
  line-height: 1.55;
}

.contrib-portal-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.contrib-portal-links li {
  padding-bottom: 14px;
  border-bottom: 1px solid #e5e7eb;
}

.contrib-portal-links li:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.contrib-portal-links a {
  display: inline-block;
  margin-bottom: 4px;
  color: #166534;
  font-weight: 700;
  text-decoration: none;
}

.contrib-portal-links a:hover {
  text-decoration: underline;
}

.contrib-portal-links span {
  display: block;
  color: #6b7280;
  line-height: 1.5;
  font-size: 0.92rem;
}

.contrib-portal-big-links {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.contrib-portal-big-link {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 8px;
  min-height: 210px;
  padding: 24px;
  border-radius: 22px;
  border: 1px solid #d8e1ec;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  text-decoration: none;
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.contrib-portal-big-link-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ecfdf3;
  color: #166534;
  border: 1px solid #bbf7d0;
}

.contrib-portal-big-link-icon i {
  font-size: 1.1rem;
  line-height: 1;
}

.contrib-portal-big-link strong {
  color: #0f172a;
  font-size: 1.08rem;
  margin-top: 2px;
}

.contrib-portal-big-link span {
  color: #4b5563;
  font-size: 0.9rem;
  line-height: 1.5;
}

.contrib-portal-big-link-cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #166534 !important;
  font-size: 0.9rem !important;
  font-weight: 700;
}

.contrib-portal-big-link:hover {
  transform: translateY(-2px);
  border-color: #86efac;
  box-shadow: 0 14px 28px rgba(21, 128, 61, 0.1);
  text-decoration: none;
}

/* ── Nav mobile rapide (cachée sur desktop) ── */
.contrib-mobile-quicknav {
  display: none;
}

@media (max-width: 980px) {
  .contrib-mobile-quicknav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 200;
    background: #ffffff;
    border-top: 1px solid #e5e7eb;
    padding: 8px 16px max(12px, env(safe-area-inset-bottom));
    gap: 4px;
    box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.10);
  }

  .contrib-mobile-quicknav-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 4px 4px;
    border-radius: 12px;
    text-decoration: none;
    color: #64748b;
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    transition: background 0.15s, color 0.15s;
  }

  .contrib-mobile-quicknav-btn:hover,
  .contrib-mobile-quicknav-btn:focus {
    background: #f8f4ef;
    color: #c2621d;
    text-decoration: none;
  }

  .contrib-mobile-quicknav-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
  }

  .contrib-mobile-quicknav-icon i {
    font-size: 1.3rem;
    line-height: 1;
  }

  .contrib-mobile-quicknav-badge {
    position: absolute;
    top: -2px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    font-size: 0.6rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ffffff;
    line-height: 1;
  }

  .contrib-mobile-quicknav-badge.is-urgent {
    background: #f59e0b;
    color: #ffffff;
  }

  .contrib-mobile-quicknav-badge.is-pending {
    background: #f59e0b;
    color: #ffffff;
  }

  .contrib-mobile-quicknav-badge.is-draft {
    background: #94a3b8;
    color: #ffffff;
  }

  .contrib-mobile-quicknav-label {
    display: block;
    line-height: 1;
  }

  /* Padding bas pour que le contenu ne passe pas sous la quicknav */
  .site-main:has(.contrib-mobile-quicknav) {
    padding-bottom: 80px;
  }
}

body[data-theme="dark"] .contrib-mobile-quicknav {
  background: #18181b;
  border-top-color: #3f3f46;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
}

body[data-theme="dark"] .contrib-mobile-quicknav-btn {
  color: #a1a1aa;
}

body[data-theme="dark"] .contrib-mobile-quicknav-btn:hover {
  background: #27272a;
  color: #e4a36a;
}

body[data-theme="dark"] .contrib-mobile-quicknav-badge {
  border-color: #18181b;
}

@media (max-width: 980px) {
  .contrib-portal-hero,
  .contrib-portal-dashboard-grid,
  .contrib-portal-detail-grid {
    grid-template-columns: 1fr;
  }

  /* Annuler le padding-inline desktop du site-main pour maximiser la largeur */
  .site-main:has(.contrib-portal-dashboard-grid) {
    padding-inline: 12px;
  }

  .contrib-portal-dashboard-main {
    padding: 16px;
  }

  .contrib-my-publications {
    padding: 14px;
  }

  .contrib-activity-section {
    padding: 14px;
  }

  .contrib-portal-contributors {
    position: static;
  }

  .contrib-portal-grid,
  .contrib-portal-grid.is-actions,
  .contrib-portal-step-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Home immersive (UX/UI v2) */
.home-immersive-shell {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.home-immersive-hero {
  display: grid;
  grid-template-columns: minmax(180px, 0.74fr) minmax(0, 1.26fr);
  gap: 18px;
  align-items: center;
  border-radius: 22px;
  border: 1px solid #e7d8c7;
  padding: 24px;
  background:
    radial-gradient(circle at top right, rgba(214, 94, 44, 0.14), transparent 36%),
    linear-gradient(180deg, #fffaf3, #f9f0e6);
}

.home-immersive-brand,
.home-immersive-story {
  min-width: 0;
}

.home-immersive-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.home-immersive-logo {
  width: min(260px, 100%);
  height: auto;
  display: block;
}

.home-immersive-logo-dark {
  display: none;
}

.home-immersive-story {
  max-width: 620px;
}

.home-immersive-kicker {
  display: inline-flex;
  margin-bottom: 8px;
  color: #d65e2c;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.home-immersive-cta-main {
  width: min(100%, 360px);
  min-height: 50px;
  margin-top: 14px;
  border-radius: 999px;
  border: 1px solid #c94f20;
  background: #d65e2c;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: 1rem;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(173, 66, 22, 0.18);
  transition: transform 0.08s ease, background-color 0.16s ease, box-shadow 0.16s ease;
}

.home-immersive-cta-main:hover {
  transform: translateY(-1px);
  background: #bd4d20;
  color: #ffffff;
  box-shadow: 0 14px 28px rgba(173, 66, 22, 0.22);
  text-decoration: none;
}

.home-immersive-story h2 {
  margin: 0;
  color: #0f172a;
  font-size: clamp(1.8rem, 4vw, 3rem);
  line-height: 1.04;
}

.home-immersive-story p {
  margin: 10px 0 0;
  color: #475569;
  font-size: 1.02rem;
  line-height: 1.58;
}

.home-immersive-secondary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.home-immersive-cta-secondary {
  min-height: 62px;
  border-radius: 14px;
  border: 1px solid #e4dfd6;
  background: #fffaf3;
  color: #0f172a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 0.96rem;
  font-weight: 800;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.06s ease, box-shadow 0.15s ease;
}

.home-immersive-cta-secondary i {
  color: #d65e2c;
  font-size: 1.05rem;
  line-height: 1;
}

.home-immersive-cta-secondary:hover {
  background: #ffffff;
  border-color: #e7c3a8;
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(66, 38, 20, 0.08);
  text-decoration: none;
}

@media (max-width: 940px) {
  .home-immersive-hero {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .home-immersive-story {
    margin: 0 auto;
  }

  .home-immersive-cta-main {
    width: 100%;
  }

  .home-immersive-secondary {
    grid-template-columns: 1fr;
  }
}

body[data-theme="dark"] .home-immersive-hero {
  border-color: #3c3c3c;
  background:
    radial-gradient(circle at top right, rgba(225, 120, 75, 0.14), transparent 36%),
    linear-gradient(180deg, #252526, #2d2d30);
}

body[data-theme="dark"] .home-immersive-logo-light {
  display: none;
}

body[data-theme="dark"] .home-immersive-logo-dark {
  display: block;
}

body[data-theme="dark"] .home-immersive-story h2 {
  color: #ffffff;
}

body[data-theme="dark"] .home-immersive-story p {
  color: #d1d5db;
}

body[data-theme="dark"] .home-immersive-cta-main {
  border-color: #e1784b;
  background: #e1784b;
  color: #ffffff;
}

body[data-theme="dark"] .home-immersive-cta-main:hover {
  background: #d65e2c;
}

body[data-theme="dark"] .home-immersive-cta-secondary {
  background: #252526;
  border-color: #3c3c3c;
  color: #e5e7eb;
}

body[data-theme="dark"] .home-immersive-cta-secondary i {
  color: #e1784b;
}

body[data-theme="dark"] .home-immersive-cta-secondary:hover {
  background: #37373d;
  border-color: #4b5563;
}

@media (max-width: 680px) {
  .home-immersive-shell {
    margin-top: 8px;
    gap: 10px;
  }

  .home-immersive-hero {
    padding: 18px;
    border-radius: 18px;
    gap: 14px;
  }

  .home-immersive-logo {
    width: min(170px, 68vw);
  }

  .home-immersive-story h2 {
    font-size: 1.65rem;
    line-height: 1.1;
  }

  .home-immersive-story p {
    font-size: 0.94rem;
    line-height: 1.5;
  }

  .home-immersive-cta-main,
  .home-immersive-cta-secondary {
    min-height: 54px;
  }

  .contrib-portal-hero-main,
  .contrib-portal-side-card,
  .contrib-portal-card,
  .contrib-portal-steps,
  .contrib-portal-panel {
    padding: 18px;
    border-radius: 20px;
  }

  .contrib-portal-dashboard-grid {
    padding: 10px;
    border-radius: 14px;
  }

  .contrib-portal-dashboard-head .contrib-portal-hero-main {
    padding: 16px;
    border-radius: 14px;
  }

  .contrib-portal-grid,
  .contrib-portal-grid.is-actions,
  .contrib-portal-step-list {
    grid-template-columns: 1fr;
  }

  .contrib-portal-primary-actions.is-compact-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contrib-dashboard-columns,
  .contrib-global-actions {
    grid-template-columns: 1fr;
  }

  .contrib-dashboard-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contrib-portal-quick-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .contrib-portal-quick-link {
    justify-content: center;
  }

  .contrib-portal-primary-actions.is-compact-actions .contrib-portal-action-btn {
    padding: 0 10px;
  }

  .contrib-portal-primary-actions.is-compact-actions .contrib-portal-action-btn h3 {
    font-size: 0.84rem;
  }

  .contrib-portal-hero-actions {
    grid-template-columns: 1fr;
  }

  .contrib-portal-notice {
    align-items: stretch;
    flex-direction: column;
    padding: 16px;
    border-radius: 18px;
  }

  .contrib-portal-notice .btn-primary-large {
    width: 100%;
  }

  .contrib-portal-rond-top {
    flex-direction: column;
  }

  /* Corrections spécifiques aux nouveaux éléments du dashboard */
  .site-main:has(.contrib-portal-dashboard-grid) {
    padding-inline: 8px;
  }

  .contrib-portal-dashboard-main {
    padding: 12px;
    border-radius: 18px;
  }

  .contrib-my-publications {
    padding: 10px;
    border-radius: 18px;
  }

  .contrib-portal-tabs {
    padding: 10px;
    border-radius: 14px;
  }

  .contrib-activity-section {
    padding: 14px;
    border-radius: 18px;
  }

  /* Stats en 2 colonnes plutôt que 1 sur petit mobile */
  .contrib-dashboard-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contrib-action-bar {
    gap: 6px;
    padding: 8px 10px;
  }

  .contrib-action-bar-item {
    font-size: 0.78rem;
    padding: 4px 8px;
  }
}

/* ======================
   PAGE RECHERCHE
   ====================== */

.site-main:has(.search-page-hero) {
  max-width: 1180px;
}

.site-main:has(.song-detail) {
  max-width: 1180px;
}

.search-page-shell {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  background: #f9f0e6;
  border-radius: 20px;
}

.search-page-layout {
  margin-top: 0;
}

.search-page-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  margin-bottom: 0;
  padding: 4px 0 8px;
}

.search-page-hero-copy {
  min-width: 0;
}

.search-page-kicker,
.search-panel-kicker,
.search-results-kicker {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.search-page-kicker {
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: none;
  color: #d65e2c;
}

.search-page-title {
  margin: 0;
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  line-height: 1.08;
  color: #0f172a;
}

.search-page-lead {
  margin: 6px 0 0;
  max-width: 56ch;
  color: #475569;
  line-height: 1.55;
  font-size: 0.96rem;
}

.search-page-hero-stats {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
}

.search-page-hero-stats span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid #e2d4c3;
  border-radius: 999px;
  background: #fffaf3;
  color: #475569;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
}

.search-page-hero-stats strong {
  display: inline-block;
  color: #0f172a;
  font-size: 0.95rem;
  line-height: 1;
}

.favorites-sort-form {
  display: flex;
  align-items: center;
  gap: 6px;
}

.favorites-sort-form select {
  appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b7280'/%3E%3C/svg%3E") no-repeat right 8px center;
  background-size: 10px 6px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  color: #374151;
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 600;
  padding: 5px 28px 5px 10px;
  transition: border-color 0.15s;
}

.favorites-sort-form select:hover,
.favorites-sort-form select:focus {
  border-color: #6b7280;
  outline: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ======================
   Diksyonèr
   ====================== */

.dico-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
}

.dico-portal-hero {
  grid-template-columns: minmax(0, 1fr) auto minmax(320px, 440px);
  align-items: stretch;
}

.dico-hero-counts {
  display: grid;
  align-content: center;
  gap: 4px;
  min-width: 92px;
  color: #64748b;
  font-size: 0.84rem;
}

.dico-hero-counts span {
  display: block;
  line-height: 1.2;
}

.dico-hero-counts strong {
  display: block;
  color: #0f172a;
  font-size: 1.55rem;
  line-height: 1;
}

.dico-command-panel {
  display: grid;
  gap: 10px;
  margin: 18px 0 14px;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
}

.dico-command-form {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(220px, 320px) auto;
  gap: 10px;
  align-items: end;
}

.dico-command-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.dico-command-field label {
  color: #475569;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.dico-command-input-wrap {
  display: flex;
  align-items: center;
  min-height: 44px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.dico-command-input-wrap:focus-within {
  border-color: #d65e2c;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(214, 94, 44, 0.1);
}

.dico-command-input-wrap i {
  flex: 0 0 auto;
  padding-left: 12px;
  color: #94a3b8;
}

.dico-command-input-wrap input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 0 12px;
  color: #0f172a;
  font: inherit;
}

.dico-command-field select {
  min-height: 44px;
  width: 100%;
  padding: 0 12px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
  color: #0f172a;
  font: inherit;
}

.dico-command-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.dico-command-actions .dico-search-submit,
.dico-command-reset {
  min-height: 44px;
  margin: 0;
  white-space: nowrap;
}

.dico-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.dico-active-filters span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid #fed7aa;
  border-radius: 999px;
  background: #fff7ed;
  color: #9a3412;
  font-size: 0.82rem;
  font-weight: 800;
}

.dico-results-summary {
  margin: 0 0 10px;
  color: #64748b;
  font-size: 0.92rem;
}

.dico-results-summary strong {
  color: #0f172a;
}

.dico-search-bar {
  display: flex;
  align-items: center;
  gap: 0;
  background: #ffffff;
  border: 1.5px solid #d1d5db;
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.dico-search-bar:focus-within {
  border-color: #0c2645;
  box-shadow: 0 0 0 3px rgba(12, 38, 69, 0.08);
}

.dico-search-icon {
  padding: 0 12px 0 16px;
  font-size: 15px;
  color: #9ca3af;
  pointer-events: none;
  flex-shrink: 0;
}

.dico-search-bar input[type="text"] {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 13px 8px;
  font-size: 0.97rem;
  color: #111827;
  outline: none;
}

.dico-search-bar input[type="text"]::placeholder {
  color: #9ca3af;
}

.dico-reset-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #9ca3af;
  font-size: 14px;
  transition: background 0.12s, color 0.12s;
  text-decoration: none;
}

.dico-reset-btn:hover {
  background: #f3f4f6;
  color: #374151;
}

.dico-search-submit {
  flex-shrink: 0;
  margin: 6px 8px 6px 4px;
  border-radius: 8px;
}

/* ---- Liste dictionnaire ---- */
.dico-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.dico-letter-sep {
  padding: 5px 16px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #94a3b8;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  user-select: none;
}

.dico-entry {
  border-bottom: 1px solid #f1f5f9;
}

.dico-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 16px 10px 14px;
  text-decoration: none;
  color: inherit;
  border-left: 3px solid transparent;
  transition: background 0.12s, border-color 0.12s;
}

.dico-card:hover {
  background: #fff7ed;
  border-left-color: #d65e2c;
  text-decoration: none;
  color: inherit;
}

.dico-card-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.dico-word {
  font-family: Lora, Georgia, serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #0c2645;
  line-height: 1.25;
}

.dico-phonetic {
  font-size: 0.82rem;
  color: #6b7280;
  font-style: italic;
}

.dico-excerpt {
  font-size: 0.9rem;
  color: #4b5563;
  line-height: 1.5;
  margin: 0;
}

.dico-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

.dico-origin-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.73rem;
  color: #94a3b8;
}

.dico-origin-tag .bi {
  font-size: 0.62rem;
}

.dico-def-count {
  font-size: 0.72rem;
  font-weight: 600;
  color: #64748b;
  padding: 1px 7px;
  border-radius: 99px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
}

.dico-card:hover .dico-def-count {
  background: #fef0e8;
  border-color: #fed7aa;
  color: #c2410c;
}

.dico-card-arrow {
  margin-left: auto;
  color: #cbd5e1;
  font-size: 13px;
  transition: color 0.12s, transform 0.12s;
  flex-shrink: 0;
}

.dico-card:hover .dico-card-arrow {
  color: #d65e2c;
  transform: translateX(3px);
}

@media (max-width: 640px) {
  .dico-search-bar {
    border-radius: 10px;
  }

  .dico-search-bar input[type="text"] {
    padding: 12px 8px;
  }

  .dico-card {
    padding: 10px 12px 9px 12px;
  }
}

/* Detail page */
.dico-detail-shell {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.dico-breadcrumb {
  margin-bottom: 20px;
}

.dico-breadcrumb a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  font-weight: 700;
  color: #475569;
  text-decoration: none;
  transition: color 0.12s;
}

.dico-breadcrumb a:hover {
  color: #0c2645;
}

.dico-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 16px;
  align-items: start;
}

.dico-detail-main {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dico-detail-panel {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 22px 24px;
}

.dico-detail-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dico-detail-word-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.dico-detail-word {
  font-size: 2rem;
  font-weight: 900;
  color: #0c2645;
  line-height: 1.1;
  margin: 0;
}

.dico-detail-phonetic {
  font-size: 1rem;
  font-weight: 500;
  color: #6b7280;
  font-style: italic;
}

.dico-detail-equivalents {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.dico-equiv-badge {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #166534;
  font-size: 0.85rem;
  font-weight: 700;
}

.dico-detail-origin {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: #6b7280;
  margin: 0;
}

.dico-detail-origin i {
  color: #9ca3af;
}

.dico-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 800;
  color: #374151;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 14px;
}

.dico-section-title i {
  color: #d65e2c;
  font-size: 15px;
}

.dico-def-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  counter-reset: dico-sense;
}

.dico-def-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 32px;
  position: relative;
  counter-increment: dico-sense;
}

.dico-def-item::before {
  content: counter(dico-sense);
  position: absolute;
  left: 0;
  top: 1px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #0c2645;
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dico-def-text {
  font-size: 0.97rem;
  color: #111827;
  line-height: 1.6;
  margin: 0;
}

.dico-example {
  margin: 0;
  padding: 8px 14px;
  border-left: 3px solid #e5e7eb;
  background: #f9fafb;
  border-radius: 0 6px 6px 0;
  font-size: 0.88rem;
  font-style: italic;
  color: #4b5563;
  display: flex;
  gap: 6px;
}

.dico-example i {
  color: #d1d5db;
  font-size: 13px;
  flex-shrink: 0;
  margin-top: 1px;
}

.dico-expr-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dico-expr-list li {
  padding: 8px 12px;
  background: #f8fafc;
  border-radius: 8px;
  font-size: 0.93rem;
  color: #374151;
  border-left: 3px solid #d65e2c;
}

.dico-empty {
  color: #9ca3af;
  font-size: 0.9rem;
  margin: 0;
}

.dico-detail-aside {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dico-aside-panel {
  padding: 18px 20px;
}

.dico-aside-text {
  font-size: 0.87rem;
  color: #6b7280;
  line-height: 1.5;
  margin: 0 0 12px;
}

.dico-aside-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  justify-content: center;
}

@media (max-width: 720px) {
  .dico-detail-layout {
    grid-template-columns: 1fr;
  }

  .dico-detail-word {
    font-size: 1.6rem;
  }

  .dico-detail-panel {
    padding: 16px 18px;
  }
}

.search-page-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.search-page-tag {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #ecfeff;
  font-size: 0.85rem;
  font-weight: 600;
}

.search-page-side-card,
.search-page-panel {
  border-radius: 24px;
  border: 1px solid #e7e5e4;
  background: #fcfcfb;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.search-page-side-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  padding: 24px;
}

.search-page-side-card strong {
  font-size: 2rem;
  line-height: 1;
  color: #111827;
}

.search-page-side-card p {
  margin: 0;
  color: #4b5563;
  line-height: 1.55;
}

.search-page-side-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #15803d;
}

.search-page-panel {
  padding: 22px;
}

.search-filter-panel {
  padding: 14px 16px;
  border-radius: 20px;
}

.search-panel-head,
.search-results-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.search-panel-head {
  margin-bottom: 16px;
}

.search-panel-head h3,
.search-results-head h3,
.search-request-panel h3 {
  margin: 6px 0 0;
  font-size: 1.2rem;
  color: #111827;
}

.search-panel-head p,
.search-results-caption,
.search-request-panel p {
  margin: 0;
  color: #6b7280;
  line-height: 1.55;
  max-width: 40ch;
}

.search-panel-kicker,
.search-results-kicker {
  background: #eff3f8;
  color: #43556f;
}

.search-page-form {
  margin-bottom: 0;
  padding: 0;
  background: transparent;
  border: none;
}

.search-form-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: end;
}

.search-form-row-single {
  grid-template-columns: minmax(0, 1fr);
}

.search-form-field {
  margin-bottom: 0;
}

.search-input-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0;
  align-items: stretch;
  background: #eef3f8;
  border-radius: 10px;
  overflow: hidden;
}

.search-compact-label {
  margin-bottom: 2px;
  font-size: 0.74rem;
  line-height: 1.1;
}

.search-page-form input[type="text"] {
  padding: 9px 12px;
  border-radius: 0;
  font-size: 1.08rem;
  font-weight: 700;
  background: transparent;
  box-shadow: none;
}

.search-page-form input[type="text"]:focus {
  outline: 0;
  background: transparent;
  box-shadow: none;
}

.search-input-shell:focus-within {
  background: #e8eff7;
  box-shadow: 0 0 0 3px rgba(125, 145, 173, 0.24);
}

.search-submit-btn {
  border-radius: 0;
  padding: 0 12px;
  min-width: 48px;
  font-size: 0.84rem;
  font-weight: 700;
  background: #d65e2c;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.search-submit-btn:hover {
  background: #c84f22;
}

.search-submit-btn i,
.search-submit-icon-btn i {
  font-size: 1rem;
  line-height: 1;
}

.search-form-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  align-items: center;
}

.search-form-actions button,
.search-form-actions .btn-edit {
  padding: 6px 12px;
  font-size: 0.8rem;
}

.search-letter-shell {
  margin-top: 8px;
  padding-top: 12px;
  padding-bottom: 6px;
  border-top: 1px solid #eef2f7;
}

.search-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.search-filter-label {
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.search-letter-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.search-letter-head h3 {
  margin: 6px 0 0;
  font-size: 1.05rem;
}

.search-letter-head p {
  margin: 0;
  color: #6b7280;
  line-height: 1.5;
  max-width: 36ch;
}

.letter-mode-switch {
  margin-top: 0;
  margin-bottom: 0;
  padding: 3px;
  border-radius: 999px;
  background: #eef3f8;
  border: 1px solid #e2e8f0;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.letter-mode-label {
  color: #4b5563;
  font-weight: 600;
  font-size: 0.72rem;
}

.letter-mode-btn,
.letter-btn {
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease, transform 0.05s ease;
  line-height: 1;
}

.letter-mode-btn:hover,
.letter-btn:hover {
  transform: translateY(-1px);
  border-color: #b7c5da;
}

.letter-filter {
  display: flex;
  flex-wrap: nowrap;
  gap: 3px;
  margin-top: 0;
  margin-bottom: 0;
  overflow-x: hidden;
  scrollbar-width: none;
}

.letter-filter:hover,
.letter-filter:focus-within {
  overflow-x: auto;
  scrollbar-width: thin;
}

.letter-filter::-webkit-scrollbar {
  display: none;
}

.letter-filter:hover::-webkit-scrollbar,
.letter-filter:focus-within::-webkit-scrollbar {
  display: block;
  height: 6px;
}

.letter-filter:hover::-webkit-scrollbar-thumb,
.letter-filter:focus-within::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 999px;
}

.letter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  min-height: 30px;
  padding: 0 7px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  font-size: 0.84rem;
  font-weight: 700;
  flex: 0 0 auto;
}

.letter-mode-btn {
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 800;
}

.search-page-shell .letter-mode-btn.active,
.search-page-shell .letter-btn.active {
  background: #d65e2c;
  border-color: #d65e2c;
  color: #ffffff;
}

.search-page-shell .letter-btn.active {
  border-radius: 999px;
}

.search-active-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 38px;
  padding: 0 2px;
  color: #475569;
  font-size: 0.86rem;
  font-weight: 800;
}

.search-reset-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  background: #ffffff;
  color: #334155;
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.search-reset-btn:hover {
  background: #f3f4f6;
}

.search-results-shell {
  margin-top: 16px;
  padding: 22px;
  border-radius: 24px;
  border: 1px solid #e7e5e4;
  background: #fcfcfb;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.search-results-head {
  margin-bottom: 12px;
}

.search-results-count {
  display: inline-block;
  font-size: 0.92rem;
  font-weight: 700;
  color: #334155;
}

.search-song-list {
  gap: 12px;
}

.search-song-card {
  position: relative;
  padding: 0;
  overflow: hidden;
  border-radius: 14px;
  background: #fffaf3;
  border: 1px solid #e4dfd6;
}

.search-song-card:hover {
  background: #ffffff;
  border-color: #e7c3a8;
}

.search-song-card .song-card-link {
  padding: 16px 18px;
  padding-right: 58px;
}

.search-song-favorite {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  width: 36px;
  height: 36px;
  padding: 0;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.search-song-main {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  min-width: 0;
}

.search-song-cover {
  width: 92px;
  height: 92px;
  border-radius: 14px;
  overflow: hidden;
  flex-shrink: 0;
  background: #eef2f7;
}

.search-song-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.search-song-cover-fallback {
  width: 100%;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  font-weight: 700;
  font-size: 1rem;
}

.search-song-cover-fallback i,
.latest-song-cover-fallback i {
  font-size: 1.02rem;
}

.search-song-heading {
  min-width: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 8px;
}

.search-song-title-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.search-song-card .song-card-title {
  font-size: 1.08rem;
  white-space: normal;
}

.search-song-inline-meta {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  color: #536273;
  font-size: 0.92rem;
}

.search-song-author-inline,
.search-song-year-inline {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border: 1px solid #dce3ec;
  border-radius: 999px;
  background: #ffffff;
  color: #475569;
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1;
}

.search-song-year-inline {
  color: #0c2645;
}

.search-song-excerpt {
  margin-top: 0;
  color: #1f2937;
  font-size: 0.95rem;
  font-weight: 500;
  white-space: normal;
  line-height: 1.68;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.search-empty-state {
  padding: 18px;
  border-radius: 18px;
  border: 1px dashed #cfd8e3;
  background: #f7f8fa;
}

.search-empty-state strong {
  display: block;
  margin-bottom: 6px;
  color: #111827;
}

.search-empty-state p {
  margin: 0;
  color: #4b5563;
  line-height: 1.55;
}

.search-page-side {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.search-latest-panel .search-panel-head {
  margin-bottom: 14px;
}

.search-latest-songs {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.search-latest-item {
  margin-bottom: 0;
  padding: 10px 0;
  border-bottom: 1px solid #eef2f7;
}

.search-latest-item:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.search-request-panel {
  background:
    radial-gradient(circle at top right, rgba(191, 219, 254, 0.18), transparent 34%),
    linear-gradient(180deg, #fcfcfb, #f3f6fa);
}

.search-request-panel .btn-ask-song {
  margin-top: 14px;
}

@media (max-width: 980px) {
  .search-page-hero {
    grid-template-columns: 1fr;
  }

  .search-page-hero-stats {
    justify-content: flex-start;
  }

  .search-panel-head,
  .search-letter-head,
  .search-results-head {
    flex-direction: column;
  }
}

@media (max-width: 680px) {
  .search-page-shell {
    padding: 14px;
    border-radius: 16px;
  }

  .search-page-hero-stats {
    display: none;
  }

  .search-input-shell {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .search-page-form input[type="text"] {
    font-size: 1rem;
    padding: 7px 8px;
  }

  .search-submit-btn {
    min-width: 38px;
    padding: 0 7px;
  }

  .search-page-shell {
    gap: 8px;
  }

  .search-page-hero {
    margin-bottom: 0;
  }

  .search-page-title {
    font-size: clamp(1.25rem, 6vw, 1.65rem);
    line-height: 1.14;
  }

  .search-filter-panel {
    padding: 8px;
  }

  .search-letter-shell {
    margin-top: 8px;
    padding-top: 10px;
    padding-bottom: 0;
  }

  .search-filter-bar {
    margin-bottom: 8px;
  }

  .letter-filter {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 5px;
    margin: 0 -8px;
    padding: 0 8px 4px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .letter-btn {
    flex: 0 0 auto;
    min-width: 34px;
    min-height: 32px;
    padding: 0 9px;
    font-size: 0.82rem;
    font-weight: 700;
  }

  .letter-btn-all {
    min-width: 48px;
    font-size: 0.72rem;
    white-space: nowrap;
    letter-spacing: 0;
  }

  .search-active-bar {
    align-items: center;
    gap: 10px;
  }

  .search-reset-btn {
    min-width: 150px;
  }

  .search-results-shell {
    margin-top: 6px;
    padding: 7px;
    border-radius: 11px;
  }

  .search-results-head {
    margin-bottom: 6px;
  }

  .search-results-count {
    font-size: 0.86rem;
  }

  .search-song-list {
    gap: 6px;
  }

  .search-song-card {
    border-radius: 12px;
  }

  .search-song-card .song-card-link {
    padding: 8px;
  }

  .search-song-main {
    gap: 8px;
  }

  .search-song-cover {
    width: 56px;
    height: 56px;
    border-radius: 10px;
  }

  .search-song-cover-fallback {
    font-size: 0.72rem;
    font-weight: 700;
  }

  .search-song-heading {
    gap: 4px;
  }

  .search-song-title-line {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .search-song-card .song-card-title {
    font-size: 0.98rem;
    line-height: 1.2;
  }

  .search-song-inline-meta {
    font-size: 0.82rem;
    gap: 5px;
  }

  .search-song-excerpt {
    font-size: 0.9rem;
    line-height: 1.5;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  .search-form-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .search-form-actions {
    flex-wrap: wrap;
  }

  .search-filter-bar {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .search-filter-panel {
    padding: 8px;
  }

}

@media (max-width: 420px) {
  .search-submit-btn {
    min-width: 36px;
    padding: 0 6px;
  }

  .letter-btn {
    min-width: 32px;
    min-height: 30px;
    font-size: 0.78rem;
  }

  .letter-btn-all {
    font-size: 0.7rem;
  }

  .search-page-panel,
  .search-results-shell {
    padding: 7px;
  }

  .search-song-card .song-card-link {
    padding: 7px;
  }

  .search-song-cover {
    width: 52px;
    height: 52px;
  }

  .search-song-card .song-card-title {
    font-size: 0.95rem;
  }

  .search-song-excerpt {
    font-size: 0.86rem;
  }
}

/* ======================
   THEME SOMBRE
   ====================== */

body[data-theme="light"] {
  background: #f3eadf;
}

body[data-theme="light"].has-site-bg {
  background-image:
    linear-gradient(
      rgba(243, 234, 223, var(--km-site-bg-overlay-opacity, 0.72)),
      rgba(243, 234, 223, var(--km-site-bg-overlay-opacity, 0.72))
    ),
    var(--km-site-bg-image);
}

body[data-theme="dark"] {
  background: #1e1e1e;
  color: #cccccc;
}

body[data-theme="dark"].has-site-bg {
  background-image:
    linear-gradient(
      rgba(30, 30, 30, var(--km-site-bg-overlay-opacity, 0.8)),
      rgba(30, 30, 30, var(--km-site-bg-overlay-opacity, 0.8))
    ),
    var(--km-site-bg-image);
}

body[data-theme="dark"] a {
  color: #75beff;
}

body[data-theme="dark"] .site-footer {
  background: #252526;
  border-color: #3c3c3c;
}

body[data-theme="dark"] .site-logo a,
body[data-theme="dark"] .nav-main-link,
body[data-theme="dark"] .nav-pill,
body[data-theme="dark"] .header-user-label,
body[data-theme="dark"] .header-user-hint,
body[data-theme="dark"] .header-brand-note,
body[data-theme="dark"] .page-col-right h3 {
  color: #cccccc;
}

body[data-theme="dark"] .site-logo-inline-light,
body[data-theme="dark"] .home-logo-top-light,
body[data-theme="dark"] .footer-logo-light {
  display: none;
}

body[data-theme="dark"] .site-logo-inline-dark,
body[data-theme="dark"] .home-logo-top-dark,
body[data-theme="dark"] .footer-logo-dark {
  display: block;
}

body[data-theme="dark"] .nav-main-link:hover {
  background: rgba(225, 120, 75, 0.16);
  color: #ffffff;
}

body[data-theme="dark"] .header-nav-main {
  background: #2d2d30;
  box-shadow: inset 0 0 0 1px #3c3c3c;
}

body[data-theme="dark"] .header-nav-main .nav-main-link {
  color: #d1d5db;
}

body[data-theme="dark"] .nav-main-link.is-active {
  background: #e1784b;
  color: #ffffff;
  box-shadow: none;
}

body[data-theme="dark"] .nav-main-link.is-active i {
  color: #ffffff;
}

body[data-theme="dark"] .nav-main-cta {
  background: #d65e2c;
  color: #ffffff;
}

body[data-theme="dark"] .nav-main-cta:hover {
  background: #e1784b;
  color: #ffffff;
}

body[data-theme="dark"] .nav-main-cta.is-active {
  background: #e1784b;
  color: #ffffff;
}

body[data-theme="dark"] .nav-main-submenu {
  background: #252526;
  border-color: #3c3c3c;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32);
}

body[data-theme="dark"] .nav-main-submenu-link {
  color: #d1d5db;
}

body[data-theme="dark"] .nav-main-submenu-link i {
  color: #ffb088;
}

body[data-theme="dark"] .nav-main-submenu-link:hover,
body[data-theme="dark"] .nav-main-submenu-link.is-active {
  background: #2d2d30;
  color: #ffffff;
}

body[data-theme="dark"] .btn-style-terre {
  background: linear-gradient(135deg, #e1784b 0%, #d4592a 100%);
  border-color: #e1784b;
  color: #ffffff;
}

body[data-theme="dark"] .btn-style-terre:hover {
  background: linear-gradient(135deg, #ef8a5f 0%, #de6840 100%);
}

body[data-theme="dark"] .btn-style-ivoire {
  background: #2d2d30;
  color: #f3d9bc;
  border-color: #4a3a2f;
}

body[data-theme="dark"] .btn-style-ivoire:hover {
  background: #343438;
  color: #f6e2cc;
}

body[data-theme="dark"] .btn-style-outline {
  background: transparent;
  color: #f3d9bc;
  border-color: #f3d9bc;
}

body[data-theme="dark"] .btn-style-outline:hover {
  background: #f3d9bc;
  color: #1e1e1e;
}

body[data-theme="dark"] .btn-style-soft {
  background: #3a302a;
  color: #ffd7b3;
  border-color: #58443a;
}

body[data-theme="dark"] .btn-style-soft:hover {
  background: #473730;
  color: #ffe3c9;
}

body[data-theme="dark"] .nav-pill,
body[data-theme="dark"] .theme-toggle,
body[data-theme="dark"] .header-nav-toggle,
body[data-theme="dark"] .header-nav-close,
body[data-theme="dark"] .header-icon-btn,
body[data-theme="dark"] .btn-edit,
body[data-theme="dark"] .letter-btn,
body[data-theme="dark"] .letter-mode-btn {
  background: #2d2d30;
  border-color: #3c3c3c;
  color: #cccccc;
}

body[data-theme="dark"] .theme-toggle:hover,
body[data-theme="dark"] .header-nav-toggle:hover,
body[data-theme="dark"] .header-nav-close:hover,
body[data-theme="dark"] .header-icon-btn:hover,
body[data-theme="dark"] .btn-edit:hover,
body[data-theme="dark"] .letter-btn:hover,
body[data-theme="dark"] .letter-mode-btn:hover,
body[data-theme="dark"] .nav-pill:hover {
  background: #37373d;
}

body[data-theme="dark"] .theme-toggle-track {
  background: #1f2937;
}

body[data-theme="dark"] .theme-toggle-thumb {
  background: #d1d5db;
}

body[data-theme="dark"] .theme-toggle-icon {
  color: #7f8ea3;
}

body[data-theme="dark"] .user-menu-trigger {
  background: #2d2d30;
  border-color: #3c3c3c;
  color: #cccccc;
}

body[data-theme="dark"] .user-menu-trigger:hover {
  background: #37373d;
}

body[data-theme="dark"] .user-menu-notification {
  border-color: #1e1e1e;
  background: #22c55e;
  color: #052e16;
}

body[data-theme="dark"] .user-menu.is-open .user-menu-trigger {
  background: #37373d;
  border-color: #4b5563;
  color: #ffffff;
}

body[data-theme="dark"] .user-menu-panel {
  background: #252526;
  border-color: #3c3c3c;
  box-shadow: none;
}

body[data-theme="dark"] .user-menu-link {
  color: #d1d5db;
}

body[data-theme="dark"] .user-menu-link:hover {
  background: #37373d;
}

body[data-theme="dark"] .user-menu-link.is-active {
  background: #30333a;
  color: #ffffff;
}

body[data-theme="dark"] .user-menu-link-danger {
  color: #fca5a5;
}

body[data-theme="dark"] .user-menu-separator::before,
body[data-theme="dark"] .user-menu-separator::after {
  background: #3f3f46;
}

body[data-theme="dark"] .user-menu-separator span {
  color: #71717a;
}

body[data-theme="dark"] .nav-pill.is-active {
  background: #37373d;
  border-color: #4b5563;
  color: #ffffff;
}

body[data-theme="dark"] .header-bottom,
body[data-theme="dark"] .header-bottom-guest {
  border-color: #3c3c3c;
}

@media (max-width: 900px) {
  body[data-theme="dark"] .header-shell.has-mobile-nav .header-nav-main {
    background: #252526;
    box-shadow: -12px 0 30px rgba(0, 0, 0, 0.45);
  }

  body[data-theme="dark"] .header-shell.has-mobile-nav .header-nav-main-head {
    border-color: #3c3c3c;
  }

  body[data-theme="dark"] .header-shell.has-mobile-nav .header-nav-theme-row {
    border-color: #3c3c3c;
  }

  body[data-theme="dark"] .header-shell.has-mobile-nav .header-nav-theme-label {
    color: #b7bdc5;
  }

  body[data-theme="dark"] .header-shell.has-mobile-nav .nav-main-link {
    background: #2d2d30;
    border-color: #3c3c3c;
    color: #d5dbe3;
  }

  body[data-theme="dark"] .header-shell.has-mobile-nav .nav-main-link i {
    color: #e1784b;
  }

  body[data-theme="dark"] .header-shell.has-mobile-nav .nav-main-link:hover {
    background: #37373d;
    border-color: #4b5563;
    color: #ffffff;
  }

  body[data-theme="dark"] .header-shell.has-mobile-nav .nav-main-link.is-active {
    background: #3a4454;
    border-color: #5b6d86;
    color: #ffffff;
  }

  body[data-theme="dark"] .header-shell.has-mobile-nav .nav-main-link.is-active i {
    color: #ffffff;
  }

  body[data-theme="dark"] .header-shell.has-mobile-nav .nav-main-cta,
  body[data-theme="dark"] .header-shell.has-mobile-nav .nav-main-cta.is-active {
    background: #e1784b;
    border-color: #e1784b;
    color: #ffffff;
  }

  body[data-theme="dark"] .header-shell.has-mobile-nav .nav-main-cta i,
  body[data-theme="dark"] .header-shell.has-mobile-nav .nav-main-cta.is-active i {
    color: #ffffff;
  }

  body[data-theme="dark"] .header-shell.has-mobile-nav .nav-main-cta:hover {
    background: #d65e2c;
    border-color: #d65e2c;
    color: #ffffff;
  }

  body[data-theme="dark"] .header-shell.has-mobile-nav .nav-main-submenu-link {
    background: #252526;
    border-color: #3c3c3c;
    color: #d1d5db;
  }

  body[data-theme="dark"] .header-shell.has-mobile-nav .nav-main-submenu-link:hover,
  body[data-theme="dark"] .header-shell.has-mobile-nav .nav-main-submenu-link.is-active {
    background: #2d2d30;
    color: #ffffff;
  }

  body[data-theme="dark"] .header-nav-user-section {
    border-color: #3c3c3c;
  }

  body[data-theme="dark"] .header-nav-user-id {
    color: #8b97a6;
  }

  body[data-theme="dark"] .header-shell.has-mobile-nav .nav-main-link-danger {
    color: #f87171;
  }

  body[data-theme="dark"] .header-shell.has-mobile-nav .nav-main-link-danger i {
    color: #f87171;
  }
}

body[data-theme="dark"] .nav-pill-green {
  background: #0e639c;
  border-color: #0e639c;
  color: #ffffff;
}

body[data-theme="dark"] .nav-pill-danger {
  background: #7f1d1d;
  border-color: #7f1d1d;
  color: #fecaca;
}

body[data-theme="dark"] .nav-pill-admin {
  background: #4c3d91;
  border-color: #4c3d91;
  color: #e9ddff;
}

body[data-theme="dark"] .search-page-title {
  color: #ffffff;
}

body[data-theme="dark"] .search-page-shell {
  background: #1f1f22;
}

body[data-theme="dark"] .search-page-hero {
  border-radius: 16px;
  background:
    radial-gradient(circle at top right, rgba(225, 120, 75, 0.1), transparent 34%),
    linear-gradient(180deg, #252526, #2d2d30);
  border: 1px solid #3c3c3c;
  padding: 16px;
}

body[data-theme="dark"] .search-page-kicker {
  color: #ffb088;
}

body[data-theme="dark"] .search-page-lead {
  color: #b9c7da;
}

body[data-theme="dark"] .search-page-hero-stats span {
  background: #1f2937;
  border-color: #374151;
  color: #b9c7da;
}

body[data-theme="dark"] .search-page-hero-stats strong {
  color: #ffffff;
}

body[data-theme="dark"] .favorites-sort-form select {
  background-color: #1f2937;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239ca3af'/%3E%3C/svg%3E");
  border-color: #374151;
  color: #d1d5db;
}

body[data-theme="dark"] .favorites-sort-form select:hover,
body[data-theme="dark"] .favorites-sort-form select:focus {
  border-color: #6b7280;
}

body[data-theme="dark"] .dico-search-bar {
  background: #1e1e1e;
  border-color: #3c3c3c;
}

body[data-theme="dark"] .dico-search-bar:focus-within {
  border-color: #5b8db8;
  box-shadow: 0 0 0 3px rgba(91, 141, 184, 0.12);
}

body[data-theme="dark"] .dico-search-bar input[type="text"] {
  color: #d4d4d4;
}

body[data-theme="dark"] .dico-search-icon {
  color: #6b7280;
}

body[data-theme="dark"] .dico-reset-btn {
  color: #6b7280;
}

body[data-theme="dark"] .dico-reset-btn:hover {
  background: #2d2d30;
  color: #d4d4d4;
}

body[data-theme="dark"] .dico-list {
  border-top-color: #3c3c3c;
}

body[data-theme="dark"] .dico-letter-sep {
  background: #1e1e1e;
  color: #4b5563;
  border-color: #3c3c3c;
}

body[data-theme="dark"] .dico-entry {
  border-bottom-color: #2d2d30;
}

body[data-theme="dark"] .dico-card:hover {
  background: #2a1a0e;
  border-left-color: #e1784b;
}

body[data-theme="dark"] .dico-word {
  color: #e2e8f0;
}

body[data-theme="dark"] .dico-excerpt {
  color: #9ca3af;
}

body[data-theme="dark"] .dico-def-count {
  background: #252526;
  border-color: #3c3c3c;
  color: #6b7280;
}

body[data-theme="dark"] .dico-card:hover .dico-def-count {
  background: #3a1a0a;
  border-color: #7c3f1a;
  color: #e1784b;
}

body[data-theme="dark"] .dico-card:hover .dico-card-arrow {
  color: #e1784b;
}

body[data-theme="dark"] .dico-origin-tag {
  color: #4b5563;
}

body[data-theme="dark"] .dico-breadcrumb a {
  color: #8b97a6;
}

body[data-theme="dark"] .dico-breadcrumb a:hover {
  color: #d4d4d4;
}

body[data-theme="dark"] .dico-detail-panel {
  background: #252526;
  border-color: #3c3c3c;
}

body[data-theme="dark"] .dico-detail-word {
  color: #e2e8f0;
}

body[data-theme="dark"] .dico-section-title {
  color: #9ca3af;
}

body[data-theme="dark"] .dico-def-text {
  color: #d4d4d4;
}

body[data-theme="dark"] .dico-def-item::before {
  background: #3a4454;
}

body[data-theme="dark"] .dico-example {
  background: #1e1e1e;
  border-color: #3c3c3c;
  color: #9ca3af;
}

body[data-theme="dark"] .dico-equiv-badge {
  background: #14291e;
  border-color: #166534;
  color: #4ade80;
}

body[data-theme="dark"] .dico-expr-list li {
  background: #1e1e1e;
  color: #d4d4d4;
  border-color: #e1784b;
}

body[data-theme="dark"] .dico-aside-text {
  color: #9ca3af;
}

body[data-theme="dark"] .search-page-panel,
body[data-theme="dark"] .search-results-shell,
body[data-theme="dark"] .search-page-side-card,
body[data-theme="dark"] .search-song-card,
body[data-theme="dark"] .search-empty-state,
body[data-theme="dark"] .letter-mode-switch,
body[data-theme="dark"] .search-form,
body[data-theme="dark"] .song-card,
body[data-theme="dark"] .comment,
body[data-theme="dark"] .lyrics-html,
body[data-theme="dark"] .explanation-html,
body[data-theme="dark"] .author-info,
body[data-theme="dark"] .song-comments-panel,
body[data-theme="dark"] .song-form,
body[data-theme="dark"] .contrib-progress-card,
body[data-theme="dark"] .contrib-mobile-progress,
body[data-theme="dark"] .contrib-side-card,
body[data-theme="dark"] .dash-stat {
  background: #252526;
  border-color: #3c3c3c;
  color: #cccccc;
  box-shadow: none;
}

body[data-theme="dark"] .contrib-hero-main {
  background:
    radial-gradient(circle at top right, rgba(217, 85, 40, 0.16), transparent 42%),
    linear-gradient(135deg, #1f1f22, #252526 68%, #2d2d30);
  border-color: #3c3c3c;
  color: #f3f4f6;
}

body[data-theme="dark"] .contrib-progress-text,
body[data-theme="dark"] .contrib-hero-text,
body[data-theme="dark"] .contrib-mobile-progress,
body[data-theme="dark"] .contrib-side-card p,
body[data-theme="dark"] .contrib-checklist li,
body[data-theme="dark"] .contrib-lyrics-helper,
body[data-theme="dark"] .contrib-lyrics-meta {
  color: #9da1a6;
}

body[data-theme="dark"] .contrib-kicker,
body[data-theme="dark"] .contrib-chip {
  background: #2d2d30;
  border-color: #3c3c3c;
  color: #d1d5db;
}

body[data-theme="dark"] .contrib-chip.is-done {
  background: rgba(34, 197, 94, 0.14);
  border-color: rgba(34, 197, 94, 0.34);
  color: #86efac;
}

body[data-theme="dark"] .contrib-mobile-progress strong {
  color: #f3f4f6;
}

body[data-theme="dark"] .contrib-lyrics-section {
  border-color: #3c3c3c;
  background:
    radial-gradient(circle at top right, rgba(55, 148, 255, 0.12), transparent 42%),
    linear-gradient(180deg, #252526, #2d2d30);
}

body[data-theme="dark"] .contrib-lyrics-workbench .tox-tinymce {
  border-color: #3c3c3c !important;
}

body[data-theme="dark"] .contrib-lyrics-workbench .tox .tox-toolbar__group .tox-tbtn[data-mce-name^="lyric"] {
  background: #2d2d30;
  border-color: #3c3c3c;
  color: #d1d5db;
}

body[data-theme="dark"] .contrib-lyrics-workbench .tox .tox-toolbar__group .tox-tbtn[data-mce-name^="lyric"]:hover {
  background: #37373d;
  border-color: #4b5563;
}

body[data-theme="dark"] .contrib-lyrics-workbench .tox .tox-toolbar__group .tox-tbtn[data-mce-name="lyricChoeur"] {
  background: rgba(14, 165, 233, 0.18);
  border-color: rgba(125, 211, 252, 0.42);
  color: #bae6fd;
  box-shadow: inset 0 0 0 1px rgba(125, 211, 252, 0.14);
}

body[data-theme="dark"] .contrib-lyrics-workbench .tox .tox-toolbar__group .tox-tbtn[data-mce-name="lyricChoeur"]:hover,
body[data-theme="dark"] .contrib-lyrics-workbench .tox .tox-toolbar__group .tox-tbtn[data-mce-name="lyricChoeur"].tox-tbtn--enabled,
body[data-theme="dark"] .contrib-lyrics-workbench .tox .tox-toolbar__group .tox-tbtn[data-mce-name="lyricChoeur"][aria-pressed="true"],
body[data-theme="dark"] .contrib-lyrics-workbench .tox .tox-toolbar__group .tox-tbtn[data-mce-name="lyricChoeur"].tox-tbtn--select,
body[data-theme="dark"] .contrib-lyrics-workbench .tox .tox-toolbar__group .tox-tbtn[data-mce-name="lyricChoeur"].is-choeur-active {
  background: #0ea5e9;
  border-color: #7dd3fc;
  color: #ffffff;
  box-shadow: 0 0 0 3px rgba(125, 211, 252, 0.2);
}

body[data-theme="dark"] .contrib-lyrics-workbench .tox .tox-toolbar__group .tox-tbtn[data-mce-name="lyricChoeur"].tox-tbtn--enabled svg,
body[data-theme="dark"] .contrib-lyrics-workbench .tox .tox-toolbar__group .tox-tbtn[data-mce-name="lyricChoeur"][aria-pressed="true"] svg,
body[data-theme="dark"] .contrib-lyrics-workbench .tox .tox-toolbar__group .tox-tbtn[data-mce-name="lyricChoeur"].tox-tbtn--select svg,
body[data-theme="dark"] .contrib-lyrics-workbench .tox .tox-toolbar__group .tox-tbtn[data-mce-name="lyricChoeur"].is-choeur-active svg {
  fill: #ffffff;
}

body[data-theme="dark"] .contrib-lyrics-meta strong {
  color: #f3f4f6;
}

body[data-theme="dark"] .contrib-lyrics-meta [data-lyrics-status].is-empty {
  color: #fdba74;
}

body[data-theme="dark"] .contrib-lyrics-meta [data-lyrics-status].is-partial {
  color: #93c5fd;
}

body[data-theme="dark"] .contrib-lyrics-meta [data-lyrics-status].is-complete {
  color: #86efac;
}

body[data-theme="dark"] .contrib-checklist li.is-done {
  color: #86efac;
}

body[data-theme="dark"] .dash-shell {
  background: #1f1f22;
}

body[data-theme="dark"] .dash-hero,
body[data-theme="dark"] .dash-section {
  background: #252526;
  border-color: #3c3c3c;
  box-shadow: none;
}

body[data-theme="dark"] .dash-hero-kicker,
body[data-theme="dark"] .dash-section-count {
  background: #1f2937;
  border-color: #374151;
  color: #9cdcfe;
}

body[data-theme="dark"] .dash-hero-main h2,
body[data-theme="dark"] .dash-section h3,
body[data-theme="dark"] .dash-focus-card h4,
body[data-theme="dark"] .dash-content-group h4,
body[data-theme="dark"] .dash-revision-grid h4,
body[data-theme="dark"] .dash-revision-card strong,
body[data-theme="dark"] .dash-mini-link strong,
body[data-theme="dark"] .dash-request-card strong,
body[data-theme="dark"] .dash-item-card strong,
body[data-theme="dark"] .dash-stat-value {
  color: #ffffff;
}

body[data-theme="dark"] .dash-hero-text,
body[data-theme="dark"] .dash-section-note,
body[data-theme="dark"] .dash-focus-card p,
body[data-theme="dark"] .dash-item-card span,
body[data-theme="dark"] .dash-revision-card small,
body[data-theme="dark"] .dash-request-card span,
body[data-theme="dark"] .dash-request-card small,
body[data-theme="dark"] .dash-request-card p,
body[data-theme="dark"] .dash-mini-link span,
body[data-theme="dark"] .dash-table-sub {
  color: #9da1a6;
}

body[data-theme="dark"] .dash-empty {
  background: #1f2937;
  border-color: #3c3c3c;
}

body[data-theme="dark"] .dash-focus-card,
body[data-theme="dark"] .dash-item-card,
body[data-theme="dark"] .dash-revision-card,
body[data-theme="dark"] .dash-request-card,
body[data-theme="dark"] .dash-mini-link {
  background: #2d2d30;
  border-color: #3c3c3c;
}

body[data-theme="dark"] .dash-focus-card.is-urgent {
  background: rgba(221, 84, 40, 0.12);
  border-color: rgba(221, 84, 40, 0.38);
}

body[data-theme="dark"] .dash-mini-link:hover {
  border-color: #5b6472;
}

body[data-theme="dark"] .dash-table th,
body[data-theme="dark"] .dash-table td {
  border-color: #3c3c3c;
}

body[data-theme="dark"] .dash-table tbody tr:hover {
  background: #2d2d30;
}

body[data-theme="dark"] .search-song-card:hover {
  background: linear-gradient(180deg, #2a2d2e, #30363d);
  border-color: #4b5563;
}

body[data-theme="dark"] .song-detail-hero {
  border-color: #3a2e22;
  background: transparent;
}

body[data-theme="dark"] .song-detail-kicker {
  color: #c8895a;
}

body[data-theme="dark"] .song-meta-label {
  color: #9a8070;
}

body[data-theme="dark"] .song-meta-item {
  background: #2a2118;
  border-color: #3d2f1f;
}

body[data-theme="dark"] .song-meta-item strong,
body[data-theme="dark"] .song-meta-item span:last-child {
  color: #e5ddd5;
}

body[data-theme="dark"] .song-header-actions .btn-link {
  color: #e4a36a;
}

body[data-theme="dark"] .song-header-actions .btn-link:hover {
  color: #f0bc8a;
  text-decoration: none;
}

body[data-theme="dark"] .song-header-actions .btn-meta {
  background: #2a2118;
  border-color: #3d2f1f;
  color: #d4c8ba;
}

body[data-theme="dark"] .song-header-actions .btn-meta:hover {
  background: #332a1e;
  border-color: #4d3a28;
  color: #e5ddd5;
}

body[data-theme="dark"] .song-lyrics-contributors {
  border-top-color: #3a2e22;
}

body[data-theme="dark"] .song-hero-quick-meta {
  color: #b8a898;
}

body[data-theme="dark"] .song-hero-quick-item strong {
  color: #e8ddd4;
}

body[data-theme="dark"] .song-detail-title-author {
  color: #b8a898;
}

body[data-theme="dark"] .song-hero-quick-link {
  color: #e4a36a;
}

body[data-theme="dark"] .song-hero-quick-link:hover {
  color: #f5c490;
  text-decoration: underline;
}

body[data-theme="dark"] .song-video-panel,
body[data-theme="dark"] .song-video-compact {
  background: linear-gradient(180deg, #252526, #2d2d30);
  border-color: #3c3c3c;
}

body[data-theme="dark"] .song-video-compact-text {
  color: #a9b3c1;
}

body[data-theme="dark"] .song-video-embed {
  border-color: #3c3c3c;
}

body[data-theme="dark"] .song-cover-fallback {
  background: linear-gradient(135deg, #1f2937, #334155);
  border-color: #3c3c3c;
  color: #d1d5db;
}

body[data-theme="dark"] .search-song-cover,
body[data-theme="dark"] .latest-song-cover {
  background: #1f2937;
}

body[data-theme="dark"] .search-song-cover-fallback,
body[data-theme="dark"] .latest-song-cover-fallback {
  color: #9fb2c8;
}

body[data-theme="dark"] .search-panel-kicker,
body[data-theme="dark"] .search-results-kicker,
body[data-theme="dark"] .contrib-portal-card-index {
  background: #2d2d30;
  color: #9cdcfe;
}

body[data-theme="dark"] .contrib-portal-hero-btn {
  background: rgba(45, 45, 48, 0.82);
  border-color: #4b5563;
  color: #f3f4f6;
}

body[data-theme="dark"] .contrib-portal-hero-btn:hover {
  background: rgba(55, 55, 61, 0.92);
  border-color: #6b7280;
}

body[data-theme="dark"] .contrib-portal-card,
body[data-theme="dark"] .contrib-portal-panel,
body[data-theme="dark"] .contrib-portal-steps,
body[data-theme="dark"] .contrib-portal-big-link,
body[data-theme="dark"] .contrib-portal-side-card {
  background: #252526;
  border-color: transparent;
  color: #d1d5db;
  box-shadow: none;
}

body[data-theme="dark"] .contrib-portal-notice {
  background:
    radial-gradient(circle at top right, rgba(225, 120, 75, 0.14), transparent 32%),
    #252526;
  border-color: rgba(225, 120, 75, 0.32);
  box-shadow: none;
}

body[data-theme="dark"] .contrib-portal-hero-main {
  background:
    radial-gradient(circle at top right, rgba(225, 120, 75, 0.14), transparent 34%),
    linear-gradient(180deg, #252526, #2d2d30);
  border-color: #3c3c3c;
  box-shadow: none;
}

body[data-theme="dark"] .contrib-portal-dashboard-main {
  background: #1f1f22;
  border-color: #2e2e33;
}

body[data-theme="dark"] .contrib-portal-dashboard-title h2 {
  color: #ffffff;
}

body[data-theme="dark"] .contrib-portal-tabs {
  background: #252526;
}

body[data-theme="dark"] .contrib-portal-primary-actions.is-compact-actions .contrib-portal-action-btn {
  background: #2d2d30;
  border-color: transparent;
  color: #d1d5db;
  box-shadow: none;
}

body[data-theme="dark"] .contrib-portal-primary-actions.is-compact-actions .contrib-portal-action-btn:hover {
  background: #37373d;
  border-color: transparent;
}

body[data-theme="dark"] .contrib-portal-primary-actions.is-compact-actions .contrib-portal-action-btn h3 {
  color: #e5e7eb;
}

body[data-theme="dark"] .contrib-portal-primary-actions.is-compact-actions .contrib-portal-card-index,
body[data-theme="dark"] .contrib-portal-primary-actions.is-compact-actions .contrib-portal-card-index i {
  color: #9fb2c8;
}

body[data-theme="dark"] .contrib-portal-hero-main h2,
body[data-theme="dark"] .contrib-portal-notice h3,
body[data-theme="dark"] .contrib-portal-side-card strong {
  color: #ffffff;
}

body[data-theme="dark"] .contrib-portal-lead,
body[data-theme="dark"] .contrib-portal-notice p,
body[data-theme="dark"] .contrib-portal-side-card p {
  color: #b9c7da;
}

body[data-theme="dark"] .contrib-portal-notice-kicker {
  color: #ffb088;
}

body[data-theme="dark"] .contrib-portal-tag {
  background: #2d2d30;
  border-color: #3c3c3c;
  color: #d1d5db;
}

body[data-theme="dark"] .contrib-portal-quick-link {
  background: #252526;
  border-color: #3c3c3c;
  color: #d1d5db;
}

body[data-theme="dark"] .contrib-portal-quick-link:hover {
  background: #2d2d30;
  border-color: #4b5563;
  color: #ffffff;
}

body[data-theme="dark"] .contrib-portal-quick-link i,
body[data-theme="dark"] .contrib-portal-discovery-links a {
  color: #ffb088;
}

body[data-theme="dark"] .contrib-portal-quick-link.is-alert {
  background: rgba(225, 120, 75, 0.12);
  border-color: rgba(225, 120, 75, 0.32);
  color: #ffcfb8;
}

body[data-theme="dark"] .contrib-portal-tab-list {
  background: #1f1f22;
  border-color: transparent;
}

body[data-theme="dark"] .contrib-portal-tab {
  color: #b9c7da;
}

body[data-theme="dark"] .contrib-portal-tab.has-notice {
  background: #2d2d30;
  color: #ffffff;
}

body[data-theme="dark"] .contrib-portal-tab-badge {
  background: #9fb2c8;
  color: #111827;
}

body[data-theme="dark"] .contrib-portal-tab:hover {
  background: #2d2d30;
  color: #ffffff;
}

body[data-theme="dark"] .contrib-portal-tab.is-active {
  background: #e1784b;
  color: #ffffff;
}

body[data-theme="dark"] .contrib-portal-tab.is-active .contrib-portal-tab-badge {
  background: #fff7ee;
  color: #b45309;
}

body[data-theme="dark"] .contrib-portal-tab-link {
  background: #1f1f22;
  border-color: #3c3c3c;
  color: #d1d5db;
}

body[data-theme="dark"] .contrib-portal-tab-link i {
  color: #ffb088;
}

body[data-theme="dark"] .contrib-portal-tab-link:hover {
  background: #2d2d30;
  border-color: #4b5563;
  color: #ffffff;
}

body[data-theme="dark"] .contrib-dashboard-stat,
body[data-theme="dark"] .contrib-dashboard-row {
  background: #1f1f22;
  border-color: transparent;
}

body[data-theme="dark"] .contrib-dashboard-section {
  background: #252526;
}

body[data-theme="dark"] .contrib-dashboard-stat span,
body[data-theme="dark"] .contrib-dashboard-row small,
body[data-theme="dark"] .contrib-dashboard-empty {
  color: #9da1a6;
}

body[data-theme="dark"] .contrib-dashboard-stat strong,
body[data-theme="dark"] .contrib-dashboard-section h4,
body[data-theme="dark"] .contrib-dashboard-row strong {
  color: #ffffff;
}

body[data-theme="dark"] .contrib-dashboard-row:hover {
  background: #2d2d30;
  border-color: transparent;
}

body[data-theme="dark"] .contrib-dashboard-row em {
  color: #bbf7d0;
}

body[data-theme="dark"] a.contrib-dashboard-row-body:hover strong {
  color: #f0a060;
}

body[data-theme="dark"] .contrib-row-edit {
  color: #6a5840;
}

body[data-theme="dark"] .contrib-row-edit:hover {
  background: rgba(217, 85, 40, 0.16);
  color: #e07040;
}

body[data-theme="dark"] .contrib-dashboard-more {
  background: #2d2d30;
  color: #d1d5db;
}

body[data-theme="dark"] .contrib-dashboard-more:hover {
  background: #37373d;
  color: #ffffff;
}

body[data-theme="dark"] .contrib-dashboard-empty {
  border-color: #4b5563;
}

body[data-theme="dark"] .contrib-notification-card,
body[data-theme="dark"] .contrib-global-action {
  background: #1f1f22;
}

body[data-theme="dark"] .contrib-notification-card:hover,
body[data-theme="dark"] .contrib-global-action:hover {
  background: #2d2d30;
}

body[data-theme="dark"] .contrib-notification-card i,
body[data-theme="dark"] .contrib-global-action i {
  background: rgba(159, 178, 200, 0.14);
  color: #9fb2c8;
}

body[data-theme="dark"] .contrib-notification-card.is-important i {
  background: rgba(225, 120, 75, 0.16);
  color: #ffb088;
}

body[data-theme="dark"] .contrib-notification-card strong,
body[data-theme="dark"] .contrib-global-action span {
  color: #e5e7eb;
}

body[data-theme="dark"] .contrib-notification-card small {
  color: #9da1a6;
}

body[data-theme="dark"] .contrib-portal-contributor-list li {
  background: #252526;
}

body[data-theme="dark"] .contrib-portal-contributor-title {
  color: #e5e7eb;
}

body[data-theme="dark"] .contrib-portal-contributor-title:hover {
  color: #ffb088;
}

body[data-theme="dark"] .contrib-portal-contributor-name {
  color: #6b7280;
}

body[data-theme="dark"] .contrib-portal-contributor-kind {
  background: #312e81;
  color: #c7d2fe;
}

body[data-theme="dark"] .contrib-portal-contributor-kind.is-paroles {
  background: rgba(225, 120, 75, 0.16);
  color: #ffcfb8;
}

body[data-theme="dark"] .contrib-portal-contributor-kind.is-lexique {
  background: rgba(22, 101, 52, 0.28);
  color: #bbf7d0;
}

body[data-theme="dark"] .contrib-portal-contributor-kind.is-correction {
  background: rgba(29, 78, 216, 0.24);
  color: #bfdbfe;
}

body[data-theme="dark"] .contrib-portal-empty-small {
  color: #9da1a6;
}

body[data-theme="dark"] .contrib-portal-card p,
body[data-theme="dark"] .contrib-portal-section-head p,
body[data-theme="dark"] .contrib-portal-big-link span {
  color: #9da1a6;
}

body[data-theme="dark"] .contrib-portal-big-link-icon {
  background: #1f2937;
  border-color: #374151;
  color: #9cdcfe;
}

body[data-theme="dark"] .contrib-portal-big-link-cta {
  color: #9cdcfe !important;
}

body[data-theme="dark"] .contrib-portal-card h3,
body[data-theme="dark"] .contrib-portal-section-head h3,
body[data-theme="dark"] .contrib-portal-big-link strong {
  color: #ffffff;
}

body[data-theme="dark"] .home-hero-panel {
  background: #252526;
  border-color: #3c3c3c;
  color: #d1d5db;
}

body[data-theme="dark"] .home-hero-panel h2 {
  color: #ffffff;
}

body[data-theme="dark"] .home-btn {
  background: #2d2d30;
  border-color: #3c3c3c;
  color: #d1d5db;
  box-shadow: none;
}

body[data-theme="dark"] .home-btn:hover {
  background: #37373d;
}

body[data-theme="dark"] .home-btn-primary {
  background: #0e639c;
  border-color: #0e639c;
  color: #ffffff;
}

body[data-theme="dark"] .home-btn-primary:hover {
  background: #1177bb;
}

body[data-theme="dark"] .contrib-portal-action-label {
  color: #ffffff;
}

body[data-theme="dark"] .search-page-form input[type="text"],
body[data-theme="dark"] input[type="text"],
body[data-theme="dark"] input[type="number"],
body[data-theme="dark"] input[type="email"],
body[data-theme="dark"] input[type="password"],
body[data-theme="dark"] input[type="url"],
body[data-theme="dark"] input[type="time"],
body[data-theme="dark"] textarea,
body[data-theme="dark"] select {
  background: #1e1e1e;
  border: 1px solid #3c3c3c;
  color: #cccccc;
}

body[data-theme="dark"] .password-toggle-btn {
  color: #9da1a6;
}

body[data-theme="dark"] .password-toggle-btn:hover {
  background: transparent;
  color: #ffffff;
}

body[data-theme="dark"] .search-input-shell {
  background: #1e1e1e;
  border: 1px solid #3c3c3c;
}

body[data-theme="dark"] .search-page-form input[type="text"] {
  border: none;
  background: transparent;
}

body[data-theme="dark"] .search-page-form input[type="text"]:focus,
body[data-theme="dark"] input[type="text"]:focus,
body[data-theme="dark"] input[type="url"]:focus,
body[data-theme="dark"] input[type="time"]:focus,
body[data-theme="dark"] textarea:focus,
body[data-theme="dark"] select:focus {
  outline: 0;
  border-color: #3794ff;
  box-shadow: 0 0 0 4px rgba(55, 148, 255, 0.16);
}

body[data-theme="dark"] .search-input-shell:focus-within {
  border-color: #3794ff;
  box-shadow: 0 0 0 4px rgba(55, 148, 255, 0.16);
}

body[data-theme="dark"] .search-submit-btn {
  background: #d65e2c;
  color: #ffffff;
}

body[data-theme="dark"] .search-submit-btn:hover {
  background: #c84f22;
}

body[data-theme="dark"] label,
body[data-theme="dark"] .search-compact-label,
body[data-theme="dark"] .letter-mode-label,
body[data-theme="dark"] .dash-stat-label,
body[data-theme="dark"] .latest-song-meta,
body[data-theme="dark"] .search-results-caption,
body[data-theme="dark"] .search-request-panel p,
body[data-theme="dark"] .search-empty-state p,
body[data-theme="dark"] .song-card-excerpt,
body[data-theme="dark"] .comment-meta,
body[data-theme="dark"] .meta,
body[data-theme="dark"] .dash-empty {
  color: #9da1a6;
}

body[data-theme="dark"] .song-card-title,
body[data-theme="dark"] .search-song-card .song-card-title,
body[data-theme="dark"] .latest-song-title a,
body[data-theme="dark"] .search-panel-head h3,
body[data-theme="dark"] .search-results-head h3,
body[data-theme="dark"] .search-request-panel h3,
body[data-theme="dark"] .search-propose-panel h3,
body[data-theme="dark"] .song-detail h2,
body[data-theme="dark"] .song-detail h3,
body[data-theme="dark"] .author-info h3 {
  color: #ffffff;
}

body[data-theme="dark"] .search-results-count,
body[data-theme="dark"] .search-song-inline-meta {
  color: #9da1a6;
}

body[data-theme="dark"] .search-song-excerpt {
  color: #d5dbe3;
}

body[data-theme="dark"] .search-page-shell .letter-mode-btn.active,
body[data-theme="dark"] .search-page-shell .letter-btn.active,
body[data-theme="dark"] .letter-mode-btn.active,
body[data-theme="dark"] .letter-btn.active {
  background: #d65e2c;
  border-color: #d65e2c;
  color: #ffffff;
}

body[data-theme="dark"] .search-request-panel,
body[data-theme="dark"] .search-propose-panel {
  background:
    radial-gradient(circle at top right, rgba(55, 148, 255, 0.1), transparent 34%),
    linear-gradient(180deg, #252526, #2d2d30);
}

body[data-theme="dark"] .latest-song-item,
body[data-theme="dark"] .search-latest-item {
  border-color: #3c3c3c;
}

body[data-theme="dark"] .song-detail .meta,
body[data-theme="dark"] .song-detail .meta strong,
body[data-theme="dark"] .song-detail .meta a,
body[data-theme="dark"] .song-detail .meta span,
body[data-theme="dark"] .versions li,
body[data-theme="dark"] .versions li strong,
body[data-theme="dark"] .versions li a,
body[data-theme="dark"] .comment p:last-child,
body[data-theme="dark"] .author-info p,
body[data-theme="dark"] .author-info strong,
body[data-theme="dark"] .lyrics-html,
body[data-theme="dark"] .lyrics-html *,
body[data-theme="dark"] .lyrics-html p,
body[data-theme="dark"] .explanation-html,
body[data-theme="dark"] .explanation-html *,
body[data-theme="dark"] .explanation-html p {
  color: #d4d4d4 !important;
}

body[data-theme="dark"] .versions small,
body[data-theme="dark"] .song-detail .meta small,
body[data-theme="dark"] .comment-meta {
  color: #9da1a6;
}

body[data-theme="dark"] .comment-empty {
  color: #b0b8c2;
}

body[data-theme="dark"] .song-detail-cover img {
  border-color: #4d3a28;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.38);
}

body[data-theme="dark"] .btn-link {
  color: #75beff;
}

body[data-theme="dark"] .author-info a,
body[data-theme="dark"] .lyrics-html a,
body[data-theme="dark"] .explanation-html a,
body[data-theme="dark"] .versions a {
  color: #75beff !important;
}

body[data-theme="dark"] .btn-meta,
body[data-theme="dark"] .btn-meta:hover {
  background: #2d2d30;
  border-color: #3c3c3c;
  color: #d4d4d4;
}

body[data-theme="dark"] .btn-meta:hover {
  background: #37373d;
}

body[data-theme="dark"] .author-info {
  background: linear-gradient(180deg, #252526, #2d2d30);
}

body[data-theme="dark"] .song-detail-page {
  color: #d5dbe3;
}

body[data-theme="dark"] .song-detail-layout {
  background: #1f1f22;
}

body[data-theme="dark"] .song-block-head h3 {
  color: #f8fafc;
}

body[data-theme="dark"] .lyrics-html,
body[data-theme="dark"] .explanation-html {
  background:
    linear-gradient(180deg, #202124, #252526);
  border-color: #3f4248;
  color: #e5e7eb !important;
}

body[data-theme="dark"] .lyrics-html *,
body[data-theme="dark"] .lyrics-html p,
body[data-theme="dark"] .explanation-html *,
body[data-theme="dark"] .explanation-html p {
  color: inherit !important;
}

body[data-theme="dark"] .lyrics-html h1,
body[data-theme="dark"] .lyrics-html h2,
body[data-theme="dark"] .lyrics-html h3,
body[data-theme="dark"] .lyrics-html h4,
body[data-theme="dark"] .lyrics-html strong,
body[data-theme="dark"] .explanation-html h1,
body[data-theme="dark"] .explanation-html h2,
body[data-theme="dark"] .explanation-html h3,
body[data-theme="dark"] .explanation-html h4,
body[data-theme="dark"] .explanation-html strong {
  color: #ffffff !important;
}

body[data-theme="dark"] .lyrics-html h3,
body[data-theme="dark"] .tox .lyrics-section-title {
  color: #93c5fd !important;
}

body[data-theme="dark"] .lyrics-html a,
body[data-theme="dark"] .explanation-html a,
body[data-theme="dark"] .author-info a,
body[data-theme="dark"] .versions a {
  color: #75beff !important;
}

body[data-theme="dark"] .lyrics-html hr {
  border-top-color: #4b5563;
}

body[data-theme="dark"] .lyrics-reader-tools {
  background: #2d2d30;
  border-color: #3f4248;
}

body[data-theme="dark"] .lyrics-reader-tools button {
  color: #d5dbe3;
}

body[data-theme="dark"] .lyrics-reader-tools button:hover {
  background: #37373d;
  color: #ffb088;
}

body[data-theme="dark"] .lyrics-html .lyrics-highlight,
body[data-theme="dark"] .tox .lyrics-highlight {
  background: rgba(250, 204, 21, 0.24);
  color: #fff7d6 !important;
}

body[data-theme="dark"] .lyrics-html .lyrics-choeur,
body[data-theme="dark"] .tox .lyrics-choeur {
  background: rgba(14, 165, 233, 0.24);
  color: #e0f2fe !important;
}

body[data-theme="dark"] .lyrics-html .revision-annotation-marker,
body[data-theme="dark"] .tox .revision-annotation-marker {
  background: rgba(250, 204, 21, 0.28);
  color: inherit !important;
  outline-color: rgba(250, 204, 21, 0.32);
}

body[data-theme="dark"] .song-meta-item,
body[data-theme="dark"] .song-favorite-btn,
body[data-theme="dark"] .comment,
body[data-theme="dark"] .song-comments-panel,
body[data-theme="dark"] .song-report-panel,
body[data-theme="dark"] .song-video-panel,
body[data-theme="dark"] .song-video-compact,
body[data-theme="dark"] .author-info {
  background: #252526;
  border-color: #3f4248;
}

body[data-theme="dark"] .song-detail-hero .song-meta-item {
  background: #2a2118;
  border-color: #3d2f1f;
}

body[data-theme="dark"] .song-detail-hero .song-favorite-btn {
  background: #251f17;
  border-color: #4d3a28;
  color: #d4c8ba;
}

body[data-theme="dark"] .song-detail-hero .song-favorite-btn:hover {
  background: #332a1e;
  border-color: #c07240;
  color: #f5d0a9;
  text-decoration: none;
}

body[data-theme="dark"] .song-detail-hero .song-favorite-btn.is-favorite {
  background: rgba(244, 63, 94, 0.16);
  border-color: rgba(244, 63, 94, 0.42);
  color: #fda4af;
}

body[data-theme="dark"] .song-detail-hero .song-hero-quick-item {
  background: rgba(60, 40, 22, 0.60);
  border-color: #4d3a28;
  color: #c8a880;
}

body[data-theme="dark"] .song-detail-hero .song-hero-quick-album-year {
  color: #b8a898;
}

body[data-theme="dark"] .song-report-intro,
body[data-theme="dark"] .song-report-reasons label,
body[data-theme="dark"] .song-report-comment span {
  color: #d5dbe3;
}

body[data-theme="dark"] .song-report-toggle {
  background: #2d2d30;
  color: #d5dbe3;
}

body[data-theme="dark"] .song-report-toggle:hover {
  background: #37373d;
  color: #ffffff;
}

body[data-theme="dark"] .song-report-panel.is-open .song-report-toggle {
  background: #9fb2c8;
  color: #111827;
}

body[data-theme="dark"] .song-report-reasons label,
body[data-theme="dark"] .song-report-comment textarea {
  background: #1f1f22;
  border-color: #3f4248;
}

body[data-theme="dark"] .song-report-comment textarea {
  color: #e5e7eb;
}

body[data-theme="dark"] .song-favorite-btn:hover {
  background: #37373d;
  border-color: #e1784b;
  color: #ffb088;
}

body[data-theme="dark"] .song-favorite-btn.is-favorite {
  background: rgba(244, 63, 94, 0.16);
  border-color: rgba(244, 63, 94, 0.42);
  color: #fda4af;
}

body[data-theme="dark"] .comment p:last-child,
body[data-theme="dark"] .versions li,
body[data-theme="dark"] .author-info p {
  color: #d5dbe3 !important;
}

body[data-theme="dark"] .song-revision-panel,
body[data-theme="dark"] .revision-compose-shell,
body[data-theme="dark"] .revision-review-shell,
body[data-theme="dark"] .revision-original-panel,
body[data-theme="dark"] .revision-form,
body[data-theme="dark"] .revision-compare-card,
body[data-theme="dark"] .revision-summary-panel,
body[data-theme="dark"] .revision-discussion-panel,
body[data-theme="dark"] .revision-annotations-panel,
body[data-theme="dark"] .revision-annotation-workbench,
body[data-theme="dark"] .revision-message,
body[data-theme="dark"] .song-revision-list a {
  background: #252526;
  border-color: #3f4248;
  color: #d5dbe3;
}

body[data-theme="dark"] .song-revision-intro,
body[data-theme="dark"] .revision-compose-head p,
body[data-theme="dark"] .revision-review-head p,
body[data-theme="dark"] .revision-courtesy-note,
body[data-theme="dark"] .revision-message-meta,
body[data-theme="dark"] .revision-annotation-head p,
body[data-theme="dark"] .revision-annotation-draft span,
body[data-theme="dark"] .revision-annotation-card span,
body[data-theme="dark"] .revision-summary-panel p,
body[data-theme="dark"] .song-lyrics-contributors,
body[data-theme="dark"] .song-lyrics-contributors span,
body[data-theme="dark"] .song-revision-list span {
  color: #a9b3c1;
}

body[data-theme="dark"] .song-revision-status {
  background: #2d2d30;
  border-color: #4a4d54;
  color: #d5dbe3 !important;
}

body[data-theme="dark"] .song-revision-status.is-accepted {
  background: rgba(34, 197, 94, 0.16);
  border-color: rgba(34, 197, 94, 0.38);
  color: #86efac !important;
}

body[data-theme="dark"] .song-revision-status.is-rejected {
  background: rgba(239, 68, 68, 0.16);
  border-color: rgba(239, 68, 68, 0.38);
  color: #fca5a5 !important;
}

body[data-theme="dark"] .revision-annotation-draft [data-annotation-selected],
body[data-theme="dark"] .revision-annotation-selected,
body[data-theme="dark"] .song-lyrics-contributors strong {
  color: #ffffff;
}

body[data-theme="dark"] .revision-annotation-proposal {
  color: #7ddc9d !important;
}

body[data-theme="dark"] .revision-annotation-kind span,
body[data-theme="dark"] .revision-annotation-suggestion span {
  color: #a9b3c1;
}

body[data-theme="dark"] .revision-annotation-kind select,
body[data-theme="dark"] .revision-annotation-suggestion input {
  background: #1f1f22;
  border-color: #3f4248;
  color: #d5dbe3;
}

body[data-theme="dark"] .revision-compose-head h2,
body[data-theme="dark"] .revision-review-head h2,
body[data-theme="dark"] .revision-original-panel h3,
body[data-theme="dark"] .revision-compare-card h3,
body[data-theme="dark"] .revision-discussion-panel h3,
body[data-theme="dark"] .revision-annotation-head h3,
body[data-theme="dark"] .revision-annotation-draft strong,
body[data-theme="dark"] .revision-annotation-card strong {
  color: #ffffff;
}

body[data-theme="dark"] .revision-annotation-empty,
body[data-theme="dark"] .revision-annotation-draft,
body[data-theme="dark"] .revision-annotation-card-main {
  background: #2d2d30;
  border-color: #3f4248;
  color: #d5dbe3;
}

body[data-theme="dark"] .revision-annotation-jump {
  background: transparent;
  color: #d5dbe3;
}

body[data-theme="dark"] .revision-annotation-draft p,
body[data-theme="dark"] .revision-annotation-card p,
body[data-theme="dark"] .revision-annotation-note {
  color: #d5dbe3;
}

body[data-theme="dark"] .revision-annotation-draft button {
  background: rgba(239, 68, 68, 0.14);
  border-color: rgba(239, 68, 68, 0.32);
  color: #fca5a5;
}

body[data-theme="dark"] .revision-annotation-card-main:hover {
  background: #37373d;
  border-color: #4b5563;
}

body[data-theme="dark"] .revision-mobile-tabs {
  background: #252526;
  border-color: #3f4248;
}

body[data-theme="dark"] .revision-mobile-tabs button {
  color: #a9b3c1;
}

body[data-theme="dark"] .revision-mobile-tabs button.is-active {
  background: #3a4454;
  color: #ffffff;
}

body[data-theme="dark"] .revision-panel-head span {
  color: #ffb088;
}

body[data-theme="dark"] .revision-panel-head h3 {
  color: #ffffff;
}

body[data-theme="dark"] .revision-annotation-number {
  background: #e1784b;
  color: #ffffff;
}

body[data-theme="dark"] .revision-annotation-draft .revision-annotation-remove {
  background: #252526;
  border-color: #4a4d54;
  color: #ffb088;
}

body[data-theme="dark"] .revision-annotation-draft .revision-annotation-remove:hover {
  background: #37373d;
  border-color: #e1784b;
}

body[data-theme="dark"] .revision-annotation-status {
  background: #2d2d30;
  border-color: #4a4d54;
  color: #d5dbe3;
}

body[data-theme="dark"] .revision-annotation-status.is-accepted {
  background: rgba(34, 197, 94, 0.16);
  border-color: rgba(34, 197, 94, 0.38);
  color: #86efac;
}

body[data-theme="dark"] .revision-annotation-status.is-rejected {
  background: rgba(239, 68, 68, 0.16);
  border-color: rgba(239, 68, 68, 0.38);
  color: #fca5a5;
}

body[data-theme="dark"] .revision-annotation-action {
  background: #252526;
  border-color: #4a4d54;
  color: #d5dbe3;
}

body[data-theme="dark"] .revision-annotation-action.is-accept {
  border-color: rgba(34, 197, 94, 0.42);
  color: #86efac;
}

body[data-theme="dark"] .revision-annotation-action.is-reject {
  border-color: rgba(239, 68, 68, 0.42);
  color: #fca5a5;
}

body[data-theme="dark"] .revision-form {
  background: transparent;
  border-color: transparent;
  color: #d5dbe3;
}

body[data-theme="dark"] .revision-summary-field,
body[data-theme="dark"] .revision-editor-card,
body[data-theme="dark"] .revision-notes-field {
  background: #252526;
  border-color: #3f4248;
  color: #d5dbe3;
}

body[data-theme="dark"] .revision-readonly-input,
body[data-theme="dark"] .revision-readonly-note {
  background: #1f1f22;
  color: #d5dbe3;
}

body[data-theme="dark"] .revision-review-editor-card .tox-tinymce {
  border-color: #3f4248 !important;
}

body[data-theme="dark"] .lyrics-html .revision-annotation-marker[data-revision-label]::after,
body[data-theme="dark"] .tox .revision-annotation-marker[data-revision-label]::after {
  background: #e1784b;
  color: #ffffff;
}

body[data-theme="dark"] .lyrics-html .revision-annotation-suggestion-inline,
body[data-theme="dark"] .tox .revision-annotation-suggestion-inline {
  background: transparent;
  color: #7ddc9d;
}

body[data-theme="dark"] .revision-annotation-note-editor {
  background: #1f1f22;
  border-color: #3f4248;
  color: #d5dbe3;
}

body[data-theme="dark"] .revision-annotation-note-editor:empty::before {
  color: #8f98a6;
}

body[data-theme="dark"] .revision-btn-secondary {
  background: #2d2d30;
  border-color: #3f4248;
  color: #d5dbe3;
}

body[data-theme="dark"] .song-revision-owner-alert {
  background: rgba(217, 85, 40, 0.14);
  border-color: rgba(217, 85, 40, 0.35);
  color: #ffd8c8;
}

body[data-theme="dark"] .revision-chat-head span {
  background: #1f2937;
  border-color: #374151;
  color: #9cdcfe;
}

body[data-theme="dark"] .revision-chat-thread,
body[data-theme="dark"] .revision-chat-composer {
  background: #1f1f22;
  border-color: #3f4248;
}

body[data-theme="dark"] .revision-message {
  background: transparent;
  border-color: transparent;
}

body[data-theme="dark"] .revision-message-bubble {
  background: #2d2d30;
  border-color: #3f4248;
  color: #d5dbe3;
  box-shadow: none;
}

body[data-theme="dark"] .revision-message.is-own .revision-message-bubble {
  background: #dd5428;
  border-color: #e1784b;
  color: #fffaf2;
}

body[data-theme="dark"] .revision-chat-composer textarea {
  color: #d5dbe3;
}

body[data-theme="dark"] .revision-chat-composer textarea::placeholder {
  color: #8f98a6;
}

body[data-theme="dark"] .versions small,
body[data-theme="dark"] .comment-meta,
body[data-theme="dark"] .comment-empty {
  color: #a9b3c1 !important;
}

body[data-theme="dark"] .notice.success {
  background: rgba(16, 99, 156, 0.18);
  border-color: rgba(55, 148, 255, 0.26);
}

body[data-theme="dark"] .notice.error {
  background: rgba(127, 29, 29, 0.22);
  border-color: rgba(239, 68, 68, 0.24);
}

body[data-theme="dark"] .playlist-shell,
body[data-theme="dark"] .playlist-panel,
body[data-theme="dark"] .playlist-add-panel,
body[data-theme="dark"] .playlist-public-hero,
body[data-theme="dark"] .playlist-nav a,
body[data-theme="dark"] .playlist-song-list li {
  background: #252526;
  border-color: #3f4248;
  color: #d5dbe3;
}

body[data-theme="dark"] .playlist-head h2,
body[data-theme="dark"] .playlist-public-hero h2,
body[data-theme="dark"] .playlist-panel h3,
body[data-theme="dark"] .playlist-detail-head h3 {
  color: #ffffff;
}

body[data-theme="dark"] .playlist-head p,
body[data-theme="dark"] .playlist-public-hero p,
body[data-theme="dark"] .playlist-detail-head p,
body[data-theme="dark"] .playlist-nav span,
body[data-theme="dark"] .playlist-song-list span,
body[data-theme="dark"] .playlist-share span,
body[data-theme="dark"] .playlist-form label span,
body[data-theme="dark"] .playlist-add-panel span {
  color: #a9b3c1;
}

body[data-theme="dark"] .playlist-form input,
body[data-theme="dark"] .playlist-form textarea,
body[data-theme="dark"] .playlist-add-panel select {
  background: #1f1f22;
  border-color: #3f4248;
  color: #d5dbe3;
}

body[data-theme="dark"] .playlist-nav a.is-active {
  border-color: #e1784b;
  background: rgba(217, 85, 40, 0.14);
}

body[data-theme="dark"] .playlist-song-list button {
  background: #2d2d30;
  border-color: #4a4d54;
  color: #ffb088;
}

body[data-theme="dark"] .playlist-expand-panel {
  border-top-color: #3f4248;
}

body[data-theme="dark"] .playlist-action-btn {
  border-color: #4a4d54;
  color: #d5dbe3;
}

body[data-theme="dark"] .playlist-action-btn:hover,
body[data-theme="dark"] details[open] > summary.playlist-action-btn {
  background: #2d2d30;
  border-color: #6b7280;
}

body[data-theme="dark"] .playlist-action-btn--danger {
  border-color: #7f1d1d;
  color: #fca5a5;
}

body[data-theme="dark"] .playlist-action-btn--danger:hover {
  background: #3b1414;
}

body[data-theme="dark"] .playlist-share-url {
  background: #1f1f22;
  border-color: #4a4d54;
  color: #d5dbe3;
}

body[data-theme="dark"] .playlist-copy-btn {
  background: #2d2d30;
  border-color: #4a4d54;
  color: #d5dbe3;
}

body[data-theme="dark"] .playlist-copy-btn:hover {
  background: #3a3a3f;
}

body[data-theme="dark"] .btn-danger-sm {
  background: #3b1414;
  color: #fca5a5;
}

body[data-theme="dark"] .btn-danger-sm:hover {
  background: #5a1e1e;
}

body[data-theme="dark"] .auth-card {
  background:
    radial-gradient(circle at top right, rgba(225, 120, 75, 0.14), transparent 34%),
    linear-gradient(180deg, #252526, #2d2d30);
  border-color: #3c3c3c;
  box-shadow: none;
}

/* ═══════════════════════════════════════
   Homepage redesign (.hi-*)
   ═══════════════════════════════════════ */

.site-main:has(.hi-page) { max-width: 100%; padding: 0; }

.hi-page {
  min-height: calc(100vh - 56px);
  background: #fffaf3;
  background-image:
    radial-gradient(ellipse at 78% 14%, rgba(217,85,40,0.30) 0%, transparent 52%),
    radial-gradient(ellipse at 22% 88%, rgba(217,85,40,0.18) 0%, transparent 48%);
}

/* ── Hero ── */
.hi-hero {
  position: relative;
  overflow: hidden;
  min-height: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 26px 24px 46px;
}

.hi-hero.has-hi-hero-bg {
  min-height: clamp(360px, 58vh, 620px);
  align-items: center;
  padding: 56px 24px 68px;
  background: #1a0e06;
  isolation: isolate;
  --hi-hero-parallax-y: 0;
}

.hi-hero.has-hi-hero-bg::before {
  content: "";
  position: absolute;
  inset: -90px 0;
  z-index: 0;
  background-image: var(--hi-hero-bg-image);
  background-size: cover;
  background-position: center;
  transform: translate3d(0, calc(var(--hi-hero-parallax-y, 0) * var(--hi-hero-parallax-speed, 18) * 2px), 0) scale(1.08);
  will-change: transform;
}

.hi-hero.has-hi-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(rgba(26, 14, 6, var(--hi-hero-bg-overlay, 0.52)), rgba(26, 14, 6, var(--hi-hero-bg-overlay, 0.52))),
    radial-gradient(ellipse at 50% 28%, rgba(217, 85, 40, 0.16), transparent 56%);
}

.hi-hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 680px;
  width: 100%;
}

.hi-logo-wrap { margin-bottom: 18px; }

.hi-logo {
  width: min(142px, 46vw);
  height: auto;
  display: block;
}

.hi-logo-dark { display: none; }

.hi-eyebrow {
  font-size: 0.73rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: #d95528;
  margin: 0 0 14px;
}

.hi-title {
  font-size: clamp(3rem, 6vw, 5.8rem);
  font-weight: 900;
  line-height: 0.93;
  color: #1a0e06;
  letter-spacing: -0.035em;
  margin: 0 0 30px;
}

.hi-hero.has-hi-hero-bg .hi-eyebrow,
.hi-hero.has-hi-hero-bg .hi-title {
  color: var(--hi-hero-text-color, #fffaf3);
  text-shadow: 0 3px 24px rgba(0, 0, 0, 0.42);
}

.hi-hero.has-hi-hero-bg .hi-logo {
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.36));
}

.hi-search-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 44px;
  border-radius: 999px;
  background: #d95528;
  color: #fff;
  font-weight: 800;
  font-size: 1.05rem;
  text-decoration: none;
  box-shadow: 0 6px 30px rgba(217,85,40,0.46);
  transition: background 0.15s, box-shadow 0.15s, transform 0.12s;
  margin-bottom: 36px;
}

.hi-search-btn:hover {
  background: #c04420;
  color: #fff;
  box-shadow: 0 10px 40px rgba(217,85,40,0.58);
  transform: translateY(-2px);
}

.hi-nav {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.hi-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 20px;
  border-radius: 999px;
  background: rgba(255,255,255,0.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.88);
  color: #3a2010;
  font-weight: 700;
  font-size: 0.88rem;
  text-decoration: none;
  transition: background 0.14s, border-color 0.14s, transform 0.12s;
}

.hi-nav-link i { color: #d95528; }

.hi-nav-link:hover {
  background: rgba(255,255,255,0.88);
  border-color: rgba(217,85,40,0.30);
  color: #1a0e06;
  transform: translateY(-1px);
}

/* ── Section helpers ── */
.hi-section-head { margin-bottom: 18px; }

.hi-section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: #d95528;
  margin: 0;
}

/* ── About / project explanation ── */
.hi-about {
  padding: 0 40px 64px;
}

.hi-about-inner {
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 42px;
}

.hi-about-pitch {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hi-about-title {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 900;
  color: #1a0e06;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 14px 0 16px;
}

.hi-about-lead {
  font-family: var(--km-title-font);
  font-size: clamp(1.04rem, 1.35vw, 1.22rem);
  font-weight: 700;
  color: #5f4a3e;
  line-height: 1.62;
  max-width: 740px;
  margin: 0;
}

.hi-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.hi-pillar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 178px;
  padding: 26px 24px;
  background: rgba(255,255,255,0.76);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(217,85,40,0.10);
  border-radius: 20px;
  box-shadow: 0 16px 38px rgba(95,55,24,0.08);
  transition: box-shadow 0.16s, transform 0.14s;
}

.hi-pillar:hover {
  box-shadow: 0 20px 46px rgba(95,55,24,0.14);
  transform: translateY(-2px);
}

.hi-pillar-icon {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: rgba(217,85,40,0.10);
  color: #d95528;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.hi-pillar > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hi-pillar strong {
  font-size: 1.08rem;
  font-weight: 900;
  color: #1a0e06;
}

.hi-pillar p {
  font-size: 0.92rem;
  color: #765d50;
  margin: 0;
  line-height: 1.62;
}

body[data-theme="dark"] .hi-about-title { color: #c0ad9a; }
body[data-theme="dark"] .hi-about-lead  { color: #a09080; }

body[data-theme="dark"] .hi-pillar {
  background: rgba(20,10,2,0.72);
  border-color: rgba(255,255,255,0.05);
}

body[data-theme="dark"] .hi-pillar strong { color: #f0d8b8; }
body[data-theme="dark"] .hi-pillar p      { color: #907060; }

body[data-theme="dark"] .hi-pillar-icon {
  background: rgba(217,85,40,0.14);
  color: #e07040;
}

@media (max-width: 860px) {
  .hi-about { padding: 0 24px 52px; }
  .hi-pillars { grid-template-columns: 1fr; gap: 14px; }
  .hi-pillar { min-height: 0; }
}

@media (max-width: 600px) {
  .hi-about { padding: 0 16px 42px; }
  .hi-about-title { font-size: 1.7rem; }
  .hi-about-lead {
    font-size: 0.98rem;
    font-weight: 700;
  }
}

/* ── Artist discover ── */
.hi-discover { padding: 0 40px 52px; }

.hi-discover-inner { max-width: 860px; margin: 0 auto; }

.hi-artist-card {
  display: grid;
  grid-template-columns: 260px 1fr;
  background: rgba(255,255,255,0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.90);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(180,100,40,0.10);
}

.hi-artist-cover {
  aspect-ratio: 1;
  overflow: hidden;
  background: rgba(217,85,40,0.08);
}

.hi-artist-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.hi-artist-card:hover .hi-artist-cover img { transform: scale(1.04); }

.hi-artist-cover-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  color: rgba(217,85,40,0.28);
}

.hi-artist-info {
  padding: 36px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hi-artist-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.70rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: #d95528;
  margin: 0 0 12px;
}

.hi-artist-name {
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  font-weight: 900;
  color: #1a0e06;
  letter-spacing: -0.025em;
  line-height: 1;
  margin: 0 0 10px;
}

.hi-artist-meta { font-size: 0.88rem; color: #907060; margin: 0 0 24px; }

.hi-artist-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 24px;
  border-radius: 999px;
  background: #1a0e06;
  color: #fff;
  font-weight: 700;
  font-size: 0.90rem;
  text-decoration: none;
  align-self: flex-start;
  transition: background 0.15s, transform 0.12s;
}

.hi-artist-btn:hover {
  background: #d95528;
  color: #fff;
  transform: translateX(3px);
}

/* ── Carousel ── */
.hi-latest { padding: 0 40px 56px; }

.hi-latest-inner { max-width: 860px; margin: 0 auto; }

.hi-latest-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.hi-carousel-controls { display: flex; gap: 6px; }

.hi-carousel-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(217,85,40,0.25);
  background: rgba(255,255,255,0.62);
  backdrop-filter: blur(8px);
  color: #3a2010;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.13s, border-color 0.13s, transform 0.10s;
}

.hi-carousel-btn:hover:not(:disabled) {
  background: #d95528;
  border-color: #d95528;
  color: #fff;
  transform: scale(1.08);
}

.hi-carousel-btn:disabled { opacity: 0.35; cursor: default; }

.hi-carousel-wrap { overflow: hidden; }

.hi-carousel-track {
  display: flex;
  gap: 16px;
  transition: transform 0.30s cubic-bezier(0.4,0,0.2,1);
}

.hi-song-card {
  flex: 0 0 calc(20% - 13px);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hi-song-cover {
  aspect-ratio: 1;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255,255,255,0.60);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.85);
  box-shadow: 0 4px 18px rgba(180,100,40,0.10);
  transition: box-shadow 0.18s, transform 0.18s;
}

.hi-song-card:hover .hi-song-cover {
  box-shadow: 0 8px 28px rgba(180,100,40,0.18);
  transform: translateY(-3px);
}

.hi-song-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.hi-song-cover-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: rgba(217,85,40,0.25);
}

.hi-song-meta { display: flex; flex-direction: column; gap: 2px; padding: 0 2px; }

.hi-song-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: #1a0e06;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  transition: color 0.12s;
}

.hi-song-card:hover .hi-song-title { color: #d95528; }

.hi-song-author {
  font-size: 0.72rem;
  color: #907060;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

/* ── Bottom grid: artist + latest songs + live feed ── */
.hi-bottom {
  padding: 58px 40px 72px;
}

.hi-bottom-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(230px, 320px) minmax(0, 1fr);
  gap: 22px;
  align-items: stretch;
}

.hi-bottom-artist,
.hi-latest2,
.hi-live {
  background: rgba(255,255,255,0.66);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.90);
  border-radius: 20px;
  box-shadow: 0 8px 34px rgba(180,100,40,0.10);
}

.hi-bottom-artist {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hi-artist2-card {
  display: block;
  color: inherit;
  text-decoration: none;
  min-height: 0;
}

.hi-artist2-img {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 16px;
  background: rgba(217,85,40,0.08);
}

.hi-artist2-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.hi-artist2-card:hover .hi-artist2-img img {
  transform: scale(1.04);
}

.hi-artist2-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(217,85,40,0.28);
  font-size: 3rem;
}

.hi-artist2-overlay {
  position: absolute;
  inset: auto 0 0;
  padding: 38px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: linear-gradient(180deg, transparent, rgba(20,10,2,0.86));
  color: #fff;
}

.hi-artist2-name {
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: 900;
  line-height: 1;
  overflow-wrap: anywhere;
}

.hi-artist2-count {
  font-size: 0.82rem;
  font-weight: 700;
  color: rgba(255,255,255,0.78);
}

.hi-bottom-right {
  min-width: 0;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 18px;
}

.hi-latest2 {
  padding: 18px;
  min-width: 0;
}

.hi-latest2-head,
.hi-live-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.hi-bottom .hi-song-card {
  flex: 0 0 calc(25% - 12px);
}

.hi-live {
  padding: 18px;
  min-width: 0;
}

.hi-live-counts {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(217,85,40,0.08);
}

.hi-live-stat {
  min-width: 38px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.hi-live-num {
  font-size: 0.98rem;
  font-weight: 900;
  line-height: 1;
  color: #1a0e06;
  font-variant-numeric: tabular-nums;
}

.hi-live-stat small {
  font-size: 0.63rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #907060;
}

.hi-live-sep {
  width: 1px;
  height: 28px;
  background: rgba(217,85,40,0.18);
}

.hi-live-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hi-live-item,
.hi-live-loading {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 10px;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
}

.hi-live-item {
  background: rgba(255,255,255,0.44);
  transition: background 0.14s, transform 0.12s;
}

.hi-live-item:hover {
  background: rgba(255,255,255,0.76);
  transform: translateX(2px);
}

.hi-live-loading {
  display: flex;
  color: #907060;
  font-size: 0.86rem;
}

.hi-live-badge {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.74rem;
  font-weight: 900;
}

.hi-live-badge--song {
  background: rgba(217,85,40,0.14);
  color: #d95528;
}

.hi-live-badge--lexique {
  background: rgba(40,120,95,0.13);
  color: #28785f;
}

.hi-live-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.hi-live-title,
.hi-live-by {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hi-live-title {
  font-size: 0.86rem;
  font-weight: 800;
  color: #1a0e06;
}

.hi-live-by {
  font-size: 0.72rem;
  color: #907060;
}

.hi-live-time {
  font-size: 0.72rem;
  font-weight: 800;
  color: #b05c38;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.hi-num-pop {
  animation: hiNumPop 0.34s ease;
}

.hi-live-new .hi-live-item {
  animation: hiLiveNew 1.8s ease;
}

@keyframes hiNumPop {
  0% { transform: scale(1); }
  45% { transform: scale(1.22); }
  100% { transform: scale(1); }
}

@keyframes hiLiveNew {
  0% { background: rgba(217,85,40,0.20); }
  100% { background: transparent; }
}

/* ── Dark mode ── */
body[data-theme="dark"] .hi-page {
  background: #120800;
  background-image:
    radial-gradient(ellipse at 78% 14%, rgba(217,85,40,0.22) 0%, transparent 52%),
    radial-gradient(ellipse at 22% 88%, rgba(217,85,40,0.13) 0%, transparent 48%);
}

body[data-theme="dark"] .hi-logo-light { display: none; }
body[data-theme="dark"] .hi-logo-dark  { display: block; }
body[data-theme="dark"] .hi-title      { color: #f0e6d3; }

body[data-theme="dark"] .hi-nav-link {
  background: rgba(30,16,4,0.62);
  border-color: rgba(255,255,255,0.06);
  color: #c8b090;
}

body[data-theme="dark"] .hi-nav-link:hover {
  background: rgba(40,22,6,0.82);
  border-color: rgba(217,85,40,0.28);
  color: #f0dfc0;
}

body[data-theme="dark"] .hi-artist-card {
  background: rgba(20,10,2,0.82);
  border-color: rgba(255,255,255,0.05);
}

body[data-theme="dark"] .hi-artist-name { color: #c0ad9a; }
body[data-theme="dark"] .hi-artist-meta { color: #907060; }

body[data-theme="dark"] .hi-artist-btn { background: #c0ad9a; color: #1a0e06; }
body[data-theme="dark"] .hi-artist-btn:hover { background: #d95528; color: #fff; }

body[data-theme="dark"] .hi-carousel-btn {
  background: rgba(30,16,4,0.62);
  border-color: rgba(255,255,255,0.08);
  color: #c8b090;
}

body[data-theme="dark"] .hi-song-title  { color: #c0ad9a; }
body[data-theme="dark"] .hi-song-author { color: #907060; }

body[data-theme="dark"] .hi-song-cover {
  background: rgba(20,10,2,0.70);
  border-color: rgba(255,255,255,0.05);
}

body[data-theme="dark"] .hi-bottom-artist,
body[data-theme="dark"] .hi-latest2,
body[data-theme="dark"] .hi-live {
  background: rgba(20,10,2,0.78);
  border-color: rgba(255,255,255,0.06);
}

body[data-theme="dark"] .hi-artist2-img {
  background: rgba(217,85,40,0.12);
}

body[data-theme="dark"] .hi-live-counts {
  background: rgba(217,85,40,0.12);
}

body[data-theme="dark"] .hi-live-num,
body[data-theme="dark"] .hi-live-title {
  color: #c0ad9a;
}

body[data-theme="dark"] .hi-live-stat small,
body[data-theme="dark"] .hi-live-by,
body[data-theme="dark"] .hi-live-loading {
  color: #907060;
}

body[data-theme="dark"] .hi-live-sep {
  background: rgba(255,255,255,0.08);
}

body[data-theme="dark"] .hi-live-item {
  background: rgba(255,255,255,0.04);
}

body[data-theme="dark"] .hi-live-item:hover {
  background: rgba(255,255,255,0.07);
}

body[data-theme="dark"] .hi-live-badge--lexique {
  background: rgba(75,170,130,0.14);
  color: #6bd0a5;
}

/* ── Responsive ── */
@media (max-width: 860px) {
  .hi-discover { padding: 0 24px 44px; }
  .hi-latest   { padding: 0 24px 44px; }
  .hi-artist-card { grid-template-columns: 180px 1fr; }
  .hi-artist-info { padding: 24px; }
  .hi-song-card { flex: 0 0 calc(33.333% - 11px); }
  .hi-bottom { padding: 50px 24px 56px; }
  .hi-bottom-inner { grid-template-columns: 1fr; }
  .hi-bottom-artist { max-width: 360px; width: 100%; margin: 0 auto; }
  .hi-bottom .hi-song-card { flex-basis: calc(33.333% - 11px); }
}

@media (max-width: 600px) {
  .hi-hero  { padding: 20px 20px 42px; }
  .hi-title { font-size: 2.8rem; }
  .hi-artist-card { grid-template-columns: 1fr; }
  .hi-artist-cover { aspect-ratio: 16/9; }
  .hi-discover { padding: 0 16px 36px; }
  .hi-latest   { padding: 0 16px 36px; }
  .hi-song-card { flex: 0 0 calc(50% - 8px); }
  .hi-bottom { padding: 42px 16px 48px; }
  .hi-bottom-artist,
  .hi-latest2,
  .hi-live { border-radius: 16px; }
  .hi-bottom .hi-song-card { flex-basis: calc(50% - 8px); }
  .hi-latest2-head,
  .hi-live-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .hi-live-counts {
    width: 100%;
    justify-content: space-between;
  }
}

body[data-theme="dark"] .auth-title,
body[data-theme="dark"] .auth-help strong {
  color: #ffffff;
}

body[data-theme="dark"] .auth-subtitle,
body[data-theme="dark"] .auth-help,
body[data-theme="dark"] .auth-link-row {
  color: #b9c7da;
}

body[data-theme="dark"] .auth-card input[type="text"],
body[data-theme="dark"] .auth-card input[type="email"],
body[data-theme="dark"] .auth-card input[type="password"] {
  background: #1e1e1e;
  border-color: #3c3c3c;
}

body[data-theme="dark"] .auth-link-row a {
  color: #75beff;
}

body[data-theme="dark"] .auth-link-row a:hover {
  color: #9cdcfe;
}

body[data-theme="dark"] .auth-help {
  background: rgba(45, 45, 48, 0.7);
  border-color: #3c3c3c;
}


/* ======================
   ADMIN USERS PAGE
   ====================== */

/* Grille sidebar | contenu */
.admin-users-page {
  flex: 1;
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
  background: #f4f6f9;
}

/* ── SIDEBAR ── */
.admin-users-sidebar {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-right: 1px solid #dce3ec;
  overflow-y: auto;
}

.admin-users-sidebar-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 18px 16px 14px;
  border-bottom: 1px solid #dce3ec;
  background: linear-gradient(160deg, #f8fafc 0%, #ffffff 100%);
  flex-shrink: 0;
}

.admin-users-sidebar-hero h2 {
  margin: 0 0 3px;
  font-size: 1.1rem;
  line-height: 1.2;
  color: #0f172a;
}

.admin-users-sidebar-hero p {
  margin: 0;
  font-size: 0.78rem;
  color: #64748b;
}

.admin-users-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  border: 1px solid #dce3ec;
  background: #ffffff;
  color: #475569;
  font-size: 0.85rem;
  text-decoration: none;
  flex-shrink: 0;
  transition: background 0.12s;
}

.admin-users-back-btn:hover {
  background: #f1f5f9;
  text-decoration: none;
}

/* Stats */
.admin-users-sidebar-stats {
  flex-shrink: 0;
  border-bottom: 1px solid #dce3ec;
}

.admin-users-sidebar-stat {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-bottom: 1px solid #f1f5f9;
  cursor: pointer;
  transition: background 0.12s;
  user-select: none;
}

.admin-users-sidebar-stat:hover {
  background: #f1f5f9;
}

.admin-users-sidebar-stat.is-filter-active {
  background: #eff6ff;
  box-shadow: inset 3px 0 0 #3b82f6;
}

.admin-users-sidebar-stat:last-child { border-bottom: none; }

.admin-users-sidebar-stat.has-danger {
  background: rgba(239, 68, 68, 0.04);
}

.admin-users-sidebar-stat.has-danger.is-filter-active {
  background: rgba(239, 68, 68, 0.10);
  box-shadow: inset 3px 0 0 #ef4444;
}

.admin-users-stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  font-size: 0.88rem;
  flex-shrink: 0;
}

.admin-users-stat-icon.is-blue   { background: #dbeafe; color: #1d4ed8; }
.admin-users-stat-icon.is-green  { background: #dcfce7; color: #166534; }
.admin-users-stat-icon.is-orange { background: #fef3c7; color: #92400e; }
.admin-users-stat-icon.is-red    { background: #fee2e2; color: #b91c1c; }
.admin-users-stat-icon.is-purple { background: #ede9fe; color: #5b21b6; }
.admin-users-stat-icon.is-indigo { background: #e0e7ff; color: #3730a3; }
.admin-users-stat-icon.is-dark   { background: #1e293b; color: #f1f5f9; }

.admin-users-stat-label {
  flex: 1;
  min-width: 0;
  font-size: 0.8rem;
  color: #64748b;
}

.admin-users-stat-value {
  font-size: 1rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1;
}

/* Invite */
.admin-users-sidebar-invite {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.admin-users-sidebar-section-title {
  margin: 0 0 2px;
  font-size: 0.85rem;
  font-weight: 800;
  color: #1e293b;
  display: flex;
  align-items: center;
  gap: 6px;
}

.admin-users-invite-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
}

.admin-users-invite-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.admin-users-invite-field label {
  font-size: 0.75rem;
  color: #64748b;
  margin-bottom: 0;
}

.admin-users-invite-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  border: none;
  background: #0f172a;
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.12s;
}

.admin-users-invite-submit:hover { background: #1e293b; }

.admin-users-invite-link-box {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid #e5e7eb;
}

.admin-users-invite-link-box label {
  display: block;
  margin-bottom: 5px;
  font-size: 0.75rem;
  color: #64748b;
}

.admin-users-invite-link-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
}

/* ── MAIN ── */
.admin-users-main {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.admin-users-main-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid #dce3ec;
  background: #ffffff;
  flex-shrink: 0;
}

.admin-users-main-toolbar-left h3 {
  margin: 0 0 2px;
  font-size: 0.92rem;
  color: #0f172a;
}

.admin-users-list-count {
  margin: 0;
  font-size: 0.75rem;
  color: #64748b;
}

.admin-users-main-toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.admin-users-notice {
  flex-shrink: 0;
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-top: none;
  margin: 0;
}

/* Filter */
.admin-users-filter-wrap { min-width: 220px; }

.admin-users-filter-input-wrap { position: relative; }

.admin-users-filter-icon {
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 0.82rem;
  pointer-events: none;
  line-height: 1;
}

.admin-users-filter-input-wrap input {
  width: 100%;
  box-sizing: border-box;
  padding-left: 28px;
}

/* Per-page + pagination */
.admin-users-per-page {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #64748b;
  font-size: 0.78rem;
}

.admin-users-pages {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.admin-users-page-chip,
.admin-users-page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  min-width: 26px;
  padding: 0 6px;
  border-radius: 6px;
  border: 1px solid #d1d5db;
  background: #ffffff;
  color: #334155;
  font-size: 0.75rem;
  font-weight: 700;
  text-decoration: none;
}

.admin-users-page-chip:hover,
.admin-users-page-link:hover { background: #f3f4f6; text-decoration: none; }

.admin-users-page-chip.is-active,
.admin-users-page-link.is-current {
  background: #0f172a;
  border-color: #0f172a;
  color: #ffffff;
}

/* Table */
.admin-users-table-wrap {
  flex: 1;
  overflow: auto;
  min-height: 0;
  background: #ffffff;
}

.admin-users-table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
  font-size: 0.855rem;
}

.admin-users-table th,
.admin-users-table td {
  padding: 10px 14px;
  border-bottom: 1px solid #eef2f7;
  vertical-align: middle;
  text-align: left;
  white-space: nowrap;
}

.admin-users-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
  background: #f8fafc;
  border-bottom: 2px solid #e2e8f0;
}

th[data-sort-col] { cursor: pointer; white-space: nowrap; }
th[data-sort-col]:hover { color: #334155; background: #f1f5f9; }

.admin-sort-icon {
  font-size: 0.65rem;
  opacity: 0.4;
  vertical-align: middle;
  margin-left: 2px;
  transition: opacity 0.1s;
}

th[data-sort-col]:hover .admin-sort-icon { opacity: 0.7; }

th.is-sort-asc  .admin-sort-icon,
th.is-sort-desc .admin-sort-icon {
  opacity: 1;
  color: #3b82f6;
}

/* Bottom bar */
.admin-users-bottom-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px 12px;
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
  gap: 12px;
}

.admin-users-table tbody tr:last-child td { border-bottom: none; }
.admin-users-table tbody tr:hover { background: #f8fbff; }

.admin-users-col-id   { color: #94a3b8; font-size: 0.78rem; width: 48px; }
.admin-users-col-date { color: #64748b; font-size: 0.78rem; }
.admin-users-col-email{ color: #334155; }

/* Name cell */
.admin-users-name-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.admin-users-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: hsl(var(--avatar-hue, 243) 58% 55%);
  color: #ffffff;
  font-size: 0.67rem;
  font-weight: 800;
  flex-shrink: 0;
  user-select: none;
  line-height: 1;
}

.admin-users-name-link { color: #0f172a; font-weight: 700; }
.admin-users-name-link:hover { color: #0b5bb8; }

.admin-users-danger-flag {
  display: inline-flex;
  align-items: center;
  margin-left: 5px;
  color: #dc2626;
  vertical-align: middle;
  font-size: 0.85rem;
}

/* Pills */
.admin-users-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid #d1d5db;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
}

.admin-users-pill.is-admin      { border-color: #cbd5e1; background: #eef3f8; color: #0f172a; }
.admin-users-pill.is-redacteur  { border-color: #a5b4fc; background: #eef2ff; color: #3730a3; }
.admin-users-pill.is-contributor{ border-color: #d1d5db; background: #f8fafc; color: #334155; }
.admin-users-pill.is-active     { border-color: #86efac; background: #f0fdf4; color: #166534; }
.admin-users-pill.is-suspended  { border-color: #fca5a5; background: #fef2f2; color: #991b1b; }
.admin-users-pill.is-neutral    { border-color: #d1d5db; background: #f8fafc; color: #475569; }

/* Actions */
.admin-users-actions { display: flex; flex-direction: column; gap: 4px; }
.admin-users-actions.is-row { flex-direction: row; gap: 3px; }

/* Dropdown droits */
.admin-users-rights-dropdown {
  position: relative;
}

.admin-users-rights-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 7px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #475569;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, border-color .12s;
}

.admin-users-rights-toggle:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.admin-users-rights-toggle.has-grants {
  border-color: #a5b4fc;
  color: #3730a3;
  background: #eef2ff;
}

.admin-users-rights-toggle.has-grants:hover { background: #e0e7ff; }

.admin-users-rights-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  font-size: .68rem;
  font-weight: 700;
  background: #6366f1;
  color: #fff;
  line-height: 1;
}

.admin-users-rights-chevron { font-size: .7rem; transition: transform .15s; }

.admin-users-granted-pills { display: flex; flex-wrap: wrap; gap: 3px; }

.admin-users-rights-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 200;
  min-width: 210px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.10);
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.admin-users-rights-menu[hidden] { display: none !important; }

.admin-users-right-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 7px;
  border: 1px solid transparent;
  background: transparent;
  color: #64748b;
  font-size: .82rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background .1s, color .1s;
}

.admin-users-right-btn:hover { background: #f8fafc; color: #1e293b; text-decoration: none; }

.admin-users-right-btn i { font-size: .88rem; flex-shrink: 0; color: #cbd5e1; }

.admin-users-right-btn.is-granted { color: #15803d; font-weight: 600; }
.admin-users-right-btn.is-granted i { color: #16a34a; }
.admin-users-right-btn.is-granted:hover { background: #f0fdf4; color: #166534; }

.admin-users-status-group { display: flex; gap: 3px; }

.admin-users-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid #d1d5db;
  background: #ffffff;
  color: #64748b;
  font-size: 0.82rem;
  text-decoration: none;
  line-height: 1;
  transition: background 0.1s;
}

.admin-users-icon-btn:hover { background: #f3f4f6; text-decoration: none; }
.admin-users-icon-btn.is-warning { border-color: #f59e0b; color: #92400e; }
.admin-users-icon-btn.is-warning:hover { background: #fffbeb; }
.admin-users-icon-btn.is-success { border-color: #22c55e; color: #166534; }
.admin-users-icon-btn.is-success:hover { background: #f0fdf4; }
.admin-users-icon-btn.is-danger  { border-color: #ef4444; color: #991b1b; }
.admin-users-icon-btn.is-danger:hover  { background: #fef2f2; }

/* Self tag */
.admin-users-self-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid #d1d5db;
  background: #f8fafc;
  color: #64748b;
  font-size: 0.7rem;
  font-weight: 700;
}

/* Empty state */
.admin-users-empty {
  padding: 48px 20px;
  text-align: center;
  color: #64748b;
  font-size: 0.9rem;
}

.admin-users-muted { color: #64748b; }

.admin-comments-table-wrap {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: auto;
  background: #ffffff;
}

.admin-table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
  font-size: 0.87rem;
}

.admin-table th,
.admin-table td {
  padding: 9px 10px;
  border-bottom: 1px solid #eef2f7;
  vertical-align: top;
  text-align: left;
}

.admin-table th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #64748b;
  background: #f8fafc;
}

.admin-table tbody tr:hover {
  background: #f8fbff;
}

.admin-comment-body {
  max-width: 360px;
  color: #334155;
  line-height: 1.45;
}

.admin-inline-form {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 6px;
}

.admin-inline-form select {
  min-height: 30px;
  border: 1px solid #d1d5db;
  border-radius: 7px;
  background: #ffffff;
  color: #1f2937;
  font: inherit;
  font-size: 0.82rem;
}

.btn-small {
  min-height: 30px;
  padding: 0 10px;
  border: 0;
  border-radius: 7px;
  background: #6f86a7;
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
}

.btn-small:hover {
  background: #5f7698;
}

.admin-empty,
.alert {
  margin: 0;
  padding: 12px 14px;
  border-radius: 12px;
}

.admin-empty {
  background: #ffffff;
  color: #64748b;
}

.alert-error {
  background: #fef2f2;
  color: #991b1b;
}

.alert-success {
  background: #f0fdf4;
  color: #166534;
}

.admin-users-self-tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid #d1d5db;
  background: #f8fafc;
  color: #64748b;
  font-size: 0.75rem;
  font-weight: 700;
}

.admin-users-empty {
  margin: 10px 0 0;
  color: #64748b;
}

.admin-users-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.admin-users-per-page {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #64748b;
  font-size: 0.85rem;
}

.admin-users-page-chip,
.admin-users-page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid #d1d5db;
  background: #ffffff;
  color: #1f2937;
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
}

.admin-users-page-chip:hover,
.admin-users-page-link:hover {
  background: #f3f4f6;
  text-decoration: none;
}

.admin-users-page-chip.is-active,
.admin-users-page-link.is-current {
  background: #eef3f8;
  border-color: #cfd8e3;
  color: #0f172a;
}

.admin-users-pages {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

/* ── RESPONSIVE ── */
@media (max-width: 1080px) {
  body:has(.admin-users-page) {
    height: auto;
    overflow: auto;
  }

  body:has(.admin-users-page) .site-main {
    overflow: auto;
    height: auto;
  }

  .admin-topbar-brand-name { display: none; }
  .admin-topbar-admin-badge { display: none; }
  .admin-topbar-user span   { display: none; }
  .admin-topbar-back span   { display: none; }
  .admin-topbar { padding: 0 10px; }

  .admin-users-page {
    display: flex;
    flex-direction: column;
    overflow: visible;
  }

  .admin-users-sidebar {
    overflow-y: visible;
    border-right: none;
    border-bottom: 1px solid #dce3ec;
  }

  .admin-users-sidebar-stats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }

  .admin-users-sidebar-stat { border-right: 1px solid #f1f5f9; }

  .admin-users-main {
    overflow: visible;
    min-height: 0;
  }

  .admin-users-table-wrap {
    overflow: auto;
    min-height: 300px;
  }
}

@media (max-width: 640px) {
  .admin-users-sidebar-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .admin-users-main-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .admin-users-main-toolbar-right {
    flex-wrap: wrap;
    gap: 6px;
  }

  .admin-users-filter-wrap { min-width: 0; width: 100%; }
}

/* ── DARK MODE ── */
body[data-theme="dark"] .admin-users-page { background: #17181a; }

body[data-theme="dark"] .admin-users-sidebar {
  background: #1f1f22;
  border-color: #3c3c3c;
}

body[data-theme="dark"] .admin-users-sidebar-hero {
  background: linear-gradient(160deg, #252526 0%, #1f1f22 100%);
  border-color: #3c3c3c;
}

body[data-theme="dark"] .admin-users-sidebar-hero h2 { color: #f1f5f9; }
body[data-theme="dark"] .admin-users-sidebar-hero p  { color: #9da1a6; }

body[data-theme="dark"] .admin-users-back-btn {
  background: #2d2d30;
  border-color: #3c3c3c;
  color: #9da1a6;
}
body[data-theme="dark"] .admin-users-back-btn:hover { background: #37373d; }

body[data-theme="dark"] .admin-users-sidebar-stats  { border-color: #3c3c3c; }
body[data-theme="dark"] .admin-users-sidebar-stat   { border-bottom-color: #2d2d30; }
body[data-theme="dark"] .admin-users-sidebar-stat:hover { background: #2a2a2d; }
body[data-theme="dark"] .admin-users-sidebar-stat.is-filter-active { background: rgba(59,130,246,0.12); box-shadow: inset 3px 0 0 #3b82f6; }
body[data-theme="dark"] .admin-users-sidebar-stat.has-danger { background: rgba(239,68,68,0.07); }
body[data-theme="dark"] .admin-users-sidebar-stat.has-danger.is-filter-active { background: rgba(239,68,68,0.15); box-shadow: inset 3px 0 0 #ef4444; }

body[data-theme="dark"] .admin-users-stat-icon.is-blue   { background: rgba(59,130,246,0.18);  color: #93c5fd; }
body[data-theme="dark"] .admin-users-stat-icon.is-green  { background: rgba(34,197,94,0.16);   color: #86efac; }
body[data-theme="dark"] .admin-users-stat-icon.is-orange { background: rgba(245,158,11,0.16);  color: #fcd34d; }
body[data-theme="dark"] .admin-users-stat-icon.is-red    { background: rgba(239,68,68,0.16);   color: #fca5a5; }
body[data-theme="dark"] .admin-users-stat-icon.is-purple { background: rgba(139,92,246,0.16);  color: #c4b5fd; }
body[data-theme="dark"] .admin-users-stat-icon.is-indigo { background: rgba(99,102,241,0.16);  color: #a5b4fc; }

body[data-theme="dark"] .admin-users-stat-label { color: #9da1a6; }
body[data-theme="dark"] .admin-users-stat-value { color: #ffffff; }

body[data-theme="dark"] .admin-users-sidebar-section-title { color: #d1d5db; }

body[data-theme="dark"] .admin-users-invite-submit {
  background: #37373d;
  color: #f1f5f9;
}
body[data-theme="dark"] .admin-users-invite-submit:hover { background: #4a4a50; }

body[data-theme="dark"] .admin-users-invite-link-box { border-top-color: #3c3c3c; }
body[data-theme="dark"] .admin-users-invite-link-box label { color: #9da1a6; }
body[data-theme="dark"] .admin-users-invite-field label { color: #9da1a6; }

body[data-theme="dark"] .admin-users-main-toolbar {
  background: #1f1f22;
  border-color: #3c3c3c;
}
body[data-theme="dark"] .admin-users-main-toolbar-left h3 { color: #f1f5f9; }
body[data-theme="dark"] .admin-users-list-count { color: #9da1a6; }
body[data-theme="dark"] .admin-users-per-page   { color: #9da1a6; }
body[data-theme="dark"] .admin-users-filter-icon{ color: #64748b; }
body[data-theme="dark"] .admin-users-muted      { color: #9da1a6; }
body[data-theme="dark"] .admin-users-empty      { color: #9da1a6; }

body[data-theme="dark"] .admin-users-page-chip,
body[data-theme="dark"] .admin-users-page-link  { background: #2d2d30; border-color: #3c3c3c; color: #d1d5db; }
body[data-theme="dark"] .admin-users-page-chip:hover,
body[data-theme="dark"] .admin-users-page-link:hover { background: #37373d; }
body[data-theme="dark"] .admin-users-page-chip.is-active,
body[data-theme="dark"] .admin-users-page-link.is-current { background: #f1f5f9; border-color: #f1f5f9; color: #0f172a; }

body[data-theme="dark"] .admin-users-table-wrap { background: #1f1f22; }
body[data-theme="dark"] .admin-users-table th   { background: #252526; color: #9da1a6; border-bottom-color: #3c3c3c; }
body[data-theme="dark"] th[data-sort-col]:hover  { background: #2d2d30; color: #d1d5db; }
body[data-theme="dark"] .admin-users-table td   { border-bottom-color: #2d2d30; }
body[data-theme="dark"] .admin-users-table tbody tr:hover { background: #252526; }
body[data-theme="dark"] .admin-users-bottom-bar { background: #1f1f22; border-top-color: #3c3c3c; }

body[data-theme="dark"] .admin-users-col-id   { color: #64748b; }
body[data-theme="dark"] .admin-users-col-date { color: #9da1a6; }
body[data-theme="dark"] .admin-users-col-email{ color: #cbd5e1; }

body[data-theme="dark"] .admin-users-avatar { filter: brightness(0.85); }
body[data-theme="dark"] .admin-users-name-link { color: #f1f5f9; }
body[data-theme="dark"] .admin-users-name-link:hover { color: #93c5fd; }
body[data-theme="dark"] .admin-users-danger-flag { color: #ef4444; }

body[data-theme="dark"] .admin-users-pill.is-admin      { background: #30333a; border-color: #4b5563; color: #e5e7eb; }
body[data-theme="dark"] .admin-users-pill.is-redacteur  { background: rgba(99,102,241,0.18); border-color: rgba(99,102,241,0.45); color: #c4b5fd; }
body[data-theme="dark"] .admin-users-pill.is-contributor,
body[data-theme="dark"] .admin-users-pill.is-neutral,
body[data-theme="dark"] .admin-users-self-tag           { background: #2d2d30; border-color: #3c3c3c; color: #9da1a6; }
body[data-theme="dark"] .admin-users-pill.is-active     { background: rgba(34,197,94,0.14);  border-color: rgba(34,197,94,0.4);  color: #86efac; }
body[data-theme="dark"] .admin-users-pill.is-suspended  { background: rgba(239,68,68,0.14);  border-color: rgba(239,68,68,0.4);  color: #fca5a5; }

body[data-theme="dark"] .admin-users-rights-toggle { background: #2d2d30; border-color: #3c3c3c; color: #9da1a6; }
body[data-theme="dark"] .admin-users-rights-toggle:hover { background: #37373d; }
body[data-theme="dark"] .admin-users-rights-toggle.has-grants { background: rgba(99,102,241,0.18); border-color: rgba(99,102,241,0.45); color: #c4b5fd; }
body[data-theme="dark"] .admin-users-rights-menu { background: #1e1e21; border-color: #3c3c3c; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
body[data-theme="dark"] .admin-users-right-btn { color: #9da1a6; }
body[data-theme="dark"] .admin-users-right-btn:hover { background: #2d2d30; color: #e2e8f0; }
body[data-theme="dark"] .admin-users-right-btn i { color: #3c3c3c; }
body[data-theme="dark"] .admin-users-right-btn.is-granted { color: #4ade80; }
body[data-theme="dark"] .admin-users-right-btn.is-granted i { color: #22c55e; }
body[data-theme="dark"] .admin-users-right-btn.is-granted:hover { background: rgba(34,197,94,.1); color: #86efac; }

body[data-theme="dark"] .admin-users-icon-btn { background: #2d2d30; border-color: #3c3c3c; color: #9da1a6; }
body[data-theme="dark"] .admin-users-icon-btn:hover { background: #37373d; }
body[data-theme="dark"] .admin-users-icon-btn.is-warning { border-color: #f59e0b; color: #fcd34d; }
body[data-theme="dark"] .admin-users-icon-btn.is-warning:hover { background: rgba(245,158,11,0.12); }
body[data-theme="dark"] .admin-users-icon-btn.is-success { border-color: #22c55e; color: #86efac; }
body[data-theme="dark"] .admin-users-icon-btn.is-success:hover { background: rgba(34,197,94,0.12); }
body[data-theme="dark"] .admin-users-icon-btn.is-danger  { border-color: #ef4444; color: #fca5a5; }
body[data-theme="dark"] .admin-users-icon-btn.is-danger:hover  { background: rgba(239,68,68,0.12); }

body[data-theme="dark"] .admin-comments-table-wrap,
body[data-theme="dark"] .admin-empty {
  background: #252526;
  border-color: #3c3c3c;
}

body[data-theme="dark"] .admin-table th {
  background: #1f1f22;
  color: #9da1a6;
}

body[data-theme="dark"] .admin-table td {
  border-bottom-color: #3c3c3c;
}

body[data-theme="dark"] .admin-table tbody tr:hover {
  background: #2d2d30;
}

body[data-theme="dark"] .admin-comment-body,
body[data-theme="dark"] .admin-empty {
  color: #d1d5db;
}

body[data-theme="dark"] .admin-inline-form select {
  background: #1f1f22;
  border-color: #3c3c3c;
  color: #d1d5db;
}

body[data-theme="dark"] .admin-users-danger-flag {
  color: #ef4444;
}

body[data-theme="dark"] .admin-users-per-page {
  color: #9da1a6;
}

body[data-theme="dark"] .admin-users-page-chip,
body[data-theme="dark"] .admin-users-page-link {
  background: #2d2d30;
  border-color: #3c3c3c;
  color: #d1d5db;
}

body[data-theme="dark"] .admin-users-page-chip:hover,
body[data-theme="dark"] .admin-users-page-link:hover {
  background: #37373d;
}

body[data-theme="dark"] .admin-users-page-chip.is-active,
body[data-theme="dark"] .admin-users-page-link.is-current {
  background: #30333a;
  border-color: #4b5563;
  color: #ffffff;
}

/* ======================
   ROND PORTAIL REDESIGN
   ====================== */

.rond-portail-page {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #f9f0e6;
  padding: 20px;
  border-radius: 20px;
}

.rond-portail-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 4px 0 8px;
}

.rond-portail-hero-copy {
  min-width: 0;
}

.rond-portail-kicker {
  display: inline-flex;
  margin-bottom: 4px;
  color: #d65e2c;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.rond-portail-hero h2 {
  margin: 0;
  color: #0f172a;
  font-size: clamp(1.45rem, 3vw, 2rem);
  line-height: 1.08;
}

.rond-portail-hero p {
  max-width: 52ch;
  margin: 6px 0 0;
  color: #475569;
  font-size: 0.95rem;
}

.rond-portail-hero-side {
  display: grid;
  justify-items: end;
  gap: 10px;
}

.rond-portail-stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.rond-portail-stats span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid #e2d4c3;
  border-radius: 999px;
  background: #fffaf3;
  color: #475569;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
}

.rond-portail-stats strong {
  display: inline-block;
  color: #0f172a;
  font-size: 0.95rem;
  line-height: 1;
}

.rond-portail-hero-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid #c94f20;
  border-radius: 999px;
  background: #d65e2c;
  font-size: 0.9rem;
  font-weight: 800;
  color: #ffffff;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(173, 66, 22, 0.18);
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.rond-portail-hero-link i {
  font-size: 1rem;
  color: #ffffff;
}

.rond-portail-hero-link:hover {
  background: #bd4d20;
  color: #ffffff;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(173, 66, 22, 0.22);
}

.rond-portail-hero-link:focus-visible {
  outline: 2px solid rgba(12, 38, 69, 0.28);
  outline-offset: 3px;
  border-radius: 8px;
}

.rond-portail-filters {
  border: 1px solid #dce3ec;
  background: #ffffff;
  border-radius: 14px;
  padding: 12px;
  display: grid;
  gap: 12px;
}

.rond-portail-top-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 10px;
}

.rond-portail-search-wrap label {
  display: block;
  margin-bottom: 4px;
  color: #64748b;
  font-size: 0.8rem;
}

.rond-portail-sort-wrap label {
  display: block;
  margin-bottom: 4px;
  color: #64748b;
  font-size: 0.8rem;
}

.rond-portail-sort-wrap select {
  width: 100%;
  min-height: 38px;
}

.rond-portail-search-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #d5dbe4;
  background: #f8fafc;
  border-radius: 12px;
  padding: 0 10px;
}

.rond-portail-search-input-wrap i {
  color: #64748b;
}

.rond-portail-search-input-wrap input {
  border: none;
  background: transparent;
  min-height: 38px;
  padding: 0;
}

.rond-portail-search-input-wrap input:focus {
  box-shadow: none;
  outline: none;
}

.rond-portail-filter-groups {
  display: grid;
  gap: 8px;
}

.rond-portail-filter-group {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: wrap;
}

.rond-portail-filter-title {
  font-size: 0.8rem;
  color: #64748b;
  min-width: 56px;
  padding-top: 4px;
}

.rond-portail-filter-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.rond-filter-chip {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid #d1d5db;
  background: #ffffff;
  color: #334155;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.rond-filter-chip:hover {
  background: #f3f4f6;
}

.rond-filter-chip.is-active {
  background: #0c2645;
  border-color: #0c2645;
  color: #ffffff;
}

.rond-results-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 38px;
  padding: 0 2px;
  color: #475569;
  font-size: 0.86rem;
  font-weight: 800;
}

.rond-reset-filters {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  background: #ffffff;
  color: #334155;
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
}

.rond-reset-filters:hover {
  background: #f3f4f6;
}

.rond-list {
  gap: 8px;
}

.rond-item {
  border: 1px solid #e4dfd6;
  border-radius: 14px;
  background: #fffaf3;
  padding: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.rond-item:hover {
  border-color: #e7c3a8;
  box-shadow: 0 12px 28px rgba(66, 38, 20, 0.08);
  transform: translateY(-1px);
}

.rond-item-main {
  min-width: 0;
}

.rond-link {
  gap: 12px;
  min-height: 74px;
  text-decoration: none;
}

.rond-thumb {
  width: 66px;
  height: 66px;
  border-radius: 12px;
}

.rond-thumb-placeholder {
  background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
}

.rond-thumb-placeholder span {
  font-size: 1.15rem;
  color: #334155;
}

.rond-main {
  gap: 4px;
}

.rond-line1 {
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.rond-name {
  color: #111827;
  font-size: 1.04rem;
  line-height: 1.2;
}

.rond-line2 {
  gap: 10px;
  font-size: 0.84rem;
  flex-wrap: wrap;
}

.rond-meta-schedule {
  color: #172554;
  font-weight: 800;
}

.rond-meta-inline {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.rond-meta-inline i {
  color: #64748b;
}

.rond-item-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: center;
}

.rond-action-btn,
.rond-fb-btn {
  min-height: 36px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid #d1d5db;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.rond-action-btn {
  background: #ffffff;
  color: #1f2937;
  min-width: 36px;
  padding: 0;
}

.rond-action-btn i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  line-height: 1;
}

.rond-action-btn:hover {
  background: #f3f4f6;
  text-decoration: none;
}

.rond-fb-btn {
  background: #eff6ff;
  color: #1d4ed8;
}

.rond-fb-btn i {
  line-height: 1;
}

.rond-fb-btn:hover {
  background: #dbeafe;
}

.rond-portail-empty {
  margin: 0;
  padding: 14px;
  border-radius: 12px;
  border: 1px dashed #cbd5e1;
  background: #f8fafc;
  color: #64748b;
}

@media (max-width: 900px) {
  .rond-portail-hero {
    grid-template-columns: 1fr;
  }

  .rond-portail-hero-side {
    justify-items: stretch;
  }

  .rond-portail-stats {
    justify-content: flex-start;
  }

  .rond-item {
    grid-template-columns: 1fr;
    align-items: flex-start;
  }

  .rond-item-actions {
    width: 100%;
    justify-content: flex-end;
    align-items: center;
  }
}

@media (max-width: 640px) {
  .rond-portail-page {
    padding: 14px;
    border-radius: 16px;
  }

  .rond-portail-hero p {
    font-size: 0.9rem;
  }

  .rond-portail-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .rond-portail-stats span {
    justify-content: center;
    padding: 0 6px;
  }

  .rond-portail-hero-link {
    width: 100%;
  }

  .rond-portail-top-controls {
    grid-template-columns: 1fr;
  }

  .rond-portail-filter-group {
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
  }

  .rond-portail-filter-title {
    min-width: 0;
    padding-top: 0;
  }

  .rond-portail-filter-chips {
    flex-wrap: nowrap;
    margin: 0 -12px;
    padding: 0 12px 4px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .rond-portail-filter-chips::-webkit-scrollbar {
    display: none;
  }

  .rond-filter-chip {
    flex: 0 0 auto;
  }

  .rond-results-bar {
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    gap: 10px;
  }

  .rond-reset-filters {
    width: auto;
    min-width: 150px;
  }

  .rond-link {
    align-items: flex-start;
  }

  .rond-thumb {
    width: 58px;
    height: 58px;
    border-radius: 10px;
  }

  .rond-action-btn,
  .rond-fb-btn {
    min-height: 34px;
    font-size: 0.76rem;
    padding: 0 9px;
  }

  .rond-item-actions {
    width: 100%;
    justify-content: flex-end;
    padding-right: 2px;
    align-items: center;
  }

  .rond-action-btn {
    min-width: 34px;
    padding: 0;
  }
}

body[data-theme="dark"] .rond-portail-page {
  background: #1e1e1e;
}

body[data-theme="dark"] .rond-portail-hero,
body[data-theme="dark"] .rond-portail-filters,
body[data-theme="dark"] .rond-portail-empty {
  background: #252526;
  border-color: #3c3c3c;
}

body[data-theme="dark"] .rond-portail-hero {
  background: transparent;
  border-color: transparent;
}

body[data-theme="dark"] .rond-portail-hero h2,
body[data-theme="dark"] .rond-portail-stats strong {
  color: #ffffff;
}

body[data-theme="dark"] .rond-portail-hero p,
body[data-theme="dark"] .rond-portail-stats span,
body[data-theme="dark"] .rond-results-bar {
  color: #b9c7da;
}

body[data-theme="dark"] .rond-portail-stats span {
  background: #252526;
  border-color: #3c3c3c;
}

body[data-theme="dark"] .rond-portail-filter-title,
body[data-theme="dark"] .rond-portail-search-wrap label,
body[data-theme="dark"] .rond-portail-sort-wrap label,
body[data-theme="dark"] .rond-portail-empty {
  color: #9da1a6;
}

body[data-theme="dark"] .rond-name,
body[data-theme="dark"] .rond-action-btn {
  color: #ffffff;
}

body[data-theme="dark"] .rond-portail-search-input-wrap {
  background: #1e1e1e;
  border-color: #3c3c3c;
}

body[data-theme="dark"] .rond-portail-search-input-wrap i,
body[data-theme="dark"] .rond-meta-inline i {
  color: #9da1a6;
}

body[data-theme="dark"] .rond-portail-hero-link {
  background: #e1784b;
  border-color: #e1784b;
  color: #ffffff;
}

body[data-theme="dark"] .rond-portail-hero-link i {
  color: #ffffff;
}

body[data-theme="dark"] .rond-portail-hero-link:hover {
  background: #d65e2c;
  color: #ffffff;
}

body[data-theme="dark"] .rond-filter-chip,
body[data-theme="dark"] .rond-action-btn,
body[data-theme="dark"] .rond-reset-filters {
  background: #2d2d30;
  border-color: #3c3c3c;
  color: #d1d5db;
}

body[data-theme="dark"] .rond-filter-chip:hover,
body[data-theme="dark"] .rond-action-btn:hover,
body[data-theme="dark"] .rond-reset-filters:hover {
  background: #37373d;
}

body[data-theme="dark"] .rond-filter-chip.is-active {
  background: #e1784b;
  border-color: #e1784b;
  color: #ffffff;
}

body[data-theme="dark"] .rond-thumb-placeholder {
  background: linear-gradient(135deg, #1f2937, #334155);
}

body[data-theme="dark"] .rond-thumb-placeholder span {
  color: #cbd5e1;
}

body[data-theme="dark"] .rond-item,
body[data-theme="dark"] .rond-item:hover {
  background: #252526;
  border-color: #3c3c3c;
}

body[data-theme="dark"] .rond-line2 {
  color: #9da1a6;
}

body[data-theme="dark"] .rond-meta-schedule {
  color: #bfdbfe;
}

body[data-theme="dark"] .rond-fb-btn {
  background: rgba(30, 64, 175, 0.22);
  border-color: rgba(30, 64, 175, 0.5);
  color: #93c5fd;
}

body[data-theme="dark"] .rond-fb-btn:hover {
  background: rgba(30, 64, 175, 0.32);
}

/* ═══════════════════════════════════════
   Rond portail refresh, aligned with home/search/contrib
   ═══════════════════════════════════════ */

.site-main:has(.rond-portail-page) {
  max-width: 100%;
  padding: 0;
}

.rond-portail-page {
  min-height: calc(100vh - 56px);
  gap: 16px;
  padding: 20px 40px 58px;
  border-radius: 0;
  background: #fffaf3;
  background-image:
    radial-gradient(ellipse at 78% 8%, rgba(217,85,40,0.28) 0%, transparent 52%),
    radial-gradient(ellipse at 12% 92%, rgba(40,120,95,0.12) 0%, transparent 45%);
}

.rond-portail-hero,
.rond-upcoming,
.rond-portail-filters,
.rond-results-bar,
.rond-list,
.rond-portail-empty {
  width: min(1100px, 100%);
  margin-inline: auto;
}

.rond-portail-hero {
  display: none;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 24px;
  padding: 10px 0 2px;
  background: transparent;
  border: 0;
}

.rond-upcoming {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.rond-upcoming-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.90);
  border-radius: 20px;
  background: rgba(255,255,255,0.66);
  color: inherit;
  text-decoration: none;
  box-shadow: 0 8px 34px rgba(180,100,40,0.10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: border-color 0.14s, box-shadow 0.16s, transform 0.14s, background 0.14s;
}

.rond-upcoming-card:hover {
  border-color: rgba(217,85,40,0.32);
  background: rgba(255,255,255,0.86);
  box-shadow: 0 12px 34px rgba(180,100,40,0.15);
  transform: translateY(-1px);
  text-decoration: none;
}

.rond-upcoming-thumb {
  width: 74px;
  height: 74px;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(217,85,40,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}

.rond-upcoming-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rond-upcoming-placeholder {
  color: #d95528;
  font-size: 1.3rem;
}

.rond-upcoming-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rond-upcoming-top {
  min-height: 22px;
}

.rond-upcoming-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 9px;
  border: 1px solid rgba(217,85,40,0.16);
  border-radius: 999px;
  background: rgba(255,255,255,0.70);
  color: #6f4e38;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.rond-upcoming-badge.is-today {
  background: #d95528;
  border-color: #d95528;
  color: #ffffff;
}

.rond-upcoming-badge.is-tomorrow {
  background: rgba(40,120,95,0.12);
  color: #28785f;
}

.rond-upcoming-card strong {
  color: #1a0e06;
  font-size: 1.02rem;
  font-weight: 900;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rond-upcoming-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: #706050;
  font-size: 0.78rem;
  font-weight: 700;
}

.rond-upcoming-meta span {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rond-upcoming-meta i {
  color: #907060;
  flex: 0 0 auto;
}

.rond-portail-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 10px;
  color: #d95528;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.rond-portail-hero h1,
.rond-portail-hero h2 {
  margin: 0;
  color: #1a0e06;
  font-size: clamp(2rem, 4.4vw, 4rem);
  font-weight: 900;
  line-height: 0.96;
  letter-spacing: -0.02em;
}

.rond-portail-hero p {
  max-width: 560px;
  margin: 16px 0 0;
  color: #706050;
  font-size: 1rem;
  line-height: 1.7;
}

.rond-portail-hero-side {
  align-self: stretch;
  align-content: end;
  gap: 10px;
}

.rond-portail-stats {
  gap: 8px;
}

.rond-portail-stats span {
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,0.88);
  border-radius: 14px;
  background: rgba(255,255,255,0.62);
  color: #907060;
  box-shadow: 0 4px 20px rgba(180,100,40,0.07);
}

.rond-portail-stats strong {
  color: #1a0e06;
  font-size: 1.18rem;
  font-weight: 900;
}

.rond-portail-hero-link {
  min-height: 42px;
  border-color: #d95528;
  background: #d95528;
  box-shadow: 0 8px 26px rgba(217,85,40,0.24);
}

.rond-portail-hero-link:hover {
  background: #c04420;
  border-color: #c04420;
}

.rond-portail-filters {
  padding: 18px;
  border: 1px solid rgba(255,255,255,0.90);
  border-radius: 20px;
  background: rgba(255,255,255,0.66);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 34px rgba(180,100,40,0.10);
}

.rond-portail-top-controls {
  grid-template-columns: minmax(0, 1fr) minmax(190px, 240px);
  gap: 12px;
}

.rond-portail-search-wrap label,
.rond-portail-sort-wrap label,
.rond-portail-filter-title {
  color: #d95528;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.rond-portail-search-input-wrap {
  min-height: 54px;
  padding: 0 16px;
  border: 1px solid rgba(217,85,40,0.16);
  border-radius: 999px;
  background: rgba(255,255,255,0.70);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.55);
}

.rond-portail-search-input-wrap:focus-within {
  background: #ffffff;
  border-color: rgba(217,85,40,0.40);
  box-shadow: 0 0 0 4px rgba(217,85,40,0.12);
}

.rond-portail-search-input-wrap i {
  color: #907060;
}

.rond-portail-search-input-wrap input {
  min-height: 52px;
  color: #1a0e06;
  font-size: 1rem;
  font-weight: 800;
}

.rond-portail-sort-wrap select {
  min-height: 54px;
  border: 1px solid rgba(217,85,40,0.16);
  border-radius: 14px;
  background-color: rgba(255,255,255,0.70);
  color: #5f4635;
  font-weight: 800;
}

.rond-portail-filter-groups {
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.rond-portail-filter-group {
  min-width: 0;
  gap: 12px;
}

.rond-portail-filter-title {
  min-width: 72px;
  padding-top: 8px;
}

.rond-filter-chip {
  min-height: 34px;
  border-color: rgba(217,85,40,0.16);
  background: rgba(255,255,255,0.66);
  color: #5f4635;
}

.rond-filter-chip:hover {
  background: rgba(217,85,40,0.08);
  border-color: rgba(217,85,40,0.30);
  color: #1a0e06;
}

.rond-filter-chip.is-active {
  background: #d95528;
  border-color: #d95528;
  color: #ffffff;
}

.rond-results-bar {
  min-height: 44px;
  padding: 0 4px;
  color: #907060;
}

.rond-reset-filters {
  border-color: rgba(217,85,40,0.20);
  background: rgba(255,255,255,0.70);
  color: #5f4635;
}

.rond-reset-filters:hover {
  background: rgba(217,85,40,0.10);
  color: #1a0e06;
}

.rond-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 auto;
  padding: 18px;
  list-style: none;
  border: 1px solid rgba(255,255,255,0.90);
  border-radius: 20px;
  background: rgba(255,255,255,0.66);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 34px rgba(180,100,40,0.10);
}

.rond-item {
  padding: 14px;
  border: 1px solid rgba(217,85,40,0.12);
  border-radius: 16px;
  background: rgba(255,255,255,0.68);
}

.rond-item:hover {
  border-color: rgba(217,85,40,0.32);
  background: rgba(255,255,255,0.86);
  box-shadow: 0 12px 34px rgba(180,100,40,0.15);
}

.rond-link {
  display: flex;
  align-items: center;
  gap: 14px;
}

.rond-thumb {
  width: 76px;
  height: 76px;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(217,85,40,0.08);
}

.rond-thumb-placeholder {
  background: rgba(217,85,40,0.08);
}

.rond-thumb-placeholder span {
  color: #d95528;
}

.rond-name {
  color: #1a0e06;
  font-size: 1.08rem;
  font-weight: 900;
}

.rond-region-pill,
.rond-badge {
  border-color: rgba(217,85,40,0.16);
  background: rgba(255,255,255,0.70);
  color: #6f4e38;
}

.rond-badge-zordi {
  background: rgba(217,85,40,0.12);
  color: #d95528;
}

.rond-badge-live {
  background: #ffd24a;
  border-color: #1a0e06;
  color: #1a0e06;
}

.rond-badge-domin {
  background: rgba(40,120,95,0.12);
  color: #28785f;
}

.rond-line2 {
  color: #706050;
}

.rond-meta-schedule {
  color: #1a0e06;
}

.rond-meta-inline i {
  color: #907060;
}

.rond-action-btn,
.rond-fb-btn {
  min-height: 38px;
  border-color: rgba(217,85,40,0.18);
}

.rond-action-btn {
  background: rgba(255,255,255,0.80);
  color: #5f4635;
}

.rond-action-btn:hover {
  background: #d95528;
  border-color: #d95528;
  color: #ffffff;
}

.rond-fb-btn {
  background: rgba(29,78,216,0.08);
  border-color: rgba(29,78,216,0.16);
  color: #1d4ed8;
}

.rond-fb-btn:hover {
  background: rgba(29,78,216,0.14);
  text-decoration: none;
}

.rond-portail-empty {
  border-color: rgba(217,85,40,0.18);
  background: rgba(255,255,255,0.62);
  color: #907060;
}

body[data-theme="dark"] .rond-portail-page {
  background: #130b05;
  background-image:
    radial-gradient(ellipse at 78% 8%, rgba(217,85,40,0.16) 0%, transparent 54%),
    radial-gradient(ellipse at 12% 92%, rgba(40,120,95,0.08) 0%, transparent 46%);
}

body[data-theme="dark"] .rond-portail-hero {
  display: none;
  padding: 10px 0 2px;
  border: none;
  background: transparent;
}

body[data-theme="dark"] .rond-portail-hero h1,
body[data-theme="dark"] .rond-portail-hero h2,
body[data-theme="dark"] .rond-portail-stats strong,
body[data-theme="dark"] .rond-name,
body[data-theme="dark"] .rond-meta-schedule {
  color: #c0ad9a;
}

body[data-theme="dark"] .rond-portail-hero p,
body[data-theme="dark"] .rond-portail-stats span,
body[data-theme="dark"] .rond-results-bar,
body[data-theme="dark"] .rond-line2 {
  color: #b19f8e;
}

body[data-theme="dark"] .rond-portail-filters,
body[data-theme="dark"] .rond-upcoming-card,
body[data-theme="dark"] .rond-list,
body[data-theme="dark"] .rond-portail-empty {
  background: rgba(27,16,9,0.72);
  border-color: rgba(240,224,200,0.10);
  box-shadow: 0 8px 34px rgba(0,0,0,0.14);
}

body[data-theme="dark"] .rond-upcoming-card:hover {
  background: rgba(255,250,243,0.055);
  border-color: rgba(217,85,40,0.22);
  box-shadow: 0 12px 34px rgba(0,0,0,0.12);
}

body[data-theme="dark"] .rond-upcoming-thumb {
  background: rgba(217,85,40,0.10);
}

body[data-theme="dark"] .rond-upcoming-placeholder,
body[data-theme="dark"] .rond-upcoming-meta i {
  color: #bca996;
}

body[data-theme="dark"] .rond-upcoming-card strong {
  color: #c0ad9a;
}

body[data-theme="dark"] .rond-upcoming-meta {
  color: #b19f8e;
}

body[data-theme="dark"] .rond-upcoming-badge {
  background: rgba(255,250,243,0.05);
  border-color: rgba(240,224,200,0.12);
  color: #cbb8a4;
}

body[data-theme="dark"] .rond-upcoming-badge.is-today {
  background: #d95528;
  border-color: #d95528;
  color: #ffffff;
}

body[data-theme="dark"] .rond-upcoming-badge.is-tomorrow {
  background: rgba(75,170,130,0.14);
  color: #6bd0a5;
}

body[data-theme="dark"] .rond-portail-stats span,
body[data-theme="dark"] .rond-portail-search-input-wrap,
body[data-theme="dark"] .rond-portail-sort-wrap select {
  background: rgba(255,250,243,0.08);
  border-color: rgba(240,224,200,0.14);
  color: #cbb8a4;
}

body[data-theme="dark"] .rond-portail-search-input-wrap:focus-within {
  background: rgba(255,250,243,0.11);
  border-color: rgba(217,85,40,0.34);
  box-shadow: 0 0 0 4px rgba(217,85,40,0.11);
}

body[data-theme="dark"] .rond-portail-search-input-wrap input {
  border: 0;
  background: transparent;
  color: #d7c7b4;
}

body[data-theme="dark"] .rond-portail-search-input-wrap input::placeholder {
  color: #6f7f99;
}

body[data-theme="dark"] .rond-portail-sort-wrap select {
  background-color: rgba(255,250,243,0.08);
}

body[data-theme="dark"] .rond-filter-chip,
body[data-theme="dark"] .rond-reset-filters,
body[data-theme="dark"] .rond-action-btn {
  background: rgba(255,250,243,0.07);
  border-color: rgba(240,224,200,0.12);
  color: #cbb8a4;
}

body[data-theme="dark"] .rond-filter-chip:hover,
body[data-theme="dark"] .rond-reset-filters:hover,
body[data-theme="dark"] .rond-action-btn:hover {
  background: rgba(217,85,40,0.14);
  border-color: rgba(217,85,40,0.24);
  color: #c0ad9a;
}

body[data-theme="dark"] .rond-filter-chip.is-active {
  background: #d95528;
  border-color: #d95528;
  color: #ffffff;
}

body[data-theme="dark"] .rond-item {
  background: rgba(255,250,243,0.035);
  border-color: rgba(240,224,200,0.08);
}

body[data-theme="dark"] .rond-item:hover {
  background: rgba(255,250,243,0.055);
  border-color: rgba(217,85,40,0.22);
  box-shadow: 0 12px 34px rgba(0,0,0,0.12);
}

body[data-theme="dark"] .rond-thumb,
body[data-theme="dark"] .rond-thumb-placeholder {
  background: rgba(217,85,40,0.10);
}

body[data-theme="dark"] .rond-thumb-placeholder span,
body[data-theme="dark"] .rond-portail-search-input-wrap i,
body[data-theme="dark"] .rond-meta-inline i {
  color: #bca996;
}

body[data-theme="dark"] .rond-region-pill,
body[data-theme="dark"] .rond-badge {
  background: rgba(255,250,243,0.05);
  border-color: rgba(240,224,200,0.12);
  color: #cbb8a4;
}

body[data-theme="dark"] .rond-badge-zordi {
  background: rgba(217,85,40,0.16);
  color: #f0a060;
}

body[data-theme="dark"] .rond-badge-live {
  background: #ffd24a;
  border-color: rgba(255,255,255,0.88);
  color: #1a0e06;
}

body[data-theme="dark"] .rond-badge-domin {
  background: rgba(75,170,130,0.14);
  color: #6bd0a5;
}

body[data-theme="dark"] .rond-fb-btn {
  background: rgba(29,78,216,0.16);
  border-color: rgba(96,165,250,0.22);
  color: #93c5fd;
}

body[data-theme="dark"] .rond-fb-btn:hover {
  background: rgba(29,78,216,0.24);
}

body[data-theme="dark"] .rond-portail-hero-link {
  background: #d95528;
  border-color: #d95528;
  color: #ffffff;
}

body[data-theme="dark"] .rond-portail-hero-link:hover {
  background: #c0ad9a;
  border-color: #c0ad9a;
  color: #1a0e06;
}

@media (max-width: 900px) {
  .rond-portail-page {
    padding: 18px 24px 48px;
  }

  .rond-upcoming {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rond-portail-filter-groups {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .rond-portail-page {
    padding: 16px 16px 40px;
  }

  .rond-portail-hero h1,
  .rond-portail-hero h2 {
    font-size: 2.1rem;
  }

  .rond-upcoming {
    grid-template-columns: 1fr;
  }

  .rond-portail-filters,
  .rond-list {
    padding: 12px;
    border-radius: 16px;
  }

  .rond-portail-search-input-wrap,
  .rond-portail-sort-wrap select {
    min-height: 50px;
  }

  .rond-portail-filter-title {
    padding-top: 0;
  }
}

/* Rond portail: grid is the primary searchable view */
.rond-upcoming {
  display: none;
}

.rond-portail-filter-groups {
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
}

.rond-portail-filter-group {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(217,85,40,0.12);
  border-radius: 16px;
  background: rgba(255,255,255,0.36);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}

.rond-portail-filter-title {
  min-width: auto;
  width: auto;
  padding-top: 0;
  white-space: nowrap;
}

.rond-portail-filter-chips {
  width: 100%;
  justify-content: flex-start;
}

.rond-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.rond-item {
  min-width: 0;
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: 14px;
}

.rond-link {
  flex-direction: column;
  align-items: flex-start;
  min-height: 0;
}

.rond-thumb {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

.rond-main {
  width: 100%;
  gap: 8px;
}

.rond-line2 {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.rond-item-actions {
  width: 100%;
  justify-content: space-between;
}

.rond-fb-btn {
  flex: 1;
}

.rond-action-btn {
  flex: 0 0 auto;
}

body[data-theme="dark"] .rond-portail-filter-group {
  background: rgba(255,250,243,0.035);
  border-color: rgba(240,224,200,0.08);
}

/* Rond compact filters and card badges */
.rond-portail-filters {
  padding: 12px;
}

.rond-portail-top-controls {
  gap: 10px;
}

.rond-portail-search-input-wrap {
  min-height: 46px;
  padding: 0 8px 0 14px;
}

.rond-portail-search-input-wrap input {
  min-height: 44px;
}

.rond-portail-sort-wrap select {
  min-height: 46px;
}

.rond-portail-filter-groups {
  gap: 10px;
}

.rond-portail-filter-group {
  padding: 10px 12px;
}

.rond-filter-chip {
  min-height: 30px;
  padding: 0 10px;
}

.rond-results-bar {
  display: none;
}

.rond-reset-filters {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
}

.rond-item {
  position: relative;
}

.rond-item > .rond-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 70px;
  min-height: 58px;
  padding: 0;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,0.92);
  border-radius: 14px;
  background: #ffffff;
  font-size: 0.64rem;
  font-weight: 950;
  letter-spacing: 0.07em;
  line-height: 1;
  text-transform: uppercase;
  box-shadow: 0 14px 26px rgba(66,38,20,0.22);
}

.rond-item > .rond-badge span,
.rond-item > .rond-badge small {
  display: block;
}

.rond-item > .rond-badge span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  min-height: 24px;
  padding: 0 7px;
  color: #ffffff;
  white-space: nowrap;
}

.rond-item > .rond-badge span i {
  font-size: 0.76rem;
  line-height: 1;
}

.rond-item > .rond-badge small {
  margin: 0;
  padding: 7px 6px 8px;
  width: 100%;
  border-top: 0;
  color: #1a0e06;
  font-size: 1rem;
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1;
  text-align: center;
  opacity: 1;
}

.rond-item > .rond-badge-zordi {
  color: #d95528;
}

.rond-item > .rond-badge-zordi span {
  background: #d95528;
}

.rond-item > .rond-badge-live {
  color: #1a0e06;
  border-color: rgba(26,14,6,0.16);
  box-shadow: 0 10px 24px rgba(255,210,74,0.28);
}

.rond-item > .rond-badge-live span {
  background: #ffd24a;
  color: #1a0e06;
}

.rond-item > .rond-badge-live span::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #d95528;
  box-shadow: 0 0 0 4px rgba(217,85,40,0.18);
  animation: rondLivePulse 1.4s ease-in-out infinite;
}

.rond-item > .rond-badge-domin {
  color: #ffffff;
}

.rond-item > .rond-badge-domin span {
  background: #28785f;
}

@keyframes rondLivePulse {
  0%, 100% { transform: scale(0.86); opacity: 0.78; }
  50% { transform: scale(1.08); opacity: 1; }
}

body[data-theme="dark"] .rond-item > .rond-badge {
  border-color: rgba(255,255,255,0.62);
  background: #f5ead8;
  box-shadow: 0 10px 22px rgba(0,0,0,0.32);
}

body[data-theme="dark"] .rond-item > .rond-badge-zordi {
  color: #ffffff;
}

body[data-theme="dark"] .rond-item > .rond-badge-live {
  color: #1a0e06;
  border-color: rgba(255,255,255,0.72);
  box-shadow: 0 10px 24px rgba(255,210,74,0.20);
}

body[data-theme="dark"] .rond-item > .rond-badge-domin {
  color: #ffffff;
}

@media (max-width: 900px) {
  .rond-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rond-portail-filter-groups {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .rond-portail-top-controls {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .rond-portail-search-wrap,
  .rond-portail-sort-wrap {
    min-width: 0;
  }

  .rond-portail-search-input-wrap {
    width: 100%;
  }

  .rond-portail-search-input-wrap input {
    width: 100%;
    min-width: 0;
  }

  .rond-portail-sort-wrap select {
    width: 100%;
  }

  .rond-portail-filter-group {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .rond-list {
    grid-template-columns: 1fr;
  }
}

/* Rond detail redesign */
.site-main:has(.rond-detail-page) {
  max-width: 100%;
  padding: 0;
}

.rond-detail-page {
  min-height: calc(100vh - 56px);
  padding: 20px 40px 58px;
  background: #fffaf3;
  background-image:
    radial-gradient(ellipse at 78% 8%, rgba(217,85,40,0.28) 0%, transparent 52%),
    radial-gradient(ellipse at 12% 92%, rgba(40,120,95,0.12) 0%, transparent 45%);
}

.rond-detail-back,
.rond-detail-shell {
  width: min(1100px, 100%);
  margin-inline: auto;
}

.rond-detail-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  margin-bottom: 14px;
  color: #d95528;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}

.rond-detail-back:hover {
  color: #1a0e06;
  text-decoration: none;
}

.rond-detail-shell {
  display: grid;
  gap: 16px;
}

.rond-detail-hero,
.rond-detail-card {
  border: 1px solid rgba(255,255,255,0.90);
  border-radius: 20px;
  background: rgba(255,255,255,0.66);
  box-shadow: 0 8px 34px rgba(180,100,40,0.10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.rond-detail-hero {
  display: grid;
  grid-template-columns: minmax(220px, 340px) minmax(0, 1fr);
  gap: 24px;
  align-items: stretch;
  padding: 18px;
}

.rond-detail-media {
  position: relative;
  min-height: 260px;
  overflow: hidden;
  border-radius: 16px;
  background: rgba(217,85,40,0.08);
}

.rond-detail-media img,
.rond-detail-placeholder {
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rond-detail-placeholder {
  color: #d95528;
  font-size: 3rem;
}

.rond-detail-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 14px;
  border: 2px solid #ffffff;
  border-radius: 999px;
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0.10em;
  line-height: 1;
  box-shadow: 0 12px 24px rgba(66,38,20,0.24);
}

.rond-detail-badge-today {
  background: #d95528;
}

.rond-detail-badge-live {
  background: #ffd24a;
  border-color: #1a0e06;
  color: #1a0e06;
  box-shadow: 0 12px 28px rgba(255,210,74,0.34);
}

.rond-detail-badge-tomorrow {
  background: #28785f;
}

.rond-detail-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: 8px 6px;
}

.rond-detail-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #d95528;
  font-size: 0.74rem;
  font-weight: 950;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.rond-detail-main h1 {
  margin: 0;
  color: #1a0e06;
  font-size: clamp(2.2rem, 5vw, 4.6rem);
  font-weight: 950;
  line-height: 0.96;
}

.rond-detail-meta,
.rond-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rond-detail-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(217,85,40,0.16);
  border-radius: 999px;
  background: rgba(255,255,255,0.70);
  color: #6f4e38;
  font-size: 0.82rem;
  font-weight: 850;
  line-height: 1;
}

.rond-detail-chip i {
  color: #907060;
}

.rond-detail-chip-strong {
  color: #1a0e06;
}

.rond-detail-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid rgba(217,85,40,0.18);
  border-radius: 999px;
  background: rgba(255,255,255,0.80);
  color: #5f4635;
  font-size: 0.88rem;
  font-weight: 900;
  text-decoration: none;
}

.rond-detail-action:hover {
  background: #d95528;
  border-color: #d95528;
  color: #ffffff;
  text-decoration: none;
}

.rond-detail-action-facebook {
  background: rgba(29,78,216,0.08);
  border-color: rgba(29,78,216,0.16);
  color: #1d4ed8;
}

.rond-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  gap: 16px;
}

.rond-detail-card {
  min-width: 0;
  padding: 18px;
}

.rond-detail-card h2 {
  margin: 0 0 14px;
  color: #1a0e06;
  font-size: 1.12rem;
  font-weight: 950;
  line-height: 1.15;
}

.rond-detail-info {
  display: grid;
  gap: 10px;
  margin: 0;
}

.rond-detail-info div {
  display: grid;
  grid-template-columns: minmax(100px, 0.36fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 10px 0;
  border-bottom: 1px solid rgba(217,85,40,0.12);
}

.rond-detail-info div:last-child {
  border-bottom: 0;
}

.rond-detail-info dt {
  color: #d95528;
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rond-detail-info dd {
  margin: 0;
  color: #5f4635;
  font-weight: 800;
  line-height: 1.45;
}

.rond-detail-info a {
  color: #d95528;
  font-weight: 900;
  text-decoration: none;
}

.rond-map-section {
  margin-top: 0;
}

.rond-map-wrapper {
  overflow: hidden;
  border: 1px solid rgba(217,85,40,0.12);
  border-radius: 16px;
}

.rond-map {
  width: 100%;
  min-height: 330px;
  border: 0;
  display: block;
}

.rond-detail-description {
  margin-top: 0;
}

.rond-description-html {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #5f4635;
  font-size: 0.98rem;
  line-height: 1.75;
}

.rond-description-html > :first-child {
  margin-top: 0;
}

.rond-description-html > :last-child {
  margin-bottom: 0;
}

.rond-detail-created {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0 2px;
  color: #907060;
  font-size: 0.82rem;
  font-weight: 750;
}

.rond-detail-created strong {
  color: #5f4635;
}

body[data-theme="dark"] .rond-detail-page {
  background: #130b05;
  background-image:
    radial-gradient(ellipse at 78% 8%, rgba(217,85,40,0.16) 0%, transparent 54%),
    radial-gradient(ellipse at 12% 92%, rgba(40,120,95,0.08) 0%, transparent 46%);
}

body[data-theme="dark"] .rond-detail-hero,
body[data-theme="dark"] .rond-detail-card {
  background: rgba(27,16,9,0.72);
  border-color: rgba(240,224,200,0.10);
  box-shadow: 0 8px 34px rgba(0,0,0,0.14);
}

body[data-theme="dark"] .rond-detail-main h1,
body[data-theme="dark"] .rond-detail-card h2,
body[data-theme="dark"] .rond-detail-chip-strong {
  color: #c0ad9a;
}

body[data-theme="dark"] .rond-detail-back,
body[data-theme="dark"] .rond-detail-kicker,
body[data-theme="dark"] .rond-detail-info dt {
  color: #f0a060;
}

body[data-theme="dark"] .rond-detail-back:hover {
  color: #c0ad9a;
}

body[data-theme="dark"] .rond-detail-chip,
body[data-theme="dark"] .rond-detail-action {
  background: rgba(255,250,243,0.07);
  border-color: rgba(240,224,200,0.12);
  color: #cbb8a4;
}

body[data-theme="dark"] .rond-detail-chip i,
body[data-theme="dark"] .rond-detail-placeholder {
  color: #bca996;
}

body[data-theme="dark"] .rond-detail-action:hover {
  background: #d95528;
  border-color: #d95528;
  color: #ffffff;
}

body[data-theme="dark"] .rond-detail-action-facebook {
  background: rgba(29,78,216,0.16);
  border-color: rgba(96,165,250,0.22);
  color: #93c5fd;
}

body[data-theme="dark"] .rond-detail-media,
body[data-theme="dark"] .rond-detail-placeholder {
  background: rgba(217,85,40,0.10);
}

body[data-theme="dark"] .rond-detail-info div,
body[data-theme="dark"] .rond-map-wrapper {
  border-color: rgba(240,224,200,0.10);
}

body[data-theme="dark"] .rond-detail-info dd,
body[data-theme="dark"] .rond-description-html,
body[data-theme="dark"] .rond-detail-created,
body[data-theme="dark"] .rond-detail-created strong {
  color: #cbb8a4;
}

body[data-theme="dark"] .rond-detail-badge {
  border-color: rgba(255,255,255,0.88);
  box-shadow: 0 12px 24px rgba(0,0,0,0.34);
}

body[data-theme="dark"] .rond-detail-badge-live {
  background: #ffd24a;
  color: #1a0e06;
  box-shadow: 0 12px 28px rgba(255,210,74,0.26);
}

@media (max-width: 900px) {
  .rond-detail-page {
    padding: 18px 24px 48px;
  }

  .rond-detail-hero,
  .rond-detail-grid {
    grid-template-columns: 1fr;
  }

  .rond-detail-media,
  .rond-detail-media img,
  .rond-detail-placeholder {
    min-height: 240px;
  }
}

@media (max-width: 640px) {
  .rond-detail-page {
    padding: 16px 16px 40px;
  }

  .rond-detail-hero,
  .rond-detail-card {
    padding: 14px;
    border-radius: 16px;
  }

  .rond-detail-main h1 {
    font-size: 2.3rem;
  }

  .rond-detail-actions,
  .rond-detail-action {
    width: 100%;
  }

  .rond-detail-info div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .rond-map {
    min-height: 260px;
  }
}

/* Dictionnaire - origines */
.dico-origin-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 16px 0;
}

.dico-origin-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 260px;
}

.dico-origin-filter label {
  font-weight: 800;
  color: #334155;
}

.dico-origin-filter select {
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #ffffff;
  color: #0f172a;
  font: inherit;
}

.dico-map-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.dico-origin-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: #475569;
  font-size: 0.82rem;
  min-width: 0;
}

.dico-portal-map-panel {
  display: grid;
  gap: 10px;
  margin: 12px 0 18px;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
}

.dico-portal-map-panel-compact {
  position: relative;
  margin: 0;
  padding: 0;
  min-width: 320px;
  align-self: stretch;
  border: 0;
  background: transparent;
}

.dico-portal-map-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.dico-portal-map-head h3 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.2;
}

.dico-portal-map-head p {
  margin: 3px 0 0;
  color: #64748b;
  font-size: 0.9rem;
}

.dico-map-expand {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 500;
}

.dico-map-expand,
.dico-portal-map-panel-compact .dico-map-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  min-width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 8px;
}

.dico-map-expand i {
  line-height: 1;
}

.dico-portal-origin-map {
  height: 340px;
  min-height: 300px;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  background: #f8fafc;
  z-index: 1;
}

.dico-portal-map-panel-compact .dico-portal-origin-map {
  height: 250px;
  min-height: 250px;
  border-radius: 8px;
}

.dico-origins-page {
  display: grid;
  gap: 18px;
}

.dico-origins-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 0 8px;
}

.dico-origins-hero .search-page-lead {
  max-width: 760px;
}

.dico-origin-map-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 16px;
  align-items: start;
}

.dico-origin-map-panel {
  min-width: 0;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  background: #f8fafc;
}

.dico-origin-map {
  height: min(68vh, 620px);
  min-height: 420px;
  width: 100%;
  z-index: 1;
}

.dico-origin-side {
  display: grid;
  gap: 12px;
  position: sticky;
  top: 16px;
}

.dico-origin-filter-stacked {
  display: grid;
  align-items: stretch;
  min-width: 0;
}

.dico-origin-filter-stacked select {
  width: 100%;
}

.dico-origin-list {
  display: grid;
  gap: 8px;
  max-height: 620px;
  overflow: auto;
  padding-right: 4px;
}

.dico-origin-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
  color: #0f172a;
  text-decoration: none;
}

.dico-origin-item:hover,
.dico-origin-item.is-active {
  border-color: #d65e2c;
  background: #fff7ed;
}

.dico-origin-item span {
  display: grid;
  gap: 2px;
}

.dico-origin-item small {
  color: #64748b;
}

.dico-origin-item em {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #334155;
  font-style: normal;
  font-weight: 800;
}

.dico-origin-words {
  display: grid;
  gap: 12px;
  margin-top: 8px;
}

.dico-origin-words h3 {
  margin: 0;
}

body[data-theme="dark"] .dico-origin-filter label,
body[data-theme="dark"] .dico-origin-chip,
body[data-theme="dark"] .dico-command-field label,
body[data-theme="dark"] .dico-results-summary,
body[data-theme="dark"] .dico-portal-map-head p {
  color: #b9c7da;
}

body[data-theme="dark"] .dico-origin-filter select,
body[data-theme="dark"] .dico-origin-map-panel,
body[data-theme="dark"] .dico-portal-map-panel,
body[data-theme="dark"] .dico-command-panel,
body[data-theme="dark"] .dico-origin-item {
  background: #252526;
  border-color: #3c3c3c;
  color: #ffffff;
}

body[data-theme="dark"] .dico-command-input-wrap,
body[data-theme="dark"] .dico-command-field select {
  background: #1e1e1e;
  border-color: #3c3c3c;
  color: #ffffff;
}

body[data-theme="dark"] .dico-command-input-wrap input {
  color: #ffffff;
}

body[data-theme="dark"] .dico-results-summary strong {
  color: #ffffff;
}

body[data-theme="dark"] .dico-active-filters span {
  background: rgba(225, 120, 75, 0.16);
  border-color: rgba(225, 120, 75, 0.42);
  color: #fed7aa;
}

body[data-theme="dark"] .dico-origin-item small {
  color: #9da1a6;
}

body[data-theme="dark"] .dico-origin-item:hover,
body[data-theme="dark"] .dico-origin-item.is-active {
  background: #2d2d30;
  border-color: #e1784b;
}

body[data-theme="dark"] .dico-origin-item em {
  background: #1e1e1e;
  color: #d1d5db;
}

@media (max-width: 900px) {
  .dico-origin-tools,
  .dico-portal-hero,
  .dico-origins-hero {
    align-items: stretch;
    flex-direction: column;
  }

  .dico-portal-hero {
    display: flex;
  }

  .dico-portal-map-panel-compact {
    min-width: 0;
  }

  .dico-origin-filter {
    min-width: 0;
  }

  .dico-origin-filter select,
  .dico-map-link {
    width: 100%;
  }

  .dico-origin-map-layout {
    grid-template-columns: 1fr;
  }

  .dico-command-form {
    grid-template-columns: 1fr;
  }

  .dico-command-actions {
    justify-content: stretch;
  }

  .dico-command-actions .btn-primary-large,
  .dico-command-reset {
    flex: 1;
  }

  .dico-portal-map-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .dico-origin-side {
    position: static;
  }

  .dico-origin-list {
    max-height: none;
  }
}

@media (max-width: 640px) {
  .dico-origin-filter {
    display: grid;
    align-items: stretch;
  }

  .dico-origin-map {
    min-height: 340px;
    height: 58vh;
  }

  .dico-portal-origin-map {
    height: 300px;
    min-height: 280px;
  }

  .dico-portal-map-panel-compact .dico-portal-origin-map {
    height: 240px;
    min-height: 240px;
  }
}

/* =====================
   Dico — Champ "Par page"
   ===================== */

.dico-command-field-narrow {
  flex: 0 0 auto;
  min-width: 90px;
}

/* =====================
   Dico — Titres de page (ajouter / modifier)
   ===================== */

.dico-page-title {
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0;
  color: #0f172a;
  line-height: 1.25;
}

/* =====================
   Dico — Formulaire d'entrée (ajouter / modifier)
   ===================== */

.dico-form-header {
  padding-bottom: 0.35rem;
  border-bottom: 1.5px solid rgba(0,0,0,0.08);
}

.dico-form-subtitle {
  margin: 0.15rem 0 0;
  font-size: 0.84rem;
  color: #64748b;
}

.dico-entry-form {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.dico-form-desktop-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.72fr);
  gap: 0.65rem;
  align-items: start;
}

.dico-form-column {
  display: grid;
  gap: 0.65rem;
  align-content: start;
  min-width: 0;
}

.dico-form-optional-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.65rem;
}

/* Carte de section */
.dico-form-card {
  background: #fcfcfb;
  border: 1px solid #e7e5e4;
  border-radius: 8px;
  box-shadow: none;
  overflow: hidden;
}

.dico-form-card-synonyms {
  position: relative;
  z-index: 20;
  overflow: visible;
}

.dico-form-card-head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid #f0ede9;
  background: #faf8f5;
}

.dico-form-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 50%;
  background: #d65e2c;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  margin-top: 0;
}

.dico-form-card-info {
  min-width: 0;
}

.dico-form-card-info h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.3;
}

.dico-form-card-info p {
  display: none;
}

.dico-form-card-body {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

/* Grille 2 colonnes */
.dico-form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}

@media (max-width: 680px) {
  .dico-form-row-2 {
    grid-template-columns: 1fr;
  }

  .dico-form-optional-grid {
    grid-template-columns: 1fr;
  }
}

/* Champ de formulaire */
.dico-form-field {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
}

.dico-form-field--half {
  max-width: none;
}

.dico-form-field label {
  font-size: 0.82rem;
  font-weight: 700;
  color: #374151;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.dico-form-field input[type="text"],
.dico-form-field select,
.dico-form-field textarea {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1.5px solid #d1d5db;
  border-radius: 8px;
  background: #ffffff;
  color: #111827;
  font-size: 0.95rem;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}

.dico-form-field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 10px 10px;
  padding-right: 2.25rem;
  cursor: pointer;
}

.dico-form-field textarea {
  resize: vertical;
  min-height: 58px;
  line-height: 1.4;
}

.dico-form-field input[type="text"]:focus,
.dico-form-field select:focus,
.dico-form-field textarea:focus {
  outline: none;
  border-color: #d65e2c;
  box-shadow: 0 0 0 3px rgba(214, 94, 44, 0.1);
}

.dico-form-field input[type="text"]::placeholder,
.dico-form-field textarea::placeholder {
  color: #9ca3af;
}

.dico-form-help {
  font-size: 0.72rem;
  color: #6b7280;
  line-height: 1.4;
}

.dico-form-optional {
  font-size: 0.66rem;
  font-weight: 500;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Entrée de définition */
.dico-def-entry {
  border: 1px solid #ede9e4;
  border-radius: 8px;
  overflow: hidden;
  background: #ffffff;
}

.dico-def-entry + .dico-def-entry {
  margin-top: 0.45rem;
}

.dico-def-entry-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.35rem 0.65rem;
  background: #f5f1ec;
  border-bottom: 1px solid #ede9e4;
}

.dico-def-entry-num {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #d65e2c;
}

.dico-def-entry .dico-form-row-2 {
  padding: 0.6rem;
  background: #ffffff;
}

/* Entrée inline (équivalents, expressions) */
.dico-inline-entry {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.dico-inline-entry + .dico-inline-entry {
  margin-top: 0.35rem;
}

.dico-inline-entry input[type="text"] {
  flex: 1;
  padding: 0.48rem 0.7rem;
  border: 1.5px solid #d1d5db;
  border-radius: 8px;
  background: #ffffff;
  color: #111827;
  font-size: 0.95rem;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.dico-inline-entry input[type="text"]:focus {
  outline: none;
  border-color: #d65e2c;
  box-shadow: 0 0 0 3px rgba(214, 94, 44, 0.1);
}

.dico-inline-entry input[type="text"]::placeholder {
  color: #9ca3af;
}

/* Bouton supprimer une ligne */
.dico-row-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.55rem;
  height: 1.55rem;
  border: 1.5px solid #e5e7eb;
  border-radius: 6px;
  background: #ffffff;
  color: #9ca3af;
  cursor: pointer;
  font-size: 1rem;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
  line-height: 1;
}

.dico-row-remove:hover {
  border-color: #ef4444;
  color: #ef4444;
  background: #fef2f2;
}

/* Bouton ajouter une ligne */
.dico-form-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.34rem 0.7rem;
  border: 1.5px dashed #d1d5db;
  border-radius: 8px;
  background: transparent;
  color: #6b7280;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  margin-top: 0.25rem;
}

.dico-form-add-btn:hover {
  border-color: #d65e2c;
  color: #d65e2c;
  background: rgba(214, 94, 44, 0.04);
}

/* Zone d'actions */
.dico-form-actions {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.2rem 0 0.4rem;
  justify-content: flex-end;
}

.dico-form-submit {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.56rem 1.1rem;
  border: none;
  border-radius: 8px;
  background: #d65e2c;
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
  box-shadow: 0 2px 8px rgba(214, 94, 44, 0.3);
}

.dico-form-submit:hover {
  opacity: 0.9;
}

.dico-form-submit:active {
  transform: scale(0.98);
}

.dico-form-cancel {
  color: #6b7280;
  font-size: 0.9rem;
  text-decoration: none;
  transition: color 0.12s;
}

.dico-form-cancel:hover {
  color: #374151;
}

/* Dark mode */
body[data-theme="dark"] .dico-form-card {
  background: #252526;
  border-color: #3c3c3c;
}

body[data-theme="dark"] .dico-form-card-head {
  background: #1e1e1e;
  border-bottom-color: #3c3c3c;
}

body[data-theme="dark"] .dico-form-card-info h3 {
  color: #e2e8f0;
}

body[data-theme="dark"] .dico-form-field label {
  color: #d4d4d4;
}

body[data-theme="dark"] .dico-form-field input[type="text"],
body[data-theme="dark"] .dico-form-field select,
body[data-theme="dark"] .dico-form-field textarea,
body[data-theme="dark"] .dico-inline-entry input[type="text"] {
  background: #1e1e1e;
  border-color: #4b5563;
  color: #d4d4d4;
}

body[data-theme="dark"] .dico-def-entry {
  background: #1e1e1e;
  border-color: #3c3c3c;
}

body[data-theme="dark"] .dico-def-entry-head {
  background: #252526;
  border-bottom-color: #3c3c3c;
}

body[data-theme="dark"] .dico-row-remove {
  background: #252526;
  border-color: #4b5563;
  color: #6b7280;
}

body[data-theme="dark"] .dico-form-add-btn {
  border-color: #4b5563;
  color: #9ca3af;
}

body[data-theme="dark"] .dico-form-actions {
  background: linear-gradient(180deg, rgba(31,31,34,0.74), #1f1f22 40%);
  border-top-color: rgba(148, 163, 184, 0.16);
}

body[data-theme="dark"] .dico-page-title {
  color: #e2e8f0;
}

body[data-theme="dark"] .dico-form-subtitle {
  color: #9ca3af;
}

body[data-theme="dark"] .dico-form-header {
  border-color: rgba(255, 255, 255, 0.08);
}

body[data-theme="dark"] .dico-form-optional {
  color: #6b7280;
}

body[data-theme="dark"] .dico-form-help {
  color: #6b7280;
}

body[data-theme="dark"] .dico-form-cancel {
  color: #9ca3af;
}

body[data-theme="dark"] .dico-form-cancel:hover {
  color: #d4d4d4;
}

body[data-theme="dark"] .dico-def-entry .dico-form-row-2 {
  background: #1a1a1d;
}

body[data-theme="dark"] .dico-form-add-btn:hover {
  background: rgba(214, 94, 44, 0.08);
  border-color: #e1784b;
  color: #e1784b;
}

body[data-theme="dark"] .dico-synonym-chip {
  background: rgba(214, 94, 44, 0.14);
  border-color: rgba(214, 94, 44, 0.32);
  color: #e1784b;
}

body[data-theme="dark"] .dico-form-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239ca3af' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
}

body[data-theme="dark"] .comment-form textarea {
  background: #1f1f22;
  border-color: #3f4248;
  color: #e2e8f0;
}

body[data-theme="dark"] .comment-reply-form {
  border-top-color: #3f4248;
}

@media (min-width: 981px) {
  .dico-shell:has(.dico-entry-form) {
    max-width: 1320px;
    gap: 8px;
    padding: 12px;
    border-radius: 14px;
  }

  .dico-shell:has(.dico-entry-form) .dico-breadcrumb {
    margin-bottom: 2px;
  }

  .dico-form-header {
    display: none;
  }

  .dico-entry-form {
    gap: 0.4rem;
  }

  .dico-form-desktop-grid {
    grid-template-columns: minmax(260px, 0.82fr) minmax(390px, 1.25fr) minmax(280px, 0.9fr);
    gap: 0.5rem;
  }

  .dico-form-column {
    gap: 0.5rem;
  }

  .dico-form-optional-grid {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .dico-form-card-head {
    gap: 0.45rem;
    min-height: 34px;
    padding: 0.38rem 0.55rem;
  }

  .dico-form-step {
    width: 1.25rem;
    height: 1.25rem;
    font-size: 0.7rem;
  }

  .dico-form-card-info h3 {
    font-size: 1rem;
    line-height: 1.15;
  }

  .dico-form-card-body {
    gap: 0.45rem;
    padding: 0.5rem;
  }

  .dico-form-row-2 {
    gap: 0.45rem;
  }

  .dico-form-field {
    gap: 0.16rem;
  }

  .dico-form-field label {
    font-size: 0.8rem;
  }

  .dico-form-field input[type="text"],
  .dico-form-field select,
  .dico-form-field textarea,
  .dico-inline-entry input[type="text"],
  .dico-synonym-search-input {
    padding: 0.38rem 0.55rem;
    border-radius: 7px;
    font-size: 0.92rem;
  }

  .dico-form-field textarea {
    min-height: 52px;
  }

  .dico-form-help {
    display: none;
  }

  .dico-def-entry + .dico-def-entry {
    margin-top: 0.35rem;
  }

  .dico-def-entry-head {
    padding: 0.24rem 0.5rem;
  }

  .dico-def-entry .dico-form-row-2 {
    padding: 0.45rem;
  }

  .dico-row-remove {
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 5px;
  }

  .dico-form-add-btn {
    margin-top: 0.05rem;
    padding: 0.28rem 0.55rem;
    border-radius: 7px;
    font-size: 0.8rem;
  }

  .dico-synonym-chips {
    gap: 5px;
    margin-bottom: 6px;
  }

  .dico-synonym-chip {
    padding: 3px 7px 3px 9px;
    font-size: 0.82rem;
  }

  .dico-form-card-defs textarea {
    min-height: 66px;
  }

  .dico-form-optional-grid .dico-form-card-body {
    min-height: 0;
  }

  .dico-inline-entry + .dico-inline-entry {
    margin-top: 0.25rem;
  }

  .dico-form-actions {
    position: sticky;
    bottom: 0;
    z-index: 3;
    margin-top: -0.1rem;
    padding: 0.35rem 0 0.1rem;
    background: linear-gradient(180deg, rgba(255,255,255,0.72), #ffffff 35%);
    border-top: 1px solid rgba(15, 23, 42, 0.08);
  }

  .dico-form-submit {
    padding: 0.48rem 0.9rem;
    font-size: 0.9rem;
  }

  .dico-form-cancel {
    font-size: 0.9rem;
  }

  .dico-def-entry-num {
    font-size: 0.72rem;
  }

  .dico-form-optional {
    font-size: 0.68rem;
  }

  .dico-synonym-suggestions li {
    font-size: 0.9rem;
  }
}

@media (max-width: 980px) {
  .dico-form-desktop-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .dico-form-column {
    gap: 0.5rem;
  }

  .dico-shell:has(.dico-entry-form) {
    gap: 8px;
  }

  .dico-shell:has(.dico-entry-form) .dico-breadcrumb {
    margin-bottom: 0;
  }

  .dico-form-header {
    padding-bottom: 0.25rem;
  }

  .dico-form-subtitle {
    display: none;
  }

  .dico-entry-form {
    gap: 0.5rem;
  }

  .dico-form-card-head {
    padding: 0.42rem 0.6rem;
  }

  .dico-form-card-body {
    padding: 0.6rem;
  }

  .dico-form-field textarea {
    min-height: 58px;
  }

  .dico-form-actions {
    position: sticky;
    bottom: 0;
    z-index: 3;
    justify-content: stretch;
    gap: 0.5rem;
    padding: 0.45rem 0 0;
    background: linear-gradient(180deg, rgba(249,240,230,0.74), #f9f0e6 40%);
  }

  .dico-form-submit,
  .dico-form-cancel {
    justify-content: center;
    flex: 1 1 0;
  }
}

/* =====================
   Dico — Synonymes autocomplete
   ===================== */

.dico-synonym-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 10px;
}

.dico-synonym-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(214, 94, 44, 0.10);
  color: #b84d20;
  border: 1px solid rgba(214, 94, 44, 0.28);
  border-radius: 20px;
  padding: 4px 8px 4px 12px;
  font-size: 0.85rem;
  font-weight: 500;
}

.dico-synonym-chip button {
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  padding: 0;
  display: flex;
  align-items: center;
  font-size: 1rem;
  opacity: 0.65;
  line-height: 1;
}

.dico-synonym-chip button:hover { opacity: 1; }

.dico-synonym-search-wrap {
  position: relative;
}

.dico-synonym-search-input {
  width: 100%;
  border: 1.5px solid #d1d5db;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.95rem;
  background: #fff;
  color: #111827;
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.dico-synonym-search-input:focus {
  outline: none;
  border-color: #d65e2c;
  box-shadow: 0 0 0 3px rgba(214, 94, 44, 0.12);
}

.dico-synonym-search-input::placeholder { color: #9ca3af; }

.dico-synonym-suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1.5px solid #d1d5db;
  border-radius: 10px;
  list-style: none;
  margin: 0;
  padding: 4px 0;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  z-index: 200;
  max-height: 230px;
  overflow-y: auto;
}

.dico-synonym-suggestions li {
  padding: 9px 14px;
  cursor: pointer;
  font-size: 0.9rem;
  color: #1f2937;
  transition: background 0.1s;
}

.dico-synonym-suggestions li:hover {
  background: #fdf3ec;
  color: #d65e2c;
}

.dico-synonym-suggestions li.dico-syn-no-result {
  color: #9ca3af;
  cursor: default;
}

.dico-synonym-suggestions li.dico-syn-no-result:hover {
  background: none;
  color: #9ca3af;
}

body[data-theme="dark"] .dico-synonym-search-input {
  background: #1e1e1e;
  border-color: #4b5563;
  color: #d4d4d4;
}

body[data-theme="dark"] .dico-synonym-suggestions {
  background: #252526;
  border-color: #4b5563;
}

body[data-theme="dark"] .dico-synonym-suggestions li {
  color: #d4d4d4;
}

body[data-theme="dark"] .dico-synonym-suggestions li:hover {
  background: #2d2d2d;
  color: #e1784b;
}

/* =====================
   Dico — Pagination
   ===================== */

.dico-pagination {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin: 1.25rem 0 0.75rem;
}

.dico-pagination-total {
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

.dico-pagination-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.18rem;
  flex-wrap: wrap;
}

.dico-page-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 1.9rem;
  padding: 0.2rem 0.55rem;
  border: 0;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 500;
  color: #2563eb;
  background: transparent;
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
}

.dico-page-number,
.dico-page-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.65rem;
  height: 1.9rem;
  padding: 0 0.25rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #2563eb;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
}

.dico-page-number:hover {
  color: #1d4ed8;
  background: rgba(37, 99, 235, 0.08);
}

.dico-page-number.is-active {
  background: transparent;
  color: var(--color-text);
  font-weight: 800;
}

.dico-page-ellipsis {
  border-color: transparent;
  background: transparent;
  color: var(--color-text-muted);
}

.dico-page-btn:hover {
  background: rgba(37, 99, 235, 0.08);
  color: #1d4ed8;
}

.dico-page-info {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* =====================
   Formulaires — Boutons d'action
   ===================== */

.field-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .dico-page-btn {
    border-color: var(--color-border);
    background: var(--color-surface);
  }
  .dico-page-btn:hover {
    background: rgba(220, 100, 40, 0.12);
  }
}

/* =====================================================================
   Dictionnaire — Portail redesign
   ===================================================================== */

.site-main:has(.dico-shell) {
  max-width: 1180px;
}

/* Conteneur principal de toutes les pages du dictionnaire */
.dico-shell {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  background: #f9f0e6;
  border-radius: 20px;
}

@media (max-width: 640px) {
  .dico-shell {
    padding: 14px;
    border-radius: 14px;
  }
}

body[data-theme="dark"] .dico-shell {
  background: #1f1f22;
}

/* En-tête */
.dico-portal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.15rem 0 0.65rem;
  border-bottom: 1.5px solid rgba(0,0,0,0.08);
  flex-wrap: wrap;
}

.dico-portal-header-left {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  flex: 1 1 220px;
}

.dico-portal-header-right {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 0.75rem;
  flex: 0 0 auto;
}

/* Grille : contrôles compacts */
.dico-portal-grid {
  display: block;
}

.dico-portal-controls {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
  padding: 10px 12px;
  background: #fcfcfb;
  border: 1px solid #e7e5e4;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

body[data-theme="dark"] .dico-portal-controls {
  background: #252526;
  border-color: #3c3c3c;
  box-shadow: none;
}

/* Panneau résultats */
.dico-results-panel {
  background: #fcfcfb;
  border: 1px solid #e7e5e4;
  border-radius: 20px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
  overflow: hidden;
}

body[data-theme="dark"] .dico-results-panel {
  background: #252526;
  border-color: #3c3c3c;
  box-shadow: none;
}

.dico-search-form {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

/* Carte */
.dico-map-block,
.dico-portal-map-col {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: 100%;
}

.dico-portal-header-map {
  position: relative;
  width: 100%;
  height: clamp(190px, 28vw, 320px);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e7e5e4;
  background: linear-gradient(180deg, #dff2fb 0%, #f7fbfd 100%);
  display: block;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.dico-portal-header-map[hidden] {
  display: none;
}

.dico-map-hint {
  display: none;
}

.dico-world-map-bg,
.dico-map-points {
  position: absolute;
  inset: 0;
}

.dico-world-map-bg {
  background:
    linear-gradient(90deg, rgba(255,255,255,0.44) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,0.44) 1px, transparent 1px);
  background-size: 12.5% 25%;
}

.dico-world-land {
  position: absolute;
  display: block;
  background: rgba(78, 138, 113, 0.36);
  border: 1px solid rgba(78, 138, 113, 0.16);
}

.dico-world-land-america {
  left: 10%;
  top: 22%;
  width: 22%;
  height: 43%;
  border-radius: 48% 36% 42% 34%;
  transform: rotate(-13deg);
}

.dico-world-land-europe {
  left: 46%;
  top: 28%;
  width: 11%;
  height: 16%;
  border-radius: 46% 36% 40% 34%;
}

.dico-world-land-africa {
  left: 47%;
  top: 43%;
  width: 14%;
  height: 30%;
  border-radius: 36% 42% 46% 38%;
  transform: rotate(8deg);
}

.dico-world-land-asia {
  left: 58%;
  top: 27%;
  width: 28%;
  height: 32%;
  border-radius: 38% 46% 32% 40%;
  transform: rotate(4deg);
}

.dico-world-land-australia {
  left: 76%;
  top: 66%;
  width: 12%;
  height: 11%;
  border-radius: 45%;
  transform: rotate(-8deg);
}

.dico-map-point {
  position: absolute;
  z-index: 2;
  width: var(--point-size, 12px);
  height: var(--point-size, 12px);
  min-width: 10px;
  min-height: 10px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: #d65e2c;
  border: 2px solid #fff;
  box-shadow: 0 4px 12px rgba(17, 24, 39, 0.2);
  cursor: pointer;
}

.dico-map-point.is-selected {
  background: #2563eb;
  outline: 3px solid rgba(37, 99, 235, 0.2);
}

.dico-map-point.is-muted {
  background: #94a3b8;
  opacity: 0.45;
  cursor: default;
}

.dico-map-tooltip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  display: none;
  min-width: 120px;
  transform: translateX(-50%);
  padding: 0.42rem 0.52rem;
  border-radius: 8px;
  background: rgba(17, 24, 39, 0.94);
  color: #fff;
  text-align: center;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
  pointer-events: none;
}

.dico-map-tooltip strong,
.dico-map-tooltip em {
  display: block;
  font-size: 0.72rem;
  font-style: normal;
  line-height: 1.2;
}

.dico-map-tooltip em {
  margin-top: 0.15rem;
  opacity: 0.78;
}

.dico-map-point:hover .dico-map-tooltip,
.dico-map-point:focus .dico-map-tooltip {
  display: block;
}

.dico-map-empty {
  position: absolute;
  inset: auto 12px 12px;
  z-index: 2;
  margin: 0;
  padding: 0.35rem 0.5rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--color-text-muted);
  font-size: 0.78rem;
  text-align: center;
}

.dico-map-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.32rem;
  align-self: flex-start;
  min-height: 1.65rem;
  padding: 0.15rem 0.45rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: 0.76rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.dico-map-toggle:hover {
  color: #d65e2c;
  background: rgba(214, 94, 44, 0.06);
}

.dico-map-hint {
  font-size: 0.73rem;
  color: var(--color-text-muted);
  text-align: center;
  margin: 0;
  opacity: 0.7;
}

/* Marqueurs Leaflet personnalisés */
.dico-leaflet-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #d65e2c;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(17,24,39,0.25);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  cursor: pointer;
}

.dico-leaflet-marker.is-selected {
  background: #2563eb;
  outline: 3px solid rgba(37, 99, 235, 0.25);
}

.dico-leaflet-marker.is-muted {
  background: #94a3b8;
  opacity: 0.55;
  cursor: default;
}

.dico-leaflet-popup-link {
  display: inline-block;
  margin-top: 0.35rem;
  font-weight: 600;
  color: #d65e2c;
  text-decoration: none;
}

.dico-leaflet-popup-link:hover {
  text-decoration: underline;
}


.dico-portal-title {
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
  line-height: 1.2;
}

.dico-portal-subtitle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin: 0;
  flex-wrap: wrap;
}

.dico-portal-dot {
  opacity: 0.4;
}

.dico-origins-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.65rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--color-primary);
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.dico-origins-pill:hover {
  background: var(--color-primary-subtle, rgba(220, 100, 40, 0.08));
  border-color: var(--color-primary);
}

.dico-portal-cta {
  flex-shrink: 0;
  white-space: nowrap;
}

.dico-portal-cta.is-disabled {
  opacity: 0.48;
  cursor: not-allowed;
  box-shadow: none;
}

/* Barre de recherche */
.dico-search-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: 1 1 360px;
  background: var(--color-surface);
  border: 1.5px solid #d1d5db;
  border-radius: 10px;
  padding: 0.12rem 0.3rem 0.12rem 0.75rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.dico-search-suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 20;
  list-style: none;
  margin: 0;
  padding: 0.25rem;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: var(--color-surface);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.14);
}

.dico-search-suggestions[hidden] {
  display: none;
}

.dico-search-suggestions li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  padding: 0.45rem 0.55rem;
  border-radius: 8px;
  cursor: pointer;
}

.dico-search-suggestions li:hover {
  background: rgba(214, 94, 44, 0.08);
}

.dico-search-suggestion-word {
  font-weight: 700;
  color: var(--color-text);
}

.dico-search-suggestion-origin {
  min-width: 0;
  color: var(--color-text-muted);
  font-size: 0.76rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dico-search-field:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(214, 94, 44, 0.12), 0 2px 8px rgba(0,0,0,0.06);
}

.dico-search-field .dico-search-icon {
  flex-shrink: 0;
  font-size: 0.95rem;
  color: var(--color-primary);
  pointer-events: none;
}

.dico-search-field input[type="text"] {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 0.96rem;
  color: var(--color-text);
  padding: 0.42rem 0.4rem;
  outline: none;
  min-width: 0;
}

.dico-search-field input[type="text"]::placeholder {
  color: var(--color-text-muted);
  opacity: 0.65;
}

.dico-search-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 50%;
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: 0.8rem;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}

.dico-search-clear:hover {
  background: var(--color-border);
  color: var(--color-text);
}

.dico-search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  min-width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity 0.15s;
}

.dico-search-btn:hover {
  opacity: 0.88;
}

.dico-filter-toggle {
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 2rem;
  min-width: 2rem;
  min-height: 2rem;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}

.dico-back-to-top {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.55rem;
  height: 2.55rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16);
  cursor: pointer;
}

.dico-back-to-top:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.dico-search-form .dico-filter-row {
  flex-basis: 100%;
}

.dico-filter-toggle:hover,
.dico-filter-toggle[aria-expanded="true"] {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: rgba(220, 100, 40, 0.07);
}

.dico-filter-clear {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  text-decoration: none;
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
}

.dico-filter-clear:hover {
  color: var(--color-primary);
  background: rgba(220, 100, 40, 0.07);
}

/* Rangée de filtres */
.dico-filter-row {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.dico-filter-row[hidden] {
  display: none;
}

.dico-filter-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.dico-filter-label-sm {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9ca3af;
}

.dico-filter-row select {
  padding: 0.32rem 2rem 0.32rem 0.65rem;
  border: 1.5px solid #d1d5db;
  border-radius: 8px;
  background: #ffffff;
  color: #374151;
  font-size: 0.82rem;
  font-weight: 500;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.65rem center;
  background-size: 10px 10px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.dico-filter-row select:hover {
  border-color: #9ca3af;
}

.dico-filter-row select:focus {
  outline: none;
  border-color: #d65e2c;
  box-shadow: 0 0 0 3px rgba(214, 94, 44, 0.1);
}

/* Section A–Z */
.dico-alpha-section {
  border-top: 1px solid #ede9e4;
  padding-top: 0.35rem;
}

.dico-alpha-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9ca3af;
  margin-bottom: 0.28rem;
}

/* Navigation A–Z */
.dico-alpha-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.18rem;
  padding: 0;
  margin-bottom: 0;
}

.dico-alpha-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.62rem;
  height: 1.62rem;
  padding: 0 0.22rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #ffffff;
  font-size: 0.74rem;
  font-weight: 600;
  color: #374151;
  text-decoration: none;
  line-height: 1;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}

.dico-alpha-btn:hover {
  border-color: #d65e2c;
  color: #d65e2c;
  background: rgba(214, 94, 44, 0.07);
}

.dico-alpha-btn.is-active {
  background: #d65e2c;
  border-color: #d65e2c;
  color: #fff;
  font-weight: 700;
}

.dico-alpha-all {
  min-width: 2.45rem;
}

/* Barre résultats */
.dico-results-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.875rem;
  padding: 10px 16px;
  border-bottom: 1px solid #e7e5e4;
  color: var(--color-text-muted);
}

body[data-theme="dark"] .dico-results-bar {
  border-bottom-color: #3c3c3c;
}

.dico-results-count strong {
  color: var(--color-text);
  font-weight: 600;
}

[data-dico-results].is-loading {
  opacity: 0.62;
  pointer-events: none;
}

.dico-results-filter-label {
  opacity: 0.75;
}

.dico-results-page-info {
  white-space: nowrap;
}

/* =====================================================================
   Dark mode — Portail redesign
   ===================================================================== */

body[data-theme="dark"] .dico-portal-header {
  border-bottom-color: var(--color-border);
}

body[data-theme="dark"] .dico-portal-header-map {
  background: linear-gradient(180deg, #162332 0%, #202124 100%);
}

body[data-theme="dark"] .dico-world-land {
  background: rgba(104, 163, 132, 0.28);
  border-color: rgba(104, 163, 132, 0.15);
}

body[data-theme="dark"] .dico-map-toggle,
body[data-theme="dark"] .dico-filter-toggle {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text);
}

body[data-theme="dark"] .dico-map-toggle {
  background: transparent;
  color: var(--color-text-muted);
}

body[data-theme="dark"] .dico-search-field {
  background: var(--color-surface);
  border-color: var(--color-border);
}

body[data-theme="dark"] .dico-search-suggestions {
  border-color: var(--color-border);
  background: var(--color-surface);
}

body[data-theme="dark"] .dico-search-field input[type="text"] {
  color: var(--color-text);
}

body[data-theme="dark"] .dico-filter-row select {
  background-color: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23aaa' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
}

body[data-theme="dark"] .dico-back-to-top {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text);
}

body[data-theme="dark"] .dico-alpha-btn {
  border-color: var(--color-border);
  color: var(--color-text);
}

body[data-theme="dark"] .dico-alpha-btn:hover {
  color: var(--color-primary-light, #f97316);
  border-color: var(--color-primary-light, #f97316);
}

body[data-theme="dark"] .dico-alpha-btn.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

body[data-theme="dark"] .dico-active-filters span {
  background: var(--color-surface);
  border-color: var(--color-border);
}

/* =====================================================================
   Responsive — Portail
   ===================================================================== */

/* Mobile */
@media (max-width: 600px) {
  .site-main:has(.dico-shell) {
    padding-left: 8px;
    padding-right: 8px;
  }

  .dico-shell {
    gap: 10px;
    padding: 10px;
    border-radius: 12px;
  }

  .dico-portal-header {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .dico-portal-header-right {
    width: auto;
    margin-left: auto;
    justify-content: flex-end;
  }

  .dico-portal-title {
    font-size: 1.28rem;
  }

  .dico-portal-cta {
    min-height: 2rem;
    padding: 0.35rem 0.55rem;
    font-size: 0.78rem;
    justify-content: center;
  }

  .dico-portal-cta .bi {
    display: none;
  }

  .dico-portal-controls {
    gap: 0.42rem;
    padding: 8px;
    border-radius: 10px;
  }

  .dico-portal-header-map {
    height: 210px;
    border-radius: 10px;
  }

  .dico-search-form {
    flex-direction: column;
    align-items: stretch;
  }

  .dico-search-field {
    flex-basis: auto;
    width: 100%;
    padding: 0.1rem 0.25rem 0.1rem 0.62rem;
    border-radius: 9px;
  }

  .dico-search-suggestions li {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.1rem;
  }

  .dico-search-field input[type="text"] {
    font-size: 0.95rem;
    padding: 0.44rem 0.32rem;
  }

  .dico-search-btn {
    width: 1.9rem;
    min-width: 1.9rem;
    height: 1.9rem;
    font-size: 0.82rem;
  }

  .dico-filter-toggle,
  .dico-map-toggle {
    min-height: 1.8rem;
  }

  .dico-filter-toggle {
    width: 1.9rem;
    min-width: 1.9rem;
  }

  .dico-filter-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.45rem;
    width: 100%;
    padding-top: 0.1rem;
  }

  .dico-filter-group {
    width: 100%;
  }

  .dico-filter-row select {
    width: 100%;
    min-width: 0;
  }

  .dico-alpha-section {
    padding-top: 0.25rem;
  }

  .dico-alpha-label {
    margin-bottom: 0.25rem;
  }

  .dico-alpha-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 0.2rem;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .dico-alpha-btn {
    min-width: 1.75rem;
    height: 1.75rem;
    font-size: 0.78rem;
  }

  .dico-alpha-all {
    min-width: 2.55rem;
  }

  .dico-results-panel {
    border-radius: 10px;
  }

  .dico-results-bar {
    align-items: flex-start;
    padding: 8px 10px;
    font-size: 0.8rem;
  }

  .dico-letter-sep {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 4px 10px;
    font-size: 0.64rem;
  }

  .dico-card {
    padding: 10px;
    gap: 4px;
    border-left-width: 0;
  }

  .dico-card-head {
    gap: 6px;
  }

  .dico-word {
    font-size: 1.02rem;
  }

  .dico-phonetic {
    font-size: 0.78rem;
  }

  .dico-excerpt {
    font-size: 0.84rem;
    line-height: 1.42;
  }

  .dico-card-meta {
    gap: 6px;
    flex-wrap: wrap;
  }

  .dico-origin-tag {
    max-width: 100%;
  }

  .dico-card-arrow {
    display: none;
  }

  .dico-pagination {
    align-items: flex-start;
    gap: 0.25rem;
    padding: 0 8px;
    margin: 0.8rem 0 0.65rem;
  }

  .dico-pagination-row {
    justify-content: flex-start;
  }

  .dico-page-btn {
    min-height: 1.95rem;
    padding: 0.3rem 0.5rem;
    font-size: 0.78rem;
  }

  .dico-page-number,
  .dico-page-ellipsis {
    min-width: 1.75rem;
    height: 1.95rem;
    font-size: 0.82rem;
  }

  .dico-back-to-top {
    right: 12px;
    bottom: 12px;
    width: 2.35rem;
    height: 2.35rem;
  }

  .search-empty-state {
    padding: 12px;
    border-radius: 10px;
  }
}

@media (max-width: 380px) {
  .dico-portal-header {
    align-items: flex-start;
  }

  .dico-portal-header-right {
    margin-left: 0;
    width: 100%;
  }

  .dico-portal-cta {
    width: 100%;
  }

  .dico-search-field {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
  }

  .dico-search-btn {
    width: 1.8rem;
    min-width: 1.8rem;
  }
}

/* ════════════════════════════════════════════════════
   Playlists (.pl-*)
   ════════════════════════════════════════════════════ */

.pl-app {
  display: grid;
  grid-template-columns: 268px 1fr;
  min-height: calc(100vh - 56px);
  background: #faf8f5;
}

/* ── Sidebar ── */
.pl-sidebar {
  background: #1a1208;
  color: #d4c4a8;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow-y: auto;
  position: sticky;
  top: 56px;
  height: calc(100vh - 56px);
  border-right: 1px solid #2e2010;
}

.pl-sidebar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 18px 12px;
  flex-shrink: 0;
}

.pl-sidebar-title {
  font-size: 1rem;
  font-weight: 700;
  color: #f0e6d3;
  letter-spacing: 0.03em;
  margin: 0;
}

.pl-new-trigger {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(217,85,40,0.18);
  border: 1px solid rgba(217,85,40,0.30);
  color: #e07040;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.pl-new-trigger:hover {
  background: rgba(217,85,40,0.32);
  color: #f59060;
}

/* ── Add song banner ── */
.pl-add-banner {
  margin: 0 12px 10px;
  padding: 12px 14px;
  background: rgba(217,85,40,0.14);
  border: 1px solid rgba(217,85,40,0.28);
  border-radius: 10px;
  font-size: 0.82rem;
  color: #c4b498;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}
.pl-add-banner strong { color: #f0c080; }
.pl-add-form {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.pl-add-form select {
  flex: 1;
  background: #261808;
  border: 1px solid #4d3010;
  color: #d4c4a8;
  border-radius: 7px;
  padding: 5px 8px;
  font-size: 0.8rem;
}
.pl-add-submit {
  padding: 5px 12px;
  background: #d95528;
  border: none;
  border-radius: 7px;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.14s;
}
.pl-add-submit:hover { background: #c04420; }
.pl-add-back {
  font-size: 0.77rem;
  color: #a89070;
  text-decoration: none;
}
.pl-add-back:hover { color: #e0b080; }

/* ── Create panel ── */
.pl-create-panel {
  margin: 0 12px 10px;
  padding: 14px;
  background: #221408;
  border: 1px solid #3d2810;
  border-radius: 12px;
  flex-shrink: 0;
}
.pl-create-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pl-create-input,
.pl-create-textarea {
  background: #160e04;
  border: 1px solid #4d3010;
  color: #e0d0b8;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 0.87rem;
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}
.pl-create-input:focus,
.pl-create-textarea:focus { border-color: #d95528; }
.pl-create-input::placeholder,
.pl-create-textarea::placeholder { color: #7a6248; }
.pl-create-textarea { resize: vertical; min-height: 52px; }
.pl-create-actions {
  display: flex;
  gap: 8px;
}
.pl-create-submit {
  flex: 1;
  padding: 7px 12px;
  background: #d95528;
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.14s;
}
.pl-create-submit:hover { background: #c04420; }
.pl-create-cancel {
  padding: 7px 12px;
  background: transparent;
  border: 1px solid #4d3010;
  border-radius: 8px;
  color: #a89070;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.14s;
}
.pl-create-cancel:hover { background: rgba(255,255,255,0.04); }

/* ── Playlist nav list ── */
.pl-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 8px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pl-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  border-radius: 9px;
  color: #b8a888;
  text-decoration: none;
  font-size: 0.87rem;
  transition: background 0.12s, color 0.12s;
  gap: 8px;
}
.pl-list-item:hover {
  background: rgba(255,255,255,0.06);
  color: #e0d0b8;
}
.pl-list-item.is-active {
  background: rgba(217,85,40,0.20);
  color: #f0d0a0;
}
.pl-list-item-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pl-list-item-count {
  font-size: 0.75rem;
  color: #7a6248;
  background: rgba(255,255,255,0.08);
  padding: 1px 6px;
  border-radius: 10px;
  flex-shrink: 0;
}
.pl-list-item.is-active .pl-list-item-count {
  background: rgba(217,85,40,0.25);
  color: #f0c080;
}

.pl-sidebar-empty {
  font-size: 0.82rem;
  color: #7a6248;
  padding: 8px 18px;
  margin: 0;
}

.pl-notice {
  margin: 6px 12px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.82rem;
  flex-shrink: 0;
}
.pl-notice.is-ok {
  background: rgba(34,197,94,0.12);
  border: 1px solid rgba(34,197,94,0.25);
  color: #166534;
}
.pl-notice.is-err {
  background: rgba(239,68,68,0.10);
  border: 1px solid rgba(239,68,68,0.25);
  color: #991b1b;
}

/* ── Main content ── */
.pl-main {
  padding: 32px 36px;
  overflow-y: auto;
}

/* Empty state */
.pl-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 50vh;
  gap: 12px;
}
.pl-empty-state i {
  font-size: 3rem;
  color: #c8a870;
  opacity: 0.45;
}
.pl-empty-state h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #705040;
  margin: 0;
}
.pl-empty-state p {
  font-size: 0.9rem;
  max-width: 340px;
  color: #8a7860;
  margin: 0;
}
.pl-empty-cta {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 22px;
  background: #d95528;
  border: none;
  border-radius: 24px;
  color: #fff;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
  box-shadow: 0 4px 14px rgba(217,85,40,0.35);
}
.pl-empty-cta:hover {
  background: #c04420;
  box-shadow: 0 6px 18px rgba(217,85,40,0.45);
}

/* ── Playlist header ── */
.pl-header {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  margin-bottom: 28px;
}

.pl-header-art {
  width: 180px;
  height: 180px;
  border-radius: 14px;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 8px 28px rgba(0,0,0,0.16);
  position: relative;
}
.pl-header-art.is-mosaic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
.pl-header-art.is-mosaic img,
.pl-header-art.is-single img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pl-header-art.is-empty {
  background: linear-gradient(135deg, #d95528 0%, #8b3010 60%, #3d1a08 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.38);
  font-size: 2.5rem;
}

.pl-header-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 4px;
  min-width: 0;
}
.pl-header-kicker {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #d95528;
}
.pl-header-title {
  font-size: clamp(1.35rem, 2.8vw, 2rem);
  font-weight: 800;
  line-height: 1.15;
  margin: 0;
  color: #1a0e06;
}
.pl-header-desc {
  font-size: 0.87rem;
  color: #706050;
  margin: 0;
  line-height: 1.5;
}
.pl-header-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.83rem;
  color: #908070;
  margin-top: 2px;
}
.pl-meta-yt {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #c03010;
}

.pl-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.pl-yt-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  background: #ff0000;
  color: #fff;
  border-radius: 24px;
  font-size: 0.87rem;
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
  box-shadow: 0 3px 12px rgba(220,0,0,0.28);
}
.pl-yt-btn:hover {
  background: #cc0000;
  color: #fff;
  box-shadow: 0 5px 18px rgba(220,0,0,0.40);
}
.pl-yt-btn.is-disabled {
  background: #d8d0c8;
  color: #908880;
  box-shadow: none;
  cursor: default;
  pointer-events: none;
}
.pl-yt-count {
  background: rgba(255,255,255,0.22);
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 0.77rem;
  font-weight: 600;
}

.pl-action-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: transparent;
  border: 1px solid #d8cfc0;
  border-radius: 20px;
  color: #504030;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.14s, border-color 0.14s;
}
.pl-action-pill:hover {
  background: #f0e8de;
  border-color: #c0b0a0;
}
.pl-action-pill.is-danger {
  border-color: rgba(239,68,68,0.30);
  color: #ef4444;
  padding: 8px 10px;
}
.pl-action-pill.is-danger:hover {
  background: rgba(239,68,68,0.08);
  border-color: rgba(239,68,68,0.50);
}
.pl-delete-form { display: inline-flex; }

/* ── Collapsible panels ── */
.pl-panel {
  background: #f5f0e8;
  border: 1px solid #e0d8c8;
  border-radius: 12px;
  margin-bottom: 20px;
}
.pl-panel-inner {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pl-panel-label {
  font-size: 0.77rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #a09080;
}
.pl-share-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.pl-share-url {
  flex: 1;
  background: #fff;
  border: 1px solid #d8d0c0;
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 0.82rem;
  color: #504030;
  outline: none;
  min-width: 0;
}
.pl-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  background: #d95528;
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.14s;
}
.pl-copy-btn:hover { background: #c04420; }
.pl-open-link {
  padding: 7px 10px;
  background: transparent;
  border: 1px solid #d8d0c0;
  border-radius: 8px;
  color: #706050;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: background 0.14s;
}
.pl-open-link:hover { background: #e8e0d0; }

.pl-edit-form .pl-create-input,
.pl-edit-form .pl-create-textarea {
  background: #fff;
  border-color: #d8d0c0;
  color: #302010;
}
.pl-edit-form .pl-create-input::placeholder,
.pl-edit-form .pl-create-textarea::placeholder { color: #b0a090; }
.pl-edit-form .pl-create-cancel {
  border-color: #d8d0c0;
  color: #706050;
}
.pl-edit-form .pl-create-cancel:hover { background: #e8e0d0; }

/* ── Track list ── */
.pl-tracks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.pl-tracks-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 48px 20px;
  text-align: center;
  color: #a09080;
}
.pl-tracks-empty i { font-size: 2rem; opacity: 0.4; }
.pl-tracks-empty p { font-size: 0.88rem; margin: 0; }

.pl-track {
  display: grid;
  grid-template-columns: 26px 48px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 7px 10px;
  border-radius: 8px;
  transition: background 0.12s;
}
.pl-track:hover { background: rgba(0,0,0,0.04); }

.pl-track-num {
  font-size: 0.8rem;
  color: #a09080;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.pl-track-thumb {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
  display: block;
  background: #e8e0d0;
}
.pl-track-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pl-track-thumb-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c0b0a0;
  font-size: 1.1rem;
}

.pl-track-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-decoration: none;
  min-width: 0;
}
.pl-track-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: #201408;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  transition: color 0.12s;
}
.pl-track-info:hover .pl-track-title { color: #d95528; }
.pl-track-artist {
  font-size: 0.77rem;
  color: #908070;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pl-track-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.pl-track-yt-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  color: #c00;
  font-size: 1.05rem;
  transition: background 0.12s;
  text-decoration: none;
}
.pl-track-yt-link:hover { background: rgba(204,0,0,0.10); color: #e00; }
.pl-track-yt-miss {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: #c0b0a0;
  font-size: 0.85rem;
}
.pl-track-del-form { display: inline-flex; }
.pl-track-del {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: transparent;
  border: none;
  color: #c0b0a0;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.pl-track-del:hover {
  background: rgba(239,68,68,0.10);
  color: #ef4444;
}

/* ════ Dark mode (.pl-*) ════ */
body[data-theme="dark"] .pl-app { background: #0f0904; }

body[data-theme="dark"] .pl-sidebar {
  background: #0d0804;
  border-right-color: #1e1408;
}
body[data-theme="dark"] .pl-sidebar-title { color: #e0d0b8; }

body[data-theme="dark"] .pl-list-item { color: #a89878; }
body[data-theme="dark"] .pl-list-item:hover { background: rgba(255,255,255,0.05); color: #d8c8a8; }
body[data-theme="dark"] .pl-list-item.is-active { background: rgba(217,85,40,0.22); color: #f0c880; }
body[data-theme="dark"] .pl-list-item-count { background: rgba(255,255,255,0.06); color: #6a5838; }
body[data-theme="dark"] .pl-list-item.is-active .pl-list-item-count { background: rgba(217,85,40,0.22); color: #f0b870; }
body[data-theme="dark"] .pl-sidebar-empty { color: #6a5838; }

body[data-theme="dark"] .pl-notice.is-ok { color: #86efac; }
body[data-theme="dark"] .pl-notice.is-err { color: #fca5a5; }

body[data-theme="dark"] .pl-main { background: #0f0904; }

body[data-theme="dark"] .pl-empty-state h3 { color: #a89878; }
body[data-theme="dark"] .pl-empty-state p { color: #7a6a58; }
body[data-theme="dark"] .pl-empty-state i { color: #c89050; }

body[data-theme="dark"] .pl-header-title { color: #c0ad9a; }
body[data-theme="dark"] .pl-header-desc { color: #a09080; }
body[data-theme="dark"] .pl-header-meta { color: #7a6a58; }
body[data-theme="dark"] .pl-meta-yt { color: #e07050; }

body[data-theme="dark"] .pl-yt-btn.is-disabled {
  background: #2a2018;
  color: #7a6a58;
}
body[data-theme="dark"] .pl-action-pill {
  border-color: #4d3820;
  color: #d0c0a0;
}
body[data-theme="dark"] .pl-action-pill:hover {
  background: rgba(255,255,255,0.06);
  border-color: #7a6040;
}
body[data-theme="dark"] .pl-action-pill.is-danger { color: #f87171; border-color: rgba(248,113,113,0.30); }
body[data-theme="dark"] .pl-action-pill.is-danger:hover { background: rgba(248,113,113,0.08); }

body[data-theme="dark"] .pl-panel {
  background: #180f06;
  border-color: #2e2010;
}
body[data-theme="dark"] .pl-panel-label { color: #7a6a58; }
body[data-theme="dark"] .pl-share-url {
  background: #0d0804;
  border-color: #3d2810;
  color: #d0c0a0;
}
body[data-theme="dark"] .pl-open-link { border-color: #3d2810; color: #a09070; }
body[data-theme="dark"] .pl-open-link:hover { background: #221808; }
body[data-theme="dark"] .pl-edit-form .pl-create-input,
body[data-theme="dark"] .pl-edit-form .pl-create-textarea {
  background: #0d0804;
  border-color: #3d2810;
  color: #d0c0a0;
}
body[data-theme="dark"] .pl-edit-form .pl-create-cancel { border-color: #3d2810; color: #a09070; }
body[data-theme="dark"] .pl-edit-form .pl-create-cancel:hover { background: rgba(255,255,255,0.04); }

body[data-theme="dark"] .pl-track:hover { background: rgba(255,255,255,0.04); }
body[data-theme="dark"] .pl-track-num { color: #7a6a58; }
body[data-theme="dark"] .pl-track-thumb { background: #2a1e10; }
body[data-theme="dark"] .pl-track-thumb-fallback { color: #6a5840; }
body[data-theme="dark"] .pl-track-title { color: #e8d8c0; }
body[data-theme="dark"] .pl-track-info:hover .pl-track-title { color: #f0a060; }
body[data-theme="dark"] .pl-track-artist { color: #7a6a58; }
body[data-theme="dark"] .pl-track-yt-miss { color: #4a3820; }
body[data-theme="dark"] .pl-track-del { color: #6a5840; }
body[data-theme="dark"] .pl-track-del:hover { background: rgba(248,113,113,0.12); color: #f87171; }
body[data-theme="dark"] .pl-tracks-empty { color: #6a5840; }

body[data-theme="dark"] .pl-add-banner {
  background: rgba(217,85,40,0.10);
  border-color: rgba(217,85,40,0.22);
}
body[data-theme="dark"] .pl-add-form select {
  background: #160e04;
  border-color: #3d2810;
  color: #c4b498;
}

/* ── Responsive ── */
@media (max-width: 800px) {
  .pl-app {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .pl-sidebar {
    position: static;
    height: auto;
    max-height: 280px;
    border-right: none;
    border-bottom: 1px solid #2e2010;
  }
  .pl-main {
    padding: 20px 16px;
  }
  .pl-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 18px;
  }
  .pl-header-art {
    width: 150px;
    height: 150px;
  }
  .pl-header-actions,
  .pl-header-meta { justify-content: center; }
}

@media (max-width: 480px) {
  .pl-header-art { width: 120px; height: 120px; }
  .pl-yt-btn { font-size: 0.82rem; padding: 8px 14px; }
  .pl-share-row { flex-wrap: wrap; }
  .pl-share-url { width: 100%; }
  .pl-track {
    grid-template-columns: 20px 40px 1fr auto;
    gap: 8px;
    padding: 6px 4px;
  }
  .pl-track-thumb { width: 40px; height: 40px; }
}

/* ═══════════════════════════════════════
   Search page refresh, aligned with homepage
   ═══════════════════════════════════════ */

.site-main:has(.search-page-shell) {
  max-width: 100%;
  padding: 0;
}

.search-page-shell {
  min-height: calc(100vh - 56px);
  gap: 8px;
  padding: 12px 40px 56px;
  border-radius: 0;
  background: #fffaf3;
  background-image:
    radial-gradient(ellipse at 78% 8%, rgba(217,85,40,0.28) 0%, transparent 52%),
    radial-gradient(ellipse at 12% 92%, rgba(40,120,95,0.12) 0%, transparent 45%);
}

.search-page-hero,
.search-page-layout {
  width: min(1100px, 100%);
  margin-inline: auto;
}

.search-page-hero {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
  padding: 0;
}

.search-page-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.search-page-logo-wrap {
  margin-bottom: 14px;
}

.search-page-logo {
  width: 82px;
  height: auto;
  display: block;
}

.search-page-logo-dark {
  display: none;
}

.search-page-kicker,
.search-panel-kicker,
.search-results-kicker {
  gap: 7px;
  padding: 0;
  background: transparent;
  border: none;
  color: #d95528;
  font-size: 0.72rem;
  letter-spacing: 0.10em;
}

.search-page-title {
  max-width: 760px;
  margin: 8px 0 0;
  color: #1a0e06;
  font-size: clamp(1.65rem, 3vw, 2.6rem);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.015em;
}

.search-page-lead {
  max-width: 560px;
  margin: 18px 0 0;
  color: #706050;
  font-size: 1rem;
  line-height: 1.7;
}

.search-page-hero-stats {
  align-self: center;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.search-page-hero-stats span {
  min-width: 132px;
  min-height: 52px;
  justify-content: space-between;
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,0.88);
  border-radius: 14px;
  background: rgba(255,255,255,0.62);
  color: #907060;
  box-shadow: 0 4px 20px rgba(180,100,40,0.07);
}

.search-page-hero-stats strong {
  color: #1a0e06;
  font-size: 1.35rem;
  font-weight: 900;
}

.search-page-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 20px;
  align-items: start;
}

.search-page-panel,
.search-results-shell,
.search-song-card,
.search-empty-state {
  border: 1px solid rgba(255,255,255,0.90);
  background: rgba(255,255,255,0.66);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 34px rgba(180,100,40,0.10);
}

.search-filter-panel {
  padding: 18px;
  border-radius: 20px;
}

.search-compact-label,
.search-filter-label {
  color: #d95528;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.search-input-shell {
  min-height: 58px;
  border: 1px solid rgba(217,85,40,0.16);
  border-radius: 999px;
  background: rgba(255,255,255,0.70);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.55);
}

.search-input-shell:focus-within {
  background: #fff;
  border-color: rgba(217,85,40,0.40);
  box-shadow: 0 0 0 4px rgba(217,85,40,0.12);
}

.search-page-form input[type="text"] {
  padding: 0 18px;
  color: #1a0e06;
  font-size: 1.08rem;
  font-weight: 800;
}

.search-submit-btn {
  min-width: 56px;
  margin: 6px;
  border-radius: 999px;
  background: #d65e2c;
  color: #fff;
  transition: background 0.15s, transform 0.12s;
}

.search-submit-btn:hover {
  background: #c84f22;
  transform: translateY(-1px);
}

.search-letter-shell {
  margin-top: 14px;
  padding-top: 14px;
  border-top-color: rgba(217,85,40,0.12);
}

.search-filter-panel .search-filter-bar {
  display: none;
}

.letter-mode-switch {
  background: rgba(217,85,40,0.08);
  border-color: rgba(217,85,40,0.14);
}

.letter-mode-btn,
.letter-btn {
  color: #5f4635;
}

.letter-mode-btn:hover,
.letter-btn:hover {
  border-color: rgba(217,85,40,0.30);
  color: #1a0e06;
}

.search-page-shell .letter-mode-btn.active,
.search-page-shell .letter-btn.active {
  background: #d65e2c;
  border-color: #d65e2c;
  color: #fff;
}

.search-active-bar {
  min-height: 44px;
  padding: 0 4px;
  color: #907060;
}

.search-reset-btn {
  border-color: rgba(217,85,40,0.20);
  background: rgba(255,255,255,0.70);
  color: #5f4635;
}

.search-reset-btn:hover {
  background: rgba(217,85,40,0.10);
  color: #1a0e06;
}

.search-input-shell .search-reset-icon-btn {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
  padding: 0;
  border-radius: 999px;
  border-color: rgba(217,85,40,0.16);
  background: rgba(255,255,255,0.72);
  color: #907060;
  box-shadow: none;
}

.search-input-shell .search-reset-icon-btn:hover {
  background: rgba(217,85,40,0.10);
  color: #d95528;
}

.search-input-shell .search-reset-icon-btn i {
  font-size: 0.86rem;
  line-height: 1;
}

.search-results-shell {
  margin-top: 12px;
  padding: 18px;
  border-radius: 20px;
}

#songsResults.is-loading {
  opacity: 0.62;
  pointer-events: none;
  transition: opacity 0.12s ease;
}

.search-results-head {
  margin-bottom: 14px;
}

.search-results-count {
  color: #d95528;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.search-song-list {
  gap: 10px;
}

.search-song-card {
  border-radius: 16px;
  overflow: hidden;
  transition: border-color 0.14s, box-shadow 0.16s, transform 0.14s;
}

.search-song-card:hover {
  border-color: rgba(217,85,40,0.32);
  background: rgba(255,255,255,0.86);
  box-shadow: 0 12px 34px rgba(180,100,40,0.15);
  transform: translateY(-1px);
}

.search-song-card .song-card-link {
  padding: 14px 58px 14px 14px;
}

.search-song-cover {
  width: 84px;
  height: 84px;
  border-radius: 13px;
  background: rgba(217,85,40,0.08);
}

.search-song-card .song-card-title {
  color: #1a0e06;
  font-size: 1.04rem;
  font-weight: 900;
}

.search-song-inline-meta {
  color: #907060;
}

.search-song-author-inline,
.search-song-year-inline {
  border-color: rgba(217,85,40,0.14);
  background: rgba(255,255,255,0.70);
  color: #6f4e38;
}

.search-song-excerpt {
  color: #706050;
  font-size: 0.92rem;
}

.search-song-favorite {
  background: rgba(255,255,255,0.82);
}

.search-page-side {
  position: sticky;
  top: 76px;
}

.search-latest-panel,
.search-request-panel,
.search-propose-panel {
  padding: 18px;
  border-radius: 20px;
}

.search-panel-head h3,
.search-request-panel h3,
.search-propose-panel h3 {
  color: #1a0e06;
  font-size: 1.08rem;
  font-weight: 900;
}

.search-request-panel,
.search-propose-panel {
  background:
    radial-gradient(circle at top right, rgba(217,85,40,0.16), transparent 34%),
    rgba(255,255,255,0.66);
}

.search-request-panel p,
.search-propose-panel p {
  color: #706050;
}

.search-request-panel .btn-ask-song,
.search-propose-panel .btn-ask-song {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  background: #1a0e06;
  color: #fff;
  font-weight: 800;
  text-decoration: none;
}

.search-request-panel .btn-ask-song:hover,
.search-propose-panel .btn-ask-song:hover {
  background: #d95528;
  color: #fff;
}

.search-latest-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  gap: 10px;
  align-items: center;
  padding: 9px 0;
  border-bottom-color: rgba(217,85,40,0.12);
}

.search-latest-item .latest-song-title a {
  color: #1a0e06;
  font-weight: 800;
}

.search-latest-item .latest-song-title a:hover {
  color: #d95528;
  text-decoration: none;
}

.search-latest-item .latest-song-meta {
  color: #907060;
}

.latest-song-date {
  display: block;
  font-size: 0.7rem;
  color: #b09080;
  margin-top: 2px;
  font-style: italic;
}

.song-card-no-lyrics-bar {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
}

.search-song-no-lyrics-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .03em;
  white-space: nowrap;
  background: #fff7ed;
  color: #c2410c;
  border: 1px solid #fed7aa;
}

.add-lyrics-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .7rem;
  font-weight: 600;
  color: #c2410c;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 20px;
  padding: 2px 11px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .12s, color .12s, border-color .12s;
}

.add-lyrics-btn:hover {
  background: #ffedd5;
  color: #9a3412;
  border-color: #fdba74;
}

.add-lyrics-btn .bi {
  font-size: .6rem;
}

.song-skeleton-lines {
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin-top: 4px;
}

.song-skeleton-line {
  display: block;
  height: 11px;
  border-radius: 3px;
  background: #e5dbd4;
}

.search-latest-item .latest-song-cover {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(217,85,40,0.08);
}

body[data-theme="dark"] .search-page-shell {
  background: #120800;
  background-image:
    radial-gradient(ellipse at 78% 8%, rgba(217,85,40,0.22) 0%, transparent 52%),
    radial-gradient(ellipse at 12% 92%, rgba(40,120,95,0.12) 0%, transparent 45%);
}

body[data-theme="dark"] .search-page-logo-light { display: none; }
body[data-theme="dark"] .search-page-logo-dark { display: block; }

body[data-theme="dark"] .search-page-title,
body[data-theme="dark"] .search-page-hero-stats strong,
body[data-theme="dark"] .search-song-card .song-card-title,
body[data-theme="dark"] .search-panel-head h3,
body[data-theme="dark"] .search-request-panel h3,
body[data-theme="dark"] .search-latest-item .latest-song-title a {
  color: #c0ad9a;
}

body[data-theme="dark"] .search-page-lead,
body[data-theme="dark"] .search-page-hero-stats span,
body[data-theme="dark"] .search-active-bar,
body[data-theme="dark"] .search-song-excerpt,
body[data-theme="dark"] .search-request-panel p,
body[data-theme="dark"] .search-propose-panel p,
body[data-theme="dark"] .search-latest-item .latest-song-meta,
body[data-theme="dark"] .latest-song-date {
  color: #a09080;
}

body[data-theme="dark"] .search-song-no-lyrics-badge,
body[data-theme="dark"] .add-lyrics-btn {
  background: #431407;
  color: #fb923c;
  border-color: #7c2d12;
}

body[data-theme="dark"] .add-lyrics-btn:hover {
  background: #7c2d12;
  color: #fed7aa;
  border-color: #9a3412;
}

body[data-theme="dark"] .song-skeleton-line {
  background: #2d2018;
}

.catalog-track-card {
  opacity: .88;
}

.catalog-track-card:hover {
  opacity: 1;
}

.catalog-track-link {
  text-decoration: none;
}

body[data-theme="dark"] .catalog-track-card {
  background: rgba(20,10,2,0.60);
}

body[data-theme="dark"] .search-page-panel,
body[data-theme="dark"] .search-results-shell,
body[data-theme="dark"] .search-song-card,
body[data-theme="dark"] .search-empty-state {
  background: rgba(20,10,2,0.78);
  border-color: rgba(255,255,255,0.06);
  box-shadow: none;
}

body[data-theme="dark"] .search-page-hero {
  background: transparent;
  border: none;
}

body[data-theme="dark"] .search-input-shell,
body[data-theme="dark"] .letter-mode-switch,
body[data-theme="dark"] .search-reset-btn,
body[data-theme="dark"] .search-song-author-inline,
body[data-theme="dark"] .search-song-year-inline {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.08);
}

body[data-theme="dark"] .search-input-shell:focus-within {
  border-color: rgba(217,85,40,0.40);
  box-shadow: 0 0 0 4px rgba(217,85,40,0.14);
}

body[data-theme="dark"] .search-page-form input[type="text"] {
  color: #e8d8c4;
}

body[data-theme="dark"] .search-submit-btn,
body[data-theme="dark"] .search-page-shell .letter-mode-btn.active,
body[data-theme="dark"] .search-page-shell .letter-btn.active {
  background: #d65e2c;
  border-color: #d65e2c;
}

body[data-theme="dark"] .letter-mode-btn,
body[data-theme="dark"] .letter-btn,
body[data-theme="dark"] .search-reset-btn,
body[data-theme="dark"] .search-song-author-inline,
body[data-theme="dark"] .search-song-year-inline {
  color: #c8b090;
}

body[data-theme="dark"] .search-song-card:hover {
  background: rgba(30,16,4,0.86);
  border-color: rgba(217,85,40,0.28);
}

body[data-theme="dark"] .search-request-panel .btn-ask-song,
body[data-theme="dark"] .search-propose-panel .btn-ask-song {
  background: #c0ad9a;
  color: #1a0e06;
}

body[data-theme="dark"] .search-request-panel .btn-ask-song:hover,
body[data-theme="dark"] .search-propose-panel .btn-ask-song:hover {
  background: #d95528;
  color: #fff;
}

/* Dark search polish: keep the same visual rhythm as the light theme */
body[data-theme="dark"] .search-page-shell {
  background: #130b05;
  background-image:
    radial-gradient(ellipse at 78% 8%, rgba(217,85,40,0.16) 0%, transparent 54%),
    radial-gradient(ellipse at 12% 92%, rgba(40,120,95,0.08) 0%, transparent 46%);
}

body[data-theme="dark"] .search-page-hero {
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

body[data-theme="dark"] .search-page-panel,
body[data-theme="dark"] .search-results-shell {
  background: rgba(27,16,9,0.72);
  border-color: rgba(240,224,200,0.10);
  box-shadow: 0 8px 34px rgba(0,0,0,0.14);
}

body[data-theme="dark"] .search-filter-panel {
  padding: 18px;
}

body[data-theme="dark"] .search-input-shell {
  min-height: 58px;
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
  box-shadow: none;
}

body[data-theme="dark"] .search-input-shell:focus-within {
  background: rgba(255,250,243,0.11);
  border-color: rgba(217,85,40,0.34);
  box-shadow: 0 0 0 4px rgba(217,85,40,0.11);
}

body[data-theme="dark"] .search-page-form input[type="text"] {
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #e8d8c4;
}

body[data-theme="dark"] .search-page-form input[type="text"]:focus {
  border: 0;
  background: transparent;
  box-shadow: none;
}

body[data-theme="dark"] .search-page-form input[type="text"]::placeholder {
  color: #7a6050;
}

body[data-theme="dark"] .search-page-shell .search-filter-panel {
  background: rgba(30,24,16,.72);
  border-color: rgba(80,50,20,.35);
  box-shadow: 0 4px 18px rgba(0,0,0,.35);
}

body[data-theme="dark"] .search-page-shell .search-input-shell {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
}

body[data-theme="dark"] .search-page-shell .search-input-shell > i.bi-search {
  color: #d65e2c;
}

body[data-theme="dark"] .search-page-shell .search-input-shell .search-reset-icon-btn {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.10);
  color: #a8907e;
}

body[data-theme="dark"] .search-page-shell .search-input-shell .search-submit-icon-btn {
  background: #d65e2c;
  color: #ffffff;
}

/* Recherche page: keep the search bar identical to articles.php, including dark mode. */
.search-page-shell .search-filter-panel {
  padding: 12px !important;
  border: 1px solid rgba(255,255,255,.90) !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.64) !important;
  box-shadow: 0 8px 28px rgba(180,100,40,.09) !important;
}

.search-page-shell .search-input-shell {
  min-height: 56px !important;
  padding: 0 8px 0 18px !important;
  border: 1px solid rgba(214,94,44,.16) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.78) !important;
  box-shadow: none !important;
}

.search-page-shell .search-input-shell input[type="text"] {
  padding: 0 8px 0 0 !important;
  font-size: 1.04rem !important;
  font-weight: 800 !important;
}

.search-page-shell .search-input-shell .search-reset-icon-btn,
.search-page-shell .search-input-shell .search-submit-icon-btn {
  flex: 0 0 42px !important;
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
}

body[data-theme="dark"] .search-page-shell .search-filter-panel {
  background: rgba(36,20,12,.78) !important;
  border-color: rgba(120,66,38,.42) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.28) !important;
}

body[data-theme="dark"] .search-page-shell .search-input-shell {
  min-height: 56px !important;
  background: rgba(64,43,32,.78) !important;
  border-color: rgba(214,94,44,.22) !important;
  box-shadow: none !important;
}

body[data-theme="dark"] .search-page-shell .search-input-shell input[type="text"] {
  color: #e8d8c4 !important;
}

body[data-theme="dark"] .search-page-shell .search-input-shell input[type="text"]::placeholder {
  color: #a98a74 !important;
}

body[data-theme="dark"] .search-page-shell .search-input-shell .search-reset-icon-btn {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: #c8ad92 !important;
}

body[data-theme="dark"] .search-page-shell .search-input-shell .search-submit-icon-btn {
  background: #d65e2c !important;
  color: #ffffff !important;
}

@media (min-width: 681px) {
  .search-page-shell .search-input-shell {
    min-height: 52px !important;
    padding-left: 16px !important;
  }

  .search-page-shell .search-input-shell input[type="text"] {
    font-size: 1rem !important;
  }

  .search-page-shell .search-input-shell .search-reset-icon-btn,
  .search-page-shell .search-input-shell .search-submit-icon-btn {
    flex-basis: 38px !important;
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
  }

  .search-page-shell .letter-filter {
    overflow-x: visible !important;
    flex-wrap: wrap !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .search-page-shell .letter-filter::-webkit-scrollbar,
  .search-page-shell .letter-filter:hover::-webkit-scrollbar,
  .search-page-shell .letter-filter:focus-within::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  .search-page-shell .letter-btn {
    scroll-snap-align: start;
  }
}

body[data-theme="dark"] .search-letter-shell {
  border-top-color: rgba(240,224,200,0.08);
}

body[data-theme="dark"] .letter-btn {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
  color: #c8ad92;
  box-shadow: none;
}

body[data-theme="dark"] .letter-btn:hover {
  background: rgba(214,94,44,.12);
  border-color: rgba(255,255,255,.10);
  color: #e8d8c4;
}

body[data-theme="dark"] .search-page-shell .letter-btn.active {
  background: #d65e2c;
  border-color: #d65e2c;
  color: #ffffff;
  box-shadow: none;
}

body[data-theme="dark"] .search-active-bar {
  color: #bca996;
}

body[data-theme="dark"] .search-reset-btn {
  background: rgba(255,250,243,0.07);
  border-color: rgba(240,224,200,0.12);
  color: #cbb8a4;
}

body[data-theme="dark"] .search-reset-btn:hover {
  background: rgba(217,85,40,0.14);
  border-color: rgba(217,85,40,0.24);
  color: #c0ad9a;
}

body[data-theme="dark"] .search-input-shell .search-reset-icon-btn {
  background: rgba(255,250,243,0.07);
  border-color: rgba(240,224,200,0.12);
  color: #cbb8a4;
}

body[data-theme="dark"] .search-input-shell .search-reset-icon-btn:hover {
  background: rgba(217,85,40,0.14);
  border-color: rgba(217,85,40,0.24);
  color: #c0ad9a;
}

body[data-theme="dark"] .search-results-count {
  color: #e07040;
}

body[data-theme="dark"] .search-song-card {
  background: rgba(255,250,243,0.035);
  border-color: rgba(240,224,200,0.08);
  box-shadow: none;
}

body[data-theme="dark"] .search-song-card:hover {
  background: rgba(255,250,243,0.055);
  border-color: rgba(217,85,40,0.22);
  box-shadow: 0 12px 34px rgba(0,0,0,0.12);
}

body[data-theme="dark"] .search-song-cover,
body[data-theme="dark"] .latest-song-cover {
  background: rgba(217,85,40,0.10);
}

body[data-theme="dark"] .search-song-cover-fallback,
body[data-theme="dark"] .latest-song-cover-fallback {
  color: #bca996;
}

body[data-theme="dark"] .search-song-author-inline,
body[data-theme="dark"] .search-song-year-inline {
  background: rgba(255,250,243,0.05);
  border-color: rgba(240,224,200,0.12);
  color: #cbb8a4;
}

body[data-theme="dark"] .search-song-excerpt,
body[data-theme="dark"] .search-request-panel p {
  color: #b19f8e;
}

body[data-theme="dark"] .search-latest-item {
  border-bottom-color: rgba(240,224,200,0.10);
}

body[data-theme="dark"] .search-request-panel {
  background:
    radial-gradient(circle at top right, rgba(217,85,40,0.10), transparent 36%),
    rgba(27,16,9,0.72);
}

body[data-theme="dark"] .search-request-panel .btn-ask-song {
  background: #d95528;
  color: #ffffff;
}

body[data-theme="dark"] .search-request-panel .btn-ask-song:hover {
  background: #c0ad9a;
  color: #1a0e06;
}

@media (max-width: 980px) {
  .search-page-shell {
    padding: 12px 24px 46px;
  }

  .search-page-layout {
    grid-template-columns: 1fr;
  }

  .search-page-side {
    position: static;
  }
}

@media (max-width: 680px) {
  .search-page-shell {
    padding: 10px 16px 38px;
  }

  .search-page-hero {
    gap: 12px;
  }

  .search-page-title {
    font-size: 1.65rem;
  }

  .search-page-hero-stats {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .search-page-hero-stats span {
    min-width: 0;
  }

  .search-filter-panel,
  .search-results-shell,
  .search-latest-panel,
  .search-request-panel {
    padding: 12px;
    border-radius: 16px;
  }

  .search-input-shell {
    min-height: 50px;
  }

  .search-input-shell .search-reset-icon-btn {
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
  }

  .search-song-card .song-card-link {
    padding: 10px;
  }

  .search-song-favorite {
    top: 8px;
    right: 8px;
  }
}

@media (max-width: 640px) {
  .rond-portail-page .rond-portail-top-controls {
    display: block;
  }

  .rond-portail-page .rond-portail-search-wrap,
  .rond-portail-page .rond-portail-search-input-wrap {
    width: 100%;
  }

  .rond-portail-page .rond-portail-search-input-wrap {
    min-height: 40px;
    padding: 0 10px;
    border-radius: 999px;
  }

  .rond-portail-page .rond-portail-search-input-wrap i {
    flex: 0 0 auto;
    font-size: 0.95rem;
  }

  .rond-portail-page .rond-portail-search-input-wrap input {
    width: 100%;
    min-width: 0;
    min-height: 38px;
    font-size: 0.9rem;
  }

  .rond-portail-page .rond-reset-filters {
    flex: 0 0 30px;
    width: 30px;
    min-width: 30px;
    max-width: 30px;
    height: 30px;
    min-height: 30px;
    padding: 0;
    border-radius: 999px;
  }

  .rond-portail-page .rond-portail-filter-group {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
  }

  .rond-portail-page .rond-portail-filter-title {
    min-width: 42px;
    padding-top: 0;
  }

  .rond-portail-page .rond-portail-filter-chips {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6px;
  }
}

/* ── Nav liquid pill ──────────────────────────────────────────────────────── */
.header-nav-main {
  position: relative; /* ancre le pill en absolu */
}
.nav-pill-bg {
  position: absolute;
  border-radius: 999px;
  background: #fff4e9;
  box-shadow: 0 0 0 1.5px rgba(217,85,40,0.13), 0 2px 14px rgba(217,85,40,0.13);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transform-origin: center center;
  /* transitions par défaut — remplacées dynamiquement par le JS */
  transition: left .3s cubic-bezier(.34,1.56,.64,1),
              width .26s cubic-bezier(.22,1,.36,1),
              top .22s ease,
              height .18s ease,
              opacity .14s ease,
              transform .26s cubic-bezier(.34,1.56,.64,1);
}
/* Les liens passent au-dessus du pill */
.header-nav-main > .nav-main-link,
.header-nav-main > .nav-main-dropdown > .nav-main-link {
  position: relative;
  z-index: 1;
}
/* Le pill remplace le fond du lien actif uniquement */
.header-nav-main.has-nav-pill > .nav-main-link.is-active,
.header-nav-main.has-nav-pill > .nav-main-dropdown > .nav-main-link.is-active {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
/* Dark mode */
body[data-theme="dark"] .nav-pill-bg {
  background: rgba(217,85,40,0.18);
  box-shadow: 0 0 0 1.5px rgba(217,85,40,0.22), 0 2px 14px rgba(0,0,0,0.22);
}

/* Header refresh: warm glass navigation */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  border-bottom: 1px solid rgba(217,85,40,0.12);
  background: rgba(255,250,243,0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  will-change: transform;
}

.header-shell {
  padding: 8px 0;
}

.header-top {
  min-height: 54px;
  gap: 14px;
}

.site-logo-link {
  height: 42px;
  min-height: 42px;
}

.site-logo-inline {
  width: auto;
  height: 30px;
  max-width: min(260px, 34vw);
  object-fit: contain;
}

.header-nav-main {
  gap: 4px;
  flex: 0 1 auto;
  padding: 4px;
  border: 1px solid rgba(217,85,40,0.12);
  border-radius: 999px;
  background: rgba(255,255,255,0.54);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.38);
}

.nav-main-link {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: #5f4635;
  font-size: 0.94rem;
  font-weight: 900;
  letter-spacing: 0;
  box-shadow: none;
}

.nav-main-link i {
  color: #907060;
  font-size: 0.96rem;
}

.nav-main-link:hover {
  background: rgba(217,85,40,0.08);
  color: #1a0e06;
}

.nav-main-link:hover i {
  color: #d95528;
}

.nav-main-link.is-active {
  border-color: rgba(217,85,40,0.22);
  background: #fff4e9;
  color: #d95528;
  box-shadow: none;
}

.nav-main-link.is-active i {
  color: #d95528;
}

.nav-main-cta,
.nav-main-cta.is-active {
  border-color: #d95528;
  background: #d95528;
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(217,85,40,0.18);
}

.nav-main-cta i,
.nav-main-cta.is-active i {
  color: #ffffff;
}

.nav-main-cta:hover {
  background: #c04420;
  border-color: #c04420;
  color: #ffffff;
}

.nav-main-submenu {
  top: calc(100% + 10px);
  padding: 8px;
  border-color: rgba(217,85,40,0.14);
  border-radius: 16px;
  background: rgba(255,250,243,0.96);
  box-shadow: 0 18px 38px rgba(66,38,20,0.16);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.nav-main-submenu-link {
  min-height: 38px;
  border-radius: 12px;
  color: #5f4635;
}

.nav-main-submenu-link i {
  color: #d95528;
}

.nav-main-submenu-link:hover,
.nav-main-submenu-link.is-active {
  background: rgba(217,85,40,0.10);
  color: #1a0e06;
}

.theme-toggle,
.header-icon-btn,
.header-nav-toggle,
.header-nav-close,
.user-menu-trigger {
  border-color: rgba(217,85,40,0.16);
  background: rgba(255,255,255,0.64);
  color: #5f4635;
  box-shadow: 0 6px 18px rgba(66,38,20,0.08);
}

.theme-toggle:hover,
.header-icon-btn:hover,
.header-nav-toggle:hover,
.header-nav-close:hover,
.user-menu-trigger:hover {
  background: #fff4e9;
  border-color: rgba(217,85,40,0.26);
  color: #1a0e06;
}

.theme-toggle-track {
  background: #c9d3df;
}

.user-menu-notification {
  border-color: #fffaf3;
  background: #22a66b;
}

.user-menu-panel {
  border-color: rgba(217,85,40,0.14);
  background: rgba(255,250,243,0.96);
  box-shadow: 0 18px 38px rgba(66,38,20,0.16);
}

.user-menu-link {
  color: #5f4635;
}

.user-menu-link:hover,
.user-menu-link.is-active {
  background: rgba(217,85,40,0.10);
  color: #1a0e06;
}

body[data-theme="dark"] .site-header {
  background: rgba(19,11,5,0.97);
  border-bottom-color: rgba(240,224,200,0.08);
}

body[data-theme="dark"] .header-nav-main {
  background: rgba(255,250,243,0.06);
  border-color: rgba(240,224,200,0.10);
  box-shadow: inset 0 0 0 1px rgba(255,250,243,0.03);
}

body[data-theme="dark"] .header-nav-main .nav-main-link,
body[data-theme="dark"] .nav-main-link {
  color: #cbb8a4;
}

body[data-theme="dark"] .nav-main-link i {
  color: #bca996;
}

body[data-theme="dark"] .nav-main-link:hover {
  background: rgba(217,85,40,0.14);
  color: #c0ad9a;
}

body[data-theme="dark"] .nav-main-link:hover i {
  color: #f0a060;
}

body[data-theme="dark"] .nav-main-link.is-active {
  background: rgba(217,85,40,0.20);
  border-color: rgba(217,85,40,0.34);
  color: #f0a060;
}

body[data-theme="dark"] .nav-main-link.is-active i {
  color: #f0a060;
}

body[data-theme="dark"] .nav-main-cta,
body[data-theme="dark"] .nav-main-cta.is-active {
  background: #d95528;
  border-color: #d95528;
  color: #ffffff;
}

body[data-theme="dark"] .nav-main-cta i,
body[data-theme="dark"] .nav-main-cta.is-active i {
  color: #ffffff;
}

body[data-theme="dark"] .nav-main-submenu,
body[data-theme="dark"] .user-menu-panel {
  background: rgba(27,16,9,0.96);
  border-color: rgba(240,224,200,0.10);
  box-shadow: 0 18px 38px rgba(0,0,0,0.28);
}

body[data-theme="dark"] .nav-main-submenu-link,
body[data-theme="dark"] .user-menu-link {
  color: #cbb8a4;
}

body[data-theme="dark"] .nav-main-submenu-link:hover,
body[data-theme="dark"] .nav-main-submenu-link.is-active,
body[data-theme="dark"] .user-menu-link:hover,
body[data-theme="dark"] .user-menu-link.is-active {
  background: rgba(217,85,40,0.14);
  color: #c0ad9a;
}

body[data-theme="dark"] .theme-toggle,
body[data-theme="dark"] .header-icon-btn,
body[data-theme="dark"] .header-nav-toggle,
body[data-theme="dark"] .header-nav-close,
body[data-theme="dark"] .user-menu-trigger {
  background: rgba(255,250,243,0.07);
  border-color: rgba(240,224,200,0.12);
  color: #cbb8a4;
  box-shadow: none;
}

body[data-theme="dark"] .theme-toggle:hover,
body[data-theme="dark"] .header-icon-btn:hover,
body[data-theme="dark"] .header-nav-toggle:hover,
body[data-theme="dark"] .header-nav-close:hover,
body[data-theme="dark"] .user-menu-trigger:hover {
  background: rgba(217,85,40,0.14);
  border-color: rgba(217,85,40,0.24);
  color: #c0ad9a;
}

@media (max-width: 900px) {
  .site-header {
    background: rgba(255,250,243,0.92);
  }

  .header-shell {
    padding: 2px 0;
  }

  .header-top {
    min-height: 48px;
  }

  .site-logo-inline {
    height: 34px;
    max-width: min(172px, 52vw);
  }

  .header-nav-toggle,
  .header-icon-btn,
  .user-menu-trigger {
    min-width: 38px;
    min-height: 38px;
  }

  .header-shell.has-mobile-nav .header-nav-main {
    width: min(340px, 92vw);
    padding: 14px;
    gap: 8px;
    border-left: 1px solid rgba(217,85,40,0.14);
    border-radius: 18px 0 0 18px;
    background: rgba(255,250,243,0.96);
    box-shadow: -18px 0 42px rgba(66,38,20,0.18);
  }

  .header-shell.has-mobile-nav .header-nav-main-head,
  .header-shell.has-mobile-nav .header-nav-theme-row,
  .header-nav-user-section {
    border-color: rgba(217,85,40,0.12);
  }

  .header-shell.has-mobile-nav .header-nav-main-head {
    color: #1a0e06;
  }

  .header-shell.has-mobile-nav .nav-main-link {
    min-height: 46px;
    border-color: rgba(217,85,40,0.12);
    background: rgba(255,255,255,0.56);
    color: #5f4635;
    font-size: 0.98rem;
  }

  .header-shell.has-mobile-nav .nav-main-link i {
    color: #d95528;
  }

  .header-shell.has-mobile-nav .nav-main-link.is-active {
    background: #fff4e9;
    border-color: rgba(217,85,40,0.28);
    color: #d95528;
  }

  .header-shell.has-mobile-nav .nav-main-link.is-active i {
    color: #d95528;
  }

  .header-shell.has-mobile-nav .nav-main-cta,
  .header-shell.has-mobile-nav .nav-main-cta.is-active {
    background: #d95528;
    border-color: #d95528;
    color: #ffffff;
  }

  .header-shell.has-mobile-nav .nav-main-cta i,
  .header-shell.has-mobile-nav .nav-main-cta.is-active i {
    color: #ffffff;
  }

  .header-shell.has-mobile-nav .nav-main-submenu-link {
    border-color: rgba(217,85,40,0.10);
    background: rgba(255,255,255,0.42);
  }

  body[data-theme="dark"] .site-header {
    background: rgba(19,11,5,0.98);
  }

  body[data-theme="dark"] .header-shell.has-mobile-nav .header-nav-main {
    background: rgba(19,11,5,0.98);
    border-left-color: rgba(240,224,200,0.10);
    box-shadow: -18px 0 42px rgba(0,0,0,0.34);
  }

  body[data-theme="dark"] .header-shell.has-mobile-nav .header-nav-main-head,
  body[data-theme="dark"] .header-shell.has-mobile-nav .header-nav-theme-row,
  body[data-theme="dark"] .header-nav-user-section {
    border-color: rgba(240,224,200,0.10);
  }

  body[data-theme="dark"] .header-shell.has-mobile-nav .header-nav-main-head {
    color: #c0ad9a;
  }

  body[data-theme="dark"] .header-shell.has-mobile-nav .nav-main-link {
    background: rgba(255,250,243,0.06);
    border-color: rgba(240,224,200,0.10);
    color: #cbb8a4;
  }

  body[data-theme="dark"] .header-shell.has-mobile-nav .nav-main-link i {
    color: #f0a060;
  }

  body[data-theme="dark"] .header-shell.has-mobile-nav .nav-main-link.is-active {
    background: rgba(217,85,40,0.20);
    border-color: rgba(217,85,40,0.34);
    color: #f0a060;
  }
}

@media (max-width: 560px) {
  .header-top-right {
    gap: 6px;
  }

  .site-logo-inline {
    height: 32px;
    max-width: min(160px, 50vw);
  }

  .header-shell.has-mobile-nav .header-nav-main {
    width: min(330px, 94vw);
  }
}

/* Search mobile layout parity */
@media (max-width: 680px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .site-main:has(.search-page-shell) {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .search-page-shell {
    width: 100%;
    max-width: 100%;
    min-height: calc(100vh - 50px);
    padding: 12px;
    gap: 14px;
    border-radius: 0;
    overflow-x: hidden;
  }

  .search-page-hero,
  .search-page-layout,
  .search-page-panel,
  .search-results-shell,
  .search-page-side,
  #songsResults {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .search-page-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .page-col,
  .page-col-center,
  .page-col-right {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .search-filter-panel,
  .search-results-shell,
  .search-latest-panel,
  .search-request-panel {
    padding: 12px;
    border-radius: 16px;
  }

  .search-input-shell {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 50px;
    padding: 0 6px 0 10px;
  }

  .search-page-form input[type="text"] {
    min-width: 0;
    width: 100%;
    padding: 0 8px;
    font-size: 0.98rem;
  }

  .search-submit-btn {
    flex: 0 0 42px;
    width: 42px;
    min-width: 42px;
    height: 34px;
    min-height: 34px;
    margin: 0;
    padding: 0;
  }

  .search-input-shell .search-reset-icon-btn {
    flex: 0 0 34px;
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
    margin: 0 4px 0 0;
  }

  .search-letter-shell {
    margin-top: 12px;
    padding-top: 12px;
  }

  .letter-filter {
    margin: 0 -4px;
    padding: 0 4px 4px;
  }

  .search-song-card .song-card-link {
    padding: 10px 48px 10px 10px;
  }

  .search-song-cover {
    width: 72px;
    height: 72px;
  }

  body[data-theme="dark"] .search-page-shell {
    width: 100%;
    max-width: 100%;
    padding: 12px;
    gap: 14px;
  }

  body[data-theme="dark"] .search-filter-panel,
  body[data-theme="dark"] .search-results-shell,
  body[data-theme="dark"] .search-latest-panel,
  body[data-theme="dark"] .search-request-panel {
    padding: 12px;
    border-radius: 16px;
  }

  body[data-theme="dark"] .search-input-shell {
    min-height: 50px;
    padding: 0 6px 0 10px;
  }
}

@media (max-width: 420px) {
  .search-page-shell {
    padding: 10px;
  }

  .search-filter-panel,
  .search-results-shell,
  .search-latest-panel,
  .search-request-panel,
  body[data-theme="dark"] .search-filter-panel,
  body[data-theme="dark"] .search-results-shell,
  body[data-theme="dark"] .search-latest-panel,
  body[data-theme="dark"] .search-request-panel {
    padding: 10px;
  }

  .search-song-cover {
    width: 66px;
    height: 66px;
  }
}

/* Connected contributor portal refresh */
.site-main:has(.contrib-portal-dashboard-grid) {
  max-width: 100%;
  padding: 0;
  background: #fffaf3;
  background-image:
    radial-gradient(ellipse at 78% 8%, rgba(217,85,40,0.24) 0%, transparent 52%),
    radial-gradient(ellipse at 12% 92%, rgba(40,120,95,0.11) 0%, transparent 45%);
}

.contrib-portal-dashboard-grid {
  width: min(100%, 1180px);
  min-height: calc(100vh - 56px);
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  gap: 20px;
  align-items: start;
  margin: 0 auto;
  padding: 24px 24px 58px;
}

.contrib-portal-dashboard-main,
.contrib-portal-sidebar {
  min-width: 0;
}

.contrib-portal-dashboard-main,
.contrib-my-publications,
.contrib-activity-section,
.contrib-relecture-queue,
.contrib-portal-panel {
  border: 1px solid rgba(255,255,255,0.90);
  background: rgba(255,255,255,0.66);
  box-shadow: 0 8px 34px rgba(180,100,40,0.10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.contrib-portal-dashboard-main {
  display: grid;
  gap: 16px;
  padding: 18px;
  border-radius: 22px;
}

.contrib-portal-dashboard-title {
  margin: 0;
  padding: 8px 2px 0;
  text-align: left;
}

.contrib-portal-dashboard-title .contrib-portal-kicker,
.contrib-my-publications-kicker-row .contrib-portal-kicker,
.contrib-activity-head .contrib-portal-kicker,
.contrib-relecture-queue-kicker {
  color: #d95528;
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.contrib-portal-dashboard-title h2 {
  margin: 8px 0 0;
  color: #1a0e06;
  font-size: clamp(2.1rem, 4vw, 4rem);
  font-weight: 950;
  line-height: 0.98;
}

.contrib-portal-dashboard-hint {
  margin-top: 8px;
  color: #706050;
  font-size: 1rem;
  font-style: normal;
  font-weight: 750;
}

.contrib-portal-primary-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}

.contrib-action-btn {
  min-height: 58px;
  justify-content: center;
  gap: 10px;
  padding: 0 18px;
  border: 1px solid #d95528;
  border-radius: 999px;
  background: #d95528;
  box-shadow: 0 8px 26px rgba(217,85,40,0.22);
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 950;
}

.contrib-action-btn:hover {
  background: #c04420;
  border-color: #c04420;
  filter: none;
  transform: translateY(-1px);
}

.contrib-action-bar {
  margin: 0;
  padding: 10px;
  border: 1px solid rgba(217,85,40,0.14);
  border-radius: 18px;
  background: rgba(255,255,255,0.44);
}

.contrib-action-bar-item {
  min-height: 34px;
  padding: 0 12px;
  font-weight: 900;
}

.contrib-my-publications,
.contrib-activity-section {
  margin: 0;
  padding: 18px;
  border-radius: 22px;
}

.contrib-my-publications-kicker-row {
  margin: 0;
}

.contrib-pub-content {
  gap: 16px;
}

.contrib-pub-section {
  padding: 0;
}

.contrib-pub-divider {
  margin: 0;
  background: rgba(217,85,40,0.12);
}

.contrib-pub-section-head {
  margin-bottom: 12px;
}

.contrib-pub-section-head h4,
.contrib-activity-head h3,
.contrib-relecture-queue-head h3,
.contrib-portal-section-head h3 {
  color: #1a0e06;
  font-weight: 950;
}

.contrib-pub-section-head h4 {
  font-size: 1.18rem;
}

.contrib-pub-section-head > i {
  color: #d95528;
}

.contrib-pub-section-count {
  background: rgba(217,85,40,0.09);
  color: #d95528;
  font-weight: 950;
}

.contrib-pub-group {
  margin-bottom: 14px;
}

.contrib-pub-group-label {
  margin: 10px 0 8px;
  padding: 0;
  background: transparent;
  color: #d95528;
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.08em;
}

.contrib-dashboard-list {
  gap: 8px;
}

.contrib-dashboard-row {
  min-height: 50px;
  padding: 10px 12px;
  border: 1px solid rgba(217,85,40,0.10);
  border-radius: 14px;
  background: rgba(255,255,255,0.62);
}

.contrib-dashboard-row:hover {
  background: rgba(255,255,255,0.86);
  border-color: rgba(217,85,40,0.24);
}

.contrib-dashboard-row strong {
  color: #1a0e06;
  font-weight: 950;
}

.contrib-dashboard-row small,
.contrib-dashboard-empty,
.contrib-dashboard-empty-cta,
.contrib-portal-contributor-name,
.contrib-relecture-queue-head p,
.contrib-relecture-item-meta {
  color: #706050;
}

.contrib-dashboard-stats {
  gap: 8px;
}

.contrib-dashboard-stat {
  min-height: 64px;
  padding: 10px 12px;
  border: 1px solid rgba(217,85,40,0.10);
  border-radius: 14px;
  background: rgba(255,255,255,0.52);
}

.contrib-dashboard-stat span {
  color: #907060;
  font-weight: 900;
}

.contrib-dashboard-stat strong {
  color: #1a0e06;
  font-size: 1.3rem;
  font-weight: 950;
}

.contrib-item-chip {
  min-height: 26px;
  padding: 0 9px;
  border: 1px solid transparent;
  font-weight: 950;
}

.contrib-row-edit {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  color: #907060;
}

.contrib-row-edit:hover {
  background: rgba(217,85,40,0.12);
  color: #d95528;
}

.contrib-activity-section {
  display: grid;
  gap: 14px;
}

.contrib-activity-head {
  margin: 0;
}

.contrib-activity-head h3 {
  margin-top: 6px;
  font-size: 1.25rem;
}

.contrib-portal-sidebar {
  display: grid;
  gap: 16px;
  position: sticky;
  top: 76px;
}

.contrib-relecture-queue,
.contrib-portal-panel {
  padding: 18px;
  border-radius: 22px;
}

.contrib-relecture-queue-head {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
}

.contrib-relecture-queue-head h3,
.contrib-portal-section-head h3 {
  margin: 0;
  font-size: 1.08rem;
}

.contrib-relecture-list,
.contrib-portal-contributor-list {
  display: grid;
  gap: 8px;
}

.contrib-relecture-list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.contrib-relecture-item,
.contrib-portal-contributor-list li {
  border: 1px solid rgba(217,85,40,0.10);
  border-radius: 14px;
  background: rgba(255,255,255,0.52);
}

.contrib-relecture-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
}

.contrib-relecture-item:hover,
.contrib-portal-contributor-list li:hover {
  background: rgba(255,255,255,0.82);
  border-color: rgba(217,85,40,0.22);
}

.contrib-relecture-item-title,
.contrib-portal-contributor-title {
  color: #1a0e06;
  font-weight: 950;
}

.contrib-relecture-item-cta {
  color: #d95528;
}

.contrib-relecture-see-all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  margin-top: 10px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(217,85,40,0.10);
  color: #d95528;
  font-weight: 950;
  text-decoration: none;
}

.contrib-portal-contributors .contrib-portal-section-head {
  margin-bottom: 12px;
}

.contrib-portal-contributor-list li {
  padding: 11px 12px;
}

.contrib-portal-contributor-kind {
  border-color: rgba(217,85,40,0.14);
  background: rgba(255,255,255,0.66);
  font-weight: 950;
}

body[data-theme="dark"] .site-main:has(.contrib-portal-dashboard-grid) {
  background: #130b05;
  background-image:
    radial-gradient(ellipse at 78% 8%, rgba(217,85,40,0.16) 0%, transparent 54%),
    radial-gradient(ellipse at 12% 92%, rgba(40,120,95,0.08) 0%, transparent 46%);
}

body[data-theme="dark"] .contrib-portal-dashboard-main,
body[data-theme="dark"] .contrib-my-publications,
body[data-theme="dark"] .contrib-activity-section,
body[data-theme="dark"] .contrib-relecture-queue,
body[data-theme="dark"] .contrib-portal-panel {
  background: rgba(27,16,9,0.72);
  border-color: rgba(240,224,200,0.10);
  box-shadow: 0 8px 34px rgba(0,0,0,0.14);
}

body[data-theme="dark"] .contrib-portal-dashboard-title h2,
body[data-theme="dark"] .contrib-pub-section-head h4,
body[data-theme="dark"] .contrib-activity-head h3,
body[data-theme="dark"] .contrib-relecture-queue-head h3,
body[data-theme="dark"] .contrib-portal-section-head h3,
body[data-theme="dark"] .contrib-dashboard-row strong,
body[data-theme="dark"] .contrib-dashboard-stat strong,
body[data-theme="dark"] .contrib-relecture-item-title,
body[data-theme="dark"] .contrib-portal-contributor-title {
  color: #c0ad9a;
}

body[data-theme="dark"] .contrib-portal-dashboard-hint,
body[data-theme="dark"] .contrib-dashboard-row small,
body[data-theme="dark"] .contrib-dashboard-empty,
body[data-theme="dark"] .contrib-dashboard-empty-cta,
body[data-theme="dark"] .contrib-portal-contributor-name,
body[data-theme="dark"] .contrib-relecture-queue-head p,
body[data-theme="dark"] .contrib-relecture-item-meta,
body[data-theme="dark"] .contrib-dashboard-stat span {
  color: #b19f8e;
}

body[data-theme="dark"] .contrib-action-bar,
body[data-theme="dark"] .contrib-dashboard-row,
body[data-theme="dark"] .contrib-dashboard-stat,
body[data-theme="dark"] .contrib-relecture-item,
body[data-theme="dark"] .contrib-portal-contributor-list li {
  background: rgba(255,250,243,0.045);
  border-color: rgba(240,224,200,0.08);
}

body[data-theme="dark"] .contrib-dashboard-row:hover,
body[data-theme="dark"] .contrib-relecture-item:hover,
body[data-theme="dark"] .contrib-portal-contributor-list li:hover {
  background: rgba(255,250,243,0.065);
  border-color: rgba(217,85,40,0.22);
}

body[data-theme="dark"] .contrib-pub-divider {
  background: rgba(240,224,200,0.10);
}

body[data-theme="dark"] .contrib-pub-group-label,
body[data-theme="dark"] .contrib-portal-dashboard-title .contrib-portal-kicker,
body[data-theme="dark"] .contrib-my-publications-kicker-row .contrib-portal-kicker,
body[data-theme="dark"] .contrib-activity-head .contrib-portal-kicker,
body[data-theme="dark"] .contrib-relecture-queue-kicker {
  color: #f0a060;
}

@media (max-width: 980px) {
  .contrib-portal-dashboard-grid {
    grid-template-columns: 1fr;
    padding: 18px 24px 48px;
  }

  .contrib-portal-sidebar {
    position: static;
  }
}

@media (max-width: 680px) {
  .contrib-portal-dashboard-grid {
    padding: 12px;
    gap: 14px;
  }

  .contrib-portal-dashboard-main,
  .contrib-my-publications,
  .contrib-activity-section,
  .contrib-relecture-queue,
  .contrib-portal-panel {
    padding: 12px;
    border-radius: 16px;
  }

  .contrib-portal-dashboard-title h2 {
    font-size: 2.1rem;
  }

  .contrib-portal-primary-actions {
    grid-template-columns: 1fr;
  }

  .contrib-action-btn {
    min-height: 52px;
  }

  .contrib-action-bar {
    gap: 6px;
  }

  .contrib-action-bar-item {
    width: 100%;
    justify-content: flex-start;
  }

  .contrib-dashboard-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .contrib-row-edit {
    grid-column: 2;
  }

  .contrib-dashboard-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Favorites page refresh */
.site-main:has(.favorites-shell) {
  max-width: 100%;
  padding: 0;
  background: #fffaf3;
  background-image:
    radial-gradient(ellipse at 78% 8%, rgba(217,85,40,0.22) 0%, transparent 52%),
    radial-gradient(ellipse at 12% 92%, rgba(40,120,95,0.10) 0%, transparent 45%);
}

.favorites-shell {
  width: min(100%, 1040px);
  max-width: none;
  margin: 0 auto;
  padding: 24px 24px 58px;
  gap: 18px;
}

.favorites-hero,
.favorites-results .search-results-shell,
.favorites-empty {
  border: 1px solid rgba(255,255,255,0.90);
  background: rgba(255,255,255,0.68);
  box-shadow: 0 8px 34px rgba(180,100,40,0.10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.favorites-hero {
  padding: 18px;
  border-radius: 22px;
  gap: 14px;
}

.favorites-hero-identity {
  gap: 12px;
}

.favorites-hero-avatar {
  width: 44px;
  height: 44px;
  background: #d95528;
  box-shadow: 0 8px 24px rgba(217,85,40,0.22);
  font-family: var(--km-title-font);
}

.favorites-hero-copy h2 {
  margin-top: 6px;
  color: #1a0e06;
  font-size: clamp(1.35rem, 2.4vw, 2.3rem);
  font-weight: 950;
  line-height: 1.02;
}

.favorites-search-input-wrap {
  min-height: 54px;
  padding: 0 6px 0 14px;
  gap: 8px;
  border: 1px solid rgba(217,85,40,0.16);
  border-radius: 999px;
  background: rgba(255,255,255,0.76);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.55);
}

.favorites-search-input-wrap > i.bi-search {
  position: static;
  flex: 0 0 auto;
  color: #d95528;
  font-size: 1rem;
}

.favorites-search-input-wrap input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 6px;
  border: 0;
  background: transparent;
  color: #1a0e06;
  font-size: 1rem;
  font-weight: 850;
  box-shadow: none;
}

.favorites-search-input-wrap input:focus {
  box-shadow: none;
}

.favorites-search-input-wrap input::placeholder {
  color: #6f7f98;
  opacity: 1;
}

.favorites-search-clear {
  position: static;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(217,85,40,0.22);
  background: rgba(255,255,255,0.82);
  color: #8a6a5a;
}

.favorites-search-clear:hover {
  background: #d95528;
  color: #ffffff;
}

.favorites-controls {
  gap: 12px;
  justify-content: space-between;
  padding-top: 2px;
}

.favorites-control-group {
  gap: 8px;
}

.favorites-control-label,
.favorites-sort-label {
  color: #d95528;
  font-size: 0.70rem;
  font-weight: 950;
  letter-spacing: 0.10em;
}

.favorites-sort-pills {
  gap: 6px;
}

.favorites-sort-pill {
  min-height: 34px;
  padding: 0 13px;
  border-color: rgba(217,85,40,0.16);
  background: rgba(255,255,255,0.72);
  color: #5d4538;
  font-weight: 900;
}

.favorites-sort-pill:hover {
  border-color: rgba(217,85,40,0.28);
  background: rgba(217,85,40,0.08);
  color: #1a0e06;
}

.favorites-sort-pill.is-active {
  border-color: #d95528;
  background: #d95528;
  color: #ffffff;
}

.favorites-results .search-results-shell {
  padding: 18px;
  border-radius: 22px;
}

.favorites-results .search-results-head {
  margin-bottom: 14px;
}

.favorites-results .search-results-count {
  color: #d95528;
  font-size: 0.80rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.favorites-results .search-song-list {
  gap: 10px;
}

.favorites-results .search-song-card {
  border-color: rgba(217,85,40,0.10);
  background: rgba(255,255,255,0.74);
}

.favorites-results .search-song-card:hover {
  border-color: rgba(217,85,40,0.24);
  background: rgba(255,255,255,0.92);
}

.favorites-empty {
  border-radius: 22px;
  color: #7b6558;
}

.favorites-empty h3 {
  color: #1a0e06;
  font-family: var(--km-title-font);
  font-size: 1.55rem;
}

.favorites-empty-icon {
  color: #d95528;
}

.favorites-empty-cta {
  background: #d95528;
  color: #ffffff;
}

.favorites-empty-cta:hover {
  background: #c04420;
}

body[data-theme="dark"] .site-main:has(.favorites-shell) {
  background: #130b05;
  background-image:
    radial-gradient(ellipse at 78% 8%, rgba(217,85,40,0.16) 0%, transparent 54%),
    radial-gradient(ellipse at 12% 92%, rgba(40,120,95,0.08) 0%, transparent 46%);
}

body[data-theme="dark"] .favorites-hero,
body[data-theme="dark"] .favorites-results .search-results-shell,
body[data-theme="dark"] .favorites-empty {
  background: rgba(27,16,9,0.72);
  border-color: rgba(240,224,200,0.10);
  box-shadow: 0 8px 34px rgba(0,0,0,0.14);
}

body[data-theme="dark"] .favorites-hero-copy h2,
body[data-theme="dark"] .favorites-empty h3 {
  color: #f5ead8;
}

body[data-theme="dark"] .favorites-search-input-wrap {
  border-color: rgba(240,224,200,0.12);
  background: rgba(255,255,255,0.06);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}

body[data-theme="dark"] .favorites-search-input-wrap input {
  background: transparent;
  border-color: transparent;
  color: #f5ead8;
}

body[data-theme="dark"] .favorites-search-input-wrap input::placeholder {
  color: #8190a5;
}

body[data-theme="dark"] .favorites-search-clear {
  background: rgba(255,255,255,0.07);
  border-color: rgba(240,224,200,0.12);
  color: #d0b898;
}

body[data-theme="dark"] .favorites-sort-pill {
  background: rgba(255,255,255,0.06);
  border-color: rgba(240,224,200,0.10);
  color: #d0b898;
}

body[data-theme="dark"] .favorites-sort-pill:hover {
  background: rgba(217,85,40,0.12);
  color: #f5ead8;
}

body[data-theme="dark"] .favorites-sort-pill.is-active {
  background: #d95528;
  border-color: #d95528;
  color: #ffffff;
}

body[data-theme="dark"] .favorites-results .search-song-card {
  background: rgba(22,12,6,0.64);
  border-color: rgba(240,224,200,0.08);
}

body[data-theme="dark"] .favorites-empty {
  color: #b8a08d;
}

@media (max-width: 760px) {
  .favorites-shell {
    padding: 14px 12px 42px;
    gap: 14px;
  }

  .favorites-hero,
  .favorites-results .search-results-shell,
  .favorites-empty {
    border-radius: 16px;
  }

  .favorites-hero {
    padding: 14px;
  }

  .favorites-hero-avatar {
    width: 38px;
    height: 38px;
    font-size: 1.05rem;
  }

  .favorites-hero-copy h2 {
    font-size: 1.35rem;
  }

  .favorites-controls,
  .favorites-control-group {
    align-items: flex-start;
    flex-direction: column;
  }

  .favorites-results .search-results-shell {
    padding: 14px;
  }
}

/* Header mobile behavior guard */
@media (max-width: 900px) {
  .header-shell.has-mobile-nav::before {
    z-index: 109;
  }

  .header-shell.has-mobile-nav .header-theme-wrap {
    display: flex;
    align-items: center;
  }

  .header-shell.has-mobile-nav .header-theme-wrap .theme-toggle {
    min-height: 38px;
    padding: 4px 7px;
  }

  .header-shell.has-mobile-nav .header-theme-wrap .theme-toggle-track {
    width: 30px;
    height: 16px;
  }

  .header-shell.has-mobile-nav .header-theme-wrap .theme-toggle-thumb {
    width: 12px;
    height: 12px;
  }

  .header-shell.has-mobile-nav .header-theme-wrap .theme-toggle.is-dark .theme-toggle-thumb {
    transform: translateX(14px);
  }

  .header-shell.has-mobile-nav .header-nav-main {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(340px, 92vw);
    height: 100dvh;
    z-index: 120;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 8px;
    padding: 14px;
    border-left: 1px solid rgba(217,85,40,0.14);
    border-radius: 18px 0 0 18px;
    background: #fffaf3;
    box-shadow: -18px 0 42px rgba(66,38,20,0.24);
    transform: translateX(104%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.24s ease, opacity 0.18s ease, visibility 0.18s ease;
    overflow-y: auto;
  }

  .header-shell.has-mobile-nav.is-mobile-nav-open .header-nav-main {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .header-shell.has-mobile-nav .header-nav-main-head {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 12px;
    margin: 0 0 4px;
    border-bottom: 1px solid rgba(217,85,40,0.12);
    color: #1a0e06;
    font-size: 0.95rem;
    font-weight: 900;
  }

  .header-shell.has-mobile-nav .nav-main-link {
    display: flex;
    flex: 0 0 auto;
    width: 100%;
    min-height: 46px;
    justify-content: flex-start;
    padding: 0 14px;
    border: 1px solid rgba(217,85,40,0.12);
    border-radius: 14px;
    background: rgba(255,255,255,0.68);
    color: #5f4635;
    font-size: 0.98rem;
    font-weight: 900;
  }

  .header-shell.has-mobile-nav .nav-main-link i {
    width: 22px;
    color: #d95528;
    text-align: center;
  }

  .header-shell.has-mobile-nav .nav-main-link.is-active {
    background: #fff4e9;
    border-color: rgba(217,85,40,0.30);
    color: #d95528;
  }

  .header-shell.has-mobile-nav .nav-main-link.is-active i {
    color: #d95528;
  }

  .header-shell.has-mobile-nav .nav-main-dropdown {
    display: grid;
    flex: 0 0 auto;
    width: 100%;
    gap: 6px;
  }

  .header-shell.has-mobile-nav .nav-main-dropdown::after {
    display: none;
  }

  .header-shell.has-mobile-nav .nav-main-dropdown-chevron {
    margin-left: auto;
  }

  .header-shell.has-mobile-nav .nav-main-submenu {
    position: static;
    display: none;
    width: 100%;
    min-width: 0;
    gap: 7px;
    padding: 4px 0 2px 12px;
    border: 0;
    border-left: 2px solid rgba(217,85,40,0.18);
    background: transparent;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }

  .header-shell.has-mobile-nav .nav-main-dropdown.is-open .nav-main-submenu {
    display: grid;
  }

  .header-shell.has-mobile-nav .nav-main-dropdown.is-open .nav-main-dropdown-chevron {
    transform: rotate(180deg);
  }

  .header-shell.has-mobile-nav .nav-main-submenu-link {
    width: 100%;
    min-height: 40px;
    border: 1px solid rgba(217,85,40,0.10);
    border-radius: 10px;
    background: rgba(255,255,255,0.48);
    color: #5f4635;
    justify-content: flex-start;
    padding: 0 12px;
  }

  .header-shell.has-mobile-nav .header-nav-theme-row {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid rgba(217,85,40,0.12);
  }

  .header-shell.has-mobile-nav.is-mobile-nav-open::before {
    opacity: 1;
    pointer-events: auto;
  }

  .header-nav-toggle {
    position: relative;
    z-index: 121;
  }

  .header-shell.has-mobile-nav.is-mobile-nav-open .header-nav-toggle {
    z-index: 108;
  }

  body[data-theme="dark"] .header-shell.has-mobile-nav .header-nav-main {
    background: #130b05;
    border-left-color: rgba(240,224,200,0.10);
    box-shadow: -18px 0 42px rgba(0,0,0,0.42);
  }

  body[data-theme="dark"] .header-shell.has-mobile-nav .header-nav-main-head,
  body[data-theme="dark"] .header-shell.has-mobile-nav .header-nav-theme-row {
    border-color: rgba(240,224,200,0.10);
    color: #c0ad9a;
  }

  body[data-theme="dark"] .header-shell.has-mobile-nav .nav-main-link {
    background: rgba(255,250,243,0.07);
    border-color: rgba(240,224,200,0.10);
    color: #cbb8a4;
  }

  body[data-theme="dark"] .header-shell.has-mobile-nav .nav-main-link i {
    color: #f0a060;
  }

  body[data-theme="dark"] .header-shell.has-mobile-nav .nav-main-link.is-active {
    background: rgba(217,85,40,0.20);
    border-color: rgba(217,85,40,0.34);
    color: #f0a060;
  }

  body[data-theme="dark"] .header-shell.has-mobile-nav .nav-main-submenu {
    border-left-color: rgba(240,160,96,0.22);
  }

  body[data-theme="dark"] .header-shell.has-mobile-nav .nav-main-submenu-link {
    background: rgba(255,250,243,0.045);
    border-color: rgba(240,224,200,0.08);
    color: #cbb8a4;
  }
}

/* ==============================================
   PAGE CONTRIBUER — redesign (cfr-*)
   ============================================== */

.site-main:has(.cfr-page) { max-width: 100%; padding: 0; }

.cfr-page {
  min-height: calc(100vh - 56px);
  background: #fffaf3;
  background-image:
    radial-gradient(ellipse at 82% 8%,  rgba(217,85,40,0.22) 0%, transparent 52%),
    radial-gradient(ellipse at 12% 90%, rgba(217,85,40,0.13) 0%, transparent 44%);
}

/* ── Eyebrow ── */
.cfr-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-size: 0.74rem;
  font-weight: 800;
  color: #d95528;
  text-transform: uppercase;
  letter-spacing: 0.10em;
}
.cfr-eyebrow i { font-size: 0.88em; }

/* ── Hero ── */
.cfr-hero { padding: 44px 40px 28px; max-width: 1100px; margin: 0 auto; }
.cfr-hero-inner { max-width: 560px; }

.cfr-title {
  font-size: clamp(2.6rem, 4.5vw, 4.2rem);
  font-weight: 900;
  line-height: 0.93;
  color: #1a0e06;
  letter-spacing: -0.03em;
  margin: 14px 0 18px;
}

.cfr-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
}
.cfr-status-draft     { background: rgba(100,116,139,0.12); color: #475569; }
.cfr-status-pending   { background: rgba(234,179,8,0.14);  color: #854d0e; }
.cfr-status-validated { background: rgba(34,197,94,0.14);  color: #166534; }

/* ── Notices ── */
.cfr-notices { max-width: 1100px; margin: 0 auto; padding: 0 40px 12px; }

/* ── Layout ── */
.cfr-layout {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 40px 64px;
}

.cfr-form-grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 16px;
  margin-bottom: 16px;
  align-items: start;
}
.cfr-col-left,
.cfr-col-right { min-width: 0; }
.cfr-col-left .cfr-card:last-child { margin-bottom: 0; }

/* ── Cards ── */
.cfr-card {
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.92);
  border-radius: 22px;
  padding: 24px;
  margin-bottom: 16px;
}
.cfr-card:last-child { margin-bottom: 0; }

.cfr-card-head { margin-bottom: 18px; }

.cfr-card-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}

.cfr-card-hint {
  margin: 6px 0 0;
  font-size: 0.84rem;
  color: #907060;
  line-height: 1.45;
}

.cfr-lyrics-card {
  background:
    radial-gradient(ellipse at top right, rgba(217,85,40,0.09) 0%, transparent 58%),
    rgba(255,255,255,0.72);
  border-color: rgba(217,85,40,0.18);
}

.cfr-actions-card {
  background: rgba(26,14,6,0.03);
  border-color: rgba(234,223,206,0.60);
}

.cfr-explanation-field { margin-top: 20px; }

.cfr-explanation-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 15px;
  border: 1px solid rgba(217,85,40,0.20);
  border-radius: 999px;
  background: rgba(255,247,237,0.86);
  color: #8a6048;
  font-weight: 900;
  cursor: pointer;
}

.cfr-explanation-toggle:hover {
  border-color: rgba(217,85,40,0.38);
  background: rgba(255,255,255,0.92);
  color: #d65e2c;
}

.cfr-explanation-body {
  display: grid;
  gap: 7px;
  margin-top: 12px;
}

.cfr-explanation-field.is-collapsed .cfr-explanation-body {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

body[data-theme="dark"] .cfr-explanation-toggle {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
  color: #d0b898;
}

body[data-theme="dark"] .cfr-explanation-toggle:hover {
  background: rgba(217,85,40,0.12);
  border-color: rgba(217,85,40,0.30);
  color: #f0a060;
}

/* ── Lyrics meta pills ── */
.cfr-meta-pills { display: flex; gap: 6px; flex-wrap: wrap; }

.cfr-meta-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  background: rgba(234,223,206,0.55);
  color: #907060;
  border: 1px solid rgba(234,223,206,0.70);
  font-variant-numeric: tabular-nums;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.cfr-meta-status.is-empty   { color: #b0927a; }
.cfr-meta-status.is-partial { background: rgba(234,179,8,0.12); color: #854d0e; border-color: rgba(234,179,8,0.28); }
.cfr-meta-status.is-complete { background: rgba(34,197,94,0.12); color: #166534; border-color: rgba(34,197,94,0.28); }

/* ── Labels ── */
.cfr-optional { font-size: 0.76em; font-weight: 500; color: #b0927a; font-style: italic; }
.cfr-required { color: #d95528; }

/* ── Form inputs ── */
.cfr-form input[type="url"],
.cfr-form input[type="file"] {
  width: 100%;
  padding: 8px;
  border-radius: 10px;
  border: none;
  background: #eef3f8;
  color: #111827;
  font: inherit;
}
.cfr-form input[type="text"]:focus,
.cfr-form input[type="number"]:focus,
.cfr-form input[type="url"]:focus,
.cfr-form textarea:focus {
  outline: 2px solid rgba(217,85,40,0.45);
  outline-offset: 2px;
}

/* ── Action buttons ── */
.cfr-action-row { display: flex; flex-wrap: wrap; gap: 10px; }

.cfr-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 800;
  cursor: pointer;
  border: none;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.18s, box-shadow 0.18s, transform 0.12s;
}
.cfr-btn:active { transform: scale(0.98); }

.cfr-btn-primary {
  background: #d95528;
  color: #fff;
  box-shadow: 0 6px 22px rgba(217,85,40,0.40);
}
.cfr-btn-primary:hover { background: #c44d24; box-shadow: 0 8px 28px rgba(217,85,40,0.50); }

.cfr-btn-ghost {
  background: rgba(255,255,255,0.70);
  color: #3a2010;
  border: 1.5px solid rgba(217,85,40,0.28);
}
.cfr-btn-ghost:hover { background: rgba(255,255,255,0.95); border-color: rgba(217,85,40,0.50); }

.cfr-btn-dark { background: rgba(26,14,6,0.85); color: #c0ad9a; }
.cfr-btn-dark:hover { background: #1a0e06; }

.cfr-btn-muted {
  background: transparent;
  color: #907060;
  border: 1px solid rgba(234,223,206,0.80);
}
.cfr-btn-muted:hover { background: rgba(234,223,206,0.30); }

/* ── Aside ── */
.cfr-aside {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 18px;
}

.cfr-aside-card {
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.92);
  border-radius: 22px;
  padding: 20px;
}

/* ── Checklist ── */
.cfr-checklist {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cfr-checklist li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.50);
  border: 1px solid rgba(234,223,206,0.55);
  font-size: 0.86rem;
  color: #907060;
  transition: background 0.22s, border-color 0.22s, color 0.22s;
}
.cfr-checklist li.is-done {
  background: rgba(34,197,94,0.08);
  border-color: rgba(34,197,94,0.28);
  color: #166534;
}
.cfr-chk-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.90rem;
  transition: color 0.22s;
}
.cfr-checklist li.is-done .cfr-chk-icon { color: #22c55e; }

/* ── Info list ── */
.cfr-info-list {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cfr-info-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.84rem;
  color: #5a4030;
  line-height: 1.45;
}
.cfr-info-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
}
.cfr-info-icon--draft  { background: rgba(100,116,139,0.12); color: #475569; }
.cfr-info-icon--review { background: rgba(234,179,8,0.14);  color: #854d0e; }
.cfr-info-icon--direct { background: rgba(34,197,94,0.14);  color: #166534; }

/* ── Status in aside ── */
.cfr-current-status {
  display: inline-block;
  margin: 10px 0 12px;
  font-size: 0.95rem;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 999px;
}
.cfr-aside-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.83rem;
  font-weight: 700;
  color: #d95528;
  text-decoration: none;
}
.cfr-aside-link:hover { text-decoration: underline; }

/* ── Dark mode ── */
body[data-theme="dark"] .cfr-page {
  background-color: #120a04;
  background-image:
    radial-gradient(ellipse at 82% 8%,  rgba(217,85,40,0.20) 0%, transparent 52%),
    radial-gradient(ellipse at 12% 90%, rgba(217,85,40,0.10) 0%, transparent 44%);
}
body[data-theme="dark"] .cfr-title     { color: #c0ad9a; }
body[data-theme="dark"] .cfr-card-hint { color: #907060; }
body[data-theme="dark"] .cfr-card,
body[data-theme="dark"] .cfr-aside-card {
  background: rgba(20,10,2,0.70);
  border-color: rgba(255,255,255,0.06);
}
body[data-theme="dark"] .cfr-info-list li  { color: #c0a888; }
body[data-theme="dark"] .cfr-meta-pill     { background: rgba(50,30,10,0.60); border-color: rgba(255,255,255,0.10); color: #907060; }
body[data-theme="dark"] .cfr-checklist li  { background: rgba(20,10,2,0.50); border-color: rgba(255,255,255,0.08); color: #907060; }
body[data-theme="dark"] .cfr-checklist li.is-done { background: rgba(34,197,94,0.08); border-color: rgba(34,197,94,0.20); color: #86efac; }
body[data-theme="dark"] .cfr-btn-ghost     { background: rgba(255,255,255,0.08); color: #c0ad9a; border-color: rgba(217,85,40,0.25); }
body[data-theme="dark"] .cfr-btn-muted     { color: #907060; border-color: rgba(255,255,255,0.12); }
body[data-theme="dark"] .cfr-actions-card  { background: rgba(26,14,6,0.40); border-color: rgba(255,255,255,0.06); }

/* ── Responsive ── */
@media (max-width: 900px) {
  .cfr-layout    { padding: 0 24px 48px; }
  .cfr-form-grid { grid-template-columns: 1fr; }
  .cfr-hero      { padding: 32px 24px 22px; }
  .cfr-notices   { padding: 0 24px 12px; }
}

@media (max-width: 600px) {
  .cfr-hero   { padding: 24px 16px 18px; }
  .cfr-title  { font-size: 2.4rem; }
  .cfr-layout { padding: 0 16px 36px; }
  .cfr-notices { padding: 0 16px 10px; }
  .cfr-card   { padding: 18px 16px; border-radius: 18px; }
  .cfr-action-row { flex-direction: column; }
  .cfr-btn    { justify-content: center; }
}

/* ══════════════════════════════════════════════
   DAF — dictionnaire_ajouter.php redesign
   ══════════════════════════════════════════════ */

.site-main:has(.daf-page) { max-width: 100%; padding: 0; }

.daf-page {
  min-height: calc(100vh - 56px);
  background: #fffaf3;
  background-image:
    radial-gradient(ellipse at 78% 6%,  rgba(217,85,40,0.18) 0%, transparent 50%),
    radial-gradient(ellipse at 10% 88%, rgba(217,85,40,0.09) 0%, transparent 42%);
}

.daf-hero {
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 40px 18px;
}

.daf-hero-inner { display: flex; flex-direction: column; gap: 6px; }

.daf-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #907060;
  text-decoration: none;
  margin-bottom: 4px;
}
.daf-breadcrumb:hover { color: #d95528; }

.daf-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.74rem;
  font-weight: 800;
  color: #d95528;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  margin: 0;
}

.daf-notices {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 40px 12px;
}

.daf-layout {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 40px 64px;
}

.daf-form-grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 16px;
  margin-bottom: 16px;
  align-items: start;
}

.daf-col-left,
.daf-col-right { min-width: 0; }

/* ── Cards ── */
.daf-card {
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.92);
  border-radius: 22px;
  padding: 24px;
  margin-bottom: 16px;
}
.daf-col-left .daf-card:last-child { margin-bottom: 0; }
.daf-optional-row .daf-card { margin-bottom: 0; }

.daf-card-synonyms {
  position: relative;
  z-index: 20;
  overflow: visible;
}

.daf-card-defs {
  background: rgba(255,248,240,0.82);
  border-color: rgba(217,85,40,0.14);
}

.daf-actions-card {
  background: rgba(26,14,6,0.04);
  border-color: rgba(26,14,6,0.08);
  margin-bottom: 0;
}

/* ── Card eyebrow ── */
.daf-card-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 800;
  color: #d95528;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin: 0 0 16px;
}

.daf-required-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.68rem;
  font-weight: 700;
  color: #fff;
  background: #d95528;
  border-radius: 999px;
  padding: 1px 8px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-left: 4px;
}

.daf-optional {
  font-size: 0.68rem;
  font-weight: 600;
  color: #907060;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-left: 2px;
}

.daf-required { color: #d95528; font-weight: 700; }

.daf-card-hint {
  font-size: 0.82rem;
  color: #907060;
  margin: -8px 0 14px;
  line-height: 1.45;
}

/* ── Fields ── */
.daf-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 14px;
}
.daf-field:last-child { margin-bottom: 0; }

.daf-field label {
  font-size: 0.80rem;
  font-weight: 700;
  color: #3d2010;
  letter-spacing: 0.01em;
}

.daf-field input[type="text"],
.daf-field select,
.daf-field textarea {
  width: 100%;
  padding: 9px 13px;
  font-size: 0.91rem;
  color: #1a0e06;
  background: rgba(255,255,255,0.85);
  border: 1.5px solid #e8d8c4;
  border-radius: 11px;
  outline: none;
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.daf-field select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='%23907060' d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
}

.daf-field textarea {
  resize: vertical;
  min-height: 80px;
}

.daf-field input[type="text"]:focus,
.daf-field select:focus,
.daf-field textarea:focus {
  border-color: #d95528;
  box-shadow: 0 0 0 3px rgba(217,85,40,0.12);
}

.daf-hint {
  font-size: 0.76rem;
  color: #907060;
  line-height: 1.4;
}

/* ── Synonym search ── */
.daf-syn-input {
  width: 100%;
  padding: 8px 12px;
  font-size: 0.88rem;
  color: #1a0e06;
  background: rgba(255,255,255,0.85);
  border: 1.5px solid #e8d8c4;
  border-radius: 10px;
  outline: none;
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.daf-syn-input:focus {
  border-color: #d95528;
  box-shadow: 0 0 0 3px rgba(217,85,40,0.12);
}
.daf-syn-input::placeholder { color: #b09080; }

/* ── Définition entries ── */
.daf-def-entry {
  border: 1px solid rgba(217,85,40,0.12);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 10px;
  background: rgba(255,255,255,0.55);
}

.daf-def-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.daf-def-num {
  font-size: 0.76rem;
  font-weight: 800;
  color: #d95528;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.daf-row-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: rgba(217,85,40,0.10);
  color: #d95528;
  cursor: pointer;
  font-size: 0.85rem;
  transition: background 0.15s;
}
.daf-row-remove:hover { background: rgba(217,85,40,0.22); }

.daf-def-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* ── Inline entries (équivalents, expressions) ── */
.daf-inline-entry {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.daf-inline-entry input {
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  font-size: 0.88rem;
  color: #1a0e06;
  background: rgba(255,255,255,0.85);
  border: 1.5px solid #e8d8c4;
  border-radius: 10px;
  outline: none;
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.daf-inline-entry input:focus {
  border-color: #d95528;
  box-shadow: 0 0 0 3px rgba(217,85,40,0.12);
}
.daf-inline-entry input::placeholder { color: #b09080; }

/* ── Optional row (2 columns inside right col) ── */
.daf-optional-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* ── Add button ── */
.daf-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.80rem;
  font-weight: 700;
  color: #d95528;
  background: rgba(217,85,40,0.07);
  border: 1.5px dashed rgba(217,85,40,0.30);
  border-radius: 10px;
  padding: 7px 14px;
  cursor: pointer;
  margin-top: 4px;
  transition: background 0.15s, border-color 0.15s;
}
.daf-add-btn:hover {
  background: rgba(217,85,40,0.13);
  border-color: rgba(217,85,40,0.50);
}

/* ── Actions ── */
.daf-action-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.daf-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 24px;
  border-radius: 999px;
  font-size: 0.90rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.13s, box-shadow 0.13s, background 0.13s;
}
.daf-btn:hover { transform: translateY(-1px); }

.daf-btn-primary {
  background: #d95528;
  color: #fff;
  box-shadow: 0 4px 18px rgba(217,85,40,0.32);
}
.daf-btn-primary:hover {
  background: #c44a1e;
  box-shadow: 0 6px 24px rgba(217,85,40,0.44);
}

.daf-btn-muted {
  background: transparent;
  color: #907060;
  border: 1.5px solid rgba(144,112,96,0.25);
}
.daf-btn-muted:hover { color: #d95528; border-color: rgba(217,85,40,0.30); }

/* ── Dark mode ── */
body[data-theme="dark"] .daf-page {
  background-color: #120a04;
  background-image:
    radial-gradient(ellipse at 78% 6%,  rgba(217,85,40,0.20) 0%, transparent 52%),
    radial-gradient(ellipse at 10% 88%, rgba(217,85,40,0.10) 0%, transparent 44%);
}
body[data-theme="dark"] .daf-card {
  background: rgba(20,10,2,0.70);
  border-color: rgba(255,255,255,0.06);
}
body[data-theme="dark"] .daf-card-defs {
  background: rgba(30,12,2,0.75);
  border-color: rgba(217,85,40,0.18);
}
body[data-theme="dark"] .daf-actions-card {
  background: rgba(26,14,6,0.40);
  border-color: rgba(255,255,255,0.06);
}
body[data-theme="dark"] .daf-field label     { color: #d0b898; }
body[data-theme="dark"] .daf-card-hint       { color: #907060; }
body[data-theme="dark"] .daf-hint            { color: #7a5a48; }
body[data-theme="dark"] .daf-field input[type="text"],
body[data-theme="dark"] .daf-field select,
body[data-theme="dark"] .daf-field textarea {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
  color: #c0ad9a;
}
body[data-theme="dark"] .daf-field input[type="text"]::placeholder,
body[data-theme="dark"] .daf-field textarea::placeholder { color: #6a5040; }
body[data-theme="dark"] .daf-def-entry {
  background: rgba(255,255,255,0.04);
  border-color: rgba(217,85,40,0.18);
}
body[data-theme="dark"] .daf-inline-entry input {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
  color: #c0ad9a;
}
body[data-theme="dark"] .daf-syn-input {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
  color: #c0ad9a;
}
body[data-theme="dark"] .daf-btn-muted {
  color: #907060;
  border-color: rgba(255,255,255,0.12);
}

/* Search input action buttons */
.search-page-shell .search-filter-panel {
  padding: 12px;
  border: 1px solid rgba(255,255,255,.90);
  border-radius: 18px;
  background: rgba(255,255,255,.64);
  box-shadow: 0 8px 28px rgba(180,100,40,.09);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.search-page-shell .search-page-form {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  background-color: unset !important;
}

.search-page-shell .search-input-shell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 6px 0 14px;
  border: 1px solid rgba(214,94,44,.16);
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  box-shadow: none;
}

.search-page-shell .search-input-shell > i.bi-search {
  flex: 0 0 auto;
  color: #d65e2c;
  font-size: 1rem;
}

.search-page-shell .search-input-shell input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
  padding-left: 0;
  padding-right: 8px;
  color: #1a0e06;
  font-size: .95rem;
  font-weight: 800;
}

.search-page-shell .search-input-shell input[type="text"]::placeholder {
  color: #7d8aa0;
  opacity: 1;
}

.search-page-shell .search-input-shell .search-reset-icon-btn,
.search-page-shell .search-input-shell .search-submit-icon-btn {
  display: inline-flex;
  flex: 0 0 34px;
  align-items: center;
  justify-content: center;
  width: 34px;
  min-width: 34px;
  max-width: 34px;
  height: 34px;
  min-height: 34px;
  margin: 0;
  padding: 0;
  border-radius: 999px;
  text-decoration: none;
}

.search-page-shell .search-input-shell .search-reset-icon-btn {
  border: 1px solid rgba(214,94,44,.18);
  background: rgba(255,255,255,.78);
  color: #8a6a5a;
  flex-basis: 34px;
  font-size: .78rem;
}

.search-page-shell .search-input-shell .search-submit-icon-btn {
  border: 0;
  background: #d65e2c;
  color: #ffffff;
}

.search-page-shell .search-input-shell .search-submit-icon-btn:hover {
  background: #c84f22;
}

.search-page-shell .search-input-shell .search-submit-icon-btn i {
  font-size: 1rem;
}

.search-page-shell .search-letter-shell {
  margin-top: 14px;
  padding-top: 14px;
}

@media (max-width: 680px) {
  .search-page-shell .search-input-shell {
    gap: 5px;
    padding: 0 6px 0 10px;
  }

  .search-page-shell .search-input-shell .search-reset-icon-btn,
  .search-page-shell .search-input-shell .search-submit-icon-btn {
    flex-basis: 34px;
    width: 34px;
    min-width: 34px;
    max-width: 34px;
    height: 34px;
    min-height: 34px;
  }
}

/* Mobile menu + compact sticky search */
@media (max-width: 900px) {
  .header-shell.has-mobile-nav .header-nav-main {
    left: 0;
    right: 0;
    width: 100vw;
    max-width: 100vw;
    border-left: 0;
    border-radius: 0;
  }
}

.search-sticky-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  color: #d65e2c;
  font-family: var(--km-title-font);
  font-size: 1.18rem;
  font-weight: 900;
  line-height: 1.1;
  transition: margin 0.18s ease, font-size 0.18s ease;
}

.search-sticky-title i {
  font-size: 0.95rem;
  line-height: 1;
}

.search-page-shell .search-filter-panel {
  position: sticky;
  top: var(--search-sticky-top, 74px);
  z-index: 190;
  transition:
    padding 0.18s ease,
    border-radius 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease;
}

.search-page-shell.is-search-compact .search-page-hero {
  margin-bottom: -4px;
  opacity: 0.35;
  transform: translateY(-4px);
}

.search-page-shell.is-search-compact .search-page-kicker {
  font-size: 0.62rem;
}

.search-page-shell.is-search-compact .search-filter-panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100vw;
  max-width: 100vw;
  z-index: 240;
  padding: 6px 9px !important;
  border-radius: 0 !important;
  background: rgba(255,255,255,0.88);
  box-shadow: 0 12px 34px rgba(66,38,20,0.16);
}

.search-page-shell.is-search-compact .page-col-center {
  padding-top: calc(var(--search-filter-space, 128px) + 10px);
}

.search-page-shell.is-search-compact .search-sticky-title {
  margin-bottom: 6px;
  font-size: 0.92rem;
}

.search-page-shell.is-search-compact .search-input-shell {
  min-height: 32px !important;
  height: 32px;
  gap: 5px;
  padding: 0 5px 0 10px !important;
}

.search-page-shell.is-search-compact .search-input-shell input[type="text"] {
  height: 30px;
  min-height: 30px;
  padding: 0 5px 0 0 !important;
  font-size: 0.82rem !important;
  line-height: 30px;
}

.search-page-shell.is-search-compact .search-input-shell .search-reset-icon-btn,
.search-page-shell.is-search-compact .search-input-shell .search-submit-icon-btn {
  flex-basis: 26px !important;
  width: 26px !important;
  min-width: 26px !important;
  max-width: 26px !important;
  height: 26px !important;
  min-height: 26px !important;
}

.search-page-shell.is-search-compact .search-letter-shell {
  margin-top: 8px;
  padding-top: 8px;
  padding-bottom: 0;
}

.search-page-shell.is-search-compact .letter-filter {
  gap: 3px;
  padding-bottom: 2px;
}

.search-page-shell.is-search-compact .letter-btn {
  min-width: 28px;
  min-height: 28px;
  padding: 0 8px;
  font-size: 0.72rem;
}

body[data-theme="dark"] .search-page-shell.is-search-compact .search-filter-panel {
  background: rgba(36,20,12,0.92);
  box-shadow: 0 12px 34px rgba(0,0,0,0.36);
}

@media (max-width: 680px) {
  .search-sticky-title {
    margin-bottom: 8px;
    font-size: 1.02rem;
  }

  .search-page-shell .search-filter-panel {
    top: var(--search-sticky-top, 0px);
  }

  .search-page-shell.is-search-compact .search-page-hero {
    display: none;
  }

  .search-page-shell.is-search-compact .search-filter-panel {
    left: 0;
    right: 0;
    width: 100vw;
    max-width: 100vw;
    margin-inline: 0;
    padding: 6px !important;
    border-radius: 0 !important;
  }

  .search-page-shell.is-search-compact .search-sticky-title {
    margin-bottom: 5px;
    font-size: 0.86rem;
  }

  .search-page-shell.is-search-compact .search-input-shell {
    min-height: 32px !important;
    height: 32px;
  }

  .search-page-shell.is-search-compact .letter-btn {
    min-width: 26px;
    min-height: 26px;
    padding: 0 7px;
    font-size: 0.68rem;
  }
}

.page-back-to-top {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 220;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(217,85,40,0.28);
  border-radius: 999px;
  background: #d65e2c;
  color: #ffffff;
  box-shadow: 0 10px 28px rgba(66,38,20,0.22);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.16s ease, transform 0.16s ease, background 0.16s ease;
}

.page-back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.page-back-to-top:hover {
  background: #c84f22;
}

.page-back-to-top i {
  font-size: 1.1rem;
  line-height: 1;
}

body[data-theme="dark"] .page-back-to-top {
  border-color: rgba(240,224,200,0.14);
  background: #d65e2c;
  box-shadow: 0 10px 28px rgba(0,0,0,0.38);
}

@media (max-width: 680px) {
  .page-back-to-top {
    right: 14px;
    bottom: 14px;
    width: 42px;
    height: 42px;
  }
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .daf-layout    { padding: 0 24px 48px; }
  .daf-hero      { padding: 24px 24px 16px; }
  .daf-notices   { padding: 0 24px 12px; }
  .daf-form-grid { grid-template-columns: 1fr; }
  .daf-def-body  { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .daf-hero        { padding: 20px 16px 14px; }
  .daf-layout      { padding: 0 16px 36px; }
  .daf-notices     { padding: 0 16px 10px; }
  .daf-card        { padding: 18px 16px; border-radius: 18px; }
  .daf-optional-row { grid-template-columns: 1fr; }
  .daf-action-row  { flex-direction: column; }
  .daf-btn         { justify-content: center; width: 100%; }
}

/* Light theme softening */
body[data-theme="light"] .hi-page,
body[data-theme="light"] .site-main:has(.search-page-shell),
body[data-theme="light"] .site-main:has(.contrib-portal-dashboard-grid),
body[data-theme="light"] .site-main:has(.favorites-shell),
body[data-theme="light"] .cfr-page,
body[data-theme="light"] .daf-page {
  background-color: #f5ece2;
  background-image:
    radial-gradient(ellipse at 78% 10%, rgba(217,85,40,0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 14% 90%, rgba(40,120,95,0.08) 0%, transparent 44%);
}

body[data-theme="light"] .hi-search-btn {
  box-shadow: 0 6px 24px rgba(217,85,40,0.26);
}

body[data-theme="light"] .hi-search-btn:hover {
  box-shadow: 0 10px 32px rgba(217,85,40,0.34);
}

/* ════════════════════════════════════════
   Portail — boutons header
   ════════════════════════════════════════ */

.dico-portal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.dico-portal-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.dico-portal-relecture-btn,
.dico-portal-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.dico-portal-relecture-btn {
  background: transparent;
  border: 1.5px solid var(--accent, #e05d00);
  color: var(--accent, #e05d00);
  position: relative;
}

.dico-portal-relecture-btn:hover {
  background: var(--accent, #e05d00);
  color: #fff;
}

.dico-relecture-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 20px;
  background: var(--accent, #e05d00);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
}

.dico-portal-relecture-btn:hover .dico-relecture-badge {
  background: #fff;
  color: var(--accent, #e05d00);
}

.dico-portal-add-btn {
  background: var(--accent, #e05d00);
  border: 1.5px solid var(--accent, #e05d00);
  color: #fff;
}

.dico-portal-add-btn:hover {
  background: #c24e00;
  border-color: #c24e00;
}

/* ════════════════════════════════════════
   Page relecture — .dico-relecture-*
   ════════════════════════════════════════ */

.dico-relecture-shell {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

.dico-relecture-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.dico-relecture-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--accent, #e05d00);
}

.dico-relecture-sub {
  margin: 0;
  font-size: 0.88rem;
  color: var(--text-secondary, #666);
}

.dico-relecture-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 20px;
  background: var(--accent, #e05d00);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s;
}

.dico-relecture-add-btn:hover { background: #c24e00; }

.dico-relecture-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dico-relecture-item {
  display: grid;
  grid-template-columns: 150px 1fr 150px 120px;
  grid-template-areas: "word def meta votes";
  align-items: center;
  column-gap: 16px;
  padding: 14px 16px;
  background: var(--card-bg, #fff);
  border-radius: 12px;
  border: 1px solid var(--border-color, rgba(0,0,0,0.07));
}

.dico-relecture-word {
  grid-area: word;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary, #1a1a1a);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  overflow: hidden;
}

.dico-relecture-word:hover { color: var(--accent, #e05d00); }

.dico-relecture-phonetic {
  font-weight: 400;
  font-style: italic;
  font-size: 0.8rem;
  color: var(--text-secondary, #888);
}

.dico-relecture-def {
  grid-area: def;
  font-size: 0.88rem;
  color: var(--text-secondary, #555);
  font-style: italic;
  margin: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.dico-relecture-meta {
  grid-area: meta;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  font-size: 0.8rem;
  color: var(--text-secondary, #666);
}

.dico-relecture-date { opacity: 0.7; font-size: 0.76rem; }

.dico-relecture-votes {
  grid-area: votes;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.dico-relecture-score {
  font-size: 0.85rem;
  font-weight: 600;
  min-width: 16px;
  text-align: center;
  color: var(--text-secondary, #555);
}

.dico-relecture-own {
  font-size: 0.78rem;
  color: var(--text-secondary, #999);
  font-style: italic;
}

@media (max-width: 700px) {
  .dico-relecture-item {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "word  votes"
      "def   votes"
      "meta  votes";
    row-gap: 4px;
  }
}

.dico-relecture-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-secondary, #888);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
}

.dico-relecture-empty i { font-size: 2rem; color: #1a7a32; }

.dico-relecture-pagination {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 8px;
}

.dico-relecture-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary, #333);
  background: var(--card-bg, #fff);
  border: 1px solid var(--border-color, rgba(0,0,0,0.1));
  transition: background 0.15s;
}

.dico-relecture-page-btn:hover,
.dico-relecture-page-btn.is-active {
  background: var(--accent, #e05d00);
  border-color: var(--accent, #e05d00);
  color: #fff;
}

.dico-relecture-def {
  font-size: 0.9rem;
  color: var(--text-secondary, #555);
  margin: 4px 0 0;
  font-style: italic;
}

.dico-relecture-def--new {
  font-style: normal;
  color: var(--text-primary, #333);
  margin: 6px 0 4px;
}

.dico-relecture-example {
  font-size: 0.85rem;
  color: var(--text-secondary, #777);
  font-style: italic;
  margin: 2px 0 4px;
}

.dico-relecture-word-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.dico-pending-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #b45309;
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: 20px;
  padding: 2px 8px;
}

.dico-section-title--pending {
  color: #b45309;
}

.dico-def-item--pending {
  background: #fffbeb;
  border-left: 3px solid #fbbf24;
  padding-left: 10px;
  border-radius: 0 4px 4px 0;
}

.dico-def-list--pending {
  list-style: none;
  padding: 0;
}

.dico-relecture-section-sep {
  height: 1px;
  background: var(--border-color, rgba(0,0,0,0.1));
  margin: 32px 0;
}

@media (prefers-color-scheme: dark) {
  .dico-pending-badge {
    background: rgba(251,191,36,0.15);
    border-color: rgba(251,191,36,0.3);
    color: #fbbf24;
  }
  .dico-section-title--pending { color: #fbbf24; }
  .dico-def-item--pending {
    background: rgba(251,191,36,0.07);
    border-left-color: rgba(251,191,36,0.5);
  }
}

/* ════════════════════════════════════════
   Vote communautaire — .dico-vote-panel
   ════════════════════════════════════════ */

.dico-vote-scores {
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
}

.dico-vote-score {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 1rem;
  font-weight: 700;
}

.dico-vote-score--up   { color: #1a7a32; }
.dico-vote-score--down { color: #c0392b; }

body[data-theme="dark"] .dico-vote-score--up   { color: #6fcf84; }
body[data-theme="dark"] .dico-vote-score--down { color: #e07070; }

.dico-vote-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.dico-vote-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 20px;
  border: 1.5px solid;
  background: transparent;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.dico-vote-btn--up {
  border-color: #1a7a32;
  color: #1a7a32;
}

.dico-vote-btn--up:hover,
.dico-vote-btn--up.is-active {
  background: #1a7a32;
  color: #fff;
}

.dico-vote-btn--down {
  border-color: #c0392b;
  color: #c0392b;
}

.dico-vote-btn--down:hover,
.dico-vote-btn--down.is-active {
  background: #c0392b;
  color: #fff;
}

body[data-theme="dark"] .dico-vote-btn--up   { border-color: #6fcf84; color: #6fcf84; }
body[data-theme="dark"] .dico-vote-btn--up:hover,
body[data-theme="dark"] .dico-vote-btn--up.is-active { background: #2d7a40; color: #fff; }

body[data-theme="dark"] .dico-vote-btn--down   { border-color: #e07070; color: #e07070; }
body[data-theme="dark"] .dico-vote-btn--down:hover,
body[data-theme="dark"] .dico-vote-btn--down.is-active { background: #8b2020; color: #fff; }

.dico-vote-login,
.dico-vote-own {
  font-size: 0.83rem;
  color: var(--text-secondary, #666);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.dico-vote-login a {
  color: var(--accent, #e05d00);
  font-weight: 600;
}

/* ════════════════════════════════════════
   Hero row + bouton info validation
   ════════════════════════════════════════ */

.daf-hero-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.daf-validation-info-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1.5px solid currentColor;
  background: transparent;
  color: var(--accent, #e05d00);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.daf-validation-info-btn:hover {
  background: var(--accent, #e05d00);
  color: #fff;
}

/* ════════════════════════════════════════
   Dialog validation — .daf-dialog
   ════════════════════════════════════════ */

.daf-dialog {
  border: none;
  border-radius: 16px;
  padding: 0;
  max-width: min(560px, 94vw);
  width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.22);
  background: var(--card-bg, #fff);
  color: var(--text-primary, #1a1a1a);
}

.daf-dialog::backdrop {
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(3px);
}

.daf-dialog-inner {
  display: flex;
  flex-direction: column;
}

.daf-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border-color, rgba(0,0,0,0.08));
}

.daf-dialog-head h2 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--accent, #e05d00);
}

.daf-dialog-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--bg-subtle, rgba(0,0,0,0.05));
  color: var(--text-secondary, #666);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
}

.daf-dialog-close:hover {
  background: var(--bg-subtle-hover, rgba(0,0,0,0.1));
}

.daf-dialog-body {
  padding: 20px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.daf-dialog-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.daf-dialog-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  background: var(--accent, #e05d00);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
}

.daf-dialog-step strong {
  display: block;
  font-weight: 700;
  margin-bottom: 3px;
  font-size: 0.95rem;
}

.daf-dialog-step p {
  margin: 0;
  font-size: 0.87rem;
  color: var(--text-secondary, #555);
  line-height: 1.5;
}

.daf-dialog-note {
  margin: 4px 0 0;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--bg-subtle, rgba(0,0,0,0.04));
  font-size: 0.84rem;
  color: var(--text-secondary, #555);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.5;
}

.daf-dialog-note i {
  color: var(--accent, #e05d00);
  flex-shrink: 0;
  margin-top: 1px;
}

body[data-theme="dark"] .daf-dialog {
  background: var(--card-bg, #1e1e1e);
  color: var(--text-primary, #f0f0f0);
}

/* ════════════════════════════════════════
   Badge locuteur natif — .ns-badge
   ════════════════════════════════════════ */

.ns-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: linear-gradient(135deg, #d4edda, #c3e6cb);
  color: #155724;
  border: 1px solid #b1dfbb;
  white-space: nowrap;
  vertical-align: middle;
}

.ns-badge i {
  font-size: 0.75rem;
  color: #1a7a32;
}

.ns-badge--profile {
  font-size: 0.85rem;
  padding: 5px 12px;
}

body[data-theme="dark"] .ns-badge {
  background: linear-gradient(135deg, #1a4a2a, #1e5c33);
  color: #6fcf84;
  border-color: #2d7a40;
}

body[data-theme="dark"] .ns-badge i {
  color: #6fcf84;
}

/* ── Compte : carte locuteur natif ── */

.account-native-desc {
  font-size: 0.9rem;
  color: var(--text-secondary, #6c757d);
  margin: 0 0 14px;
  line-height: 1.5;
}

.account-native-status {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px 14px;
  border-radius: 10px;
  border-left: 4px solid var(--border-color, #ddd);
  background: transparent;
}

.account-native-status.is-active {
  border-left-color: #16a34a;
  background: rgba(22, 163, 74, 0.06);
}

.account-native-hint {
  font-size: 0.85rem;
  color: var(--text-secondary, #6c757d);
  font-style: italic;
}

.account-native-status.is-active .account-native-hint {
  color: #15803d;
  font-style: normal;
  font-weight: 500;
}

.account-native-form {
  margin-top: 0;
}

.account-submit-btn.is-danger {
  background: #dc3545;
  border-color: #dc3545;
  color: #fff;
}

.account-submit-btn.is-danger:hover {
  background: #c82333;
  border-color: #bd2130;
}

/* ── Dictionnaire detail : auteur + badge ── */

.dico-aside-author {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ════════════════════════════════════════
   Détection de doublons — .daf-doublon-panel
   ════════════════════════════════════════ */

.daf-doublon-panel {
  margin-top: 8px;
  padding: 10px 14px;
  border-radius: 8px;
  background: #fff8e1;
  border: 1px solid #ffe082;
  font-size: 0.875rem;
  color: #5d4037;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.daf-doublon-panel[hidden] {
  display: none !important;
}

.daf-doublon-panel > i {
  color: #f59f00;
  font-size: 1rem;
  align-self: flex-start;
}

.daf-doublon-label {
  font-weight: 600;
}

.daf-doublon-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.daf-doublon-list a {
  display: inline-block;
  padding: 2px 10px;
  background: #ffe082;
  border-radius: 20px;
  color: #5d4037;
  font-weight: 600;
  text-decoration: none;
  font-size: 0.83rem;
  transition: background 0.15s;
}

.daf-doublon-list a:hover {
  background: #ffd740;
}

.daf-doublon-dismiss {
  align-self: flex-start;
  padding: 4px 12px;
  border: 1px solid #ffe082;
  border-radius: 6px;
  background: transparent;
  color: #795548;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.15s;
}

.daf-doublon-dismiss:hover {
  background: #ffe082;
}

body[data-theme="dark"] .daf-doublon-panel {
  background: #2e2300;
  border-color: #5c4a00;
  color: #f5d87a;
}

body[data-theme="dark"] .daf-doublon-panel > i {
  color: #f5c400;
}

body[data-theme="dark"] .daf-doublon-list a {
  background: #4a3800;
  color: #f5d87a;
}

body[data-theme="dark"] .daf-doublon-list a:hover {
  background: #5c4a00;
}

body[data-theme="dark"] .daf-doublon-dismiss {
  border-color: #5c4a00;
  color: #f5d87a;
}

body[data-theme="dark"] .daf-doublon-dismiss:hover {
  background: #4a3800;
}

/* ══════════════════════════════════════════════════════
   ARTICLES — Éditeur (article_rediger.php)
   ══════════════════════════════════════════════════════ */

.article-editor-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: #faf7f3;
}

.article-editor-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 24px;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

.article-editor-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  color: #64748b;
  text-decoration: none;
  font-family: var(--km-menu-font);
}

.article-editor-back:hover { color: #d65e2c; }

.article-editor-topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.article-editor-save-status {
  font-size: 0.85rem;
  color: #64748b;
  transition: color .2s;
}

.article-editor-save-status.is-ok    { color: #16a34a; }
.article-editor-save-status.is-error { color: #dc2626; }

.article-editor-btn-preview,
.article-editor-btn-draft,
.article-editor-btn-publish {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 8px;
  border: none;
  font-family: var(--km-menu-font);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: filter .15s, transform .1s;
}

.article-editor-btn-preview {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
}

.article-editor-btn-preview:hover { background: #e2e8f0; }

body[data-theme="dark"] .article-editor-btn-preview {
  background: #2d2d30;
  color: #94a3b8;
  border-color: #3c3c3c;
}

body[data-theme="dark"] .article-editor-btn-preview:hover { background: #37373d; }

.article-editor-btn-draft {
  background: #f1f5f9;
  color: #334155;
}

.article-editor-btn-draft:hover { background: #e2e8f0; }

.article-editor-btn-publish {
  background: #d65e2c;
  color: #fff;
}

.article-editor-btn-publish:hover { filter: brightness(.9); transform: translateY(-1px); }

.article-editor-title-area {
  max-width: 740px;
  margin: 0 auto;
  width: 100%;
  padding: 36px 24px 0 60px;
}

.article-editor-title-input {
  width: 100%;
  font-family: var(--km-title-font);
  font-size: 2rem;
  font-weight: 700;
  border: none;
  background: transparent;
  color: #111827;
  outline: none;
  padding: 0;
  margin: 0 0 14px;
  line-height: 1.2;
}

.article-editor-title-input::placeholder { color: #cbd5e1; }

.article-editor-excerpt-input {
  width: 100%;
  font-family: system-ui, sans-serif;
  font-size: 1rem;
  border: none;
  border-bottom: 1px solid #e5e7eb;
  background: transparent;
  color: #111827;
  outline: none;
  padding: 0 0 12px;
  line-height: 1.5;
}

.article-editor-excerpt-input::placeholder { color: #94a3b8; }

/* ── Vignette ── */
.article-editor-cover {
  margin-top: 8px;
  border-radius: 10px;
  overflow: hidden;
}

.article-editor-cover-empty {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border: 2px dashed #e2d8cc;
  border-radius: 10px;
  cursor: pointer;
  color: #b0a090;
  font-size: .88rem;
  transition: border-color .15s, color .15s, background .15s;
}
.article-editor-cover-empty:hover,
.article-editor-cover-empty.is-loading { border-color: #c9913c; color: #c9913c; background: #fdf5ec; }
.article-editor-cover-empty i { font-size: 1.3rem; flex-shrink: 0; }

.article-editor-cover-preview { position: relative; border-radius: 10px; overflow: hidden; line-height: 0; }
.article-editor-cover-preview img {
  width: 100%; max-height: 240px; object-fit: cover; display: block; border-radius: 10px;
}
.article-editor-cover-actions {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center; gap: 10px;
  opacity: 0; transition: opacity .2s; border-radius: 10px;
}
.article-editor-cover-preview:hover .article-editor-cover-actions { opacity: 1; }
.article-editor-cover-btn {
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.35);
  color: #fff; padding: 5px 14px; border-radius: 6px;
  cursor: pointer; font-size: .82rem; backdrop-filter: blur(2px);
  transition: background .15s;
}
.article-editor-cover-btn:hover { background: rgba(255,255,255,.28); }
.article-editor-cover-btn--rm { border-color: rgba(248,113,113,.5); color: #fca5a5; }
.article-editor-cover-btn--rm:hover { background: rgba(220,38,38,.32); }

/* ── Mots-clés ── */
.article-editor-tags-section { margin-top: 8px; }

.article-editor-tags-field {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  min-height: 40px; padding: 6px 12px;
  border: 1px solid #e2d8cc; border-radius: 8px; background: #fff;
  cursor: text; transition: border-color .15s;
}
.article-editor-tags-field:focus-within { border-color: #c9913c; }

.article-editor-tags-icon { color: #b0a090; font-size: 1rem; flex-shrink: 0; }

.article-editor-tags-input {
  border: none; outline: none; background: transparent;
  font-size: .9rem; min-width: 160px; flex: 1; color: #111827;
  font-family: system-ui, sans-serif;
}
.article-editor-tags-input::placeholder { color: #b0a090; }

.aet-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: #fef3e2; color: #92400e;
  border: 1px solid #f5c97a; border-radius: 20px;
  padding: 2px 6px 2px 10px; font-size: .8rem; white-space: nowrap;
}
.aet-chip-rm {
  background: none; border: none; cursor: pointer;
  color: #92400e; padding: 0; line-height: 1;
  font-size: 1rem; opacity: .6; flex-shrink: 0;
}
.aet-chip-rm:hover { opacity: 1; }

/* Dark mode */
body[data-theme="dark"] .article-editor-cover-empty { border-color: #3c3228; color: #7a6a58; }
body[data-theme="dark"] .article-editor-cover-empty:hover { border-color: #c9913c; color: #c9913c; background: #1e140a; }
body[data-theme="dark"] .article-editor-tags-field { background: #1a1a1f; border-color: #3c3228; }
body[data-theme="dark"] .article-editor-tags-input { color: #d4d4d4; }
body[data-theme="dark"] .aet-chip { background: #2a1a05; border-color: #6b4510; color: #e0a060; }
body[data-theme="dark"] .aet-chip-rm { color: #e0a060; }

.article-editor-content-area {
  max-width: 740px;
  margin: 0 auto;
  width: 100%;
  padding: 24px 24px 80px 60px;
}

.article-editorjs-holder {
  min-height: 400px;
}

/* Override Editor.js styles to match site identity */
.codex-editor__redactor { padding-bottom: 100px !important; }
.ce-block__content      { max-width: 100% !important; }

.ce-toolbar__plus,
.ce-toolbar__settings-btn {
  color: #d65e2c !important;
}

.ce-inline-tool--active,
.ce-inline-toolbar__dropdown-content .ce-inline-tool:hover {
  color: #d65e2c !important;
}

/* Citation (Quote tool) — style WYSIWYG dans l'éditeur */
.cdx-quote {
  border-left: 4px solid #c9913c;
  margin: 0;
  padding: .5em 0 .5em 1.2em;
}

.cdx-quote__text {
  font-size: 1.05rem;
  font-style: italic;
  color: #6b7280;
  line-height: 1.6;
  min-height: 1.6em;
}

.cdx-quote__text::before { content: none; }

.cdx-quote__caption {
  font-size: .82rem;
  color: #9ca3af;
  margin-top: 6px;
}

.cdx-quote__caption::before { content: none; }

body[data-theme="dark"] .cdx-quote__text    { color: #9ca3af; }
body[data-theme="dark"] .cdx-quote__caption { color: #71717a; }

/* ══════════════════════════════════════════════════════
   ARTICLES — Lecture (article.php)
   ══════════════════════════════════════════════════════ */

.site-main:has(.article-reading-shell) {
  background: #ede7de;
  padding: 32px 16px;
}

body[data-theme="dark"] .site-main:has(.article-reading-shell) {
  background: #18140f;
}

.article-reading-shell {
  max-width: 740px;
  margin: 0 auto;
  padding: 40px 32px 80px;
  background: #fffdf9;
  border-radius: 14px;
  box-shadow: 0 2px 16px rgba(0,0,0,.07);
}

body[data-theme="dark"] .article-reading-shell {
  background: #1f1b15;
  box-shadow: 0 2px 20px rgba(0,0,0,.35);
}

.article-reading-header {
  margin-bottom: 40px;
}

.article-draft-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #fef9c3;
  color: #713f12;
  border: 1px solid #fde047;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 3px 10px;
  margin-bottom: 10px;
}

.article-reading-cover {
  width: 100%;
  max-height: 420px;
  overflow: hidden;
  border-radius: 12px;
  margin-bottom: 24px;
}

.article-reading-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-reading-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.88rem;
  color: #64748b;
  margin-bottom: 14px;
}

.article-reading-author { font-weight: 600; color: #334155; }

.article-reading-title {
  font-family: var(--km-title-font);
  font-size: 2.1rem;
  font-weight: 700;
  color: #111827;
  line-height: 1.2;
  margin: 0 0 14px;
}

.article-reading-excerpt {
  font-size: 1.1rem;
  color: #64748b;
  line-height: 1.6;
  margin: 0 0 20px;
  font-style: italic;
}

.article-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  padding: 6px 14px;
  border-radius: 8px;
  background: #f1f5f9;
  color: #334155;
  text-decoration: none;
  font-weight: 600;
  transition: background .15s;
}

.article-edit-btn:hover { background: #e2e8f0; }

/* Corps de l'article — charte typographique */
.article-reading-body { font-size: 1.05rem; line-height: 1.8; color: #1e293b; }

.article-p { margin: 0 0 1.4em; }

.article-h2 {
  font-family: var(--km-title-font);
  font-size: 1.55rem;
  font-weight: 700;
  color: #d65e2c;
  margin: 2em 0 .6em;
  line-height: 1.25;
}

.article-h3 {
  font-family: var(--km-title-font);
  font-size: 1.2rem;
  font-weight: 700;
  color: #111827;
  margin: 1.6em 0 .5em;
}

.article-h4 {
  font-family: var(--km-title-font);
  font-size: 1.05rem;
  font-weight: 700;
  color: #374151;
  margin: 1.4em 0 .4em;
}

.article-h5 {
  font-family: system-ui, sans-serif;
  font-size: .95rem;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 1.2em 0 .4em;
}

.article-list {
  margin: 0 0 1.4em 1.5em;
  padding: 0;
}

.article-list li { margin-bottom: .4em; }

.article-quote {
  margin: 1.8em 0;
  padding: 16px 20px 16px 24px;
  border-left: 4px solid #d65e2c;
  background: #fff7f3;
  border-radius: 0 8px 8px 0;
}

.article-quote p {
  font-family: var(--km-title-font);
  font-size: 1.15rem;
  font-style: italic;
  color: #44291a;
  margin: 0 0 6px;
  line-height: 1.5;
}

.article-quote cite {
  font-size: 0.85rem;
  color: #d65e2c;
  font-style: normal;
  font-weight: 600;
}

.article-figure {
  margin: 1.8em 0;
  text-align: center;
}

.article-figure img {
  max-width: 100%;
  border-radius: 10px;
  display: block;
  margin: 0 auto;
}

.article-figure.is-stretched img { width: 100%; }
.article-figure.with-border img  { border: 2px solid #e5e7eb; }
.article-figure.with-bg          { background: #f8f8f8; padding: 12px; border-radius: 12px; }

.article-figure figcaption {
  font-size: 0.85rem;
  color: #64748b;
  margin-top: 8px;
  font-style: italic;
}

.article-embed {
  margin: 1.8em 0;
}

.article-embed-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 10px;
}

.article-embed-wrapper iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: none;
}

.article-embed figcaption {
  font-size: 0.85rem;
  color: #64748b;
  margin-top: 8px;
  font-style: italic;
  text-align: center;
}

.article-audio {
  margin: 1.8em 0;
  background: #fff7f3;
  border: 1px solid #fcd9cb;
  border-radius: 10px;
  padding: 16px 20px;
}

.article-audio-title {
  font-weight: 600;
  color: #d65e2c;
  margin: 0 0 10px;
  font-size: 0.95rem;
}

.article-audio audio {
  width: 100%;
  display: block;
}

.article-attach {
  margin: 1.4em 0;
}

.article-attach-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #f1f5f9;
  border-radius: 8px;
  color: #334155;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  transition: background .15s;
}

.article-attach-link:hover { background: #e2e8f0; }

.article-delimiter {
  border: none;
  border-top: 2px dashed #e5e7eb;
  margin: 2.5em auto;
  width: 60%;
}

/* ══════════════════════════════════════════════════════
   ARTICLES — Liste (articles.php)
   ══════════════════════════════════════════════════════ */

.site-main:has(.articles-shell) {
  max-width: 100%;
  padding: 0;
  background:
    radial-gradient(ellipse 80% 50% at 88% 4%, rgba(214,94,44,.13), transparent),
    radial-gradient(ellipse 55% 55% at 8% 85%, rgba(180,100,40,.09), transparent),
    #f3eadf;
}

.articles-shell {
  max-width: 1100px;
  margin: 0 auto;
  padding: 48px 28px 96px;
  background: rgba(255, 255, 255, 0.82);
  border-radius: 0;
}

.articles-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.articles-title {
  font-family: var(--km-title-font);
  font-size: 2rem;
  color: #1a0e06;
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.articles-title i { color: #d65e2c; }

.articles-sub {
  color: #706050;
  margin: 0;
  font-size: 0.95rem;
  font-style: italic;
}

.articles-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin: -10px 0 28px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.90);
  border-radius: 18px;
  background: rgba(255,255,255,.64);
  box-shadow: 0 8px 28px rgba(180,100,40,.09);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.articles-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 6px 0 14px;
  border: 1px solid rgba(214,94,44,.16);
  border-radius: 999px;
  background: rgba(255,255,255,.78);
}

.articles-search-wrap > i {
  color: #d65e2c;
  font-size: 1rem;
  flex: 0 0 auto;
}

.articles-search-wrap input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  color: #1a0e06;
  font: inherit;
  font-size: .95rem;
  font-weight: 800;
  outline: none;
}

.articles-search-wrap input::placeholder {
  color: #7d8aa0;
  opacity: 1;
}

.articles-clear-search,
.articles-search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  text-decoration: none;
}

.articles-clear-search {
  border: 1px solid rgba(214,94,44,.18);
  color: #8a6a5a;
  background: rgba(255,255,255,.78);
  font-size: .78rem;
}

.articles-clear-search:hover {
  background: rgba(214,94,44,.10);
  color: #1a0e06;
  text-decoration: none;
}

.articles-search-btn {
  border: 0;
  background: #d65e2c;
  color: #ffffff;
  cursor: pointer;
}

.articles-search-btn:hover {
  background: #c84f22;
}

.articles-sort {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.event-filter-bar {
  margin-bottom: 24px;
}

.event-state-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 900;
  line-height: 1;
}

.event-state-pill.is-cancelled {
  background: #fee2e2;
  border: 1px solid #fecaca;
  color: #b91c1c;
}

.event-state-pill.is-ongoing {
  background: #dcfce7;
  border: 1px solid #bbf7d0;
  color: #15803d;
}

.site-main:has(.event-editor-page) { max-width: 100%; padding: 0; }

.event-editor-page {
  min-height: calc(100vh - 56px);
  margin: 0;
  padding: 18px 40px 64px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background-color: #f5ece2;
}

.event-editor-head {
  max-width: 900px;
  margin: 0 auto 12px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  padding: 0;
}

.event-editor-kicker,
.event-editor-summary-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #d65e2c;
  font-size: .78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .09em;
}

.event-editor-head h2 {
  margin: 0;
  color: #2f2119;
  font-size: clamp(1.75rem, 3vw, 2.45rem);
  line-height: 1;
  letter-spacing: 0;
}

.event-editor-head p {
  margin: 0;
  max-width: 640px;
  color: #856954;
  font-weight: 750;
  line-height: 1.45;
}

.event-editor-head-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.event-editor-link-btn,
.event-editor-cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid rgba(214,94,44,.18);
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  color: #5d4538;
  text-decoration: none;
  font-size: .86rem;
  font-weight: 900;
}

.event-editor-notices {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 16px;
}

.event-editor-layout {
  max-width: 900px;
  margin: 0 auto;
  display: block;
  padding: 28px;
  border: 1px solid rgba(255,255,255,.92);
  border-radius: 20px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 14px 42px rgba(89,54,25,.08);
}

.event-editor-main {
  display: grid;
  gap: 0;
  min-width: 0;
}

.event-editor-card,
.event-editor-summary,
.event-editor-help {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 22px 0;
}

.event-editor-card {
  border-bottom: 1px solid rgba(93,69,56,.12);
}

.event-editor-card:first-child {
  padding-top: 0;
}

.event-editor-card:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.event-editor-card-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  margin-bottom: 18px;
}

.event-editor-card-head span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #d95528;
  font-weight: 950;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.event-editor-card-head small {
  color: #9d8068;
  font-weight: 800;
  text-align: right;
  line-height: 1.35;
}

.event-editor-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.event-editor-card .field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.event-editor-card .field-group:last-child {
  margin-bottom: 0;
}

.event-editor-card label {
  color: #4b3327;
  font-weight: 900;
  font-size: .84rem;
}

.event-editor-card input,
.event-editor-card select,
.event-editor-card textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 13px;
  border: 1.5px solid #e8d8c4;
  border-radius: 11px;
  background: rgba(255,255,255,.92);
  color: #1a0e06;
  font: inherit;
  box-sizing: border-box;
}

.event-editor-card textarea {
  min-height: 96px;
  line-height: 1.5;
  resize: vertical;
}

.event-editor-card input[type="file"] {
  padding: 8px 12px;
}

.event-editor-card input:focus,
.event-editor-card select:focus,
.event-editor-card textarea:focus {
  border-color: rgba(214,94,44,.58);
  box-shadow: 0 0 0 3px rgba(214,94,44,.12);
  outline: none;
}

.event-required {
  color: #d65e2c;
  font-weight: 900;
}

/* ══ Actualité editor ══════════════════════════════════════════════════════ */

/* Notices */
.aed-notices {
  max-width: 800px;
  margin: 12px auto 0;
  padding: 0 24px;
}
.aed-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 0.9rem;
}
.aed-notice--error {
  background: rgba(185,28,28,.08);
  color: #b91c1c;
  border: 1px solid rgba(185,28,28,.18);
}
.aed-notice ul { margin: 0; padding-left: 16px; }

/* Grille titre / couverture */
.aed-header-grid {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  max-width: 800px;
  margin: 36px auto 0;
  padding: 0 24px;
}

/* Colonne gauche — champs empilés */
.aed-fields-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.aed-field-title {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid rgba(93,69,56,.18);
  border-radius: 10px;
  font-size: 1.18rem;
  font-weight: 700;
  color: #1a0e06;
  background: rgba(255,252,248,.9);
  transition: border-color .15s, box-shadow .15s;
}
.aed-field-title::placeholder { color: #bba898; font-weight: 400; }
.aed-field-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.aed-field-icon {
  color: #a08070;
  font-size: 1rem;
  flex-shrink: 0;
  width: 18px;
  text-align: center;
}
.aed-field-select,
.aed-field-input {
  flex: 1 1 0;
  min-width: 0;
  height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(93,69,56,.18);
  border-radius: 8px;
  background: rgba(255,252,248,.9);
  color: #3d2b1f;
  font-size: 0.9rem;
}
.aed-field-select { font-weight: 600; cursor: pointer; }
.aed-field-title:focus,
.aed-field-select:focus,
.aed-field-input:focus {
  outline: none;
  border-color: rgba(37,111,121,.45);
  box-shadow: 0 0 0 3px rgba(37,111,121,.1);
}

/* Colonne droite — couverture carrée */
.aed-cover-col {
  flex: 0 0 152px;
  width: 152px;
  height: 152px;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}
.aed-cover-empty {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(93,69,56,.06);
  border: 1.5px dashed rgba(93,69,56,.28);
  border-radius: 12px;
  color: #94786a;
  font-size: 0.8rem;
  transition: background .15s, border-color .15s;
}
.aed-cover-empty i { font-size: 1.6rem; }
.aed-cover-empty:hover { background: rgba(93,69,56,.1); border-color: rgba(93,69,56,.4); }
.aed-cover-empty.is-loading { opacity: .6; pointer-events: none; }
.aed-cover-preview {
  width: 100%;
  height: 100%;
  position: relative;
}
.aed-cover-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 12px;
}
.aed-cover-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.42);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  opacity: 0;
  transition: opacity .18s ease;
}
.aed-cover-preview:hover .aed-cover-overlay { opacity: 1; }
.aed-cover-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.7);
  background: rgba(255,255,255,.18);
  color: #fff;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .14s;
}
.aed-cover-btn:hover { background: rgba(255,255,255,.32); }
.aed-cover-btn--rm { border-color: rgba(239,68,68,.7); }
.aed-cover-btn--rm:hover { background: rgba(239,68,68,.3); }

/* Icône T (titre) */
.aed-field-icon--t {
  font-family: Georgia, serif;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  color: #a08070;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
  user-select: none;
}

/* Sources multiples */
.aed-sources-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.aed-sources-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.aed-source-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.aed-source-rm {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: #b89080;
  font-size: 1rem;
  cursor: pointer;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .12s, color .12s;
}
.aed-source-rm:hover { background: rgba(185,28,28,.1); color: #b91c1c; }
.aed-add-source-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  height: 30px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #94786a;
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: 6px;
  margin-left: 26px;
  transition: color .12s, background .12s;
}
.aed-add-source-btn:hover { color: #256f79; background: rgba(37,111,121,.08); }

/* Chips mots-clés */
.aed-tags-field {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border: 1px solid rgba(93,69,56,.18);
  border-radius: 8px;
  background: rgba(255,252,248,.9);
  cursor: text;
  min-height: 38px;
}
.aed-tags-field:focus-within { border-color: rgba(37,111,121,.45); box-shadow: 0 0 0 3px rgba(37,111,121,.1); }
.aed-tags-input {
  flex: 1 1 80px;
  min-width: 80px;
  border: none;
  background: transparent;
  font-size: 0.88rem;
  color: #3d2b1f;
  outline: none;
  padding: 0;
  line-height: 1.4;
}
.aed-tags-input::placeholder { color: #bba898; }
.aed-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 10px;
  background: rgba(37,111,121,.1);
  color: #1f5f68;
  border-radius: 99px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}
.aed-tag-rm {
  border: none;
  background: transparent;
  color: inherit;
  opacity: .6;
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
  padding: 0;
}
.aed-tag-rm:hover { opacity: 1; }

/* Dark mode */
body[data-theme="dark"] .aed-tags-field {
  background: rgba(30,16,6,.6);
  border-color: rgba(255,255,255,.12);
}
body[data-theme="dark"] .aed-tags-input { color: #e0cfc0; }
body[data-theme="dark"] .aed-tag-chip { background: rgba(37,111,121,.22); color: #7ecdd5; }
body[data-theme="dark"] .aed-add-source-btn { color: #6a5648; }
body[data-theme="dark"] .aed-source-rm { color: #6a5648; }
body[data-theme="dark"] .aed-field-icon--t { color: #6a5648; }

/* Zone TinyMCE */
.aed-tinymce-area {
  max-width: 800px;
  margin: 24px auto 0;
  padding: 0 24px 64px;
}
.aed-tinymce-area .tox-tinymce {
  border-radius: 12px;
  border: 1px solid rgba(93,69,56,.15) !important;
  box-shadow: 0 2px 12px rgba(93,69,56,.06);
}

/* Dark mode */
body[data-theme="dark"] .aed-field-title,
body[data-theme="dark"] .aed-field-select,
body[data-theme="dark"] .aed-field-input {
  background: rgba(30,16,6,.6);
  border-color: rgba(255,255,255,.12);
  color: #e0cfc0;
}
body[data-theme="dark"] .aed-field-title::placeholder { color: #6a5648; }
body[data-theme="dark"] .aed-cover-empty {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.14);
  color: #6a5648;
}
body[data-theme="dark"] .aed-field-icon { color: #6a5648; }

.actualite-editorjs-holder {
  min-height: 360px;
  padding: 18px 18px 26px;
  border: 1px solid rgba(93,69,56,.18);
  border-radius: 12px;
  background: rgba(255,255,255,.94);
}

.actualite-editorjs-holder .ce-block__content,
.actualite-editorjs-holder .ce-toolbar__content {
  max-width: 760px;
}

body[data-theme="dark"] .actualite-editorjs-holder {
  background: rgba(20,10,2,.52);
  border-color: rgba(255,255,255,.12);
  color: #c0ad9a;
}

/* Modern song detail page */
.site-main:has(.song-detail-page) {
  max-width: none;
  padding: 0;
}

.song-detail-page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 26px 22px 76px;
}

.song-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 20px;
  align-items: start;
}

.song-detail-content,
.song-detail-side {
  min-width: 0;
}

.song-detail-side {
  position: sticky;
  top: 76px;
  display: grid;
  gap: 12px;
}

.song-block,
.lyrics.song-block {
  border: 1px solid rgba(255,255,255,0.90);
  border-radius: 20px;
  background: rgba(255,255,255,0.66);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 34px rgba(180,100,40,0.10);
  overflow: hidden;
}

.song-detail-content > .song-block + .song-block {
  margin-top: 16px;
}

.song-detail-hero {
  padding: 16px;
  background: rgba(255,255,255,0.38);
  border-bottom: 1px solid rgba(214,94,44,.10);
}

.song-detail-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 108px;
  gap: 16px;
  align-items: center;
}

.song-detail-title {
  margin: 0;
  color: #1a0e06;
  font-size: clamp(1.45rem, 2.6vw, 2.35rem);
  line-height: 1.05;
  letter-spacing: 0;
}

.song-detail-title-author {
  display: block;
  margin-top: 6px;
  color: #907060;
  font-size: .96rem;
  font-weight: 900;
}

.song-hero-quick-meta,
.song-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.song-hero-quick-album-year,
.song-hero-quick-item {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(214,94,44,.14);
  border-radius: 999px;
  background: rgba(255,255,255,.70);
  color: #6f4e38;
  font-size: .78rem;
  font-weight: 900;
  text-decoration: none;
}

.song-hero-quick-link:hover {
  border-color: rgba(214,94,44,.45);
  color: #d65e2c;
}

.song-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.song-meta-item {
  padding: 10px;
  border: 1px solid rgba(217,85,40,0.12);
  border-radius: 13px;
  background: rgba(255,255,255,.58);
}

.song-meta-label {
  display: block;
  margin-bottom: 4px;
  color: #a07e63;
  font-size: .72rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.song-meta-item span:last-child {
  color: #3f2c22;
  font-weight: 850;
}

.song-detail-favorite,
.song-detail-playlist,
.song-revision-action,
.song-report-submit,
.comment-form button,
.comment-form .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 13px;
  border: 0;
  border-radius: 999px;
  background: #d65e2c;
  color: #fff;
  font-size: .86rem;
  font-weight: 950;
  text-decoration: none;
  cursor: pointer;
}

.song-detail-playlist {
  background: rgba(47,33,25,.86);
}

.song-detail-favorite.is-favorite {
  background: #b83248;
}

.song-detail-cover {
  aspect-ratio: 1;
  width: 108px;
  border-radius: 13px;
  overflow: hidden;
  background: rgba(217,85,40,0.08);
  box-shadow: none;
}

.song-detail-cover img,
.song-detail-cover a {
  display: block;
  width: 100%;
  height: 100%;
}

.song-detail-cover img {
  object-fit: cover;
}

.song-cover-fallback {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: #b99072;
  font-weight: 950;
  letter-spacing: .08em;
}

.lyrics-reader-tools {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  padding: 14px 18px 0;
}

.lyrics-reader-tools button {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(214,94,44,.16);
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  color: #5d4538;
  font-weight: 950;
  cursor: pointer;
}

.lyrics-reader-body {
  padding: 12px 22px 24px;
  color: #2f2119;
  font-size: calc(1rem * var(--lyrics-reader-scale, 1));
  line-height: 1.78;
}

.song-lyrics-contributors {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 0;
  padding: 14px 22px 18px;
  border-top: 1px solid rgba(214,94,44,.10);
  color: #7d604c;
}

.song-lyrics-contributors span {
  color: #a07e63;
  font-size: .72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.song-lyrics-contributors strong,
.song-block-head h3 {
  color: #3f2c22;
}

.song-block-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(214,94,44,.10);
}

.song-block-head h3 {
  margin: 0;
  font-size: 1rem;
}

.explanation-html,
.versions ul,
.song-report-content,
.song-comments-panel > :not(.song-block-head),
.song-revision-panel > :not(.song-block-head),
.song-video-compact > :not(.song-block-head) {
  padding: 18px;
}

.versions ul,
.song-revision-list {
  list-style: none;
  margin: 0;
}

.versions li,
.song-revision-list li a,
.comment {
  display: block;
  padding: 12px;
  border: 1px solid rgba(93,69,56,.10);
  border-radius: 12px;
  background: rgba(255,255,255,.58);
}

.versions li + li,
.comment + .comment,
.song-revision-list li + li {
  margin-top: 10px;
}

.song-video-embed {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 12px;
  background: #1f1712;
}

.song-video-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.song-report-panel {
  border-style: dashed;
}

.song-report-toggle {
  width: 100%;
  padding: 16px 18px;
  border: 0;
  background: transparent;
  color: #8a6048;
  text-align: left;
  font-weight: 950;
  cursor: pointer;
}

.song-report-toggle:hover {
  color: #d65e2c;
}

.song-report-reasons {
  display: grid;
  gap: 8px;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
}

.song-report-reasons label {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px;
  border-radius: 10px;
  background: rgba(255,255,255,.58);
}

.song-report-comment,
.comment-form {
  display: grid;
  gap: 8px;
}

.song-report-comment textarea,
.comment-form textarea {
  width: 100%;
  border: 1px solid rgba(93,69,56,.18);
  border-radius: 12px;
  background: rgba(255,255,255,.92);
  padding: 12px;
}

.comment-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 0;
}

.song-revision-owner-alert {
  padding: 12px;
  border-radius: 12px;
  background: rgba(234,179,8,.12);
  color: #854d0e;
  font-weight: 850;
}

body[data-theme="dark"] .site-main:has(.song-detail-page) {
  background: radial-gradient(circle at 20% 0%, rgba(214,94,44,.10), transparent 34%), #0f0905;
}

body[data-theme="dark"] .song-block,
body[data-theme="dark"] .lyrics.song-block {
  background: rgba(26,14,6,.62);
  border-color: rgba(255,255,255,.10);
}

body[data-theme="dark"] .song-detail-hero {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
}

body[data-theme="dark"] .song-detail-title,
body[data-theme="dark"] .song-block-head h3,
body[data-theme="dark"] .lyrics-reader-body,
body[data-theme="dark"] .song-meta-item span:last-child,
body[data-theme="dark"] .song-lyrics-contributors strong {
  color: #f0e0c8;
}

body[data-theme="dark"] .song-detail-title-author,
body[data-theme="dark"] .song-lyrics-contributors,
body[data-theme="dark"] .song-meta-label {
  color: #c0a888;
}

body[data-theme="dark"] .song-meta-item,
body[data-theme="dark"] .versions li,
body[data-theme="dark"] .song-revision-list li a,
body[data-theme="dark"] .comment,
body[data-theme="dark"] .song-report-reasons label,
body[data-theme="dark"] .song-hero-quick-album-year,
body[data-theme="dark"] .song-hero-quick-item,
body[data-theme="dark"] .lyrics-reader-tools button {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
  color: #e8d8c4;
}

@media (max-width: 980px) {
  .song-detail-layout,
  .song-detail-top {
    grid-template-columns: 1fr;
  }

  .song-detail-side {
    position: static;
  }

  .song-detail-cover {
    width: 128px;
    max-width: 100%;
  }
}

@media (max-width: 640px) {
  .song-detail-page {
    padding: 22px 14px 54px;
  }

  .song-detail-hero,
  .lyrics-reader-body {
    padding-left: 16px;
    padding-right: 16px;
  }

  .song-meta-grid {
    grid-template-columns: 1fr;
  }

  .song-header-actions {
    display: grid;
  }
}

/* Song detail final pass - closer to search page */
.song-detail.song-detail-page {
  display: block;
  max-width: 1180px;
  padding-top: 24px;
}

.song-detail-page .song-detail-layout {
  padding: 0;
  background: transparent;
  border-radius: 0;
}

.song-detail-page .song-block {
  border-radius: 20px;
}

.song-detail-page .lyrics.song-block {
  padding: 18px;
  background: #ffffff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.song-detail-page .lyrics-html {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.song-detail-page .song-detail-hero {
margin: 0;
    margin-bottom: 0px;
  padding: 0;
  margin-bottom: 15px;
  border-radius: 20px;

}

.song-detail-page .song-detail-top {
  grid-template-columns: minmax(0, 1fr) 84px;
  align-items: start;
  padding: 20px;
}

.song-detail-page .song-detail-cover,
.song-detail-page .song-detail-cover img,
.song-detail-page .song-cover-fallback {
  width: 110px;
  height: 110px;
}

.song-detail-page .song-detail-cover {
  border-radius: 13px;
}

.song-detail-page .song-detail-title {
  font-size: 1.72rem;
}

.song-detail-page .song-detail-title-author {
  display: inline;
  margin: 0;
  font-size: .92rem;
}

.song-detail-page .song-header-actions {
  margin-top: 14px;
}

.song-detail-page .lyrics-reader-tools {
  position: sticky;
  top: 100px;
  float: right;
  clear: none;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 0 0 10px 14px;
  padding: 2px;
  border: 1px solid rgba(93,69,56,.18);
  border-radius: 10px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.song-detail-page .lyrics-reader-tools button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  padding: 0;
  line-height: 1;
  font-size: .82rem;
}

.song-detail-page .lyrics-reader-tools button + button {
  border-left: none;
  border-top: 1px solid rgba(93,69,56,.10);
}

.song-detail-page .lyrics-reader-body {
  padding: 10px 4px 18px;
  line-height: 1.72;
  clear: none;
}

.song-detail-page .song-lyrics-contributors {
  padding: 14px 4px 0;
}

.song-detail-page .song-video-compact,
.song-detail-page .song-comments-panel,
.song-detail-page .song-revision-panel {
  padding: 0;
}

.song-detail-page .song-block-head {
  margin: 0;
}

.song-detail-page .song-video-compact-text {
  padding: 18px 18px 0;
}

.song-detail-page .song-video-embed {
  margin: 14px 18px 18px;
}

.song-detail-page .comment-empty {
  margin-top: 0;
}

.song-detail-page .song-report-panel {
  background: rgba(255,255,255,0.56);
}

.song-detail-page .explanation,
.song-detail-page .explanation-html {
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.song-detail-page .explanation-html img,
.song-detail-page .explanation-html iframe,
.song-detail-page .explanation-html video,
.song-detail-page .explanation-html table {
  max-width: 100%;
}

.song-detail-page .explanation-html table {
  display: block;
  overflow-x: auto;
}

body[data-theme="dark"] .song-detail-page .song-detail-layout {
  background: transparent !important;
}

body[data-theme="dark"] .song-detail-page .song-block,
body[data-theme="dark"] .song-detail-page .song-video-compact,
body[data-theme="dark"] .song-detail-page .song-comments-panel,
body[data-theme="dark"] .song-detail-page .song-revision-panel {
  border-color: rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.045) !important;
  box-shadow: 0 8px 34px rgba(0,0,0,.22) !important;
}

body[data-theme="dark"] .song-detail-page .lyrics.song-block {
  background: #202124 !important;
  border-color: rgba(255,255,255,.10) !important;
  box-shadow: 0 8px 34px rgba(0,0,0,.22) !important;
}

body[data-theme="dark"] .song-detail-page .lyrics-html,
body[data-theme="dark"] .song-detail-page .explanation-html {
  border: 0 !important;
  background: transparent !important;
}

body[data-theme="dark"] .song-detail-page .song-detail-hero {
  background: transparent !important;
}

body[data-theme="dark"] .song-detail-page .song-detail-title,
body[data-theme="dark"] .song-detail-page .song-block-head h3 {
  color: #f0e0c8 !important;
}

body[data-theme="dark"] .song-detail-page .song-detail-title-author,
body[data-theme="dark"] .song-detail-page .song-video-compact-text,
body[data-theme="dark"] .song-detail-page .comment-empty,
body[data-theme="dark"] .song-detail-page .song-revision-intro {
  color: #b7a18d !important;
}

body[data-theme="dark"] .song-detail-page .lyrics-html,
body[data-theme="dark"] .song-detail-page .lyrics-html *,
body[data-theme="dark"] .song-detail-page .lyrics-reader-body,
body[data-theme="dark"] .song-detail-page .explanation-html,
body[data-theme="dark"] .song-detail-page .explanation-html * {
  color: #cfc3b7 !important;
}

body[data-theme="dark"] .song-detail-page .lyrics-html h3,
body[data-theme="dark"] .song-detail-page .tox .lyrics-section-title {
  color: #8bc7ff !important;
}

body[data-theme="dark"] .song-detail-page .song-hero-quick-album-year,
body[data-theme="dark"] .song-detail-page .song-hero-quick-item,
body[data-theme="dark"] .song-detail-page .lyrics-reader-tools button,
body[data-theme="dark"] .song-detail-page .comment,
body[data-theme="dark"] .song-detail-page .song-revision-list li a {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.10) !important;
  color: #e8d8c4 !important;
}

body[data-theme="dark"] .song-detail-page .lyrics-reader-tools {
  background: rgba(40,32,26,.85) !important;
  border-color: rgba(255,255,255,.18) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.28) !important;
}

body[data-theme="dark"] .song-detail-page .lyrics-reader-tools button + button {
  border-top-color: rgba(255,255,255,.10) !important;
  border-left-color: transparent !important;
}

body[data-theme="dark"] .song-detail-page .song-report-panel {
  background: rgba(255,255,255,.045) !important;
}

body[data-theme="dark"] .song-detail-page .song-report-toggle {
  color: #d7c2ad !important;
}

/* Song detail: the solid reading surface belongs only to the lyrics body. */
.song-detail-page .lyrics.song-block {
  background: transparent !important;
}

.song-detail-page .lyrics-reader-body {
  margin-top: 4px;
  padding: 18px !important;
  border-radius: 14px;
  background: #ffffff !important;
}

body[data-theme="dark"] .song-detail-page .lyrics.song-block {
  background: transparent !important;
}

body[data-theme="dark"] .song-detail-page .lyrics-reader-body {
  background: #120a06 !important;
}

body[data-theme="light"] .song-detail-page .song-detail-favorite,
body[data-theme="light"] .song-detail-page .song-detail-playlist {
  border: 1px solid rgba(214,94,44,.18) !important;
  background: rgba(255,255,255,.74) !important;
  color: #6f4e38 !important;
  box-shadow: none;
}

body[data-theme="light"] .song-detail-page .song-detail-favorite:hover,
body[data-theme="light"] .song-detail-page .song-detail-playlist:hover {
  border-color: rgba(214,94,44,.36) !important;
  background: rgba(255,247,237,.94) !important;
  color: #d65e2c !important;
  text-decoration: none;
}

body[data-theme="light"] .song-detail-page .song-detail-favorite.is-favorite {
  border-color: rgba(214,94,44,.28) !important;
  background: rgba(214,94,44,.12) !important;
  color: #b84a22 !important;
}

body[data-theme="light"] .song-detail-page .song-detail-favorite.is-favorite i {
  color: #d65e2c !important;
}

body[data-theme="light"] .song-detail-page .song-detail-playlist i {
  color: #8a6048 !important;
}

body[data-theme="light"] .header-nav-main .nav-main-cta.is-active,
body[data-theme="light"] .header-nav-main .nav-main-cta[aria-current="page"] {
  border-color: #a63a18 !important;
  background: #b84a22 !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(184,74,34,0.24) !important;
}

body[data-theme="light"] .header-nav-main .nav-main-cta.is-active span,
body[data-theme="light"] .header-nav-main .nav-main-cta[aria-current="page"] span,
body[data-theme="light"] .header-nav-main .nav-main-cta.is-active i,
body[data-theme="light"] .header-nav-main .nav-main-cta[aria-current="page"] i {
  color: #ffffff !important;
}

body[data-theme="light"] .header-nav-main .nav-main-cta.is-active:hover,
body[data-theme="light"] .header-nav-main .nav-main-cta[aria-current="page"]:hover {
  border-color: #8f2f12 !important;
  background: #9f3918 !important;
  color: #ffffff !important;
}

@media (min-width: 901px) {
  .header-nav-main > .nav-main-link,
  .header-nav-main > .nav-main-dropdown > .nav-main-link {
    font-size: 1.02rem;
    font-weight: 1000;
  }

  .header-nav-main > .nav-main-link i,
  .header-nav-main > .nav-main-dropdown > .nav-main-link i {
    font-size: 1.02rem;
  }

  .header-admin-btn {
    position: fixed;
    top: 92px;
    right: 0;
    z-index: 260;
    width: 46px;
    height: 46px;
    min-width: 46px;
    padding: 0;
    justify-content: center;
    border-radius: 14px 0 0 14px;
    border: 1px solid rgba(37,99,235,0.28);
    border-right: 0;
    background: #1e3a5f;
    box-shadow: 0 10px 24px rgba(15,23,42,0.22);
  }

  .header-admin-btn-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .header-admin-btn i {
    font-size: 1.12rem;
  }

  .header-admin-btn:hover {
    background: #255f99;
    transform: translateX(-2px);
  }

  .header-top-right .user-menu,
  .header-top-right .header-icon-btn {
    order: 1;
  }

  .header-top-right .header-theme-wrap {
    order: 2;
  }

  .header-top-right .header-admin-btn {
    order: 3;
    position: static;
    width: 42px;
    height: 38px;
    min-width: 42px;
    padding: 0;
    border: 1px solid rgba(37,99,235,0.24);
    border-radius: 9px;
    background: #1e3a5f;
    box-shadow: none;
    transform: none;
  }

  .header-top-right .header-admin-btn:hover {
    background: #255f99;
    transform: none;
  }

  .header-top-right .header-admin-btn-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .header-top-right .header-admin-btn {
    position: fixed;
    top: 92px;
    right: 0;
    z-index: 260;
    width: 46px;
    height: 46px;
    min-width: 46px;
    padding: 0;
    justify-content: center;
    border: 1px solid rgba(37,99,235,0.28);
    border-right: 0;
    border-radius: 14px 0 0 14px;
    background: #1e3a5f;
    box-shadow: 0 10px 24px rgba(15,23,42,0.22);
  }

  .header-top-right .header-admin-btn:hover {
    background: #255f99;
    transform: translateX(-2px);
  }
}

@media (max-width: 640px) {
  .song-detail-page .song-detail-top {
    grid-template-columns: 1fr;
  }

  .song-detail-page .song-detail-cover {
    width: 112px;
    height: 112px;
  }

  .song-detail-page .lyrics-reader-tools {
    position: static;
    float: none;
    clear: both;
    flex-direction: row;
    display: flex;
    width: max-content;
    margin: 10px 0 14px;
    opacity: 1;
    border-radius: 999px;
  }

  .song-detail-page .lyrics-reader-tools button {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    font-size: .9rem;
  }

  .song-detail-page .lyrics-reader-tools button + button {
    border-top: none;
    border-left: 1px solid rgba(93,69,56,.10);
  }

  .song-detail-page .lyrics-reader-body {
    clear: both;
    padding-top: 0;
  }

  .song-detail-page .explanation-html {
    padding: 16px;
  }
}

.event-editor-aside {
  position: sticky;
  top: 92px;
  display: grid;
  gap: 12px;
}

.event-editor-summary strong {
  display: block;
  margin: 8px 0 12px;
  color: #2f2119;
  font-size: 1.18rem;
  line-height: 1.25;
}

.event-editor-summary ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 9px;
}

.event-editor-summary li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  color: #6d5140;
  font-size: .9rem;
  font-weight: 850;
  line-height: 1.35;
}

.event-editor-summary li i {
  color: #d65e2c;
}

.event-editor-help h3 {
  margin: 0 0 6px;
  color: #2f2119;
  font-size: 1rem;
  letter-spacing: 0;
}

.event-editor-help p {
  margin: 0;
  color: #80624e;
  font-size: .9rem;
  font-weight: 750;
  line-height: 1.5;
}

.event-editor-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid rgba(93,69,56,.12);
}

.event-editor-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: #d65e2c;
  color: #fff;
  font-weight: 950;
  font-size: .95rem;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 14px 28px rgba(214,94,44,.25);
}

.event-editor-submit:hover {
  background: #c84f22;
}

.event-editor-cancel-button {
  border: 1px solid #fecaca;
  background: #fff5f5;
  color: #b91c1c;
  cursor: pointer;
}

.event-editor-cancel-button:hover {
  background: #fee2e2;
  color: #991b1b;
}

body[data-theme="dark"] .event-editor-head h2,
body[data-theme="dark"] .event-editor-card-head span,
body[data-theme="dark"] .event-editor-summary strong,
body[data-theme="dark"] .event-editor-help h3 {
  color: #c0ad9a;
}

body[data-theme="dark"] .event-editor-head p,
body[data-theme="dark"] .event-editor-card-head small,
body[data-theme="dark"] .event-editor-summary li,
body[data-theme="dark"] .event-editor-help p {
  color: #c0a888;
}

body[data-theme="dark"] .event-editor-card,
body[data-theme="dark"] .event-editor-summary,
body[data-theme="dark"] .event-editor-help,
body[data-theme="dark"] .event-editor-link-btn,
body[data-theme="dark"] .event-editor-cancel {
  background: rgba(26,14,6,.68);
  border-color: rgba(255,255,255,.10);
}

body[data-theme="dark"] .event-editor-page {
  background-color: #120a04;
}

body[data-theme="dark"] .event-editor-layout {
  background: rgba(26,14,6,.68);
  border-color: rgba(255,255,255,.10);
}

body[data-theme="dark"] .event-editor-card,
body[data-theme="dark"] .event-editor-actions {
  border-color: rgba(255,255,255,.10);
}

body[data-theme="dark"] .event-editor-card,
body[data-theme="dark"] .event-editor-summary,
body[data-theme="dark"] .event-editor-help {
  background: transparent;
}

body[data-theme="dark"] .event-editor-card input,
body[data-theme="dark"] .event-editor-card select,
body[data-theme="dark"] .event-editor-card textarea {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  color: #c0ad9a;
}

body[data-theme="dark"] .event-editor-card input::placeholder,
body[data-theme="dark"] .event-editor-card textarea::placeholder {
  color: #7a5a48;
}

body[data-theme="dark"] .event-editor-card-head span {
  color: #f59e6e;
}

body[data-theme="dark"] .event-state-pill.is-cancelled {
  background: rgba(185, 28, 28, 0.18);
  border-color: rgba(248, 113, 113, 0.24);
  color: #fca5a5;
}

body[data-theme="dark"] .event-state-pill.is-ongoing {
  background: rgba(21, 128, 61, 0.18);
  border-color: rgba(134, 239, 172, 0.24);
  color: #86efac;
}

@media (max-width: 900px) {
  .event-editor-head,
  .event-editor-layout {
    grid-template-columns: 1fr;
  }

  .event-editor-head {
    display: grid;
    max-width: 100%;
  }

  .event-editor-head-actions {
    justify-content: flex-start;
  }

  .event-editor-aside {
    position: static;
  }
}

@media (max-width: 620px) {
  .event-editor-page {
    padding: 14px 16px 52px;
  }

  .event-editor-layout {
    padding: 20px 16px;
    border-radius: 18px;
  }

  .event-editor-two {
    grid-template-columns: 1fr;
  }

  .event-editor-card-head {
    display: grid;
  }

  .event-editor-card-head small {
    text-align: left;
  }

  .event-editor-card,
  .event-editor-summary,
  .event-editor-help {
    padding: 18px 0;
  }

  .event-editor-head-actions,
  .event-editor-actions,
  .event-editor-link-btn,
  .event-editor-submit,
  .event-editor-cancel {
    width: 100%;
  }
}

.articles-sort-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid rgba(214,94,44,.14);
  border-radius: 999px;
  background: rgba(255,255,255,.68);
  color: #5d4538;
  font-size: .78rem;
  font-weight: 900;
  text-decoration: none;
}

.articles-sort-btn:hover {
  border-color: rgba(214,94,44,.28);
  background: rgba(214,94,44,.08);
  color: #1a0e06;
  text-decoration: none;
}

.articles-sort-btn.is-active {
  border-color: #d65e2c;
  background: #d65e2c;
  color: #ffffff;
}

.articles-new-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  background: #d65e2c;
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  font-family: var(--km-menu-font);
  transition: filter .15s, transform .1s;
  white-space: nowrap;
}

.articles-new-btn:hover { filter: brightness(.9); transform: translateY(-1px); }

.event-new-btn {
  min-height: 48px;
  padding: 0 22px;
  gap: 9px;
  border-radius: 999px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1rem;
  font-weight: 850;
  box-shadow: 0 10px 24px rgba(214,94,44,.24);
}

.event-new-btn i {
  font-size: 1.12rem;
}

@media (max-width: 620px) {
  .event-new-btn {
    width: 100%;
    justify-content: center;
  }
}

.articles-drafts-panel {
  background: #fffbeb;
  border: 1px solid #fde047;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 28px;
}

.articles-drafts-title {
  font-family: var(--km-title-font);
  font-size: 0.95rem;
  color: #713f12;
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.articles-drafts-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.articles-draft-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 6px 8px;
  border-radius: 6px;
  text-decoration: none;
  color: #44291a;
  font-size: 0.9rem;
  transition: background .15s;
}

.articles-draft-item:hover { background: #fef9c3; }
.articles-draft-date { font-size: 0.8rem; color: #92400e; white-space: nowrap; }

.articles-empty {
  text-align: center;
  padding: 60px 24px;
  color: #706050;
}

.articles-empty i    { font-size: 2.5rem; display: block; margin-bottom: 12px; color: #c4a882; }
.articles-empty p    { margin: 0 0 10px; }
.articles-empty a    { color: #d65e2c; font-weight: 600; }

/* ── Article vedette ── */
.articles-featured {
  display: flex;
  border-radius: 20px;
  overflow: hidden;
  background: #fffdf9;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 6px 32px rgba(180,100,40,.14), 0 1px 4px rgba(180,100,40,.06);
  border: 1px solid rgba(255,255,255,.92);
  margin-bottom: 40px;
  min-height: 420px;
  transition: box-shadow .3s, transform .3s;
}
.articles-featured:hover {
  box-shadow: 0 16px 56px rgba(180,100,40,.20), 0 2px 8px rgba(180,100,40,.08);
  transform: translateY(-3px);
}
.articles-featured-cover {
  flex: 0 0 54%;
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, #f4ece0, #e8d8c4);
}
.articles-featured-cover img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s;
}
.articles-featured:hover .articles-featured-cover img { transform: scale(1.05); }
.articles-featured-cover--empty {
  display: flex; align-items: center; justify-content: center;
  font-size: 6rem; color: #d6c0a8;
}
.articles-featured-body {
  flex: 1; padding: 48px 52px;
  display: flex; flex-direction: column; justify-content: center; gap: 16px;
}
.articles-featured-top {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
}
.articles-featured-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.articles-featured-title {
  font-family: var(--km-title-font);
  font-size: 2.3rem; font-weight: 700;
  color: #1a0e06; line-height: 1.18; margin: 0;
}
.articles-featured-excerpt {
  font-size: 1rem; color: #706050; line-height: 1.75; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.articles-featured-byline {
  display: flex; align-items: center; gap: 8px;
  font-size: .82rem; color: #a08870; margin-top: 6px;
  flex-wrap: wrap;
}
.articles-featured-dot { opacity: .5; }
.articles-featured-cta {
  margin-left: auto; display: inline-flex; align-items: center; gap: 4px;
  font-size: .88rem; font-weight: 700; color: #d65e2c;
  white-space: nowrap;
}

/* ── Badge Nouveau ── */
.articles-badge-new {
  display: inline-flex; align-items: center; gap: 4px;
  background: linear-gradient(135deg, #d65e2c, #e8893a);
  color: #fff;
  border-radius: 20px;
  padding: 3px 10px;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(214,94,44,.35);
  flex-shrink: 0;
}
.articles-badge-new--card {
  position: absolute; top: 10px; left: 10px;
  font-size: .68rem;
}

/* ── Compteur de vues ── */
.articles-views {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: .78rem; color: #a08870;
  white-space: nowrap;
}

/* ── Tags pill ── */
.articles-tag {
  display: inline-block;
  background: #fef3e2; color: #92400e;
  border: 1px solid #f5c97a;
  border-radius: 20px; padding: 1px 10px;
  font-size: .75rem; font-weight: 600; white-space: nowrap;
}

/* ── Grille des articles ── */
.articles-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 20px;
}

.articles-card {
  display: flex; flex-direction: column;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 14px; overflow: hidden;
  text-decoration: none; color: inherit;
  box-shadow: 0 4px 18px rgba(180,100,40,.08), 0 1px 3px rgba(180,100,40,.04);
  border: 1px solid rgba(255,255,255,.88);
  transition: box-shadow .2s, transform .2s;
}
.articles-card:hover {
  box-shadow: 0 10px 32px rgba(180,100,40,.15), 0 2px 6px rgba(180,100,40,.06);
  transform: translateY(-3px);
}
.articles-card-cover {
  aspect-ratio: 16/9; overflow: hidden;
  background: linear-gradient(135deg, #f4ece0, #e8d8c4);
  display: flex; align-items: center; justify-content: center;
}
.articles-card-cover img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .3s;
}
.articles-card:hover .articles-card-cover img { transform: scale(1.05); }
.articles-card-cover--empty { font-size: 2.5rem; color: #d6c0a8; }

.articles-card-body {
  padding: 16px 18px 18px; flex: 1;
  display: flex; flex-direction: column; gap: 8px;
}
.articles-card-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.articles-card-title {
  font-family: var(--km-title-font);
  font-size: 1.05rem; font-weight: 700;
  color: #1a0e06; margin: 0; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.articles-card-excerpt {
  font-size: .84rem; color: #706050; line-height: 1.55; margin: 0; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.articles-card-meta {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .78rem; color: #a08870;
  border-top: 1px solid rgba(180,100,40,.12); padding-top: 10px; margin-top: 4px;
  gap: 8px;
}
.articles-card-meta-right {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}

.articles-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 40px;
  font-size: 0.9rem;
  color: #706050;
}

.articles-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.88);
  box-shadow: 0 2px 8px rgba(180,100,40,.08);
  color: #1a0e06;
  text-decoration: none;
  transition: background .15s, box-shadow .15s;
}

.articles-page-btn:hover {
  background: rgba(255,255,255,.92);
  box-shadow: 0 4px 14px rgba(180,100,40,.14);
}

/* Dark mode */
body[data-theme="dark"] .article-editor-shell        { background: #1a1a1f; }
body[data-theme="dark"] .article-editor-topbar       { background: #242428; border-color: #3c3c3c; }
body[data-theme="dark"] .article-editor-btn-draft    { background: #2d2d30; color: #d4d4d4; }
body[data-theme="dark"] .article-editor-btn-draft:hover { background: #37373d; }
body[data-theme="dark"] .article-editor-title-input  { color: #d4d4d4; }
body[data-theme="dark"] .article-editor-excerpt-input { color: #d4d4d4; border-color: #3c3c3c; }

body[data-theme="dark"] .article-reading-title        { color: #d4d4d4; }
body[data-theme="dark"] .article-reading-body         { color: #c4c4c4; }
body[data-theme="dark"] .article-h2                   { color: #e1784b; }
body[data-theme="dark"] .article-h3                   { color: #d4d4d4; }
body[data-theme="dark"] .article-h4                   { color: #a1a1aa; }
body[data-theme="dark"] .article-h5                   { color: #71717a; }
body[data-theme="dark"] .article-quote                { background: #2a1c15; border-color: #e1784b; }
body[data-theme="dark"] .article-quote p              { color: #e8c9b5; }
body[data-theme="dark"] .article-audio                { background: #2a1c15; border-color: #6b3320; }
body[data-theme="dark"] .article-attach-link          { background: #2d2d30; color: #d4d4d4; }
body[data-theme="dark"] .article-attach-link:hover    { background: #37373d; }
body[data-theme="dark"] .article-edit-btn             { background: #2d2d30; color: #d4d4d4; }
body[data-theme="dark"] .article-edit-btn:hover       { background: #37373d; }

body[data-theme="dark"] .site-main:has(.articles-shell) {
  background:
    radial-gradient(ellipse 80% 50% at 88% 4%, rgba(214,94,44,.09), transparent),
    radial-gradient(ellipse 55% 55% at 8% 85%, rgba(180,100,40,.07), transparent),
    #1a1208;
}
body[data-theme="dark"] .articles-shell {
  background: rgba(22, 18, 14, 0.88);
}
body[data-theme="dark"] .articles-title               { color: #e8d8c4; }
body[data-theme="dark"] .articles-sub                 { color: #9a7a60; }
body[data-theme="dark"] .articles-tools               { background: rgba(30,24,16,.72); border-color: rgba(80,50,20,.35); box-shadow: 0 4px 18px rgba(0,0,0,.35); }
body[data-theme="dark"] .articles-search-wrap         { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.10); }
body[data-theme="dark"] .articles-search-wrap input   { color: #e8d8c4; }
body[data-theme="dark"] .articles-search-wrap input::placeholder { color: #7a6050; }
body[data-theme="dark"] .articles-clear-search,
body[data-theme="dark"] .articles-sort-btn            { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.10); color: #c8ad92; }
body[data-theme="dark"] .articles-clear-search:hover,
body[data-theme="dark"] .articles-sort-btn:hover      { background: rgba(214,94,44,.12); color: #e8d8c4; }
body[data-theme="dark"] .articles-sort-btn.is-active  { background: #d65e2c; border-color: #d65e2c; color: #ffffff; }
body[data-theme="dark"] .articles-featured            { background: rgba(30,24,16,.85); border-color: rgba(80,50,20,.4); box-shadow: 0 4px 24px rgba(0,0,0,.4); }
body[data-theme="dark"] .articles-featured-cover      { background: linear-gradient(135deg, #2a2218, #1e1a12); }
body[data-theme="dark"] .articles-featured-cover--empty { color: #5a4a36; }
body[data-theme="dark"] .articles-featured-title      { color: #e8d8c4; }
body[data-theme="dark"] .articles-featured-excerpt    { color: #9a7a60; }
body[data-theme="dark"] .articles-featured-byline     { color: #7a6050; }
body[data-theme="dark"] .articles-card                { background: rgba(30,24,16,.72); border-color: rgba(80,50,20,.35); box-shadow: 0 4px 18px rgba(0,0,0,.35); }
body[data-theme="dark"] .articles-card-cover          { background: linear-gradient(135deg, #2a2218, #1e1a12); }
body[data-theme="dark"] .articles-card-cover--empty   { color: #5a4a36; }
body[data-theme="dark"] .articles-card-title          { color: #e8d8c4; }
body[data-theme="dark"] .articles-card-excerpt        { color: #9a7a60; }
body[data-theme="dark"] .articles-card-meta           { border-color: rgba(80,50,20,.3); color: #7a6050; }
body[data-theme="dark"] .articles-tag                 { background: #2a1a05; border-color: #6b4510; color: #e0a060; }
body[data-theme="dark"] .articles-drafts-panel        { background: #292010; border-color: #6b4f00; }
body[data-theme="dark"] .articles-drafts-title        { color: #fde68a; }
body[data-theme="dark"] .articles-draft-item          { color: #fcd34d; }
body[data-theme="dark"] .articles-draft-item:hover    { background: #3a2e00; }
body[data-theme="dark"] .articles-pagination          { color: #9a7a60; }
body[data-theme="dark"] .articles-page-btn            { background: rgba(30,24,16,.72); border-color: rgba(80,50,20,.35); color: #e8d8c4; box-shadow: 0 2px 8px rgba(0,0,0,.3); }
body[data-theme="dark"] .articles-page-btn:hover      { background: rgba(40,30,18,.88); }
body[data-theme="dark"] .articles-empty               { color: #9a7a60; }
body[data-theme="dark"] .articles-empty i             { color: #5a4a36; }
body[data-theme="dark"] .articles-views               { color: #7a6050; }
body[data-theme="dark"] .articles-featured-byline     { color: #7a6050; }
body[data-theme="dark"] .articles-card-meta-right     { color: #7a6050; }

/* Responsive */
@media (max-width: 960px) {
  .articles-featured { flex-direction: column; min-height: auto; border-radius: 16px; }
  .articles-featured-cover { flex: none; height: 260px; }
  .articles-featured-body { padding: 28px 32px 32px; }
  .articles-featured-title { font-size: 1.7rem; }
  .articles-grid { grid-template-columns: repeat(2, 1fr); }
  .articles-tools { grid-template-columns: 1fr; }
  .articles-sort { justify-content: flex-start; }
}

@media (max-width: 768px) {
  .article-reading-title  { font-size: 1.6rem; }
  .article-editor-title-input { font-size: 1.5rem; }
  .article-editor-topbar  { padding: 8px 14px; }
  .article-editor-title-area   { padding-left: 44px; }
  .article-editor-content-area { padding-left: 44px; }
}

@media (max-width: 540px) {
  .articles-shell { padding: 28px 14px 64px; }
  .articles-tools { padding: 10px; border-radius: 16px; }
  .articles-sort { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .articles-sort-btn { padding: 0 8px; }
  .articles-grid { grid-template-columns: 1fr; gap: 14px; }
  .articles-featured-cover { height: 200px; }
  .articles-featured-body { padding: 20px 22px 24px; }
  .articles-featured-title { font-size: 1.4rem; }
  .article-reading-shell { padding: 24px 20px 60px; }
  .site-main:has(.article-reading-shell) { padding: 16px 8px; }
}

/* ── Bannière niveau insuffisant (contrib_portail) ── */
.contrib-level-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 16px;
  font-size: 0.9rem;
  color: #78350f;
}

.contrib-level-notice > i {
  font-size: 1.2rem;
  color: #d97706;
  flex-shrink: 0;
  margin-top: 2px;
}

.contrib-level-notice strong {
  display: block;
  font-size: 0.95rem;
  margin-bottom: 4px;
  color: #92400e;
}

.contrib-level-notice p {
  margin: 0;
  line-height: 1.5;
}

.contrib-level-notice a {
  color: #d97706;
  text-decoration: underline;
  font-weight: 600;
}

.contrib-level-notice a:hover {
  color: #92400e;
}

body[data-theme="dark"] .contrib-level-notice {
  background: #292010;
  border-color: #6b4f00;
  color: #fcd34d;
}

body[data-theme="dark"] .contrib-level-notice > i {
  color: #fbbf24;
}

body[data-theme="dark"] .contrib-level-notice strong {
  color: #fde68a;
}

body[data-theme="dark"] .contrib-level-notice a {
  color: #fbbf24;
}

/* ── Encadré info votant (relecture) ── */
.dico-relecture-voter-info {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #f0fdf4;
  border: 1px solid #86efac;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 20px;
  font-size: 0.9rem;
  color: #14532d;
}

.dico-relecture-voter-info > i {
  font-size: 1.1rem;
  color: #16a34a;
  flex-shrink: 0;
  margin-top: 2px;
}

.dico-relecture-voter-info strong {
  display: block;
  font-size: 0.95rem;
  margin-bottom: 4px;
  color: #15803d;
}

.dico-relecture-voter-info p {
  margin: 0;
  line-height: 1.5;
}

body[data-theme="dark"] .dico-relecture-voter-info {
  background: #0d2b12;
  border-color: #166534;
  color: #bbf7d0;
}

body[data-theme="dark"] .dico-relecture-voter-info > i {
  color: #4ade80;
}

body[data-theme="dark"] .dico-relecture-voter-info strong {
  color: #86efac;
}

/* ════════════════════════════════════════════
   BLOC DUO — éditeur WYSIWYG (article_rediger.php)
   ════════════════════════════════════════════ */

/* Wrapper sans bordure — aspect lecture */
.duo-editor { position: relative; margin: 4px 0; }

/* Colonnes flex — 3 enfants : texte, poignée, image */
.duo-cols {
  display: flex;
  align-items: flex-start;
  gap: 0;
}

/* Texte contenteditable — aspect lecture */
.duo-text {
  font-size: 1rem;
  line-height: 1.75;
  color: #1f2937;
  outline: none;
  min-height: 100px;
}

.duo-text:empty::before {
  content: attr(data-placeholder);
  color: #9ca3af;
  pointer-events: none;
}

body[data-theme="dark"] .duo-text { color: #e4e4e7; }

/* Zone image */
.duo-media { display: flex; flex-direction: column; }

/* Figure — identique au rendu */
.duo-figure { margin: 0; }

/* Wrapper image — limité à la photo, pas à la légende */
.duo-img-wrap {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  line-height: 0;
}

.duo-img-wrap img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
}

/* Légende inline éditable — toujours accessible */
.duo-figcaption {
  font-size: .8rem;
  color: #9ca3af;
  text-align: center;
  font-style: italic;
  margin-top: 6px;
  outline: none;
  line-height: 1.4;
}

.duo-figcaption:empty::before {
  content: attr(data-placeholder);
  color: #d1d5db;
  pointer-events: none;
}

/* Overlay image — visible au survol, ciblé sur duo-img-wrap */
.duo-img-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.52);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  opacity: 0;
  transition: opacity .2s;
}

.duo-img-wrap:hover .duo-img-overlay { opacity: 1; }

/* Poignée de redimensionnement */
.duo-resize-handle {
  flex: 0 0 28px;
  align-self: stretch;
  cursor: col-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.duo-resize-handle::after {
  content: '';
  display: block;
  width: 3px;
  height: 40px;
  border-radius: 2px;
  background: #d1d5db;
  transition: background .15s;
}

.duo-resize-handle:hover::after { background: #f97316; }

.duo-img-btn {
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.35);
  color: #fff;
  padding: 5px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: .82rem;
  backdrop-filter: blur(2px);
  transition: background .15s;
}

.duo-img-btn:hover { background: rgba(255,255,255,.28); }

.duo-img-btn--rm { border-color: rgba(248,113,113,.5); color: #fca5a5; }
.duo-img-btn--rm:hover { background: rgba(220,38,38,.32); }

/* Zone de dépôt */
.duo-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 160px;
  border: 2px dashed #d1d5db;
  border-radius: 10px;
  cursor: pointer;
  font-size: .88rem;
  color: #9ca3af;
  transition: border-color .15s, background .15s, color .15s;
}

.duo-drop i { font-size: 2rem; }

.duo-drop:hover,
.duo-drop.is-over { border-color: #c9913c; color: #c9913c; background: #fff8f0; }

body[data-theme="dark"] .duo-drop { border-color: #3f3f46; color: #71717a; }
body[data-theme="dark"] .duo-drop:hover,
body[data-theme="dark"] .duo-drop.is-over { border-color: #c9913c; color: #c9913c; background: #1e1005; }

/* Contrôles duo — style identique au panneau natif Editor.js */
.duo-ctrl {
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin-bottom: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s;
  background: #fff;
  border: 1px solid #e8e8eb;
  border-radius: 6px;
  box-shadow: 0 3px 15px -3px rgba(13,20,33,.13);
  padding: 3px;
}

.duo-editor:hover .duo-ctrl,
.duo-editor:focus-within .duo-ctrl { opacity: 1; pointer-events: all; }

/* Séparateur natif Editor.js */
.duo-ctrl .ce-popover-item-separator {
  width: 1px;
  align-self: stretch;
  background: #eff2f5;
  margin: 2px 4px;
  display: block;
  flex-shrink: 0;
}
.duo-ctrl .ce-popover-item-separator__line { display: none; }

body[data-theme="dark"] .duo-ctrl {
  background: #2c2c2c;
  border-color: #4a4a4a;
  box-shadow: 0 3px 15px -3px rgba(0,0,0,.4);
}
body[data-theme="dark"] .duo-ctrl .ce-popover-item-separator { background: #3f3f3f; }

/* Barre de formatage inline (sélection de texte) */
.duo-fmt-bar {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 1px;
  background: #1f2937;
  border-radius: 7px;
  padding: 4px 5px;
  z-index: 99999;
  transform: translateX(-50%);
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s;
  white-space: nowrap;
}

.duo-fmt-bar.is-visible { opacity: 1; pointer-events: all; }

.duo-fmt-bar button {
  background: transparent;
  border: none;
  color: #f3f4f6;
  padding: 3px 9px;
  border-radius: 4px;
  cursor: pointer;
  font-size: .82rem;
  line-height: 1.4;
}

.duo-fmt-bar button:hover { background: rgba(255,255,255,.15); }

.duo-fmt-sep { width: 1px; height: 16px; background: rgba(255,255,255,.2); margin: 0 3px; }


/* ════════════════════════════════════════════
   BLOC DUO — lecture (article.php)
   ════════════════════════════════════════════ */
.article-duo {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  margin: 28px 0;
}

.article-duo-text { flex: 1 1 0; min-width: 0; }
.article-duo-media { min-width: 0; }

@media (max-width: 680px) {
  .article-duo {
    flex-direction: column;
    gap: 16px;
  }

  .article-duo-media,
  .article-duo-text { flex: none; width: 100% !important; }

  .article-duo--image-left .article-duo-media {
    order: -1;
  }
}

.article-duo-text {
  font-size: 1rem;
  line-height: 1.7;
  color: inherit;
}

.article-duo-media {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.article-duo-media img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
}

.article-duo-media figcaption {
  font-size: 0.8rem;
  color: #6b7280;
  text-align: center;
  font-style: italic;
}

body[data-theme="dark"] .article-duo-media figcaption {
  color: #9ca3af;
}

/* ════════════════════════════════════════════
   SECTION ARTICLES — page d'accueil
   ════════════════════════════════════════════ */
.hi-articles {
  padding: 58px 0 64px;
  background: #fffdf9;
}

body[data-theme="dark"] .hi-articles {
  background: #1c1a17;
}

.hi-articles-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

.hi-articles-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 12px;
}

.hi-articles-all {
  font-size: 0.88rem;
  color: #c9913c;
  text-decoration: none;
  white-space: nowrap;
  font-weight: 600;
}

.hi-articles-all:hover {
  text-decoration: underline;
}

.hi-articles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

@media (max-width: 860px) {
  .hi-articles-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 540px) {
  .hi-articles-grid {
    grid-template-columns: 1fr;
  }
}

.hi-article-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 2px 8px rgba(0,0,0,.07);
  transition: transform 0.18s, box-shadow 0.18s;
}

.hi-article-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,.13);
}

body[data-theme="dark"] .hi-article-card {
  background: #27272a;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}

.hi-article-card-img {
  aspect-ratio: 16/9;
  overflow: hidden;
}

.hi-article-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s;
}

.hi-article-card:hover .hi-article-card-img img {
  transform: scale(1.04);
}

.hi-article-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px 18px;
  flex: 1;
}

.hi-article-card-title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  color: #1f2937;
}

body[data-theme="dark"] .hi-article-card-title {
  color: #f3f4f6;
}

.hi-article-card-excerpt {
  font-size: 0.85rem;
  color: #6b7280;
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body[data-theme="dark"] .hi-article-card-excerpt {
  color: #9ca3af;
}

.hi-article-card-meta {
  font-size: 0.78rem;
  color: #9ca3af;
  margin-top: auto;
}

/* ════════════════════════════════════════════
   ARTICLE — Corps CKEditor (lecture)
   ════════════════════════════════════════════ */
.article-reading-body {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 20px 60px;
  font-size: 1.05rem;
  line-height: 1.8;
  color: #1f2937;
}

body[data-theme="dark"] .article-reading-body {
  color: #d4d4d8;
}

/* Typographie */
.article-reading-body h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 1.8em 0 .5em;
  color: #111827;
  line-height: 1.3;
}

.article-reading-body h3 {
  font-size: 1.18rem;
  font-weight: 700;
  margin: 1.4em 0 .4em;
  color: #374151;
}

body[data-theme="dark"] .article-reading-body h2 { color: #f3f4f6; }
body[data-theme="dark"] .article-reading-body h3 { color: #e5e7eb; }

.article-reading-body p {
  margin: 0 0 1em;
}

.article-reading-body a {
  color: #c9913c;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.article-reading-body a:hover { color: #a87430; }

.article-reading-body strong { font-weight: 700; }
.article-reading-body em     { font-style: italic; }
.article-reading-body u      { text-decoration: underline; }
.article-reading-body s      { text-decoration: line-through; }
.article-reading-body mark   { background: #fef08a; padding: 0 2px; border-radius: 3px; }

body[data-theme="dark"] .article-reading-body mark {
  background: #713f12;
  color: #fde68a;
}

.article-reading-body code {
  font-family: monospace;
  background: #f3f4f6;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: .9em;
}

body[data-theme="dark"] .article-reading-body code {
  background: #27272a;
  color: #a5f3fc;
}

/* Listes */
.article-reading-body ul,
.article-reading-body ol {
  padding-left: 1.6em;
  margin: 0 0 1em;
}

.article-reading-body li { margin-bottom: .3em; }

/* Blockquote */
.article-reading-body blockquote {
  border-left: 4px solid #c9913c;
  margin: 1.4em 0;
  padding: .6em 1.2em;
  color: #6b7280;
  font-style: italic;
}

body[data-theme="dark"] .article-reading-body blockquote {
  color: #9ca3af;
  border-color: #92400e;
}

/* Séparateur */
.article-reading-body hr {
  border: none;
  border-top: 2px solid #e5e7eb;
  margin: 2em auto;
  width: 60%;
}

body[data-theme="dark"] .article-reading-body hr { border-color: #3f3f46; }

/* Images CKEditor */
.article-reading-body figure.image {
  margin: 1.6em auto;
  text-align: center;
}

.article-reading-body figure.image img {
  max-width: 100%;
  border-radius: 10px;
  display: block;
  margin: 0 auto;
}

.article-reading-body figure.image.image-style-align-left {
  float: left;
  margin: .4em 1.6em 1em 0;
  max-width: 45%;
  text-align: left;
}

.article-reading-body figure.image.image-style-align-right {
  float: right;
  margin: .4em 0 1em 1.6em;
  max-width: 45%;
  text-align: right;
}

.article-reading-body figure.image.image-style-side {
  float: right;
  margin: .4em 0 1em 1.6em;
  max-width: 38%;
}

.article-reading-body figure.image figcaption {
  font-size: .8rem;
  color: #9ca3af;
  margin-top: 6px;
  font-style: italic;
}

/* Clearfix after floated images */
.article-reading-body p:has(+ figure.image.image-style-align-left),
.article-reading-body p:has(+ figure.image.image-style-align-right) {
  clear: none;
}

.article-reading-body > *:last-child::after {
  content: '';
  display: table;
  clear: both;
}

/* Embeds vidéo */
.article-reading-body figure.media {
  margin: 1.6em 0;
}

.article-embed-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 10px;
}

.article-embed-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Tableaux */
.article-reading-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.4em 0;
  font-size: .95rem;
}

.article-reading-body th,
.article-reading-body td {
  border: 1px solid #e5e7eb;
  padding: 8px 12px;
  text-align: left;
}

.article-reading-body th {
  background: #f9fafb;
  font-weight: 700;
}

body[data-theme="dark"] .article-reading-body th { background: #27272a; }
body[data-theme="dark"] .article-reading-body th,
body[data-theme="dark"] .article-reading-body td { border-color: #3f3f46; }

/* Responsive — annuler les flottants sur mobile */
@media (max-width: 600px) {
  .article-reading-body figure.image.image-style-align-left,
  .article-reading-body figure.image.image-style-align-right,
  .article-reading-body figure.image.image-style-side {
    float: none;
    max-width: 100%;
    margin: 1.2em 0;
  }
}

/* Article reading layout refresh */
.site-main.container:has(.article-reading-shell),
.site-main:has(.article-reading-shell) {
  width: 100%;
  max-width: 100%;
  padding: 28px 20px 72px;
  background:
    radial-gradient(ellipse 72% 48% at 86% 4%, rgba(214,94,44,.10), transparent),
    radial-gradient(ellipse 52% 52% at 10% 92%, rgba(40,120,95,.07), transparent),
    #f3eadf;
}

.article-reading-shell {
  width: min(100%, 920px);
  max-width: none;
  padding: 30px 34px 72px;
  border: 1px solid rgba(255,255,255,.90);
  border-radius: 22px;
  background: rgba(255,253,249,.78);
  box-shadow: 0 10px 34px rgba(180,100,40,.10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.article-reading-header {
  margin-bottom: 34px;
}

.article-reading-cover {
  max-height: 260px;
  margin: 14px 0 22px;
  border-radius: 18px;
  background: #eadccc;
  box-shadow: 0 10px 28px rgba(66,38,20,.10);
  display: flex;
  align-items: center;
  justify-content: center;
}

.article-reading-cover img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 260px;
  object-fit: contain;
  object-position: center;
  display: block;
}

.article-reading-title {
  max-width: 820px;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.05;
  color: #1a0e06;
}

.article-reading-excerpt {
  max-width: 780px;
  color: #706050;
}

.article-reading-body {
  max-width: 840px;
  padding: 0 8px 40px;
  font-size: 1.08rem;
}

body[data-theme="dark"] .site-main.container:has(.article-reading-shell),
body[data-theme="dark"] .site-main:has(.article-reading-shell) {
  background:
    radial-gradient(ellipse 72% 48% at 86% 4%, rgba(214,94,44,.08), transparent),
    radial-gradient(ellipse 52% 52% at 10% 92%, rgba(40,120,95,.06), transparent),
    #18140f;
}

body[data-theme="dark"] .article-reading-shell {
  background: rgba(31,27,21,.78);
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 10px 34px rgba(0,0,0,.24);
}

body[data-theme="dark"] .article-reading-cover {
  background: #2a2218;
}

@media (max-width: 760px) {
  .site-main.container:has(.article-reading-shell),
  .site-main:has(.article-reading-shell) {
    padding: 14px 10px 48px;
  }

  .article-reading-shell {
    padding: 18px 16px 52px;
    border-radius: 18px;
  }

  .article-reading-cover {
    max-height: 190px;
    border-radius: 14px;
  }

  .article-reading-cover img {
    max-height: 190px;
  }

  .article-reading-body {
    padding: 0 2px 32px;
    font-size: 1rem;
  }
}

/* ══════════════════════════════════════════════════════
   ADMIN DASHBOARD
   ══════════════════════════════════════════════════════ */

/* Use same full-height layout as admin-users */
body:has(.admin-dashboard-page) {
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
body:has(.admin-dashboard-page) .site-footer { display: none; }
.site-main:has(.admin-dashboard-page) {
  flex: 1; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column; padding: 0; max-width: none;
}

/* Scrollable content area */
.admin-dash-content {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 16px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: #f4f6f9;
}

/* ── KPI row ── */
.admin-dash-kpi-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}

.admin-dash-kpi-card {
  background: #ffffff;
  border: 1px solid #e8edf3;
  border-radius: 10px;
  padding: 14px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  transition: box-shadow 0.15s;
}

.admin-dash-kpi-card:hover {
  box-shadow: 0 3px 8px rgba(0,0,0,0.08);
}

.admin-dash-kpi-card.has-danger {
  border-color: #fecaca;
  background: #fff5f5;
}

.admin-dash-kpi-icon {
  width: 34px !important;
  height: 34px !important;
  border-radius: 9px;
  margin-bottom: 6px;
}

.admin-dash-kpi-value {
  font-size: 1.55rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1;
}

.admin-dash-kpi-card.has-danger .admin-dash-kpi-value { color: #dc2626; }

.admin-dash-kpi-label {
  font-size: 0.68rem;
  font-weight: 600;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.admin-dash-kpi-sub {
  font-size: 0.68rem;
  color: #94a3b8;
}

/* ── Content grid ── */
.admin-dash-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

/* Section card */
.admin-dash-section {
  background: #ffffff;
  border: 1px solid #e8edf3;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.admin-dash-section.has-danger { border-color: #fecaca; }

.admin-dash-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 10px;
  border-bottom: 1px solid #f1f5f9;
  flex-shrink: 0;
}

.admin-dash-section-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #334155;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.admin-dash-section-link {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 0.7rem;
  color: #94a3b8;
  text-decoration: none;
  transition: color 0.1s;
}
.admin-dash-section-link:hover { color: #3b82f6; }

/* Mini list rows */
.admin-dash-mini-list { flex: 1; overflow: hidden; }

.admin-dash-mini-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-bottom: 1px solid #f8fafc;
  transition: background 0.1s;
}

.admin-dash-mini-row:last-child { border-bottom: none; }
.admin-dash-mini-row:hover { background: #f8fbff; }

.admin-dash-mini-title {
  flex: 1;
  min-width: 0;
  font-size: 0.78rem;
  color: #334155;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-dash-mini-title a {
  color: inherit;
  text-decoration: none;
}
.admin-dash-mini-title a:hover { color: #3b82f6; text-decoration: underline; }

.admin-dash-mini-city { color: #94a3b8; font-size: 0.72rem; }

.admin-dash-mini-meta {
  font-size: 0.67rem;
  color: #94a3b8;
  white-space: nowrap;
  flex-shrink: 0;
}

.admin-dash-mini-avatar {
  width: 24px !important;
  height: 24px !important;
  font-size: 0.6rem !important;
  flex-shrink: 0;
}

.admin-dash-signal-icon {
  color: #ef4444;
  font-size: 0.78rem;
  flex-shrink: 0;
}

.admin-dash-empty {
  padding: 20px 16px;
  text-align: center;
  color: #94a3b8;
  font-size: 0.78rem;
  margin: 0;
}

/* Sidebar nav */
.admin-dash-nav-section {
  padding: 12px 16px 4px;
  margin: 0;
  font-size: 0.63rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #94a3b8;
}

.admin-dash-nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  text-decoration: none;
  border-bottom: 1px solid #f8fafc;
  transition: background 0.1s;
  color: inherit;
}

.admin-dash-nav-link:hover  { background: #f1f5f9; }
.admin-dash-nav-link.is-active {
  background: #eff6ff;
  color: #1d4ed8;
  border-left: 2px solid #3b82f6;
}
.admin-dash-nav-link.is-active .admin-dash-nav-arrow { color: #93c5fd; }

.admin-dash-nav-arrow {
  color: #cbd5e1;
  font-size: 0.7rem;
  margin-left: auto;
  flex-shrink: 0;
}

.admin-dash-nav-badge {
  font-size: 0.62rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 8px;
  background: #fee2e2;
  color: #dc2626;
  flex-shrink: 0;
}

/* ── Sidebar accordion nav (admin-snav) ─────────────────────────────────── */
.admin-snav {
  flex-shrink: 0;
  border-top: 1px solid #f1f5f9;
}

.admin-snav-group {
  border-bottom: 1px solid #f1f5f9;
}

.admin-snav-group > summary { list-style: none; }
.admin-snav-group > summary::-webkit-details-marker { display: none; }

.admin-snav-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  cursor: pointer;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #94a3b8;
  user-select: none;
  transition: background 0.12s;
  outline: none;
}
.admin-snav-trigger:hover { background: #f8fafc; color: #64748b; }
.admin-snav-trigger > i:first-child { font-size: 0.8rem; color: #94a3b8; flex-shrink: 0; }
.admin-snav-trigger > span { flex: 1; }

.admin-snav-chevron {
  font-size: 0.6rem;
  color: #cbd5e1;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
details[open] > .admin-snav-trigger .admin-snav-chevron {
  transform: rotate(180deg);
}

.admin-snav-items {
  display: flex;
  flex-direction: column;
  padding: 2px 0 6px;
}

.admin-snav-link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px 7px 28px;
  font-size: 0.81rem;
  color: #475569;
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: background 0.1s, color 0.1s;
}
.admin-snav-link:hover {
  background: #f8fafc;
  color: #1e293b;
  text-decoration: none;
}
.admin-snav-link.is-active {
  background: #eff6ff;
  color: #1d4ed8;
  border-left-color: #3b82f6;
  font-weight: 600;
}
.admin-snav-link i { font-size: 0.82rem; flex-shrink: 0; }

/* Liens directs (hors sous-menu) */
.admin-snav-flat {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  font-size: 0.82rem;
  color: #475569;
  text-decoration: none;
  border-bottom: 1px solid #f1f5f9;
  border-left: 2px solid transparent;
  transition: background 0.1s, color 0.1s;
}
.admin-snav-flat:hover {
  background: #f8fafc;
  color: #1e293b;
  text-decoration: none;
}
.admin-snav-flat.is-active {
  background: #eff6ff;
  color: #1d4ed8;
  border-left-color: #3b82f6;
  font-weight: 600;
}
.admin-snav-flat i { font-size: 0.82rem; flex-shrink: 0; }

/* Dark mode */
body[data-theme="dark"] .admin-snav          { border-color: #2d2d30; }
body[data-theme="dark"] .admin-snav-group    { border-color: #2d2d30; }
body[data-theme="dark"] .admin-snav-trigger  { color: #64748b; }
body[data-theme="dark"] .admin-snav-trigger:hover { background: #2a2a2d; color: #94a3b8; }
body[data-theme="dark"] .admin-snav-link     { color: #9da1a6; }
body[data-theme="dark"] .admin-snav-link:hover { background: #2a2a2d; color: #e2e8f0; }
body[data-theme="dark"] .admin-snav-link.is-active {
  background: rgba(59,130,246,0.12);
  color: #93c5fd;
  border-left-color: #3b82f6;
}
body[data-theme="dark"] .admin-snav-flat         { color: #9da1a6; border-color: #2d2d30; }
body[data-theme="dark"] .admin-snav-flat:hover   { background: #2a2a2d; color: #e2e8f0; }
body[data-theme="dark"] .admin-snav-flat.is-active {
  background: rgba(59,130,246,0.12);
  color: #93c5fd;
  border-left-color: #3b82f6;
}

/* ── Onglets de contenu ─────────────────────────────────────────────────── */
.admin-content-tabs {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
  padding: 0 16px;
  flex-shrink: 0;
  overflow-x: auto;
}
.admin-content-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #64748b;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color 0.12s, border-color 0.12s;
}
.admin-content-tab:hover {
  color: #334155;
  text-decoration: none;
}
.admin-content-tab.is-active {
  color: #1d4ed8;
  border-bottom-color: #3b82f6;
}
.admin-content-tab i { font-size: 0.82rem; }

body[data-theme="dark"] .admin-content-tabs {
  background: #1f1f22;
  border-color: #3c3c3c;
}
body[data-theme="dark"] .admin-content-tab        { color: #64748b; }
body[data-theme="dark"] .admin-content-tab:hover   { color: #cbd5e1; }
body[data-theme="dark"] .admin-content-tab.is-active { color: #93c5fd; border-bottom-color: #3b82f6; }

/* ── Onglets filtre (dans le main de chaque page contenu) ───────────────── */
.admin-filter-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.admin-filter-tabs::-webkit-scrollbar { display: none; }
.admin-filter-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-size: 0.78rem;
  font-weight: 500;
  color: #64748b;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
  line-height: 1.4;
}
.admin-filter-tab:hover {
  color: #1e293b;
  background: #e2e8f0;
  text-decoration: none;
}
.admin-filter-tab.is-active,
.admin-filter-tab.is-filter-active {
  color: #1d4ed8;
  background: #eff6ff;
  border-color: #bfdbfe;
  font-weight: 600;
}
.admin-filter-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  padding: 1px 5px;
  font-size: 0.68rem;
  font-weight: 700;
  background: #e2e8f0;
  color: #475569;
  border-radius: 10px;
  line-height: 1.4;
}
.admin-filter-tab.is-active .admin-filter-tab-count,
.admin-filter-tab.is-filter-active .admin-filter-tab-count {
  background: #bfdbfe;
  color: #1d4ed8;
}
.admin-filter-tab-count.is-danger {
  background: #fee2e2;
  color: #dc2626;
}
body[data-theme="dark"] .admin-filter-tabs {
  background: #16161a;
  border-color: #2e2e32;
}
body[data-theme="dark"] .admin-filter-tab { color: #64748b; }
body[data-theme="dark"] .admin-filter-tab:hover { color: #cbd5e1; background: #27272a; }
body[data-theme="dark"] .admin-filter-tab.is-active,
body[data-theme="dark"] .admin-filter-tab.is-filter-active { color: #93c5fd; background: #1e3a5f; border-color: #2563eb; }
body[data-theme="dark"] .admin-filter-tab-count { background: #27272a; color: #94a3b8; }
body[data-theme="dark"] .admin-filter-tab.is-active .admin-filter-tab-count,
body[data-theme="dark"] .admin-filter-tab.is-filter-active .admin-filter-tab-count { background: #1e40af; color: #93c5fd; }
body[data-theme="dark"] .admin-filter-tab-count.is-danger { background: #7f1d1d; color: #fca5a5; }

/* ── Admin candidatures ─────────────────────────────────────────────────── */
.admin-cand-table td { vertical-align: top; padding-top: 14px; padding-bottom: 14px; }

/* Postulant */
.admin-cand-applicant {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.admin-cand-avatar {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #d95528;
  color: #fff;
  font-size: .85rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin-cand-applicant-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: .83rem;
}

.admin-cand-applicant-info strong {
  font-size: .9rem;
  color: #1a0e06;
}

.admin-cand-user-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .78rem;
  color: #2563eb;
  text-decoration: none;
  margin-top: 2px;
}

.admin-cand-user-link:hover { text-decoration: underline; }

/* Badge rôle */
.admin-cand-role-badge {
  display: inline-flex;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: .78rem;
  font-weight: 600;
  background: #fff7ed;
  color: #c2410c;
  border: 1px solid #fed7aa;
  white-space: nowrap;
}

/* Contact */
.admin-cand-contact {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-cand-phone {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .85rem;
  color: #1a0e06;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}

.admin-cand-phone:hover { text-decoration: underline; }

.admin-cand-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.admin-cand-mode-tag {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: .72rem;
  font-weight: 600;
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid #bbf7d0;
  white-space: nowrap;
}

/* Ligne détail */
.admin-cand-detail-row > td {
  background: #f8fafc;
  border-top: none;
  padding: 0 !important;
}

.admin-cand-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  background: #e2e8f0;
  border-top: 2px solid #d95528;
}

.admin-cand-detail-block {
  background: #f8fafc;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.admin-cand-detail-block--full {
  grid-column: 1 / -1;
}

.admin-cand-detail-title {
  margin: 0;
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 6px;
}

.admin-cand-dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 14px;
  margin: 0;
  font-size: .85rem;
}

.admin-cand-dl dt {
  color: #64748b;
  font-weight: 600;
  white-space: nowrap;
}

.admin-cand-dl dd {
  margin: 0;
  color: #1a0e06;
  display: flex;
  align-items: center;
  gap: 6px;
}

.admin-cand-wa-link {
  display: inline-flex;
  align-items: center;
  color: #25d366;
  font-size: 1rem;
  text-decoration: none;
}

.admin-cand-wa-link:hover { color: #16a34a; }

.admin-cand-message {
  margin: 0;
  padding: 12px 16px;
  border-left: 3px solid #d95528;
  background: #fff;
  border-radius: 0 8px 8px 0;
  font-size: .88rem;
  color: #334155;
  line-height: 1.65;
  white-space: pre-wrap;
}

.admin-cand-detail-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 8px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none;
  align-self: flex-start;
  border: 1px solid #bfdbfe;
  transition: background .12s;
}

.admin-cand-detail-btn:hover { background: #dbeafe; }

/* Actions dans le détail */
.admin-cand-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 20px;
  background: #f1f5f9;
  border-top: 1px solid #e2e8f0;
}

.admin-cand-detail-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 8px;
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background .12s, color .12s;
}

.admin-cand-detail-action-btn.is-accept {
  background: #f0fdf4;
  color: #15803d;
  border-color: #bbf7d0;
}

.admin-cand-detail-action-btn.is-accept:hover {
  background: #dcfce7;
}

.admin-cand-detail-action-btn.is-reject {
  background: #fef2f2;
  color: #dc2626;
  border-color: #fecaca;
}

.admin-cand-detail-action-btn.is-reject:hover {
  background: #fee2e2;
}

.admin-cand-detail-action-btn.is-reset {
  background: #f8fafc;
  color: #475569;
  border-color: #e2e8f0;
}

.admin-cand-detail-action-btn.is-reset:hover {
  background: #f1f5f9;
}

/* Dark mode */
body[data-theme="dark"] .admin-cand-applicant-info strong { color: #efe4d6; }
body[data-theme="dark"] .admin-cand-role-badge { background: #431407; color: #fb923c; border-color: #7c2d12; }
body[data-theme="dark"] .admin-cand-phone { color: #efe4d6; }
body[data-theme="dark"] .admin-cand-mode-tag { background: #052e16; color: #4ade80; border-color: #14532d; }
body[data-theme="dark"] .admin-cand-detail-row > td { background: #18120c; }
body[data-theme="dark"] .admin-cand-detail-grid { background: #0f0905; }
body[data-theme="dark"] .admin-cand-detail-block { background: #18120c; }
body[data-theme="dark"] .admin-cand-detail-title { color: #7a8a9a; }
body[data-theme="dark"] .admin-cand-dl dt { color: #7a8a9a; }
body[data-theme="dark"] .admin-cand-dl dd { color: #efe4d6; }
body[data-theme="dark"] .admin-cand-message { background: #110e09; border-color: #d95528; color: #c8b8a0; }
body[data-theme="dark"] .admin-cand-detail-actions { background: #110e09; border-color: #1e1209; }
body[data-theme="dark"] .admin-cand-detail-action-btn.is-accept { background: #052e16; color: #4ade80; border-color: #14532d; }
body[data-theme="dark"] .admin-cand-detail-action-btn.is-reject { background: #2d0a0a; color: #f87171; border-color: #7f1d1d; }
body[data-theme="dark"] .admin-cand-detail-action-btn.is-reset { background: #1a1a20; color: #94a3b8; border-color: #2d2d38; }

.admin-cand-right-info {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: .82rem;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1d4ed8;
  margin-bottom: 4px;
}

.admin-cand-right-info i { color: #2563eb; }
.admin-cand-right-info strong { color: #1e40af; }

body[data-theme="dark"] .admin-cand-right-info {
  background: #0f1e3a;
  border-color: #1e3a5f;
  color: #93c5fd;
}

body[data-theme="dark"] .admin-cand-right-info strong { color: #bfdbfe; }

/* ── Panneau d'invitation (admin_users) ─────────────────────────────────── */
.admin-invite-panel {
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  padding: 16px 20px;
  flex-shrink: 0;
}
.admin-invite-panel-form { width: 100%; }
.admin-invite-panel-fields {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
.admin-invite-panel-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 160px;
}
.admin-invite-panel-field label {
  font-size: 0.72rem;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.admin-invite-panel-field input,
.admin-invite-panel-field select {
  padding: 6px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 0.82rem;
  background: #fff;
  color: #1e293b;
}
body[data-theme="dark"] .admin-invite-panel {
  background: #16161a;
  border-color: #2e2e32;
}
body[data-theme="dark"] .admin-invite-panel-field input,
body[data-theme="dark"] .admin-invite-panel-field select {
  background: #1f1f22;
  border-color: #3c3c3c;
  color: #e2e8f0;
}

/* Sidebar footer */
.admin-dash-sidebar-footer {
  margin-top: auto;
  padding: 12px 16px;
  border-top: 1px solid #f1f5f9;
  font-size: 0.72rem;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 6px;
}
.admin-dash-sidebar-footer.is-ok    { color: #16a34a; }
.admin-dash-sidebar-footer.is-error { color: #dc2626; }

/* Toolbar clock */
.admin-dash-clock {
  font-size: 0.72rem;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ── Responsive ── */
@media (max-width: 1280px) {
  .admin-dash-kpi-row { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1080px) {
  .admin-dashboard-page {
    grid-template-columns: 1fr !important;
    height: auto;
    overflow: visible;
  }
  body:has(.admin-dashboard-page) { height: auto; overflow: visible; }
  body:has(.admin-dashboard-page) .site-footer { display: revert; }
  .site-main:has(.admin-dashboard-page) { overflow: visible; max-width: none; flex: none; }
  .admin-dash-content { overflow: visible; padding: 12px 12px 24px; }
  .admin-dash-kpi-row { grid-template-columns: repeat(2, 1fr); }
  .admin-dash-grid    { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .admin-dash-kpi-row { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .admin-dash-content { padding: 10px 10px 20px; gap: 12px; }
}

/* ── Dark mode ── */
body[data-theme="dark"] .admin-dash-content      { background: #17181a; }

body[data-theme="dark"] .admin-dash-kpi-card {
  background: #1f1f22;
  border-color: #3c3c3c;
  box-shadow: none;
}
body[data-theme="dark"] .admin-dash-kpi-card:hover { box-shadow: 0 3px 8px rgba(0,0,0,0.3); }
body[data-theme="dark"] .admin-dash-kpi-card.has-danger { background: rgba(239,68,68,0.07); border-color: rgba(239,68,68,0.3); }
body[data-theme="dark"] .admin-dash-kpi-value    { color: #f1f5f9; }
body[data-theme="dark"] .admin-dash-kpi-card.has-danger .admin-dash-kpi-value { color: #fca5a5; }
body[data-theme="dark"] .admin-dash-kpi-label    { color: #9da1a6; }
body[data-theme="dark"] .admin-dash-kpi-sub      { color: #64748b; }

body[data-theme="dark"] .admin-dash-section {
  background: #1f1f22;
  border-color: #3c3c3c;
  box-shadow: none;
}
body[data-theme="dark"] .admin-dash-section.has-danger { border-color: rgba(239,68,68,0.3); }
body[data-theme="dark"] .admin-dash-section-head  { border-bottom-color: #2d2d30; }
body[data-theme="dark"] .admin-dash-section-title { color: #d1d5db; }
body[data-theme="dark"] .admin-dash-section-link  { color: #64748b; }
body[data-theme="dark"] .admin-dash-section-link:hover { color: #60a5fa; }

body[data-theme="dark"] .admin-dash-mini-row { border-bottom-color: #252526; }
body[data-theme="dark"] .admin-dash-mini-row:hover { background: #252526; }
body[data-theme="dark"] .admin-dash-mini-title { color: #d1d5db; }
body[data-theme="dark"] .admin-dash-mini-title a:hover { color: #60a5fa; }
body[data-theme="dark"] .admin-dash-mini-meta  { color: #64748b; }
body[data-theme="dark"] .admin-dash-mini-city  { color: #64748b; }
body[data-theme="dark"] .admin-dash-empty      { color: #64748b; }

body[data-theme="dark"] .admin-dash-nav-section { color: #64748b; }
body[data-theme="dark"] .admin-dash-nav-link { border-bottom-color: #252526; }
body[data-theme="dark"] .admin-dash-nav-link:hover { background: #2a2a2d; }
body[data-theme="dark"] .admin-dash-nav-arrow  { color: #3c3c3c; }
body[data-theme="dark"] .admin-dash-nav-badge  { background: rgba(239,68,68,0.15); color: #fca5a5; }

body[data-theme="dark"] .admin-dash-sidebar-footer { border-top-color: #2d2d30; color: #64748b; }
body[data-theme="dark"] .admin-dash-sidebar-footer.is-ok    { color: #86efac; }
body[data-theme="dark"] .admin-dash-sidebar-footer.is-error { color: #fca5a5; }

body[data-theme="dark"] .admin-dash-clock { color: #64748b; }

/* Admin options */
.admin-options-page .admin-users-main {
  min-width: 0;
}

.admin-options-form {
  display: block;
  overflow-y: auto;
  min-height: 0;
}

.admin-options-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.admin-options-panel,
.admin-options-preview {
  min-width: 0;
}

.admin-options-preview {
  grid-column: 1 / -1;
}

.admin-options-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 9px;
  border-radius: 999px;
  background: #eef3f8;
  color: #475569;
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
}

.admin-options-fields {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.admin-options-fields .field-group {
  margin: 0;
}

.admin-options-fields label {
  color: #334155;
  font-size: 0.82rem;
  font-weight: 800;
}

.admin-options-fields input[type="url"],
.admin-options-fields input[type="number"],
.admin-options-fields input[type="text"],
.admin-options-fields input[type="file"],
.admin-options-fields select {
  width: 100%;
  min-height: 38px;
  border: 1px solid #dbe3ea;
  border-radius: 8px;
  background: #ffffff;
  color: #0f172a;
  font-size: 0.88rem;
}

.admin-options-fields input[type="url"],
.admin-options-fields input[type="number"],
.admin-options-fields input[type="text"],
.admin-options-fields select {
  padding: 8px 10px;
}

.admin-options-color-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.admin-options-fields input[type="color"] {
  width: 52px;
  height: 38px;
  padding: 3px;
  border: 1px solid #dbe3ea;
  border-radius: 8px;
  background: #ffffff;
  cursor: pointer;
}

.admin-options-inline-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.admin-options-checks {
  display: grid;
  gap: 8px;
}

.admin-options-check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 9px 11px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f8fafc;
  color: #334155;
  font-size: 0.86rem;
  font-weight: 700;
}

.admin-options-check input {
  width: 16px;
  height: 16px;
  accent-color: #2563eb;
}

.admin-options-save-chip {
  gap: 7px;
  border-color: #2563eb;
  background: #2563eb;
  color: #ffffff;
  cursor: pointer;
}

.admin-options-save-chip:hover {
  background: #1d4ed8;
  color: #ffffff;
}

.admin-options-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 16px;
}

.admin-options-preview-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #ffffff;
}

.admin-options-inline-preview {
  margin-top: 2px;
}

.admin-options-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid #eef2f7;
}

.admin-options-preview-head strong {
  color: #0f172a;
  font-size: 0.9rem;
}

.admin-options-preview-head span,
.admin-options-preview-card p,
.admin-options-preview-meta {
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 700;
}

.admin-options-preview-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  background: #f8fafc;
}

.admin-options-preview-card p {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 10px 12px;
  overflow-wrap: anywhere;
}

.admin-options-preview-meta {
  display: block;
  color: #475569;
}

.admin-options-empty-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 180px;
  padding: 18px;
  color: #94a3b8;
  font-size: 0.88rem;
  font-weight: 800;
}

.admin-options-empty-preview i {
  font-size: 1.2rem;
}

body[data-theme="dark"] .admin-options-status {
  background: #27272a;
  color: #a1a1aa;
}

body[data-theme="dark"] .admin-options-fields label,
body[data-theme="dark"] .admin-options-check,
body[data-theme="dark"] .admin-options-preview-head strong {
  color: #d1d5db;
}

body[data-theme="dark"] .admin-options-fields input[type="url"],
body[data-theme="dark"] .admin-options-fields input[type="number"],
body[data-theme="dark"] .admin-options-fields input[type="text"],
body[data-theme="dark"] .admin-options-fields input[type="color"],
body[data-theme="dark"] .admin-options-fields input[type="file"],
body[data-theme="dark"] .admin-options-fields select {
  border-color: #3c3c3c;
  background: #111827;
  color: #f1f5f9;
}

body[data-theme="dark"] .admin-options-check,
body[data-theme="dark"] .admin-options-preview-card {
  border-color: #2d2d30;
  background: #18181b;
}

body[data-theme="dark"] .admin-options-preview-head {
  border-bottom-color: #2d2d30;
}

body[data-theme="dark"] .admin-options-preview-head span,
body[data-theme="dark"] .admin-options-preview-card p,
body[data-theme="dark"] .admin-options-preview-meta,
body[data-theme="dark"] .admin-options-empty-preview {
  color: #94a3b8;
}

@media (max-width: 980px) {
  .admin-options-grid,
  .admin-options-preview-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .admin-options-inline-fields {
    grid-template-columns: 1fr;
  }

  .admin-options-save-chip {
    width: 100%;
    justify-content: center;
  }
}
/* Search pagination */
.search-results-page-state {
  margin-left: auto;
  color: #8a6b5c;
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
}

.pagination-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 18px 8px 4px;
}

.pagination-btn {
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid #ead7cc;
  border-radius: 999px;
  background: #fffaf7;
  color: #5b463b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: 800;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
}

.pagination-btn:hover {
  background: #f5e7de;
  border-color: #dc6330;
  color: #dc6330;
  text-decoration: none;
  transform: translateY(-1px);
}

.pagination-btn-active,
.pagination-btn[aria-current="page"] {
  background: #dc6330;
  border-color: #dc6330;
  color: #fff;
}

.pagination-ellipsis {
  color: #9b7a68;
  font-weight: 800;
  padding: 0 2px;
}

body[data-theme="dark"] .search-results-page-state,
body[data-theme="dark"] .pagination-ellipsis {
  color: #9da1a6;
}

body[data-theme="dark"] .pagination-btn {
  background: #252526;
  border-color: #3c3c3c;
  color: #e2e8f0;
}

body[data-theme="dark"] .pagination-btn:hover {
  background: #2d2d30;
  border-color: #dc6330;
  color: #ffb38f;
}

body[data-theme="dark"] .pagination-btn-active,
body[data-theme="dark"] .pagination-btn[aria-current="page"] {
  background: #dc6330;
  border-color: #dc6330;
  color: #fff;
}

@media (max-width: 640px) {
  .search-results-page-state {
    width: 100%;
    margin-left: 0;
  }

  .pagination-nav {
    justify-content: flex-start;
    padding-top: 14px;
  }
}

/* Header logo vertical alignment */
.header-top .header-brand {
  align-self: stretch;
  justify-content: center;
}

.header-top .site-logo,
.header-top .site-logo-link {
  display: flex;
  align-items: center;
}

/* Slightly slimmer main header */
@media (min-width: 981px) {
  .header-shell {
    padding: 5px 0;
  }

  .header-top {
    min-height: 48px;
  }

  .site-logo-link {
    height: 38px;
    min-height: 38px;
  }

  .site-logo-inline {
    height: 27px;
  }

  .header-nav-main {
    padding: 3px;
  }

  .nav-main-link {
    min-height: 34px;
    padding: 0 12px;
    font-size: 0.9rem;
  }

  .theme-toggle,
  .header-icon-btn,
  .header-nav-toggle,
  .header-nav-close,
  .user-menu-trigger {
    min-height: 34px;
  }
}

/* Compact but balanced right column on search page */
.search-page-side {
  gap: 12px;
}

.search-page-side .search-page-panel,
.search-page-side .search-latest-panel,
.search-page-side .search-request-panel,
.search-page-side .search-propose-panel {
  padding: 14px;
  border-radius: 16px;
}

.search-page-side .search-panel-head {
  margin-bottom: 8px;
}

.search-page-side .search-panel-head h3,
.search-page-side .search-request-panel h3,
.search-page-side .search-propose-panel h3 {
  margin-top: 0;
  font-size: 1rem;
  line-height: 1.15;
}

.search-page-side .search-request-panel p,
.search-page-side .search-propose-panel p {
  margin-top: 6px;
  margin-bottom: 4px;
  line-height: 1.38;
  font-size: 0.9rem;
}

.search-page-side .search-latest-songs {
  gap: 2px;
}

.search-page-side .search-latest-item {
  grid-template-columns: minmax(0, 1fr) 42px;
  gap: 8px;
  padding: 7px 0;
}

.search-page-side .search-latest-item .latest-song-title a {
  font-size: 0.92rem;
  line-height: 1.2;
}

.search-page-side .search-latest-item .latest-song-meta,
.search-page-side .latest-song-date {
  font-size: 0.78rem;
  line-height: 1.25;
}

.search-page-side .search-latest-item .latest-song-cover {
  width: 42px;
  height: 42px;
  border-radius: 9px;
}

.search-page-side .btn-ask-song,
.search-page-side .search-request-panel .btn-ask-song {
  min-height: 36px;
  margin-top: 10px;
  padding: 0 14px;
  font-size: 0.86rem;
}

.search-propose-panel .btn-ask-song {
  background: #173f68;
  color: #fff;
}

.search-propose-panel .btn-ask-song:hover {
  background: #245f95;
  color: #fff;
}

body[data-theme="dark"] .search-propose-panel .btn-ask-song {
  background: #2563eb;
  color: #fff;
}

body[data-theme="dark"] .search-propose-panel .btn-ask-song:hover {
  background: #60a5fa;
  color: #0f172a;
}

.public-lyrics-intro {
  margin: 16px 0 0;
  max-width: 780px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(72px, 9vw, 108px);
  align-items: stretch;
  gap: 18px;
  padding: 16px;
  border: 1px solid rgba(217,85,40,0.14);
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, rgba(217,85,40,0.10), transparent 42%),
    rgba(255,255,255,0.58);
  box-shadow: 0 8px 30px rgba(180,100,40,0.08);
  color: #1a0e06;
  font-family: var(--km-title-font);
  font-weight: 400;
  font-size: clamp(0.98rem, 1.18vw, 1.08rem);
  line-height: 1.5;
}

.public-lyrics-intro-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  border-radius: 14px;
  background: #fff;
  color: #8a7f75;
  line-height: 1;
}

.public-lyrics-intro-arrow i {
  font-size: clamp(2.5rem, 5vw, 4.6rem);
  line-height: 1;
}

.public-lyrics-page {
  padding: 12px 40px 56px;
}

.public-lyrics-page .cfr-hero,
.public-lyrics-page .cfr-layout,
.public-lyrics-page .cfr-notices {
  width: min(1100px, 100%);
  max-width: none;
  margin-inline: auto;
  padding-left: 0;
  padding-right: 0;
}

.public-lyrics-page .cfr-hero {
  padding-top: 0;
  padding-bottom: 28px;
}

.public-lyrics-page .cfr-hero-inner {
  max-width: 920px;
}

.public-lyrics-page .cfr-layout {
  padding-top: 0;
  padding-bottom: 64px;
}

.public-lyrics-page .cfr-eyebrow {
  margin-top: 0;
}

.public-lyrics-page .cfr-form-grid {
  align-items: stretch;
}

.public-lyrics-page .cfr-col-left {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.public-lyrics-page .cfr-col-left .cfr-card {
  margin-bottom: 0;
}

.public-lyrics-submit-card {
  background: #fff;
}

.public-lyrics-submit-card .cfr-card-head {
  margin-bottom: 14px;
}

.public-lyrics-submit-card .cfr-action-row,
.public-lyrics-submit-card .cfr-btn {
  width: 100%;
}

.public-lyrics-submit-card .cfr-btn {
  justify-content: center;
  min-height: 48px;
  box-shadow: 0 14px 26px rgba(217,85,40,0.20);
}

.public-lyrics-form .contrib-lyrics-workbench textarea {
  min-height: 430px;
  line-height: 1.65;
  resize: vertical;
}

.public-lyrics-comment-field {
  margin-top: 18px;
}

.public-lyrics-cover-preview {
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid rgba(214, 94, 44, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
}

.public-lyrics-cover-preview img {
  display: block;
  width: 100%;
  max-height: 220px;
  object-fit: cover;
}

.public-lyrics-page .cfr-lyrics-card {
  min-height: 100%;
}

.public-lyrics-page .contrib-lyrics-workbench textarea::placeholder {
  color: #6e7f98;
}

body[data-theme="dark"] .public-lyrics-intro {
  border-color: rgba(217,85,40,0.18);
  background:
    radial-gradient(circle at top right, rgba(217,85,40,0.12), transparent 44%),
    rgba(20,10,2,0.72);
  box-shadow: 0 8px 30px rgba(0,0,0,0.22);
  color: #efe4d6;
}

body[data-theme="dark"] .public-lyrics-intro-arrow {
  border: 1px solid rgba(217,85,40,0.18);
  background: rgba(255,255,255,0.07);
  color: #a8998c;
}

body[data-theme="dark"] .public-lyrics-submit-card {
  background:
    radial-gradient(circle at top right, rgba(217,85,40,0.10), transparent 44%),
    rgba(20,10,2,0.72);
  border-color: rgba(217,85,40,0.14);
}

body[data-theme="dark"] .public-lyrics-page .cfr-card {
  background:
    radial-gradient(circle at top right, rgba(217,85,40,0.08), transparent 44%),
    rgba(20,10,2,0.72);
  border-color: rgba(217,85,40,0.12);
}

body[data-theme="dark"] .public-lyrics-page .cfr-card-hint,
body[data-theme="dark"] .public-lyrics-page .field-help,
body[data-theme="dark"] .public-lyrics-page label {
  color: #bfa990;
}

body[data-theme="dark"] .public-lyrics-page .cfr-form input[type="text"],
body[data-theme="dark"] .public-lyrics-page .cfr-form input[type="url"],
body[data-theme="dark"] .public-lyrics-page .cfr-form textarea {
  background: rgba(255,255,255,0.075);
  border-color: rgba(217,85,40,0.14);
  color: #f2e6d8;
}

body[data-theme="dark"] .public-lyrics-page .cfr-form input::placeholder,
body[data-theme="dark"] .public-lyrics-page .cfr-form textarea::placeholder {
  color: #8f7f70;
}

/* Devenir kontributeur */
.site-main:has(.become-contrib-page) {
  max-width: 100%;
  padding: 0;
}

.become-contrib-page {
  min-height: calc(100vh - 56px);
  padding: 12px 40px 72px;
  background: #fffaf3;
  background-image:
    radial-gradient(ellipse at 78% 8%, rgba(217,85,40,0.22) 0%, transparent 52%),
    radial-gradient(ellipse at 12% 92%, rgba(40,120,95,0.10) 0%, transparent 45%);
}

.become-contrib-hero,
.become-contrib-grid,
.become-contrib-auth {
  width: min(1100px, 100%);
  margin-inline: auto;
}

.become-contrib-hero {
  padding: 0 0 26px;
}

.become-contrib-hero h1 {
  max-width: 760px;
  margin: 14px 0 12px;
  color: #1a0e06;
  font-family: var(--km-title-font);
  font-size: clamp(2.6rem, 5vw, 5rem);
  font-weight: 500;
  line-height: 0.96;
  letter-spacing: 0;
}

.become-contrib-hero p {
  max-width: 680px;
  margin: 0;
  color: #706050;
  font-size: 1.02rem;
  line-height: 1.7;
}

.become-contrib-volunteer-note,
.apply-contrib-volunteer-note {
  display: inline-flex;
  max-width: 720px;
  margin-top: 14px;
  padding: 10px 14px;
  border: 1px solid rgba(217,85,40,0.16);
  border-radius: 14px;
  background: rgba(255,255,255,0.68);
  color: #1a0e06;
  font-size: 0.95rem;
  font-weight: 900;
  line-height: 1.45;
}

.become-contrib-auth {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
  padding: 16px;
  border: 1px solid rgba(217,85,40,0.14);
  border-radius: 18px;
  background: rgba(255,255,255,0.70);
  box-shadow: 0 10px 28px rgba(180,100,40,0.08);
}

.become-contrib-auth div:first-child {
  display: grid;
  gap: 4px;
}

.become-contrib-auth strong {
  color: #1a0e06;
  font-size: 1rem;
  font-weight: 900;
}

.become-contrib-auth span {
  color: #706050;
  line-height: 1.45;
}

.become-contrib-auth-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.become-contrib-auth-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid rgba(217,85,40,0.20);
  border-radius: 999px;
  color: #d95528;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}

.become-contrib-auth-link.is-primary {
  background: #d95528;
  color: #fff;
  border-color: #d95528;
}

.become-contrib-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.become-contrib-card {
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 260px;
  padding: 24px;
  border: 1px solid rgba(255,255,255,0.92);
  border-radius: 22px;
  background: rgba(255,255,255,0.72);
  box-shadow: 0 12px 34px rgba(180,100,40,0.10);
  color: inherit;
  text-decoration: none;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.become-contrib-card:hover {
  transform: translateY(-3px);
  border-color: rgba(217,85,40,0.28);
  box-shadow: 0 18px 42px rgba(180,100,40,0.14);
}

.become-contrib-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 18px;
  border-radius: 16px;
  background: rgba(217,85,40,0.12);
  color: #d95528;
  font-size: 1.25rem;
}

.become-contrib-card h2 {
  margin: 0 0 10px;
  color: #1a0e06;
  font-size: 1.08rem;
  font-weight: 900;
  line-height: 1.2;
}

.become-contrib-card p {
  margin: 0;
  color: #706050;
  font-size: 0.95rem;
  line-height: 1.62;
}

.become-contrib-card-cue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 34px;
  height: 34px;
  margin-top: auto;
  border-radius: 999px;
  background: rgba(217,85,40,0.10);
  color: #d95528;
  transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.become-contrib-card:hover .become-contrib-card-cue {
  background: #d95528;
  color: #fff;
  transform: translateY(2px);
}

.become-contrib-details {
  width: min(1100px, 100%);
  margin: 26px auto 0;
  display: grid;
  gap: 16px;
}

.become-contrib-detail {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(300px, 1fr) 190px;
  gap: 18px;
  align-items: stretch;
  padding: 18px;
  border: 1px solid rgba(255,255,255,0.92);
  border-radius: 24px;
  background: rgba(255,255,255,0.72);
  box-shadow: 0 12px 34px rgba(180,100,40,0.10);
  scroll-margin-top: 86px;
}

.become-contrib-detail-main {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 10px;
}

.become-contrib-detail h2 {
  margin: 0 0 8px;
  color: #1a0e06;
  font-size: 1.28rem;
  font-weight: 900;
}

.become-contrib-detail p {
  margin: 0;
  color: #706050;
  line-height: 1.58;
}

.become-contrib-missions {
  padding: 18px;
  border: 1px solid rgba(217,85,40,0.12);
  border-radius: 18px;
  background: rgba(255,250,243,0.78);
}

.become-contrib-missions h3 {
  margin: 0 0 12px;
  color: #d95528;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.become-contrib-missions ul,
.apply-contrib-conditions ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.become-contrib-missions li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 8px;
  color: #706050;
  line-height: 1.46;
}

.become-contrib-missions li::before {
  content: "\F26E";
  font-family: "bootstrap-icons";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 999px;
  background: rgba(217,85,40,0.12);
  color: #d95528;
  font-size: 0.78rem;
  line-height: 1;
}

.become-contrib-detail-action {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  padding: 18px;
  border-radius: 18px;
  background: #fff;
}

.become-contrib-detail-action span {
  color: #706050;
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.35;
}

.become-contrib-apply-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: #d95528;
  color: #fff;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
}

.become-contrib-apply-btn:hover {
  background: #c84f22;
  color: #fff;
}

.become-contrib-apply-btn:disabled,
.become-contrib-apply-btn[disabled] {
  cursor: not-allowed;
  opacity: 0.48;
  box-shadow: none;
}

.become-contrib-applied-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: auto;
  padding: 4px 11px;
  border-radius: 20px;
  font-size: .72rem;
  font-weight: 700;
  color: #166534;
  background: #dcfce7;
  border: 1px solid #bbf7d0;
  white-space: nowrap;
}

.become-contrib-card.is-applied {
  opacity: .88;
  cursor: default;
  pointer-events: none;
}

.become-contrib-applied-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 24px;
  font-size: .82rem;
  font-weight: 700;
  color: #166534;
  background: #dcfce7;
  border: 1px solid #bbf7d0;
}

body[data-theme="dark"] .become-contrib-applied-badge,
body[data-theme="dark"] .become-contrib-applied-state {
  background: #052e16;
  color: #4ade80;
  border-color: #14532d;
}

body[data-theme="dark"] .become-contrib-card.is-applied {
  opacity: .72;
}

.site-main:has(.apply-contrib-page) {
  max-width: 100%;
  padding: 0;
}

.apply-contrib-page {
  min-height: calc(100vh - 56px);
  padding: 34px 40px 72px;
  background: #fffaf3;
  background-image:
    radial-gradient(ellipse at 78% 8%, rgba(217,85,40,0.22) 0%, transparent 52%),
    radial-gradient(ellipse at 12% 92%, rgba(40,120,95,0.10) 0%, transparent 45%);
}

.apply-contrib-shell {
  width: min(920px, 100%);
  margin: 0 auto;
}

.apply-contrib-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 16px;
  color: #907060;
  font-weight: 900;
  text-decoration: none;
}

.apply-contrib-back:hover {
  color: #d95528;
}

.apply-contrib-card {
  padding: 28px;
  border: 1px solid rgba(255,255,255,0.92);
  border-radius: 24px;
  background: rgba(255,255,255,0.76);
  box-shadow: 0 16px 44px rgba(180,100,40,0.12);
}

.apply-contrib-head {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  margin-bottom: 24px;
}

.apply-contrib-head h1 {
  margin: 8px 0 10px;
  color: #1a0e06;
  font-family: var(--km-title-font);
  font-size: clamp(2.2rem, 4vw, 4rem);
  font-weight: 500;
  line-height: 0.98;
}

.apply-contrib-head p {
  margin: 0;
  max-width: 680px;
  color: #706050;
  line-height: 1.7;
}

.apply-contrib-notice {
  margin-bottom: 18px;
}

.apply-contrib-success {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 18px 20px;
  border-radius: 18px;
  font-size: 1.08rem;
  font-weight: 900;
  line-height: 1.5;
}

.apply-contrib-success i {
  margin-top: 3px;
  font-size: 1.35rem;
}

.apply-contrib-conditions {
  padding: 20px;
  border-radius: 18px;
  background: rgba(255,250,243,0.82);
  border: 1px solid rgba(217,85,40,0.12);
}

.apply-contrib-conditions h2 {
  margin: 0 0 14px;
  color: #1a0e06;
  font-size: 1.08rem;
  font-weight: 900;
}

.apply-contrib-conditions li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 8px;
  color: #706050;
  line-height: 1.5;
}

.apply-contrib-conditions li i {
  color: #d95528;
  font-size: 1rem;
  line-height: 1.5;
}

.apply-contrib-form {
  display: grid;
  gap: 16px;
  margin-top: 18px;
}

.apply-contrib-check {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 16px;
  border: 1px solid rgba(217,85,40,0.16);
  border-radius: 16px;
  background: rgba(255,255,255,0.72);
  color: #1a0e06;
  font-weight: 800;
  cursor: pointer;
}

.apply-contrib-check input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: #d95528;
}

.apply-contrib-submit {
  justify-self: start;
  min-width: 180px;
}

.apply-contrib-login {
  display: grid;
  gap: 8px;
  padding: 16px;
  border-radius: 16px;
  background: rgba(255,255,255,0.72);
  color: #706050;
}

/* Bandeau "appel/visio obligatoire" */
.apply-contrib-visio-notice {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  align-items: start;
  padding: 16px 18px;
  border-radius: 14px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  margin-bottom: 24px;
}

.apply-contrib-visio-notice > i {
  font-size: 1.35rem;
  color: #b45309;
  margin-top: 2px;
}

.apply-contrib-visio-notice strong {
  display: block;
  font-size: .93rem;
  color: #92400e;
  margin-bottom: 4px;
}

.apply-contrib-visio-notice p {
  margin: 0;
  font-size: .85rem;
  color: #a16207;
  line-height: 1.55;
}

/* Champs du formulaire */
.apply-contrib-field {
  display: grid;
  gap: 6px;
}

.apply-contrib-label {
  font-size: .9rem;
  font-weight: 700;
  color: #1a0e06;
}

.apply-contrib-required {
  color: #d95528;
  margin-left: 2px;
}

.apply-contrib-field-hint {
  margin: 0;
  font-size: .81rem;
  color: #706050;
  line-height: 1.5;
}

.apply-contrib-textarea {
  width: 100%;
  min-height: 180px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #e0cfc2;
  background: #fff;
  font-size: .92rem;
  font-family: inherit;
  color: #1a0e06;
  line-height: 1.6;
  resize: vertical;
  box-sizing: border-box;
  transition: border-color .15s;
}

.apply-contrib-textarea:focus {
  outline: none;
  border-color: #d95528;
  box-shadow: 0 0 0 3px rgba(217,85,40,.12);
}

.apply-contrib-char-count {
  font-size: .78rem;
  color: #a09080;
  text-align: right;
}

/* Champ téléphone avec icône WhatsApp */
.apply-contrib-phone-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.apply-contrib-phone-icon {
  position: absolute;
  left: 13px;
  font-size: 1.1rem;
  color: #25d366;
  pointer-events: none;
}

.apply-contrib-phone-input {
  width: 100%;
  padding: 10px 14px 10px 38px;
  border-radius: 12px;
  border: 1px solid #e0cfc2;
  background: #fff;
  font-size: .92rem;
  font-family: inherit;
  color: #1a0e06;
  box-sizing: border-box;
  transition: border-color .15s;
}

.apply-contrib-phone-input:focus {
  outline: none;
  border-color: #d95528;
  box-shadow: 0 0 0 3px rgba(217,85,40,.12);
}

/* Modes de contact */
.apply-contrib-modes-field {
  border: none;
  padding: 0;
  margin: 0;
}

.apply-contrib-modes-field > .apply-contrib-label {
  display: block;
}

.apply-contrib-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.apply-contrib-mode-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 24px;
  border: 1.5px solid #e0cfc2;
  background: #fff;
  font-size: .88rem;
  font-weight: 600;
  color: #4a3828;
  cursor: pointer;
  user-select: none;
  transition: border-color .14s, background .14s, color .14s;
}

.apply-contrib-mode-option input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.apply-contrib-mode-option:hover {
  border-color: #d95528;
  background: #fff7f4;
}

.apply-contrib-mode-option.is-checked {
  border-color: #d95528;
  background: #fff1eb;
  color: #c84422;
}

.apply-contrib-mode-icon {
  font-size: 1rem;
  line-height: 1;
  color: #9a8070;
  transition: color .14s;
}

.apply-contrib-mode-option.is-checked .apply-contrib-mode-icon {
  color: #d95528;
}

.apply-contrib-mode-icon--whatsapp {
  color: #25d366;
}

.apply-contrib-mode-option.is-checked .apply-contrib-mode-icon--whatsapp {
  color: #16a34a;
}

/* Icône téléphone dans le champ phone : orange neutre */
.apply-contrib-phone-icon.bi-telephone-fill {
  color: #d95528;
}

/* Dark mode */
body[data-theme="dark"] .apply-contrib-visio-notice {
  background: #1c1200;
  border-color: rgba(251,191,36,.18);
}

body[data-theme="dark"] .apply-contrib-visio-notice strong {
  color: #fcd34d;
}

body[data-theme="dark"] .apply-contrib-visio-notice p {
  color: #d4a520;
}

body[data-theme="dark"] .apply-contrib-label {
  color: #efe4d6;
}

body[data-theme="dark"] .apply-contrib-field-hint,
body[data-theme="dark"] .apply-contrib-char-count {
  color: #9a8070;
}

body[data-theme="dark"] .apply-contrib-textarea,
body[data-theme="dark"] .apply-contrib-phone-input {
  background: rgba(255,255,255,0.05);
  border-color: rgba(217,85,40,.22);
  color: #efe4d6;
}

body[data-theme="dark"] .apply-contrib-textarea:focus,
body[data-theme="dark"] .apply-contrib-phone-input:focus {
  border-color: #d95528;
  box-shadow: 0 0 0 3px rgba(217,85,40,.18);
}

body[data-theme="dark"] .apply-contrib-mode-option {
  background: rgba(255,255,255,.05);
  border-color: rgba(217,85,40,.2);
  color: #c8a888;
}

body[data-theme="dark"] .apply-contrib-mode-option:hover {
  border-color: #d95528;
  background: rgba(217,85,40,.1);
}

body[data-theme="dark"] .apply-contrib-mode-option.is-checked {
  background: rgba(217,85,40,.16);
  border-color: #d95528;
  color: #f0a060;
}

.apply-contrib-login strong {
  color: #1a0e06;
}

body[data-theme="dark"] .become-contrib-page {
  background-color: #120a04;
  background-image:
    radial-gradient(ellipse at 78% 8%, rgba(217,85,40,0.18) 0%, transparent 52%),
    radial-gradient(ellipse at 12% 92%, rgba(40,120,95,0.08) 0%, transparent 45%);
}

body[data-theme="dark"] .become-contrib-hero h1,
body[data-theme="dark"] .become-contrib-card h2,
body[data-theme="dark"] .become-contrib-detail h2,
body[data-theme="dark"] .apply-contrib-head h1,
body[data-theme="dark"] .apply-contrib-conditions h2,
body[data-theme="dark"] .become-contrib-auth strong,
body[data-theme="dark"] .apply-contrib-login strong {
  color: #efe4d6;
}

body[data-theme="dark"] .become-contrib-hero p,
body[data-theme="dark"] .become-contrib-card p,
body[data-theme="dark"] .become-contrib-detail p,
body[data-theme="dark"] .become-contrib-missions li,
body[data-theme="dark"] .become-contrib-detail-action span,
body[data-theme="dark"] .become-contrib-auth span,
body[data-theme="dark"] .apply-contrib-head p,
body[data-theme="dark"] .apply-contrib-conditions li,
body[data-theme="dark"] .apply-contrib-login {
  color: #bfa990;
}

body[data-theme="dark"] .become-contrib-volunteer-note,
body[data-theme="dark"] .apply-contrib-volunteer-note {
  border-color: rgba(217,85,40,0.18);
  background: rgba(255,255,255,0.06);
  color: #efe4d6;
}

body[data-theme="dark"] .become-contrib-card,
body[data-theme="dark"] .become-contrib-detail,
body[data-theme="dark"] .apply-contrib-card {
  border-color: rgba(217,85,40,0.12);
  background:
    radial-gradient(circle at top right, rgba(217,85,40,0.08), transparent 44%),
    rgba(20,10,2,0.72);
  box-shadow: 0 14px 34px rgba(0,0,0,0.24);
}

body[data-theme="dark"] .become-contrib-icon {
  background: rgba(217,85,40,0.14);
  color: #f0a060;
}

body[data-theme="dark"] .apply-contrib-back {
  color: #f0a060;
}

body[data-theme="dark"] .become-contrib-missions {
  border-color: rgba(217,85,40,0.14);
  background: rgba(255,255,255,0.045);
}

body[data-theme="dark"] .become-contrib-auth {
  border-color: rgba(217,85,40,0.14);
  background: rgba(20,10,2,0.72);
  box-shadow: 0 14px 34px rgba(0,0,0,0.24);
}

body[data-theme="dark"] .become-contrib-auth-link {
  border-color: rgba(217,85,40,0.24);
  color: #f0a060;
}

body[data-theme="dark"] .become-contrib-auth-link.is-primary {
  color: #fff;
}

body[data-theme="dark"] .become-contrib-detail-action {
  background: rgba(255,255,255,0.055);
}

body[data-theme="dark"] .become-contrib-card-cue {
  background: rgba(217,85,40,0.14);
  color: #f0a060;
}

body[data-theme="dark"] .apply-contrib-page {
  background-color: #120a04;
  background-image:
    radial-gradient(ellipse at 78% 8%, rgba(217,85,40,0.18) 0%, transparent 52%),
    radial-gradient(ellipse at 12% 92%, rgba(40,120,95,0.08) 0%, transparent 45%);
}

body[data-theme="dark"] .apply-contrib-conditions,
body[data-theme="dark"] .apply-contrib-check,
body[data-theme="dark"] .apply-contrib-login {
  border-color: rgba(217,85,40,0.14);
  background: rgba(255,255,255,0.06);
}

body[data-theme="dark"] .apply-contrib-check {
  color: #efe4d6;
}

@media (max-width: 980px) {
  .become-contrib-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .become-contrib-detail {
    grid-template-columns: 1fr;
  }

  .become-contrib-detail-action {
    flex-direction: row;
    align-items: center;
  }
}

@media (max-width: 640px) {
  .become-contrib-page,
  .apply-contrib-page {
    padding: 24px 16px 48px;
  }

  .become-contrib-grid {
    grid-template-columns: 1fr;
  }

  .become-contrib-auth {
    align-items: stretch;
    flex-direction: column;
  }

  .become-contrib-detail-action {
    flex-direction: column;
    align-items: stretch;
  }

  .apply-contrib-card {
    padding: 20px 16px;
    border-radius: 20px;
  }

  .apply-contrib-head {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .public-lyrics-page {
    padding: 12px 24px 48px;
  }

  .public-lyrics-page .cfr-hero {
    padding-bottom: 22px;
  }
}

@media (max-width: 640px) {
  .public-lyrics-page {
    padding: 10px 16px 42px;
  }

  .public-lyrics-page .cfr-hero {
    padding-bottom: 18px;
  }

  .public-lyrics-intro {
    grid-template-columns: minmax(0, 1fr) 64px;
    gap: 12px;
  }
}

/* Donn la min */
.donn-main-page {
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: 34px 0 72px;
}

.donn-hero {
  text-align: center;
  padding: 34px 20px 26px;
}

.donn-hero h2 {
  max-width: 780px;
  margin: 14px auto 12px;
  color: #20130f;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(2.2rem, 5vw, 4.4rem);
  line-height: 0.98;
  letter-spacing: 0;
}

.donn-hero p {
  max-width: 680px;
  margin: 0 auto;
  color: #7d6b60;
  font-size: 1.05rem;
  font-weight: 700;
}

.donn-action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  margin: 30px auto 0;
  max-width: 980px;
}

.donn-action-card {
  min-height: 168px;
  padding: 24px;
  border: 1px solid rgba(220, 99, 48, 0.22);
  border-radius: 8px;
  background: rgba(255, 250, 247, 0.92);
  box-shadow: 0 18px 44px rgba(57, 38, 28, 0.08);
  color: #2b1912;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  text-align: left;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.donn-action-card:hover {
  transform: translateY(-2px);
  border-color: rgba(220, 99, 48, 0.55);
  box-shadow: 0 22px 54px rgba(57, 38, 28, 0.12);
  text-decoration: none;
}

.donn-action-icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: #fff0e8;
  color: #dc6330;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}

.donn-action-card strong {
  margin-top: 16px;
  font-size: 1.24rem;
  color: #17110e;
}

.donn-action-card span:last-child {
  color: #80675b;
  font-weight: 700;
}

.donn-message {
  margin: 0 auto 18px;
  padding: 14px 16px;
  border-radius: 8px;
  max-width: 920px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 800;
}

.donn-message ul {
  margin: 0;
  padding-left: 18px;
}

.donn-message.is-success {
  background: #edf8f1;
  color: #166534;
  border: 1px solid #bbebc9;
}

.donn-message.is-error {
  background: #fff1f0;
  color: #9f1d1d;
  border: 1px solid #ffd0cb;
}

.donn-section {
  padding: 34px 0 10px;
}

.donn-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.donn-section-head h3 {
  margin: 8px 0 0;
  color: #20130f;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.8rem, 3.2vw, 3rem);
  line-height: 1.02;
  letter-spacing: 0;
}

.donn-counter {
  min-width: 132px;
  padding: 14px 16px;
  border-radius: 8px;
  background: #173f68;
  color: #fff;
  text-align: center;
}

.donn-counter strong {
  display: block;
  font-size: 2rem;
  line-height: 1;
}

.donn-counter span {
  display: block;
  margin-top: 4px;
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.donn-split {
  display: grid;
  grid-template-columns: minmax(300px, 0.86fr) minmax(0, 1.14fr);
  gap: 18px;
  align-items: start;
}

.donn-form,
.donn-list-panel,
.donn-stat {
  border: 1px solid rgba(220, 99, 48, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 12px 34px rgba(57, 38, 28, 0.06);
}

.donn-form {
  padding: 20px;
}

.donn-form h4,
.donn-list-panel h4 {
  margin: 0 0 16px;
  color: #20130f;
  font-size: 1.05rem;
}

.donn-competence-callout > input,
.donn-competence-callout > .field-inline,
.donn-competence-callout > .field-group,
.donn-competence-callout > button,
.donn-competence-callout > h4:not(.donn-callout-title) {
  display: none;
}

.donn-competence-callout p {
  margin: 0 0 18px;
  color: #5f514b;
  font-weight: 700;
}

.donn-form textarea {
  min-height: 118px;
  resize: vertical;
}

.donn-submit {
  width: 100%;
  min-height: 46px;
  border: 0;
  border-radius: 999px;
  background: #dc6330;
  color: #fff;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s ease, background 0.15s ease;
}

.donn-submit:hover {
  background: #c84e20;
  transform: translateY(-1px);
  text-decoration: none;
}

.donn-list-panel {
  padding: 18px;
}

.donn-list-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.donn-list-panel-head h4 {
  margin-bottom: 0;
}

.donn-list-panel-head span {
  color: #8a6b5c;
  font-size: 0.82rem;
  font-weight: 900;
}

.donn-empty {
  margin: 0;
  color: #7d6b60;
  font-weight: 700;
}

.donn-skill-list {
  display: grid;
  gap: 10px;
}

.donn-skill-item {
  padding: 14px;
  border: 1px solid #f0ded4;
  border-radius: 8px;
  background: #fffaf7;
}

.donn-skill-item strong {
  display: block;
  color: #17110e;
}

.donn-skill-item > span {
  display: block;
  margin-top: 3px;
  color: #8a6b5c;
  font-size: 0.85rem;
  font-weight: 800;
}

.donn-skill-item p {
  margin: 10px 0 0;
  color: #5f514b;
}

.donn-skill-item em {
  display: block;
  margin-top: 10px;
  color: #173f68;
  font-style: normal;
  font-weight: 900;
}

.donn-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.donn-stat {
  padding: 16px;
  text-align: center;
}

.donn-stat strong {
  display: block;
  color: #20130f;
  font-size: 2rem;
  line-height: 1;
}

.donn-stat span {
  display: block;
  margin-top: 6px;
  color: #7d6b60;
  font-size: 0.8rem;
  font-weight: 900;
  text-transform: uppercase;
}

.donn-item-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.donn-status {
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 999px;
  background: #edf8f1;
  color: #166534;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.donn-status.is-planned {
  background: #eff6ff;
  color: #173f68;
}

.donn-status.is-in_progress {
  background: #fff7ed;
  color: #b45309;
}

.donn-status.is-done {
  background: #edf8f1;
  color: #166534;
}

body[data-theme="dark"] .donn-hero h2,
body[data-theme="dark"] .donn-section-head h3,
body[data-theme="dark"] .donn-form h4,
body[data-theme="dark"] .donn-list-panel h4,
body[data-theme="dark"] .donn-skill-item strong,
body[data-theme="dark"] .donn-stat strong,
body[data-theme="dark"] .donn-action-card strong {
  color: #f1f5f9;
}

body[data-theme="dark"] .donn-hero p,
body[data-theme="dark"] .donn-action-card span:last-child,
body[data-theme="dark"] .donn-list-panel-head span,
body[data-theme="dark"] .donn-empty,
body[data-theme="dark"] .donn-skill-item > span,
body[data-theme="dark"] .donn-skill-item p,
body[data-theme="dark"] .donn-competence-callout p,
body[data-theme="dark"] .donn-stat span {
  color: #a8a29e;
}

body[data-theme="dark"] .donn-action-card,
body[data-theme="dark"] .donn-form,
body[data-theme="dark"] .donn-list-panel,
body[data-theme="dark"] .donn-stat {
  background: #1f1f22;
  border-color: #3c3c3c;
  box-shadow: none;
}

body[data-theme="dark"] .donn-action-icon,
body[data-theme="dark"] .donn-skill-item {
  background: #252526;
  border-color: #3c3c3c;
}

body[data-theme="dark"] .donn-counter {
  background: #244c75;
}

@media (max-width: 860px) {
  .donn-action-grid,
  .donn-split,
  .donn-stat-grid {
    grid-template-columns: 1fr;
  }

  .donn-section-head {
    align-items: stretch;
    flex-direction: column;
  }

  .donn-counter {
    width: 100%;
  }
}

.competence-share-page {
  max-width: 940px;
}

.chantier-create-page {
  max-width: 980px;
}

.competence-share-hero {
  padding-bottom: 18px;
}

.competence-share-form {
  padding: 24px;
}

.competence-form-section {
  padding: 0 0 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid #f0ded4;
}

.competence-form-section:last-of-type {
  border-bottom: 0;
  margin-bottom: 8px;
}

.competence-form-section h3 {
  margin: 0 0 14px;
  color: #20130f;
  font-size: 1.12rem;
}

.competence-form-hint {
  margin: -4px 0 14px;
  color: #7d6b60;
  font-weight: 700;
}

.competence-check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.competence-check-grid.is-sectors {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.competence-check {
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid #ead7cc;
  border-radius: 8px;
  background: #fffaf7;
  color: #2b1912;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.92rem;
  font-weight: 900;
  cursor: pointer;
}

.competence-check input {
  width: 18px;
  height: 18px;
  accent-color: #dc6330;
  flex: 0 0 auto;
}

.competence-custom-field {
  margin-top: 14px;
}

.competence-mode-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.chantier-create-form .competence-mode-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.competence-mode-option {
  min-height: 42px;
  padding: 9px 10px;
  border: 1px solid #ead7cc;
  border-radius: 8px;
  background: #fffaf7;
  color: #2b1912;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
  font-weight: 900;
  cursor: pointer;
}

.competence-mode-option input {
  width: 16px;
  height: 16px;
  accent-color: #dc6330;
}

.competence-calendar {
  max-width: 360px;
  padding: 10px;
  border: 1px solid #ead7cc;
  border-radius: 8px;
  background: #fffaf7;
  user-select: none;
}

.competence-calendar-head {
  display: grid;
  grid-template-columns: 32px 1fr 32px;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.competence-calendar-head strong {
  color: #20130f;
  text-align: center;
  font-size: 0.95rem;
}

.competence-calendar-nav {
  width: 32px;
  height: 32px;
  border: 1px solid #ead7cc;
  border-radius: 999px;
  background: #ffffff;
  color: #dc6330;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.competence-calendar-weekdays,
.competence-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.competence-calendar-weekdays {
  margin-bottom: 6px;
}

.competence-calendar-weekdays span {
  color: #8a6b5c;
  font-size: 0.64rem;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
}

.competence-calendar-empty,
.competence-calendar-day {
  aspect-ratio: 1;
  min-width: 0;
}

.competence-calendar-day {
  border: 1px solid #f0ded4;
  border-radius: 6px;
  background: #ffffff;
  color: #2b1912;
  font-size: 0.78rem;
  font-weight: 900;
  cursor: pointer;
  touch-action: none;
}

.competence-calendar-day:hover {
  border-color: #dc6330;
  color: #dc6330;
}

.competence-calendar-day.is-today {
  box-shadow: inset 0 0 0 2px rgba(23, 63, 104, 0.24);
}

.competence-calendar-day.is-selected {
  background: #dc6330;
  border-color: #dc6330;
  color: #ffffff;
}

.competence-calendar-selected {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #f0ded4;
}

.competence-calendar-selected > span {
  display: block;
  margin-bottom: 8px;
  color: #7d6b60;
  font-size: 0.82rem;
  font-weight: 900;
  text-transform: uppercase;
}

.competence-calendar-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.competence-calendar-tags em {
  color: #8a6b5c;
  font-style: normal;
  font-weight: 800;
}

.competence-calendar-tag {
  border: 0;
  border-radius: 999px;
  background: #173f68;
  color: #ffffff;
  padding: 7px 10px;
  font-size: 0.82rem;
  font-weight: 900;
  cursor: pointer;
}

.chantier-textarea-row {
  align-items: stretch;
  margin-top: 14px;
}

.chantier-textarea-row .field-group {
  display: flex;
  flex-direction: column;
}

.chantier-textarea-row textarea {
  flex: 1;
}

.competence-calendar.is-disabled {
  opacity: 0.58;
}

.competence-calendar.is-disabled .competence-calendar-day {
  cursor: not-allowed;
}

.competence-form-actions {
  display: grid;
  grid-template-columns: auto minmax(220px, 360px);
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.competence-back-link {
  color: #8a6b5c;
  font-weight: 900;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.competence-back-link:hover {
  color: #dc6330;
  text-decoration: none;
}

body[data-theme="dark"] .competence-form-section {
  border-bottom-color: #3c3c3c;
}

body[data-theme="dark"] .competence-form-section h3 {
  color: #f1f5f9;
}

body[data-theme="dark"] .competence-form-hint,
body[data-theme="dark"] .competence-back-link {
  color: #a8a29e;
}

body[data-theme="dark"] .competence-check {
  background: #252526;
  border-color: #3c3c3c;
  color: #e2e8f0;
}

body[data-theme="dark"] .competence-mode-option {
  background: #252526;
  border-color: #3c3c3c;
  color: #e2e8f0;
}

body[data-theme="dark"] .competence-calendar {
  background: #252526;
  border-color: #3c3c3c;
}

body[data-theme="dark"] .competence-calendar-head strong {
  color: #f1f5f9;
}

body[data-theme="dark"] .competence-calendar-nav,
body[data-theme="dark"] .competence-calendar-day {
  background: #1f1f22;
  border-color: #3c3c3c;
  color: #e2e8f0;
}

body[data-theme="dark"] .competence-calendar-weekdays span,
body[data-theme="dark"] .competence-calendar-selected > span,
body[data-theme="dark"] .competence-calendar-tags em {
  color: #a8a29e;
}

body[data-theme="dark"] .competence-calendar-selected {
  border-top-color: #3c3c3c;
}

body[data-theme="dark"] .competence-calendar-day.is-selected {
  background: #dc6330;
  border-color: #dc6330;
  color: #ffffff;
}

@media (max-width: 720px) {
  .competence-share-form {
    padding: 18px;
  }

  .competence-check-grid,
  .competence-check-grid.is-sectors,
  .competence-mode-grid,
  .competence-form-actions {
    grid-template-columns: 1fr;
  }

  .competence-calendar {
    max-width: none;
  }
}

.competence-catalog-page {
  max-width: 1120px;
}

.competence-catalog-hero {
  padding-bottom: 18px;
}

.competence-catalog-filters {
  display: grid;
  grid-template-columns: minmax(240px, 1.35fr) minmax(180px, 0.8fr) minmax(160px, 0.7fr) auto;
  gap: 12px;
  align-items: end;
  padding: 16px;
  border: 1px solid rgba(220, 99, 48, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 12px 34px rgba(57, 38, 28, 0.06);
}

.competence-catalog-filters .field-group {
  margin-bottom: 0;
}

.competence-catalog-actions {
  display: grid;
  grid-template-columns: minmax(150px, 1fr);
  gap: 8px;
  align-items: center;
}

.competence-catalog-actions .competence-back-link {
  justify-content: center;
  font-size: 0.86rem;
}

.competence-catalog-results {
  padding-top: 30px;
}

.competence-catalog-add {
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  background: #dc6330;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 900;
  text-decoration: none;
}

.competence-catalog-add:hover {
  background: #c84e20;
  color: #fff;
  text-decoration: none;
}

.competence-catalog-empty {
  padding: 18px;
  border: 1px solid #f0ded4;
  border-radius: 8px;
  background: #fffaf7;
}

.competence-catalog-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.competence-catalog-card {
  padding: 18px;
  border: 1px solid rgba(220, 99, 48, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 12px 34px rgba(57, 38, 28, 0.06);
}

.competence-catalog-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.competence-catalog-card-head strong {
  display: block;
  color: #20130f;
  font-size: 1.08rem;
}

.competence-catalog-card-head span {
  display: block;
  margin-top: 4px;
  color: #8a6b5c;
  font-size: 0.88rem;
  font-weight: 900;
}

.competence-catalog-contact {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: #173f68;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  text-decoration: none;
}

.competence-catalog-contact:hover {
  background: #dc6330;
  color: #fff;
  text-decoration: none;
}

.competence-catalog-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.competence-catalog-tags span {
  padding: 6px 9px;
  border-radius: 999px;
  background: #fff0e8;
  color: #b84c1d;
  font-size: 0.78rem;
  font-weight: 900;
}

.competence-catalog-card p {
  margin: 14px 0 0;
  color: #5f514b;
  line-height: 1.55;
}

.competence-catalog-meta {
  display: grid;
  gap: 10px;
  margin: 16px 0 0;
}

.competence-catalog-meta div {
  padding-top: 10px;
  border-top: 1px solid #f0ded4;
}

.competence-catalog-meta dt {
  color: #8a6b5c;
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.competence-catalog-meta dd {
  margin: 3px 0 0;
  color: #20130f;
  font-weight: 800;
}

body[data-theme="dark"] .competence-catalog-filters,
body[data-theme="dark"] .competence-catalog-card,
body[data-theme="dark"] .competence-catalog-empty {
  background: #1f1f22;
  border-color: #3c3c3c;
  box-shadow: none;
}

body[data-theme="dark"] .competence-catalog-card-head strong,
body[data-theme="dark"] .competence-catalog-meta dd {
  color: #f1f5f9;
}

body[data-theme="dark"] .competence-catalog-card-head span,
body[data-theme="dark"] .competence-catalog-card p,
body[data-theme="dark"] .competence-catalog-meta dt {
  color: #a8a29e;
}

body[data-theme="dark"] .competence-catalog-tags span {
  background: rgba(220, 99, 48, 0.15);
  color: #ffb38f;
}

body[data-theme="dark"] .competence-catalog-meta div {
  border-top-color: #3c3c3c;
}

@media (max-width: 920px) {
  .competence-catalog-filters,
  .competence-catalog-grid {
    grid-template-columns: 1fr;
  }
}

/* =====================
   VALIDER PAROLES
   ===================== */

.valider-paroles-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}

.valider-paroles-item {
  background: #fff;
  border: 1px solid #e8e2dc;
  border-radius: 12px;
  padding: 0;
  overflow: hidden;
  transition: box-shadow .18s;
}

.valider-paroles-item:hover {
  box-shadow: 0 4px 18px rgba(0,0,0,.07);
}

.valider-paroles-card-link {
  display: block;
  padding: 20px 22px;
  color: inherit;
  text-decoration: none;
}

.valider-paroles-card-link:hover .valider-paroles-title,
.valider-paroles-card-link:focus-visible .valider-paroles-title {
  color: #c94a2a;
}

.valider-paroles-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.valider-paroles-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.valider-paroles-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #20130f;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.valider-paroles-title:hover {
  color: #c94a2a;
}

.valider-paroles-title .bi-arrow-right-circle {
  font-size: 0.78rem;
  opacity: .55;
}

.valider-paroles-submeta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 8px;
  font-size: 0.82rem;
  color: #6b5c54;
}

.valider-paroles-dot {
  color: #c5b9b3;
}

.valider-paroles-own-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 999px;
  background: #fff3cd;
  color: #856404;
  font-size: 0.75rem;
  font-weight: 700;
}

.valider-paroles-open {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 7px 12px;
  border: 1px solid #ead9cf;
  border-radius: 999px;
  color: #c94a2a;
  background: #fff7f2;
  font-size: 0.82rem;
  font-weight: 800;
}

.valider-paroles-preview {
  display: block;
  margin-top: 14px;
  padding: 12px 16px;
  background: #faf7f5;
  border-left: 3px solid #e8dfd8;
  border-radius: 0 8px 8px 0;
  font-size: 0.85rem;
  color: #5f514b;
  line-height: 1.65;
  white-space: pre-wrap;
}

/* Special action button variant in contrib_portail.php */
.contrib-action-btn.is-special {
  border-color: #d1fae5;
  background: #f0fdf4;
  color: #15803d;
}

.contrib-action-btn.is-special:hover {
  background: #dcfce7;
  border-color: #86efac;
}

/* Dark mode */
body[data-theme="dark"] .valider-paroles-item {
  background: #1f1f22;
  border-color: #3c3c3c;
}

body[data-theme="dark"] .valider-paroles-title {
  color: #f1f5f9;
}

body[data-theme="dark"] .valider-paroles-title:hover {
  color: #f97316;
}

body[data-theme="dark"] .valider-paroles-submeta {
  color: #a8a29e;
}

body[data-theme="dark"] .valider-paroles-preview {
  background: #18181b;
  border-left-color: #3c3c3c;
  color: #a8a29e;
}

body[data-theme="dark"] .valider-paroles-open {
  background: rgba(220, 99, 48, 0.12);
  border-color: rgba(220, 99, 48, 0.28);
  color: #ffb38f;
}

body[data-theme="dark"] .contrib-action-btn.is-special {
  background: rgba(21,128,61,.12);
  border-color: rgba(134,239,172,.2);
  color: #86efac;
}

@media (max-width: 640px) {
  .valider-paroles-header {
    flex-direction: column;
  }

  .valider-paroles-open {
    width: 100%;
    justify-content: center;
  }
}

.validator-review-page .dico-breadcrumb {
  margin-bottom: 18px;
}

.validator-review-hero h1 {
  margin: 8px 0 10px;
  color: #1d0f0a;
  font-family: var(--km-title-font);
  font-size: clamp(2.2rem, 5vw, 4.2rem);
  line-height: 0.98;
  font-weight: 600;
  letter-spacing: 0;
}

.validator-review-hero p {
  max-width: 760px;
  margin: 0;
  color: #75675f;
  font-size: 1rem;
  line-height: 1.7;
}

.validator-explanation-field {
  margin-top: 18px;
}

.validator-review-page .contrib-ac-shell {
  position: relative;
}

.validator-review-page .contrib-ac-drop {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  z-index: 300;
  max-height: 260px;
  margin: 0;
  padding: 4px 0;
  overflow-y: auto;
  list-style: none;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
}

.validator-review-page .contrib-ac-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: .9rem;
  line-height: 1.3;
}

.validator-review-page .contrib-ac-item:hover,
.validator-review-page .contrib-ac-item.is-active {
  background: #f0f7ff;
}

.validator-review-page .contrib-ac-title {
  flex: 1;
  min-width: 0;
}

.validator-review-page .contrib-ac-lyrics-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  padding: 2px 7px;
  border-radius: 99px;
  background: #dcfce7;
  color: #16a34a;
  font-size: .75rem;
  font-weight: 600;
  white-space: nowrap;
}

.validator-review-actions {
  margin-top: 18px;
}

.validator-review-closed {
  max-width: 980px;
  margin: 0 auto 18px;
}

body[data-theme="dark"] .validator-review-hero h1 {
  color: #fff7ed;
}

body[data-theme="dark"] .validator-review-hero p {
  color: #c8beb7;
}

body[data-theme="dark"] .validator-review-page .contrib-ac-drop {
  border-color: #3c3c3c;
  background: #1f1f22;
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
}

body[data-theme="dark"] .validator-review-page .contrib-ac-item:hover,
body[data-theme="dark"] .validator-review-page .contrib-ac-item.is-active {
  background: rgba(220, 99, 48, 0.16);
}

body[data-theme="dark"] .validator-review-page .contrib-ac-lyrics-badge {
  background: rgba(34, 197, 94, 0.15);
  color: #86efac;
}

/* ═══════════════════════════════════════════════════
   ESPACE VALIDATEUR — contrib_portail.php
   ═══════════════════════════════════════════════════ */

.contrib-validator-section {
  margin-bottom: 28px;
}

.contrib-validator-kicker-row {
  margin-bottom: 12px;
}

.contrib-validator-panels {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.contrib-validator-panel {
  flex: 1 1 300px;
  background: #fff8f2;
  border: 1px solid #f0d9c6;
  border-radius: 12px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.contrib-validator-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.contrib-validator-panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.contrib-validator-panel-title h3 {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0;
  color: #1f2937;
}

.contrib-validator-panel-title > i {
  color: #d65e2c;
  font-size: 1rem;
}

.contrib-validator-badge {
  font-size: 0.78rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  line-height: 1.4;
}

.contrib-validator-badge.is-urgent {
  background: #fee2e2;
  color: #b91c1c;
}

.contrib-validator-badge.is-ok {
  background: #dcfce7;
  color: #15803d;
}

.contrib-validator-stats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.contrib-validator-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: #fff;
  border: 1px solid #ede3d8;
  border-radius: 8px;
  padding: 8px 16px;
  min-width: 80px;
}

.contrib-validator-stat span {
  font-size: 0.72rem;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.contrib-validator-stat strong {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1;
  color: #0f172a;
}

.contrib-validator-stat strong.is-urgent {
  color: #b91c1c;
}

.contrib-validator-queue {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.contrib-validator-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid #ede3d8;
  border-radius: 8px;
  padding: 8px 12px;
  transition: border-color 0.12s, background 0.12s;
}

.contrib-validator-item:hover {
  border-color: #d65e2c;
  background: #fff4ee;
}

.contrib-validator-item-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}

.contrib-validator-item-body strong {
  font-size: 0.875rem;
  font-weight: 600;
  color: #1f2937;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contrib-validator-item-meta {
  font-size: 0.74rem;
  color: #64748b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contrib-validator-empty {
  font-size: 0.875rem;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  margin: 0;
}

.contrib-validator-see-all {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #d65e2c;
  text-decoration: none;
  padding-top: 10px;
  border-top: 1px solid #ede3d8;
  margin-top: auto;
  transition: color 0.12s;
}

.contrib-validator-see-all:hover {
  color: #b84e20;
  text-decoration: underline;
}

.contrib-validator-see-all-count {
  margin-left: auto;
  background: #fee2e2;
  color: #b91c1c;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
}

/* Dark mode */
body[data-theme="dark"] .contrib-validator-panel {
  background: #1c1510;
  border-color: #3d2b1a;
}

body[data-theme="dark"] .contrib-validator-panel-title h3 {
  color: #e5e7eb;
}

body[data-theme="dark"] .contrib-validator-panel-title > i {
  color: #fb923c;
}

body[data-theme="dark"] .contrib-validator-stat {
  background: #111;
  border-color: #3d2b1a;
}

body[data-theme="dark"] .contrib-validator-stat span {
  color: #9ca3af;
}

body[data-theme="dark"] .contrib-validator-stat strong {
  color: #f3f4f6;
}

body[data-theme="dark"] .contrib-validator-item {
  background: #111;
  border-color: #3d2b1a;
}

body[data-theme="dark"] .contrib-validator-item:hover {
  border-color: #fb923c;
  background: #1f120a;
}

body[data-theme="dark"] .contrib-validator-item-body strong {
  color: #e5e7eb;
}

body[data-theme="dark"] .contrib-validator-item-meta {
  color: #9ca3af;
}

body[data-theme="dark"] .contrib-validator-empty {
  color: #9ca3af;
}

body[data-theme="dark"] .contrib-validator-see-all {
  color: #fb923c;
  border-top-color: #3d2b1a;
}

body[data-theme="dark"] .contrib-validator-see-all:hover {
  color: #fdba74;
}

body[data-theme="dark"] .contrib-validator-badge.is-urgent {
  background: rgba(185,28,28,.2);
  color: #fca5a5;
}

body[data-theme="dark"] .contrib-validator-badge.is-ok {
  background: rgba(21,128,61,.2);
  color: #86efac;
}

body[data-theme="dark"] .contrib-validator-see-all-count {
  background: rgba(185,28,28,.2);
  color: #fca5a5;
}

@media (max-width: 640px) {
  .contrib-validator-panels {
    flex-direction: column;
  }

  .contrib-validator-panel {
    flex: none;
  }
}
n   MES CONTRIBUTIONS PORTAIL (mcp-*)n

/* ════════════════════════════════════════════════════════════
   MES CONTRIBUTIONS PORTAIL (mcp-*)
   ════════════════════════════════════════════════════════════ */

.mcp-page {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 80px;
}

/* -- En-tete -- */
.mcp-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 8px;
}

.mcp-header-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mcp-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #d65e2c;
}

.mcp-username {
  font-size: 1.7rem;
  font-weight: 800;
  color: #111827;
  margin: 0;
  line-height: 1.15;
}

.mcp-header-stats {
  display: flex;
  gap: 24px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.mcp-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.mcp-stat strong {
  font-size: 1.55rem;
  font-weight: 800;
  color: #111827;
  line-height: 1;
}

.mcp-stat span {
  font-size: 0.7rem;
  color: #9ca3af;
  white-space: nowrap;
}

/* -- Sections -- */
.mcp-section {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mcp-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mcp-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mcp-section-title i {
  font-size: 18px;
  color: #d65e2c;
  width: 20px;
  text-align: center;
}

.mcp-section-title h3 {
  font-size: 1rem;
  font-weight: 700;
  color: #111827;
  margin: 0;
}

.mcp-section-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: #f3f4f6;
  color: #374151;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
}

.mcp-section-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border-radius: 999px;
  background: #f3f4f6;
  color: #374151;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

.mcp-section-cta:hover {
  background: #e5e7eb;
  color: #111827;
  text-decoration: none;
}

.mcp-section-stats {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: #9ca3af;
  padding-top: 8px;
  border-top: 1px solid #f3f4f6;
}

.mcp-section-stats .is-pending { color: #b45309; font-weight: 600; }
.mcp-section-stats .is-draft   { color: #6b7280; font-weight: 600; }

.mcp-empty {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #9ca3af;
  font-size: 0.88rem;
  padding: 8px 0;
}

.mcp-empty i { font-size: 20px; flex-shrink: 0; }
.mcp-empty a { color: #d65e2c; font-weight: 600; }
.mcp-empty a:hover { text-decoration: underline; }

/* -- Dark mode -- */
body[data-theme="dark"] .mcp-username,
body[data-theme="dark"] .mcp-section-title h3 {
  color: #f3f4f6;
}

body[data-theme="dark"] .mcp-stat strong {
  color: #f3f4f6;
}

body[data-theme="dark"] .mcp-stat span {
  color: #6b7280;
}

body[data-theme="dark"] .mcp-section {
  background: #252525;
  border-color: #333333;
}

body[data-theme="dark"] .mcp-section-count {
  background: #333333;
  color: #d1d5db;
}

body[data-theme="dark"] .mcp-section-cta {
  background: #333333;
  color: #d1d5db;
}

body[data-theme="dark"] .mcp-section-cta:hover {
  background: #3a3a3a;
  color: #f3f4f6;
}

body[data-theme="dark"] .mcp-section-stats {
  border-top-color: #333333;
  color: #6b7280;
}

body[data-theme="dark"] .mcp-section-stats .is-pending { color: #d97706; }
body[data-theme="dark"] .mcp-section-stats .is-draft   { color: #9ca3af; }

body[data-theme="dark"] .mcp-empty {
  color: #6b7280;
}

/* -- Responsive -- */
@media (max-width: 600px) {
  .mcp-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .mcp-header-stats {
    align-items: flex-start;
    gap: 16px;
  }

  .mcp-stat {
    align-items: flex-start;
  }

  .mcp-stat strong {
    font-size: 1.3rem;
  }

  .mcp-username {
    font-size: 1.4rem;
  }

  .mcp-section {
    padding: 16px;
    border-radius: 12px;
  }
}

/* -- Onglets mcp-tabs -- */
.mcp-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.mcp-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1.5px solid #e5e7eb;
  background: #ffffff;
  color: #6b7280;
  font-size: 0.86rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.mcp-tab i {
  font-size: 15px;
}

.mcp-tab:hover {
  background: #f9fafb;
  color: #374151;
  border-color: #d1d5db;
}

.mcp-tab.is-active {
  background: #111827;
  color: #ffffff;
  border-color: #111827;
}

.mcp-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 900;
  line-height: 1;
}

.mcp-tab-badge.is-urgent  { background: #dc2626; color: #ffffff; }
.mcp-tab-badge.is-pending { background: #d97706; color: #ffffff; }
.mcp-tab-badge.is-draft   { background: #9ca3af; color: #ffffff; }
.mcp-tab-badge.is-success { background: #16a34a; color: #ffffff; }

body[data-theme="dark"] .mcp-tab {
  background: #252525;
  border-color: #333333;
  color: #9ca3af;
}

body[data-theme="dark"] .mcp-tab:hover {
  background: #2e2e2e;
  color: #d1d5db;
  border-color: #444444;
}

body[data-theme="dark"] .mcp-tab.is-active {
  background: #f3f4f6;
  color: #111827;
  border-color: #f3f4f6;
}

@media (max-width: 480px) {
  .mcp-tab {
    padding: 7px 12px;
    font-size: 0.82rem;
  }
}

/* MCP UX refresh */
.site-main:has(.mcp-page) {
  max-width: 100%;
  padding: 0;
  background: #fffaf3;
  background-image:
    radial-gradient(ellipse at 78% 8%, rgba(217,85,40,0.22) 0%, transparent 52%),
    radial-gradient(ellipse at 12% 92%, rgba(40,120,95,0.10) 0%, transparent 45%);
}

.mcp-page {
  box-sizing: border-box;
  width: 100%;
  max-width: 1100px;
  display: grid;
  gap: 18px;
  margin-inline: auto;
  padding: 16px 40px 80px;
}

.mcp-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 18px;
  padding: 24px;
  border: 1px solid rgba(255,255,255,0.90);
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, rgba(217,85,40,0.12), transparent 42%),
    rgba(255,255,255,0.70);
  box-shadow: 0 12px 36px rgba(180,100,40,0.10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.mcp-kicker {
  color: #d95528;
  font-weight: 950;
}

.mcp-username {
  max-width: 680px;
  color: #1a0e06;
  font-family: var(--km-title-font);
  font-size: clamp(2.1rem, 4vw, 4rem);
  font-weight: 500;
  line-height: 0.98;
}

.mcp-header-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(105px, 1fr));
  gap: 10px;
  align-items: stretch;
}

.mcp-stat {
  display: grid;
  align-content: center;
  gap: 5px;
  min-height: 82px;
  padding: 12px;
  border: 1px solid rgba(217,85,40,0.10);
  border-radius: 16px;
  background: rgba(255,255,255,0.68);
}

.mcp-stat strong {
  color: #1a0e06;
  font-size: 1.7rem;
  font-weight: 950;
}

.mcp-stat span {
  max-width: 120px;
  color: #706050;
  font-size: 0.76rem;
  line-height: 1.15;
  white-space: normal;
}

.mcp-quick-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.mcp-quick-action {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 74px;
  padding: 14px;
  border: 1px solid rgba(217,85,40,0.12);
  border-radius: 18px;
  background: rgba(255,255,255,0.66);
  color: #1a0e06;
  text-decoration: none;
  box-shadow: 0 8px 28px rgba(180,100,40,0.08);
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.mcp-quick-action:hover {
  transform: translateY(-2px);
  border-color: rgba(217,85,40,0.28);
  background: rgba(255,255,255,0.92);
  color: #1a0e06;
  text-decoration: none;
}

.mcp-quick-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(217,85,40,0.11);
  color: #d95528;
  font-size: 1.1rem;
}

.mcp-quick-action strong,
.mcp-quick-action small {
  display: block;
}

.mcp-quick-action strong {
  font-size: 0.98rem;
  font-weight: 950;
}

.mcp-quick-action small {
  margin-top: 3px;
  color: #706050;
  line-height: 1.3;
}

.mcp-quick-action.is-primary {
  background: #d95528;
  border-color: #d95528;
  color: #fff;
}

.mcp-quick-action.is-primary .mcp-quick-action-icon {
  background: rgba(255,255,255,0.18);
  color: #fff;
}

.mcp-quick-action.is-primary small {
  color: rgba(255,255,255,0.82);
}

.mcp-tabs {
  position: sticky;
  top: 62px;
  z-index: 20;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(255,255,255,0.84);
  border-radius: 18px;
  background: rgba(255,250,243,0.72);
  box-shadow: 0 8px 28px rgba(180,100,40,0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.mcp-tabs-label {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 8px;
  color: #907060;
  font-size: 0.76rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mcp-tab {
  min-height: 38px;
  border-color: transparent;
  background: transparent;
  color: #706050;
  font-weight: 950;
}

.mcp-tab:hover {
  background: rgba(217,85,40,0.08);
  border-color: transparent;
  color: #1a0e06;
}

.mcp-tab.is-active {
  background: #1a0e06;
  border-color: #1a0e06;
  color: #fff;
}

.mcp-section[hidden] {
  display: none !important;
}

.mcp-section {
  display: grid;
  gap: 16px;
  padding: 20px;
  border: 1px solid rgba(255,255,255,0.90);
  border-radius: 22px;
  background: rgba(255,255,255,0.70);
  box-shadow: 0 10px 34px rgba(180,100,40,0.09);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  scroll-margin-top: 118px;
}

.mcp-section-title h3 {
  color: #1a0e06;
  font-size: 1.18rem;
  font-weight: 950;
}

.mcp-section-title i {
  color: #d95528;
}

.mcp-section-count {
  background: rgba(217,85,40,0.10);
  color: #d95528;
  font-weight: 950;
}

.mcp-section-cta {
  min-height: 38px;
  padding: 0 15px;
  background: rgba(217,85,40,0.10);
  color: #d95528;
  font-weight: 950;
}

.mcp-section-cta:hover {
  background: #d95528;
  color: #fff;
}

.mcp-section-stats {
  padding-top: 12px;
  border-top: 1px solid rgba(217,85,40,0.10);
  color: #706050;
}

.mcp-empty {
  padding: 18px;
  border: 1px dashed rgba(217,85,40,0.20);
  border-radius: 16px;
  background: rgba(255,250,243,0.64);
  color: #706050;
  font-size: 0.95rem;
}

.contrib-pub-group {
  padding: 12px;
  border-radius: 18px;
  background: rgba(255,250,243,0.42);
}

.contrib-dashboard-row {
  min-height: 56px;
  padding: 11px 12px;
  border-color: rgba(217,85,40,0.11);
  border-radius: 15px;
  background: rgba(255,255,255,0.70);
}

.contrib-dashboard-row:hover {
  background: rgba(255,255,255,0.94);
  border-color: rgba(217,85,40,0.28);
}

.contrib-dashboard-row strong {
  color: #1a0e06;
  font-weight: 950;
}

.contrib-dashboard-row small {
  color: #706050;
}

body[data-theme="dark"] .site-main:has(.mcp-page) {
  background: #130b05;
  background-image:
    radial-gradient(ellipse at 78% 8%, rgba(217,85,40,0.16) 0%, transparent 54%),
    radial-gradient(ellipse at 12% 92%, rgba(40,120,95,0.08) 0%, transparent 46%);
}

body[data-theme="dark"] .mcp-header,
body[data-theme="dark"] .mcp-section,
body[data-theme="dark"] .mcp-tabs {
  background: rgba(27,16,9,0.72);
  border-color: rgba(240,224,200,0.10);
  box-shadow: 0 8px 34px rgba(0,0,0,0.14);
}

body[data-theme="dark"] .mcp-username,
body[data-theme="dark"] .mcp-stat strong,
body[data-theme="dark"] .mcp-section-title h3,
body[data-theme="dark"] .contrib-dashboard-row strong {
  color: #efe4d6;
}

body[data-theme="dark"] .mcp-stat,
body[data-theme="dark"] .mcp-quick-action,
body[data-theme="dark"] .contrib-pub-group,
body[data-theme="dark"] .contrib-dashboard-row {
  background: rgba(255,250,243,0.045);
  border-color: rgba(240,224,200,0.08);
}

body[data-theme="dark"] .mcp-stat span,
body[data-theme="dark"] .mcp-quick-action small,
body[data-theme="dark"] .mcp-section-stats,
body[data-theme="dark"] .mcp-empty,
body[data-theme="dark"] .contrib-dashboard-row small {
  color: #b19f8e;
}

body[data-theme="dark"] .mcp-quick-action {
  color: #efe4d6;
}

body[data-theme="dark"] .mcp-quick-action:hover,
body[data-theme="dark"] .contrib-dashboard-row:hover {
  background: rgba(255,250,243,0.065);
  border-color: rgba(217,85,40,0.22);
}

body[data-theme="dark"] .mcp-tab {
  background: transparent;
  border-color: transparent;
  color: #b19f8e;
}

body[data-theme="dark"] .mcp-tab:hover {
  background: rgba(217,85,40,0.12);
  color: #efe4d6;
}

body[data-theme="dark"] .mcp-tab.is-active {
  background: #efe4d6;
  border-color: #efe4d6;
  color: #1a0e06;
}

body[data-theme="dark"] .mcp-tabs-label {
  color: #b19f8e;
}

@media (max-width: 900px) {
  .mcp-page {
    padding: 14px 24px 64px;
  }

  .mcp-header,
  .mcp-quick-actions {
    grid-template-columns: 1fr;
  }

  .mcp-header-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .mcp-page {
    padding: 12px 16px 52px;
  }

  .mcp-header,
  .mcp-section {
    padding: 16px;
    border-radius: 18px;
  }

  .mcp-header-stats {
    grid-template-columns: 1fr;
  }

  .mcp-tabs {
    top: 56px;
    overflow-x: auto;
    justify-content: flex-start;
    flex-wrap: nowrap;
  }

  .mcp-tab {
    flex: 0 0 auto;
  }
}

/* MCP calmer, cleaner pass */
.site-main:has(.mcp-page) {
  background: #fffaf3;
  background-image: radial-gradient(ellipse at 82% 0%, rgba(217,85,40,0.12) 0%, transparent 46%);
}

.mcp-page {
  gap: 14px;
}

.mcp-header {
  padding: 20px 22px;
  border-color: rgba(234,223,206,0.74);
  background: rgba(255,255,255,0.58);
  box-shadow: none;
}

.mcp-header-info {
  justify-content: center;
}

.mcp-username {
  font-size: clamp(2rem, 3.6vw, 3.5rem);
}

.mcp-header-stats {
  align-self: center;
}

.mcp-stat {
  min-height: 68px;
  border-color: rgba(234,223,206,0.72);
  background: rgba(255,255,255,0.50);
  box-shadow: none;
}

.mcp-stat strong {
  font-size: 1.45rem;
}

.mcp-quick-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.mcp-quick-action {
  min-height: 54px;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  padding: 10px 12px;
  border-color: rgba(234,223,206,0.72);
  background: rgba(255,255,255,0.46);
  box-shadow: none;
}

.mcp-quick-action:hover {
  transform: none;
  background: rgba(255,255,255,0.78);
}

.mcp-quick-action-icon {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  font-size: 0.95rem;
}

.mcp-quick-action strong {
  font-size: 0.9rem;
}

.mcp-quick-action small {
  font-size: 0.78rem;
}

.mcp-tabs {
  justify-content: flex-start;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  padding: 5px;
  border-color: rgba(234,223,206,0.74);
  border-radius: 999px;
  background: rgba(255,255,255,0.58);
  box-shadow: none;
}

.mcp-tabs-label {
  display: none;
}

.mcp-tab {
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 0.84rem;
}

.mcp-tab.is-active {
  background: #d95528;
  border-color: #d95528;
}

.contrib-action-bar {
  padding: 8px;
  border-color: rgba(234,223,206,0.70);
  background: rgba(255,255,255,0.48);
  box-shadow: none;
}

.contrib-action-bar-item {
  min-height: 32px;
}

.mcp-section {
  padding: 18px;
  border-color: rgba(234,223,206,0.74);
  background: rgba(255,255,255,0.58);
  box-shadow: none;
}

.mcp-section-head {
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(217,85,40,0.10);
}

.mcp-section-cta {
  background: transparent;
  border: 1px solid rgba(217,85,40,0.18);
}

.contrib-pub-group {
  padding: 0;
  background: transparent;
}

.contrib-pub-group + .contrib-pub-group {
  margin-top: 18px;
}

.contrib-pub-group-label {
  margin: 4px 0 8px;
  color: #907060;
}

.contrib-dashboard-list {
  gap: 6px;
}

.contrib-dashboard-row {
  min-height: 48px;
  padding: 9px 10px;
  border-color: rgba(234,223,206,0.78);
  background: rgba(255,255,255,0.54);
}

.contrib-dashboard-row:hover {
  background: rgba(255,255,255,0.82);
}

.contrib-item-chip {
  min-height: 24px;
  padding: 0 8px;
  font-size: 0.74rem;
}

.mcp-section-stats {
  margin-top: 2px;
  padding-top: 10px;
}

body[data-theme="dark"] .site-main:has(.mcp-page) {
  background: #130b05;
  background-image: radial-gradient(ellipse at 82% 0%, rgba(217,85,40,0.11) 0%, transparent 46%);
}

body[data-theme="dark"] .mcp-header,
body[data-theme="dark"] .mcp-section,
body[data-theme="dark"] .mcp-tabs {
  background: rgba(27,16,9,0.64);
  border-color: rgba(240,224,200,0.10);
  box-shadow: none;
}

body[data-theme="dark"] .mcp-stat,
body[data-theme="dark"] .mcp-quick-action,
body[data-theme="dark"] .contrib-action-bar,
body[data-theme="dark"] .contrib-dashboard-row {
  background: rgba(255,250,243,0.04);
  border-color: rgba(240,224,200,0.09);
}

body[data-theme="dark"] .mcp-tab.is-active {
  background: #d95528;
  border-color: #d95528;
  color: #fff;
}

@media (max-width: 900px) {
  .mcp-tabs {
    width: 100%;
  }

  .mcp-quick-actions {
    grid-template-columns: 1fr;
  }
}

/* Espace bénévole refresh */
.site-main:has(.benevol-page) {
  max-width: 100%;
  padding: 0;
  background: #fffaf3;
  background-image:
    radial-gradient(ellipse at 82% 0%, rgba(217,85,40,0.14) 0%, transparent 48%),
    radial-gradient(ellipse at 10% 94%, rgba(40,120,95,0.08) 0%, transparent 42%);
}

.benevol-page {
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: 14px 40px 72px;
  display: grid;
  gap: 16px;
  box-sizing: border-box;
}

.benevol-hero {
  display: grid;
  gap: 14px;
  padding: 20px;
  border: 1px solid rgba(234,223,206,0.76);
  border-radius: 24px;
  background: rgba(255,255,255,0.58);
}

.benevol-breadcrumb {
  margin: 0;
}

.benevol-hero-main {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(520px, auto);
  gap: 18px;
  align-items: end;
}

.benevol-hero h2 {
  margin: 8px 0 10px;
  color: #1a0e06;
  font-family: var(--km-title-font);
  font-size: clamp(2.3rem, 4.5vw, 4.5rem);
  font-weight: 500;
  line-height: 0.96;
}

.benevol-hero p {
  max-width: 660px;
  margin: 0;
  color: #706050;
  font-size: 1rem;
  line-height: 1.6;
}

.benevol-hero-stats {
  display: flex;
  flex-wrap: nowrap;
  gap: 9px;
  justify-content: flex-end;
  min-width: 0;
}

.benevol-hero-stat {
  flex: 0 0 98px;
  min-height: 70px;
  padding: 11px 12px;
  border: 1px solid rgba(234,223,206,0.78);
  border-radius: 16px;
  background: rgba(255,255,255,0.52);
}

.benevol-hero-stat strong,
.benevol-hero-stat span {
  display: block;
}

.benevol-hero-stat strong {
  color: #1a0e06;
  font-size: 1.55rem;
  font-weight: 950;
  line-height: 1;
}

.benevol-hero-stat span {
  margin-top: 6px;
  color: #706050;
  font-size: 0.78rem;
  font-weight: 850;
  line-height: 1.2;
}

.benevol-hero-stat.is-hot {
  border-color: rgba(217,85,40,0.28);
  background: rgba(217,85,40,0.08);
}

.benevol-role-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(217,85,40,0.10);
}

.benevol-role-strip span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  background: rgba(217,85,40,0.09);
  color: #d95528;
  font-size: 0.78rem;
  font-weight: 950;
}

.benevol-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  margin: 0;
}

.benevol-actions .contrib-action-btn {
  position: relative;
  min-height: 54px;
  justify-content: flex-start;
  padding: 0 16px;
  border-radius: 16px;
  background: rgba(255,255,255,0.66);
  border-color: rgba(234,223,206,0.78);
  box-shadow: none;
  color: #1a0e06;
}

.benevol-actions .contrib-action-btn i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: rgba(217,85,40,0.11);
  color: #d95528;
}

.benevol-actions .contrib-action-btn:hover {
  background: #fff;
  border-color: rgba(217,85,40,0.24);
  transform: none;
}

.benevol-actions .contrib-action-btn.has-notification {
  border-color: rgba(217,85,40,0.34);
  background:
    radial-gradient(circle at top right, rgba(217,85,40,0.13), transparent 38%),
    rgba(255,255,255,0.72);
}

.benevol-action-badge {
  position: absolute;
  top: -7px;
  right: -7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border: 2px solid #fffaf3;
  border-radius: 999px;
  background: #d95528;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 950;
  line-height: 1;
  box-shadow: 0 8px 18px rgba(217,85,40,0.26);
}

.benevol-section {
  padding: 18px;
  border: 1px solid rgba(234,223,206,0.76);
  border-radius: 24px;
  background: rgba(255,255,255,0.58);
}

.benevol-section .contrib-validator-kicker-row {
  margin-bottom: 14px;
}

.benevol-section .contrib-validator-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 12px;
}

.benevol-section .contrib-validator-panel {
  padding: 16px;
  border-color: rgba(234,223,206,0.78);
  border-radius: 18px;
  background: rgba(255,255,255,0.62);
  box-shadow: none;
}

.benevol-section .contrib-validator-panel-head {
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(217,85,40,0.10);
}

.benevol-section .contrib-validator-panel-title h3 {
  color: #1a0e06;
  font-size: 1rem;
  font-weight: 950;
}

.benevol-section .contrib-validator-stats {
  gap: 8px;
  margin: 12px 0;
}

.benevol-section .contrib-validator-stat {
  min-height: 58px;
  padding: 9px 10px;
  border-color: rgba(234,223,206,0.78);
  border-radius: 14px;
  background: rgba(255,250,243,0.48);
}

.benevol-section .contrib-validator-queue {
  gap: 7px;
}

.benevol-section .contrib-validator-item {
  min-height: 50px;
  padding: 10px;
  border-color: rgba(234,223,206,0.78);
  border-radius: 14px;
  background: rgba(255,255,255,0.58);
}

.benevol-section .contrib-validator-item:hover {
  background: #fff;
  border-color: rgba(217,85,40,0.24);
}

.benevol-section .contrib-validator-see-all {
  display: inline-flex;
  width: auto;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  min-height: 40px;
  padding: 10px 16px;
  margin-top: 12px;
  border-radius: 999px;
  background: #d95528;
  color: #fff;
  font-weight: 950;
  line-height: 1.18;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  justify-content: center;
  border-top: 0;
}

.benevol-section .contrib-validator-see-all:hover {
  background: #c84f22;
  color: #fff;
}

.benevol-section .contrib-validator-see-all .contrib-validator-see-all-count {
  flex: 0 0 auto;
  margin-left: 4px;
  background: rgba(255,255,255,0.22);
  color: #fff;
}

body[data-theme="dark"] .site-main:has(.benevol-page) {
  background: #130b05;
  background-image:
    radial-gradient(ellipse at 82% 0%, rgba(217,85,40,0.12) 0%, transparent 48%),
    radial-gradient(ellipse at 10% 94%, rgba(40,120,95,0.06) 0%, transparent 42%);
}

body[data-theme="dark"] .benevol-hero,
body[data-theme="dark"] .benevol-section {
  background: rgba(27,16,9,0.68);
  border-color: rgba(240,224,200,0.10);
}

body[data-theme="dark"] .benevol-hero h2,
body[data-theme="dark"] .benevol-hero-stat strong,
body[data-theme="dark"] .benevol-section .contrib-validator-panel-title h3 {
  color: #efe4d6;
}

body[data-theme="dark"] .benevol-hero p,
body[data-theme="dark"] .benevol-hero-stat span {
  color: #b19f8e;
}

body[data-theme="dark"] .benevol-hero-stat,
body[data-theme="dark"] .benevol-actions .contrib-action-btn,
body[data-theme="dark"] .benevol-section .contrib-validator-panel,
body[data-theme="dark"] .benevol-section .contrib-validator-stat,
body[data-theme="dark"] .benevol-section .contrib-validator-item {
  background: rgba(255,250,243,0.045);
  border-color: rgba(240,224,200,0.09);
}

body[data-theme="dark"] .benevol-actions .contrib-action-btn {
  color: #efe4d6;
}

body[data-theme="dark"] .benevol-actions .contrib-action-btn.has-notification {
  border-color: rgba(217,85,40,0.36);
  background:
    radial-gradient(circle at top right, rgba(217,85,40,0.16), transparent 38%),
    rgba(255,250,243,0.055);
}

body[data-theme="dark"] .benevol-action-badge {
  border-color: #130b05;
}

body[data-theme="dark"] .benevol-section .contrib-validator-item:hover,
body[data-theme="dark"] .benevol-actions .contrib-action-btn:hover {
  background: rgba(255,250,243,0.065);
  border-color: rgba(217,85,40,0.22);
}

@media (max-width: 900px) {
  .benevol-page {
    padding: 14px 24px 56px;
  }

  .benevol-hero-main {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .benevol-hero-stats {
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  .benevol-hero-stats::-webkit-scrollbar {
    display: none;
  }
}

@media (max-width: 640px) {
  .benevol-page {
    padding: 12px 16px 48px;
  }

  .benevol-hero,
  .benevol-section {
    padding: 16px;
    border-radius: 18px;
  }

  .benevol-section .contrib-validator-panels {
    grid-template-columns: 1fr;
  }

  .benevol-hero-stat {
    flex-basis: 104px;
  }
}

/* -- Filtres evenements -- */
.event-filters {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 4px;
}

.event-filter-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.event-filter-group {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.event-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border-radius: 7px;
  border: 1.5px solid #e5e7eb;
  background: #ffffff;
  color: #6b7280;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.event-filter-pill:hover {
  background: #f9fafb;
  color: #374151;
  border-color: #d1d5db;
  text-decoration: none;
}

.event-filter-pill.is-active {
  background: #111827;
  color: #ffffff;
  border-color: #111827;
}

.event-filter-pill.is-price.is-active {
  background: #16a34a;
  border-color: #16a34a;
  color: #ffffff;
}

.event-filter-pill.is-type.is-active {
  background: #d65e2c;
  border-color: #d65e2c;
  color: #ffffff;
}

/* Dark mode */
body[data-theme="dark"] .event-filter-pill {
  background: #252525;
  border-color: #333333;
  color: #9ca3af;
}

body[data-theme="dark"] .event-filter-pill:hover {
  background: #2e2e2e;
  color: #d1d5db;
  border-color: #444444;
}

body[data-theme="dark"] .event-filter-pill.is-active {
  background: #f3f4f6;
  color: #111827;
  border-color: #f3f4f6;
}

body[data-theme="dark"] .event-filter-pill.is-price.is-active {
  background: #16a34a;
  border-color: #16a34a;
  color: #ffffff;
}

body[data-theme="dark"] .event-filter-pill.is-type.is-active {
  background: #d65e2c;
  border-color: #d65e2c;
  color: #ffffff;
}

@media (max-width: 600px) {
  .event-filter-row {
    gap: 8px;
  }
  .event-filter-pill {
    padding: 5px 11px;
    font-size: 0.78rem;
  }
}

/* -- Grille et cartes événements (ev-card) -- */
.ev-grid {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 20px;
}

.ev-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.18s, transform 0.18s;
}

.ev-card:hover {
  box-shadow: 0 6px 28px rgba(0,0,0,0.10);
  transform: translateY(-2px);
}

.ev-card--cancelled {
  opacity: 0.72;
}

.ev-card-link {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-decoration: none;
  color: inherit;
}

.ev-card-link:hover {
  text-decoration: none;
}

/* Cover */
.ev-card-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  flex-shrink: 0;
  background: linear-gradient(135deg, #f9e8da 0%, #e8cfc0 100%);
}

.ev-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.ev-card:hover .ev-card-cover img {
  transform: scale(1.03);
}

.ev-card-cover--empty {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ev-card-cover--empty > i {
  font-size: 3rem;
  color: #d65e2c;
  opacity: 0.32;
}

/* Date badge (top-left overlay) */
.ev-card-date-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(4px);
  border-radius: 9px;
  padding: 5px 9px;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  min-width: 38px;
  box-shadow: 0 1px 5px rgba(0,0,0,0.13);
}

.ev-card-date-day {
  font-size: 1.15rem;
  font-weight: 700;
  color: #d65e2c;
  font-variant-numeric: tabular-nums;
}

.ev-card-date-month {
  font-size: 0.67rem;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 1px;
}

/* Type tag (bottom-left overlay) */
.ev-card-type-tag {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: #d65e2c;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* State pill (bottom-right overlay) */
.ev-card-state {
  position: absolute;
  bottom: 10px;
  right: 10px;
}

/* Card body */
.ev-card-body {
  padding: 14px 16px 10px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ev-card-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #111827;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--km-title-font);
}

.ev-card-meta {
  margin: 0;
  font-size: 0.79rem;
  color: #6b7280;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ev-card-meta-row {
  display: flex;
  align-items: center;
  gap: 5px;
}

.ev-card-meta-row i {
  font-size: 0.82rem;
  flex-shrink: 0;
  color: #9ca3af;
}

.ev-card-price {
  margin: 0;
  font-size: 0.78rem;
  color: #059669;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Actions */
.ev-card-actions {
  display: flex;
  align-items: stretch;
  border-top: 1px solid #f3f4f6;
  padding: 2px 4px;
}

.ev-card-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 6px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #6b7280;
  font-size: 0.79rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.14s, color 0.14s;
  flex: 1;
  font-family: inherit;
  text-decoration: none;
}

.ev-card-action:hover {
  background: #f3f4f6;
  color: #374151;
  text-decoration: none;
}

.ev-card-action i {
  font-size: 0.95rem;
}

.ev-card-action-divider {
  width: 1px;
  background: #f3f4f6;
  margin: 6px 0;
  flex-shrink: 0;
}

/* Star button — starred state */
.ev-card-star.is-starred {
  color: #d65e2c;
}

/* Calendar wrap */
.ev-card-cal-wrap {
  position: relative;
  flex: 1;
  display: flex;
}

.ev-card-cal-btn {
  flex: 1;
}

.ev-card-cal-chevron {
  font-size: 0.68rem !important;
  transition: transform 0.15s;
}

.ev-card-cal-btn[aria-expanded="true"] .ev-card-cal-chevron {
  transform: rotate(180deg);
}

.ev-card-cal-dropdown {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.13);
  min-width: 210px;
  z-index: 80;
  overflow: hidden;
}

.ev-card-cal-opt {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 16px;
  font-size: 0.85rem;
  color: #374151;
  text-decoration: none;
  transition: background 0.12s;
  font-weight: 500;
}

.ev-card-cal-opt:hover {
  background: #f9fafb;
  text-decoration: none;
  color: #111827;
}

.ev-card-cal-opt i {
  color: #6b7280;
  font-size: 0.95rem;
}

/* Dark mode */
body[data-theme="dark"] .ev-card {
  background: #252525;
  border-color: #333333;
}

body[data-theme="dark"] .ev-card-cover {
  background: linear-gradient(135deg, #2a1e17 0%, #1e1612 100%);
}

body[data-theme="dark"] .ev-card-date-badge {
  background: rgba(30, 30, 30, 0.9);
}

body[data-theme="dark"] .ev-card-date-month {
  color: #9ca3af;
}

body[data-theme="dark"] .ev-card-title {
  color: #e5e7eb;
}

body[data-theme="dark"] .ev-card-meta {
  color: #9ca3af;
}

body[data-theme="dark"] .ev-card-meta-row i {
  color: #6b7280;
}

body[data-theme="dark"] .ev-card-actions {
  border-top-color: #333333;
}

body[data-theme="dark"] .ev-card-action-divider {
  background: #333333;
}

body[data-theme="dark"] .ev-card-action {
  color: #9ca3af;
}

body[data-theme="dark"] .ev-card-action:hover {
  background: #2e2e2e;
  color: #d1d5db;
}

body[data-theme="dark"] .ev-card-cal-dropdown {
  background: #252525;
  border-color: #3c3c3c;
  box-shadow: 0 4px 24px rgba(0,0,0,0.45);
}

body[data-theme="dark"] .ev-card-cal-opt {
  color: #d1d5db;
}

body[data-theme="dark"] .ev-card-cal-opt:hover {
  background: #2e2e2e;
  color: #f3f4f6;
}

body[data-theme="dark"] .ev-card-cal-opt i {
  color: #9ca3af;
}

@media (max-width: 640px) {
  .ev-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

@media (max-width: 420px) {
  .ev-card-action span {
    display: none;
  }
  .ev-card-action {
    padding: 9px 4px;
  }
}

/* -- Sélecteurs de filtre (ev-filter-select) -- */

/* Wrapper : flèche via ::after, jamais via background-image du select (évite le bug dark mode Windows) */
.ev-select-wrap {
  position: relative;
  display: inline-flex;
}

.ev-select-wrap::after {
  content: '';
  position: absolute;
  right: 11px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid #6b7280;
  pointer-events: none;
}

.ev-select-wrap.is-active::after {
  border-top-color: #ffffff;
}

body[data-theme="dark"] .ev-select-wrap::after {
  border-top-color: #9ca3af;
}

body[data-theme="dark"] .ev-select-wrap.is-active::after {
  border-top-color: #111827;
}

/* Select : sans flèche SVG, sans color-scheme */
.ev-filter-select {
  appearance: none;
  -webkit-appearance: none;
  padding: 6px 28px 6px 14px;
  border: 1.5px solid #e5e7eb;
  border-radius: 7px;
  background-color: #ffffff;
  color: #374151;
  font-size: 0.82rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
  width: 100%;
}

.ev-filter-select:hover {
  background-color: #f3f4f6;
  border-color: #d1d5db;
}

.ev-filter-select:focus {
  outline: 2px solid #d65e2c;
  outline-offset: 2px;
  border-color: #d65e2c;
}

.ev-filter-select.is-active {
  background-color: #111827;
  border-color: #111827;
  color: #ffffff;
}

body[data-theme="dark"] .ev-filter-select {
  background-color: #2c2c2c;
  border-color: #444444;
  color: #d1d5db;
}

body[data-theme="dark"] .ev-filter-select:hover {
  background-color: #333333;
  border-color: #555555;
  color: #f3f4f6;
}

body[data-theme="dark"] .ev-filter-select.is-active {
  background-color: #f3f4f6;
  border-color: #f3f4f6;
  color: #111827;
}

/* -- Groupe label + select (ev-filter-group) -- */
.ev-filter-selects-row {
  flex-wrap: nowrap;
  gap: 20px;
}

.ev-filter-group {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
}

.ev-filter-group-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: #6b7280;
  white-space: nowrap;
  user-select: none;
}

body[data-theme="dark"] .ev-filter-group-label {
  color: #9ca3af;
}

@media (max-width: 560px) {
  .ev-filter-selects-row {
    flex-wrap: wrap;
    gap: 10px;
  }
}

/* ══════════════════════════════════════════════════════
   DICTIONNAIRE — Portail (dictionnaire_portail.php)
   ══════════════════════════════════════════════════════ */

/* Fond de page (écrase le max-width:1180px du .dico-shell générique) */
.site-main:has(.dico-portail) {
  max-width: 100%;
  padding: 0;
  background:
    radial-gradient(ellipse 80% 50% at 88% 4%, rgba(214,94,44,.13), transparent),
    radial-gradient(ellipse 55% 55% at 8% 85%, rgba(180,100,40,.09), transparent),
    #f3eadf;
}

/* Conteneur semi-transparent */
.dico-shell.dico-portail {
  max-width: 1100px;
  margin: 0 auto;
  padding: 48px 28px 96px;
  background: rgba(255, 255, 255, 0.82);
  border-radius: 0;
}

/* Boutons de l'en-tête (relecture + ajouter) */
.dico-head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* Formulaire de recherche en colonne (barre + panel filtres empilés) */
.articles-tools.dico-search-tools {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}

/* Filtre A–Z : conteneur à défilement horizontal */
.dico-alpha-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-bottom: 4px;
}
.dico-alpha-wrap::-webkit-scrollbar { display: none; }

.dico-portail .dico-alpha-nav {
  flex-wrap: nowrap;
}

/* ── Dark mode ── */
body[data-theme="dark"] .site-main:has(.dico-portail) {
  background:
    radial-gradient(ellipse 80% 50% at 88% 4%, rgba(214,94,44,.09), transparent),
    radial-gradient(ellipse 55% 55% at 8% 85%, rgba(180,100,40,.07), transparent),
    #1a1208;
}

body[data-theme="dark"] .dico-shell.dico-portail {
  background: rgba(22, 18, 14, 0.88);
}

/* Responsive */
@media (max-width: 540px) {
  .dico-shell.dico-portail { padding: 28px 14px 64px; }
}

/* ══════════════════════════════════════════════════════
   DICTIONNAIRE DÉTAIL — Formulaire de suggestion
   ══════════════════════════════════════════════════════ */

.dico-suggest-honeypot {
  display: none !important;
}

.dico-suggest-panel {
  margin-top: 4px;
}

.dico-suggest-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 16px;
}

.dico-suggest-type-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.dico-suggest-type-opt {
  display: flex;
  align-items: center;
  gap: 0;
  cursor: pointer;
}

.dico-suggest-type-opt input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.dico-suggest-type-opt span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1.5px solid #d1d5db;
  border-radius: 7px;
  font-size: .88rem;
  font-weight: 600;
  color: #555;
  background: #ffffff;
  cursor: pointer;
  transition: border-color .12s, background .12s, color .12s;
}

.dico-suggest-type-opt input[type="radio"]:checked + span {
  border-color: #d65e2c;
  background: rgba(214,94,44,.08);
  color: #d65e2c;
}

.dico-suggest-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: .88rem;
  font-weight: 600;
  color: #4b5563;
}

.dico-suggest-label small {
  font-weight: 400;
  color: #9ca3af;
}

.dico-suggest-textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 80px;
  padding: 10px 12px;
  border: 1.5px solid #d1d5db;
  border-radius: 10px;
  font: inherit;
  font-size: .93rem;
  color: #1a0e06;
  background: #ffffff;
  resize: vertical;
  transition: border-color .15s;
}

.dico-suggest-textarea:focus {
  outline: none;
  border-color: #d65e2c;
  box-shadow: 0 0 0 3px rgba(214,94,44,.1);
}

.dico-suggest-textarea--sm {
  min-height: 56px;
}

.dico-suggest-submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 9px 20px;
  border: none;
  border-radius: 8px;
  background: #d65e2c;
  color: #fff;
  font: inherit;
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(214, 94, 44, .28);
  transition: background .15s, box-shadow .15s, transform .12s;
}

.dico-suggest-submit:hover {
  background: #bf4a1c;
  box-shadow: 0 6px 20px rgba(214, 94, 44, .42);
  transform: translateY(-1px);
  color: #fff;
}

/* Dark mode */
body[data-theme="dark"] .dico-suggest-type-opt span {
  background: #2a2420;
  border-color: #4a3a30;
  color: #c8a880;
}

body[data-theme="dark"] .dico-suggest-type-opt input[type="radio"]:checked + span {
  border-color: #e07840;
  background: rgba(214,94,44,.15);
  color: #e07840;
}

body[data-theme="dark"] .dico-suggest-label {
  color: #c8a880;
}

body[data-theme="dark"] .dico-suggest-label small {
  color: #7a6050;
}

body[data-theme="dark"] .dico-suggest-textarea {
  background: #2a2420;
  border-color: #4a3a30;
  color: #e8d8c4;
}

body[data-theme="dark"] .dico-suggest-textarea:focus {
  border-color: #e07840;
  box-shadow: 0 0 0 3px rgba(224,120,64,.12);
}

/* "Modifier cette fiche" sur une ligne */
.dico-aside-btn {
  white-space: nowrap;
}

/* Toggle bouton du formulaire de suggestion */
.dico-suggest-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  margin: -10px -14px;
  width: calc(100% + 28px);
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
  transition: background .15s;
}

.dico-suggest-toggle:hover {
  background: rgba(214, 94, 44, .07);
}

.dico-suggest-toggle-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .95rem;
  font-weight: 700;
  color: #1a0e06;
  transition: color .15s;
}

.dico-suggest-toggle-label i {
  color: #d65e2c;
  font-size: 1rem;
}

.dico-suggest-toggle-chevron {
  font-size: .85rem;
  color: #9ca3af;
  flex-shrink: 0;
  transition: transform .2s, color .15s;
}

.dico-suggest-toggle[aria-expanded="true"] .dico-suggest-toggle-chevron {
  transform: rotate(180deg);
}

.dico-suggest-toggle:hover .dico-suggest-toggle-label {
  color: #d65e2c;
}

.dico-suggest-toggle:hover .dico-suggest-toggle-chevron {
  color: #d65e2c;
}

#suggestFormWrap {
  margin-top: 16px;
}

body[data-theme="dark"] .dico-suggest-toggle-label {
  color: #e8d8c4;
}

body[data-theme="dark"] .dico-suggest-toggle-label i {
  color: #e07840;
}

body[data-theme="dark"] .dico-suggest-toggle:hover {
  background: rgba(224, 120, 64, .10);
}

body[data-theme="dark"] .dico-suggest-toggle:hover .dico-suggest-toggle-label {
  color: #e07840;
}

body[data-theme="dark"] .dico-suggest-toggle:hover .dico-suggest-toggle-chevron {
  color: #e07840;
}

/* ══════════════════════════════════════════════════════
   DICTIONNAIRE DÉTAIL — Signalement
   ══════════════════════════════════════════════════════ */

.dico-report-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

.dico-report-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1.5px solid #fca5a5;
  border-radius: 8px;
  background: #fff5f5;
  color: #ef4444;
  font: inherit;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .12s;
}

.dico-report-btn:hover {
  background: #fee2e2;
  border-color: #ef4444;
  color: #b91c1c;
  transform: translateY(-1px);
}

.dico-report-dialog { max-width: 480px; }

.dico-report-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
  font-size: .9rem;
  font-weight: 600;
  color: #4b5563;
}

.dico-report-field small { font-weight: 400; color: #9ca3af; }

.dico-report-select {
  width: 100%;
  padding: 9px 34px 9px 12px;
  border-radius: 8px;
}

.dico-report-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 4px;
}

/* Dark mode */
body[data-theme="dark"] .dico-report-btn {
  background: #2c1515;
  border-color: #7f1d1d;
  color: #f87171;
}

body[data-theme="dark"] .dico-report-btn:hover {
  background: #3b1515;
  border-color: #ef4444;
  color: #fca5a5;
}

body[data-theme="dark"] .dico-report-field { color: #c8a880; }

/* ══════════════════════════════════════════════════════
   RELECTURE — Section signalements
   ══════════════════════════════════════════════════════ */

.dico-relecture-section {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 2px solid #fde8e0;
}

body[data-theme="dark"] .dico-relecture-section {
  border-top-color: #4a1f10;
}

.dico-relecture-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #d65e2c;
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  margin-left: 6px;
}

.dico-report-item { border-left: 3px solid #f87171; }

.dico-report-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.dico-report-reason-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #fef2f2;
  border: 1px solid #fca5a5;
  color: #ef4444;
  font-size: .78rem;
  font-weight: 700;
  white-space: nowrap;
}

body[data-theme="dark"] .dico-report-reason-badge {
  background: #3b1515;
  border-color: #7f1d1d;
  color: #f87171;
}

.dico-report-explanation {
  font-size: .88rem;
  color: #4b5563;
  margin: 4px 0 8px;
  font-style: italic;
}

body[data-theme="dark"] .dico-report-explanation { color: #9ca3af; }

.dico-report-meta {
  display: flex;
  gap: 12px;
  font-size: .78rem;
  color: #9ca3af;
  margin-bottom: 10px;
}

.dico-report-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* actualites.php sidebar — fix title text overflow */
.search-page-side .search-latest-item .latest-song-title {
  display: block;
  overflow: hidden;
}
.search-page-side .search-latest-item .latest-song-title a {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-page-side .search-latest-item .latest-song-text {
  min-width: 0;
  overflow: hidden;
}

/* --- Définition kréol/français — badges de langue --- */
.daf-lang-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: .04em;
  vertical-align: middle;
  margin-left: 4px;
}
.daf-lang-badge--kr {
  background: rgba(214,94,44,.12);
  color: #d65e2c;
  border: 1px solid rgba(214,94,44,.25);
}
.daf-lang-badge--fr {
  background: rgba(37,99,235,.10);
  color: #2563eb;
  border: 1px solid rgba(37,99,235,.20);
}

/* Détail : badges langue dans la liste de définitions */
.dico-def-lang-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: .04em;
  vertical-align: middle;
  margin-right: 5px;
}
.dico-def-lang-badge--kr {
  background: rgba(214,94,44,.12);
  color: #d65e2c;
  border: 1px solid rgba(214,94,44,.25);
}
.dico-def-lang-badge--fr {
  background: rgba(37,99,235,.10);
  color: #2563eb;
  border: 1px solid rgba(37,99,235,.20);
}

.dico-def-kr {
  margin-bottom: 6px;
}
.dico-def-fr--has-kr {
  padding-top: 4px;
  border-top: 1px solid rgba(0,0,0,.06);
  margin-top: 0;
}

body[data-theme="dark"] .daf-lang-badge--kr,
body[data-theme="dark"] .dico-def-lang-badge--kr {
  background: rgba(214,94,44,.18);
  color: #f59e6e;
  border-color: rgba(214,94,44,.35);
}
body[data-theme="dark"] .daf-lang-badge--fr,
body[data-theme="dark"] .dico-def-lang-badge--fr {
  background: rgba(96,165,250,.12);
  color: #60a5fa;
  border-color: rgba(96,165,250,.28);
}
body[data-theme="dark"] .dico-def-fr--has-kr {
  border-top-color: rgba(255,255,255,.08);
}

/* --- rond_creer.php : option affichage événements (aside) --- */
.rond-editor-aside {
  position: sticky;
  top: 84px;
  display: grid;
  gap: 12px;
  align-content: start;
}

.rond-ev-opt-wrap {
  padding: 16px;
  border: 1px solid rgba(214,94,44,.18);
  border-radius: 14px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 18px 48px rgba(89,54,25,.08);
}

.rond-ev-opt-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}

.rond-ev-opt-label input[type="checkbox"] {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: #d65e2c;
  cursor: pointer;
}

.rond-ev-opt-text {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.rond-ev-opt-text strong {
  font-size: .93rem;
  color: #2f2119;
  font-weight: 900;
  line-height: 1.3;
}

.rond-ev-opt-hint {
  font-size: 0.8rem;
  color: #6b5b52;
  line-height: 1.45;
}

body[data-theme="dark"] .rond-ev-opt-wrap {
  border-color: rgba(214,94,44,.30);
  background: #20242b;
}
body[data-theme="dark"] .rond-ev-opt-text strong {
  color: #f0e8e0;
}
body[data-theme="dark"] .rond-ev-opt-hint {
  color: #9ca3af;
}

/* --- rond_detail.php : bouton Édité --- */
.rond-detail-action--edit {
  background: rgba(214,94,44,.10);
  border-color: rgba(214,94,44,.28);
  color: #d65e2c;
}
.rond-detail-action--edit:hover {
  background: #d95528;
  border-color: #d95528;
  color: #fff;
}
body[data-theme="dark"] .rond-detail-action--edit {
  background: rgba(214,94,44,.15);
  border-color: rgba(214,94,44,.35);
  color: #f59e6e;
}
body[data-theme="dark"] .rond-detail-action--edit:hover {
  background: #d95528;
  border-color: #d95528;
  color: #fff;
}

/* --- rond_portail.php : CTA créer un rond --- */
.rond-portail-add-cta {
  margin-top: 36px;
  padding: 26px 24px;
  border-radius: 20px;
  border: 1.5px dashed rgba(217,85,40,.30);
  background: rgba(217,85,40,.04);
  display: flex;
  justify-content: center;
}
.rond-portail-add-cta-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}
.rond-portail-add-cta-text {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  font-weight: 800;
  color: #5f4635;
}
.rond-portail-add-cta-text i {
  font-size: 1.25rem;
  color: #d95528;
}
.rond-portail-add-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 22px;
  border-radius: 999px;
  background: #d95528;
  color: #fff;
  font-size: 0.94rem;
  font-weight: 900;
  text-decoration: none;
  transition: background .15s, transform .12s, box-shadow .15s;
  box-shadow: 0 4px 16px rgba(217,85,40,.28);
}
.rond-portail-add-cta-btn:hover {
  background: #bf4a1c;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(217,85,40,.38);
  text-decoration: none;
}
body[data-theme="dark"] .rond-portail-add-cta {
  border-color: rgba(217,85,40,.35);
  background: rgba(217,85,40,.07);
}
body[data-theme="dark"] .rond-portail-add-cta-text {
  color: #cbb8a4;
}

/* ── Ronds : badges statut dans les cartes ── */
.rond-status-live  { background: #dc2626; }
.rond-status-zordi { background: #2563eb; }
.rond-status-domin { background: #6b7280; }

/* Ronds portail : pas de soulignement bleu sur les cartes au survol */
.rond-item .articles-card:hover {
  text-decoration: none;
  color: inherit;
}

/* Ronds portail : barre région sous articles-tools */
.rond-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -18px 0 22px;
  padding: 0 2px;
}
.rond-filter-bar .articles-sort {
  justify-content: flex-start;
}

/* articles-sort-btn utilisé comme <button> (reset styles navigateur) */
button.articles-sort-btn {
  border: 1px solid rgba(214,94,44,.14);
  background: rgba(255,255,255,.68);
  font-family: inherit;
  cursor: pointer;
}

/* ── Rond détail (v2) ── */
.rond-detail-page { padding-top: 8px; }

.rond-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 20px;
  color: #6b5b52;
  font-size: .88rem;
  font-weight: 700;
  text-decoration: none;
}
.rond-back-link:hover { color: #d65e2c; text-decoration: none; }

.rond-detail-article { display: grid; gap: 20px; }

.rond-detail-hero2 {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 28px;
  align-items: start;
  padding: 24px;
  border: 1px solid rgba(214,94,44,.12);
  border-radius: 18px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 18px 48px rgba(89,54,25,.08);
}

.rond-detail-cover2 {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  background: #f3ede6;
}
.rond-detail-cover2 img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.rond-detail-cover2-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%; height: 100%;
  font-size: 3rem;
  color: #d6bfaa;
}

.rond-detail-intro2 h1 {
  margin: 0 0 14px;
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  color: #2f2119;
  line-height: 1.05;
  font-weight: 850;
}

.rond-detail-chips2 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
}

.rond-detail-actions2 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.rond-action2 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid rgba(93,69,56,.18);
  border-radius: 999px;
  background: #fff;
  color: #5d4538;
  font-size: .82rem;
  font-weight: 800;
  text-decoration: none;
  transition: border-color .15s, background .15s;
}
.rond-action2:hover { border-color: #d65e2c; color: #d65e2c; text-decoration: none; }
.rond-action2-facebook { border-color: #1877f2; color: #1877f2; }
.rond-action2-facebook:hover { background: #1877f2; color: #fff; }
.rond-action2-edit { border-color: rgba(214,94,44,.28); color: #d65e2c; }
.rond-action2-edit:hover { background: #d65e2c; color: #fff; }

.rond-detail-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.rond-detail-card2 {
  padding: 20px 22px;
  border: 1px solid rgba(214,94,44,.12);
  border-radius: 14px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 8px 28px rgba(89,54,25,.06);
}
.rond-detail-card2-title {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 14px;
  font-size: .92rem;
  font-weight: 950;
  color: #2f2119;
}
.rond-detail-card2-title i { color: #d65e2c; }

.rond-detail-dl { margin: 0; }
.rond-detail-dl > div {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(214,94,44,.08);
}
.rond-detail-dl > div:last-child { border-bottom: none; }
.rond-detail-dl dt {
  min-width: 110px;
  color: #9c7b6a;
  font-size: .82rem;
  font-weight: 700;
  flex-shrink: 0;
}
.rond-detail-dl dd {
  margin: 0;
  color: #2f2119;
  font-size: .88rem;
  font-weight: 600;
}
.rond-detail-dl dd a { color: #d65e2c; }

.rond-map-card2 { display: flex; flex-direction: column; }
.rond-detail-desc2 { grid-column: 1 / -1; }

.rond-detail-created {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #9c8070;
  font-size: .82rem;
}
.rond-detail-created i { color: #c4a882; }

/* Dark mode ronds v2 — même palette que articles-card */
body[data-theme="dark"] .rond-detail-hero2,
body[data-theme="dark"] .rond-detail-card2 {
  background: rgba(30,24,16,.72);
  border-color: rgba(80,50,20,.35);
  box-shadow: 0 4px 18px rgba(0,0,0,.35);
}
body[data-theme="dark"] .rond-detail-intro2 h1 { color: #e8d8c4; }
body[data-theme="dark"] .rond-detail-dl dt  { color: #7a6050; }
body[data-theme="dark"] .rond-detail-dl dd  { color: #c8b0a0; }
body[data-theme="dark"] .rond-detail-dl > div { border-color: rgba(80,50,20,.25); }
body[data-theme="dark"] .rond-back-link { color: #9a7a60; }
body[data-theme="dark"] .rond-action2 { background: rgba(30,24,16,.8); border-color: rgba(80,50,20,.4); color: #c8b0a0; }
body[data-theme="dark"] .rond-action2:hover { border-color: #d65e2c; color: #d65e2c; }
body[data-theme="dark"] .rond-detail-cover2 { background: #2a2218; }
body[data-theme="dark"] .rond-detail-cover2-placeholder { color: #5a4a36; }
body[data-theme="dark"] .rond-detail-card2-title { color: #e8d8c4; }

/* Responsive */
@media (max-width: 640px) {
  .rond-detail-hero2 { grid-template-columns: 1fr; }
  .rond-detail-cover2 { width: 120px; aspect-ratio: 1; }
  .rond-detail-grid2 { grid-template-columns: 1fr; }
}