/* === Images 16:9 réutilisables (listes + détails) === */
.media-16x9{
  position:relative;
  aspect-ratio:16/9;
  border-radius:12px;
  overflow:hidden;
  background:#e9ecef;
  margin:0;
  display:block;
}
.media-16x9 > img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* === Navigation précédent / suivant (container) === */
.nav-articles{
  background:#EFF0ED;
  border-radius:12px;
  padding:1rem 0;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
}
.nav-articles .nav-card{
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  text-decoration:none;
  color:inherit;
  overflow:hidden;
  transition:transform .18s ease;
}
.nav-articles .nav-card:hover{ transform:translateY(-2px); }
.nav-articles .nav-thumb{
  height:100%;
  margin:0;
  overflow:hidden;
  background:#e9ecef;
}
.nav-articles .nav-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.nav-articles .label{
  font-size:.8rem;
  color:var(--bs-secondary-color);
}
.nav-articles .card-title{
  font-weight:700;
  line-height:1.2;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* ==== Share bar ==== */
.share-bar{
  border-top:1px solid var(--bs-border-color);
  border-bottom:1px solid var(--bs-border-color);
  padding:.9rem 0;
  margin:1.75rem 0 0;
}
.share-bar .share-icons a{
  width:40px;height:40px;
  border:1px solid var(--bs-border-color);
  border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;color:inherit;background:#fff;
  margin-right:.5rem;
  transition:transform .15s ease, background .15s ease;
}
.share-bar .share-icons a:hover{ transform:translateY(-2px); background:#f8f9fa; }
.share-bar .copy-link{ white-space:nowrap; }

/* ==== “Dans la même catégorie” ==== */
.same-category .post-card{
  border:1px solid var(--bs-border-color);
  border-radius:.75rem;
  overflow:hidden;
  background:#fff;
  text-decoration:none;
  color:inherit;
  transition:transform .2s ease, box-shadow .2s ease;
  display:block;
}
.same-category .post-card:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}
.same-category .thumb{
  width:100%;
  aspect-ratio:16/9;
  background:#e9ecef;
  overflow:hidden;
}
.same-category .thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.same-category .post-title{
  font-weight:700;
  margin:.25rem 0 0;
}

/* ==== Réglages responsives ==== */
@media (max-width:530px){
  .share-bar .copy-link{ display:none!important; }
}
@media (max-width:767.98px){
  .nav-articles .nav-card .col-5{
    flex:0 0 96px;
    max-width:96px;
  }
  .nav-articles .nav-card .col-7{
    flex:1 1 auto;
    max-width:none;
  }
  .nav-articles .nav-thumb{
    height:auto;
    aspect-ratio:1/1;
    border-radius:10px;
  }
  .nav-articles .nav-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
  }
  .nav-articles a[rel="next"] .row{ 
    flex-direction:row-reverse;
  }
}

/* === Images dans le corps de l'article === */
.article .content img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border-radius: 12px;
  margin: 1.5rem 0;
}
.article .content figure {
  margin: 1.5rem 0;
}
.article .content figure img {
  width: 100%;
  height: auto;
  display: block;
}
.article .content figure figcaption {
  font-size: 0.85rem;
  color: #6c757d;
  margin-top: .35rem;
  text-align: center;
}

/* === Citation / Quote dans l'article === */
.article .content blockquote {
  position: relative;
  margin: 2rem 0;
  padding: 1.75rem 1.75rem 1.5rem 3.5rem;
  background: #f8f9fb;
  border-radius: 12px;
  border-left: 4px solid #0f70b7; 
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.6;
  color: #212529;
  text-align: left;
}
.article .content blockquote,
.article .content blockquote * {
  text-align: left !important;
}
.article .content blockquote::before {
  content: "“";
  position: absolute;
  top: 50%;
  left: 1.4rem;
  transform: translateY(-50%);
  font-size: 3.5rem;
  line-height: 1;
  color: rgba(15, 112, 183, 0.18);
  font-family: Georgia, "Times New Roman", serif;
}
.article .content blockquote p {
  margin-bottom: 0.6rem;
}
.article .content blockquote p:last-child {
  margin-bottom: 0;
}
.article .content blockquote footer,
.article .content blockquote cite {
  display: block;
  margin-top: 0.85rem;
  font-size: 0.9rem;
  font-style: normal;
  font-weight: 600;
  color: #495057;
}

/* =========================================================
   BLOG DETAIL – IMAGES SANS DÉFORMATION
========================================================= */
.blog-details .post-img {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 12px;
  background: #e9ecef;
}
.blog-details .post-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.article .content img {
  max-width: 100%;
  height: auto !important;
  object-fit: contain;
}
.sidebar .recent-posts-widget .post-item {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.sidebar .recent-posts-widget img {
  width: 90px;
  height: 70px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: .5rem;
}

/* =========================================================
   SIDEBAR – vraie sidebar desktop
========================================================= */
@media (min-width: 992px) {
  .blog-details-page .sidebar {
    position: sticky;
    top: 110px;
    align-self: flex-start;
  }
  .blog-details-page .widgets-container {
    padding-left: 1rem;
  }
}

/* =========================================================
   PANNEAU COMMERCIAL (Publicités + Market)
========================================================= */
.commercial-panel{
  border:0;
  border-radius:18px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 10px 35px rgba(15,23,42,.08);
}
.commercial-tabs{
  display:flex;
  align-items:center;
  gap:4px;
  padding:6px;
  background:#e6e7e8;
  border-bottom:1px solid #e9ecef;
}
.commercial-tab{
  flex:1;
  border:0;
  background:transparent;
  color:#68727d;
  border-radius:11px;
  padding:.65rem .75rem;
  font-size:.84rem;
  font-weight:700;
  cursor:pointer;
  transition:
    background .25s ease,
    color .25s ease,
    box-shadow .25s ease,
    transform .2s ease;
}
.commercial-tab:hover{
  color:#0f70b7;
}
.commercial-tab.active{
  background:#fff;
  color:#0f70b7;
  box-shadow:0 3px 12px rgba(15,23,42,.08);
}
.commercial-content{
  position:relative;
}
.commercial-pane{
  display:none;
}
.commercial-pane.active{
  display:block;
}

/* =========================================================
   SLIDER PUBLICITAIRE — FORMAT PORTRAIT FIXE 3:4
========================================================= */
.ads-slider{
  position:relative;
  width:100%;
  overflow:hidden;
  background:#eef2f5;
  aspect-ratio:3 / 4;          /* ← PORTRAIT OBLIGATOIRE */
}
.ads-track{
  display:flex;
  width:100%;
  height:100%;
  transition:transform .75s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
.ad-slide{
  position:relative;
  flex:0 0 100%;
  width:100%;
  height:100%;
  overflow:hidden;
  background:#eef2f5;
  aspect-ratio: 3 / 4;         /* ← sécurité supplémentaire */
}
.ad-slide img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.ad-slide::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    180deg,
    rgba(0,0,0,0) 45%,
    rgba(0,0,0,.62) 100%
  );
  pointer-events:none;
}
.ad-caption{
  position:absolute;
  z-index:2;
  left:18px;
  right:18px;
  bottom:18px;
  color:#fff;
}
.ad-caption small{
  display:inline-block;
  margin-bottom:5px;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:.82;
}
.ad-caption h4{
  margin:0;
  font-size:1rem;
  line-height:1.25;
  font-weight:800;
}
.ads-control{
  position:absolute;
  z-index:4;
  top:50%;
  transform:translateY(-50%);
  width:34px;
  height:34px;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.88);
  color:#0f70b7;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 15px rgba(0,0,0,.14);
  opacity:0;
  transition:
    opacity .25s ease,
    transform .25s ease,
    background .2s ease;
}
.ads-slider:hover .ads-control{
  opacity:1;
}
.ads-control:hover{
  background:#fff;
}
.ads-prev{ left:12px; }
.ads-next{ right:12px; }
.ads-dots{
  position:absolute;
  z-index:5;
  left:50%;
  bottom:10px;
  transform:translateX(-50%);
  display:flex;
  gap:5px;
}
.ads-dot{
  width:7px;
  height:7px;
  padding:0;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.55);
  transition:
    width .25s ease,
    background .25s ease;
}
.ads-dot.active{
  width:20px;
  border-radius:10px;
  background:#fff;
}
.commercial-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:.8rem 1rem;
  border-top:1px solid #edf0f2;
  background:#fff;
  font-size:.74rem;
  color:#7b858e;
}
.commercial-link{
  color:#0f70b7;
  font-weight:700;
  text-decoration:none;
  white-space:nowrap;
}
.commercial-link:hover{
  color:#09598e;
}

/* === Market list (inchangé) === */
.market-header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  padding:1rem 1rem .7rem;
}
.market-kicker{
  display:block;
  margin-bottom:2px;
  color:#0f70b7;
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.1em;
}
.market-header h3{
  margin:0;
  font-size:1.2rem;
  font-weight:900;
  color:#18212b;
}
.market-all{
  display:inline-flex;
  align-items:center;
  gap:2px;
  color:#0f70b7;
  font-size:.74rem;
  font-weight:700;
  text-decoration:none;
}
.market-list{
  display:flex;
  flex-direction:column;
  gap:0;
}
.market-item{
  display:flex;
  align-items:center;
  gap:.75rem;
  padding:.75rem 1rem;
  border-top:1px solid #edf0f2;
  color:inherit;
  text-decoration:none;
  transition:
    background .2s ease,
    transform .2s ease;
}
.market-item:hover{
  background:#f8fafb;
}
.market-thumb{
  flex:0 0 76px;
  width:76px;
  height:66px;
  border-radius:10px;
  overflow:hidden;
  background:#edf0f2;
}
.market-thumb img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.market-info{
  min-width:0;
  flex:1;
}
.market-category{
  display:block;
  margin-bottom:3px;
  color:#89939c;
  font-size:.63rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.market-title{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  color:#202932;
  font-size:.82rem;
  font-weight:750;
  line-height:1.25;
}
.market-price{
  display:block;
  margin-top:5px;
  color:#0f70b7;
  font-size:.78rem;
  font-weight:900;
}
.market-arrow{
  flex:0 0 auto;
  color:#a1aab2;
  font-size:1rem;
}

/* === Responsive commercial panel === */
@media (max-width:767.98px){
  .commercial-panel{
    border-radius:14px;
  }
  .ads-slider{
    aspect-ratio:3 / 4;       /* ← portrait aussi sur mobile */
  }
  .ads-control{
    opacity:1;
    width:30px;
    height:30px;
  }
  .ad-caption{
    left:14px;
    right:14px;
    bottom:14px;
  }
  .ad-caption h4{
    font-size:.9rem;
  }
  .commercial-footer{
    padding:.7rem .8rem;
  }
  .market-thumb{
    flex-basis:68px;
    width:68px;
    height:60px;
  }
}


/* =========================================================
   SUPPRESSION DU VIDE ENTRE ONGLETS & SLIDER PUB
========================================================= */

/* 1) Retire le padding du template sur le panel commercial */
.widget-item.commercial-panel,
.commercial-panel {
  padding: 0 !important;
}

/* 2) Colle les onglets au bord supérieur */
.commercial-tabs {
  margin-bottom: 0 !important;
  /* le padding:6px interne est conservé pour l’ergonomie des boutons */
}

/* 3) Supprime tout espace entre les onglets et le contenu */
.commercial-content,
.commercial-pane,
.commercial-pane.active,
#commercial-ads,
#commercial-market {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* 4) Le slider touche directement la barre d’onglets */
.ads-slider {
  margin-top: 0 !important;
  border-radius: 0 !important; /* pas d’arrondis internes qui créent un effet de marge */
}

/* 5) Le footer du slider aussi reste collé */
.commercial-footer {
  margin-top: 0 !important;
}

/* =========================================================
   MARKET — Grille dynamique (API + fallback)
========================================================= */

.market-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:10px;
  padding:12px;
}

.market-loading,
.market-empty{
  grid-column:1 / -1;
  text-align:center;
  padding:1.5rem .5rem;
  color:#89939c;
  font-size:.85rem;
}

/* Carte produit */
.market-card{
  display:block;
  background:#fff;
  border:1px solid #e9ecef;
  border-radius:12px;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  transition:transform .2s ease, box-shadow .2s ease;
}

.market-card:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 20px rgba(0,0,0,.10);
}

/* Image produit — carré 1:1 */
.market-card-img{
  position:relative;
  aspect-ratio:1 / 1;
  background:#f1f3f5;
  overflow:hidden;
  padding:8px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.market-card-img img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  display:block;
}

/* Corps carte */
.market-card-body{
  padding:10px;
}

.market-card-cat{
  display:block;
  font-size:.65rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:#0f70b7;
  margin-bottom:4px;
}

.market-card-title{
  font-size:.82rem;
  font-weight:700;
  line-height:1.3;
  color:#1a1a1a;
  margin:0 0 6px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.market-card-price{
  font-size:.85rem;
  font-weight:800;
  color:#0f70b7;
}

/* Responsive sidebar étroite */
@media (max-width: 350px){
  .market-grid{
    grid-template-columns:1fr;
  }
}