/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
:root {
            --primary-blue: #0C124D;
            --secondary-blue: #3409B1;
            --accent-gold: #d4af37;
            --blue-petrol: #0A4D68;
            --text-dark: #1a1a1a;
            --bg-light: #f8f9fa;
            --border-eco: #ccc;
            --primary-light: #ffffff;
            --text-primary: #0C124D;
        }

        body {
            color: var(--text-dark);
            background-color: #fff;
        }

        h1, h2, h3, h4, h5, h6{
            font-family: 'Playfair Display', serif;
            letter-spacing: normal;
        }
        p, li{
            font-family: 'Roboto', sans-serif;
            letter-spacing: normal;
        }

        .card{
            border: 0px solid transparent;
        }
        .economy-main-title a {
          color: #0C124D;
          text-decoration: none;
        }

           PREMIUM MOBILE LOADER STYLES

.mobile-loader-wrapper { display: block; }

@media (min-width: 768px) { 
  .mobile-loader-wrapper { display: none !important; } 
}

#global-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--primary-blue);
  z-index: 2147483647;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transition: opacity 0.4s ease;
  padding: 20px;
  box-sizing: border-box;
}

#global-loader.hidden {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.loader-logo {
  width: 120px;
  height: auto;
  object-fit: contain;
  margin-bottom: 20px;
  animation: pulseLogo 2s infinite ease-in-out;
}

@keyframes pulseLogo {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.9; }
  100% { transform: scale(1); opacity: 1; }
}

.loader-text {
  color: #ffffff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.85rem;
  font-weight: 300;
  text-align: center;
  line-height: 1.4;
  margin-bottom: 30px;
  max-width: 280px;
  opacity: 0.9;
}

.spinner {
  width: 35px;
  height: 35px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top: 3px solid #ffffff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin { 
  0% { transform: rotate(0deg); } 
  100% { transform: rotate(360deg); } 
}

        .header-cover{
          width: 100%;
          margin: auto;
        }
        .bg-echosdeleco{
            background: linear-gradient(45deg, var(--primary-blue), var(--secondary-blue));
            color: white;
        }
        .btn-echosdeleco{
            background-color: var(--primary-blue);
            color: white;
            border: 1px solid var(--primary-blue);
        }

/* Les « Voir tout » des méga-menus s'inversent au survol : sur un panneau
   blanc, un aplat bleu qui pâlit ne se voit pas. La bordure au bleu principal
   garde le bouton dessiné une fois le fond parti. */
.niu-mega .btn-echosdeleco:hover,
.niu-mega .btn-echosdeleco:focus-visible,
.mega-menu .btn-echosdeleco:hover,
.mega-menu .btn-echosdeleco:focus-visible {
  background-color: #fff;
  color: var(--primary-blue);
  border-color: var(--primary-blue);
  box-shadow: 0 2px 10px rgba(12, 18, 77, .18);
}
        .btn-echosdeleco-yellow {
            background-color: var(--accent-gold);
            color: var(--primary-blue);
        }
        .top-bar {
            background-color: var(--primary-blue);
            color: white;
            font-size: 0.9rem;
        }

        .le-logo {
            width: 65%;
            margin: auto;
        }
        
        .brand-sub {
            font-family: 'Inter', sans-serif;
            font-size: 0.8rem;
            color: #666;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

        .btn-subscribe {
            background-color: var(--accent-gold);
            color: var(--primary-blue);
            font-weight: normal;
            border: none;
            transition: all 0.3s ease;
            font-size: 12px;
        }

        .btn-subscribe:hover {
            background-color: #c49f2f;
            color: white;
        }

        .navbar-main .nav-link {
            color: var(--text-dark);
            font-weight: 600;
            text-transform: uppercase;
            font-size: 0.85rem;
            padding: 1rem 1.2rem;
            border-bottom: 2px solid transparent;
        }

        .navbar-main .nav-link:hover, .navbar-main .nav-link.active {
            color: var(--primary-blue);
            border-bottom: 2px solid var(--blue-petrol);
        }

.mega-dropdown {
  position: static !important;
}

.dropdown-menu.mega-menu {
  width: 100% !important;
  left: 0 !important;
  right: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;

  background-color: white;
  color: var(--text-white);
  
  border: none;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
  
  position: absolute !important;
  top: 100%;
  margin-top: 0 !important;
  z-index: 2147483648;
  
  display: block !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow: visible !important;
  
  transition: opacity 0.15s ease, visibility 0.15s ease;
  transition-delay: 0.1s;
}

.dropdown-menu.mega-menu::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  top: -15px;
  height: 15px;
  background: transparent;
  z-index: 10;
}

.dropdown-menu.mega-menu .card {
  background-color: transparent;
  border: none;
}

@media all and (min-width: 992px) {
  .hover-dropdown:hover > .dropdown-menu.mega-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }
  
  .hover-dropdown:not(:hover) > .dropdown-menu.mega-menu {
    transition-delay: 0.1s;
  }
}

.mega-menu h6 {
  color: black;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 700;
  font-size: 0.75rem;
}

/* Les titres d'articles du méga-menu sont des titres, pas des étiquettes. La
   règle ci-dessus les attrapait — ils sont écrits en <h6> — et les criait en
   capitales espacées, quelle que soit leur casse en base. */
.mega-menu .niu-card-title {
  text-transform: none;
  letter-spacing: normal;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--primary-blue);
}

.mega-menu .border-end {
  border-color: rgba(255, 255, 255, 0.15) !important;
}

.mega-menu .subcategory-link {
  color: white;
  text-decoration: none;
  display: inline-block;
  padding: 0.25rem 0;
  transition: all 0.2s ease-in-out;
  font-size: 12px;
  text-transform: uppercase;
}

.mega-menu .subcategory-link:hover {
  color: var(--accent-yellow);
  padding-left: 8px;
  transform: translateX(5px);
}

.mega-menu .btn-view-all {
  background-color: transparent;
  border: 2px solid #ffffff;
  color: #ffffff;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 1px;
  padding: 0.5rem 1rem;
  transition: all 0.3s ease;
}

.mega-menu .btn-view-all:hover {
  background-color: var(--bg-yellow);
  border-color: var(--bg-yellow);
  color: var(--text-black);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(255, 69, 0, 0.3);
}

.mega-menu .article-card {
  transition: transform 0.3s ease;
  background: transparent;
}

.mega-menu .article-card:hover {
  transform: translateY(-5px);
}

.mega-menu .article-title {
  color: var(--text-white);
  text-decoration: none;
  font-family: 'Playfair Display', serif;
  letter-spacing: normal;
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.2;
  transition: color 0.2s ease;
  text-transform: lowercase !important;
}

.mega-menu .article-title::first-letter{
  text-transform: uppercase;
}

.mega-menu .article-title:hover {
  color: var(--bg-yellow);
}

.mega-menu .article-date {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.75rem;
}

.mega-menu .image-placeholder {
  background-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.4);
}

.hover-zoom {
  transition: transform 0.3s ease;
}

.article-card:hover .hover-zoom {
  transform: scale(1.05);
}

.mega-menu .no-content-message {
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
}

.subcategory-dynamic-list {
  column-count: 1;
  column-gap: 20px;
}

@media (min-width: 992px) {
  .subcategory-dynamic-list {
    column-count: 2;
  }
}

.break-avoid {
  break-inside: avoid-column;
  page-break-inside: avoid;
}

.top-menu {
  background-color: var(--bg-terraccotta);
  padding: 0px 0;
  border-bottom: 0px solid rgba(0,0,0,0.1);
  transition: background-color 0.3s ease;
}

.theme-toggle {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 0.9rem;
  cursor: pointer;
  padding: 8px;
  transition: color 0.3s ease, transform 0.2s ease;
}

.theme-toggle:hover {
  transform: scale(1.1);
  color: var(--accent-pink);
}

[data-theme="dark"] .top-menu {
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.top-menu .le-menu{
  background-color: var(--bg-terraccotta);
  color: white;
  padding-bottom: 0.5%;
  padding-top: 0.5%;
}

.top-menu .le-menu .nav-link {
  color: var(--text-white);
  font-weight: 500;
  margin: 0 15px;
  transition: color 0.3s ease;
}

.top-menu .le-menu .nav-link:hover {
  color: var(--text-white);
}

.top-menu .le-menu .nav-link::first-letter{
  text-transform: capitalize;
}

.logo{
  font-family: 'Playfair Display', serif;
  font-size: 2.5rem;
  font-weight: bold;
  color: var(--text-primary);
  text-decoration: none;
  transition: color 0.3s ease;
}
.le-header {
  background-color: white;
  padding-bottom: 0%;
  padding-top: 1%;
  margin-top: 1.5%;
}
.le-header .top-bar {
  background-color: transparent;
  padding: 0px 0;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  transition: background-color 0.3s ease;
  color: var(--text-primary);
}

.le-header .top-bar a{
  color: var(--text-white);
  text-decoration: none;
  font-size: 14px;
}

.le-header .top-bar i{
  color: var(--text-white);
  text-decoration: none;
  font-size: 18px;
}

[data-theme="dark"] .le-header .top-bar {
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.le-header .logo{
  width: 100%;
  height: auto;
}

.le-header-link {
  color: var(--text-secondary);
  font-size: 0.9rem;
  transition: color 0.3s ease;
}

.le-header .nav {
  background-color: transparent;
  padding: 0px 0;
  transition: background-color 0.3s ease;
  margin-top: 1%;
  position: relative;
}
.le-header .nav .nav-link {
  color: var(--text-white);
  font-weight: normal;
  margin: 0 5px;
  transition: color 0.3s ease;
  text-transform: uppercase;
  font-size: 12px;
}

.le-header .nav .nav-link:hover {
  color: var(--accent-yellow);
}

.le-header .theme-toggle {
  background: none;
  border: none;
  color: var(--text-white);
  font-size: 14px;
  cursor: pointer;
  padding: 0px;
  transition: color 0.3s ease, transform 0.2s ease;
}

.le-header .theme-toggle:hover {
  transform: scale(1.1);
  color: var(--accent-yellow);
}

@media (max-width: 991px) {
  .dropdown-menu.mega-menu {
    position: relative !important;
    width: 100% !important;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    box-shadow: none;
    margin-top: 0.5rem !important;
  }

  .dropdown-menu.mega-menu::before {
    display: none;
  }

  .mega-menu .col-lg-3,
  .mega-menu .col-lg-9 {
    width: 100%;
    border: none !important;
    margin-bottom: 1.5rem;
  }

  .mega-menu .row-cols-md-3 {
    row-gap: 1rem;
  }

  .dropdown-menu.mega-menu .container-fluid {
    padding: 1rem !important;
  }
}

@media (max-width: 576px) {
  .mega-menu h6 {
    font-size: 0.7rem;
  }
  
  .mega-menu .subcategory-link {
    font-size: 0.85rem;
    text-transform: uppercase;
  }
  
  .mega-menu .article-title {
    font-size: 0.85rem;
  }
}

.mobile-offcanvas {
  background: linear-gradient(45deg, var(--primary-blue), var(--secondary-blue));
  color: white;
  border-right: 1px solid rgba(255,255,255,0.1);
}

.mobile-offcanvas .accordion-button {
  color: white;
  font-size: 0.95rem;
  letter-spacing: 1px;
}

.mobile-offcanvas .accordion-button:after {
  filter: invert(1);
  transform: scale(0.8);
}

.mobile-offcanvas .accordion-button:not(.collapsed) {
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--accent-yellow);
  box-shadow: none;
}

.bg-black-opacity {
  background-color: rgba(0, 0, 0, 0.2);
}

.mobile-article-card {
  transition: background-color 0.2s ease;
  background-color: rgba(255, 255, 255, 0.02);
}

.mobile-article-card:hover, 
.mobile-article-card:active {
  background-color: rgba(255, 255, 255, 0.1);
}

.text-truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
}

.mobile-socials i {
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.2rem;
  transition: color 0.3s ease, transform 0.2s ease;
}

.mobile-socials i:hover {
  color: var(--accent-yellow);
  transform: translateY(-3px);
}

.remove-arrow::after {
  display: none !important;
}

.sticky-top {
  z-index: 1020;
}

        .hero-section {
            background-color: transparent;
            height:450px;
        }
        .hero-carousel .carousel-item {
            height: 400px;
            position: relative;
            background-color: var(--blue-petrol);
        }

        .hero-carousel img {
            object-fit: cover;
            height: 100%;
            width: 100%;
            filter: brightness(0.9);
        }

        .hero-caption-overlay {
          position: absolute;
          bottom: 0;
          left: 0;
          max-width: 70%;
          z-index: 10;
          text-align: left;
        }

        .category-tag {
            background-color: var(--primary-blue);
            color: white;
            padding: 5px 15px;
            text-transform: uppercase;
            font-size: 0.75rem;
            font-weight: 700;
            display: inline-block;
            margin-bottom: 15px;
        }

        .hero-title {
              font-family: "Playfair Display", serif;
              font-optical-sizing: auto;
              font-weight: 900;
              font-style: normal;
              text-transform: lowercase!important;
        }

        .hero-title::first-letter{
              text-transform: uppercase!important;
        }

        .hero-title a{
              text-decoration: none;
        }

        .hero-title span {
            background-color: white;
            color: var(--primary-blue);
            padding: 8px 12px;
            font-size: 1.5rem;
            font-weight: 700;
            line-height: 1.4;
            box-decoration-break: clone;
            -webkit-box-decoration-break: clone;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }

        .indicators-container {
  max-height: 280px;
  overflow-y: auto;
  overflow-x: hidden;
}

.indicators-container::-webkit-scrollbar {
  width: 4px;
}

.indicators-container::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.indicators-container::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, var(--primary-blue), var(--secondary-blue));
  border-radius: 2px;
}

.indicator-item {
  padding: 1rem;
  border-bottom: 1px solid #e9ecef;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.indicator-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: transparent;
  transition: background 0.3s ease;
}

.indicator-item.trend-up::before {
  background: #dc3545;
}

.indicator-item.trend-down::before {
  background: #198754;
}

.indicator-item:hover {
  background: linear-gradient(to right, rgba(102, 126, 234, 0.03), transparent);
  transform: translateX(2px);
}

.indicator-item:last-child {
  border-bottom: none;
}

.indicator-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.indicator-symbol {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--secondary-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 0.875rem;
  flex-shrink: 0;
}

.indicator-info {
  flex: 1;
  min-width: 0;
}

.indicator-name {
  font-size: 0.9375rem;
  font-weight: 600;
  margin: 0;
  color: #2c3e50;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.indicator-category {
  font-size: 10px;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.indicator-value {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.price-display {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
}

.current-price {
  font-size: 1.25rem;
  font-weight: 700;
  color: #2c3e50;
}

.price-unit {
  font-size: 0.75rem;
  color: #6c757d;
  font-weight: 600;
}

.price-variation {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  font-weight: 700;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.03);
}

.variation-value {
  font-weight: 700;
}

.indicator-sparkline {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 24px;
  margin-top: 0.5rem;
}

.sparkline-bar {
  flex: 1;
  background: linear-gradient(to top, rgba(102, 126, 234, 0.6), rgba(102, 126, 234, 0.2));
  border-radius: 2px 2px 0 0;
  transition: all 0.3s ease;
}

.indicator-item:hover .sparkline-bar {
  background: linear-gradient(to top, rgba(102, 126, 234, 0.8), rgba(102, 126, 234, 0.4));
}

.indicator-item.trend-down .sparkline-bar {
  background: linear-gradient(to top, rgba(25, 135, 84, 0.6), rgba(25, 135, 84, 0.2));
}

.indicator-item.trend-down:hover .sparkline-bar {
  background: linear-gradient(to top, rgba(25, 135, 84, 0.8), rgba(25, 135, 84, 0.4));
}

.sticky-top {
  position: sticky;
}

@keyframes slideInFromRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.indicator-item {
  animation: slideInFromRight 0.4s ease forwards;
}

.indicator-item:nth-child(1) { animation-delay: 0.05s; }
.indicator-item:nth-child(2) { animation-delay: 0.1s; }
.indicator-item:nth-child(3) { animation-delay: 0.15s; }
.indicator-item:nth-child(4) { animation-delay: 0.2s; }
.indicator-item:nth-child(5) { animation-delay: 0.25s; }

@media (max-width: 991px) {
  .sticky-top {
    position: relative !important;
  }
  
  .indicators-container {
    max-height: 400px;
  }
}

@media (prefers-color-scheme: dark) {
  .indicator-item {
    border-bottom-color: #444;
  }
  
  .indicator-name {
    color: var(--primary-blue);
  }
  
  .current-price {
    color: var(--primary-blue);
  }
  
  .indicator-item:hover {
    background: linear-gradient(to right, rgba(102, 126, 234, 0.1), transparent);
  }
}
        .timeline-list {
            list-style: none;
            padding: 0;
            height: 500px;
            overflow-y: auto;
        }

        .timeline-item {
            padding: 15px 0;
            border-bottom: 1px solid #eee;
            display: flex;
            gap: 15px;
            transition: background 0.2s;
        }
        .timeline-item:hover {
            background-color: #fcfcfc;
        }

        .timeline-time {
            color: var(--primary-blue);
            font-weight: 700;
            font-size: 0.8rem;
            min-width: 45px;
        }

        .timeline-text {
            font-size: 0.85rem;
            line-height: 1.4;
            color: #333;
        }
        
        .timeline-text:hover {
            color: var(--accent-gold);
            text-decoration: none;
        }

        .section-header {
            border-bottom: 1px solid var(--primary-blue);
            margin-bottom: 1.5rem;
            padding-bottom: 0rem;
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
        }
        .section-header h3, .section-header h4, .section-header h5 {
            margin: 0;
            font-weight: 700;
            background-color: var(--primary-blue);
            color: var(--primary-light);
            padding-left: 0.5rem;
            padding-right: 0.5rem;
            padding-top: 0.3rem;
        }

        .recents-section{
            margin-bottom: 0px;
        }

        .featured-vertical-card {
            position: relative;
            height: 100%;
            min-height: 450px;
            overflow: hidden;
            color: white;
        }
        .featured-vertical-card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        .featured-vertical-card:hover img {
            transform: scale(1.05);
        }
        .featured-vertical-card h3 {
            font-size: 2rem;
            font-weight: 800;
            line-height: 1.2;
            text-transform: lowercase!important;

        }
        .featured-vertical-card h3 a{
            text-decoration: none;
            text-transform: lowercase!important;

        }
        .featured-vertical-card h3::first-letter{
            text-transform: capitalize !important;

        }
        .two-after-column  h6 {
            font-family: 'Playfair Display', serif;
            font-size: 14px;
            font-weight: 600;
            line-height: 1.2;
            text-transform: capitalize !important;

        }
        .two-after-column  h6::first-letter{
            text-transform: capitalize !important;

        }
        .two-after-column  h6  a{
            text-decoration: none;

        }
        .overlay-gradient {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 80%;
            background: linear-gradient(to top,rgb(from var(--primary-blue) r g b / 1),transparent);
            pointer-events: none;
        }
        .card-content-overlay {
            position: absolute;
            bottom: 20px;
            left: 20px;
            right: 20px;
        }

        .news-card {
            border: none;
            margin-bottom: 20px;
            transition: transform 0.3s;
        }
        .news-card:hover {
            transform: translateY(-5px);
        }
        .news-card img {
            border-radius: 0;
            height: 200px;
            object-fit: cover;
        }
        .news-card .card-body {
            padding: 15px 0;
        }
        .news-card .card-title {
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--text-dark);
        }
        .news-card .card-meta {
            font-size: 0.8rem;
            color: #666;
            margin-top: 10px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .author-avatar-sm {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            object-fit: cover;
        }
.interview-carousel {
  background-color: var(--primary-blue);
  color: white;
  min-height: 450px;
}

  .carousel-split {
    display: flex;
    height: 450px;
    align-items: stretch;
  }
  .content-box {
    flex: 0 0 50%;
    padding: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
  }
  .image-box {
    flex: 0 0 50%;
    background-size: cover;
    background-position: center;
  }

  .category-label {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 1.2rem;
    display: inline-block;
    margin-bottom: 50px;
    font-family: "Playfair Display", serif;
  }
   .interview-carousel .article-title {
    font-family: "Playfair Display", serif;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 50px;
    font-size: 2rem;
    text-transform: lowercase!important;
  }
   .interview-carousel .article-title::first-letter{
    text-transform: uppercase!important;
  }
  .read-story {
    color: white;
    text-decoration: underline;
    font-weight: 500;
  }

  .custom-controls {
    position: absolute;
    bottom: 30px;
    left: 60px;
    display: flex;
    gap: 15px;
    z-index: 10;
  }
  .btn-circle {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.1);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
    &:hover { background: white; color: black; }
  }

        .stories-section {
            background-color: #f0f2f5;
            padding: 40px 0;
            margin: 40px 0;
        }

        .story-card {
            position: relative;
            width: 100%;
            height: 380px;
            border-radius: 12px;
            overflow: hidden;
            cursor: pointer;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        }

        .story-card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.4s;
        }

        .story-card:hover img {
            transform: scale(1.1);
        }

        .story-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, transparent 40%, rgba(26, 35, 126, 0.8));
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 20px;
        }

        .story-tag {
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: var(--accent-gold);
            margin-bottom: 5px;
        }

        .story-title {
            color: white;
            font-family: 'Playfair Display', serif;
            font-size: 1.2rem;
            line-height: 1.2;
        }

        .story-ring {
            position: absolute;
            top: 15px;
            left: 15px;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: 2px solid var(--accent-gold);
            padding: 2px;
        }
        .story-ring img {
            border-radius: 50%;
            width: 100%;
            height: 100%;
        }

        .ad-space {
            background-color: #e9ecef;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #adb5bd;
            text-transform: uppercase;
            letter-spacing: 2px;
            font-size: 0.8rem;
        }
        
        .ad-banner-lg {
            width: 100%;
            height: 120px;
            margin-bottom: 2rem;
        }
        
        .ad-square {
            width: 100%;
            aspect-ratio: 1/1;
        }

        footer {
            background-color: var(--primary-blue);
            color: #ddd;
            padding: 60px 0 20px;
            margin-top: 60px;
        }
        footer h5 {
            color: white;
            margin-bottom: 20px;
        }
        footer a {
            color: #999;
            text-decoration: none;
            display: block;
            margin-bottom: 10px;
        }
        footer a:hover {
            color: var(--accent-gold);
        }

        .larticle-show-row h1{
          font-weight:800;color:var(--primary-blue); 
          font-size: 2.5rem; line-height:1.2; 
          margin-bottom:20px;margin-top:50px;
          text-transform: lowercase!important;
        }

        .larticle-show-row h1::first-letter{
          text-transform: uppercase!important;
        }

         .larticle-show-row p{ 
          font-size: 1.2rem; 
          line-height:1.2; 
          margin-bottom:20px;
          margin-top:50px;
        }

        @media (min-width: 300px) and (max-width: 450px) {

        .larticle-show-row h1{
          font-weight:800;color:var(--primary-blue); 
          font-size: 1.2rem; line-height:1.2; 
          margin-bottom:20px;margin-top:50px;
          text-transform: lowercase!important;
        }

        .larticle-show-row h1::first-letter{
          text-transform: uppercase!important;
        }

         .larticle-show-row p{ 
          font-size: 1.2rem; 
          line-height:1.2; 
          margin-bottom:20px;
          margin-top:50px;
        }

          .le-header {
  background: linear-gradient(45deg, var(--primary-blue), var(--secondary-blue));
            color: white;
  padding-bottom: 0%;
  padding-top: 1%;
}

.interview-carousel {
  background-color: var(--primary-blue);
  color: white;
  min-height: 150px;
}

.carousel-split {
  display: flex;
  flex-direction: row;
  height: auto;
  align-items: stretch;
  gap: 10px;
}

.content-box {
  flex: 0 0 50%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  font-size: 0.9rem;
}

.image-box {
  flex: 0 0 50%;
  min-height: 100px;
  background-size: cover;
  background-position: center;
}

  .category-label {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 10px;
    display: inline-block;
    margin-bottom: 20px;
    font-family: "Playfair Display", serif;
  }
   .interview-carousel .article-title {
    font-family: "Playfair Display", serif;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 50px;
    font-size: 14px;
    text-transform: lowercase!important;
  }
   .interview-carousel .article-title::first-letter{
    text-transform: uppercase!important;
  }
  .read-story {
    color: white;
    text-decoration: underline;
    font-weight: 500;
  }

  .custom-controls {
    position: absolute;
    bottom: 30px;
    left: 60px;
    display: flex;
    gap: 15px;
    z-index: 10;
  }
  .btn-circle {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.1);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
    &:hover { background: white; color: black; }
  }

        }

.le-header .nav .nav-link-soeurs {
  font-size: 0.70rem;
}

@media (min-width: 1183px) and (max-width: 1399px) {
  .le-header .nav .nav-link-soeurs {
    font-size: 0.55rem;
    padding-left: 0.3rem;
    padding-right: 0.3rem;
  }
}

@media (min-width: 1183px) {
  .le-header .nav .nav-link {
  color: var(--text-white);
  font-weight: normal;
  margin: 0 5px;
  transition: color 0.3s ease;
  text-transform: uppercase;
  font-size: 12px;
}
}

.lz-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1rem;
  background: var(--primary-blue);
  color: #fff;
  padding: .6rem 1rem;
  margin: 0 0 1.5rem;
  min-height: 46px;
}
.lz-head__title {
  margin: 0;
  padding: 0;
  background: transparent;
  color: #fff;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.2;
}
.lz-head__action {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: 'Roboto', sans-serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  line-height: 1;
  text-decoration: none;
  background: #fff;
  color: var(--primary-blue);
  border: 0;
  border-radius: 3px;
  padding: .4rem .8rem;
  transition: box-shadow .2s;
}
.lz-head__action:hover,
.lz-head__action:focus-visible {
  background: #fff;
  color: var(--primary-blue);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
}

.niu-kicker {
  font-family: 'Roboto', sans-serif;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--secondary-blue);
  display: inline-block;
  margin-bottom: .15rem;
}

.niu-img--ph {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, .55);
  font-size: 1.4rem;
}

@media (max-width: 575px) {
  .lz-head { padding: .5rem .75rem; }
  .lz-head__title { font-size: 1.02rem; }
  .lz-head__action { font-size: .66rem; }
}

/* ==========================================================================
   Barre d'onglets mobile et panneaux de colonne
   Esquisse de l'application Hotwire Native : une barre fixe en bas aux
   couleurs du menu, les rubriques de la colonne en pastilles de verre bleu,
   et leur contenu juste en dessous. L'accueil garde la mise en pages du site.
   ========================================================================== */

:root { --lz-tabbar-h: 66px; }

@media (max-width: 991.98px) {
  body {
    padding-bottom: calc(var(--lz-tabbar-h) + env(safe-area-inset-bottom, 0px));
  }

  /* Installé en raccourci, le site occupe toute la dalle : le bandeau haut
     passerait sous la barre d'état sans cette réserve. */
  .mobile-nav-bar { padding-top: calc(.5rem + env(safe-area-inset-top, 0px)) !important; }
}

.lz-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /* Sous le voile de l'offcanvas (1040) : le panneau latéral ouvert doit
     assombrir la barre comme le reste de la page. */
  z-index: 1030;
  display: flex;
  align-items: stretch;
  gap: 2px;
  /* La réserve du bas tient la barre au-dessus de la barre d'accueil du
     téléphone ; les 8 px du repli valent pour un navigateur ordinaire. */
  padding: 7px 5px calc(7px + env(safe-area-inset-bottom, 0px));
  /* Opaque et sans flou d'arrière-plan : un backdrop-filter compose dans sa
     propre couche et se glisse par-dessus le voile de chargement. */
  background: linear-gradient(45deg, #0c124d, #3409b1);
  border-top: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 -6px 22px rgba(12, 18, 77, .28);
  transition: opacity .2s ease;
}

/* Le voile plein écran doit rester seul à l'écran. */
body:has(#global-loader:not(.hidden)) .lz-tabbar {
  opacity: 0;
  pointer-events: none;
}

/* Là où le voile se tait, c'est le trait de progression de Turbo qui prend le
   relais. Il n'était jamais visible jusqu'ici, le voile le recouvrait. */
.turbo-progress-bar {
  height: 3px;
  background: linear-gradient(90deg, var(--secondary-blue), var(--accent-gold));
}

/* --- Dans l'application Android ------------------------------------------- */

/* Un pied de page de site n'a pas sa place au bas d'un écran d'application :
   il pousse la barre d'onglets loin du contenu et propose des liens que la
   navigation native couvre déjà. */
body.hotwire-native footer { display: none; }

/* Même raisonnement pour l'application installée — la TWA du Play Store comme
   le raccourci posé sur l'écran d'accueil. `display-mode: standalone` est vrai
   dès que la page tourne hors du navigateur : plus de barre d'adresse, donc
   plus de contexte « site web », et un pied de page qui renvoie vers des
   rubriques déjà servies par la barre d'onglets n'a plus de raison d'être. */
@media (display-mode: standalone), (display-mode: minimal-ui) {
  footer { display: none; }
}

/* L'application dessine ses propres marges de sécurité autour de la webview :
   la page n'a pas à les reprendre à son compte. */
body.hotwire-native .lz-tabbar { padding-bottom: 7px; }

.lz-tab {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 48px;
  padding: 4px 3px;
  border-radius: 13px;
  color: rgba(255, 255, 255, .74);
  text-decoration: none;
  transition: color .18s ease, background-color .18s ease, transform .12s ease;
  -webkit-tap-highlight-color: transparent;
}

/* L'accueil se reconnaît à sa maison : il n'a pas besoin de son nom. */
.lz-tab--accueil { flex: 0 0 44px; }

.lz-tab:hover,
.lz-tab:focus-visible { color: #fff; }
.lz-tab:active { transform: scale(.94); }

.lz-tab.is-active {
  color: #fff;
  background: rgba(255, 255, 255, .17);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24);
}

.lz-tab__icon { font-size: 1.02rem; line-height: 1; }
.lz-tab--accueil .lz-tab__icon { font-size: 1.2rem; }

/* Les intitulés du menu sont longs : ils passent à la ligne plutôt que d'être
   tronqués, et ne débordent jamais de leur colonne. */
.lz-tab__label {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  max-width: 100%;
  font-family: 'Roboto', sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .1px;
  line-height: 1.2;
  text-align: center;
  hyphens: none;
}

/* --- Panneau d'une colonne ------------------------------------------------ */

.lz-mcol { padding-bottom: 1.25rem; }

#lz-mpanneau {
  display: block;
  position: relative;
  transition: opacity .15s ease;
}

/* Turbo marque le cadre pendant qu'il charge : le lecteur voit tout de suite
   qu'il s'est passé quelque chose, sans le voile plein écran du site. */
#lz-mpanneau[aria-busy="true"] { opacity: .45; }

#lz-mpanneau[aria-busy="true"]::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  z-index: 1035;
  background: linear-gradient(90deg, transparent, var(--secondary-blue), transparent);
  animation: lz-mcharge 1.1s linear infinite;
}

@keyframes lz-mcharge {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

.lz-mcol__head { padding: 1.1rem 1rem .1rem; }

.lz-mcol__title {
  margin: 0;
  font-family: 'Playfair Display', serif;
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--primary-blue);
}

/* Les pastilles : du verre bleu posé à même la page, qui défile. */
.lz-mpills {
  position: relative;
  margin-top: .75rem;
}

/* Un dégradé mange la dernière pastille sur le bord droit : c'est ce qui dit
   au lecteur qu'il en reste derrière, et que le ruban se fait glisser. */
.lz-mpills::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 2.25rem;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 72%);
}

.lz-mpills__track {
  display: flex;
  gap: .4rem;
  padding: .15rem 1rem .35rem;
  scroll-padding-left: 1rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.lz-mpills__track::-webkit-scrollbar { display: none; }

/* Une réserve en fin de piste pour que la dernière pastille puisse passer
   sous le dégradé sans y rester coincée. */
.lz-mpills__track::after {
  content: "";
  flex: 0 0 1.5rem;
}

.lz-mpill {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .38rem .85rem;
  border: 1px solid rgba(12, 18, 77, .16);
  border-radius: 999px;
  background: rgba(12, 18, 77, .06);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--primary-blue);
  text-decoration: none;
  white-space: nowrap;
  font-family: 'Roboto', sans-serif;
  font-size: .78rem;
  font-weight: 500;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
  -webkit-tap-highlight-color: transparent;
}

.lz-mpill:hover,
.lz-mpill:focus-visible {
  background: rgba(12, 18, 77, .11);
  border-color: rgba(12, 18, 77, .28);
  color: var(--primary-blue);
}

.lz-mpill.is-active {
  background: linear-gradient(45deg, var(--primary-blue), var(--secondary-blue));
  border-color: transparent;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(12, 18, 77, .28);
}

.lz-mpill--externe i { font-size: .62rem; opacity: .6; }

/* --- Contenu de la pastille ouverte --------------------------------------- */

.lz-mpanel { padding: .85rem 1rem 0; }

.lz-mune {
  display: block;
  margin-bottom: 1.1rem;
  color: inherit;
  text-decoration: none;
}

.lz-mune__imgwrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 16px;
  background: #eef0f7;
  box-shadow: 0 10px 26px rgba(12, 18, 77, .16);
}

.lz-mune__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lz-mune__text { padding: .7rem .15rem 0; }

.lz-mune__title {
  margin: .3rem 0 .35rem;
  font-family: 'Playfair Display', serif;
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--primary-blue);
}

.lz-mkicker {
  display: inline-block;
  padding: .16rem .5rem;
  border-radius: 999px;
  background: var(--secondary-blue);
  color: #fff;
  font-family: 'Roboto', sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
}

.lz-mdate {
  font-family: 'Roboto', sans-serif;
  font-size: 11px;
  color: #8a90ad;
}

.lz-mlist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lz-mlist__item + .lz-mlist__item { border-top: 1px solid #edeff5; }

.lz-mrow {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .8rem 0;
  color: inherit;
  text-decoration: none;
}

.lz-mrow__text { flex: 1 1 auto; min-width: 0; }

.lz-mrow__title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 0 .3rem;
  font-family: 'Playfair Display', serif;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.32;
  color: var(--primary-blue);
}

.lz-mrow__imgwrap {
  flex: 0 0 92px;
  width: 92px;
  height: 68px;
  overflow: hidden;
  border-radius: 12px;
  background: #eef0f7;
}

.lz-mrow__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Le gabarit de secours de niu_img est un bloc, pas une image. */
.lz-mune__img.niu-img--ph,
.lz-mrow__img.niu-img--ph {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b9bed4;
}

.lz-mvide {
  margin: 0;
  padding: 2.5rem 1rem;
  font-family: 'Roboto', sans-serif;
  font-size: .9rem;
  color: #8a90ad;
  text-align: center;
}

.lz-mvide i {
  display: block;
  margin-bottom: .5rem;
  font-size: 1.6rem;
  opacity: .45;
}

.lz-mtout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin: 1.2rem 0 .5rem;
  padding: .75rem 1rem;
  border: 1px dashed rgba(12, 18, 77, .28);
  border-radius: 999px;
  color: var(--primary-blue);
  text-decoration: none;
  font-family: 'Roboto', sans-serif;
  font-size: .85rem;
  font-weight: 600;
}

.lz-mtout:hover { background: rgba(12, 18, 77, .05); color: var(--primary-blue); }

/* Sur grand écran la page reste consultable. */
@media (min-width: 992px) {
  .lz-mcol {
    max-width: 720px;
    margin: 0 auto;
  }
}

@media print {
  .lz-tabbar { display: none !important; }
}

/* ==========================================================================
   Le kiosque — /articles, les rubriques, les natures, les thèmes
   Quatre pages, une seule grammaire visuelle : bandeau bleu en entrée,
   ouverture sur deux colonnes, bandes horizontales par section, puis la
   salle des archives et sa table de montage. Les titres en Playfair, le
   service en Roboto, comme le reste du journal.
   ========================================================================== */

.kq { padding-bottom: 4rem; }

/* --- Le bandeau d'entrée -------------------------------------------------- */

.kq-entete {
  background: linear-gradient(135deg, var(--primary-blue) 0%, #161d63 55%, var(--secondary-blue) 100%);
  color: #fff;
  padding: 2.6rem 0 2.2rem;
  margin-bottom: 2rem;
}

/* Une rubrique, un format, un thème n'ont pas à s'annoncer aussi fort que le
   journal : sur ces pages, le bandeau se réduit à ce qui situe le lecteur —
   le fil d'Ariane, le nom, une ligne de présentation. Ce qui compte y est
   juste en dessous. */
.kq-entete--referentiel {
  padding: 1.5rem 0 1.4rem;
  margin-bottom: 1.6rem;
}
.kq-entete--referentiel .kq-entete__titre { font-size: clamp(1.45rem, 3vw, 2rem); }
.kq-entete--referentiel .kq-entete__dek { font-size: .88rem; line-height: 1.5; }
.kq-entete--referentiel .kq-ariane { margin-bottom: .6rem; }
.kq-entete--referentiel .kq-branches { margin-top: 1rem; }

.kq-entete__kicker {
  font-family: 'Roboto', sans-serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
  margin: 0 0 .5rem;
}

.kq-entete__titre {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.1rem);
  line-height: 1.05;
  letter-spacing: normal;
  color: #fff;
  margin: 0 0 .6rem;
  text-wrap: balance;
}

.kq-entete__dek {
  font-size: .98rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .82);
  max-width: 44rem;
  margin: 0;
  text-wrap: pretty;
}

.kq-ariane {
  font-family: 'Roboto', sans-serif;
  font-size: .78rem;
  color: rgba(255, 255, 255, .6);
  margin-bottom: 1rem;
}
.kq-ariane a { color: rgba(255, 255, 255, .82); text-decoration: none; }
.kq-ariane a:hover { color: #fff; text-decoration: underline; }
.kq-ariane__sep { margin: 0 .4rem; opacity: .5; }
.kq-ariane__ici { color: #fff; font-weight: 600; }

.kq-branches {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-top: 1.5rem;
}
.kq-branches__mot {
  font-family: 'Roboto', sans-serif;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  margin-right: .3rem;
}
.kq-branche {
  font-family: 'Roboto', sans-serif;
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none;
  color: #fff;
  background: rgba(255, 255, 255, .14);
  border-radius: 999px;
  padding: .32rem .85rem;
  transition: background .2s;
}
.kq-branche:hover { background: rgba(255, 255, 255, .3); color: #fff; }
.kq-branche--clair {
  background: #eef0f8;
  color: var(--primary-blue);
  border: 1px solid #dfe3f1;
}
.kq-branche--clair:hover { background: var(--primary-blue); color: #fff; }

/* --- Les sections --------------------------------------------------------- */

.kq-section { margin-bottom: 3rem; scroll-margin-top: 5rem; }

.lz-head__note {
  font-family: 'Roboto', sans-serif;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
}

.kq-colonnes {
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr);
  gap: 2.2rem;
  align-items: start;
}
.kq-colonnes__rail { position: sticky; top: 1rem; }

.kq-rail__entete {
  border-bottom: 2px solid var(--primary-blue);
  padding-bottom: .5rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
}
.kq-rail__entete--second { margin-top: 2.2rem; }
.kq-rail__titre {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--primary-blue);
  margin: 0;
  letter-spacing: normal;
}
.kq-rail__note {
  font-family: 'Roboto', sans-serif;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #8a8a8a;
}

/* --- Les briques d'article ------------------------------------------------ */

.kq-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}

.kq-surtitre {
  display: inline-block;
  font-family: 'Roboto', sans-serif;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--secondary-blue);
  text-decoration: none;
  margin-bottom: .3rem;
}
a.kq-surtitre:hover { color: var(--primary-blue); text-decoration: underline; }
.kq-surtitre--muet { color: #8a8a8a; }

.kq-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  font-family: 'Roboto', sans-serif;
  font-size: .75rem;
  color: #8a8a8a;
  margin: 0;
}
.kq-meta__point { opacity: .5; }
.kq-meta__auteur { color: #6c6c6c; text-decoration: none; font-weight: 600; }
.kq-meta__auteur:hover { color: var(--primary-blue); }

/* L'ouverture */
.kq-une {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.1rem;
}
.kq-une__vedette { display: block; }
.kq-une__vignette {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 10px;
  background: #e9ecef;
  margin-bottom: 1rem;
}
.kq-une__vedette:hover .kq-img { transform: scale(1.03); }
.kq-une__titre {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 3.2vw, 2.15rem);
  line-height: 1.15;
  margin: 0 0 .6rem;
  text-wrap: balance;
  letter-spacing: normal;
}
.kq-une__titre a { color: var(--primary-blue); text-decoration: none; }
.kq-une__titre a:hover { color: var(--secondary-blue); }
.kq-une__chapo {
  font-size: 1rem;
  line-height: 1.6;
  color: #4a4a4a;
  margin: 0 0 .7rem;
  max-width: 42rem;
  text-wrap: pretty;
}
/* Les satellites de la une : trois tuiles à photo pleine largeur, dans la
   continuité des « À lire aussi » de l'accueil. */
.kq-une__satellites {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1.5rem 1.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid #e7e7e7;
}

/* Le fil défile tout seul, en boucle. La piste contient la liste deux fois et
   translate d'une hauteur de liste : au moment où elle revient à zéro, la
   copie occupe exactement la place de l'originale, et la boucle ne se voit
   pas. Au survol l'animation se fige — un fil qu'on ne peut pas lire ne sert
   à rien. Les dégradés haut et bas font entrer et sortir les lignes en
   fondu plutôt que de les couper net. */
.kq-fil {
  position: relative;
  height: 32rem;
  overflow: hidden;
  padding-right: .35rem;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 2.2rem, #000 calc(100% - 2.2rem), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 2.2rem, #000 calc(100% - 2.2rem), transparent 100%);
}
.kq-fil__piste { animation: kq-fil-defile 60s linear infinite; }
.kq-fil:hover .kq-fil__piste,
.kq-fil:focus-within .kq-fil__piste { animation-play-state: paused; }
.kq-fil__liste { list-style: none; margin: 0; padding: 0; }
.kq-fil__item { border-top: 1px dashed #e0e0e0; }
.kq-fil__liste:first-child .kq-fil__item:first-child { border-top: 0; }

@keyframes kq-fil-defile {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}

/* Qui a demandé moins d'animation retrouve la liste immobile, qu'il fait
   défiler lui-même. */
@media (prefers-reduced-motion: reduce) {
  .kq-fil { overflow-y: auto; -webkit-mask-image: none; mask-image: none; }
  .kq-fil__piste { animation: none; }
  .kq-fil__copie { display: none; }
}
.kq-fil__lien {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  padding: .6rem .2rem;
  text-decoration: none;
  border-radius: 6px;
  min-width: 0;
}
.kq-fil__lien:hover { background: #f4f5fa; }
.kq-fil__vignette {
  flex: 0 0 62px;
  width: 62px;
  height: 46px;
  overflow: hidden;
  border-radius: 5px;
  background: #e9ecef;
}
.kq-fil__corps { min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.kq-fil__haut {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .4rem;
  font-family: 'Roboto', sans-serif;
  line-height: 1.1;
}
.kq-fil__heure { font-size: .78rem; font-weight: 700; color: var(--secondary-blue); }
.kq-fil__jour { font-size: .66rem; color: #a0a0a0; }
.kq-fil__rubrique {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #a0a0a0;
}
.kq-fil__titre {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: .92rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: normal;
  color: var(--primary-blue);
}
.kq-fil__lien:hover .kq-fil__titre { color: var(--secondary-blue); }

/* La tuile */
.kq-carte { display: flex; flex-direction: column; min-width: 0; }
.kq-carte__vignette {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 8px;
  background: #e9ecef;
  margin-bottom: .7rem;
}
.kq-carte:hover .kq-img { transform: scale(1.05); }
.kq-carte__corps { display: flex; flex-direction: column; gap: .2rem; }
.kq-carte__titre {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.28;
  margin: 0 0 .3rem;
  text-wrap: balance;
  letter-spacing: normal;
}
.kq-carte__titre a { color: var(--primary-blue); text-decoration: none; }
.kq-carte__titre a:hover { color: var(--secondary-blue); }
.kq-carte__chapo {
  font-size: .86rem;
  line-height: 1.5;
  color: #6c6c6c;
  margin: 0 0 .4rem;
  text-wrap: pretty;
}


/* --- Le palmarès et les listes -------------------------------------------- */

.kq-duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.2rem;
  align-items: start;
}
.kq-duo__dek {
  font-size: .9rem;
  color: #6c6c6c;
  line-height: 1.55;
  margin: 0 0 1rem;
  text-wrap: pretty;
}

.kq-classement { list-style: none; margin: 0; padding: 0; }
.kq-classement__item { border-top: 1px solid #ececec; }
.kq-classement__item:first-child { border-top: 0; }
.kq-classement__lien {
  display: flex;
  gap: .75rem;
  align-items: center;
  padding: .7rem .2rem;
  text-decoration: none;
  border-radius: 6px;
  min-width: 0;
}
.kq-classement__lien:hover { background: #f4f5fa; }
.kq-classement__rang {
  font-family: 'Playfair Display', serif;
  font-weight: 800;
  font-size: 1.7rem;
  line-height: 1;
  color: #dfe3f1;
  flex: 0 0 1.3rem;
  text-align: right;
}
.kq-classement__vignette {
  flex: 0 0 96px;
  width: 96px;
  height: 72px;
  overflow: hidden;
  border-radius: 6px;
  background: #e9ecef;
}
.kq-classement__corps { min-width: 0; display: flex; flex-direction: column; gap: .12rem; }
.kq-classement__titre {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3;
  letter-spacing: normal;
  color: var(--primary-blue);
  text-wrap: balance;
}
.kq-classement__lien:hover .kq-classement__titre { color: var(--secondary-blue); }
.kq-classement__lien:hover .kq-classement__rang { color: var(--secondary-blue); }
.kq-classement__lien:hover .kq-img { transform: scale(1.06); }
.kq-fil__lien:hover .kq-img { transform: scale(1.06); }

/* La ligne entière est cliquable, pas seulement le nom : on suit un auteur
   comme on ouvre un article. */
.kq-auteurs { list-style: none; margin: 0; padding: 0; }
.kq-auteurs li + li { border-top: 1px solid #f0f0f0; }
.kq-auteurs__lien {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .6rem;
  padding: .5rem .1rem;
  text-decoration: none;
  border-radius: 4px;
}
.kq-auteurs__lien:hover { background: #f4f5fa; }
.kq-auteurs__nom {
  font-family: 'Roboto', sans-serif;
  font-size: .9rem;
  font-weight: 600;
  color: var(--primary-blue);
}
.kq-auteurs__lien:hover .kq-auteurs__nom { color: var(--secondary-blue); text-decoration: underline; }
.kq-auteurs__compte { font-family: 'Roboto', sans-serif; font-size: .75rem; color: #a0a0a0; }

/* --- Les portes d'entrée (formats, thèmes, rubriques) ---------------------- */

.kq-jetons { display: flex; flex-wrap: wrap; gap: .6rem; }
.kq-jeton {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  text-decoration: none;
  font-family: 'Roboto', sans-serif;
  font-size: .88rem;
  font-weight: 600;
  color: var(--primary-blue);
  background: #f4f5fa;
  border: 1px solid #e2e5f2;
  border-radius: 999px;
  padding: .45rem .5rem .45rem 1rem;
  transition: background .2s, border-color .2s, transform .15s;
}
.kq-jeton:hover {
  background: var(--primary-blue);
  border-color: var(--primary-blue);
  color: #fff;
  transform: translateY(-1px);
}
.kq-jeton__compte {
  font-size: .74rem;
  font-weight: 700;
  background: #fff;
  color: var(--secondary-blue);
  border-radius: 999px;
  padding: .12rem .5rem;
  min-width: 1.75rem;
  text-align: center;
}
.kq-jeton:hover .kq-jeton__compte { background: rgba(255, 255, 255, .92); }

/* --- L'annuaire des rubriques --------------------------------------------- */

.kq-annuaire {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.3rem;
}
.kq-fiche {
  border: 1px solid #e6e8f0;
  border-radius: 10px;
  padding: 1.2rem 1.2rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  transition: box-shadow .2s, border-color .2s;
}
.kq-fiche:hover { border-color: #cfd4e8; box-shadow: 0 12px 28px rgba(12, 18, 77, .09); }
.kq-fiche__entete { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; }
.kq-fiche__titre { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1.2rem; margin: 0; }
.kq-fiche__titre a { color: var(--primary-blue); text-decoration: none; }
.kq-fiche__titre a:hover { color: var(--secondary-blue); }
.kq-fiche__compte {
  font-family: 'Roboto', sans-serif;
  font-size: .72rem;
  color: #8a8a8a;
  white-space: nowrap;
}
.kq-fiche__dek { font-size: .86rem; color: #6c6c6c; line-height: 1.5; margin: 0; }
.kq-fiche__branches { display: flex; flex-wrap: wrap; gap: .35rem; }
.kq-fiche__branches .kq-branche--clair { font-size: .75rem; padding: .2rem .6rem; }
.kq-fiche__dernier {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  text-decoration: none;
  margin-top: auto;
  padding-top: .8rem;
  border-top: 1px solid #f0f1f6;
}
.kq-fiche__label {
  font-family: 'Roboto', sans-serif;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #a0a0a0;
}
.kq-fiche__article {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: .95rem;
  line-height: 1.3;
  color: var(--primary-blue);
  letter-spacing: normal;
}
.kq-fiche__dernier:hover .kq-fiche__article { color: var(--secondary-blue); }
.kq-fiche__vide { font-size: .82rem; color: #a0a0a0; font-style: italic; margin: auto 0 0; }

/* --- La table de montage (filtres) ---------------------------------------- */

.kq-filtres {
  background: #f7f8fc;
  border: 1px solid #e6e8f0;
  border-radius: 10px;
  padding: 1rem 1.1rem;
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .85rem;
}
.kq-filtres__ligne { display: flex; flex-wrap: wrap; gap: .8rem; align-items: flex-end; }
.kq-filtres__ligne--segments { align-items: center; gap: .6rem 1.2rem; }

.kq-champ { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.kq-champ--recherche { flex: 1 1 15rem; position: relative; justify-content: flex-end; }
.kq-champ--recherche i {
  position: absolute;
  left: .85rem;
  top: 50%;
  transform: translateY(-50%);
  color: #a0a4bd;
  font-size: .85rem;
  pointer-events: none;
}
.kq-champ__saisie {
  width: 100%;
  border: 1px solid #dcdfec;
  border-radius: 6px;
  background: #fff;
  padding: .55rem .9rem .55rem 2.3rem;
  font-family: 'Roboto', sans-serif;
  font-size: .9rem;
  color: var(--text-dark);
}
.kq-champ__saisie:focus {
  outline: none;
  border-color: var(--secondary-blue);
  box-shadow: 0 0 0 3px rgba(52, 9, 177, .12);
}
.kq-champ__etiquette {
  font-family: 'Roboto', sans-serif;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8a8fa8;
}
.kq-champ__liste {
  border: 1px solid #dcdfec;
  border-radius: 6px;
  background: #fff;
  padding: .52rem .8rem;
  font-family: 'Roboto', sans-serif;
  font-size: .88rem;
  color: var(--text-dark);
  min-width: 11rem;
  max-width: 16rem;
}
.kq-champ__liste:focus { outline: none; border-color: var(--secondary-blue); }

/* Les segments : des boutons radio déguisés. Pas de JavaScript pour tenir
   l'état sélectionné — c'est le navigateur qui s'en charge. */
.kq-segment {
  display: inline-flex;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid #dcdfec;
  border-radius: 999px;
  padding: .18rem;
  gap: .12rem;
}
.kq-segment__option { margin: 0; cursor: pointer; }
.kq-segment__option input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.kq-segment__option span {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-family: 'Roboto', sans-serif;
  font-size: .78rem;
  font-weight: 600;
  color: #6c7089;
  border-radius: 999px;
  padding: .34rem .78rem;
  transition: background .18s, color .18s;
  white-space: nowrap;
}
.kq-segment__option span i { font-size: .72rem; opacity: .75; }
.kq-segment__option:hover span { background: #eef0f8; color: var(--primary-blue); }
.kq-segment__option input:checked + span { background: var(--primary-blue); color: #fff; }
.kq-segment__option input:focus-visible + span { box-shadow: 0 0 0 3px rgba(52, 9, 177, .25); }

.kq-reinit {
  margin-left: auto;
  border: 0;
  background: transparent;
  font-family: 'Roboto', sans-serif;
  font-size: .78rem;
  font-weight: 600;
  color: #8a8fa8;
  padding: .3rem .2rem;
  cursor: pointer;
}
.kq-reinit:hover { color: var(--secondary-blue); text-decoration: underline; }

/* --- Les résultats -------------------------------------------------------- */

.kq-resume {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 1rem;
  margin-bottom: 1.2rem;
}
.kq-resume__compte { font-family: 'Roboto', sans-serif; font-size: .9rem; color: #6c6c6c; margin: 0; }
.kq-resume__compte strong { font-family: 'Playfair Display', serif; font-size: 1.15rem; color: var(--primary-blue); }
.kq-resume__criteres { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.kq-critere {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: 'Roboto', sans-serif;
  font-size: .78rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--primary-blue);
  background: #eef0f8;
  border-radius: 999px;
  padding: .25rem .7rem;
}
.kq-critere i { font-size: .68rem; opacity: .6; }
.kq-critere:hover { background: var(--primary-blue); color: #fff; }
.kq-critere:hover i { opacity: 1; }

.kq-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: 1.8rem 1.4rem;
}

/* Le cadre d'un wagon ne doit pas exister visuellement : ses cartes retombent
   dans la grille comme si elles y avaient été rendues d'un bloc. */
.kq-suite { display: contents; }

.kq-plus { grid-column: 1 / -1; text-align: center; padding-top: .8rem; }
.kq-plus__bouton {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: 'Roboto', sans-serif;
  font-size: .86rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none;
  color: var(--primary-blue);
  background: #fff;
  border: 1px solid var(--primary-blue);
  border-radius: 6px;
  padding: .65rem 1.5rem;
  cursor: pointer;
  transition: box-shadow .2s, background .2s, color .2s;
}
.kq-plus__bouton:hover { background: var(--primary-blue); color: #fff; box-shadow: 0 6px 18px rgba(12, 18, 77, .2); }
.kq-plus__compte { font-family: 'Roboto', sans-serif; font-size: .74rem; color: #a0a0a0; margin: .6rem 0 0; }

.kq-vide { text-align: center; padding: 3rem 1rem; border: 1px dashed #d8dbe9; border-radius: 10px; }
.kq-vide__titre {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--primary-blue);
  margin: 0 0 .5rem;
}
.kq-vide__aide { font-size: .9rem; color: #8a8a8a; margin: 0 0 1.2rem; }

/* Pendant qu'un filtre part chercher sa réponse, les résultats s'estompent :
   le lecteur voit que quelque chose se passe, sans que la page saute. */
turbo-frame#kiosque[aria-busy="true"] { opacity: .45; transition: opacity .15s ease; }
turbo-frame[aria-busy="true"] .kq-plus__bouton { opacity: .5; pointer-events: none; }

/* --- Adaptations ---------------------------------------------------------- */

@media (max-width: 991.98px) {
  .kq-colonnes { grid-template-columns: minmax(0, 1fr); gap: 2.4rem; }
  .kq-colonnes__rail { position: static; }
  .kq-duo { grid-template-columns: minmax(0, 1fr); gap: 2.4rem; }
}

@media (max-width: 575px) {
  .kq-entete { padding: 2rem 0 1.8rem; margin-bottom: 1.5rem; }
  .kq-section { margin-bottom: 2.4rem; }
  .kq-grille { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1.4rem 1rem; }
  .kq-carte__titre { font-size: .94rem; }
  .kq-carte__chapo { display: none; }
  .kq-filtres { padding: .85rem; }
  .kq-champ--recherche { flex-basis: 100%; }
  .kq-champ--liste { flex: 1 1 100%; }
  .kq-champ__liste { max-width: none; width: 100%; }
  .kq-filtres__ligne--segments { align-items: stretch; }
  .kq-segment { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; max-width: 100%; }
  .kq-segment::-webkit-scrollbar { display: none; }
  .kq-reinit { margin-left: 0; align-self: flex-start; }
  .kq-annuaire { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   Abonnement aux notifications
   -------------------------------------------------------------------------- */

.np-carte {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  border: 1px solid #e6e8f0;
  border-radius: 10px;
  padding: 1.3rem 1.4rem;
  margin-bottom: 3rem;
  background: #f7f8fc;
}
.np-carte__texte { min-width: 0; flex: 1 1 18rem; }
.np-carte__titre {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: normal;
  color: var(--primary-blue);
  margin: 0 0 .35rem;
}
.np-carte__dek {
  margin: 0;
  font-size: .9rem;
  line-height: 1.55;
  color: #6c6c6c;
  max-width: 34rem;
}
.np-carte__message {
  margin: .6rem 0 0;
  font-size: .85rem;
  line-height: 1.5;
  min-height: 1.2em;
}
.np-carte__message[data-ton="succes"]  { color: #1e8449; }
.np-carte__message[data-ton="erreur"]  { color: #c0392b; }
.np-carte__message[data-ton="neutre"]  { color: #6c6c6c; }

.np-carte__bouton {
  flex: 0 0 auto;
  font-family: 'Roboto', sans-serif;
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: #fff;
  background: var(--primary-blue);
  border: 1px solid var(--primary-blue);
  border-radius: 6px;
  padding: .7rem 1.5rem;
  cursor: pointer;
  transition: background .2s, color .2s, box-shadow .2s;
}
.np-carte__bouton:hover:not(:disabled) {
  background: #fff;
  color: var(--primary-blue);
  box-shadow: 0 4px 14px rgba(12, 18, 77, .2);
}
.np-carte__bouton:disabled { opacity: .55; cursor: default; }
/* Déjà abonné : le bouton devient une sortie, pas une invitation de plus. */
.np-carte__bouton.is-abonne {
  background: #fff;
  color: #6c7089;
  border-color: #dcdfec;
}
.np-carte__bouton.is-abonne:hover:not(:disabled) {
  color: #c0392b;
  border-color: #c0392b;
  box-shadow: none;
}

@media (max-width: 575px) {
  .np-carte { padding: 1.1rem; }
  .np-carte__bouton { width: 100%; }
}

/* --------------------------------------------------------------------------
   Panneau latéral mobile — l'espace du lecteur
   Les rubriques sont parties dans la barre d'onglets du bas ; ce tiroir ne
   sert plus qu'à la recherche et au compte.
   -------------------------------------------------------------------------- */

.oc-identite {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .3rem .2rem 1.1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.oc-identite__pastille {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1.25rem;
}
.oc-identite__texte { display: flex; flex-direction: column; min-width: 0; }
.oc-identite__nom {
  color: #fff;
  font-weight: 600;
  font-size: .95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.oc-identite__email { color: rgba(255, 255, 255, .55); font-size: .78rem; }

.oc-liens { display: flex; flex-direction: column; gap: .35rem; }
.oc-lien {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .85rem .9rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, .06);
  color: #fff;
  text-decoration: none;
  font-size: .92rem;
  transition: background .18s;
  /* Cible d'au moins 48 px : c'est la taille d'un pouce, pas d'un curseur. */
  min-height: 48px;
}
.oc-lien:hover, .oc-lien:active { background: rgba(255, 255, 255, .14); color: #fff; }
.oc-lien i:first-child { color: rgba(255, 255, 255, .65); }
.oc-lien span { flex: 1 1 auto; }
.oc-lien__fleche { font-size: .7rem; color: rgba(255, 255, 255, .35); }


.oc-invite {
  color: rgba(255, 255, 255, .72);
  font-size: .9rem;
  line-height: 1.55;
  margin: .3rem .2rem 1.2rem;
}

.oc-actions { display: flex; flex-direction: column; gap: .5rem; }
.oc-bouton {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border-radius: 8px;
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background .18s, color .18s;
}
/* Blanc sur bleu, comme les « Voir tout » du site : la charte n. a pas de
   jaune, et ce panneau n. avait pas à en inventer un. */
.oc-bouton--principal { background: #fff; color: var(--primary-blue); }
.oc-bouton--principal:hover { background: rgba(255, 255, 255, .88); color: var(--primary-blue); }

.oc-chercher {
  background: #fff;
  color: var(--primary-blue);
  border: 0;
  flex: 0 0 auto;
}
.oc-chercher:hover { background: rgba(255, 255, 255, .85); color: var(--primary-blue); }
.oc-bouton--secondaire {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .4);
}
.oc-bouton--secondaire:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.oc-bouton--sortie {
  margin-top: 1.4rem;
  background: transparent;
  color: rgba(255, 255, 255, .8);
  border-color: rgba(255, 255, 255, .25);
}
.oc-bouton--sortie:hover { background: rgba(192, 57, 43, .25); border-color: #c0392b; color: #fff; }

/* --------------------------------------------------------------------------
   Messages éphémères
   En bas sur téléphone — là où le pouce atteint —, en haut à droite ailleurs.
   -------------------------------------------------------------------------- */

.lz-toasts {
  position: fixed;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  pointer-events: none;
  left: 1rem;
  right: 1rem;
  /* Au-dessus de la barre d'onglets, jamais derrière. */
  bottom: calc(var(--lz-tabbar-h, 66px) + env(safe-area-inset-bottom, 0px) + .8rem);
}

.lz-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .85rem 1rem;
  border-radius: 10px;
  color: #fff;
  font-family: 'Roboto', sans-serif;
  font-size: .9rem;
  line-height: 1.45;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
  cursor: pointer;
  /* État de départ : hors écran par le bas, effacé. */
  opacity: 0;
  transform: translateY(1.2rem);
  transition: opacity .25s ease, transform .25s ease;
}
.lz-toast.is-visible { opacity: 1; transform: translateY(0); }
.lz-toast i { font-size: 1rem; margin-top: .1rem; flex: 0 0 auto; }
.lz-toast span { min-width: 0; }

.lz-toast--notice { background: #1e8449; }
.lz-toast--alert  { background: #c0392b; }

@media (min-width: 992px) {
  .lz-toasts {
    left: auto;
    right: 1.5rem;
    bottom: auto;
    top: 1.5rem;
    max-width: 24rem;
  }
  /* Sur grand écran le message descend du haut. */
  .lz-toast { transform: translateY(-1.2rem); }
  .lz-toast.is-visible { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .lz-toast { transition: opacity .2s ease; transform: none; }
  .lz-toast.is-visible { transform: none; }
}

/* --------------------------------------------------------------------------
   Carrousel d'articles
   Rien ne défile tout seul : le lecteur pousse, la bande tourne sans fin.
   -------------------------------------------------------------------------- */

.kq-carrousel { position: relative; }

.kq-carrousel__piste {
  display: flex;
  gap: 1.4rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  padding-bottom: .6rem;
  /* La barre de défilement disparaît, le geste reste. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.kq-carrousel__piste::-webkit-scrollbar { display: none; }
.kq-carrousel__piste:focus-visible { outline: 2px solid var(--secondary-blue); outline-offset: 4px; }

.kq-carrousel__item {
  flex: 0 0 248px;
  max-width: 248px;
  min-width: 0;
  scroll-snap-align: start;
}

/* Les flèches n'existent que si la bande déborde — `is-defilable` est posé par
   le contrôleur après mesure — et seulement là où il y a un curseur pour les
   viser. Au doigt, on pousse la bande. */
.kq-carrousel__fleche {
  display: none;
  position: absolute;
  top: 38%;
  z-index: 3;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #e2e5f2;
  background: #fff;
  color: var(--primary-blue);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(12, 18, 77, .16);
  transition: background .2s, color .2s, box-shadow .2s;
}
.kq-carrousel__fleche--avant { left: -14px; }
.kq-carrousel__fleche--apres { right: -14px; }
.kq-carrousel__fleche:hover {
  background: var(--primary-blue);
  color: #fff;
  box-shadow: 0 6px 20px rgba(12, 18, 77, .28);
}

@media (hover: hover) and (min-width: 768px) {
  .kq-carrousel.is-defilable .kq-carrousel__fleche { display: flex; }
}

@media (max-width: 575px) {
  .kq-carrousel__piste { gap: 1rem; }
  .kq-carrousel__item { flex-basis: 208px; max-width: 208px; }
}

@media (prefers-reduced-motion: reduce) {
  .kq-carrousel__piste { scroll-behavior: auto; }
}

/* --------------------------------------------------------------------------
   Les notifications d'un lecteur
   -------------------------------------------------------------------------- */

.notif-entete {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid rgba(12, 18, 77, .18);
}
.notif-entete__titre {
  margin: .25rem 0 .3rem;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: clamp(1.7rem, 4vw, 2.2rem);
  line-height: 1.1;
  letter-spacing: normal;
  color: var(--primary-blue);
}
.notif-entete__dek { margin: 0; color: #666; font-size: .95rem; }

.notif-tout-lu {
  min-height: 46px;
  padding: .7rem 1.3rem;
  border-radius: 6px;
  border: 1px solid var(--primary-blue);
  background: #fff;
  color: var(--primary-blue);
  font-family: 'Roboto', sans-serif;
  font-weight: 600;
  font-size: .88rem;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.notif-tout-lu:hover { background: var(--primary-blue); color: #fff; }

.notif-liste { list-style: none; margin: 0; padding: 0; }

.notif-ligne {
  display: flex;
  align-items: stretch;
  gap: .5rem;
  border-bottom: 1px solid #ececec;
}
/* Le liseré bleu et le fond léger disent « neuf » sans crier. */
.notif-ligne.is-non-lue { background: #f5f7ff; box-shadow: inset 3px 0 0 var(--secondary-blue); }

.notif-ligne__lien {
  flex: 1 1 auto;
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  padding: 1rem .9rem;
  text-decoration: none;
  min-width: 0;
}
.notif-ligne__lien:hover { background: rgba(12, 18, 77, .04); }

.notif-ligne__pastille {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #eef0f8;
  color: var(--primary-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
}
.notif-ligne.is-non-lue .notif-ligne__pastille { background: var(--primary-blue); color: #fff; }

.notif-ligne__corps { min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.notif-ligne__haut { display: flex; align-items: center; gap: .5rem; }
.notif-ligne__titre {
  font-family: 'Roboto', sans-serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--secondary-blue);
}
.notif-ligne__point {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--secondary-blue);
  flex: 0 0 auto;
}
.notif-ligne__texte {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.3;
  color: var(--primary-blue);
}
.notif-ligne__meta { font-family: 'Roboto', sans-serif; font-size: .76rem; color: #8a8a8a; }
.notif-ligne__sep { opacity: .5; }

.notif-ligne__forme { display: flex; align-items: center; }
.notif-ligne__marquer {
  width: 44px;
  height: 44px;
  margin: .6rem .5rem .6rem 0;
  border-radius: 8px;
  border: 1px solid #dcdfec;
  background: #fff;
  color: #8a8fa8;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.notif-ligne__marquer:hover { background: #1e8449; border-color: #1e8449; color: #fff; }

/* L'onglet de période, sur la page du top. */
.kq-branche.is-actif { background: #fff; color: var(--primary-blue); font-weight: 700; }

@media (max-width: 575px) {
  .notif-ligne__lien { padding: .9rem .7rem; gap: .7rem; }
  .notif-ligne__pastille { flex-basis: 34px; width: 34px; height: 34px; font-size: .8rem; }
  .notif-tout-lu { width: 100%; }
}

/* Le compteur de notifications non lues, dans le panneau latéral. */
.oc-lien__compteur {
  background: var(--secondary-blue);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  border-radius: 999px;
  min-width: 22px;
  padding: .15rem .45rem;
  text-align: center;
  flex: 0 0 auto;
}