/* Affiches en entier (07/10/2026).
   Les vignettes d’actualités et d’événements sont presque toutes des affiches A4 en portrait (les 41 événements,
   trois actualités sur quatre, importés d’IntraMuros) et les cartes, dessinées pour des photos en paysage, n’en
   montraient qu’une bande : de 18 à 48 % de l’affiche selon les blocs. Demande de Dorian : « augmenter la hauteur
   des affiches afin de mieux les voir en entier », d’abord sur l’accueil mobile, puis « pareil de partout ».

   Montage commun : l’image reprend sa place dans le flux à sa propre proportion, calée en haut (le titre de
   l’affiche reste visible si elle est rognée) ; proportion A4 tant que l’image n’est pas chargée, pour qu’une
   affiche ne fasse pas sauter la page ; au plus une A4 sur la largeur de la carte (et 600 px, téléphone tenu en
   paysage) pour qu’une affiche plus élancée ne donne pas une carte démesurée ; au moins 160 px pour une photo en
   paysage, qui reste entière dans un cadre bas.

   Blocs concernés : accueil (actualités ac_, agenda ag_v_ / ag_l_), page Actualités (À la une p154_s2, Dernières
   actualités p154_s16, agenda p154_s5), « Autres événements » et « Dernières actualités » des fiches (evt_der,
   art_der), cartes [roq_evenements] (Vie associative), archives du gabarit de repli, fenêtre de la page Agenda.
   Les sélecteurs commencent par « body » pour passer devant les styles des documents CrocoBuilder, d’accueil.css
   et d’evenements-cartes.css (imprimée en pied de page, donc après cette feuille). */

@media (max-width: 767px) {
  body :is(.cb-ac_img, .cb-ag_v_img, .cb-ag_l_img, .cb-p154_s2_c_img, .cb-p154_s16_c_img, .cb-p154_s5_ag_v_img, .cb-p154_s5_ag_l_img, .cb-evt_der_img, .cb-art_der_img, .rq-evts__visuel img, .rq-natif__carte:is(.type-post, .type-evenement) img) {
    height: auto; aspect-ratio: auto 768 / 1086; min-height: 160px; max-height: min(calc((100vw - 40px) * 1.415), 600px);
    object-fit: cover; object-position: 50% 0;
  }

  /* Agenda « vedette + liste » (accueil et page Actualités) : l’image couvrait toute la carte et le panneau blanc
     se posait dessus (accueil.css) ; il en cachait le bas. L’image repasse au-dessus du panneau, seuls la rubrique
     et la flèche mordent encore dessus. */
  body :is(.cb-ag_v_lien, .cb-ag_l_lien, .cb-p154_s5_ag_v_lien, .cb-p154_s5_ag_l_lien) { padding-top: 0; }
  body :is(.cb-ag_v_media, .cb-ag_l_media, .cb-p154_s5_ag_v_media, .cb-p154_s5_ag_l_media) { position: relative; inset: auto; }
  body :is(.cb-ag_v_panneau, .cb-ag_l_panneau, .cb-p154_s5_ag_v_panneau, .cb-p154_s5_ag_l_panneau) { margin-top: 0; }

  /* Page Actualités : le cadre de l’image avait 200 px de haut ; il suit maintenant l’image. */
  body :is(.cb-p154_s2_c_media, .cb-p154_s16_c_media) { height: auto; }

  /* [roq_evenements] : l’affiche passe au-dessus du texte, comme sous 375 px depuis le 02/10 ; à 112 px de large
     sur le côté, elle restait illisible. Le cadre garde 160 px pour la carte sans affiche (aplat rouge). */
  body .rq-evts__item { flex-direction: column; }
  body .rq-evts__visuel { width: 100%; aspect-ratio: auto; min-height: 160px; }

  /* Fenêtre de la page Agenda : l’affiche y est déjà entière (contain), mais en 170 px de haut. */
  body .rq-agenda__fiche-visuel { height: min(380px, 46dvh); }
}

/* ---------- Ordinateur et tablette (≥ 768 px), validé par Dorian le 07/10/2026 ----------
   Même principe que sur téléphone, avec des cartes plus étroites : au palier tablette (jusqu’à 1455 px, donc les
   portables en 1366 et 1440), les grilles de CrocoBuilder passaient à deux colonnes de 662 px, où une affiche
   entière aurait fait 940 px de haut. Les cartes passent en rangées de quatre dès 1024 px (deux en dessous), et
   l’agenda « à la une + liste » devient une rangée de quatre affiches : la vedette (un bandeau de 1344 × 435 px à
   1440 px) et les vignettes de liste (250 × 170 px) ne montraient qu’un quart à la moitié de l’affiche.
   Pour revenir à l’ancien affichage sur ordinateur, retirer ce bloc entier : rien d’autre n’en dépend. */
@media (min-width: 768px) {
  body :is(.cb-ac_img, .cb-ag_v_img, .cb-ag_l_img, .cb-p154_s2_c_img, .cb-p154_s16_c_img, .cb-p154_s5_ag_v_img, .cb-p154_s5_ag_l_img, .cb-evt_der_img, .cb-art_der_img, .rq-evts__visuel img, .rq-natif__carte:is(.type-post, .type-evenement) img) {
    position: static; inset: auto; width: 100%; height: auto; aspect-ratio: auto 768 / 1086; min-height: 160px; max-height: 560px;
    object-fit: cover; object-position: 50% 0;
  }
  body :is(.cb-p154_s2_c_media, .cb-p154_s16_c_media) { height: auto; }

  /* Agenda : les deux boucles (vedette, liste) s’effacent pour que leurs quatre cartes deviennent les cases d’une
     même grille. Le !important est obligatoire : CrocoBuilder écrit display: grid dans l’attribut style de la piste
     de chaque boucle, qui passe devant toute règle de feuille de style. */
  body :is(.cb-ag_grid, .cb-p154_s5_ag_grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; align-items: stretch; }
  body :is(.cb-ag_vedette, .cb-ag_liste, .cb-p154_s5_ag_vedette, .cb-p154_s5_ag_liste),
  body :is(.cb-ag_vedette, .cb-ag_liste, .cb-p154_s5_ag_vedette, .cb-p154_s5_ag_liste) > .cb-collection__items { display: contents !important; }
  body :is(.cb-ag_v_lien, .cb-ag_l_lien, .cb-p154_s5_ag_v_lien, .cb-p154_s5_ag_l_lien) { display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; padding-top: 0; width: 100%; height: 100%; box-shadow: var(--ombre-carte); }
  body :is(.cb-ag_v_media, .cb-ag_l_media, .cb-p154_s5_ag_v_media, .cb-p154_s5_ag_l_media) { position: relative; inset: auto; width: 100%; min-height: 0; flex: none; }
  body :is(.cb-ag_v_panneau, .cb-ag_l_panneau, .cb-p154_s5_ag_v_panneau, .cb-p154_s5_ag_l_panneau) { margin: 0; min-height: 0; flex: 1 1 auto; align-self: stretch; padding: 0 20px 22px; }
  /* La vedette devient une carte comme les autres : pavé de date en haut, titre et texte au corps de la liste. */
  body :is(.cb-ag_v_dates, .cb-p154_s5_ag_v_dates) { top: 0; }
  body :is(.cb-ag_v_titre, .cb-p154_s5_ag_v_titre) { font-size: 19px; line-height: 23px; }
  body :is(.cb-ag_v_texte, .cb-ag_l_texte, .cb-p154_s5_ag_v_texte, .cb-p154_s5_ag_l_texte) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-size: 15px; line-height: 22px; }

  /* [roq_evenements] : l’affiche au-dessus du texte à toutes les largeurs (elle était couchée à gauche, 170 px). */
  body .rq-evts__item { flex-direction: column; }
  body .rq-evts__visuel { width: 100%; aspect-ratio: auto; min-height: 160px; }

  /* Fenêtre de la page Agenda : 220 px de haut. */
  body .rq-agenda__fiche-visuel { height: min(420px, 50vh); }
}
@media (min-width: 1024px) {
  body :is(.cb-ag_grid, .cb-p154_s5_ag_grid) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body :is(.cb-ac_loop, .cb-p154_s2, .cb-p154_s16, .cb-evt_der_loop, .cb-art_der_loop) > .cb-collection__items { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body .rq-evts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* Extraits des actualités : trois lignes, pour que l’affiche reste l’essentiel de la carte. */
  body :is(.cb-ac_extrait, .cb-p154_s2_c_ext, .cb-p154_s16_c_ext, .rq-natif__extrait) { -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
}