/* ===========================================
   BLUE REFLEX - CSS Custom 2026
   Design moderne inspiré Oltega/Tailwind
=========================================== */

/* ----------------------------
   RESET & VARIABLES
----------------------------- */
:root {
  /* Couleurs principales */
  --br-blue: #2563eb;
  --br-blue-dark: #1d4ed8;
  --br-blue-light: #3b82f6;
  --br-accent: #f43f5e;
  --br-accent-dark: #e11d48;
  
  /* Neutres - Palette Slate */
  --br-white: #ffffff;
  --br-gray-50: #f8fafc;
  --br-gray-100: #f1f5f9;
  --br-gray-200: #e2e8f0;
  --br-gray-300: #cbd5e1;
  --br-gray-400: #94a3b8;
  --br-gray-500: #64748b;
  --br-gray-600: #475569;
  --br-gray-700: #334155;
  --br-gray-800: #1e293b;
  --br-gray-900: #0f172a;
  
  /* Radius - Style arrondi moderne */
  --br-radius-sm: 6px;
  --br-radius: 12px;
  --br-radius-lg: 16px;
  --br-radius-xl: 24px;
  --br-radius-full: 9999px;
  
  /* Shadows - Style Tailwind */
  --br-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --br-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --br-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --br-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --br-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  
  /* Transitions */
  --br-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --br-transition-slow: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* ================================
     TYPOGRAPHIE - Système en PX
     Hiérarchie claire 2026
  ================================ */
  
  /* Tailles de texte */
  --fs-xs: 11px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 17px;
  --fs-lg: 19px;
  --fs-xl: 22px;
  --fs-2xl: 26px;
  --fs-3xl: 32px;
  --fs-4xl: 40px;
  
  /* Line heights */
  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;
  
  /* Font weights */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  
  /* Couleurs menu catégories */
  --cat-creation: #db2777;
  --cat-catalogues: #eab308;
  --cat-cadeaux: #ef4444;
  --cat-imprimerie: #10b981;
  --cat-expo: #f97316;
  --cat-objets: #fbbf24;
  --cat-textile: #dc2626;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--br-gray-700);
  background: var(--br-gray-50);
  letter-spacing: -0.01em;
}

/* ================================
   HIÉRARCHIE TYPOGRAPHIQUE
   Système en PX - 2026
================================ */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--br-gray-900);
  letter-spacing: -0.5px;
  margin: 0 0 16px 0;
}

h1 { 
  font-size: 40px; 
  font-weight: var(--fw-extrabold);
  letter-spacing: -1px;
}
h2 { 
  font-size: 32px; 
  font-weight: var(--fw-bold);
}
h3 { 
  font-size: 26px; 
  font-weight: var(--fw-bold);
}
h4 { 
  font-size: 22px; 
  font-weight: var(--fw-semibold);
}
h5 { 
  font-size: 19px; 
  font-weight: var(--fw-semibold);
}
h6 { 
  font-size: 17px; 
  font-weight: var(--fw-semibold);
}

p {
  margin: 0 0 16px 0;
  font-size: 15px;
  line-height: var(--lh-relaxed);
  color: var(--br-gray-600);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--br-blue);
  text-decoration: none;
  transition: var(--br-transition);
}

a:hover {
  color: var(--br-blue-dark);
  text-decoration: none;
}

/* Focus visible moderne */
:focus-visible {
  outline: 2px solid var(--br-blue);
  outline-offset: 2px;
}

/* ----------------------------
   HEADER PRINCIPAL - Logo + tel
----------------------------- */
body.admin-bar .navbar-fixed-top {
  top: 32px !important;
}

.navbar.navbar-inverse.navbar-fixed-top {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030 !important;
  /* Gradient moderne sombre */
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
  border: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 20px !important;
  min-height: 70px !important;
  height: 70px;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25) !important;
  width: 100% !important;
}

.navbar-fixed-top .container,
.navbar-fixed-top .container-fluid {
  display: contents !important;
}

.navbar-fixed-top .navbar-header {
  float: none !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

.navbar-fixed-top .navbar-header h1 {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

.navbar-fixed-top .navbar-brand {
  float: none !important;
  padding: 5px 15px !important;
  margin: 0 !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
}

.navbar-fixed-top .navbar-brand img {
  height: 45px !important;
  width: auto !important;
  max-width: 150px;
}

/* Menu principal (téléphone) */
.navbar-fixed-top #mainmenu {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

.navbar-fixed-top #mainmenu .navbar-nav,
.navbar-fixed-top #menu-menu-principal {
  float: none !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

.navbar-fixed-top #mainmenu .navbar-nav > li,
.navbar-fixed-top #menu-menu-principal > li {
  float: none !important;
  margin: 0 !important;
}

.navbar-fixed-top #mainmenu .navbar-nav > li > a,
.navbar-fixed-top #menu-menu-principal > li > a {
  color: var(--br-white) !important;
  font-weight: 700 !important;
  font-size: 17px !important;
  padding: 12px 24px !important;
  line-height: 1.2 !important;
  background: rgba(255,255,255,0.1) !important;
  border-radius: var(--br-radius) !important;
  letter-spacing: 0.02em;
  transition: var(--br-transition) !important;
}

.navbar-fixed-top #mainmenu .navbar-nav > li > a:hover {
  background: rgba(255,255,255,0.2) !important;
  transform: translateY(-1px);
}

/* Toggle mobile */
.navbar-fixed-top .navbar-toggle {
  float: none !important;
  margin: 10px !important;
  padding: 9px 10px !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  border-radius: 4px !important;
  background: transparent !important;
}

.navbar-fixed-top .navbar-toggle .icon-bar {
  background-color: var(--br-white) !important;
  width: 22px;
  height: 2px;
  display: block;
}

/* ----------------------------
   SPACER après header fixe
   Note: Il y a 2 spacers dans le HTML
   - 1er après navbar-fixed-top (doit compenser le header fixe)
   - 2ème après navbar-sub (ne doit PAS avoir de hauteur)
----------------------------- */
.row.spacer {
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  clear: both;
  width: 100%;
}

/* Seulement le premier spacer (après le header fixe) a une hauteur */
.navbar-fixed-top + .row.spacer {
  height: 70px !important;
}

/* Admin bar ajoute 32px au top */
body.admin-bar .navbar-fixed-top + .row.spacer {
  height: 70px !important; /* Le header est déjà décalé de 32px par WordPress */
}

/* ----------------------------
   MENU CATÉGORIES - Full Width
----------------------------- */
.navbar.navbar-inverse.navbar-sub {
  position: relative !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: auto !important;
  width: 100% !important;
  display: block !important;
}

.navbar-sub .navbar-header {
  display: none;
}

.navbar-sub .navbar-toggle {
  display: none;
  margin: 10px;
  border: 1px solid rgba(255,255,255,0.3);
  background: var(--br-blue);
}

.navbar-sub .navbar-toggle .icon-bar {
  background: var(--br-white);
}

#submenu {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

#submenu .nav.navbar-nav,
#menu-categories {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  float: none !important;
}

#submenu .nav.navbar-nav > li,
#menu-categories > li {
  flex: 1 1 auto !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

#submenu .nav.navbar-nav > li > a,
#menu-categories > li > a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px 14px !important;
  color: var(--br-white) !important;
  font-size: 15px !important;
  font-weight: var(--fw-bold) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  text-align: center !important;
  border: none !important;
  transition: var(--br-transition) !important;
  white-space: nowrap !important;
  min-height: 52px !important;
}

#submenu .nav.navbar-nav > li > a:hover,
#menu-categories > li > a:hover,
#submenu .nav.navbar-nav > li > a:focus,
#menu-categories > li > a:focus {
  filter: brightness(1.15) !important;
  text-decoration: none !important;
}

/* Couleurs individuelles du menu */
#menu-item-149 > a { background: var(--br-blue) !important; }
#menu-item-56 > a { background: var(--cat-creation) !important; }
#menu-item-68 > a { background: var(--cat-catalogues) !important; color: var(--br-gray-900) !important; }
#menu-item-223 > a { background: var(--cat-cadeaux) !important; }
#menu-item-55 > a { background: var(--cat-imprimerie) !important; }
#menu-item-221 > a { background: var(--cat-expo) !important; }
#menu-item-8 > a { background: var(--cat-objets) !important; color: var(--br-gray-900) !important; }
#menu-item-9 > a { background: var(--cat-textile) !important; }
#menu-item-229 > a { background: var(--br-gray-800) !important; }

/* Active state */
#submenu .nav.navbar-nav > li.active > a,
#submenu .nav.navbar-nav > li.current-menu-item > a,
#menu-categories > li.active > a,
#menu-categories > li.current-menu-item > a {
  box-shadow: inset 0 -4px 0 rgba(255,255,255,0.6) !important;
}

/* ----------------------------
   RESPONSIVE HEADER + MENU
----------------------------- */
@media (max-width: 991px) {
  .navbar-fixed-top #mainmenu {
    position: absolute !important;
    top: 60px;
    left: 0;
    right: 0;
    background: var(--br-blue-dark) !important;
    padding: 10px !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  }
  
  .navbar-fixed-top #mainmenu.collapse:not(.in) {
    display: none !important;
  }
  
  .navbar-fixed-top #mainmenu.in {
    display: block !important;
  }
  
  .navbar-fixed-top #mainmenu .navbar-nav {
    flex-direction: column !important;
    width: 100%;
  }
  
  .navbar-fixed-top #mainmenu .navbar-nav > li > a {
    padding: 12px 15px !important;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }
}

@media (max-width: 991px) {
  #submenu .nav.navbar-nav,
  #menu-categories {
    flex-wrap: wrap !important;
  }
  
  #submenu .nav.navbar-nav > li,
  #menu-categories > li {
    flex: 1 1 50% !important;
  }
  
  #submenu .nav.navbar-nav > li > a,
  #menu-categories > li > a {
    font-size: 11px !important;
    padding: 12px 8px !important;
  }
}

@media (max-width: 600px) {
  .navbar-sub .navbar-header {
    display: block;
    width: 100%;
    background: var(--br-blue);
  }
  
  .navbar-sub .navbar-toggle {
    display: block;
    float: right;
  }
  
  #submenu {
    position: relative;
  }
  
  #submenu.collapse:not(.in) {
    display: none !important;
  }
  
  #submenu.in {
    display: block !important;
  }
  
  #submenu .nav.navbar-nav,
  #menu-categories {
    flex-direction: column !important;
  }
  
  #submenu .nav.navbar-nav > li,
  #menu-categories > li {
    flex: 1 1 100% !important;
    width: 100% !important;
  }
  
  #submenu .nav.navbar-nav > li > a,
  #menu-categories > li > a {
    font-size: 13px !important;
    padding: 14px 15px !important;
    justify-content: flex-start !important;
  }
}

/* ----------------------------
   SECTION FEATURED (mise en avant)
----------------------------- */
.row.featured {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 2px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #1a1a1a !important;
  width: 100% !important;
  clear: both !important;
  float: none !important;
}

.row.featured::before,
.row.featured::after {
  display: none !important;
}

.row.featured > [class*="col-"],
.row.featured .item-featured {
  float: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative !important;
  overflow: hidden !important;
  aspect-ratio: 4/3;
  min-height: 200px;
}

.row.featured .item-featured a {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}

.row.featured .item-featured img,
.row.featured > [class*="col-"] img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  opacity: 0.8;
  transition: all 0.4s ease !important;
  position: absolute;
  top: 0;
  left: 0;
}

.row.featured .item-featured:hover img {
  opacity: 1;
  transform: scale(1.05);
}

.row.featured .caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background: linear-gradient(transparent, rgba(0,0,0,0.8));
}

.row.featured .caption .cat,
.row.featured .caption .date {
  color: var(--br-white);
  font-size: 11px;
  text-transform: uppercase;
  margin-bottom: 5px;
}

.row.featured .caption .title {
  color: var(--br-white);
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
}

@media (max-width: 991px) {
  .row.featured {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  
  .row.featured > [class*="col-"],
  .row.featured .item-featured {
    min-height: 150px;
  }
}

@media (max-width: 600px) {
  .row.featured {
    grid-template-columns: 1fr !important;
  }
  
  .row.featured > [class*="col-"],
  .row.featured .item-featured {
    aspect-ratio: 16/9;
    min-height: 180px;
  }
}

/* ----------------------------
   CONTAINER PRINCIPAL - 2 colonnes
----------------------------- */
.row {
  margin: 0 !important;
  padding: 0 !important;
}

.row::before,
.row::after {
  display: table;
  content: " ";
  clear: both;
}

/* Layout 2 colonnes : contenu à gauche + sidebar à droite */
.col-md-9.cont-grid {
  float: left !important;
  width: 75% !important;
  padding: 20px !important;
  background: var(--br-white);
  min-height: 100vh;
}

.col-md-3.sidebar {
  float: right !important;
  width: 25% !important;
  padding: 20px !important;
  background: var(--br-gray-50);
  border-left: 1px solid var(--br-gray-200);
}

/* Container grille */
.cont-grid {
  border: none !important;
}

/* Responsive : 1 colonne sur tablette/mobile */
@media (max-width: 992px) {
  .col-md-9.cont-grid {
    float: none !important;
    width: 100% !important;
    padding: 16px !important;
    min-height: auto;
  }
  
  .col-md-3.sidebar {
    float: none !important;
    width: 100% !important;
    border-left: none;
    border-top: 1px solid var(--br-gray-200);
    padding: 16px !important;
  }
}

/* ----------------------------
   GRILLE D'ARTICLES - CSS Grid
   OVERRIDE ISOTOPE.JS
----------------------------- */
.grid,
.grid.isotope {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  /* Reset Isotope */
  position: relative !important;
  height: auto !important;
  overflow: visible !important;
}

/* Responsive grid */
@media (max-width: 1400px) {
  .grid,
  .grid.isotope {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 18px !important;
  }
}

@media (max-width: 992px) {
  .grid,
  .grid.isotope {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
  }
}

@media (max-width: 768px) {
  .grid,
  .grid.isotope {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
}

@media (max-width: 500px) {
  .grid,
  .grid.isotope {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* ----------------------------
   CARTE ARTICLE - Style Tailwind/Oltega
   OVERRIDE ISOTOPE.JS INLINE STYLES
----------------------------- */
.grid .item,
.grid .item.isotope-item {
  /* RESET ISOTOPE INLINE STYLES */
  position: relative !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  float: none !important;
  width: 100% !important;
  min-height: auto !important;
  height: auto !important;
  margin: 0 !important;
  
  /* Style carte moderne avec shadow prononcée */
  background: var(--br-white);
  border-radius: var(--br-radius-xl);
  overflow: hidden;
  border: none !important;
  box-shadow: 
    0 1px 3px rgba(0,0,0,0.06),
    0 4px 12px rgba(0,0,0,0.08),
    0 8px 24px rgba(0,0,0,0.06);
  transition: var(--br-transition-slow) !important;
  display: flex !important;
  flex-direction: column;
}

.grid .item:hover,
.grid .item.isotope-item:hover {
  box-shadow: 
    0 4px 8px rgba(0,0,0,0.08),
    0 12px 32px rgba(0,0,0,0.12),
    0 24px 48px rgba(0,0,0,0.1);
  transform: translateY(-8px) scale(1.01) !important;
}

/* Article dans la carte */
.grid .item > div[class*="post"],
.grid .item .post,
.grid .item .type-post {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

/* ----------------------------
   IMAGE DE L'ARTICLE
----------------------------- */
.grid .item a:has(img) {
  display: block;
  width: 100%;
  height: 220px;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
  background: var(--br-gray-100);
}

.grid .item .grid-cop,
.grid .item .wp-post-image,
.grid .item a > img {
  width: 100% !important;
  height: 220px !important;
  object-fit: cover;
  object-position: center;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Force affichage images cachées */
.grid .item img[style*="display: none"],
.grid .item img[style*="display:none"] {
  display: block !important;
}

.grid .item:hover .grid-cop,
.grid .item:hover .wp-post-image {
  transform: scale(1.05);
}

/* ----------------------------
   CONTENU DE LA CARTE
----------------------------- */
/* ================================
   CARD : CATÉGORIES (badges)
   Niveau hiérarchique : LABEL
================================ */
.grid .item .grid-cat {
  margin: 0 !important;
  padding: 22px 24px 0 24px;
  line-height: var(--lh-normal);
}

.grid .item .grid-cat a {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  margin-right: 8px;
  margin-bottom: 10px;
  background: var(--br-blue);
  color: #ffffff !important;
  border-radius: 100px;
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  text-decoration: none !important;
  transition: var(--br-transition);
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
}

.grid .item .grid-cat a:hover {
  background: var(--br-blue-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
}

/* ================================
   CARD : TITRE
   Niveau hiérarchique : H3
   Taille : 21px - Bold
================================ */
.grid .item .grid-tit {
  margin: 14px 24px 0 24px !important;
  padding: 0;
  font-size: 21px;
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: -0.3px;
}

.grid .item .grid-tit a {
  color: var(--br-gray-900);
  text-decoration: none;
  transition: var(--br-transition);
  display: block;
}

.grid .item .grid-tit a:hover {
  color: var(--br-blue);
}

/* Meta - cachée */
.grid .item .meta {
  display: none !important;
}

/* ================================
   CARD : TEXTE / EXTRAIT
   Niveau hiérarchique : BODY
   Taille : 15px - Regular
================================ */
.grid .item .grid-text {
  flex: 1;
  margin: 0;
  padding: 14px 24px 26px 24px !important;
  font-size: 15px;
  font-weight: var(--fw-normal);
  line-height: var(--lh-relaxed);
  color: var(--br-gray-600);
}

.grid .item .grid-text p {
  margin: 0 0 14px 0;
}

.grid .item .grid-text p:last-child {
  margin-bottom: 0;
}

/* ================================
   CARD : LIENS DANS LE TEXTE
   Style : Bleu souligné au hover
================================ */
.grid .item .grid-text a {
  color: var(--br-blue);
  font-size: 15px;
  font-weight: var(--fw-semibold);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: var(--br-transition);
}

.grid .item .grid-text a:hover {
  color: var(--br-blue-dark);
  border-bottom-color: var(--br-blue-dark);
}

/* ================================
   CARD : TEXTE GRAS (strong/b)
   Niveau : EMPHASIS
   Couleur plus foncée + semibold
================================ */
.grid .item .grid-text strong,
.grid .item .grid-text b {
  color: var(--br-gray-800);
  font-size: 15px;
  font-weight: var(--fw-semibold);
}

/* Tags - Style badge */
.grid .item .tag-post {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  margin: 0;
  border-top: 1px solid var(--br-gray-100);
  font-size: var(--text-xs);
  color: var(--br-gray-400);
  background: var(--br-gray-50);
}

.grid .item .tag-post i {
  color: var(--br-gray-300);
}

.grid .item .tag-post a {
  color: var(--br-gray-500);
  font-weight: 500;
}

.grid .item .tag-post a:hover {
  color: var(--br-blue);
}

/* P vide fin */
.grid .item > div > p:last-child:empty {
  display: none;
}

/* Sticky posts - pas de badge spécial */
.grid .item .sticky {
  border: none !important;
}

/* ----------------------------
   VIDEO OVERLAY
----------------------------- */
.link-video {
  position: relative;
  display: block;
  height: 200px;
  overflow: hidden;
}

.link-video img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

.link-video i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--br-white);
  font-size: 48px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
  transition: var(--br-transition);
}

.link-video:hover i {
  transform: translate(-50%, -50%) scale(1.2);
}

/* ----------------------------
   PAGINATION
----------------------------- */
.pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 40px 0;
  padding: 0 !important;
}

.pagination span,
.pagination a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--br-gray-300);
  border-radius: var(--br-radius);
  background: var(--br-white);
  color: var(--br-gray-800);
  font-weight: 500;
  transition: var(--br-transition);
}

.pagination a:hover {
  background: var(--br-blue);
  border-color: var(--br-blue);
  color: var(--br-white);
}

.pagination .current {
  background: var(--br-blue);
  border-color: var(--br-blue);
  color: var(--br-white);
}

/* ----------------------------
   SIDEBAR - Style moderne
----------------------------- */
.sidebar {
  background: var(--br-white);
  border-radius: var(--br-radius-lg);
  border: 1px solid var(--br-gray-200);
  box-shadow: var(--br-shadow-sm);
  overflow: hidden;
}

/* Blocs sidebar */
#bloc_actu_left,
#bloc_contact_left {
  padding: 24px;
  margin: 0;
  border-bottom: 1px solid var(--br-gray-100);
}

#bloc_actu_left:last-child,
#bloc_contact_left:last-child {
  border-bottom: none;
}

#bloc_actu_left h3,
#bloc_contact_left h3 {
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--br-gray-900);
  margin: 0 0 16px 0;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--br-blue);
  letter-spacing: 0.05em;
}

#bloc_actu_left img,
#bloc_contact_left img {
  width: 100%;
  height: auto;
  border-radius: var(--br-radius);
  margin-bottom: 16px;
  box-shadow: var(--br-shadow-sm);
}

#bloc_actu_left p,
#bloc_contact_left p {
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--br-gray-500);
  margin: 0 0 12px 0;
}

#bloc_contact_left iframe {
  width: 100%;
  border-radius: var(--br-radius);
  margin-top: 16px;
  border: 1px solid var(--br-gray-200);
}

/* Social links */
.sidebar .social {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  background: var(--br-gray-50);
  border-top: 1px solid var(--br-gray-100);
}

.sidebar .social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--br-white);
  color: var(--br-gray-600);
  border: 1px solid var(--br-gray-200);
  border-radius: var(--br-radius);
  font-size: 20px;
  transition: var(--br-transition);
}

.sidebar .social a:hover {
  background: var(--br-blue);
  border-color: var(--br-blue);
  color: var(--br-white);
  transform: translateY(-2px);
  box-shadow: var(--br-shadow-md);
}

.sidebar .widget {
  padding: 20px 24px;
  margin-bottom: 0;
  border-bottom: 1px solid var(--br-gray-100);
}

.sidebar .widget:last-child {
  border-bottom: none;
}

.sidebar .widget h3 {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--br-gray-400);
  margin: 0 0 16px 0;
  padding-bottom: 0;
  border-bottom: none;
  letter-spacing: 0.1em;
}

.sidebar .widget ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sidebar .widget ul li {
  margin: 0;
  padding: 0;
}

.sidebar .widget a {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  margin: 0 -12px;
  color: var(--br-gray-700);
  font-size: var(--text-sm);
  font-weight: 500;
  border-radius: var(--br-radius-sm);
  border-bottom: none;
  transition: var(--br-transition);
}

.sidebar .widget a:hover {
  background: var(--br-gray-50);
  color: var(--br-blue);
  padding-left: 16px;
}

.sidebar .widget ul li:last-child a {
  border-bottom: none;
}

/* ----------------------------
   FOOTER - Style moderne
----------------------------- */
.col-md-12.footer,
.footer {
  clear: both;
  /* Gradient assorti au header */
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  color: rgba(255,255,255,0.7);
  padding: 40px 24px;
  text-align: center;
  font-size: var(--text-base);
  width: 100% !important;
  float: none !important;
  letter-spacing: -0.01em;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.footer a {
  color: var(--br-white);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,0.3);
  text-underline-offset: 3px;
  transition: var(--br-transition);
}

.footer a:hover {
  text-decoration-color: var(--br-white);
  color: #60a5fa;
}

.footer a:hover {
  color: var(--br-accent);
}

/* ===========================================
   SINGLE POST PAGE - Article individuel
   Design moderne 2026
=========================================== */

/* Fix Bootstrap: Créer un wrapper flex implicite pour les colonnes orphelines */
body.single-post {
  display: flex;
  flex-wrap: wrap;
}

/* Les éléments avant le contenu principal restent en block */
body.single-post .navbar,
body.single-post .row.spacer {
  flex: 0 0 100%;
  width: 100%;
}

/* Container principal article - 75% */
body.single-post .col-md-9.single {
  flex: 0 0 75%;
  width: 75%;
  max-width: 75%;
  float: none !important;
  padding: 32px 40px 32px 24px;
  background: var(--br-white);
  min-height: 100vh;
  border: none !important;
  box-sizing: border-box;
  order: 1;
}

/* Sidebar - 25% */
body.single-post .col-md-3.sidebar {
  flex: 0 0 25%;
  width: 25%;
  max-width: 25%;
  float: none !important;
  order: 2;
}

/* Footer - 100% */
body.single-post .col-md-12.footer,
body.single-post .footer {
  flex: 0 0 100%;
  width: 100%;
  order: 3;
}

/* Fallback pour navigateurs sans flex (IE ancien) */
.col-md-9.single {
  float: left !important;
  width: 75% !important;
  padding: 32px 40px 32px 24px !important;
  background: var(--br-white);
  min-height: 100vh;
  border: none !important;
  box-sizing: border-box !important;
}

/* Container intérieur - Card style */
.col-md-9.single .col-md-9.single-in,
.single-in {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
  background: var(--br-white);
  border-radius: var(--br-radius-xl);
  overflow: hidden;
  box-shadow: 
    0 1px 3px rgba(0,0,0,0.04),
    0 4px 12px rgba(0,0,0,0.06),
    0 8px 32px rgba(0,0,0,0.05);
}

/* ----------------------------
   IMAGE À LA UNE
----------------------------- */
.single-in .sing-cop,
.single-in .wp-post-image {
  width: 100% !important;
  max-width: 100%;
  height: auto !important;
  min-height: 300px;
  max-height: 500px;
  object-fit: cover;
  object-position: center;
  display: block !important;
  margin: 0 !important;
  border-radius: 0;
}

/* ----------------------------
   CONTAINER TITRE + META
----------------------------- */
.single-in .sing-tit-cont {
  padding: 32px 40px 24px 40px;
  background: var(--br-white);
  border-bottom: 1px solid var(--br-gray-100);
}

/* ----------------------------
   CATÉGORIE - Badge style
----------------------------- */
.single-in .sing-tit-cont .cat {
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
  font-size: 0;
  line-height: 1;
}

.single-in .sing-tit-cont .cat a {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  margin-right: 10px;
  margin-bottom: 8px;
  background: linear-gradient(135deg, var(--br-blue) 0%, var(--br-blue-dark) 100%);
  color: #ffffff !important;
  border-radius: 100px;
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  text-decoration: none !important;
  transition: var(--br-transition);
  box-shadow: 0 3px 10px rgba(37, 99, 235, 0.25);
}

.single-in .sing-tit-cont .cat a:hover {
  background: linear-gradient(135deg, var(--br-blue-dark) 0%, #1e40af 100%);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(37, 99, 235, 0.35);
}

/* Couleurs catégories spécifiques */
.single-in .sing-tit-cont .cat a[href*="creation"] {
  background: linear-gradient(135deg, var(--cat-creation) 0%, #be185d 100%);
  box-shadow: 0 3px 10px rgba(219, 39, 119, 0.25);
}
.single-in .sing-tit-cont .cat a[href*="imprimerie"] {
  background: linear-gradient(135deg, var(--cat-imprimerie) 0%, #059669 100%);
  box-shadow: 0 3px 10px rgba(16, 185, 129, 0.25);
}
.single-in .sing-tit-cont .cat a[href*="catalogues"] {
  background: linear-gradient(135deg, var(--cat-catalogues) 0%, #ca8a04 100%);
  box-shadow: 0 3px 10px rgba(234, 179, 8, 0.25);
}
.single-in .sing-tit-cont .cat a[href*="cadeaux"] {
  background: linear-gradient(135deg, var(--cat-cadeaux) 0%, #dc2626 100%);
  box-shadow: 0 3px 10px rgba(239, 68, 68, 0.25);
}
.single-in .sing-tit-cont .cat a[href*="expo"] {
  background: linear-gradient(135deg, var(--cat-expo) 0%, #ea580c 100%);
  box-shadow: 0 3px 10px rgba(249, 115, 22, 0.25);
}
.single-in .sing-tit-cont .cat a[href*="objetpub"] {
  background: linear-gradient(135deg, var(--cat-objets) 0%, #d97706 100%);
  color: var(--br-gray-900) !important;
  box-shadow: 0 3px 10px rgba(251, 191, 36, 0.25);
}
.single-in .sing-tit-cont .cat a[href*="textilepub"] {
  background: linear-gradient(135deg, var(--cat-textile) 0%, #b91c1c 100%);
  box-shadow: 0 3px 10px rgba(220, 38, 38, 0.25);
}

/* ----------------------------
   TITRE ARTICLE
----------------------------- */
.single-in .sing-tit-cont h3.sing-tit,
.single-in h3.sing-tit {
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
  font-size: 32px;
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  letter-spacing: -0.5px;
  color: var(--br-gray-900);
}

/* ----------------------------
   META - Date, auteur
----------------------------- */
.single-in .sing-tit-cont .meta {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 14px;
  font-weight: var(--fw-medium);
  color: var(--br-gray-400);
  display: flex;
  align-items: center;
  gap: 6px;
}

.single-in .sing-tit-cont .meta i {
  font-size: 14px;
  color: var(--br-gray-300);
}

/* ----------------------------
   CONTENU ARTICLE
----------------------------- */
.single-in .sing-cont {
  padding: 0 !important;
  margin: 0 !important;
  background: var(--br-white);
}

.single-in .sing-cont .sing-spacer {
  padding: 32px 40px 40px 40px;
}

/* Typographie du contenu */
.single-in .sing-cont p {
  margin: 0 0 20px 0;
  font-size: 17px;
  font-weight: var(--fw-normal);
  line-height: 1.8;
  color: var(--br-gray-700);
}

.single-in .sing-cont p:last-child {
  margin-bottom: 0;
}

/* Titres dans le contenu */
.single-in .sing-cont h1,
.single-in .sing-cont h2,
.single-in .sing-cont h3,
.single-in .sing-cont h4,
.single-in .sing-cont h5,
.single-in .sing-cont h6 {
  margin: 32px 0 16px 0;
  color: var(--br-gray-900);
}

.single-in .sing-cont h1:first-child,
.single-in .sing-cont h2:first-child,
.single-in .sing-cont h3:first-child {
  margin-top: 0;
}

.single-in .sing-cont h2 { font-size: 26px; }
.single-in .sing-cont h3 { font-size: 22px; }
.single-in .sing-cont h4 { font-size: 19px; }

/* Liens dans le contenu */
.single-in .sing-cont a {
  color: var(--br-blue);
  font-weight: var(--fw-semibold);
  text-decoration: underline;
  text-decoration-color: rgba(37, 99, 235, 0.3);
  text-underline-offset: 3px;
  transition: var(--br-transition);
}

.single-in .sing-cont a:hover {
  color: var(--br-blue-dark);
  text-decoration-color: var(--br-blue-dark);
}

/* Listes */
.single-in .sing-cont ul,
.single-in .sing-cont ol {
  margin: 0 0 24px 0;
  padding-left: 24px;
  font-size: 17px;
  line-height: 1.8;
  color: var(--br-gray-700);
}

.single-in .sing-cont li {
  margin-bottom: 10px;
}

.single-in .sing-cont li:last-child {
  margin-bottom: 0;
}

/* Blockquote */
.single-in .sing-cont blockquote {
  margin: 24px 0;
  padding: 20px 24px;
  background: var(--br-gray-50);
  border-left: 4px solid var(--br-blue);
  border-radius: 0 var(--br-radius) var(--br-radius) 0;
  font-size: 18px;
  font-style: italic;
  color: var(--br-gray-600);
}

.single-in .sing-cont blockquote p {
  margin: 0;
}

/* Images dans le contenu */
.single-in .sing-cont img {
  max-width: 100%;
  height: auto;
  border-radius: var(--br-radius);
  margin: 16px 0;
}

/* Séparateur hr */
.single-in .sing-cont hr {
  border: none;
  height: 1px;
  background: var(--br-gray-200);
  margin: 32px 0;
}

/* ----------------------------
   BOUTON CONTACT CTA
----------------------------- */
.single-in .sing-cont .button,
.single-in .sing-cont a.button,
.single-in .sing-cont #bloc_contact_bottom {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  margin-top: 16px;
  background: linear-gradient(135deg, var(--br-blue) 0%, var(--br-blue-dark) 100%);
  color: #ffffff !important;
  font-size: 15px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.3px;
  text-decoration: none !important;
  border: none;
  border-radius: var(--br-radius-full);
  cursor: pointer;
  transition: var(--br-transition);
  box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
}

.single-in .sing-cont .button:hover,
.single-in .sing-cont a.button:hover,
.single-in .sing-cont #bloc_contact_bottom:hover {
  background: linear-gradient(135deg, var(--br-blue-dark) 0%, #1e40af 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4);
}

/* ----------------------------
   SIDEBAR INTERNE (vide généralement)
----------------------------- */
.single .col-md-3 .sec-sidebar {
  padding: 24px;
}

/* ----------------------------
   RESPONSIVE SINGLE POST
----------------------------- */
@media (max-width: 1200px) {
  .col-md-9.single {
    width: 70% !important;
    padding: 24px 32px !important;
  }
}

@media (max-width: 992px) {
  /* Layout géré par les media queries dans la section sidebar */
  
  .single-in .sing-tit-cont {
    padding: 24px 24px 20px 24px;
  }
  
  .single-in .sing-tit-cont h3.sing-tit,
  .single-in h3.sing-tit {
    font-size: 26px;
  }
  
  .single-in .sing-cont .sing-spacer {
    padding: 24px;
  }
  
  .single-in .sing-cont p {
    font-size: 16px;
  }
}

@media (max-width: 600px) {
  body.single-post .col-md-9.single {
    padding: 12px !important;
  }
  
  .single-in .sing-cop,
  .single-in .wp-post-image {
    min-height: 200px;
    max-height: 300px;
  }
  
  .single-in .sing-tit-cont {
    padding: 20px 20px 16px 20px;
  }
  
  .single-in .sing-tit-cont h3.sing-tit,
  .single-in h3.sing-tit {
    font-size: 22px;
  }
  
  .single-in .sing-tit-cont .cat a {
    padding: 6px 14px;
    font-size: 10px;
  }
  
  .single-in .sing-cont .sing-spacer {
    padding: 20px;
  }
  
  .single-in .sing-cont p {
    font-size: 15px;
  }
  
  .single-in .sing-cont .button,
  .single-in .sing-cont #bloc_contact_bottom {
    width: 100%;
    text-align: center;
  }
}

/* ----------------------------
   SIDEBAR PAGE SINGLE - Style moderne
----------------------------- */
.single ~ .col-md-3.sidebar,
body.single-post .col-md-3.sidebar {
  /* Layout géré par flex sur body.single-post */
  padding: 32px 24px 32px 24px !important;
  background: var(--br-gray-50);
  border-left: 1px solid var(--br-gray-200);
  min-height: 100vh;
  box-sizing: border-box;
}

body.single-post .col-md-3.sidebar #bloc_actu_left,
body.single-post .col-md-3.sidebar #bloc_contact_left {
  background: var(--br-white);
  border-radius: var(--br-radius-lg);
  padding: 24px;
  margin-bottom: 20px;
  border: 1px solid var(--br-gray-200);
  box-shadow: var(--br-shadow-sm);
}

body.single-post .col-md-3.sidebar #bloc_actu_left h3,
body.single-post .col-md-3.sidebar #bloc_contact_left h3 {
  font-size: 14px;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  color: var(--br-gray-900);
  margin: 0 0 16px 0;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--br-blue);
  letter-spacing: 0.5px;
}

body.single-post .col-md-3.sidebar #bloc_actu_left p,
body.single-post .col-md-3.sidebar #bloc_contact_left p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--br-gray-600);
  margin: 0 0 12px 0;
}

body.single-post .col-md-3.sidebar #bloc_actu_left img,
body.single-post .col-md-3.sidebar #bloc_contact_left img {
  width: 100%;
  height: auto;
  border-radius: var(--br-radius);
  margin-bottom: 16px;
}

body.single-post .col-md-3.sidebar #bloc_contact_left iframe {
  border-radius: var(--br-radius);
  margin-top: 12px;
}

body.single-post .col-md-3.sidebar .social {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 20px 0 0 0;
  margin-top: 20px;
  border-top: 1px solid var(--br-gray-200);
  background: transparent;
}

body.single-post .col-md-3.sidebar .social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--br-white);
  color: var(--br-gray-500);
  border: 1px solid var(--br-gray-200);
  border-radius: var(--br-radius);
  font-size: 18px;
  transition: var(--br-transition);
}

body.single-post .col-md-3.sidebar .social a:hover {
  background: var(--br-blue);
  border-color: var(--br-blue);
  color: var(--br-white);
  transform: translateY(-2px);
  box-shadow: var(--br-shadow-md);
}

@media (max-width: 1200px) {
  body.single-post .col-md-9.single {
    flex: 0 0 70% !important;
    width: 70% !important;
    max-width: 70% !important;
    padding: 24px 32px 24px 20px !important;
  }
  
  .single ~ .col-md-3.sidebar,
  body.single-post .col-md-3.sidebar {
    flex: 0 0 30% !important;
    width: 30% !important;
    max-width: 30% !important;
    padding: 24px 20px !important;
  }
}

@media (max-width: 992px) {
  body.single-post .col-md-9.single {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 20px !important;
    min-height: auto !important;
  }
  
  .single ~ .col-md-3.sidebar,
  body.single-post .col-md-3.sidebar {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto;
    border-left: none;
    border-top: 1px solid var(--br-gray-200);
    padding: 24px 20px !important;
  }
  
  body.single-post .col-md-3.sidebar #bloc_actu_left,
  body.single-post .col-md-3.sidebar #bloc_contact_left {
    margin-bottom: 16px;
  }
}

/* ----------------------------
   UTILITAIRES
----------------------------- */
.wp-caption {
  max-width: 100%;
  background: var(--br-gray-100);
  border-radius: var(--br-radius);
  padding: 10px;
}

.wp-caption img {
  width: 100% !important;
  height: auto;
  border-radius: var(--br-radius);
}

.alignleft {
  float: left;
  margin: 0 20px 20px 0;
}

.alignright {
  float: right;
  margin: 0 0 20px 20px;
}

.aligncenter {
  display: block;
  margin: 0 auto 20px auto;
}

/* Search results */
.result {
  background: var(--br-white);
  padding: 16px 20px;
  border-radius: var(--br-radius);
  margin-bottom: 20px;
}