/*
Theme Name: Innovio Child
Theme URI: https://innovio.qodeinteractive.com
Description: A child theme of Innovio Theme
Author: Mikado Themes
Author URI: http://themeforest.net/user/mikado-themes
Version: 1.0.1
Text Domain: innovio
Template: innovio
*/







/* ===== PRESTAWEB FOOTER V2026 (VALID�) � NE PAS MODIFIER VISUEL ===== */
/* ================================
   PRESTAWEB FOOTER V2026 - CSS
================================== */

.mkdf-prestaweb-footer-v2026{
  background:#060b1f;
  color:#e8ecff;
}

.mkdf-prestaweb-footer-v2026 a{
  color:#e8ecff;
  text-decoration:none;
}
.mkdf-prestaweb-footer-v2026 a:hover{
  opacity:.85;
  text-decoration:underline;
}

/* A) Promesses */
.pw-footer-promises{
  background:#eef0ff;
  color:#0b1230;
  padding:18px 0;
}
.pw-promises{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:18px;
  justify-content:space-between;
  flex-wrap:wrap;
}
.pw-promise{
  display:flex;
  gap:10px;
  align-items:center;
  font-weight:600;
  font-size:14px;
  opacity:.95;
}
.pw-ico{ font-size:16px; line-height:1; }

/* B) CTA */
.pw-footer-cta{
  background:#5a5ff5;
  padding:22px 0;
}
.pw-cta-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.pw-cta-title{
  margin:0;
  font-size:22px;
  font-weight:800;
  color:#fff;
}
.pw-cta-sub{
  margin:6px 0 0;
  color:rgba(255,255,255,.9);
  font-size:14px;
}
.pw-cta-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}
.pw-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 16px;
  border-radius:999px;
  font-weight:700;
  font-size:14px;
  line-height:1;
  border:1px solid transparent;
}
.pw-btn-primary{
  background:#ff3b4f;
  color:#fff !important;
}
.pw-btn-secondary{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.35);
  color:#fff !important;
}

/* C) Main */
.pw-footer-main{
  padding:34px 0;
}
.pw-footer-grid{
  display:grid;
  grid-template-columns: 1.1fr 2fr;
  gap:18px;
}
.pw-card{
  background:#0b1230;
  border-radius:18px;
  padding:26px;
  box-shadow: 0 8px 28px rgba(0,0,0,.25);
}

/* Colonnes de liens dans card droite */
.pw-links-cols{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
}
.pw-links-col ul{
  list-style:none;
  margin:0;
  padding:0;
}
.pw-links-col li{
  margin:0 0 10px;
  opacity:.95;
}
.pw-links-col li a{
  opacity:.95;
}
.pw-links-col li a:hover{
  opacity:1;
}

/* Titres widgets (Innovio) */
.mkdf-prestaweb-footer-v2026 .mkdf-widget-title-holder .mkdf-widget-title,
.mkdf-prestaweb-footer-v2026 .widgettitle,
.mkdf-prestaweb-footer-v2026 h6.mkdf-widget-title{
  color:#ffffff;
  margin:0 0 14px;
  font-weight:800;
  letter-spacing:.2px;
}

/* R�parer les ic�nes Innovio qui �flottent� (pin/contact) */
.mkdf-prestaweb-footer-v2026 .mkdf-icon-widget-holder{
  position:static !important;
  display:flex !important;
  align-items:center !important;
  gap:10px;
  margin:0 0 12px;
}
.mkdf-prestaweb-footer-v2026 .mkdf-icon-widget-holder .mkdf-icon-element{
  position:static !important;
  transform:none !important;
  margin:0 !important;
  width:auto;
}
.mkdf-prestaweb-footer-v2026 .mkdf-icon-widget-holder .mkdf-icon-text{
  position:static !important;
  margin:0 !important;
  font-size:14px !important;
  line-height:1.4 !important;
}

/* Derniers articles */
.pw-latest{
  margin-top:20px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.12);
}
.pw-latest-title{
  margin:0 0 10px;
  font-weight:800;
  color:#fff;
}
.pw-latest-list{
  list-style:none;
  margin:0;
  padding:0;
}
.pw-latest-list li{
  margin:0 0 10px;
}
.pw-latest-more{
  margin:8px 0 0;
  opacity:.9;
}

/* D) Bottom */
.pw-footer-bottom{
  padding:18px 0 28px;
  border-top:1px solid rgba(255,255,255,.10);
}
.pw-bottom-grid{
  display:flex;
  justify-content:center;
  gap:18px;
  flex-wrap:wrap;
}
.pw-bottom-col{
  opacity:.9;
  font-size:13px;
}

/* Responsive */
@media (max-width: 992px){
  .pw-cta-inner{ flex-direction:column; align-items:flex-start; }
  .pw-footer-grid{ grid-template-columns: 1fr; }
  .pw-links-cols{ grid-template-columns: 1fr; }
}


/* ================================
   PRESTAWEB FOOTER V2026 - BOXED LAYOUT (�tape 5)
   Objectif : largeur quasi 100% + blocs a�r�s + fond clair
================================== */

/* 1) Fond global clair (comme le mod�le) */
.mkdf-prestaweb-footer-v2026{
  background:#ffffff !important; /* fond clair global */
  color:#0b1230;
  padding:28px 0 42px;
}

/* 2) Largeur �presque 100%� mais pas full */
.mkdf-prestaweb-footer-v2026 .mkdf-grid{
  max-width:1320px;
  width:calc(100% - 48px);
  margin:0 auto;
}

/* Liens par d�faut sur fond clair */
.mkdf-prestaweb-footer-v2026 a{
  color:#0b1230;
}

/* 3) PROMESSES : on enl�ve la bande full-width et on fait une carte arrondie */
.pw-footer-promises{
  background:transparent !important;
  padding:0 !important;
  margin:0 0 18px;
}
.pw-footer-promises .mkdf-grid{
  background:#eef0ff;
  border-radius:18px;
  padding:26px 28px;
  box-shadow:0 10px 28px rgba(0,0,0,.08);
}

/* Promesses : centrage + respiration */
.pw-promises{
  justify-content:space-around;
  gap:22px;
}
.pw-promise{
  font-size:14px;
  font-weight:700;
}

/* 4) CTA : m�me logique -> carte arrondie centr�e + marge */
.pw-footer-cta{
  background:transparent !important;
  padding:0 !important;
  margin:0 0 22px;
}
.pw-footer-cta .pw-cta-inner{
  background:#5a5ff5;
  border-radius:18px;
  padding:26px 28px;
  box-shadow:0 10px 28px rgba(0,0,0,.12);
}

/* CTA : alignements plus �premium� */
.pw-cta-title{ font-size:24px; }
.pw-cta-actions{ justify-content:flex-end; }

/* 5) MAIN : on garde tes cards sombres, mais on met de l�air */
.pw-footer-main{
  padding:0 !important;
  margin:0 0 18px;
}

/* Cards dark = blanc sur fond sombre */
.pw-card{
  background:#0b1230;
  color:#e8ecff;
  border-radius:18px;
  box-shadow:0 18px 40px rgba(0,0,0,.18);
}
.pw-card a{ color:#e8ecff; }

/* Goutti�res et largeur */
.pw-footer-grid{
  gap:22px;
}

/* 6) Bottom : on l�int�gre visuellement (pas une ligne coll�e) */
.pw-footer-bottom{
  background:transparent !important;
  padding:0 !important;
  border-top:none !important;
}
.pw-footer-bottom .mkdf-grid{
  background:#0b1230;
  color:#e8ecff;
  border-radius:18px;
  padding:18px 28px;
  box-shadow:0 14px 34px rgba(0,0,0,.16);
}
.pw-footer-bottom a{ color:#e8ecff; }

/* Responsive */
@media (max-width: 992px){
  .mkdf-prestaweb-footer-v2026 .mkdf-grid{
    width:calc(100% - 24px);
  }
  .pw-footer-promises .mkdf-grid,
  .pw-footer-cta .pw-cta-inner,
  .pw-footer-bottom .mkdf-grid{
    padding:18px 16px;
  }
}




/* ================================
   �tape 6 : Largeur des sections (entre les traits verts)
================================== */

/* largeur cible : quasi pleine page, mais pas 100% */
.mkdf-prestaweb-footer-v2026{
  --pw-footer-width: min(1910px, 99.48vw); /* <-- ajuste 94vw si besoin */
}

/* on force tous les conteneurs internes du footer � adopter cette largeur */
.mkdf-prestaweb-footer-v2026 .mkdf-grid{
  width: var(--pw-footer-width) !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* s�curit� pour �viter tout micro d�bordement */
body{ overflow-x:hidden; }


/* ================================
   �tape 7A : Forcer l'alignement de largeur sur TOUTES les sections
   (promesses / CTA / main / bottom)
================================== */
.mkdf-prestaweb-footer-v2026 .pw-footer-promises .mkdf-grid,
.mkdf-prestaweb-footer-v2026 .pw-footer-main .mkdf-grid,
.mkdf-prestaweb-footer-v2026 .pw-footer-bottom .mkdf-grid{
  width: var(--pw-footer-width) !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* le CTA n'utilise pas mkdf-grid en �carte�, donc on force aussi */
.mkdf-prestaweb-footer-v2026 .pw-footer-cta .pw-cta-inner{
  width: var(--pw-footer-width) !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
}


/* ================================
   �tape 7B : Remettre les adresses DANS la carte (widget Icon Innovio)
   (suppression des d�calages h�rit�s)
================================== */
.mkdf-prestaweb-footer-v2026 .pw-card-brand .mkdf-icon-widget-holder{
  position: relative !important;
  left: 0 !important;
  transform: none !important;
  margin-left: 0 !important;
  padding-left: 0 !important;

  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;

  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box;
}

/* s�curise l�ic�ne + texte */
.mkdf-prestaweb-footer-v2026 .pw-card-brand .mkdf-icon-widget-holder .mkdf-icon-element{
  position: static !important;
  transform: none !important;
  margin: 0 !important;
  flex: 0 0 auto;
}

.mkdf-prestaweb-footer-v2026 .pw-card-brand .mkdf-icon-widget-holder .mkdf-icon-text{
  position: static !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.4 !important;
  word-break: break-word;
}

/* option �s�curit� : si un vieux style force un d�bordement */
.mkdf-prestaweb-footer-v2026 .pw-card-brand{
  overflow: hidden;
}
/* ================================
   �tape 8 : Alignement SECTION 1 (Promesses) sur SECTION 2 & 3
================================== */

/* 1) La carte promesses prend EXACTEMENT la m�me largeur */
.mkdf-prestaweb-footer-v2026 .pw-footer-promises{
  width: var(--pw-footer-width) !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;

  /* on met le style "carte" ici (pas sur un wrapper interne) */
  background:#e1e1fa !important;
  border-radius:18px;
  padding:26px 28px;
  box-shadow:0 10px 28px rgba(0,0,0,.08);
}

/* 2) Si un wrapper interne existe (mkdf-grid), on le neutralise pour �viter les d�calages */
.mkdf-prestaweb-footer-v2026 .pw-footer-promises .mkdf-grid{
  width:auto !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
/* ================================
   �tape 9 : Section 1 (Promesses) -> plus haute et plus premium
================================== */
.mkdf-prestaweb-footer-v2026 .pw-footer-promises{
  padding: 34px 34px !important; /* + de hauteur */
  border-radius: 20px !important;
}

/* plus d'air entre les items */
.mkdf-prestaweb-footer-v2026 .pw-promises{
  gap: 28px !important;
  align-items: center !important;
}

/* texte un peu plus valorisant */
.mkdf-prestaweb-footer-v2026 .pw-promise{
  font-size: 15px !important;
  line-height: 1.3 !important;
}
/* ================================
   �tape 10 : Section 4 (Footer bottom) -> m�me largeur que 1-2-3
================================== */

/* on centre la SECTION 4 elle-m�me */
.mkdf-prestaweb-footer-v2026 .pw-footer-bottom{
  width: var(--pw-footer-width) !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
}

/* le conteneur interne prend 100% de la section (et non une autre largeur du th�me) */
.mkdf-prestaweb-footer-v2026 .pw-footer-bottom .mkdf-grid{
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  box-sizing: border-box;
}
/* ===== FIN FOOTER V2026 ===== */

/* S�curise les longs textes en bas du footer (mobile & desktop) */
.mkdf-page-footer .mkdf-footer-bottom-holder,
.mkdf-page-footer .mkdf-footer-bottom-holder *{
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (max-width: 768px){
  .mkdf-page-footer .mkdf-footer-bottom-holder{
    padding-left: 16px;
    padding-right: 16px;
  }
}




























/* Barre l�gale (footer bottom) : plus lisible + anti-d�bordement */
.mkdf-page-footer .mkdf-footer-bottom-holder{
  padding: 14px 18px;
}

.mkdf-page-footer .mkdf-footer-bottom-holder,
.mkdf-page-footer .mkdf-footer-bottom-holder *{
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* Bloc avantages (haut du footer) : meilleure tenue en mobile */
@media (max-width: 768px){
  .prestaweb-footer-features{ /* si tu as une classe custom */
    padding: 18px 16px;
  }
  .prestaweb-footer-features li{
    margin: 10px 0;
  }
}








/* =========================================================
   BLOG HUB - CSS SCOPE (ne touche QUE la page Blog Hub)
   ========================================================= */
.pw-blog-hub .pw-container{
  max-width: 100%;
  margin: 0 auto;
  padding: 0 22px;
}

/* Plein �cran (comme ton exemple) */
.pw-blog-hub .pw-blog-hero{
  background:#f3f6ff;
  padding: 34px 0 18px;
}

.pw-blog-hub .pw-blog-h1{
  margin:0 0 8px;
  font-size:44px;
  line-height:1.1;
}

.pw-blog-hub .pw-blog-subtitle{
  margin:0 0 14px;
  color: rgba(15,23,42,.75);
}

/* Menu cat�gories (chips) */
.pw-blog-hub .pw-blog-menu__list{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  list-style:none;
  margin:0;
  padding:0;
}
.pw-blog-hub .pw-blog-menu__list a{
  display:inline-flex;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
  color:#0f172a;
  text-decoration:none;
  font-weight:600;
}

/* Grille plein �cran */
.pw-blog-hub .pw-blog-grid-wrap{ padding: 18px 0 56px; }
.pw-blog-hub .pw-blog-grid{
  display:grid;
  gap: 22px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Responsive */
@media (max-width: 1280px){
  .pw-blog-hub .pw-blog-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px){
  .pw-blog-hub .pw-blog-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .pw-blog-hub .pw-blog-grid{ grid-template-columns: 1fr; }
}

/* Cards premium type exemple */
.pw-blog-hub .pw-card{
  border-radius: 18px;
  overflow: hidden;
  background:#fff;
  box-shadow: 0 14px 40px rgba(15,23,42,.10);
  transition: transform .18s ease, box-shadow .18s ease;
}
.pw-blog-hub .pw-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 20px 55px rgba(15,23,42,.16);
}

/* Image �hero� dans la card */
.pw-blog-hub .pw-card__media{ position:relative; display:block; }
.pw-blog-hub .pw-card__media img{
  width:100%;
  height: 220px;
  object-fit: cover;
  display:block;
}

/* Meta lisible (date/auteur/cat�gorie) */
.pw-blog-hub .pw-pill{
  background: rgba(0,0,0,.50);
  color:#fff;
  padding: 7px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  backdrop-filter: blur(6px);
}

.pw-blog-hub .pw-card__meta{
  position:absolute;
  top:12px; left:12px;
  display:flex; gap:8px; flex-wrap:wrap;
}
.pw-blog-hub .pw-card__author{
  position:absolute;
  bottom:12px; left:12px;
}

/* Texte */
.pw-blog-hub .pw-card__body{ padding: 14px 16px 18px; }
.pw-blog-hub .pw-card__title{
  margin:0 0 8px;
  font-size: 18px;
  line-height: 1.25;
}
.pw-blog-hub .pw-card__title a{
  text-decoration:none;
  color:#0f172a;
}
.pw-blog-hub .pw-card__excerpt{
  margin:0;
  color: rgba(15,23,42,.72);
  display:-webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Loader */
.pw-blog-hub .pw-blog-loader{
  display:none;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin: 26px 0;
}
.pw-blog-hub .pw-spinner{
  width:18px;height:18px;
  border:2px solid rgba(15,23,42,.25);
  border-top-color: rgba(15,23,42,.75);
  border-radius:50%;
  animation: pwspin 1s linear infinite;
}
@keyframes pwspin{ to{ transform: rotate(360deg); } }
.pw-blog-hub .pw-blog-sentinel{ height:1px; }


/* --- Rythme + densit� --- */
.pw-blog-hub .pw-blog-grid{
  gap: 26px;
}

/* Cartes plus premium */
.pw-blog-hub .pw-card{
  border-radius: 20px;
  box-shadow: 0 16px 60px rgba(15,23,42,.10);
  background: #fff;
}

.pw-blog-hub .pw-card__media img{
  height: 260px; /* + immersif */
}

/* Titre + extrait plus �magazine� */
.pw-blog-hub .pw-card__title{
  font-size: 19px;
  letter-spacing: -.2px;
}

.pw-blog-hub .pw-card__excerpt{
  -webkit-line-clamp: 2; /* 2 lignes max */
  line-height: 1.55;
}

/* Hover plus �l�gant */
.pw-blog-hub .pw-card:hover{
  transform: translateY(-5px);
  box-shadow: 0 26px 70px rgba(15,23,42,.16);
}

/* Pills plus raffin�es */
.pw-blog-hub .pw-pill{
  background: rgba(0,0,0,.52);
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 800;
}



@media (min-width: 1100px){
  .pw-blog-hub .pw-blog-grid .pw-card:first-child{
    grid-column: span 2;
  }
  .pw-blog-hub .pw-blog-grid .pw-card:first-child .pw-card__media img{
    height: 320px;
  }
  .pw-blog-hub .pw-blog-grid .pw-card:first-child .pw-card__title{
    font-size: 22px;
  }
  .pw-blog-hub .pw-blog-grid .pw-card:first-child .pw-card__excerpt{
    -webkit-line-clamp: 3;
  }
}



/* Menu sticky sous le H1 */
.pw-blog-hub .pw-blog-menu{
  position: sticky;
  top: 78px; /* ajuste selon ton header */
  z-index: 20;
  padding: 12px 0;
  background: #f3f6ff;
  border-bottom: 1px solid rgba(15,23,42,.08);
}

/* Scroll horizontal mobile plus net */
@media (max-width: 768px){
  .pw-blog-hub .pw-blog-menu__list{
    flex-wrap: nowrap;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }
  .pw-blog-hub .pw-blog-menu__list a{ white-space: nowrap; }
}
/****       */

/* HERO centr� */
.pw-blog-hub .pw-blog-hero{
  text-align: center;
}

.pw-blog-hub .pw-blog-hero .pw-container{
  max-width: 1200px;         /* on recentre le bloc */
  margin: 0 auto;
  padding: 0 18px;
}

/* Centrer le menu chips */
.pw-blog-hub .pw-blog-menu__list{
  justify-content: center;
}



@media (min-width: 1100px){
  .pw-blog-hub .pw-blog-grid .pw-card:first-child{
    grid-column: span 2;
  }
  .pw-blog-hub .pw-blog-grid .pw-card:first-child .pw-card__media img{
    height: 360px;
  }
  .pw-blog-hub .pw-blog-grid .pw-card:first-child .pw-card__title{
    font-size: 24px;
  }
  .pw-blog-hub .pw-blog-grid .pw-card:first-child .pw-card__excerpt{
    -webkit-line-clamp: 3;
  }
}
.pw-blog-hub .pw-card__media img{
  height: 240px;
}
@media (max-width: 900px){
  .pw-blog-hub .pw-card__media img{ height: 220px; }
}
.pw-blog-hub .pw-blog-menu{
  position: sticky;
  top: 78px; /* � ajuster selon ton header */
  z-index: 30;
  background: #f3f6ff;
  padding: 12px 0;
  border-bottom: 1px solid rgba(15,23,42,.08);
}
/* Sous-menu dropdown */
.pw-blog-hub .pw-blog-menu__list li{
  position: relative;
}

.pw-blog-hub .pw-blog-menu__list .sub-menu{
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 240px;
  padding: 10px;
  margin: 0;
  list-style: none;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(15,23,42,.12);
  box-shadow: 0 20px 60px rgba(15,23,42,.14);
  z-index: 50;
}

.pw-blog-hub .pw-blog-menu__list li:hover > .sub-menu{
  display: block;
}

.pw-blog-hub .pw-blog-menu__list .sub-menu a{
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: #0f172a;
  font-weight: 600;
}

.pw-blog-hub .pw-blog-menu__list .sub-menu a:hover{
  background: rgba(15,23,42,.06);
}
@media (max-width: 768px){
  .pw-blog-hub .pw-blog-menu__list{
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
  }

  /* On �vite les dropdowns */
  .pw-blog-hub .pw-blog-menu__list .sub-menu{
    position: static;
    display: none; /* cach� par d�faut sur mobile */
    box-shadow: none;
    border: 0;
    padding: 6px 0 0;
    min-width: unset;
    background: transparent;
  }

  /* Si tu veux les afficher directement sur mobile, mets display:block */
  /* .pw-blog-hub .pw-blog-menu__list .sub-menu{ display:block; } */
}
/* Typo mobile */
@media (max-width: 768px){
  .pw-blog-hub .pw-blog-hero{
    padding: 22px 0 14px;
  }

  .pw-blog-hub .pw-blog-h1{
    font-size: 30px;
    line-height: 1.15;
  }

  .pw-blog-hub .pw-blog-subtitle{
    font-size: 14px;
    line-height: 1.45;
    margin-bottom: 12px;
  }
}

@media (max-width: 420px){
  .pw-blog-hub .pw-blog-h1{
    font-size: 26px;
  }
}
/* Stabiliser le dropdown (pas de gap) */
.pw-blog-hub .pw-blog-menu__list .sub-menu{
  top: 100%;            /* au lieu de 100% + 8px */
  margin-top: 8px;      /* on garde l'espace visuel mais pas un "gap hover" */
}

/* Cr�e un "pont" invisible pour �viter la disparition */
.pw-blog-hub .pw-blog-menu__list li.menu-item-has-children::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:100%;
  height: 12px;         /* zone hover */
}
.pw-blog-hub .pw-blog-menu__list li:hover > .sub-menu,
.pw-blog-hub .pw-blog-menu__list li:focus-within > .sub-menu{
  display:block;
}
@media (max-width: 768px){
  .pw-blog-hub .pw-blog-menu{
    position: relative;
  }

  /* Fade � droite pour sugg�rer qu'il y a du contenu cach� */
  .pw-blog-hub .pw-blog-menu::after{
    content:"";
    position:absolute;
    top:0;
    right:0;
    width: 54px;
    height: 100%;
    pointer-events:none;
    background: linear-gradient(to right, rgba(243,246,255,0), rgba(243,246,255,1));
  }

  /* Petite fl�che */
  .pw-blog-hub .pw-blog-menu::before{
    content:"�";
    position:absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    font-weight: 800;
    color: rgba(15,23,42,.55);
    pointer-events:none;
  }

  /* Menu en scroll horizontal */
  .pw-blog-hub .pw-blog-menu__list{
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding-right: 60px; /* pour laisser la place au fade */
    scroll-snap-type: x mandatory; /* option: "snap" */
  }

  .pw-blog-hub .pw-blog-menu__list > li{
    scroll-snap-align: start;
  }

  /* On cache la scrollbar (sans bloquer le scroll) */
  .pw-blog-hub .pw-blog-menu__list::-webkit-scrollbar{ height: 0; }
}
.pw-blog-hub .pw-blog-menu-hint{
  display:none;
  margin: 8px 0 0;
  font-size: 12px;
  color: rgba(15,23,42,.55);
}

@media (max-width:768px){
  .pw-blog-hub .pw-blog-menu-hint{ display:block; }
}