/* ==========================================================================
 * Densité mobile — réduction de l'empreinte des éléments surdimensionnés
 *
 * Portée : strictement sous 768 px. Rien ne s'applique au desktop ni à la
 * tablette (≥ 768 px). Aucun `transform: scale`.
 *
 * Principe : on réduit le contenant, jamais le contenu. Le corps des articles
 * reste à 16 px, aucun texte n'est retiré. Ce qui maigrit, ce sont les
 * en-têtes, les blocs d'introduction, les titres décoratifs, les hauteurs
 * d'image imposées et les vides verticaux.
 * ========================================================================== */

@media (max-width: 767px) {

  /* ======================================================= HEADER : 44 px */

  .primary-header {
    grid-template-columns: 32px minmax(0, 1fr) 32px 32px;
    gap: 8px;
    min-height: 44px;
  }
  .brand-logo { width: 32px; height: 32px; }
  .mobile-search-button,
  .primary-header .menu-toggle { width: 30px; height: 30px; }
  .primary-header .icon-button svg { width: 15px; height: 15px; }

  /* La zone tappable reste à 44 px malgré le cercle réduit. */
  .primary-header .icon-button { position: relative; }
  .primary-header .icon-button::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }

  /* ========================================================= ACCUEIL : HERO */

  .hero { padding: 18px 0 28px; }

  .hero .eyebrow { margin-bottom: 7px; font-size: 10.5px; letter-spacing: .16em; }

  .hero h1 {
    font-size: clamp(28px, 7.4vw, 30px);
    line-height: 1.2;
    letter-spacing: -.03em;
  }

  /* Chapô : 15 px. C'est un texte d'accroche, pas le corps d'un article —
     la règle des 16 px minimum ne concerne que ce dernier. */
  .hero .lead {
    margin-top: 12px;
    font-size: 15px;
    line-height: 1.55;
  }

  /* Actions sur une seule ligne, y compris sous 480 px. */
  .hero-actions {
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 16px;
    margin-top: 16px;
  }
  .bs-redesign .hero-actions .button {
    min-height: 42px;
    padding: 10px 18px;
    font-size: 14px;
    white-space: nowrap;
  }
  .hero-actions .text-link { font-size: 14px; padding-bottom: 3px; white-space: nowrap; }
  .hero-actions .text-link::after { font-size: 12px; }

  /* Visuel : l'image principale passe sous 320 px, la composition à deux
     images et le cartouche sont conservés. */
  .hero-visual { min-height: 322px; margin-top: 10px; }
  .hero-image-main { height: 290px; border-radius: 96px 96px 8px 8px; }
  .hero-image-small { height: 124px; width: 40%; border-width: 5px; border-radius: 66px 66px 4px 4px; }

  .bs-redesign .editor-note {
    right: -2px;
    bottom: 8px;
    width: 156px;
    padding: 13px;
  }
  .bs-redesign .editor-note small { margin-bottom: 3px; font-size: 7.5px; letter-spacing: .14em; }
  .bs-redesign .editor-note strong {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 15px;
    line-height: 1.3;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
    -webkit-hyphens: none;
    line-break: auto;
  }

  /* =================================================== HUB ET CATÉGORIES */

  .hub-hero { padding: 20px 0 20px; }
  .breadcrumbs { margin-bottom: 12px; font-size: 8.5px; gap: 7px; }
  .hub-heading { gap: 12px; }
  .hub-heading h1 { font-size: clamp(28px, 7.4vw, 30px); line-height: 1.2; letter-spacing: -.03em; }
  .hub-heading p { margin: 0; font-size: 15px; line-height: 1.55; }

  .hub-tabs { grid-template-columns: repeat(4, minmax(148px, 1fr)); }
  .hub-tab { min-height: 66px; padding: 12px 14px; }
  .hub-tab small { font-size: 8px; }
  .hub-tab strong { margin-top: 4px; font-size: 14px; line-height: 1.28; }

  .hub-feature { padding: 28px 0 32px; }
  .hub-lead { gap: 16px; }
  .hub-lead-image,
  .hub-lead-image img,
  .hub-lead-image .bs-image-fallback { min-height: 210px; }
  .hub-lead-copy { padding: 4px 0 0; }
  .hub-lead-copy h2 { font-size: clamp(24px, 6.4vw, 26px); line-height: 1.26; }
  .hub-lead-copy p { margin: 10px 0 16px; font-size: 15px; line-height: 1.55; }

  /* ============================================================= ARTICLE */

  .article-header { padding: 18px 0 16px; }
  .article-header .eyebrow { margin-bottom: 7px; font-size: 10.5px; }
  .article-header h1 { font-size: clamp(30px, 7.9vw, 32px); line-height: 1.2; letter-spacing: -.03em; }
  .article-dek {
    margin-top: 10px;
    font-size: 15px;
    line-height: 1.55;
    /* Le chapô est l'extrait de l'article et peut être très long. Borné à
       3 lignes ici pour que le bloc d'en-tête tienne sa cible ; le texte
       reste entier dans le DOM et le corps de l'article n'est pas touché. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }
  .article-byline { gap: 7px; margin-top: 10px; font-size: 8.5px; }
  .author-dot { width: 4px; height: 4px; }

  .article-hero { height: 58vw; min-height: 210px; }
  .article-layout { padding: 24px 0 36px; }

  /* Le corps de l'article reste à 16 px. Seuls les intertitres maigrissent. */
  .bs-redesign .article-content { font-size: 16px; line-height: 1.78; }
  .bs-redesign .article-content h2 { margin: 28px 0 12px; font-size: clamp(24px, 6.4vw, 26px); line-height: 1.28; }
  .bs-redesign .article-content h3 { margin: 20px 0 8px; font-size: 19px; }
  .bs-redesign .article-content blockquote { margin: 22px 0; padding: 18px 16px; font-size: 17px; line-height: 1.5; }
  .bs-redesign .article-content img { margin: 20px 0 8px; }
  .bs-redesign .article-content > p:first-of-type::first-letter { font-size: 48px; margin: 6px 8px 0 0; }

  .review-hero { padding: 20px 0 28px; }
  .review-hero-grid { gap: 20px; }
  .review-hero-copy h1 { font-size: clamp(30px, 7.9vw, 32px); line-height: 1.2; }
  .review-hero-image { height: 62vw; max-height: 300px; }

  /* ================================================ RYTHME DES SECTIONS */

  .featured,
  .reviews,
  .trends,
  .essentials { padding: 40px 0; }
  .newsletter { padding: 36px 0; }
  .newsletter-inner { gap: 20px; padding: 24px 18px; }
  .section-head { margin-bottom: 20px; }
  .archive { padding: 40px 0 44px; }
  .bs-related { padding: 36px 0 40px; }
  .site-footer { padding: 36px 0 20px; }
  .footer-grid { gap: 22px; padding-bottom: 24px; }
  .archive-toolbar { gap: 12px; margin-bottom: 20px; }

  /* ================================================== TITRES ET CARTES */

  .section-title { font-size: clamp(24px, 6.4vw, 26px); line-height: 1.24; }
  .section-copy { margin-top: 8px; font-size: 15px; line-height: 1.55; }
  .archive-toolbar h2 { font-size: 24px; }
  .bs-empty h2 { font-size: 24px; }
  .bs-empty { padding: 18px 0 4px; }
  .bs-empty p { margin-bottom: 16px; font-size: 15px; }

  .category-link { min-height: 84px; padding: 13px 13px; }
  .category-number { margin-bottom: 8px; font-size: 9.5px; }
  .category-link strong { font-size: 16px; line-height: 1.3; }
  .category-link span:last-child { margin-top: 1px; font-size: 8.5px; }

  .feature-grid { gap: 16px; }
  .story-stack { gap: 16px; }
  .story-main { height: 280px; }
  .story-small { height: 152px; }
  .story-content { padding: 14px; }
  .story-main .story-content { padding: 16px; }
  .story-category { margin-bottom: 5px; font-size: 8px; }
  .story h3 { font-size: 18px; line-height: 1.3; }
  .story-small h3 { font-size: 17px; line-height: 1.3; }
  .story-meta { margin-top: 6px; font-size: 9px; }

  .archive-grid { gap: 20px; }
  .post-card img,
  .post-card .bs-image-fallback { height: 160px; }
  .post-card-body { padding: 10px 2px 0; }
  .post-card .eyebrow { font-size: 9.5px; }
  .post-card h3 { margin: 5px 0 5px; font-size: 18px; line-height: 1.32; }
  .post-card p { font-size: 13.5px; line-height: 1.5; }

  .essential-grid { gap: 16px; margin-top: 20px; }
  .essential-card img,
  .essential-card .bs-image-fallback { height: 150px; }
  .essential-body { padding: 12px 12px 14px; }
  .essential-body h3 { margin-top: 6px; font-size: 17px; line-height: 1.34; }

  .review-grid { gap: 16px; margin-top: 22px; }
  .review-image { height: 180px; }
  .review-body { padding: 14px 14px 16px; }
  .review-body h3 { min-height: 0; font-size: 17px; line-height: 1.34; }
  .review-body p { margin-top: 8px; font-size: 13.5px; }

  .trend-visual { min-height: 300px; }
  .trend-primary { height: 252px; }
  .trend-secondary { height: 128px; }
  .trend-item { padding: 11px 0; }
  .trend-item strong { font-size: 16px; line-height: 1.3; }

  .author-card { margin-top: 24px; padding: 14px; grid-template-columns: 48px 1fr; gap: 12px; }
  .author-avatar { width: 48px; height: 48px; }
  .post-nav { margin-top: 24px; padding-top: 16px; gap: 14px; }
  .post-nav strong { font-size: 16px; }

  /* ============================================ CIBLES TACTILES, LISIBILITÉ */

  .footer-col a,
  .toc a,
  .bs-empty-links .text-link,
  .pagination .page-numbers,
  .mobile-accordion-panel a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  .footer-col a { margin: 0; font-size: 14px; }
  .pagination .page-numbers { justify-content: center; min-width: 44px; }
  .mobile-accordion-panel a { font-size: 15px; }
  .header-search button,
  .drawer-search button,
  .mobile-search-panel button { min-width: 44px; min-height: 44px; }

  .section-head .text-link,
  .hub-lead-copy .text-link,
  .bs-related .text-link { min-height: 44px; align-items: center; }

  .footer-bottom { font-size: 10.5px; line-height: 1.9; }
  .footer-bottom a { padding: 3px 0; }

  /* Aucune troncature ailleurs que sur le cartouche et le chapô d'article. */
  .bs-redesign .story h3,
  .bs-redesign .post-card h3,
  .bs-redesign .essential-body h3 { -webkit-line-clamp: none; overflow: visible; }

  /* ------------------------------------------- RETOUR EN HAUT (Astra) */

  .bs-redesign #ast-scroll-top {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    font-size: 13px;
    background-color: var(--plum);
    color: #fff;
    box-shadow: inset 0 0 0 1px var(--champagne);
  }
}

/* ======================== RENFORCEMENT SOUS 480 px ======================== */

@media (max-width: 480px) {

  /* Les actions restent sur une ligne : on annule l'empilement hérité. */
  .hero-actions { flex-direction: row; align-items: center; flex-wrap: nowrap; gap: 14px; }

  .hero { padding: 16px 0 24px; }
  .hero-visual { min-height: 320px; margin-top: 8px; }
  .hero-image-main { height: 288px; border-radius: 94px 94px 8px 8px; }
  .hero-image-small { height: 118px; }
  .bs-redesign .editor-note { width: 148px; padding: 12px; bottom: 6px; }
  .bs-redesign .editor-note strong { font-size: 14px; }

  .category-link { min-height: 78px; padding: 12px 11px; }
  .category-link strong { font-size: 15px; }

  .featured,
  .reviews,
  .trends,
  .essentials { padding: 36px 0; }
  .story-main { height: 260px; }
  .story-small { height: 140px; }
  .post-card img,
  .post-card .bs-image-fallback { height: 150px; }
  .essential-card img,
  .essential-card .bs-image-fallback { height: 145px; }
  .hub-lead-image,
  .hub-lead-image img,
  .hub-lead-image .bs-image-fallback { min-height: 190px; }
}