/* Article (article.html). */

  /* ------------------------- article.html -------------------------- */
  .article__head { max-width: 720px; margin-inline: auto; }
  .article__head > * + * { margin-top: var(--space-3); }
  .article__back { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; }
  .article__back svg { transition: transform var(--t) var(--ease); }
  .article__back:hover svg { transform: translateX(-3px); }

  .meta-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: var(--muted);
  }
  .meta-line b { font-weight: 600; color: var(--accent); }
  .meta-line i { width: 3px; height: 3px; border-radius: 999px; background: #C9CDD6; }

  .article__cover {
    max-width: 920px;
    margin: var(--space-6) auto 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--soft);
  }
  .article__cover img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

  .prose { max-width: 720px; margin: var(--space-6) auto 0; }
  .prose > * + * { margin-top: var(--space-3); }
  .prose p { font-size: 18px; line-height: 1.7; color: var(--text); }
  .prose h2 { font-size: 26px; margin-top: var(--space-6); }
  .prose h3 { font-size: 20px; margin-top: var(--space-5); }
  .prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
  .prose ul { display: grid; gap: 10px; margin-top: var(--space-2); padding-left: 0; }
  .prose ul li { display: flex; gap: var(--space-2); font-size: 18px; line-height: 1.7; }
  .prose ul li::before {
    content: '';
    flex: 0 0 7px;
    width: 7px; height: 7px;
    margin-top: 12px;
    border-radius: 999px;
    background: var(--accent);
  }
  .prose blockquote {
    padding: var(--space-3);
    background: var(--accent-soft);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    font-size: 18px;
    line-height: 1.6;
    color: var(--ink);
  }
  .prose figure { margin-top: var(--space-5); }
  .prose figure .slot-ph { aspect-ratio: 3 / 2; }
  .prose figcaption { margin-top: var(--space-1); font-size: 14px; color: var(--muted); }
  .prose .product-fig img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 12px; }

  .practice {
    max-width: 720px;
    margin: var(--space-6) auto 0;
    padding: var(--space-4);
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: var(--radius);
  }
  .practice p { margin-top: var(--space-1); color: var(--muted); }
  .practice .btn { margin-top: var(--space-3); }

  @media (max-width: 720px) {
    .prose p, .prose ul li { font-size: 17px; }
    .practice .btn { width: 100%; }
  }
  /* =====================================================================
     v3.3 — reprise après critique (23/09/2026)
     ================================================================== */
  /* Couverture sans titre incrusté, alignée sur la colonne de texte (720 px).
     Boucle 4 : fichier de 1 800 px (fond teal clair), net sur écran Retina. */
  .article__cover { max-width: 720px; }
  /* « Passer à la pratique » : même bandeau que la fin de l'accueil
     (fond teinté, sans bordure, centré). */
  .practice.cta-band {
    max-width: 720px;
    margin: var(--space-6) auto 0;
    padding: var(--space-6) var(--space-4);
    border: 0;
    background: var(--accent-4);
  }
  .practice.cta-band .h2 { margin-inline: auto; }
  .practice.cta-band .btn { margin-top: 0; }
  .practice.cta-band p.lead { color: var(--text); }
  @media (max-width: 720px) {
    .practice.cta-band { padding: var(--space-5) var(--space-3); }
  }
  /* Veuves : dernière ligne jamais réduite à un mot. */
  .lead,
  .hero__note,
  .prose p,
  .prose figcaption,
  .guide-card__excerpt { text-wrap: pretty; }

  /* =====================================================================
     v3.3 — boucle 2 (23/09/2026, après contre-critique à 8,5)
     ================================================================== */
  /* Avant / après en HTML (à la place de l'emplacement vide) : deux cartes
     calmes ; « Après » porte un filet teal complet et un fond teinté, jamais
     de filet latéral. Une colonne sous 520 px. */
  .ex-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .prose .ex-duo__card {
    margin: 0;
    padding: 20px 22px 22px;
    border-radius: 16px;
    background: var(--soft);
    font-size: 17px;
    line-height: 1.45;
    color: var(--muted);
  }
  .prose .ex-duo__card--apres {
    background: var(--accent-6);
    box-shadow: inset 0 0 0 1px var(--accent);
    color: var(--ink);
  }
  .ex-duo__k {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .ex-duo__card--apres .ex-duo__k { color: var(--accent); }
  .prose .ex-fig figcaption { margin-top: 12px; }
  @media (max-width: 520px) {
    .ex-duo { grid-template-columns: minmax(0, 1fr); }
  }

  /* « Pour continuer » (≥ 721 px) : deux cartes centrées sur l'axe de
     l'article, 403 px au plus (boucle 4 : couvertures de 1 800 px, la limite
     ne sert plus qu'à la mise en page). */
  @media (max-width: 720px) {
    .next-guides .grid-2 { max-width: 403px; margin-inline: auto; }
  }
  @media (min-width: 721px) {
    .next-guides .section-head { margin-inline: auto; text-align: center; }
    .next-guides .section-head .eyebrow { justify-content: center; }
    .next-guides .grid-2 { max-width: 830px; margin-inline: auto; }
  }

  /* =====================================================================
     v3.3 — boucle 4 (23/09/2026, après contre-critique à 8,9)
     ================================================================== */
  /* Couvertures sur fond teal clair : fond d'attente au teal des photos,
     jamais de gris pendant le chargement. */
  .guide-card__cover,
  .featured__media,
  .article__cover { background: #6CEBD9; }
  /* Ligne « Rédaction · date · durée » : quand elle passe à la ligne (360 px
     et moins, cartes à 320 px), le point séparateur ne reste plus seul en fin
     de ligne. Chaque point est porté par l'élément qui le suit, centré dans
     l'écart de 23 px (comme avant) ; celui d'un élément qui ouvre une nouvelle
     ligne tombe à gauche de la boîte, où il est rogné. */
  .meta-line {
    column-gap: 23px;
    clip-path: inset(-6px -6px -6px 0);
  }
  .meta-line > :not(i) { position: relative; }
  .meta-line > i { display: none; }
  .meta-line > i + *::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -13px;
    width: 3px;
    height: 3px;
    margin-top: -1.5px;
    border-radius: 999px;
    background: #C9CDD6;
  }
  /* Bande « Sept outils » : jamais une pastille seule sur la dernière ligne.
     Les sept pastilles (80 · 112 · 141 · 138 · 72 · 103 · 133 px, mêmes
     largeurs sous Chromium et WebKit) tiennent sur une ligne dès 839 px de
     conteneur ; en dessous, le repli laissait « Transcriptor » seul (6 + 1 à
     768, 3 + 3 + 1 à 390). Une largeur plafonnée donne des lignes pleines :
     4 + 3 de 533 à 899 px, 2 + 2 + 3 de 360 à 532 px (écart de 8 px, 4 px de
     marge), 2 + 1 + 2 + 2 sous 360 px. */
  /* Verbe et pronom liés par un trait d'union (« ajoutez-le », « correspond-il »,
     « est-elle ») : WebKit coupait au trait (« ajoutez- / le. ») et laissait le
     pronom seul en tête de ligne. */
  .nw { white-space: nowrap; }
  @media (max-width: 532px) { .tools { gap: 8px; } }
  @media (max-width: 359px) { .tools { max-width: 280px; } }
  @media (min-width: 360px) and (max-width: 532px) { .tools { max-width: 340px; } }
  @media (min-width: 533px) and (max-width: 899px) { .tools { max-width: 540px; } }
  .mobile-panel__cta { margin-bottom: 0; }
  /* Le libellé caché des liens « Lire le guide » reste dans sa carte (carrousel des guides). */
  .guide-card .link-arrow { position: relative; }
  .mobile-panel .mobile-panel__cta + .btn--block { margin-top: 12px; }

  /* ---------------------------------------------------------------------
     Corrections après contrôle (24/09/2026) : rails de lecture ≥ 1 100 px.
     Le texte n'est plus centré à 360 px du bord (décalé du héros calé à
     144 px) : il s'aligne sur le héros (8/12) et la colonne droite (4/12)
     reçoit le sommaire et une carte, collants. En dessous : inchangé.
     ------------------------------------------------------------------ */
  .read-card { display: none; }
  @media (min-width: 1100px) {
    .read-grid {
      display: grid;
      grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
      column-gap: clamp(48px, 5vw, 88px);
      align-items: start;
    }
    .read-grid > * { grid-column: 1 / -1; }
    .read-grid > .article__head { max-width: 720px; margin-inline: 0; }
    .read-grid > .prose { grid-column: 1; grid-row: 2; max-width: 720px; margin-inline: 0; }
    .read-grid > .read-side {
      grid-column: 2;
      grid-row: 2;
      position: sticky;
      top: 96px;
      display: grid;
      gap: 16px;
      margin-top: var(--space-6);
    }
    .read-side .toc { max-width: none; margin: 0; }
    .read-card {
      display: grid;
      gap: 12px;
      padding: 24px;
      border-radius: 20px;
      background: var(--accent-soft, #E7F4F3);
    }
    .read-card__k {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--accent);
    }
    .read-card__t { font-size: 17px; line-height: 1.5; color: var(--ink); }
    .read-card__btn { justify-content: center; width: 100%; }
    .read-card__link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 32px;
      font-weight: 600;
      color: var(--accent);
    }
    .read-card--legal ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
    .read-card--legal a {
      display: flex;
      align-items: center;
      min-height: 36px;
      color: var(--ink);
      font-weight: 600;
      text-decoration: none;
    }
    .read-card--legal a:hover,
    .read-card--legal a[aria-current="page"] { color: var(--accent); }
  }