/* ============================================================
   GALERIES HUMOUR — FEUILLE UNIQUE
   Humour, bonne journée, bonne nuit, bon week-end, bon lundi.
   Les CSS généraux du site restent chargés séparément.
   ============================================================ */

/* 1. Visionneuse plein écran */
.page-citations-images .citation-image-viewer[open] {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: #000;
}

.page-citations-images .citation-image-viewer::backdrop { background: #000; }

.page-citations-images .citation-image-viewer img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border: 0;
  border-radius: 0;
}

.page-citations-images .citation-image-viewer-close {
  position: fixed;
  z-index: 10;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  width: 44px;
  height: 44px;
  border: 1px solid #777;
  border-radius: 50%;
  color: #fff;
  background: rgba(0, 0, 0, .7);
}

/* 2. En-têtes : réglages communs */

:is(body.page-humour-images, body.page-bonne-journee-humour-images, body.page-bonne-nuit-humour-images, body.page-bon-week-end-humour-images, body.page-bon-dimanche-humour-images) { --entete-image-mobile-ratio: 1800 / 945; }

:is(body.page-humour-images, body.page-bonne-journee-humour-images, body.page-bonne-nuit-humour-images, body.page-bon-week-end-humour-images, body.page-bon-dimanche-humour-images) main .entete-titre em { color: #ff7c78 !important; }
:is(body.page-humour-images, body.page-bonne-journee-humour-images, body.page-bonne-nuit-humour-images, body.page-bon-week-end-humour-images, body.page-bon-dimanche-humour-images) main .entete-surtitre { color: #ffd990 !important; }

@media (min-width: 901px) {
  :is(body.page-humour-images, body.page-bonne-journee-humour-images, body.page-bonne-nuit-humour-images, body.page-bon-week-end-humour-images, body.page-bon-dimanche-humour-images) main > section.rubrique-entete {
    height: clamp(420px, 41.667vw, 700px) !important;
    min-height: 0 !important;
  }

  :is(body.page-humour-images, body.page-bonne-journee-humour-images, body.page-bonne-nuit-humour-images, body.page-bon-week-end-humour-images, body.page-bon-dimanche-humour-images) main > section.rubrique-entete .entete-photo-ordinateur {
    object-fit: contain !important;
    object-position: right center !important;
    background: #05242b !important;
  }

  :is(body.page-humour-images, body.page-bonne-journee-humour-images, body.page-bonne-nuit-humour-images, body.page-bon-week-end-humour-images, body.page-bon-dimanche-humour-images) main > section.rubrique-entete::before {
    background: linear-gradient(90deg, #05242beb 0%, #05242b99 33%, transparent 65%) !important;
  }

  :is(body.page-humour-images, body.page-bonne-journee-humour-images, body.page-bonne-nuit-humour-images, body.page-bon-week-end-humour-images, body.page-bon-dimanche-humour-images) main > section.rubrique-entete .entete-copie {
    margin: 0 auto 0 5% !important;
    width: 34% !important;
  }

  body.page-humour-images main > section.rubrique-entete .entete-copie { width: 40% !important; }

  /* Le visuel Bon week-end est composé avec le texte à droite. */
  body.page-bon-week-end-humour-images main > section.rubrique-entete .entete-photo-ordinateur {
    width: 100% !important;
    height: 100% !important;
    object-position: left center !important;
  }

  body.page-bon-week-end-humour-images main > section.rubrique-entete::before {
    background: linear-gradient(90deg, transparent 35%, #05242b22 55%, #05242b99 75%) !important;
  }

  body.page-bon-week-end-humour-images main > section.rubrique-entete .entete-copie {
    position: relative;
    width: 36% !important;
    margin: 0 4% 0 auto !important;
  }
}

/* 3. Mobile : image au-dessus du texte, sans hauteur forcée */
@media (max-width: 900px) {
  :is(body.page-humour-images, body.page-bonne-journee-humour-images, body.page-bonne-nuit-humour-images, body.page-bon-week-end-humour-images, body.page-bon-dimanche-humour-images) main > section.rubrique-entete {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
    background: #05242b !important;
  }

  :is(body.page-humour-images, body.page-bonne-journee-humour-images, body.page-bonne-nuit-humour-images, body.page-bon-week-end-humour-images, body.page-bon-dimanche-humour-images) main > section.rubrique-entete .entete-photo-mobile {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1800 / 945;
    object-fit: contain !important;
  }

  :is(body.page-humour-images, body.page-bonne-journee-humour-images, body.page-bonne-nuit-humour-images, body.page-bon-week-end-humour-images, body.page-bon-dimanche-humour-images) main > section.rubrique-entete .entete-photo-ordinateur { display: none !important; }

  :is(body.page-humour-images, body.page-bonne-journee-humour-images, body.page-bonne-nuit-humour-images, body.page-bon-week-end-humour-images, body.page-bon-dimanche-humour-images) main > section.rubrique-entete .entete-copie {
    position: relative !important;
    width: 100% !important;
    box-sizing: border-box;
    margin: 0 !important;
    padding: 25px 22px 32px !important;
    transform: none !important;
  }

  :is(body.page-humour-images, body.page-bonne-journee-humour-images, body.page-bonne-nuit-humour-images, body.page-bon-week-end-humour-images, body.page-bon-dimanche-humour-images) main > section.rubrique-entete::before { display: none !important; }
}

/* 4. Bandeau commun : quatre rubriques sur une ligne sur ordinateur */
.humour-collections-links.citations-images-links {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(1120px, calc(100% - 32px));
  max-width: 1120px;
  margin-inline: auto;
  gap: 12px;
}

.humour-collections-links.citations-images-links > a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 16px 10px;
}

.humour-collections-links.citations-images-links > a strong {
  font-size: clamp(12px, 1vw, 16px);
  white-space: nowrap;
}

@media (min-width: 620px) and (max-width: 999px) {
  .humour-collections-links.citations-images-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 619px) {
  .humour-collections-links.citations-images-links {
    grid-template-columns: 1fr;
  }
  .humour-collections-links.citations-images-links > a strong {
    font-size: 15px;
    white-space: normal;
  }
}

/* 5. Pagination : les blocs .collection-* sont gérés uniquement
      par collections-pagination.css (pas de doublon ici). */

/* 6. Compatibilité avec les anciens numéros de page */
:is(.humour-pages, .bonne-journee-humour-pages, .bonne-nuit-humour-pages,
    .bon-week-end-humour-pages, .bon-lundi-humour-pages) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 1100px;
  margin: 22px auto 40px;
  padding: 0 20px;
}

:is(.humour-pages, .bonne-journee-humour-pages, .bonne-nuit-humour-pages,
    .bon-week-end-humour-pages, .bon-lundi-humour-pages) :is(a, span) {
  padding: 9px 13px;
  border: 1px solid #ff7c7870;
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
}

:is(.humour-pages, .bonne-journee-humour-pages, .bonne-nuit-humour-pages,
    .bon-week-end-humour-pages, .bon-lundi-humour-pages) [aria-current="page"] {
  background: #ff7c78;
  color: #071f26;
  font-weight: 700;
}

html body.page-bon-dimanche-humour-images,html body.page-bon-dimanche-humour-images *{text-transform:none!important;font-variant:normal!important;}