/* Gestion by Belentia, DA v3.3 : styles de la page « blog, après affine et v32 », repris tels quels de la maquette blog.html (24/09/2026). */
/* Boucle 3, correction (23/09) : jusqu'à 900 px, le carnet blanc sur fond
     blanc occupait tout le premier écran (310 px de haut à 390, 720 × 450 à
     768) et repoussait la seule couleur de la page. Il disparaît : la
     couverture menthe « À la une » remonte dans le premier écran. Au-dessus
     de 900 px, il reste à côté du titre (en-tête en deux colonnes). */
  @media (max-width: 900px) {
    .page-head .head-visual--menthe { display: none; }
  }
  /* Boucle 4 : au-dessus de 900 px, le carnet sur fond menthe (3:2, entier,
     coins 24 px), à côté du titre. De 901 à 1 199 px, titre à 42 px et
     colonne de texte de 520 px : le visuel garde 290 à 480 px de large (il
     tombait à 165 px à 901). */
  @media (min-width: 901px) {
    .page-head .head-visual--menthe {
      margin-top: 0;
      aspect-ratio: 3 / 2;
      width: 100%;
      max-width: 480px;
      justify-self: end;
      border-radius: var(--r-media, 24px);
      background: #ABEBCD;
    }
    .page-head .head-visual--menthe img { width: 100%; height: 100%; object-fit: cover; }
    .page-head .container { gap: var(--space-6); }
  }
  @media (min-width: 901px) and (max-width: 1199px) {
    .page-head .container { grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 40px; }
    .page-head .h1 { font-size: 42px; }
  }
  /* Titre du guide à la une sous 720 px : « d’un week-end entre amis » tient
     sur une ligne dès 360 px (25 px à 360, 27 à 390). */
  @media (max-width: 720px) {
    .feature__body .h2 { font-size: clamp(24px, 7vw, 27px); }
  }
  /* Boucle 5 (24/09) : premier écran mobile vivant. L'image d'en-tête dérive très
     lentement (1 → 1,05 en 16 s, aller-retour), sans vidéo ; fixe en mouvement réduit.
     Propriété scale : se compose avec le balayage du kit sans le remplacer. */
  @keyframes gx-derive { from { scale: 1; } to { scale: 1.05; } }
  @media (prefers-reduced-motion: no-preference) {
    .feature__cover { animation: gx-derive 16s ease-in-out infinite alternate; }
  }