/* ===========================================================
   OptimTools — Thème Netflix-like noir + orange (#FF6600)
   =========================================================== */

/* ---------- Design tokens (dark par défaut) ---------- */
:root{
  --bg:#0b0b0f; --bg2:#101017; --surface:#15151e; --card:#14141d; --line:#232332;
  --text:#f1f1f5; --muted:#aaaabb; --accent:#FF6600; --accent-soft:rgba(255,102,0,.14);
  --radius:16px; --shadow:0 20px 60px rgba(0,0,0,.35);
}

/* ---------- Reset de base ---------- */
*{ box-sizing:border-box }
html, body{ height:100% }
body{
  margin:0;
  background:linear-gradient(180deg,var(--bg),#0e0e15 55%, var(--bg2));
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
a{ color:#fff; text-decoration:none }

/* ===========================================================
   Splash (utilisé sur index)
   =========================================================== */
.splash{
  position:fixed; inset:0; z-index:50;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(1000px 500px at 20% -10%, #FF660022, transparent 60%), var(--bg);
  transition:opacity .6s ease;
}
.splash .glow{
  position:absolute; width:60vmin; height:60vmin; border-radius:50%;
  background:radial-gradient(circle at center, #FF660033, transparent 60%); filter:blur(40px);
  opacity:0; animation:fade 1.6s ease .2s forwards;
}
.splash .logo{
  width:min(28vmin,180px); height:auto; opacity:0; transform:scale(.6);
  animation:pop 900ms cubic-bezier(.2,.8,.2,1) forwards;
}
.splash.hide{ opacity:0; pointer-events:none }
@keyframes pop{ to{ opacity:1; transform:scale(1) } }
@keyframes fade{ to{ opacity:1 } }

/* ===========================================================
   Carte/panel réutilisable (identique login)
   =========================================================== */
.wrap{ min-height:100%; display:flex; align-items:center; justify-content:center; padding:24px }
.panel{
  width:min(460px, 92vw);
  background:linear-gradient(180deg,#171721,#14141d);
  border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow); overflow:hidden;
}
.header{
  padding:26px 26px 10px; display:flex; align-items:center; gap:12px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.brand{ display:flex; align-items:center; gap:10px; color:#fff }
.brand .logo.small{ width:32px; height:32px; border-radius:8px; object-fit:cover; display:inline-block }
.title{ font-weight:800; letter-spacing:.2px }

.body{ padding:22px 26px 26px }
h1{ margin:0 0 4px; font-size:clamp(18px, 3.6vw, 22px) }
.muted{ margin:0; color:var(--muted); font-size:14px }

/* Form / inputs / buttons */
.form{ margin-top:16px; display:grid; gap:12px }
.label{ font-size:12px; color:var(--muted); margin-bottom:6px; display:block }
.input{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--line);
  background:#0f0f16; color:#fff; outline:none;
}
.input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft) }
.row{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap }
.checkbox{ display:flex; align-items:center; gap:8px; font-size:14px; color:#ddd }

.btn{
  width:100%; padding:12px 16px; border-radius:12px; border:1px solid #d85500;
  background:linear-gradient(180deg, var(--accent), #d85500); color:#fff; font-weight:700; cursor:pointer;
  box-shadow:0 10px 30px rgba(255,102,0,.18);
  text-align:center; display:inline-block;
}
.btn:hover{ transform:translateY(-1px) }

/* Pile de CTA (assure les boutons sous le texte) */
.stack{ display:grid; gap:12px; max-width:260px; margin:0 auto }

/* Message d’erreur générique */
.error{
  margin-top:8px; padding:10px 12px; border:1px solid #7f1d1d; color:#fecaca; background:#2a0b0b;
  border-radius:10px; font-size:14px;
}

/* ===========================================================
   Footer (fixé en bas) — compatible avec footer.php
   =========================================================== */
.footer{
  position:fixed; z-index:40;
  left:0; right:0; bottom:0; width:100%;
  padding:14px 20px; color:#9aa;
  border-top:1px solid rgba(255,255,255,.06);
  background:var(--bg2);
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
}
.footer .inner{ max-width:1300px; margin:0 auto; width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap }
.footer a{ color:#bcbcd6 } .footer a:hover{ color:#fff }

/* ===========================================================
   Bouton de bascule (depuis footer.php) — réapparaît au-dessus du footer
   =========================================================== */
.theme-toggle{
  position:fixed; right:18px; bottom:82px; /* 82px = au-dessus du footer fixe */
  z-index:120;
  border:1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  border-radius: 999px;
  padding: 10px 12px;
  box-shadow: var(--shadow);
  cursor: pointer;
  display:flex; align-items:center; gap:8px;
}
.theme-toggle:hover{
  box-shadow: 0 12px 30px rgba(255,102,0,.12);
  border-color: var(--accent);
}
.tt-icon{ font-size:16px; line-height:1; }

/* ===========================================================
   Landing (index) — fond image + voile orange
   =========================================================== */
.landing{
  min-height:100vh;
  background:
    linear-gradient(135deg, rgba(255,102,0,0.85), rgba(255,153,102,0.80)),
    url('https://images.unsplash.com/photo-1549921296-3a4b5c050b6b?auto=format&fit=crop&w=1600&q=80')
    no-repeat center center fixed;
  background-size:cover;
}
html[data-theme="light"] .landing{
  background:
    linear-gradient(135deg, rgba(255,102,0,0.25), rgba(255,153,102,0.22)),
    url('https://images.unsplash.com/photo-1549921296-3a4b5c050b6b?auto=format&fit=crop&w=1600&q=80')
    no-repeat center center fixed;
  background-size:cover;
}

/* Conteneur 100vh centré (pas de padding-bottom -> pas de scroll) */
.center-container{
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}

/* Note en bas de carte (index) */
.footer-note{ margin-top:20px; font-size:13px; color:var(--muted) }

/* ===========================================================
   Variantes de thème (light / dark explicite)
   =========================================================== */
html[data-theme="light"]{
  --bg:#f6f7fb; --bg2:#ffffff; --surface:#ffffff; --card:#ffffff; --line:#e6e8ef;
  --text:#0b0b0f; --muted:#5c6b7a; --accent:#FF6600; --accent-soft:rgba(255,102,0,.16);
  --shadow:0 12px 30px rgba(10,20,30,.08);
}
html[data-theme="light"] body{
  background: linear-gradient(180deg, var(--bg), var(--bg2));
}
html[data-theme="light"] .panel,
html[data-theme="light"] .card{
  background:linear-gradient(180deg,#ffffff,#fbfbfd);
  border-color: var(--line);
  box-shadow: var(--shadow);
}
html[data-theme="light"] .input{ background:#fff; color:#0b0b0f; border-color:#dfe3ea; }
html[data-theme="light"] .muted{ color:#5c6b7a; }
html[data-theme="light"] .footer{ color:#637285; border-top-color:#e6e8ef; background:#ffffffea; }
html[data-theme="light"] a{ color:#111; }
html[data-theme="light"] .splash{
  background: radial-gradient(1000px 500px at 20% -10%, #FF660022, transparent 60%), var(--bg);
}

/* Dark explicite */
html[data-theme="dark"]{
  --bg:#0b0b0f; --bg2:#101017; --surface:#15151e; --card:#14141d; --line:#232332;
  --text:#f1f1f5; --muted:#aaaabb; --accent:#FF6600; --accent-soft:rgba(255,102,0,.14);
  --shadow:0 20px 60px rgba(0,0,0,.35);
}
html[data-theme="dark"] body{
  background:linear-gradient(180deg,var(--bg),#0e0e15 55%, var(--bg2));
}


/* Alignement vertical pour les pages simples (login, register, forgot) */
.wrap-center {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

/* Panel de connexion/inscription */
.panel-auth {
    width: min(420px, 94vw);
}

/* Boutons pleine largeur */
.w-full {
    width: 100%;
}

/* Alertes succès/erreur */
.alert {
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 0.95rem;
    margin-bottom: 14px;
}
.alert.success {
    background-color: rgba(16, 185, 129, 0.15);
    border: 1px solid #10b981;
    color: #10b981;
}
.alert.error {
    background-color: rgba(239, 68, 68, 0.15);
    border: 1px solid #ef4444;
    color: #ef4444;
}

/* Register: centrage + largeur panel */
.wrap-center{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px }
.panel-register{ width:min(540px,94vw) }

/* Alertes (réutilisées partout) */
.alert{ padding:10px 14px; border-radius:6px; font-size:.95rem; margin-bottom:14px }
.alert.error{ background-color:rgba(239,68,68,.15); border:1px solid #ef4444; color:#ef4444 }
.alert.success{ background-color:rgba(16,185,129,.15); border:1px solid #10b981; color:#10b981 }

/* Bouton pleine largeur */
.w-full{ width:100% }

/* Toggle mot de passe + barre de force */
.password-toggle{ position:relative }
.password-toggle .eye{
  position:absolute; right:12px; top:38px; cursor:pointer; background:transparent; border:0; font-size:16px; opacity:.8;
}
.strength-bar{ height:8px; background:#0f0f16; border-radius:999px; margin-top:6px; overflow:hidden; border:1px solid var(--line) }
.strength-fill{ height:100%; width:0; background:#dc2626; transition:width .25s ease, background-color .25s ease }

/* ===== Header Netflix-like ===== */
.app-header{
  position:sticky; top:0; z-index:80;
  background:linear-gradient(180deg, rgba(11,11,15,.95), rgba(11,11,15,.80));
  border-bottom:1px solid rgba(255,255,255,.06);
  backdrop-filter: saturate(140%) blur(6px);
  transition: transform .2s ease, background .2s ease;
}
.app-header.hide{ transform: translateY(-100%); }
.app-header.scrolled{ background: rgba(11,11,15,.92); }
.app-header .inner{
  max-width:1300px; margin:0 auto; padding:10px 16px;
  display:flex; align-items:center; gap:18px; justify-content:space-between;
}
.brand{ display:flex; align-items:center; gap:10px; color:#fff; text-decoration:none }
.brand-logo{ width:28px; height:28px; border-radius:6px; object-fit:cover }
.brand-title{ font-weight:800; letter-spacing:.2px }

.nav{ display:flex; gap:14px; align-items:center }
.nav-link{
  color:#dcddeb; padding:8px 10px; border-radius:8px; text-decoration:none; font-weight:600;
}
.nav-link:hover{ color:#fff; background: rgba(255,102,0,.12); }

.actions{ display:flex; align-items:center; gap:12px }

/* Profil */
.profile{ position:relative }
.profile-btn{
  display:flex; align-items:center; gap:8px; background:transparent; color:#fff;
  border:1px solid rgba(255,255,255,.12); padding:6px 10px; border-radius:999px; cursor:pointer;
}
.profile-btn:hover{ border-color:#FF6600; box-shadow:0 0 0 3px rgba(255,102,0,.12) }
.avatar{
  width:22px; height:22px; border-radius:50%; background:#FF6600; display:inline-grid; place-items:center;
  font-size:12px; color:#fff; font-weight:800;
}
.profile .name{ font-size:14px; opacity:.95 }
.profile .chev{ opacity:.7 }
.profile-menu{
  position:absolute; right:0; top:42px; min-width:180px; display:none;
  background:linear-gradient(180deg,#171721,#14141d);
  border:1px solid #232332; box-shadow:0 16px 40px rgba(0,0,0,.35); border-radius:12px; overflow:hidden; z-index:90;
}
.profile-menu.open{ display:block; }
.menu-item{
  display:block; padding:10px 12px; color:#e8e8f2; text-decoration:none; font-size:14px;
}
.menu-item:hover{ background:rgba(255,102,0,.12); color:#fff }
.menu-item.danger{ color:#ffb4b4 }
.menu-item.danger:hover{ background:rgba(255,0,0,.08) }

/* Burger mobile */
.burger{ display:none; background:transparent; border:0; width:36px; height:36px; border-radius:8px; cursor:pointer }
.burger span{ display:block; height:2px; margin:6px 8px; background:#fff; }
@media (max-width: 960px){
  .nav{ position:fixed; left:0; right:0; top:54px; background:rgba(11,11,15,.98);
        border-bottom:1px solid rgba(255,255,255,.06); padding:10px 16px; display:none; }
  .nav.open{ display:flex; flex-direction:column; gap:8px }
  .burger{ display:block }
}

/* Light theme tweaks */
html[data-theme="light"] .app-header{
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.80));
  border-bottom-color:#e6e8ef;
}
html[data-theme="light"] .nav-link{ color:#20222c }
html[data-theme="light"] .nav-link:hover{ background: rgba(255,102,0,.10); color:#000 }
html[data-theme="light"] .profile-btn{ border-color:#e6e8ef; color:#111 }
html[data-theme="light"] .profile-menu{ background:#fff; border-color:#e6e8ef }
html[data-theme="light"] .menu-item{ color:#111 }

/* ===== Sticky footer global (safe avec ta sidebar) ===== */
:root { --footer-h: 64px; }

/* Footer collé en bas, au-dessus du contenu */
.footer{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: var(--footer-h);
  display: flex; align-items: center;
  z-index: 10; /* passe au-dessus des sections */
}

/* Le bouton de thème reste au-dessus du footer */
.theme-toggle{ bottom: calc(var(--footer-h) + 12px); }

/* Réserve l'espace du footer pour TOUTES les pages qui ont du contenu */
.content,
main,
.dash-main{
  padding-bottom: calc(var(--footer-h) + 16px) !important;
}

/* S’assure que les fades des rails restent sous le footer */
.row-scroller::before,
.row-scroller::after{ z-index: 0; }