/*
Theme Name: Feeling Tattoo Classic
Theme URI: https://www.feeling-tattoo-piercing.com/
Author: Feeling Tattoo
Description: v3.8.6 — Headbanner overlay robuste (visible), sans fond noir, superpose sur le contenu.
Version: 3.8.6
Tested up to: 6.5.6
Requires PHP: 7.4
License: GPL-2.0+
Text Domain: feeling-tattoo-classic
*/

:root{
  --ftc-header-banner:url('https://www.feeling-tattoo-piercing.com/wp-content/uploads/2024/03/header_banner-1.png');
  --ftc-bg-inside:url('https://www.feeling-tattoo-piercing.com/wp-content/uploads/2024/03/background-inside-1.png');
  --ftc-bg-global:url('https://www.feeling-tattoo-piercing.com/wp-content/uploads/2024/03/background-1.png');
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,Arial,sans-serif;
  color:#222;
  background:
    var(--ftc-bg-global) repeat-x center top,
    #fff;
}

/* Bannière : overlay PNG explicite, visible et au-dessus du contenu */
#banner{
  position:relative;
  width:100%;
  height:300px; /* hauteur explicite */
  background:transparent;
}
#banner::after{
  content:"";
  position:absolute;
  left:50%; top:0;
  transform:translateX(-50%);
  width:100%;
  height:320px; /* plus grand pour chevauchement */
  background:var(--ftc-header-banner) no-repeat center top;
  background-size:contain; /* visiblement adaptée */
  z-index:5;
  pointer-events:none;
}
#site-header-inner{position:relative;z-index:6;height:100%;max-width:960px;margin:0 auto}

/* Chevauchement du bas du logo sur le contenu */
#wrap{max-width:960px;margin:-50px auto 40px;display:flex;gap:20px;position:relative;z-index:4}

#sidebar{width:260px;flex:0 0 260px}
#content{flex:1 1 auto;min-width:0}

/* Menu latéral avec background-inside */
#sidebar .widget_nav_menu{position:relative;background:#fff;padding:12px 14px;border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,.05);overflow:hidden}
#sidebar .widget_nav_menu::before{content:"";position:absolute;inset:0;background:var(--ftc-bg-inside) no-repeat center 40px;background-size:100% auto;opacity:.35;z-index:0;pointer-events:none}
#sidebar .widget_nav_menu .menu{list-style:none;padding:0;margin:0;position:relative;z-index:1}
#sidebar .widget_nav_menu>.menu>li{font-size:20px;line-height:1.15;font-weight:700;padding:10px 4px;border-bottom:1px solid rgba(0,0,0,.1)}
#sidebar .widget_nav_menu>.menu>li:last-child{border-bottom:none}
#sidebar .widget_nav_menu .menu a{color:#111;text-decoration:none;display:block}
#sidebar .widget_nav_menu .menu a:hover{text-decoration:underline}
#sidebar .widget_nav_menu .menu .sub-menu{list-style:none;margin:6px 0 8px 14px;padding:0}
#sidebar .widget_nav_menu .menu .sub-menu li{font-size:15px;font-weight:500;line-height:1.25;padding:6px 0;border:0}
#sidebar .menu .current-menu-item>a,#sidebar .menu .current_page_item>a{font-weight:800}

/* Contenu */
.entry{background:#fff;padding:16px 18px;border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,.05)}
.entry img{max-width:100%;height:auto;border-radius:4px}

/* Footer */
#site-footer{max-width:960px;margin:30px auto 60px;padding:10px 8px;color:#555;font-size:14px;text-align:center}
#site-footer a{color:inherit}

/* Responsive */
@media (max-width: 1024px){
  #banner{height:260px}
  #banner::after{height:280px}
  #wrap{margin:-40px auto 32px}
}
@media (max-width: 768px){
  #wrap{flex-direction:column}
  #sidebar{width:100%;flex:auto}
}

/* === FTC hotfix p8: headbanner 63% + sidebar plus haut === */
:root{ --ftc-head-width: 63%; --ftc-sidebar-pull: 82px; }
/* taille bannière inchangée */
#banner::after{ width: var(--ftc-head-width) !important; background-size: 100% auto !important; }
/* remonte seulement le menu latéral sans toucher le reste */
#sidebar{ margin-top: calc(-1 * var(--ftc-sidebar-pull)) !important; }
#sidebar > .widget:first-child, #sidebar .widget_nav_menu{ margin-top:0 !important; padding-top:0 !important; }