/* ============================================================
   nanodeus — thème japonais v3 (fond corrigé -> cible #__next)
   /opt/homepage/public/config/custom.css
   Homepage v2 peint la couleur de thème sur html/body/#__next :
   #__next est opaque et au-dessus du body -> on pose le fond dessus.
   ⚠️ Après modif : docker compose down && up + Ctrl+Shift+R.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@500;700;800&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap');

:root {
  --jp-sakura: #e8879c;   /* 桜 */
  --jp-ai:     #2b4a7a;   /* 藍 */
  --jp-sumi:   #14161c;   /* 墨 */
}

html, body { font-family: 'Zen Kaku Gothic New', ui-sans-serif, system-ui, sans-serif !important; }

/* --- LE FOND : sur #__next (l'élément opaque de Homepage) --- */
html, body, #__next { background-color: var(--jp-sumi) !important; }

#__next {
  background-image:
    radial-gradient(circle at 100% 50%, transparent 33%, rgba(232,135,156,.14) 33%, rgba(232,135,156,.14) 41%, transparent 41%),
    radial-gradient(circle at 0 50%,   transparent 33%, rgba(120,160,220,.18) 33%, rgba(120,160,220,.18) 41%, transparent 41%),
    radial-gradient(1200px 800px at 50% -10%, rgba(43,74,122,.55), transparent 60%),
    linear-gradient(180deg, #1b2233 0%, #14161c 60%) !important;
  background-size: 54px 54px, 54px 54px, 100% 100%, 100% 100% !important;
  background-position: 0 0, 27px 27px, 0 0, 0 0 !important;
  background-repeat: repeat, repeat, no-repeat, no-repeat !important;
}

/* --- Titres mincho + accent sakura (déjà fonctionnels) --- */
h1, h2, #greeting {
  font-family: 'Shippori Mincho', serif !important;
  letter-spacing: .02em;
}
#greeting { color: var(--jp-sakura) !important; }
h2 { border-bottom: 2px solid var(--jp-sakura); padding-bottom: .2rem; }

/* --- CARTES : services ET bookmarks (vraies classes) --- */
.service .service-title,
.bookmark a {
  border: 1.5px solid rgba(232,135,156,.16) !important;
  border-radius: 14px !important;
  background-color: rgba(30, 30, 30, 0.75) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: border-color .15s ease, transform .15s ease, background-color .15s ease;
}
.service .service-title:hover,
.bookmark a:hover {
  border-color: var(--jp-sakura) !important;
  transform: translateY(-2px); 
  background-color: rgba(50, 50, 50, 0.95) !important;
}
 
/* Unifie le fond des deux moitiés internes du bookmark (sinon la partie
   icône garde un fond bg-theme différent -> effet "deux blocs") */
.bookmark-icon,
.bookmark-text { background: transparent !important; }