/*
Theme Name: Johjo 4.4.1
Theme URI: https://example.com/johjo
Author: Charlotte Martin
Author URI: https://example.com
Description: Thème autonome Johjo avec logo animé rendu via canvas (sans overlay), header sticky 130px. Aucune autre modification visuelle.
Version: 4.4.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: johjo
Tags: custom-logo, sticky-header, e-commerce
*/

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600&family=Inter:wght@400;600;700&display=swap');

:root{--bg:#FAFAF8;--text:#111;--muted:#444;--border:#E7E5E4;--accent:#111}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--text);background:var(--bg);line-height:1.6}
a{color:var(--text)}a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}
.container{width:min(1200px,92%);margin:0 auto}
h1,h2,h3,h4{font-family:'Cormorant Garamond',serif;letter-spacing:.01em}

/* Announcement bar */
.j-announcement{background:#F3EDE4;color:#111;font-size:.92rem}
.j-announcement__inner{padding:.4rem 0;text-align:center}

/* Header */
.j-header{background:#FAFAF8;border-bottom:1px solid var(--border)}
.j-header__row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.5rem;padding:.6rem 0}
.j-header__left,.j-header__right{display:flex;align-items:center;gap:.4rem;justify-content:flex-start}
.j-header__right{justify-content:flex-end}
.j-logo img{height:40px;width:auto}
.j-logo__text{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:1.35rem;letter-spacing:.06em}

.j-iconbtn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:999px;border:1px solid var(--border);background:#fff;color:#1a1a1a}
.j-iconbtn:hover{background:#f7f7f7}
.j-cart{position:relative}
.j-cart__count{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;border-radius:999px;background:#111;color:#FAFAF8;font-size:.7rem;display:inline-flex;align-items:center;justify-content:center;padding:0 5px}
.j-lang a{font-weight:600;color:#1a1a1a;opacity:.85}
.j-lang a.is-active{opacity:1}
.j-lang__sep{opacity:.4}

/* Drawer */
.j-drawer{position:fixed;inset:0;pointer-events:none;z-index:1000}
.j-drawer__panel{position:absolute;inset:0 auto 0 0;width:min(88vw,360px);transform:translateX(-100%);background:#fff;border-right:1px solid var(--border);box-shadow:2px 0 20px rgba(0,0,0,.06);transition:transform .28s ease}
.j-drawer__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.28);opacity:0;transition:opacity .28s ease}
.j-drawer[aria-hidden="false"]{pointer-events:auto}
.j-drawer[aria-hidden="false"] .j-drawer__panel{transform:translateX(0)}
.j-drawer[aria-hidden="false"] .j-drawer__backdrop{opacity:1}
.j-drawer__top{display:flex;align-items:center;gap:.5rem;padding:.6rem;border-bottom:1px solid var(--border)}
.j-search-inline{display:flex;align-items:center;gap:.35rem;flex:1}
.j-search-inline__input{flex:1;border:1px solid var(--border);border-radius:10px;height:36px;padding:0 .7rem;background:#fff}
.j-drawer__nav ul{list-style:none;margin:0;padding:.6rem}
.j-drawer__nav li{border-bottom:1px solid var(--border)}
.j-drawer__nav a{display:block;padding:.9rem .3rem;color:#111}
.j-drawer__nav a:hover{text-decoration:none;background:#fafafa}

/* Search overlay */
.j-search{position:fixed;inset:0;z-index:1001;pointer-events:none}
.j-search__panel{position:absolute;top:8vh;left:50%;transform:translateX(-50%) scale(.98);width:min(680px,92vw);background:#fff;border:1px solid var(--border);border-radius:16px;padding:1rem;box-shadow:0 10px 40px rgba(0,0,0,.08);transition:transform .2s ease, opacity .2s ease;opacity:0}
.j-search__panel form{display:flex;gap:.5rem}
.j-search__panel input[type="search"]{flex:1;border:1px solid var(--border);border-radius:10px;height:42px;padding:0 .9rem}
.j-search__panel .j-btn{height:42px;padding:0 1rem;border-radius:999px;border:1px solid var(--border);background:#111;color:#fff}
.j-search__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.28);opacity:0;transition:opacity .2s ease}
.j-search[aria-hidden="false"]{pointer-events:auto}
.j-search[aria-hidden="false"] .j-search__panel{opacity:1;transform:translateX(-50%) scale(1)}
.j-search[aria-hidden="false"] .j-search__backdrop{opacity:1}

/* Woo basics */
.woocommerce ul.products{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media(max-width:900px){.woocommerce ul.products{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.woocommerce ul.products{grid-template-columns:1fr}}

/* Utilities */
.no-scroll{overflow:hidden}
@media (max-width: 640px){.j-lang{display:none}.j-logo img{height:34px}}

/* Johjo 4.2.6: canvas-rendered logo; sizes and sticky header */
.johjo-canvas-link { display:inline-flex; align-items:center; justify-content:center; }
.johjo-canvas-wrap { display:inline-flex; align-items:center; justify-content:center; }
.custom-logo-canvas { display:inline-block; max-height:100px !important; height:auto; vertical-align:middle; pointer-events:none; }
@media (max-width:768px){ .custom-logo-canvas { max-height:80px !important; } }
.site-header, header.site-header, header[role="banner"] { min-height:130px !important; position: sticky; top:0; z-index:9999; }


/* === Johjo 4.2.8: Header icons without white circular background === */
header .menu-toggle,
header .search-toggle,
header .account-link,
header .cart-link,
header .header-icon,
header .icon-button,
header .site-header .icons a,
header .site-header .icons button,
header [class*="icon-"],
header .site-actions a,
header .site-actions button {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Ensure SVGs keep their current color, just remove any background circle */
header .menu-toggle svg,
header .search-toggle svg,
header .account-link svg,
header .cart-link svg,
header .header-icon svg,
header .icon-button svg,
header .site-header .icons a svg,
header .site-header .icons button svg,
header [class*="icon-"] svg,
header .site-actions a svg,
header .site-actions button svg {
  display: inline-block;
  vertical-align: middle;
}

/* Optional: keep hit area reasonable without visual circle */
header .menu-toggle,
header .search-toggle,
header .account-link,
header .cart-link,
header .icon-button,
header .site-header .icons a,
header .site-header .icons button {
  padding: 6px 8px; /* tweak if needed */
}


/* === Johjo 4.2.8.1: force-remove circular white backgrounds around header icons === */
.site-header, header.site-header, header[role="banner"] { /* keep sizes/sticky as-is if defined earlier */ }

/* 1) Neutralize backgrounds/borders/radius on all clickable items in header toolbars */
header a, header button {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* 2) Specific common classes used by themes/plugins */
header .menu-toggle, header .search-toggle, header .account-link, header .cart-link,
header .header-icon, header .icon, header .icon-button, header .icons a, header .icons button,
header [class*="icon-"], header [class*="Icon"], header [class*="btn-"], header .button {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* 3) Kill decorative pseudo-elements that draw the circle */
header a::before, header a::after, header button::before, header button::after {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* 4) If some wrappers add the circle */
header .icon-wrap, header .icon-wrapper, header .badge, header .circle, header .round, header .avatar {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* 5) Keep svg icons as-is */
header svg { display:inline-block; vertical-align:middle; }


/* === Johjo 4.2.9: Header language switcher (planet + current label) === */
header .lang-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 6px 8px; /* same hit-area as other icons */
}
header .lang-switch svg.planet {
  width: 22px; height: 22px;
  display: inline-block;
  vertical-align: middle;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
}
header .lang-switch .current-lang {
  font-size: 14px;
  line-height: 1;
}
header .lang-switch .lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #fff; /* assume light header; inherits text color */
  color: inherit;
  border: 1px solid rgba(0,0,0,0.1);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  border-radius: 10px;
  min-width: 170px;
  padding: 6px;
  display: none;
  z-index: 10000;
}
header .lang-switch.open .lang-menu { display: block; }
header .lang-switch .lang-menu a {
  display: block;
  padding: 10px 12px;
  color: inherit;
  text-decoration: none;
  background: transparent;
  border-radius: 8px;
}
header .lang-switch .lang-menu a:hover {
  background: rgba(0,0,0,0.05);
}


/* === Johjo 4.2.9.1: Place language switcher before account icon and hide old FR/ES/EN === */

/* Hide any legacy inline FR / ES / EN text links inside header utility area */
header .languages, header .language-switcher, header .lang, header .wpml-ls, header .polylang, 
header a[href*="/fr"], header a[href*="/en"], header a[href*="/es"] {
  /* We'll hide only the small inline group; robust selector below handles common cases */
}
/* Heuristic: hide a small inline group that exactly prints FR / ES / EN */
header .site-header, header.site-header { }
header .legacy-lang-inline { display:none !important; }
header nav .lang-inline, header .lang-inline, header .header-langs { display:none !important; }
/* Text-node based fallback is handled by JS */

/* Keep visual style */
header .lang-switch { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 6px 8px; display:inline-flex; align-items:center; gap:8px; cursor:pointer; user-select:none; }
header .lang-switch svg.planet { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.6; }
header .lang-switch .current-lang { font-size: 14px; line-height: 1; }
header .lang-switch .lang-menu { position:absolute; top:calc(100% + 8px); right:0; background:#fff; color:inherit; border:1px solid rgba(0,0,0,.1); box-shadow:0 8px 24px rgba(0,0,0,.08); border-radius:10px; min-width:170px; padding:6px; display:none; z-index:10000; }
header .lang-switch.open .lang-menu { display:block; }
header .lang-switch .lang-menu a { display:block; padding:10px 12px; color:inherit; text-decoration:none; border-radius:8px; }
header .lang-switch .lang-menu a:hover { background: rgba(0,0,0,.05); }



header .wpml-ls, header .wpml-language-switcher, header .polylang-switcher,
header .lang-inline, header .header-langs, header .language-switcher, header .languages {
  display: none !important;
}
/* Also hide any direct small anchors that exactly read FR, ES, EN in the header utility cluster */
header .header-right a:where(:not([href*="account"])) {
  /* JS will replace the exact container; CSS fallback keeps things clean */
}


/* Apply JohjoSourceCode globally if present */
html, body,
body *:not(canvas.custom-logo-canvas):not(svg):not(.dashicons){
  font-family: "JohjoSourceCode", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}
/* Titles bold */
h1, h2, h3, h4, h5, h6,
.entry-title, .page-title, .widget-title,
.woocommerce-products-header__title, .product_title,
.site-title, .section-title{
  font-weight: 700;
  letter-spacing: 0.005em;
}

/* === Johjo 4.4.1: Home hero (tweaked) === */
.home .johjo-hero{ 
  --header-h: 120px; /* fallback, real header height inherited if available */
  position: relative;
  margin-top: 0; /* no white gap under header */
  min-height: calc(var(--header-h) * 5); /* about 5x header height */
  background: url("assets/images/hero-accueil.png") center/cover no-repeat;
  color: inherit; /* same color as header */
}
.johjo-hero__inner{
  position:absolute; inset:0;
  display:grid; place-items:center;
  gap:16px; text-align:center; padding:24px;
}
.johjo-hero__title{
  font-size: clamp(28px, 7vw, 70px);
  white-space: nowrap; /* keep on one line */
  font-weight: 700; line-height:1.05; margin:0;
  color: inherit;
  opacity:0; transform: translateY(6px);
  transition: opacity .6s ease, transform .6s ease;
}
.johjo-hero__cta{
  display:inline-flex; align-items:center; gap:10px;
  font-size:20px; font-weight:700; text-decoration:none; color:inherit;
  padding-bottom: 0; border: 0; /* no underline */
  opacity:0; transform: translateY(6px);
  transition: opacity .6s ease .08s, transform .6s ease .08s;
}
.johjo-hero__cta:hover{ text-decoration:none; border:0; }
.johjo-hero__arrow{ width:22px; height:22px; display:inline-block; transition: transform .2s ease; }
.johjo-hero__cta:hover .johjo-hero__arrow{ transform: translateX(6px); }
.johjo-hero__arrow{ width:22px; height:22px; display:inline-block; }
.johjo-hero.play .johjo-hero__title,
.johjo-hero.play .johjo-hero__cta{
  display:inline-flex; align-items:center; gap:10px;
  font-size:20px; font-weight:700; text-decoration:none; color:inherit;
  padding-bottom: 0; border: 0; /* no underline */
  opacity:0; transform: translateY(6px);
  transition: opacity .6s ease .08s, transform .6s ease .08s;
}
.johjo-hero__cta:hover{ text-decoration:none; border:0; }
.johjo-hero__arrow{ width:22px; height:22px; display:inline-block; transition: transform .2s ease; }
.johjo-hero__cta:hover .johjo-hero__arrow{ transform: translateX(6px); }

/* Page transition on CTA click */
body.page-transition { transition: opacity .3s ease; opacity: .2; }

@media (max-width:768px){ .home .johjo-hero{ --header-h: 110px; min-height: calc(var(--header-h) * 5); } .johjo-hero__cta{ font-size:18px; } }
  .johjo-hero__cta{
  display:inline-flex; align-items:center; gap:10px;
  font-size:20px; font-weight:700; text-decoration:none; color:inherit;
  padding-bottom: 0; border: 0; /* no underline */
  opacity:0; transform: translateY(6px);
  transition: opacity .6s ease .08s, transform .6s ease .08s;
}
.johjo-hero__cta:hover{ text-decoration:none; border:0; }
.johjo-hero__arrow{ width:22px; height:22px; display:inline-block; transition: transform .2s ease; }
.johjo-hero__cta:hover .johjo-hero__arrow{ transform: translateX(6px); }
}