/**
 * Home mosaic — cases égales + images cover (chargé hors CCC, cache-bust).
 * 2026-11-03
 */
#index {
  --home-mosaic-h: 380px;
}

/* Texte mosaic — cases figées → 15/24 lisibles sans casser la jointure */
#index .block.description-home-resize.ApHtml,
#index .block.description-home-resize.ApHtml p {
  font-size: 15px !important;
  line-height: 1.4 !important;
}
#index .block.description-home-resize.ApHtml .title_block {
  font-size: 24px !important;
  line-height: 1.25 !important;
  margin-bottom: 10px !important;
}
#index .block.description-home-resize.ApHtml .btn-lg {
  font-size: 14px !important;
}
#index .block.description-home-resize.ApHtml .block_content p {
  margin-top: 0.4em !important;
  margin-bottom: 0.4em !important;
}

@media (min-width: 992px) {
  /* Annuler wrappers / gutters entre les 4 rangées */
  #index .wrapper:has(.bijoux-ethniques-miao.ApImage),
  #index .wrapper:has(.vestes-exception.ApImage),
  #index .wrapper:has(.accessoires-bohemes.ApImage),
  #index .wrapper:has(.etoffes-indiennes.ApImage),
  #index .wrapper:has(.description-home-resize) {
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
  }

  #index .box-categories.ApRow,
  #index .box-categories > .ApRow,
  #index .ApRow:has(.bijoux-ethniques-miao.ApImage),
  #index .ApRow:has(.vestes-exception.ApImage),
  #index .ApRow:has(.accessoires-bohemes.ApImage),
  #index .ApRow:has(.etoffes-indiennes.ApImage) {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: var(--home-mosaic-h) !important;
    grid-auto-rows: var(--home-mosaic-h) !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: none !important;
    align-items: stretch !important;
  }

  /* Bootstrap .row clearfix (::before/::after) = fausse 2e rangée grille (trou 420px) */
  #index .box-categories.ApRow::before,
  #index .box-categories.ApRow::after,
  #index .box-categories > .ApRow::before,
  #index .box-categories > .ApRow::after,
  #index .ApRow:has(.bijoux-ethniques-miao.ApImage)::before,
  #index .ApRow:has(.bijoux-ethniques-miao.ApImage)::after,
  #index .ApRow:has(.vestes-exception.ApImage)::before,
  #index .ApRow:has(.vestes-exception.ApImage)::after,
  #index .ApRow:has(.accessoires-bohemes.ApImage)::before,
  #index .ApRow:has(.accessoires-bohemes.ApImage)::after,
  #index .ApRow:has(.etoffes-indiennes.ApImage)::before,
  #index .ApRow:has(.etoffes-indiennes.ApImage)::after {
    content: none !important;
    display: none !important;
  }

  /* container Bootstrap : pas de padding latéral sur ces rangées */
  #index .container.row.box-categories,
  #index .container.row.box-categories.ApRow {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #index .box-categories.ApRow > .ApColumn,
  #index .box-categories > .ApRow > .ApColumn,
  #index .ApRow:has(.bijoux-ethniques-miao.ApImage) > .ApColumn,
  #index .ApRow:has(.vestes-exception.ApImage) > .ApColumn,
  #index .ApRow:has(.accessoires-bohemes.ApImage) > .ApColumn,
  #index .ApRow:has(.etoffes-indiennes.ApImage) > .ApColumn {
    /* IMPORTANT : pas de width:100% (sinon 1 case par rangée = images non jointives) */
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: none !important;
    padding: 0 !important;
    margin: 0 !important;
    height: var(--home-mosaic-h) !important;
    max-height: var(--home-mosaic-h) !important;
    min-height: 0 !important;
    overflow: hidden !important;
    position: relative !important;
  }

  #index .bijoux-ethniques-miao.ApImage,
  #index .vestes-exception.ApImage,
  #index .accessoires-bohemes.ApImage,
  #index .etoffes-indiennes.ApImage {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Écraser les style="" inline width:567px; height:auto */
  #index .bijoux-ethniques-miao.ApImage img,
  #index .vestes-exception.ApImage img,
  #index .accessoires-bohemes.ApImage img,
  #index .etoffes-indiennes.ApImage img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
  }

  #index .box-categories .description-home-resize,
  #index .ApRow:has(.bijoux-ethniques-miao.ApImage) .description-home-resize,
  #index .ApRow:has(.vestes-exception.ApImage) .description-home-resize,
  #index .ApRow:has(.accessoires-bohemes.ApImage) .description-home-resize,
  #index .ApRow:has(.etoffes-indiennes.ApImage) .description-home-resize {
    margin: 0 !important;
    padding: 24px 32px !important;
    height: 100% !important;
    max-height: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    overflow: hidden !important;
  }
}

@media (min-width: 1200px) {
  #index {
    --home-mosaic-h: 420px;
  }
}