@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600&display=swap');
/* HFQ TEST TEMPORAIRE */
body { outline: 4px solid red !important; background: #E8DDBE !important; }
/*
	Theme Name: The Issue Child Theme
	Theme URI: http://themeforest.net/user/fuelthemes
	Description: <strong>A Premium theme for magazine, editor, community and more! WordPress Theme by <a href="http://www.themeforest.net/user/fuelthemes">fuelthemes</a></strong> – Update notifications available on Twitter and Themeforest <a href="http://twitter.com/anteksiler">Follow us on twitter</a> – <a href="http://themeforest.net/user/fuelthemes">Follow us on Themeforest</a>
	Version: 1.0.0
	Author: fuelthemes
	Template: theissue
	Text Domain: theissue
	Domain Path: /inc/languages
*/


<?php
// Charger correctement les CSS parent + child
add_action('wp_enqueue_scripts', function () {
  // style du thème parent
  wp_enqueue_style('theissue-parent', get_template_directory_uri() . '/style.css', [], null);
  // style du child (le tien)
  wp_enqueue_style('hfq-child', get_stylesheet_directory_uri() . '/style.css', ['theissue-parent'], wp_get_theme()->get('Version'));
});

/* HFQ MENU BUTTONS */
:root{
  --hfq-yellow:#E9AE1E;
  --hfq-blue:#0E53CA;
  --hfq-red:#C93528;
  --hfq-beige:#F4E9CD;
  --hfq-ink:#1A1A1A;
}

/* Pastilles menu */
.thb-full-menu #menu-navigation-1 > li > a,
nav.thb-full-menu li.menu-item > a{
  display:inline-block;
  background:var(--hfq-beige);
  color:var(--hfq-ink);
  border:2px solid var(--hfq-ink);
  border-radius:9999px;
  padding:10px 16px;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:none;
  transition:.15s ease;
}

/* Hover + actif */
.thb-full-menu #menu-navigation-1 > li.current-menu-item > a,
.thb-full-menu #menu-navigation-1 > li > a:hover,
nav.thb-full-menu li.current-menu-item > a,
nav.thb-full-menu li.menu-item > a:hover{
  background:var(--hfq-yellow);
  box-shadow:0 3px 0 var(--hfq-blue);
  transform:translateY(-1px);
}

/* Mobile */
@media (max-width: 768px){
  nav.thb-full-menu{ overflow-x:auto; white-space:nowrap; }
  nav.thb-full-menu li.menu-item{ display:inline-block; }
  nav.thb-full-menu li.menu-item > a{ margin:0 8px 8px 0; font-size:13px; padding:8px 14px; }
}
/* TEST CHARGE CSS */
body{outline:4px solid red !important;}
body { outline: 4px solid red !important; }
/* =========================
   HFQ — VARIABLES PALETTE
   ========================= */
:root{
  --hfq-yellow:#E9AE1E;      /* jaune H */
  --hfq-blue:#0E5CA3;        /* bleu lagon */
  --hfq-ink:#1A1A1A;         /* encre */
  --hfq-beige:#EFE9CD;       /* sable (fond) */
  --hfq-sand:#E8DDBE;        /* variante fond */
  --hfq-white:#FFFFFF;
  --hfq-radius:999px;         /* pills */
}

/* =========================
   HFQ — HEADER CLEAN
   ========================= */
/* fond header + suppression bordures parasites */
.site-header, .main-header, header[role="banner"]{
  background: var(--hfq-beige) !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* logo: un poil plus respirant */
.header .logo, .site-header .logo{ padding: 8px 0 !important; }

/* navigation wrapper centré */
.thb-full-menu, .main-navigation, nav[role="navigation"]{
  display: flex; justify-content: center; align-items: center;
}

/* =========================
   HFQ — BOUTONS PILLS DU MENU
   (on cible plusieurs variations de sélecteurs du thème)
   ========================= */

/* lien de niveau 1 */
.thb-full-menu #menu-navigation-1 > li > a,
.header .menu > li > a,
.main-navigation > ul > li > a{
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: .02em;
  font-weight: 600;
  font-size: 13px;
  color: var(--hfq-ink) !important;
  background: var(--hfq-white);
  border: 2px solid var(--hfq-blue);
  padding: 8px 14px;
  margin: 0 6px;
  border-radius: var(--hfq-radius);
  line-height: 1;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}

/* hover */
.thb-full-menu #menu-navigation-1 > li > a:hover,
.header .menu > li > a:hover,
.main-navigation > ul > li > a:hover{
  background: var(--hfq-yellow) !important;
  border-color: var(--hfq-ink) !important;
  color: var(--hfq-ink) !important;
  transform: translateY(-1px);
  box-shadow: 0 3px 0 var(--hfq-blue);
}

/* état actif / page courante */
.thb-full-menu #menu-navigation-1 > li.current-menu-item > a,
.header .menu > li.current-menu-item > a,
.main-navigation > ul > li.current-menu-item > a{
  background: var(--hfq-yellow) !important;
  border-color: var(--hfq-ink) !important;
  color: var(--hfq-ink) !important;
  box-shadow: 0 3px 0 var(--hfq-blue);
}

/* =========================
   HFQ — VERSION MOBILE
   ========================= */
@media (max-width: 768px){
  /* scroll horizontal doux si beaucoup d’onglets */
  .thb-full-menu, .main-navigation, .header .menu{
    overflow-x: auto; white-space: nowrap; gap: 6px;
    -webkit-overflow-scrolling: touch;
  }
  .thb-full-menu #menu-navigation-1 > li,
  .header .menu > li,
  .main-navigation > ul > li{
    display: inline-block;
  }
  .thb-full-menu #menu-navigation-1 > li > a,
  .header .menu > li > a,
  .main-navigation > ul > li > a{
    font-size: 12px; padding: 8px 12px; margin: 0 4px 8px;
  }
}

/* Option: fond global sable LGU-like */
body{ background: var(--hfq-sand); }

:root{
  --hfq-yellow:#E9AE1E;
  --hfq-blue:#0E5CA3;
  --hfq-ink:#1A1A1A;
  --hfq-beige:#EFE9CD;
  --hfq-sand:#E8DDBE;
  --hfq-white:#FFFFFF;
  --hfq-radius:999px;
}

/* Header clean */
.site-header, .main-header, header[role="banner"]{
  background: var(--hfq-beige) !important;
  border: 0 !important; box-shadow:none !important;
}

/* Pills sur les liens de niveau 1 */
#menu-navigation-1 > li > a,
.header .menu > li > a,
.main-navigation > ul > li > a{
  display:inline-block;
  text-transform:uppercase; letter-spacing:.02em;
  font-weight:600; font-size:13px;
  color:var(--hfq-ink) !important;
  background:var(--hfq-white);
  border:2px solid var(--hfq-blue);
  padding:8px 14px; margin:0 6px;
  border-radius:var(--hfq-radius);
  line-height:1;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}

/* Hover */
#menu-navigation-1 > li > a:hover,
.header .menu > li > a:hover,
.main-navigation > ul > li > a:hover{
  background:var(--hfq-yellow) !important;
  border-color:var(--hfq-ink) !important;
  color:var(--hfq-ink) !important;
  transform:translateY(-1px);
  box-shadow:0 3px 0 var(--hfq-blue);
}

/* Actif */
#menu-navigation-1 > li.current-menu-item > a,
.header .menu > li.current-menu-item > a,
.main-navigation > ul > li.current-menu-item > a{
  background:var(--hfq-yellow) !important;
  border-color:var(--hfq-ink) !important;
  color:var(--hfq-ink) !important;
  box-shadow:0 3px 0 var(--hfq-blue);
}

/* Mobile: scroll horizontal si beaucoup d’onglets */
@media (max-width:768px){
  .thb-full-menu, .main-navigation, .header .menu{
    overflow-x:auto; white-space:nowrap; gap:6px; -webkit-overflow-scrolling:touch;
  }
  #menu-navigation-1 > li, .header .menu > li, .main-navigation > ul > li{ display:inline-block; }
  #menu-navigation-1 > li > a, .header .menu > li > a, .main-navigation > ul > li > a{
    font-size:12px; padding:8px 12px; margin:0 4px 8px;
  }
}
/* ------------------------------------
   HFQ GLOBAL VARIABLES
------------------------------------ */
:root{
  --hfq-yellow:#F5B333; /* jaune logo */
  --hfq-red:#C73E1D; /* rouge logo */
  --hfq-blue:#003C8F; /* bleu outline */
  --hfq-ink:#1A1A1A;
  --hfq-white:#FFFDF5;
  --hfq-radius:26px;
}

/* ------------------------------------
   IMPORT TYPO MENU
------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600&display=swap');

/* ------------------------------------
   MENU TEXT STYLE
------------------------------------ */
header nav a,
.header .menu > li > a,
.main-navigation > ul > li > a{
  font-family:'Poppins', sans-serif !important;
  font-weight:600 !important;
  font-size:14px;
  letter-spacing:.02em;
  text-transform:uppercase;
}

/* ------------------------------------
   HFQ PILL MENU BASE
------------------------------------ */
.header .menu > li > a,
#menu-navigation-1 > li > a,
.main-navigation > ul > li > a{
  display:inline-block;
  padding:10px 22px;
  margin:0 8px;
  background:var(--hfq-yellow);
  color:var(--hfq-ink) !important;
  border-radius:var(--hfq-radius);
  border:3px solid var(--hfq-blue) !important;
  box-shadow:0 3px 0 var(--hfq-blue);
  transition:all .2s cubic-bezier(.22,1,.36,1);
}

/* ------------------------------------
   HOVER EFFECTS
------------------------------------ */
.header .menu > li > a:hover,
#menu-navigation-1 > li > a:hover,
.main-navigation > ul > li > a:hover{
  background:var(--hfq-red) !important;
  color:var(--hfq-white) !important;
  transform:translateY(-2px);
  box-shadow:0 5px 0 var(--hfq-blue);
  border-color:var(--hfq-blue) !important;
}

/* ------------------------------------
   ACTIVE MENU ITEM
------------------------------------ */
.header .menu > li.current-menu-item > a,
#menu-navigation-1 > li.current-menu-item > a,
.main-navigation > ul > li.current-menu-item > a{
  background:var(--hfq-red) !important;
  color:white !important;
  border-color:var(--hfq-blue) !important;
  box-shadow:0 4px 0 var(--hfq-blue);
}

/* ------------------------------------
   MOBILE NAV STYLE
------------------------------------ */
@media(max-width:768px){
  .header .menu,
  #menu-navigation-1,
  .main-navigation > ul{
    overflow-x:auto;
    white-space:nowrap;
    padding:10px 0;
  }

  .header .menu > li > a,
  #menu-navigation-1 > li > a,
  .main-navigation > ul > li > a{
    padding:8px 16px;
    font-size:13px;
    margin:0 5px;
  }
}
/* HFQ refined menu pills */
.menu > li > a {
  padding: 10px 22px !important; /* moins large */
  border-radius: 22px !important; 
  font-size: 15px !important;
  font-weight: 500 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

/* active */
.menu > li.current-menu-item > a {
  background: var(--hfq-yellow) !important;
  color: var(--hfq-ink) !important;
  border: 2px solid var(--hfq-blue) !important;
}

/* hover */
.menu > li > a:hover {
  background: var(--hfq-red) !important;
  color: var(--hfq-white) !important;
  border: 2px solid var(--hfq-blue) !important;
  transform: translateY(-1px);
  transition: .18s ease-in-out;
}

/* spacing entre items */
.menu > li {
  margin: 0 6px !important;
}

/* HFQ PALETTE EXACTE */
:root{
  --hfq-yellow:#E9A320;
  --hfq-blue:#0F65A9;
  --hfq-red:#C52E20; /* Rouge plus profond, comme ton FQ */
  --hfq-black:#000000;
}

/* MENU HFQ CARTOON BLOCK */
.thb-main-navigation > ul > li > a,
.thb-full-menu > #menu-navigation-1 > li > a,
.header .menu > li > a {
  background:var(--hfq-yellow) !important;
  color:var(--hfq-black) !important;
  border:3px solid var(--hfq-black) !important;
  border-radius:0px !important; /* full carré */
  padding:10px 14px !important;
  font-weight:900 !important;
  text-transform:uppercase !important;
  font-family: 'Arial Black', Impact, sans-serif !important;
  display:inline-block !important;
  position:relative !important;
  line-height:1 !important;
  letter-spacing:0.3px !important;
  transition:all .12s ease-in-out !important;

  /* Bord bleu + shadow cartoon */
  box-shadow:
    0 0 0 4px var(--hfq-blue),
    5px 6px 0 var(--hfq-black);
}

/* Relief intérieur style logo */
.thb-main-navigation > ul > li > a::after,
.header .menu > li > a::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow: inset -5px -5px 0 rgba(0,0,0,.18);
}

/* Hover + Active HFQ */
.thb-main-navigation > ul > li:hover > a,
.thb-main-navigation > ul > li.current-menu-item > a,
.header .menu > li:hover > a,
.header .menu > li.current-menu-item > a {
  background:var(--hfq-red) !important;
  color:white !important;
  transform:translateY(2px);
  box-shadow:
    0 0 0 4px var(--hfq-blue),
    3px 4px 0 var(--hfq-black) !important;
}
/* ===== HFQ NAV BUTTONS — FORCE APPLY ===== */
:root{
  --hfq-yellow:#E9A320;
  --hfq-blue:#0F65A9;
  --hfq-red:#C52E20; /* rouge FQ */
  --hfq-black:#000000;
}

/* Cible UL du menu principal + variantes (on sur-spécifie) */
nav.full-menu ul#menu-navigation-1.thb-full-menu > li > a,
header .thb-full-menu ul#menu-navigation-1 > li > a,
#thb-full-menu ul#menu-navigation-1.thb-standard > li > a,
#header nav ul#menu-navigation-1.thb-full-menu > li > a,
.header nav ul#menu-navigation-1.thb-full-menu > li > a {
  background:var(--hfq-yellow) !important;
  color:var(--hfq-black) !important;
  border:3px solid var(--hfq-black) !important;      /* liseré noir */
  border-radius:0 !important;                         /* boutons carrés */
  padding:10px 14px !important;                       /* compact */
  line-height:1 !important;
  text-transform:uppercase !important;
  font-weight:900 !important;
  font-family:'Arial Black', Impact, sans-serif !important;
  position:relative !important;
  display:inline-block !important;

  /* liseré bleu + ombre cartoon (3D) */
  box-shadow:
    0 0 0 4px var(--hfq-blue),
    5px 6px 0 var(--hfq-black) !important;
  transition:transform .12s ease-in-out, box-shadow .12s ease-in-out !important;
}

/* relief intérieur (léger) */
nav.full-menu ul#menu-navigation-1.thb-full-menu > li > a::after,
header .thb-full-menu ul#menu-navigation-1 > li > a::after,
#thb-full-menu ul#menu-navigation-1.thb-standard > li > a::after,
#header nav ul#menu-navigation-1.thb-full-menu > li > a::after,
.header nav ul#menu-navigation-1.thb-full-menu > li > a::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow: inset -5px -5px 0 rgba(0,0,0,.18);
}

/* Hover + page active */
nav.full-menu ul#menu-navigation-1.thb-full-menu > li:hover > a,
nav.full-menu ul#menu-navigation-1.thb-full-menu > li.current-menu-item > a,
header .thb-full-menu ul#menu-navigation-1 > li:hover > a,
header .thb-full-menu ul#menu-navigation-1 > li.current-menu-item > a,
#header nav ul#menu-navigation-1.thb-full-menu > li:hover > a,
#header nav ul#menu-navigation-1.thb-full-menu > li.current-menu-item > a {
  background:var(--hfq-red) !important;
  color:#fff !important;
  transform:translateY(2px) !important;
  box-shadow:
    0 0 0 4px var(--hfq-blue),
    3px 4px 0 var(--hfq-black) !important;
}

/* Version mobile: scroll horizontal propre si ça déborde */
@media (max-width: 768px){
  nav.full-menu ul#menu-navigation-1.thb-full-menu {
    overflow-x:auto !important; white-space:nowrap !important;
    padding:8px 0 !important;
  }
  nav.full-menu ul#menu-navigation-1.thb-full-menu > li { display:inline-block !important; }
  nav.full-menu ul#menu-navigation-1.thb-full-menu > li > a { margin:0 10px !important; }
}
/* ----- HFQ BUTTON REFINEMENT (SLIMMER) ----- */
nav.full-menu ul#menu-navigation-1.thb-full-menu > li > a,
header .thb-full-menu ul#menu-navigation-1 > li > a,
#thb-full-menu ul#menu-navigation-1.thb-standard > li > a,
#header nav ul#menu-navigation-1.thb-full-menu > li > a,
.header nav ul#menu-navigation-1.thb-full-menu > li > a {
  padding:6px 12px !important; /* moins haut, moins large */
  font-size:14px !important; /* texte plus petit */
  box-shadow:
    0 0 0 3px var(--hfq-blue),
    4px 5px 0 var(--hfq-black) !important; /* ombre réduite */
}

/* Active + Hover plus fin aussi */
nav.full-menu ul#menu-navigation-1.thb-full-menu > li:hover > a,
nav.full-menu ul#menu-navigation-1.thb-full-menu > li.current-menu-item > a,
header .thb-full-menu ul#menu-navigation-1 > li:hover > a,
header .thb-full-menu ul#menu-navigation-1 > li.current-menu-item > a,
#header nav ul#menu-navigation-1.thb-full-menu > li:hover > a,
#header nav ul#menu-navigation-1.thb-full-menu > li.current-menu-item > a {
  box-shadow:
    0 0 0 3px var(--hfq-blue),
    3px 4px 0 var(--hfq-black) !important;
  transform:translateY(1px) !important; /* rebond léger */
}
/* ================= HFQ MENU BUTTONS • LOGO-ACCURATE ================= */

/* 1) Palette exacte (tes valeurs) */
:root{
  --hfq-yellow:#E9A320;
  --hfq-blue:#0F65A9;
  --hfq-red:#BD3025;
  --hfq-beige:#EDE0BC;
  --hfq-black:#000000;
}

/* 2) FONT “type Music Television”
   Option immédiate: Anton/Bebas approchent bien le bloc compact MTV.
   Si tu m'uploades le vrai .ttf/.otf (ou un équivalent), je remplace l’URL ci-dessous. */
@font-face{
  font-family:"HFQ-MTV";
  src: url("/wp-content/uploads/fonts/hfq-mtv.woff2") format("woff2"),
       url("/wp-content/uploads/fonts/hfq-mtv.woff") format("woff");
  font-display:swap;
}
:root{
  --hfq-font: "HFQ-MTV", "Anton", "Bebas Neue", Impact, Arial Black, sans-serif;
}

/* 3) Sélecteurs The Issue (on couvre large) */
:root{ --hfq-menu-sel:
"nav.full-menu ul#menu-navigation-1.thb-full-menu > li > a,
 header .thb-full-menu ul#menu-navigation-1 > li > a,
 #header nav ul#menu-navigation-1.thb-full-menu > li > a,
 .main-navigation > ul#menu-navigation-1 > li > a"
}

/* 4) Contexte: on évite les clips d’ombre */
header, .header, .main-header, nav, .main-navigation { overflow: visible !important; }

/* 5) Style base: bouton carrÉ façon H */
nav.full-menu ul#menu-navigation-1.thb-full-menu > li > a,
header .thb-full-menu ul#menu-navigation-1 > li > a,
#header nav ul#menu-navigation-1.thb-full-menu > li > a,
.main-navigation > ul#menu-navigation-1 > li > a{
  /* typographie */
  font-family: var(--hfq-font) !important;
  text-transform: uppercase !important;
  letter-spacing: .4px !important;
  font-weight: 800 !important;
  line-height: 1 !important;

  /* géométrie “carré” et centrage parfait */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 122px !important;          /* largeur mini cohérente */
  height: 48px !important;               /* hauteur fixe comme un vrai bouton */
  padding: 0 16px !important;            /* texte bien centré */
  border-radius: 0 !important;           /* coins carrés comme le H */

  /* couleurs et contours façon logo */
  background: var(--hfq-yellow) !important;
  color: var(--hfq-black) !important;
  border: 3px solid var(--hfq-black) !important; /* liseré noir du H */

  /* ombre “bleue” + re-liseré noir (effet 3D MTV/HFQ) */
  box-shadow:
    0 0 0 0 var(--hfq-black),           /* placeholder, garde la liste propre */
    6px 6px 0 var(--hfq-blue),
    9px 9px 0 var(--hfq-black) !important;

  /* finesse d’anim */
  transform: translateZ(0) !important;
  transition: background .12s ease, color .12s ease,
              box-shadow .12s ease, transform .12s ease !important;
}

/* Espacement entre boutons (serré, propre) */
nav.full-menu ul#menu-navigation-1.thb-full-menu > li,
header .thb-full-menu ul#menu-navigation-1 > li,
#header nav ul#menu-navigation-1.thb-full-menu > li,
.main-navigation > ul#menu-navigation-1 > li{
  margin: 0 10px 12px 10px !important;
}

/* 6) Hover / Focus / Page active: fond rouge exact + “press” léger */
nav.full-menu ul#menu-navigation-1.thb-full-menu > li:hover > a,
nav.full-menu ul#menu-navigation-1.thb-full-menu > li:focus-within > a,
nav.full-menu ul#menu-navigation-1.thb-full-menu > li.current-menu-item > a,
header .thb-full-menu ul#menu-navigation-1 > li:hover > a,
header .thb-full-menu ul#menu-navigation-1 > li:focus-within > a,
header .thb-full-menu ul#menu-navigation-1 > li.current-menu-item > a,
#header nav ul#menu-navigation-1.thb-full-menu > li:hover > a,
#header nav ul#menu-navigation-1.thb-full-menu > li.current-menu-item > a,
.main-navigation > ul#menu-navigation-1 > li:hover > a,
.main-navigation > ul#menu-navigation-1 > li.current-menu-item > a{
  background: var(--hfq-red) !important;      /* rouge du logo */
  color: var(--hfq-black) !important;
  /* ombre rapprochée pour effet “appuyé” */
  box-shadow:
    4px 4px 0 var(--hfq-blue),
    7px 7px 0 var(--hfq-black) !important;
  transform: translate(1px,2px) !important;
}

/* 7) Version compacte (tablette & mobile) */
@media (max-width: 1024px){
  nav.full-menu ul#menu-navigation-1.thb-full-menu > li > a,
  header .thb-full-menu ul#menu-navigation-1 > li > a,
  #header nav ul#menu-navigation-1.thb-full-menu > li > a,
  .main-navigation > ul#menu-navigation-1 > li > a{
    min-width: 108px !important;
    height: 44px !important;
    padding: 0 12px !important;
    font-size: 14px !important;
    box-shadow:
      5px 5px 0 var(--hfq-blue),
      8px 8px 0 var(--hfq-black) !important;
  }
}
@media (max-width: 768px){
  /* scroll horizontal si trop de rubriques, façon stickers */
  .header .menu, nav.full-menu, .main-navigation { overflow-x: auto !important; white-space: nowrap !important; }
  nav.full-menu ul#menu-navigation-1.thb-full-menu > li,
  header .thb-full-menu ul#menu-navigation-1 > li,
  #header nav ul#menu-navigation-1.thb-full-menu > li,
  .main-navigation > ul#menu-navigation-1 > li{
    display: inline-block !important;
    margin: 0 8px 10px 8px !important;
  }
  nav.full-menu ul#menu-navigation-1.thb-full-menu > li > a,
  header .thb-full-menu ul#menu-navigation-1 > li > a,
  #header nav ul#menu-navigation-1.thb-full-menu > li > a,
  .main-navigation > ul#menu-navigation-1 > li > a{
    min-width: 96px !important;
    height: 40px !important;
    padding: 0 10px !important;
    font-size: 13px !important;
    box-shadow:
      4px 4px 0 var(--hfq-blue),
      6px 6px 0 var(--hfq-black) !important;
  }
}
/* ===== HOSSFAITQUOI — PALETTE ===== */
:root{
  --hfq-yellow:#E9A320; /* exact H */
  --hfq-blue:#0F65A9;   /* exact liseré */
  --hfq-red:#BD3025;    /* exact F/Q */
  --hfq-black:#000000;  /* contour */
}

/* ===== MENU TOP (The Issue) : boutons =====
   On cible toutes les variantes du menu du thème
   et on RASE les dégradés/ombres internes. */
header .thb-full-menu [id^="menu-navigation"] > li > a,
.header .main-navigation > ul > li > a,
.header .menu > li > a{
  background: var(--hfq-yellow) !important;
  border: 4px solid var(--hfq-black) !important;
  color:#000 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  filter:none !important;
  text-shadow: none !important;
  background-image: none !important;
  position:relative !important;
}

/* Supprime les pseudo-ombres/plaques du thème */
header .thb-full-menu [id^="menu-navigation"] > li > a::before,
header .thb-full-menu [id^="menu-navigation"] > li > a::after,
.header .main-navigation > ul > li > a::before,
.header .main-navigation > ul > li > a::after{
  content:none !important;
  display:none !important;
}

/* État :hover = rouge exact */
header .thb-full-menu [id^="menu-navigation"] > li > a:hover,
.header .main-navigation > ul > li > a:hover,
.header .menu > li > a:hover{
  background: var(--hfq-red) !important;
  color:#000 !important;
}

/* Élément actif (page courante) = rouge exact */
header .thb-full-menu [id^="menu-navigation"] > li.current-menu-item > a,
.header .main-navigation > ul > li.current-menu-item > a,
.header .menu > li.current-menu-item > a{
  background: var(--hfq-red) !important;
  color:#000 !important;
}

/* Certains skins ajoutent une fausse “ombre basse” via un wrapper */
header .thb-full-menu [id^="menu-navigation"] > li,
.header .main-navigation > ul > li{
  box-shadow:none !important;
  background-image:none !important;
}

/* Si un calque interne vient jaunir/teinter (kill au cas où) */
header .thb-full-menu [id^="menu-navigation"] > li > a .inner,
header .thb-full-menu [id^="menu-navigation"] > li > a .overlay{
  display:none !important;
}

/* ===== Assure le bleu des “plaques” si votre HTML en a besoin ===== */
.hfq-shadow-blue{ background:var(--hfq-blue)!important; }

/* ===== TEST VISUEL (temporaire) — à supprimer quand ok ===== */
body.hfq-css-ok #menu-navigation-1 > li > a{ outline:2px dashed magenta!important; }
/* ===== Variables palette HFQ ===== */
:root{
  --hfq-yellow:#E9A320;
  --hfq-blue:#0F65A9;
  --hfq-red:#BD3025;
  --hfq-black:#000000;
}

/* =========================
   HFQ palette (sans @import)
   ========================= */
:root{
  --hfq-yellow:#E9A320;
  --hfq-blue:#0F65A9;
  --hfq-red:#BD3025;
  --hfq-black:#000000;
}

/* ===============================================
   MENU MOBILE / FULLSCREEN = boutons “desktop”
   =============================================== */

/* 1) Le conteneur de liste en pile + espacement */
.thb-mobile-menu .menu,
.mobile-menu .menu,
.thb-full-menu .menu{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:8px 14px;
}

/* 2) On neutralise les styles par défaut */
.thb-mobile-menu .menu > li,
.mobile-menu .menu > li,
.thb-full-menu .menu > li{ list-style:none; }

/* 3) LES BOUTONS (les <a>) */
.thb-mobile-menu .menu > li > a,
.mobile-menu .menu > li > a,
.thb-full-menu .menu > li > a{
  display:inline-block;
  text-decoration:none !important;
  text-transform:uppercase;
  font-weight:800;
  letter-spacing:.3px;

  /* look HFQ */
  background:var(--hfq-yellow) !important;
  color:#000 !important;
  border:3px solid var(--hfq-black) !important;
  border-radius:8px;
  padding:12px 22px;

  /* “ombre” bleue décollée comme tes cartes */
  box-shadow:6px 6px 0 0 var(--hfq-blue) !important;
}

/* 4) Hover/press = rouge HFQ, texte blanc */
.thb-mobile-menu .menu > li > a:hover,
.mobile-menu .menu > li > a:hover,
.thb-full-menu .menu > li > a:hover{
  background:var(--hfq-red) !important;
  color:#fff !important;
}

/* 5) On coupe les overlays/ombres injectés par le thème */
.thb-mobile-menu .menu > li > a::before,
.thb-mobile-menu .menu > li > a::after,
.mobile-menu .menu > li > a::before,
.mobile-menu .menu > li > a::after,
.thb-full-menu .menu > li > a::before,
.thb-full-menu .menu > li > a::after{
  content:none !important;
  display:none !important;
  box-shadow:none !important;
  background:none !important;
}

/* 6) Option: pleine largeur tactile (si tu préfères) */
/* décommente pour 100% width
.thb-mobile-menu .menu > li > a,
.mobile-menu .menu > li > a{ width:100%; text-align:center; }
*/
/* ============ HFQ palette ============ */
:root{
  --hfq-yellow:#E9A320;
  --hfq-blue:#0F65A9;
  --hfq-red:#BD3025;
  --hfq-black:#000000;
}

/* ============ MENU MOBILE burger (The Issue) ============ */
@media (max-width: 1024px){

  /* 1) Style des liens du menu dans le off-canvas */
  body #mobile-menu.style1.side-panel.dark[data-behaviour="thb-submenu"] .menu > li > a{
    display:block !important;
    background:var(--hfq-yellow) !important;
    color:var(--hfq-black) !important;
    border:3px solid var(--hfq-black) !important;
    box-shadow:10px 10px 0 var(--hfq-blue) !important;
    border-radius:0 !important;
    padding:14px 20px !important;
    margin:16px 0 !important;
    text-transform:uppercase !important;
    font-weight:800 !important;
    letter-spacing:.5px !important;
    line-height:1.1 !important;
    background-image:none !important;
  }

  /* 2) Touch/Hover = rouge HFQ */
  body #mobile-menu.style1.side-panel.dark[data-behaviour="thb-submenu"] .menu > li > a:hover,
  body #mobile-menu.style1.side-panel.dark[data-behaviour="thb-submenu"] .menu > li > a:active{
    background:var(--hfq-red) !important;
    color:#fff !important;
  }

  /* 3) On neutralise les décos injectées par le thème sur les items */
  body #mobile-menu .menu > li,
  body #mobile-menu .menu > li > a::before,
  body #mobile-menu .menu > li > a::after{
    background:none !important;
    box-shadow:none !important;
    border:none !important;
    content:none !important;
  }

  /* 4) Un peu d’air dans le panneau */
  body #mobile-menu .menu{ padding:8px 16px !important; }

  /* (Option) masquer le bloc newsletter sous le menu si tu veux */
  /* body #mobile-menu .widget{ display:none !important; } */
}
/* Hide default mobile menu list */
.side-panel.dark .menu,
.side-panel .menu,
#mobile-menu .menu,
#mobile-menu ul.menu {
    display: none !important;
}

/* Force show only widget buttons */
#mobile-menu .widget_nav_menu {
    display: block !important;
}