/* /test-svg/inc/theme.css */

/* ===== THEME COMMUN ===== */
:root{
  --bg1:#0b1020;
  --bg2:#0a0b0f;

  --card:rgba(255,255,255,.07);
  --card2:rgba(255,255,255,.05);
  --stroke:rgba(255,255,255,.12);

  --txt:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.70);
  --muted2:rgba(255,255,255,.55);

  --accent:#f5a623;

  --pill:rgba(0,0,0,.45);
  --shadow:0 18px 50px rgba(0,0,0,.35);

  --radius:20px;
  --radius2:16px;

  --navMax:1100px;
  --navH: 0px; /* mis à jour en JS depuis nav.php */
}

*{box-sizing:border-box;}
/*
  NOTE: min-height plutôt que height:100% évite des cas où le fond
  semble "s'arrêter" selon la longueur de page (notamment Safari).
*/
html,body{min-height:100%;}

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--txt);

  /* Assure un fond toujours assez "grand" quelle que soit la page */
  min-height: 100vh;

  background:
    radial-gradient(1200px 700px at 25% 10%, #1a245a 0%, rgba(26,36,90,0) 55%),
    radial-gradient(900px 600px at 70% 35%, #0c2c3f 0%, rgba(12,44,63,0) 55%),
    /* Glow bas de page pour les pages longues */
    radial-gradient(1200px 750px at 45% 115%, rgba(26,36,90,.75) 0%, rgba(26,36,90,0) 60%),
    linear-gradient(180deg, var(--bg1), var(--bg2));

  background-repeat: no-repeat;

  /* NAV = fixed → on pousse le contenu vers le bas */
  padding: calc(var(--navH) + 22px) 22px 38px;
}

/* ===== LAYOUT ===== */
.wrap{max-width:1100px;margin:0 auto;}
.grid{display:grid;grid-template-columns:1.1fr .9fr;gap:22px;align-items:start;}
@media (max-width: 980px){ .grid{grid-template-columns:1fr;} }

.card{
  background: linear-gradient(180deg, var(--card), var(--card2));
  border:1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
  backdrop-filter: blur(10px);
}
.card .inner{padding:22px;}

.pageTitle{
  margin:0 0 14px;
  font-size:22px;
  letter-spacing:.2px;
}

.sectionTitle{
  font-size:13px;
  letter-spacing:.2px;
  color:var(--muted);
  margin:18px 0 8px;
}

.sub{
  color:var(--muted);
  margin:0 0 14px;
  line-height:1.45;
}

/* ===== FORM CONTROLS ===== */
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.field{display:flex;flex-direction:column;gap:8px;}
label{font-size:12px;font-weight:800;color:var(--muted);}

input[type="text"],
input[type="number"],
select,
textarea{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.15);
  background: rgba(0,0,0,.35);
  color:var(--txt);
  outline:none;
}
textarea{min-height:84px;resize:vertical;}
input[type="color"]{
  width:100%;
  height:44px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.15);
  background: rgba(0,0,0,.35);
  padding:4px;
}

/* ===== BUTTONS ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:10px;
  padding:10px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.92);
  color:#101114;
  text-decoration:none;
  font-weight:750;
  box-shadow:0 8px 20px rgba(0,0,0,.18);
  transition:transform .12s ease, background .12s ease;
  user-select:none;
  cursor:pointer;
}
.btn:hover{transform:translateY(-1px);background:#fff;}
.btn .ico{width:18px;height:18px;display:block;flex:0 0 18px;}

.btn.is-active{
  background:#0b0b0d;
  color:#fff;
  border-color:rgba(255,255,255,.10);
}
.btn.is-active .ico{filter:brightness(0) invert(1);}

.btn.danger{
  background:#0b0b0d;
  color:#fff;
  border-color:rgba(255,255,255,.10);
}
.btn.danger .ico{filter:brightness(0) invert(1);}

/* Icônes pf-icon dans .btn = couleur du texte du bouton
   Par défaut .btn est blanc → icônes noires.
   Pour tout bouton avec color:#fff en inline style → icônes blanches. */
.btn .pf-icon { filter:brightness(0); opacity:.85; }
.btn[style*="color:#fff"] .pf-icon,
.btn.is-active .pf-icon,
.btn.danger .pf-icon { filter:brightness(0) invert(1); opacity:.88; }

/* ===== PREVIEW BOX ===== */
.previewBox{
  padding:18px;
  background: rgba(0,0,0,.30);
  border:1px dashed rgba(255,255,255,.20);
  border-radius: var(--radius2);
  display:flex;align-items:center;justify-content:center;
  min-height:330px;
  position:relative;
  overflow:hidden;
  cursor:pointer;
}
.previewBox object{width:300px;max-width:100%;height:auto;}
@media (max-width: 980px){
  .previewBox{min-height:280px;}
  .previewBox object{width:260px;}
}

.pill{
  position:absolute;left:14px;bottom:12px;
  background: var(--pill);
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  padding:6px 10px;
  font-size:12px;
  color:var(--muted);
  max-width:calc(100% - 28px);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  z-index:6;
}

/* ===== NAV (DESIGN PROPRE) ===== */
.topnav{
  position:fixed;
  top:0;left:0;right:0;
  z-index:1000;

  display:flex;
  justify-content:center;

  padding:14px 22px;

  background: linear-gradient(180deg, rgba(4,6,12,.82), rgba(4,6,12,.50));
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(14px);
}

.topnav-inner{
  width: min(var(--navMax), 100%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}

/* Ligne logo + boutons */
.navRow{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:18px;
}

/* Logo + tagline (SANS bouton carré) */
.brand{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  text-decoration:none;
  user-select:none;
}

.brandMark{display:block;line-height:0;}
.brandMark img{
  display:block;
  height:63px;           /* ✅ +~8% (58 -> 63) */
  width:auto;
  transition: height .18s ease;
}

/* ✅ La phrase sous le logo (à la place de "The PictoForge") */
.brandTagline{
  color:rgba(255,255,255,.90);
  font-size:14px;
  font-weight:600;
  letter-spacing:.2px;
  line-height:1.1;
  text-transform: lowercase;
  white-space:nowrap;
}

/* compact */
.topnav.is-compact .brandMark img{ height:48px; }
.topnav.is-compact .brandTagline{ font-size:13px; opacity:.92; }

/* Boutons pill (blancs) */
.navBtns{
  display:flex;
  gap:6px;
  align-items:center;
  flex-wrap:nowrap;
  overflow-x:auto;
  /* Espace vertical pour que les ombres et le translateY hover ne soient pas rognés */
  padding:5px 2px;
  margin:-5px -2px;
  /* Scrollbar ultra-discrète si trop d'éléments */
  scrollbar-width:none;         /* Firefox */
  -ms-overflow-style:none;      /* IE/Edge */
}
.navBtns::-webkit-scrollbar { display:none; } /* Chrome/Safari */

.navBtn{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:5px;

  padding:6px 10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.94);
  color:#101114;
  text-decoration:none;
  font-size:11px;
  font-weight:700;
  box-shadow:0 6px 16px rgba(0,0,0,.16);
  transition:transform .12s ease, background .12s ease, box-shadow .12s ease, border-color .12s ease;
  cursor:pointer;
  white-space:nowrap;
}
.navBtn:hover{
  transform:translateY(-1px);
  background:#fff;
  box-shadow:0 10px 24px rgba(0,0,0,.22);
}



.navBtn:active{
  transform:translateY(0px) scale(.98);
  box-shadow:0 6px 14px rgba(0,0,0,.18);
  border-color: rgba(0,0,0,.28);
}
.navBtn:focus-visible{
  outline:2px solid rgba(0,66,170,.9);
  outline-offset:3px;
}

.navBtn .ico{
  width:14px;height:14px;
  display:block;
  flex:0 0 14px;
  filter:brightness(0);
}
.navBtn.is-active{
  background:#fff;
  border-color: rgba(0,0,0,.22);
  box-shadow:0 10px 26px rgba(0,0,0,.26);
}

/* Responsive */
@media (max-width: 980px){
  .topnav{padding:12px 16px;}
  .navRow{justify-content:center;gap:14px;}
  .brand{align-items:center;}
  .brandMark img{height:56px;}              /* ✅ ajusté mobile */
  .brandTagline{font-size:13px;}
  .topnav.is-compact .brandMark img{height:48px;}
}

/* ===== HOME SOUND (optionnel) ===== */
.soundToggle{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:1200;

  width:48px;height:48px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px rgba(0,0,0,.25);
  cursor:pointer;
}
.soundToggle img{width:22px;height:22px;display:block;filter:brightness(0) invert(1);}
/* ===== NAV BUTTON FX (more visible) ===== */
/* Hover = inversion (blue background + white text/icon) */
.navBtn{
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease;
}
.navBtn .ico{
  transition: filter .15s ease, transform .15s ease;
}

.navBtn:hover{
  background:#0042AA;
  color:#fff;
  border-color: rgba(255,255,255,.88);
  transform: translateY(-2px) scale(1.03);
  box-shadow:
    0 16px 34px rgba(0,66,170,.38),
    0 12px 26px rgba(0,0,0,.30);
}
.navBtn:hover .ico{
  filter: brightness(0) invert(1);
}

/* Click = more pressed */
.navBtn:active{
  transform: translateY(3px) scale(.93);
  box-shadow:
    0 6px 14px rgba(0,0,0,.22),
    inset 0 2px 10px rgba(0,0,0,.40);
  border-color: rgba(255,255,255,.96);
}
.navBtn:active .ico{
  transform: scale(.95);
}

/* Focus clavier */
.navBtn:focus-visible{
  outline: 2px solid rgba(255,255,255,.95);
  outline-offset: 3px;
  box-shadow:
    0 0 0 6px rgba(0,66,170,.28),
    0 12px 26px rgba(0,0,0,.24);
}

/* Active page = dark blue, white border, white icon */
.navBtn.is-active{
  background:#002d7a;
  color:#fff;
  border-color: rgba(255,255,255,.92);
  box-shadow:
    0 16px 34px rgba(0,66,170,.35),
    0 12px 26px rgba(0,0,0,.32);
}
.navBtn.is-active .ico{
  filter: brightness(0) invert(1);
}
.navBtn.is-active:hover{
  background:#0042AA;
}