/* ===== Paroles PF — Light/Dark Theme (mobile-first) ===== */

/* Reset */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none}
table{border-collapse:collapse;width:100%}
:root{
  /* Light theme (default) */
  --bg: #f7f9fc;
  --surface: #ffffff;
  --surface-2:#f1f5fb;
  --text:#0f172a;
  --muted:#51627d;
  --brand:#0ea5e9;
  --brand-2:#10b981;
  --border:#dfe7f2;
  --shadow: 0 1px 0 rgba(17,24,39,0.04), 0 8px 24px rgba(15,23,42,0.08);
  --radius:16px;
  --radius-sm:10px;
  --font: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";
}
/* Dark theme */
[data-theme="dark"]{
  --bg:#0b0c10;
  --surface:#111318;
  --surface-2:#151923;
  --text:#e9eef7;
  --muted:#a9b3c7;
  --brand:#3aa7ff;
  --brand-2:#5fd0a5;
  --border:#262a36;
  --shadow: 0 1px 0 rgba(255,255,255,0.02), 0 8px 24px rgba(0,0,0,0.35);
}

body{
  background:
    radial-gradient(1200px 600px at 20% -10%, color-mix(in srgb, var(--brand) 8%, transparent), transparent 60%),
    radial-gradient(900px 500px at 120% 10%, color-mix(in srgb, var(--brand-2) 8%, transparent), transparent 65%),
    var(--bg);
  color:var(--text);
  font:16px/1.6 var(--font);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.container{width:min(1100px,92vw);margin:0 auto;padding:16px}

/* HERO (inline SVG inside) */
.hero{position:relative}
.hero-media{
  aspect-ratio:1600/420; overflow:hidden;
  border-bottom:1px solid var(--border);
  box-shadow:var(--shadow);
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 30%, #fff), color-mix(in srgb, var(--brand-2) 22%, #fff));
}
.hero svg{width:100%;height:100%}

.hero-bar{
  position:sticky; top:0; z-index:40;
  backdrop-filter: blur(8px);
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  border-bottom:1px solid var(--border);
}
.hero-inner{display:flex;align-items:center;gap:12px;padding:10px 0}

.brand{
  display:inline-flex;align-items:center;gap:10px;
  font-weight:800;letter-spacing:.2px;
  padding:8px 12px;border-radius:999px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 60%, #fff), color-mix(in srgb, var(--brand-2) 40%, #fff));
  color:#05243a;
  box-shadow:var(--shadow);
}
[data-theme="dark"] .brand{color:#082436}
.brand span{background:#0b1220;color:#c5efff;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:800}
[data-theme="dark"] .brand span{background:#0b1220}

.nav{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.nav a{
  color:var(--text);opacity:.9;
  padding:8px 12px;border-radius:10px;border:1px solid transparent
}
.nav a:hover{border-color:var(--border);background:var(--surface-2);opacity:1}

.theme-toggle{
  margin-left:6px; display:inline-flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:10px;border:1px solid var(--border);
  background:var(--surface-2); color:var(--text); cursor:pointer; font-weight:600;
}

.main{padding-top:16px}

/* Panels & buttons */
.panel{
  background:linear-gradient(180deg, color-mix(in srgb, var(--surface) 90%, transparent), var(--surface));
  border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:16px;
}
.btn{
  appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 14px;border-radius:12px;border:1px solid var(--border);
  background:var(--surface-2);color:var(--text);font-weight:700;cursor:pointer
}
.btn:hover{background:color-mix(in srgb, var(--surface-2) 85%, #fff)}
.btn.primary{background:linear-gradient(135deg, var(--brand), var(--brand-2));color:#05243a;border-color:transparent}

/* Legacy class polish */
.standard,.TexteTop,.TextehauteBarreMenu,.BoxTitle,.BoxTitle1{color:var(--text)}
.BoxTitle,.BoxTitle1{font-weight:800;letter-spacing:.2px}
a.standardBleu,.standard a{color:color-mix(in srgb, var(--brand) 70%, #0369a1);text-decoration:none}
a.standardBleu:hover,.standard a:hover{text-decoration:underline}

/* Tables -> responsive */
table{background:var(--surface);border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow)}
td,th{padding:12px;vertical-align:top;border-bottom:1px solid var(--border)}
.list-table tr{transition:background .15s ease}
.list-table tr:hover{background:var(--surface-2)}
.list-table td a{display:inline-flex;align-items:center;gap:10px}

@media (max-width: 720px){
  .container{padding:12px}
  .nav{width:100%;justify-content:space-between}
  table,thead,tbody,th,td,tr{display:block}
  thead{display:none}
  tr{border-bottom:1px solid var(--border)}
  td{border:none;padding:10px 12px}
  .list-table td{padding:12px 14px}
  .standard{font-size:15px}
  .BoxTitle,.BoxTitle1{font-size:16px}
}

/* Lyrics */
.lyrics-title{font-size:clamp(22px,4.2vw,34px);margin:4px 0 2px}
.lyrics-author{color:var(--muted);margin-bottom:14px}
.lyrics-box{white-space:pre-wrap;line-height:1.8;font-size:17px}
.lyrics-actions{margin-top:20px;display:flex;gap:10px;flex-wrap:wrap}

/* Footer */
.site-footer{margin:24px 0 40px;padding-top:12px;border-top:1px solid var(--border);color:var(--muted)}
.footer-grid{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:start}
.footer-links{display:flex;gap:12px;flex-wrap:wrap}
.footer-meta{margin-top:12px;font-size:13px;opacity:.9}
@media (max-width:720px){.footer-grid{grid-template-columns:1fr}}


/* Search form */
.search{margin-left:12px; display:flex; gap:8px; align-items:center}
.search input[type="text"]{
  width:min(42vw, 380px);
  padding:10px 12px; border-radius:12px; border:1px solid var(--border);
  background:var(--surface); color:var(--text); box-shadow:var(--shadow);
}
@media (max-width:900px){ .search input[type="text"]{ width:min(50vw, 320px);} }
@media (max-width:720px){
  .hero-inner{flex-wrap:wrap}
  .search{order:3; width:100%; margin:8px 0 0 0}
  .search input[type="text"]{ width:100%; }
  .nav{order:2}
  .theme-toggle{order:4}
}


/* Clickable banner and overlayed logo */
.hero-link{ display:block; }
.hero-media{ position:relative; }
.hero-logo{
  position:absolute;
  top:14px; left:14px;
  width: 88px; height:auto;
  border-radius: 8px;
  background: rgba(255,255,255,0.9);
  padding:6px;
  box-shadow: var(--shadow);
}
@media (max-width:720px){
  .hero-logo{ width:72px; top:10px; left:10px; padding:5px; }
}


/* Ensure SVG is background-like and logo overlays it */
.hero-media{ position:relative; }
.hero-media svg{ display:block; width:100%; height:auto; }
.hero-logo{
  position:absolute;
  z-index:5;
  top:14px; left:14px;
  width:84px; height:auto;
  border-radius:8px;
  background:rgba(255,255,255,0.92);
  padding:6px;
  box-shadow:var(--shadow);
  pointer-events:none; /* click passes through to banner link */
}
@media (max-width:720px){
  .hero-logo{ width:68px; top:10px; left:10px; padding:5px; }
}