/* Header solide + utilitaires (fallback au cas où une page oublie les classes Tailwind) */
/* Theme variables */
:root {
  --hdr-bg: rgba(255,255,255,0.92);
  --hdr-border: rgba(0,0,0,0.06);
  --hdr-shadow: 0 2px 4px -2px rgba(0,0,0,.08), 0 4px 12px -2px rgba(0,0,0,.04);
  --hdr-text: #1f2937;
  --hdr-text-dim: #475569;
  --hdr-hover: rgba(243,244,246,0.85);
  --dd-bg: #ffffff;
  --dd-border: #e2e8f0;
  --dd-item: #1f2937;
  --dd-item-hover: #f1f5f9;
  --dd-item-active: #2563eb;
  --dd-item-active-text: #ffffff;
}
.dark {
  --hdr-bg: rgba(15,23,42,0.82);          /* slate-900 translucide */
  --hdr-border: rgba(148,163,184,0.15);    /* slate-400 alpha */
  --hdr-shadow: 0 2px 6px -2px rgba(0,0,0,.55), 0 6px 18px -4px rgba(0,0,0,.35);
  --hdr-text: #f1f5f9;                     /* slate-100 */
  --hdr-text-dim: #cbd5e1;                 /* slate-300 */
  --hdr-hover: rgba(51,65,85,0.55);        /* slate-700 translucide */
  --dd-bg: #1e293b;                        /* slate-800 */
  --dd-border: #334155;                    /* slate-700 */
  --dd-item: #e2e8f0;                      /* slate-200 */
  --dd-item-hover: #334155;                /* slate-700 */
  --dd-item-active: #3b82f6;               /* blue-500 */
  --dd-item-active-text: #ffffff;
}

.site-header {
  background: var(--hdr-bg);
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom:1px solid var(--hdr-border);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  box-shadow: var(--hdr-shadow);
  transition: background .25s, border-color .25s, box-shadow .25s;
  color: var(--hdr-text);
}
.dark .site-header { color: var(--hdr-text); }
.header-border { border-bottom:1px solid var(--hdr-border); }
.dark .header-border { border-bottom-color: var(--hdr-border); }

/* Language dropdown (full header) overrides if present */
#lang-btn.lang-trigger { background: transparent; border:1px solid var(--hdr-border); color: var(--hdr-text); }
#lang-btn.lang-trigger:hover { background: var(--hdr-hover); }
#lang-dd.lang-dd { background: var(--dd-bg); border:1px solid var(--dd-border); }
#lang-dd.lang-dd .lang-opt { color: var(--dd-item); }
#lang-dd.lang-dd .lang-opt:hover { background: var(--dd-item-hover); }
#lang-dd.lang-dd .lang-opt[aria-selected="true"] { background: var(--dd-item-active); color: var(--dd-item-active-text); }
#lang-dd.lang-dd .lang-opt[aria-selected="true"]::after { content:'✔'; position:absolute; right:8px; top:50%; transform:translateY(-50%); font-size:11px; opacity:.85; }

/* Utility fallbacks for existing classes in dark mode */
.dark .text-gray-800 { color: var(--hdr-text) !important; }
.dark .text-gray-200 { color: var(--hdr-text-dim) !important; }
.dark .hover\:bg-gray-100:hover { background: var(--hdr-hover) !important; }
.dark .dark\:hover\:bg-gray-700:hover { background: var(--hdr-hover) !important; }


/* Boutons d'action */
.btn-blue,
.btn-pink,
.icon-danger { cursor: pointer; }

.btn-blue{
  background:linear-gradient(135deg,#60D4FF,#4AC8FF);
  color:#0b1220;
  font-weight:600;
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn-blue:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 22px rgba(96,212,255,.35);
}

.btn-pink{
  background:linear-gradient(135deg,#F472B6,#EC4899);
  color:#fff;
  font-weight:700;
  box-shadow:0 4px 14px rgba(236,72,153,.3);
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn-pink:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 22px rgba(236,72,153,.4);
}

.icon-danger{
  background:#ef4444;
  color:#fff;
  border-radius:9999px;
  padding:.5rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.icon-danger:hover{ background:#dc2626; }

/* États focus (accessibilité clavier) */
.btn-blue:focus-visible,
.btn-pink:focus-visible,
.icon-danger:focus-visible{
  outline:2px solid currentColor;
  outline-offset:2px;
  border-radius:.75rem;
}

/* Réduit les animations si l'utilisateur préfère */
@media (prefers-reduced-motion: reduce){
  .btn-blue, .btn-pink{
    transition:none;
  }
  .btn-blue:hover, .btn-pink:hover{
    transform:none;
    box-shadow:none;
  }
}

.tiny-under{ font-size:.78rem; line-height:1rem; }