/* ============================================
   1. TOPBAR + Layout divers - Mobile (< 768px)
   ============================================ */
@media (max-width: 767px) {
  .top-nav-right .slogan {
    display: none !important;
  }

  /* Espace supplémentaire entre la photo et le nom du président dans la sidebar (mobile) */
  .sidebar .profile-card h3 {
    margin-top: 6px !important;
  }

  /* Réduire l’espace entre les bannières patrimoine/newsletter et la section patrimoine (formation-section) */
  .page-wrapper .download-section,
  section.download-section {
    padding-bottom: 0px !important;
  }

  .page-wrapper .formation-section,
  section.formation-section {
    padding-top: 0px !important;
  }

  .top-nav-right .phone-img,
  .top-nav .top-nav-right .phone-img,
  .page-wrapper .top-nav .top-nav-right .phone-img,
  body .top-nav-right .phone-img,
  body .top-nav .top-nav-right .phone-img,
  body .page-wrapper .top-nav .top-nav-right .phone-img {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  .top-nav-right {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  /* Réduire les espacements */
  .top-nav {
    padding: 4px 0 !important;
    min-height: 32px !important;
    margin-bottom: 2px !important;
  }

  /* Réduire la taille de police des liens */
  .top-nav-left .nav-link {
    font-size: 11px !important;
    padding: 4px 6px !important;
  }

  /* Réduire l'espacement entre les liens */
  .top-nav-left {
    gap: 4px !important;
  }

  /* Ajuster le container */
  .top-nav .container {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* ============================================
   2. BANNER - Mobile (< 768px)
   ============================================ */
@media (max-width: 767px) {
  .header-middle {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .header-middle .banner-img,
  .header-middle .container,
  .header-middle .row,
  .header-middle .col-lg-12 {
    display: none !important;
  }
}

/* ============================================
   3. FLASHINFO - Mobile (< 768px)
   ============================================ */
@media (max-width: 767px) {
  /* Layout GRID */
  .ts-breaking-news > div {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    column-gap: 6px !important;
    row-gap: 4px !important;
    padding: 6px 15px !important;
  }

  /* Première ligne */
  .ts-breaking-news > div > div:first-child {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: center !important;
    min-height: 30px !important;
  }

  /* Flash Infos label - Garder à gauche */
  .ts-breaking-news > div > div:first-child > div:first-child {
    flex-shrink: 0 !important;
    margin-right: auto !important;
    display: flex !important;
    align-items: center !important;
  }

  .flash-infos-label {
    font-size: 12px !important;
    padding: 6px 10px !important;
    white-space: nowrap !important;
    display: flex !important;
    align-items: center !important;
    line-height: 1 !important;
    background-color: #e60000 !important; /* rouge vif */
    color: #e6e6e6 !important; /* gris clair lisible sur rouge */
    border-radius: 4px !important;
    margin-right: 8px !important;
  }

  /* Icônes sociales */
  .ts-breaking-news > div > div:last-child {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    justify-content: flex-end !important;
    position: static !important;
    margin: 0 !important;
    margin-left: 0 !important;
  }

  /* S'assurer que les icônes sont alignées avec le label*/
  .ts-breaking-news > div > div:last-child a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
  }

  .ts-breaking-news > div > div:first-child {
    align-items: center !important;
  }

  /* Deuxième ligne : Texte news (slide) */
  .ts-breaking-news > div > div:nth-child(2) {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Réduire la taille des icônes sociales */
  .ts-breaking-news a[href*="facebook"],
  .ts-breaking-news a[href*="linkedin"],
  .ts-breaking-news a[href*="instagram"],
  .ts-breaking-news a[href*="youtube"] {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    flex-shrink: 0 !important;
  }

  .ts-breaking-news a[href*="facebook"] img,
  .ts-breaking-news a[href*="linkedin"] img,
  .ts-breaking-news a[href*="instagram"] img,
  .ts-breaking-news a[href*="youtube"] img {
    width: 14px !important;
    height: 14px !important;
  }

  /* Texte news */
  .ts-breaking-news .breaking-post-content {
    padding: 0 8px !important;
    box-sizing: border-box !important;
  }

  .ts-breaking-news .breaking-post-content p {
    font-size: 11px !important;
    line-height: 1.4 !important;
    line-clamp: 2 !important;
    -webkit-line-clamp: 2 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin: 0 !important;
    color: #6b6b6b !important; /* gris lisible */
    font-weight: 500 !important;
  }

  /* S'assurer que les liens héritent bien du gris lisible */
  .ts-breaking-news .breaking-post-content p a {
    color: #6b6b6b !important;
  }
  .ts-breaking-news .breaking-post-content p a:hover,
  .ts-breaking-news .breaking-post-content p a:focus {
    color: #4f4f4f !important;
  }

  /* Carousel canvas - Ajuster la hauteur */
  .carousel-canvas {
    height: 32px !important;
    min-height: 32px !important;
  }

  .ts-breaking-news {
    padding: 4px 0 !important;
    min-height: auto !important;
    margin-top: 0 !important;
  }
}

/* ============================================
   4. NAVIGATION - Mobile (< 768px)
   ============================================ */
@media (max-width: 767px) {
  .header-default
    .navigation.ts-main-menu
    .nav-menus-wrapper:not(.nav-menus-wrapper-open),
  .header-default .ts-main-menu .nav-menus-wrapper:not(.nav-menus-wrapper-open),
  .header-default
    .navigation-landscape
    .nav-menus-wrapper:not(.nav-menus-wrapper-open) {
    display: none !important;
    visibility: hidden !important;
  }

  /* Masquer le contenu du menu */
  .header-default .navigation .nav-menu,
  .header-default .navigation .right-menu {
    display: none !important;
  }

  /* AFFICHER le menu hamburger */
  .header-default .navigation {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    position: relative !important;
  }

  /* AFFICHER le nav-header avec le logo et le bouton hamburger */
  .header-default .navigation .nav-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    visibility: visible !important;
    position: relative !important;
    width: 100% !important;
    padding: 10px 15px !important;
    background-color: white !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    box-sizing: border-box !important;
    z-index: 999999 !important;
    min-height: 50px !important;
  }

  /* Menu hamburger visible */
  .header-default .navigation .nav-toggle {
    display: block !important;
    visibility: visible !important;
    cursor: pointer !important;
    opacity: 1 !important;
  }

  /* Logo mobile visible */
  .header-default .navigation .mobile-logo {
    display: block !important;
    visibility: visible !important;
    margin-left: -15px !important;
    padding-left: 0 !important;
  }

  .header-default .navigation .mobile-logo img {
    max-height: 55px !important;
    height: 55px !important;
    width: auto !important;
  }

  /* Masquer le nav-brand desktop*/
  .header-default .navigation .nav-brand:not(.mobile-logo) {
    display: none !important;
  }

  /* Forcer le menu à être vertical quand ouvert*/
  .nav-menus-wrapper-open,
  .navigation-portrait .nav-menus-wrapper-open {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    background-color: rgba(255, 255, 255, 0.98) !important;
    z-index: 999999 !important;
    overflow-y: auto !important;
    padding: 20px !important;
    box-sizing: border-box !important;
  }

  .nav-menus-wrapper-open *,
  .navigation-portrait .nav-menus-wrapper-open * {
    box-sizing: border-box !important;
  }

  /* Menu principal */
  .nav-menus-wrapper-open .nav-menu,
  .navigation-portrait .nav-menus-wrapper-open .nav-menu,
  .navigation .nav-menus-wrapper-open .nav-menu,
  body .navigation .nav-menus-wrapper-open .nav-menu {
    display: block !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    flex-wrap: nowrap !important;
  }

  /* Items du menu */
  .nav-menus-wrapper-open .nav-menu > li,
  .navigation-portrait .nav-menus-wrapper-open .nav-menu > li,
  .navigation .nav-menus-wrapper-open .nav-menu > li,
  body .navigation .nav-menus-wrapper-open .nav-menu > li,
  .page-wrapper
    .header-default
    .navigation
    .nav-menus-wrapper-open
    .nav-menu
    > li {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid #e0e0e0 !important;
    float: none !important;
    position: relative !important;
    clear: both !important;
    text-align: left !important;
    inline-size: 100% !important;
  }

  /* Liens du menu*/
  .nav-menus-wrapper-open .nav-menu > li > a,
  .navigation-portrait .nav-menus-wrapper-open .nav-menu > li > a,
  .navigation .nav-menus-wrapper-open .nav-menu > li > a,
  body .navigation .nav-menus-wrapper-open .nav-menu > li > a,
  .page-wrapper
    .header-default
    .navigation
    .nav-menus-wrapper-open
    .nav-menu
    > li
    > a {
    display: block !important;
    width: 100% !important;
    padding: 15px 20px !important;
    font-size: 16px !important;
    color: #333 !important;
    text-decoration: none !important;
    border: none !important;
    background: transparent !important;
    text-align: left !important;
    line-height: 1.5 !important;
    height: auto !important;
    inline-size: 100% !important;
  }

  /* Dropdowns - Style accordéon vertical */
  .nav-menus-wrapper-open .nav-menu > li .nav-dropdown,
  .nav-menus-wrapper-open .nav-menu > li .nav-submenu {
    position: static !important;
    display: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    background-color: #f8f8f8 !important;
    border-radius: 0 !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    float: none !important;
    clear: both !important;
  }

  /* Afficher le dropdown quand le parent a la classe focus*/
  .nav-menus-wrapper-open .nav-menu > li.focus > .nav-dropdown,
  .nav-menus-wrapper-open .nav-menu > li.focus > .nav-submenu,
  .nav-menus-wrapper-open .nav-menu > li:hover > .nav-dropdown,
  .nav-menus-wrapper-open .nav-menu > li:hover > .nav-submenu {
    display: block !important;
  }

  /* Items des dropdowns */
  .nav-menus-wrapper-open .nav-menu > li .nav-dropdown > li,
  .nav-menus-wrapper-open .nav-menu > li .nav-submenu > li {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid #e8e8e8 !important;
    float: none !important;
    clear: both !important;
  }

  /* Liens des dropdowns */
  .nav-menus-wrapper-open .nav-menu > li .nav-dropdown > li > a,
  .nav-menus-wrapper-open .nav-menu > li .nav-submenu > li > a {
    display: block !important;
    width: 100% !important;
    padding: 12px 40px !important;
    font-size: 14px !important;
    color: #666 !important;
    text-decoration: none !important;
    line-height: 1.5 !important;
    height: auto !important;
  }

  /* Dropdowns imbriqués */
  .nav-menus-wrapper-open .nav-menu > li .nav-dropdown > li .nav-dropdown,
  .nav-menus-wrapper-open .nav-menu > li .nav-dropdown > li .nav-submenu,
  .nav-menus-wrapper-open .nav-menu > li .nav-submenu > li .nav-dropdown,
  .nav-menus-wrapper-open .nav-menu > li .nav-submenu > li .nav-submenu {
    position: static !important;
    display: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: #f0f0f0 !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    float: none !important;
    clear: both !important;
  }

  .nav-menus-wrapper-open
    .nav-menu
    > li
    .nav-dropdown
    > li.focus
    > .nav-dropdown,
  .nav-menus-wrapper-open
    .nav-menu
    > li
    .nav-dropdown
    > li.focus
    > .nav-submenu,
  .nav-menus-wrapper-open
    .nav-menu
    > li
    .nav-submenu
    > li.focus
    > .nav-dropdown,
  .nav-menus-wrapper-open
    .nav-menu
    > li
    .nav-submenu
    > li.focus
    > .nav-submenu {
    display: block !important;
  }

  /* Liens des dropdowns niveau 2 */
  .nav-menus-wrapper-open
    .nav-menu
    > li
    .nav-dropdown
    > li
    .nav-dropdown
    > li
    > a,
  .nav-menus-wrapper-open
    .nav-menu
    > li
    .nav-dropdown
    > li
    .nav-submenu
    > li
    > a,
  .nav-menus-wrapper-open
    .nav-menu
    > li
    .nav-submenu
    > li
    .nav-dropdown
    > li
    > a,
  .nav-menus-wrapper-open
    .nav-menu
    > li
    .nav-submenu
    > li
    .nav-submenu
    > li
    > a {
    padding: 10px 60px !important;
    font-size: 13px !important;
  }

  /* Barre de recherche - Style mobile */
  .nav-menus-wrapper-open .right-menu {
    display: block !important;
    width: 100% !important;
    margin: 20px 0 !important;
    padding: 0 !important;
    float: none !important;
  }

  .nav-menus-wrapper-open .search-section {
    display: flex !important;
    width: 100% !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    overflow: hidden !important;
  }

  .nav-menus-wrapper-open .search-input {
    flex: 1 !important;
    padding: 12px 15px !important;
    border: none !important;
    font-size: 14px !important;
  }

  .nav-menus-wrapper-open .search-btn {
    padding: 12px 20px !important;
    background-color: #00944f !important;
    color: white !important;
    border: none !important;
    cursor: pointer !important;
  }
}

/* ============================================
   SLIDER - Réduction hauteur et icônes
   ============================================ */
@media (max-width: 991px) {
  .formation-card,
  .formation-section .formation-card {
    height: auto !important;
    max-height: 350px !important;
  }

  .formation-card .slider-container,
  .formation-section .slider-container {
    max-height: 350px !important;
    height: 350px !important;
    min-height: 350px !important;
  }

  .formation-card .slider-container .slides,
  .formation-section .slider-container .slides {
    max-height: 350px !important;
    height: 350px !important;
  }

  .formation-card .slider-container .slide,
  .formation-section .slider-container .slide {
    max-height: 350px !important;
    height: 350px !important;
  }

  .formation-card .slider-container .slide img,
  .formation-section .slider-container .slide img {
    max-height: 350px !important;
    height: 350px !important;
    object-fit: cover !important;
  }

  /* Masquer les boutons de navigation sur mobile - Spécificité maximale */
  .formation-card .slider-container .nav-btn,
  .formation-card .slider-container .nav-btn.prev,
  .formation-card .slider-container .nav-btn.next,
  .slider-container .nav-btn,
  .slider-container .nav-btn.prev,
  .slider-container .nav-btn.next,
  .formation-section .slider-container .nav-btn,
  .formation-section .slider-container .nav-btn.prev,
  .formation-section .slider-container .nav-btn.next,
  .page-wrapper .formation-section .slider-container .nav-btn,
  .page-wrapper .formation-section .slider-container .nav-btn.prev,
  .page-wrapper .formation-section .slider-container .nav-btn.next,
  /* Masquer même quand les slides sont checked */
  .formation-card #slide1:checked ~ .slider-container .nav-btn,
  .formation-card #slide1:checked ~ .slider-container .nav-btn.prev,
  .formation-card #slide1:checked ~ .slider-container .nav-btn.next,
  .formation-card #slide2:checked ~ .slider-container .nav-btn,
  .formation-card #slide2:checked ~ .slider-container .nav-btn.prev,
  .formation-card #slide2:checked ~ .slider-container .nav-btn.next,
  .formation-card #slide3:checked ~ .slider-container .nav-btn,
  .formation-card #slide3:checked ~ .slider-container .nav-btn.prev,
  .formation-card #slide3:checked ~ .slider-container .nav-btn.next,
  #slide1:checked ~ .slider-container .nav-btn,
  #slide1:checked ~ .slider-container .nav-btn.prev,
  #slide1:checked ~ .slider-container .nav-btn.next,
  #slide2:checked ~ .slider-container .nav-btn,
  #slide2:checked ~ .slider-container .nav-btn.prev,
  #slide2:checked ~ .slider-container .nav-btn.next,
  #slide3:checked ~ .slider-container .nav-btn,
  #slide3:checked ~ .slider-container .nav-btn.prev,
  #slide3:checked ~ .slider-container .nav-btn.next,
  .formation-section #slide1:checked ~ .slider-container .nav-btn,
  .formation-section #slide1:checked ~ .slider-container .nav-btn.prev,
  .formation-section #slide1:checked ~ .slider-container .nav-btn.next,
  .formation-section #slide2:checked ~ .slider-container .nav-btn,
  .formation-section #slide2:checked ~ .slider-container .nav-btn.prev,
  .formation-section #slide2:checked ~ .slider-container .nav-btn.next,
  .formation-section #slide3:checked ~ .slider-container .nav-btn,
  .formation-section #slide3:checked ~ .slider-container .nav-btn.prev,
  .formation-section #slide3:checked ~ .slider-container .nav-btn.next {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -9999px !important;
    right: auto !important;
  }

  /* Afficher et styliser les dots (indicateurs de pagination) sur mobile */
  .formation-card .slider-container .dots,
  .slider-container .dots,
  .formation-section .slider-container .dots {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    position: absolute !important;
    bottom: 15px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 1000 !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    width: auto !important;
    padding: 8px 12px !important;
    background: rgba(0, 0, 0, 0.3) !important;
    border-radius: 20px !important;
  }

  /* Style des dots inactifs (cercles gris) */
  .formation-card .slider-container .dots .dot,
  .slider-container .dots .dot,
  .formation-section .slider-container .dots .dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: rgba(
      128,
      128,
      128,
      0.6
    ) !important; /* Gris moyen pour inactif */
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Style du dot actif (rectangle blanc allongé) */
  .formation-card #slide1:checked ~ .slider-container .dots .dot:nth-child(1),
  .formation-card #slide2:checked ~ .slider-container .dots .dot:nth-child(2),
  .formation-card #slide3:checked ~ .slider-container .dots .dot:nth-child(3),
  #slide1:checked ~ .slider-container .dots .dot:nth-child(1),
  #slide2:checked ~ .slider-container .dots .dot:nth-child(2),
  #slide3:checked ~ .slider-container .dots .dot:nth-child(3),
  .formation-section
    #slide1:checked
    ~ .slider-container
    .dots
    .dot:nth-child(1),
  .formation-section
    #slide2:checked
    ~ .slider-container
    .dots
    .dot:nth-child(2),
  .formation-section
    #slide3:checked
    ~ .slider-container
    .dots
    .dot:nth-child(3) {
    background: rgba(255, 255, 255, 1) !important; /* Blanc pour actif */
    width: 28px !important; /* Rectangle allongé */
    height: 8px !important;
    border-radius: 4px !important; /* Coins arrondis */
  }

  /* Réduire aussi la hauteur du featured-slider principal */
  .ts-overlay-style.ts-featured .item,
  #featured-slider .item {
    min-height: 350px !important;
    max-height: 350px !important;
    height: 350px !important;
  }

  #featured-slider {
    max-height: 350px !important;
  }

  /* Masquer les boutons de navigation du featured-slider (premier carousel) sur mobile */
  #featured-slider .owl-nav,
  .featured-slider .owl-nav,
  .block-wrapper #featured-slider .owl-nav,
  .page-wrapper #featured-slider .owl-nav,
  body .page-wrapper #featured-slider .owl-nav,
  #featured-slider .owl-nav .owl-prev,
  #featured-slider .owl-nav .owl-next,
  .featured-slider .owl-nav .owl-prev,
  .featured-slider .owl-nav .owl-next,
  .block-wrapper #featured-slider .owl-nav .owl-prev,
  .block-wrapper #featured-slider .owl-nav .owl-next,
  .page-wrapper #featured-slider .owl-nav .owl-prev,
  .page-wrapper #featured-slider .owl-nav .owl-next,
  body .page-wrapper #featured-slider .owl-nav .owl-prev,
  body .page-wrapper #featured-slider .owl-nav .owl-next {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -9999px !important;
    right: auto !important;
  }

  /* Masquer les boutons de navigation "Nos partenaires" sur mobile */
  #partenaires-section .slider-btn,
  #partenaires-section .slider-btn.prev,
  #partenaires-section .slider-btn.next,
  .page-wrapper #partenaires-section .slider-btn,
  .page-wrapper #partenaires-section .slider-btn.prev,
  .page-wrapper #partenaires-section .slider-btn.next,
  .block-wrapper#partenaires-section .slider-btn,
  .block-wrapper#partenaires-section .slider-btn.prev,
  .block-wrapper#partenaires-section .slider-btn.next,
  body .page-wrapper #partenaires-section .slider-btn,
  body .page-wrapper #partenaires-section .slider-btn.prev,
  body .page-wrapper #partenaires-section .slider-btn.next,
  #partenaires-section .partenaire .slider-btn,
  #partenaires-section .partenaire .slider-btn.prev,
  #partenaires-section .partenaire .slider-btn.next {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -9999px !important;
    right: auto !important;
  }

  /* Masquer les boutons de navigation "Médiathèque images" (more-news-slider) sur mobile */
  #more-news-section .more-news-nav-btn,
  #more-news-section .more-news-nav-btn.prev,
  #more-news-section .more-news-nav-btn.next,
  .page-wrapper #more-news-section .more-news-nav-btn,
  .page-wrapper #more-news-section .more-news-nav-btn.prev,
  .page-wrapper #more-news-section .more-news-nav-btn.next,
  #more-news-section .container-fluid .more-news-nav-btn,
  #more-news-section .container-fluid .more-news-nav-btn.prev,
  #more-news-section .container-fluid .more-news-nav-btn.next {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -9999px !important;
    right: auto !important;
  }

  /* Masquer les boutons de navigation médiathèque (mediatheque-nav-btn) sur mobile */
  .mediatheque-nav-btn,
  .mediatheque-nav-btn.prev,
  .mediatheque-nav-btn.next,
  .page-wrapper .mediatheque-nav-btn,
  .page-wrapper .mediatheque-nav-btn.prev,
  .page-wrapper .mediatheque-nav-btn.next {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -9999px !important;
    right: auto !important;
  }

  /* Masquer complètement les dots Owl Carousel pour more-news-slider sur mobile */
  #more-news-slider .owl-dots,
  #more-news-section .owl-dots,
  #more-news-section .owl-carousel .owl-dots,
  #more-news-section #more-news-slider .owl-dots,
  .page-wrapper #more-news-section .owl-dots,
  .page-wrapper #more-news-slider .owl-dots,
  .page-wrapper #more-news-section .owl-carousel .owl-dots,
  .page-wrapper #more-news-section #more-news-slider .owl-dots,
  .ts-grid-box .owl-dots,
  #more-news-section .ts-grid-box .owl-dots,
  #more-news-section .ts-grid-box-highlight .owl-dots {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
  }

  /* Masquer aussi les dots individuels */
  #more-news-slider .owl-dots .owl-dot,
  #more-news-section .owl-dots .owl-dot,
  #more-news-section .owl-carousel .owl-dots .owl-dot,
  .page-wrapper #more-news-section .owl-dots .owl-dot,
  .page-wrapper #more-news-slider .owl-dots .owl-dot {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
  }

  /* S'assurer que le conteneur du slider a position relative pour les dots */
  #more-news-slider,
  #more-news-section .owl-carousel,
  #more-news-section .ts-grid-box,
  #more-news-section .ts-grid-box-highlight {
    position: relative !important;
  }

  /* S'assurer que chaque item a position relative pour que les dots soient positionnés par rapport à la carte */
  #more-news-slider .item,
  #more-news-section #more-news-slider .item {
    position: relative !important;
  }

  /* Sur mobile, s'assurer que la section orange est alignée verticalement avec le reste de la page */
  #more-news-section,
  .page-wrapper #more-news-section,
  .block-wrapper#more-news-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Sur mobile, le container-fluid doit avoir les mêmes marges que les autres containers */
  #more-news-section .container-fluid,
  .page-wrapper #more-news-section .container-fluid {
    padding-left: 15px !important;
    padding-right: 15px !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  /* Sur mobile, la section orange doit être alignée avec le container-fluid */
  #more-news-section .ts-grid-box-highlight,
  .page-wrapper #more-news-section .ts-grid-box-highlight {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    transform: none !important;
    padding: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    position: relative !important;
  }

  /* Sur mobile, le banner "Médiathèque image" doit occuper toute la largeur de la section orange et être aligné verticalement */
  #more-news-section .ts-title-wrapper,
  .page-wrapper #more-news-section .ts-title-wrapper,
  body #more-news-section .ts-title-wrapper,
  body .page-wrapper #more-news-section .ts-title-wrapper {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    z-index: 20 !important;
    height: auto !important;
    overflow: visible !important;
  }

  #more-news-section .mediatheque-banner,
  .page-wrapper #more-news-section .mediatheque-banner,
  body #more-news-section .mediatheque-banner,
  body .page-wrapper #more-news-section .mediatheque-banner,
  #more-news-section .ts-title-wrapper .mediatheque-banner,
  #more-news-section .ts-title-wrapper img.mediatheque-banner,
  #more-news-section .ts-title-wrapper img.title-image,
  #more-news-section img.mediatheque-banner,
  #more-news-section img.title-image.mediatheque-banner {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    height: auto !important;
    max-height: 60px !important;
    transform: none !important;
    z-index: 20 !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25) !important;
    margin: 0 !important;
    margin-top: 0 !important;
    padding: 0 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    object-fit: cover !important;
    overflow: visible !important;
    content: "" !important;
  }

  /* Sur mobile, le conteneur du slider doit permettre aux items de sortir */
  #more-news-section .ts-grid-box,
  .page-wrapper #more-news-section .ts-grid-box {
    padding: 0 !important;
    margin: 0 !important;
    margin-top: 8px !important;
    margin-bottom: 0 !important;
    overflow: visible !important;
    height: auto !important;
    min-height: 280px !important;
  }

  /* Sur mobile, le slider lui-même doit permettre aux items de sortir */
  #more-news-slider,
  #more-news-section #more-news-slider,
  .page-wrapper #more-news-section #more-news-slider {
    padding: 0 !important;
    margin: 0 !important;
    margin-bottom: 0 !important;
    overflow: visible !important;
    height: 100% !important;
    min-height: 280px !important;
  }

  /* Sur mobile, les items doivent occuper toute la largeur et hauteur de la section orange (comme le banner) */
  #more-news-slider .item,
  #more-news-section #more-news-slider .item,
  .page-wrapper #more-news-section #more-news-slider .item {
    position: relative !important;
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    height: 280px !important;
    min-height: 280px !important;
    max-height: 280px !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    overflow: hidden !important;
  }

  /* Sur mobile, s'assurer que l'image occupe toute la carte - Surcharger toutes les règles */
  #more-news-slider .item .ts-post-thumb,
  #more-news-section #more-news-slider .item .ts-post-thumb,
  .page-wrapper #more-news-section #more-news-slider .item .ts-post-thumb {
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    overflow: hidden !important;
    z-index: 1 !important;
  }

  #more-news-slider .item .ts-post-thumb img,
  #more-news-section #more-news-slider .item .ts-post-thumb img,
  .page-wrapper #more-news-section #more-news-slider .item .ts-post-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    image-rendering: -webkit-optimize-contrast !important;
    image-rendering: crisp-edges !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    transform: translateZ(0) !important;
  }

  /* S'assurer que le lien autour de l'image occupe toute la carte */
  #more-news-slider .item .ts-post-thumb a,
  #more-news-section #more-news-slider .item .ts-post-thumb a,
  .page-wrapper #more-news-section #more-news-slider .item .ts-post-thumb a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    z-index: 2 !important;
  }

  /* Supprimer les effets hover sur mobile */
  #more-news-slider .item:hover,
  #more-news-section #more-news-slider .item:hover,
  .page-wrapper #more-news-section #more-news-slider .item:hover {
    transform: none !important;
    box-shadow: none !important;
  }

  #more-news-slider .item:hover .ts-post-thumb img,
  #more-news-section #more-news-slider .item:hover .ts-post-thumb img,
  .page-wrapper
    #more-news-section
    #more-news-slider
    .item:hover
    .ts-post-thumb
    img {
    transform: none !important;
  }

  /* S'assurer que l'overlay couvre aussi toute la carte et que les textes sont visibles et alignés */
  #more-news-slider .item .overlay-post-content,
  #more-news-section #more-news-slider .item .overlay-post-content,
  .page-wrapper
    #more-news-section
    #more-news-slider
    .item
    .overlay-post-content {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 10 !important;
    margin: 0 !important;
    padding: 15px !important;
    padding-bottom: 12px !important;
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.85) 0%,
      rgba(0, 0, 0, 0.6) 50%,
      rgba(0, 0, 0, 0.3) 80%,
      transparent 100%
    ) !important;
    box-sizing: border-box !important;
  }

  /* Styles pour le titre dans l'overlay - Assurer la visibilité */
  #more-news-slider .item .overlay-post-content .post-title,
  #more-news-section #more-news-slider .item .overlay-post-content .post-title,
  .page-wrapper
    #more-news-section
    #more-news-slider
    .item
    .overlay-post-content
    .post-title {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    margin: 0 0 6px 0 !important;
    line-height: 1.4 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
  }

  #more-news-slider .item .overlay-post-content .post-title a,
  #more-news-section
    #more-news-slider
    .item
    .overlay-post-content
    .post-title
    a,
  .page-wrapper
    #more-news-section
    #more-news-slider
    .item
    .overlay-post-content
    .post-title
    a {
    color: #ffffff !important;
    text-decoration: none !important;
    display: block !important;
  }

  /* Styles pour la date dans l'overlay - Assurer la visibilité */
  #more-news-slider .item .overlay-post-content .post-date-info,
  #more-news-section
    #more-news-slider
    .item
    .overlay-post-content
    .post-date-info,
  .page-wrapper
    #more-news-section
    #more-news-slider
    .item
    .overlay-post-content
    .post-date-info {
    font-size: 11px !important;
    font-weight: 400 !important;
    color: #ffffff !important;
    opacity: 0.95 !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    margin: 0 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
  }

  #more-news-slider .item .overlay-post-content .post-date-info i,
  #more-news-section
    #more-news-slider
    .item
    .overlay-post-content
    .post-date-info
    i,
  .page-wrapper
    #more-news-section
    #more-news-slider
    .item
    .overlay-post-content
    .post-date-info
    i {
    color: #ffffff !important;
    font-size: 11px !important;
    opacity: 0.95 !important;
  }

  /* Supprimer le ::before overlay qui pourrait réduire la taille */
  #more-news-slider .item .ts-post-thumb::before,
  #more-news-section #more-news-slider .item .ts-post-thumb::before,
  .page-wrapper
    #more-news-section
    #more-news-slider
    .item
    .ts-post-thumb::before {
    display: none !important;
  }

  /* Dots pour le slider Partenaires sur mobile */
  #partenaires-section .partenaires-dots {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 15px !important;
    padding: 8px 12px !important;
    background: rgba(0, 0, 0, 0.1) !important;
    border-radius: 20px !important;
  }

  #partenaires-section .partenaires-dots .dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: rgba(128, 128, 128, 0.6) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #partenaires-section .partenaires-dots .dot.active {
    background: rgba(255, 255, 255, 1) !important;
    width: 24px !important;
    height: 8px !important;
    border-radius: 4px !important;
  }
}

/* ============================================
   MÉDIATHÈQUE - Mobile (< 768px)
   ============================================ */
@media (max-width: 767px) {
  /* Réduire l'espace sous les block-wrapper génériques */
  section.block-wrapper {
    margin-bottom: 0 !important;
  }

  /* Surcharger le margin-bottom global des images dans les .block-wrapper pour mobile */
  .page-wrapper > .block-wrapper img,
  .page-wrapper > .block-wrapper .banner-img,
  .page-wrapper > .block-wrapper .item {
    margin-bottom: 0 !important;
  }

  /* Réduire l'espace AU-DESSUS des block-wrapper (dont la bannière Signalis) sur mobile */
  .page-wrapper > .block-wrapper {
    padding-top: 20px !important;
    padding-bottom: 10px !important;
  }

  /* ----------------------------------------
     Espacement entre bannière Signalis et Médiathèque
     ---------------------------------------- */
  .page-wrapper .main-content-section,
  body .main-content-section,
  .main-content-section,
  .main-content-section[style*="padding"],
  section.main-content-section,
  section.main-content-section[style*="padding"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 25px !important;
    padding-bottom: 10px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
  }

  .main-content-section .container {
    padding-left: 15px !important;
    padding-right: 15px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
  }

  .main-content-section .container > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Colonne Bootstrap */
  .main-content-section .col-lg-9 {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    flex: none !important;
    margin-bottom: 0 !important;
  }

  .main-content-section .col-lg-3 {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    flex: none !important;
    margin-top: 15px !important;
  }

  /* Section Médiathèque */
  .mediatheque-section,
  .main-content-section .mediatheque-section,
  .mediatheque-section[style*="background"],
  .mediatheque-section[style*="border-radius"],
  .mediatheque-section[style*="box-shadow"],
  .mediatheque-section[style*="overflow"],
  .mediatheque-section[style*="position"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background: white !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    position: relative !important;
  }

  .main-content-section .container,
  .main-content-section,
  body .main-content-section {
    overflow-x: visible !important;
  }

  /* Header Médiathèque */
  .mediatheque-section .section-header,
  .mediatheque-section .section-header[style*="padding"],
  .mediatheque-section .section-header[style*="margin"],
  .mediatheque-section .section-header[style*="background"],
  .mediatheque-section .section-header[style*="position"] {
    display: block !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    padding: 0 15px 0 15px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    background-color: transparent !important;
    box-sizing: border-box !important;
    position: relative !important;
    left: calc(50% - 50vw) !important;
    right: auto !important;
    top: 0 !important;
  }

  /* Créer un pseudo-élément pour le background gris aligné avec le reste de la page */
  .mediatheque-section .section-header::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 15px !important;
    right: 15px !important;
    bottom: 0 !important;
    background-color: #e5e7e6 !important;
    z-index: -1 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* S'assurer que l'image occupe toute la largeur disponible dans le header */
  .mediatheque-section .section-header img {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    height: 55px !important;
    max-height: 55px !important;
    display: block !important;
    margin: 0 !important;
    margin-top: 0 !important;
    padding: 0 !important;
    padding-top: 0 !important;
  }

  /* Conteneur vidéo principal*/
  .mediatheque-section .main-video-container,
  .mediatheque-section .main-video-container[style*="padding"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 10px !important;
    margin-bottom: 0 !important;
    background-color: #e5e7e6 !important;
    box-sizing: border-box !important;
    position: relative !important;
  }

  .mediatheque-section .main-video-container > .row {
    display: flex !important;
    flex-direction: column !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Colonne vidéo principale */
  .mediatheque-section .main-video-container .col-lg-7,
  .mediatheque-section .main-video-container .col-lg-8,
  .mediatheque-section .main-video-container .col-lg-7[style*="padding"],
  .mediatheque-section .main-video-container .col-lg-8[style*="padding"],
  .main-content-section .mediatheque-section .main-video-container .col-lg-7,
  .main-content-section .mediatheque-section .main-video-container .col-lg-8,
  body .mediatheque-section .main-video-container .col-lg-7,
  body .mediatheque-section .main-video-container .col-lg-8 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    flex: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: block !important;
    box-sizing: border-box !important;
    position: relative !important;
  }

  .mediatheque-section .main-video-container .col-lg-7[style],
  .mediatheque-section .main-video-container .col-lg-8[style] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Vidéo principale */
  .mediatheque-section .main-video-container .main-video-player,
  .mediatheque-section
    .main-video-container
    .main-video-player[style*="border-radius"],
  .mediatheque-section
    .main-video-container
    .main-video-player[style*="box-shadow"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    height: 200px !important;
    min-height: 200px !important;
    max-height: 200px !important;
    display: block !important;
    position: relative !important;
    background: white !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    box-shadow: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    box-sizing: border-box !important;
  }

  /* Conteneur de l'image de fond de la vidéo principale */
  .mediatheque-section .main-video-container .main-video-player > div {
    width: 100% !important;
    height: 100% !important;
    min-height: 200px !important;
    max-height: 200px !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    box-sizing: border-box !important;
  }

  .mediatheque-section
    .main-video-container
    .main-video-player
    img[alt="Play"] {
    width: 60px !important;
    height: 60px !important;
    display: block !important;
    position: relative !important;
    z-index: 10 !important;
  }

  /* Colonne miniatures */
  .mediatheque-section .main-video-container .col-lg-5,
  .mediatheque-section .main-video-container .col-lg-4 {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    padding: 0 15px !important;
    margin: 0 !important;
    display: block !important;
    background-color: transparent !important;
    box-sizing: border-box !important;
  }

  /* Conteneur des miniatures */
  .mediatheque-section .main-video-container .small-videos {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    background-color: transparent !important;
    box-sizing: border-box !important;
  }

  /* Item miniature */
  .mediatheque-section .small-video-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: 100% !important;
    margin-bottom: 6px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    background-color: transparent !important;
  }

  .mediatheque-section .small-video-item:last-child {
    margin-bottom: 0 !important;
  }

  /* Miniature vidéo */
  .mediatheque-section .small-video-item > div:first-child {
    width: 120px !important;
    height: 85px !important;
    min-width: 120px !important;
    min-height: 85px !important;
    max-width: 120px !important;
    max-height: 85px !important;
    flex-shrink: 0 !important;
    border-radius: 6px !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    cursor: pointer !important;
    overflow: hidden !important;
  }

  /* Bouton play des miniatures */
  .mediatheque-section .small-video-item > div:first-child img[alt="Play"] {
    width: 25px !important;
    height: 25px !important;
    display: block !important;
    position: relative !important;
    z-index: 10 !important;
  }

  /* Conteneur texte des miniatures */
  .mediatheque-section .small-video-item > div:last-child {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-left: 8px !important;
    margin-right: 0 !important;
    padding: 4px 8px !important;
    display: block !important;
    background-color: transparent !important;
    box-sizing: border-box !important;
  }

  /* Texte catégorie */
  .mediatheque-section .small-video-item > div:last-child > div:first-child {
    font-size: 9px !important;
    letter-spacing: 0.5px !important;
    color: indigo !important;
    text-transform: uppercase !important;
    margin: 0 0 4px 0 !important;
    font-family: "Heebo", Arial, sans-serif !important;
    display: block !important;
    line-height: 1.2 !important;
  }

  /* Lien et texte titre */
  .mediatheque-section .small-video-item > div:last-child a {
    display: block !important;
    color: #0b49a5 !important;
    text-decoration: none !important;
    width: 100% !important;
  }

  .mediatheque-section .small-video-item > div:last-child a span {
    font-size: 11px !important;
    line-height: 1.3 !important;
    color: #0b49a5 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-family: "Heebo", Arial, sans-serif !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    display: block !important;
    white-space: normal !important;
  }

  /* Styliser les dots du featured-slider */
  #featured-slider .owl-dots,
  .page-wrapper #featured-slider .owl-dots {
    position: absolute !important;
    bottom: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    right: auto !important;
    top: auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    z-index: 10 !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  #featured-slider .owl-dots .owl-dot,
  .page-wrapper #featured-slider .owl-dots .owl-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.5) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
  }

  #featured-slider .owl-dots .owl-dot.active,
  .page-wrapper #featured-slider .owl-dots .owl-dot.active {
    background: rgba(255, 255, 255, 1) !important;
    width: 24px !important;
    height: 8px !important;
    border-radius: 4px !important;
  }

  #featured-slider .owl-dots .owl-dot span,
  .page-wrapper #featured-slider .owl-dots .owl-dot span {
    display: none !important;
  }
}

/* ============================================
   MENU HAMBURGER – Drawer moderne
   ============================================ */
@media (max-width: 767px) {
  .header-default .navigation.navigation-portrait .nav-menus-wrapper {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    margin-right: 0 !important;
    border-right: 0 !important;
    height: auto !important;
    max-height: 100vh !important;
    width: 78vw !important;
    max-width: 360px !important;
    background: #ffffff !important;
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.15) !important;
    transform: translateX(100%) !important;
    transition: transform 0.35s ease !important;
    will-change: transform !important;
    z-index: 1000000 !important;
    padding: 16px 16px !important;
    padding-top: 50px !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border-top-left-radius: 16px !important;
    border-bottom-left-radius: 16px !important;
  }

  /* État ouvert */
  .header-default
    .navigation.navigation-portrait
    .nav-menus-wrapper.nav-menus-wrapper-open {
    transform: translateX(0) !important;
    right: 0 !important;
  }

  /* Backdrop flou (attaché au wrapper pour compatibilité) */
  .header-default
    .navigation.navigation-portrait
    .nav-menus-wrapper.nav-menus-wrapper-open::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    right: 78vw !important;
    background: rgba(0, 0, 0, 0.45) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    backdrop-filter: blur(4px) !important;
    z-index: -1 !important;
  }

  /* Liste principale – look propre */
  .header-default
    .navigation.navigation-portrait
    .nav-menus-wrapper.nav-menus-wrapper-open
    .nav-menu {
    display: block !important;
    margin: 10px 0 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  .header-default
    .navigation.navigation-portrait
    .nav-menus-wrapper.nav-menus-wrapper-open
    .nav-menu
    > li {
    border: none !important;
    margin: 4px 0 !important;
  }

  .header-default
    .navigation.navigation-portrait
    .nav-menus-wrapper.nav-menus-wrapper-open
    .nav-menu
    > li
    > a {
    display: block !important;
    padding: 12px 12px !important;
    font-size: 17px !important;
    line-height: 1.35 !important;
    color: #1f2937 !important;
    text-decoration: none !important;
    border-radius: 10px !important;
    background: transparent !important;
    transition: background-color 0.2s ease, color 0.2s ease !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }

  .header-default
    .navigation.navigation-portrait
    .nav-menus-wrapper.nav-menus-wrapper-open
    .nav-menu
    > li
    > a:hover,
  .header-default
    .navigation.navigation-portrait
    .nav-menus-wrapper.nav-menus-wrapper-open
    .nav-menu
    > li
    > a:focus {
    background: #f3f4f6 !important;
    color: #0f172a !important;
  }

  /* Sous-menus */
  .header-default
    .navigation.navigation-portrait
    .nav-menus-wrapper.nav-menus-wrapper-open
    .nav-dropdown,
  .header-default
    .navigation.navigation-portrait
    .nav-menus-wrapper.nav-menus-wrapper-open
    .nav-submenu {
    position: static !important;
    display: none !important;
    margin: 6px 0 6px 10px !important;
    padding: 6px 8px !important;
    background: #f8fafc !important;
    border-radius: 8px !important;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.05) !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .header-default
    .navigation.navigation-portrait
    .nav-menus-wrapper.nav-menus-wrapper-open
    .nav-menu
    > li.focus
    > .nav-dropdown,
  .header-default
    .navigation.navigation-portrait
    .nav-menus-wrapper.nav-menus-wrapper-open
    .nav-menu
    > li:hover
    > .nav-dropdown {
    display: block !important;
  }

  /* OUVERTURE des sous-niveaux */
  .header-default
    .navigation.navigation-portrait
    .nav-menus-wrapper.nav-menus-wrapper-open
    .nav-dropdown
    > li.focus
    > .nav-dropdown,
  .header-default
    .navigation.navigation-portrait
    .nav-menus-wrapper.nav-menus-wrapper-open
    .nav-dropdown
    > li:hover
    > .nav-dropdown,
  .header-default
    .navigation.navigation-portrait
    .nav-menus-wrapper.nav-menus-wrapper-open
    .nav-submenu
    > li.focus
    > .nav-submenu,
  .header-default
    .navigation.navigation-portrait
    .nav-menus-wrapper.nav-menus-wrapper-open
    .nav-submenu
    > li:hover
    > .nav-submenu {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 6px !important;
    margin-left: 12px !important;
    background: #f8fafc !important;
    border-radius: 8px !important;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.05) !important;
    overflow-x: hidden !important;
  }

  .header-default
    .navigation.navigation-portrait
    .nav-menus-wrapper.nav-menus-wrapper-open
    .nav-dropdown
    > li
    > a {
    padding: 10px 10px !important;
    font-size: 15px !important;
    color: #334155 !important;
    border-radius: 6px !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    line-height: 1.4 !important;
  }

  .header-default
    .navigation.navigation-portrait
    .nav-menus-wrapper.nav-menus-wrapper-open
    .nav-dropdown
    > li
    > a:hover {
    background: #eef2f7 !important;
    color: #0f172a !important;
  }

  /* En-tête du panneau: espace haut pour le bouton */
  .header-default .navigation.navigation-portrait .nav-header {
    padding: 8px 14px !important;
  }

  /* Bouton de fermeture (X) en haut à droite */
  .header-default
    .navigation.navigation-portrait
    .nav-menus-wrapper
    .nav-menus-wrapper-close-button {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    float: none !important;
    color: #1f2937 !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    background: transparent !important;
    border: none !important;
    border-radius: 8px !important;
    transition: background-color 0.2s ease, color 0.2s ease !important;
    z-index: 10 !important;
    line-height: 1 !important;
  }

  .header-default
    .navigation.navigation-portrait
    .nav-menus-wrapper
    .nav-menus-wrapper-close-button:hover,
  .header-default
    .navigation.navigation-portrait
    .nav-menus-wrapper
    .nav-menus-wrapper-close-button:focus {
    background-color: #f3f4f6 !important;
    color: #0f172a !important;
  }
}

/* ============================================
   TABLETTE (768px - 991px) - Ajustements
   ============================================ */
@media (min-width: 768px) and (max-width: 991px) {
  .top-nav-right .slogan {
    font-size: 11px !important;
    white-space: normal !important;
    line-height: 1.3 !important;
  }

  .top-nav-right .phone-img {
    max-width: 140px !important;
  }

  /* FlashInfo */
  .ts-breaking-news > div {
    padding: 12px 15px !important;
  }

  .flash-infos-label {
    font-size: 11px !important;
    padding: 5px 7px !important;
  }

  .ts-breaking-news .breaking-post-content p {
    font-size: 12px !important;
  }

  /* Navigation - Réduire les espacements */
  .nav-menu > li > a {
    padding: 22px 12px !important;
    font-size: 13px !important;
  }
}