/* Blog (blog.html). */

  /* --------------------------- blog.html --------------------------- */
  .page-head { max-width: 720px; }
  .page-head > * + * { margin-top: var(--space-2); }

  .featured {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: var(--space-8);
    align-items: center;
  }
  .featured__media {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--soft);
  }
  .featured__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

  .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; }

  .cta-soft {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-6);
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: var(--radius);
  }
  .cta-soft__text { max-width: 56ch; }
  .cta-soft__text p { margin-top: var(--space-1); color: var(--muted); }

  @media (max-width: 900px) {
    .featured { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  }
  @media (max-width: 720px) {
    .cta-soft { padding: var(--space-4); }
    .cta-soft .btn { width: 100%; }
  }
  /* =====================================================================
     v3.3 — reprise après critique (23/09/2026)
     ================================================================== */
  /* Tablette (721–1 000 px) : l'en-tête garde ses deux colonnes (texte,
     photo) au lieu d'empiler une photo de 480 px au-dessus de la
     couverture « À la une » : un seul grand visuel par écran. */
  @media (min-width: 721px) and (max-width: 1000px) {
    .head-visual { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--space-4); }
  }
  /* Bandeau final : celui de l'accueil (fond teinté, sans bordure, centré). */
  .cta-band .h2 { margin-inline: auto; }
  /* Veuves : dernière ligne jamais réduite à un mot. */
  .lead,
  .hero__note,
  .section-head p,
  .guide-card__excerpt { text-wrap: pretty; }

  /* =====================================================================
     v3.3 — boucle 2 (23/09/2026, après contre-critique à 8,5)
     ================================================================== */
  /* Téléphone : un seul grand visuel par écran. La photo d'en-tête s'efface,
     la couverture « À la une » reste le premier visuel (même règle que
     tarifs.html). */
  @media (max-width: 720px) {
    .head-visual__media { display: none; }
  }
  /* « Tous les guides » (≥ 721 px) : tête et deux cartes centrées, 403 px au
     plus : la page respire après la carte « À la une » (boucle 4 : couvertures
     de 1 800 px, la limite ne sert plus qu'à la mise en page). */
  /* Couverture « À la une » au format du fichier (16:10, 1 800 × 1 125) : jamais
     recadrée, jamais agrandie. Photo d'en-tête (960 px de large) : 480 px au
     plus sur ordinateur, donc nette sur écran Retina. */
  .featured__media img { aspect-ratio: 16 / 10; }
  @media (min-width: 1001px) {
    .head-visual__media { width: 100%; max-width: 480px; justify-self: end; }
  }
  @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 .section-head p { margin-inline: auto; }
    .next-guides .grid-2 { max-width: 830px; margin-inline: auto; }
  }

  /* =====================================================================
     v3.3 — boucle 3 (23/09/2026) : en-tête en couleur
     ================================================================== */
  /* L'affiche de la section ambiance de l'accueil, cadrée sur le bureau et la
     plante, rayon du kit ambiance (24 px). Fond d'attente au teal du mur :
     jamais de gris pendant le chargement. Toujours masquée sous 720 px. */
  .head-visual__media--amb { border-radius: 24px; background: #014C4E; }
  .head-visual__media--amb img { object-position: 92% 62%; }

  /* =====================================================================
     v3.3 — boucle 3, correction (23/09/2026, après critique à 8,6)
     ================================================================== */
  /* Coins de l'affiche : en bas à droite, le bureau blanc au soleil touchait
     l'arrondi et le contour se perdait sur la page blanche ; le fond teal du
     conteneur débordait en anticrénelage sur l'arc. Même règle que le
     panneau d'ambiance de l'accueil : fond d'attente teal porté par l'image
     (plus par le conteneur) et liseré intérieur neutre à 7 %, sans ombre,
     invisible sur le mur teal. */
  .head-visual__media--amb { position: relative; background: none; }
  .head-visual__media--amb img { background: #014C4E; }
  .head-visual__media--amb::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(17, 24, 39, .07);
    pointer-events: none;
  }

  /* =====================================================================
     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. */
  @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; }
  .featured__title-link { color: inherit; text-decoration: none; }
  .featured__title-link:hover { text-decoration: underline; text-underline-offset: 4px; }
  @media (max-width: 1000px) { .featured__media img { object-position: 18% 50%; } }