/* ════════════════════════════════════════════════════════════
   brushes.css - La Planète Takoo v2
   Brushes UNIQUEMENT pour la nav principale du site.
   Boutique.html n'utilise PAS de brushes (clean design).
   ════════════════════════════════════════════════════════════ */

/* ════ NAV LINKS (6 brushes peints) ════ */

.nav-link--brush {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 168px;
  height: 46px;
  padding: 0 4px;
  background-color: transparent !important;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  border-radius: 0;
  color: transparent;
  font-size: 0;
  transition: transform .18s ease, filter .18s ease;
  cursor: pointer;
}

.nav-link--brush .brush-text {
  position: absolute;
  left: 9%;
  right: 14%;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Permanent Marker', cursive;
  font-size: 14px;
  color: #1f0a05;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
  text-align: center;
  filter: url(#brush-grunge-medium);
  pointer-events: none;
}

.nav-link--brush > svg {
  position: absolute;
  right: 5%;
  top: 50%;
  transform: translateY(-50%);
  width: 9px;
  height: 6px;
  opacity: .55;
  color: #1f0a05;
  z-index: 2;
  pointer-events: none;
  transition: transform .2s, opacity .2s;
}
.nav-item:hover .nav-link--brush > svg {
  transform: translateY(-50%) rotate(180deg);
  opacity: .85;
}

.nav-link--brush[data-brush="serie"]      { background-image: url("../brushes/BRUSH_NAV_SERIE.png"); }
.nav-link--brush[data-brush="boutique"]   { background-image: url("../brushes/BRUSH_NAV_BOUTIQUE.png"); }
.nav-link--brush[data-brush="soutenir"]   { background-image: url("../brushes/BRUSH_NAV_SOUTENIR.png"); }
.nav-link--brush[data-brush="actualites"] { background-image: url("../brushes/BRUSH_NAV_ACTUALITES.png"); }
.nav-link--brush[data-brush="communaute"] { background-image: url("../brushes/BRUSH_NAV_COMMUNAUTE.png"); }
.nav-link--brush[data-brush="faq"]        { background-image: url("../brushes/BRUSH_NAV_FAQ.png"); }

.nav-link--brush:hover {
  background-color: transparent !important;
  transform: translateY(-1px) scale(1.03);
  filter: brightness(1.08) drop-shadow(0 3px 8px rgba(0,0,0,.4));
}
.nav-link--brush:hover .brush-text { color: #3a1408; }

/* CRITICAL FIX : neutralize :active / .active dark background */
.nav-link--brush:active,
.nav-link--brush.active,
.nav-link--brush:focus {
  background-color: transparent !important;
  outline: none;
}
.nav-link--brush:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}

/* ════ NAV CTA BRUSH (Boutique →) ════ */

.nav-btn--brush {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 175px;
  height: 46px;
  padding: 0;
  background-color: transparent !important;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  border: none !important;
  border-radius: 0;
  box-shadow: none !important;
  color: transparent;
  font-size: 0;
  transition: transform .18s ease, filter .18s ease;
}
.nav-btn--brush .brush-text {
  position: absolute;
  left: 8%;
  right: 16%;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Permanent Marker', cursive;
  font-size: 14px;
  color: #1f0a05;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
  text-align: center;
  filter: url(#brush-grunge-medium);
  pointer-events: none;
}
.nav-btn--brush[data-brush="cta-boutique"] { background-image: url("../brushes/BRUSH_NAV_CTA_BOUTIQUE.png"); }
.nav-btn--brush[data-brush="cta-tipeee"]   { background-image: url("../brushes/BRUSH_NAV_CTA_TIPEEE.png"); }

.nav-btn--brush:hover {
  transform: translateY(-1px) scale(1.04);
  filter: brightness(1.08) drop-shadow(0 4px 10px rgba(0,0,0,.4));
  box-shadow: none !important;
  background-color: transparent !important;
}
.nav-btn--brush:active, .nav-btn--brush.active, .nav-btn--brush:focus {
  background-color: transparent !important;
  outline: none;
}

/* ════ i18n FALLBACK (langues != FR) ════ */
html:not([lang="fr"]) .nav-link--brush,
html:not([lang="fr"]) .nav-btn--brush {
  background-image: none !important;
  width: auto;
  padding: 8px 14px;
  color: var(--ivory-mute);
  font-size: .82rem;
  font-weight: 700;
  font-family: 'Rajdhani', sans-serif;
  text-transform: uppercase;
  letter-spacing: .12em;
  border-radius: 6px;
}
html:not([lang="fr"]) .nav-link--brush .brush-text,
html:not([lang="fr"]) .nav-btn--brush .brush-text {
  position: static;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  filter: none;
  transform: none;
  text-transform: inherit;
  letter-spacing: inherit;
}

/* ════ RESPONSIVE ════ */
@media (max-width: 1280px) {
  .nav-link--brush { width: 148px; height: 42px; }
  .nav-link--brush .brush-text { font-size: 13px; }
  .nav-btn--brush { width: 152px; height: 42px; }
  .nav-btn--brush .brush-text { font-size: 13px; }
}
@media (max-width: 1100px) {
  .nav-link--brush { width: 130px; height: 38px; }
  .nav-link--brush .brush-text { font-size: 12px; }
  .nav-btn--brush { width: 138px; height: 38px; }
  .nav-btn--brush .brush-text { font-size: 12px; }
}
@media (max-width: 860px) {
  /* Hidden on mobile - hamburger menu kicks in (handled by takoo.css) */
}

/* ════ AJOUT V4 - NAV RECTANGULAIRE + TAKOOVERSE + LANGUE ════ */
.nav-link--brush[data-brush="takooverse"] { background-image: url("../brushes/BRUSH_NAV_TAKOOVERSE.png"); }
.lang-btn {
  min-width: 178px;
  height: 46px;
  justify-content: center;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent url("../brushes/BRUSH_NAV_LANGUE.png") center/100% 100% no-repeat !important;
  color: #1f0a05 !important;
  box-shadow: none !important;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 800;
  letter-spacing: .04em;
}
.lang-btn svg { color: #1f0a05 !important; opacity: .8; }

/* ════ AJOUT V4 - MEGA MENU AVEC BACKGROUNDS PEINTS ════ */
.mega-item--brush {
  position: relative;
  min-height: 92px;
  padding: 22px 112px 18px 26px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  color: #1f0a05 !important;
  border-radius: 8px !important;
  overflow: hidden;
}
.mega-item--brush:hover { filter: brightness(1.06) drop-shadow(0 6px 16px rgba(0,0,0,.35)); }
.mega-item--brush strong { color: #1f0a05 !important; font-size: 1.06rem !important; font-weight: 800 !important; }
.mega-item--brush span { color: rgba(31,10,5,.78) !important; font-weight: 600 !important; }
.mega-item--brush[data-mega="tome7"] { background-image: url("../brushes/MEGA_TOME7.png") !important; }
.mega-item--brush[data-mega="catalogue"] { background-image: url("../brushes/MEGA_CATALOGUE.png") !important; }
.mega-item--brush[data-mega="personnages"] { background-image: url("../brushes/MEGA_PERSONNAGES.png") !important; }
.mega-item--brush[data-mega="univers"] { background-image: url("../brushes/MEGA_UNIVERS.png") !important; }
.mega-item--brush[data-mega="ulule"] { background-image: url("../brushes/MEGA_ULULE.png") !important; }
.mega-item--brush[data-mega="tipeee"] { background-image: url("../brushes/MEGA_TIPEEE.png") !important; }

/* ════ AJOUT V4 - BOUTONS CTA PEINTS, TEXTE HTML CONSERVÉ ════ */
.btn-brush {
  min-height: 58px;
  padding: 16px 34px;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  color: #1f0a05 !important;
  box-shadow: none !important;
  text-shadow: 0 1px 0 rgba(245,239,224,.35);
}
.btn-brush:hover { transform: translateY(-2px) scale(1.015); filter: brightness(1.05) drop-shadow(0 5px 14px rgba(0,0,0,.42)); box-shadow: none !important; }
.btn-full.btn-brush { width: 100%; }
.btn-brush[data-btn="commander-tome"] { background-image: url("../brushes/BTN_COMMANDER_TOME.png") !important; }
.btn-brush[data-btn="precommander-ulule"] { background-image: url("../brushes/BTN_PRECOMMANDER_ULULE.png") !important; }
.btn-brush[data-btn="commander-tous-tomes"] { background-image: url("../brushes/BTN_COMMANDER_TOUS_TOMES.png") !important; }
.btn-brush[data-btn="en-savoir-plus"] { background-image: url("../brushes/BTN_EN_SAVOIR_PLUS.png") !important; }
.btn-brush[data-btn="commander-integral"] { background-image: url("../brushes/BTN_COMMANDER_INTEGRAL.png") !important; }
.btn-brush[data-btn="voir-amazon"] { background-image: url("../brushes/BTN_VOIR_AMAZON.png") !important; }
.btn-brush[data-btn="voir-googleplay"] { background-image: url("../brushes/BTN_VOIR_GOOGLEPLAY.png") !important; }
.btn-brush[data-btn="voir-trailer"] { background-image: url("../brushes/BTN_VOIR_TRAILER.png") !important; }
.btn-brush[data-btn="soutenir-jeu-tipeee"] { background-image: url("../brushes/BTN_SOUTENIR_JEU_TIPEEE.png") !important; }
.btn-brush[data-btn="soutenir-manga"] { background-image: url("../brushes/BTN_SOUTENIR_MANGA.png") !important; }
.btn-brush[data-btn="soutenir-jeu"] { background-image: url("../brushes/BTN_SOUTENIR_JEU.png") !important; }
.btn-brush[data-btn="soutenir-tipeee"] { background-image: url("../brushes/BTN_SOUTENIR_TIPEEE.png") !important; }
.btn-brush[data-btn="discord-annonces"] { background-image: url("../brushes/BTN_DISCORD_ANNONCES.png") !important; }
.btn-brush[data-btn="sabonner"] { background-image: url("../brushes/BTN_SABONNER.png") !important; }

/* Boutique header brush backgrounds */
.nav-link--brush[data-brush="accueil"] { background-image: url("../brushes/BRUSH_NAV_TAKOOVERSE.png"); }
.nav-link--brush[data-brush="personnages"] { background-image: url("../brushes/BRUSH_NAV_ACTUALITES.png"); }

/* Keep painted navigation buttons in every language */
html:not([lang="fr"]) .nav-link--brush {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 168px !important;
  height: 46px !important;
  padding: 0 4px !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: contain !important;
  border-radius: 0 !important;
  color: transparent !important;
  font-size: 0 !important;
}
html:not([lang="fr"]) .nav-link--brush .brush-text,
html:not([lang="fr"]) .nav-btn--brush .brush-text {
  position: absolute !important;
  left: 7% !important;
  right: 14% !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-family: 'Permanent Marker', cursive !important;
  font-size: 12px !important;
  color: #1f0a05 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-align: center !important;
  filter: url(#brush-grunge-medium) !important;
}
html:not([lang="fr"]) .nav-btn--brush {
  width: 175px !important;
  height: 46px !important;
  padding: 0 !important;
  color: transparent !important;
  font-size: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: contain !important;
}
html:not([lang="fr"]) .nav-link--brush[data-brush="serie"] { background-image: url("../brushes/BRUSH_NAV_SERIE.png") !important; }
html:not([lang="fr"]) .nav-link--brush[data-brush="boutique"] { background-image: url("../brushes/BRUSH_NAV_BOUTIQUE.png") !important; }
html:not([lang="fr"]) .nav-link--brush[data-brush="soutenir"] { background-image: url("../brushes/BRUSH_NAV_SOUTENIR.png") !important; }
html:not([lang="fr"]) .nav-link--brush[data-brush="actualites"] { background-image: url("../brushes/BRUSH_NAV_ACTUALITES.png") !important; }
html:not([lang="fr"]) .nav-link--brush[data-brush="communaute"] { background-image: url("../brushes/BRUSH_NAV_COMMUNAUTE.png") !important; }
html:not([lang="fr"]) .nav-link--brush[data-brush="faq"] { background-image: url("../brushes/BRUSH_NAV_FAQ.png") !important; }
html:not([lang="fr"]) .nav-link--brush[data-brush="takooverse"] { background-image: url("../brushes/BRUSH_NAV_TAKOOVERSE.png") !important; }
html:not([lang="fr"]) .nav-link--brush[data-brush="accueil"] { background-image: url("../brushes/BRUSH_NAV_TAKOOVERSE.png") !important; }
html:not([lang="fr"]) .nav-link--brush[data-brush="personnages"] { background-image: url("../brushes/BRUSH_NAV_ACTUALITES.png") !important; }
html:not([lang="fr"]) .nav-btn--brush[data-brush="cta-boutique"] { background-image: url("../brushes/BRUSH_NAV_CTA_BOUTIQUE.png") !important; }
html:not([lang="fr"]) .nav-btn--brush[data-brush="cta-tipeee"] { background-image: url("../brushes/BRUSH_NAV_CTA_TIPEEE.png") !important; }