/*
 * Bundle website: the look of the Bundle pages from before they had a doctype.
 *
 * Until 2026-10 the 14 Bundle page templates started without <!DOCTYPE html>, so browsers drew
 * them in "quirks mode", and the design was made that way. With the doctype (standards mode,
 * SEO-H) a few browser rules change; each rule below gives back the quirks-mode result, so the
 * pages look exactly as before. Loaded on those 14 templates only (views/head.xml), not on the
 * pages that already had a doctype (login, signup, password reset, portal).
 */

/* Tables don't inherit the page's font settings in quirks mode: same rows, same spacing */
.article-table {
  line-height: normal;
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
  white-space: normal;
}

/* Forms have a 1em bottom margin in quirks mode (browser default, hence :where(): any rule of
   the theme still wins, as before) */
:where(form) {
  margin-bottom: 1em;
}

/* In quirks mode a line that holds only an icon (no text) gets no line height of its own, so
   these boxes are as tall as their icon */
.bi,
.lang-switch-btn .bi,
.astuces-arrow,
.social-icons a,
.nav-wishlist,
.filter-clear,
.avantages-image {
  line-height: 0;
}

/* Box with only an image: no text baseline either while the image is still loading */
.avantages-image {
  font-size: 0;
}

/* Same for a form field alone on its line: no space under the comment field */
.contact-textarea {
  vertical-align: top;
}

/* Home category slider. In quirks mode the photos' "height: 100%" took the height of the whole
   slider column (.categorie-slider-wrapper), so they were taller than the 2:3 ratio of
   .categorie-img by K, and the slider ran past its column, which cuts it off (dots included).
   Same here: photo = 2:3 height (600px at most) + K, and the slider gives the extra height back
   with a negative margin, so the column keeps its height and still cuts the slider off.
   K = label (min-height 55px; one 28px line up to 768px) + its margins + the dots: 117px / 90px.
   Card width: Owl's (column + 35px margin) / cards per slide - 35px (interactions.js). */
.categorie-slider-wrapper {
  container-type: inline-size;
  --bw-cat-k: 117px;
  --bw-cat-items: 1;
}

@media (max-width: 768px) {
  .categorie-slider-wrapper { --bw-cat-k: 90px; }
}

@media (min-width: 768px) {
  .categorie-slider-wrapper { --bw-cat-items: 2; }
}

@media (min-width: 992px) {
  .categorie-slider-wrapper { --bw-cat-items: 3; }
}

@media (min-width: 1200px) {
  .categorie-slider-wrapper { --bw-cat-items: 4; }
}

.categorie-slider.owl-carousel {
  --bw-cat-width: calc((100cqw + 35px) / var(--bw-cat-items) - 35px);
  margin-bottom: calc(-1 * min(var(--bw-cat-k), max(0px, 600px - 1.5 * var(--bw-cat-width))));
}

.categorie-img-wrap {
  container-type: inline-size;
}

.categorie-img {
  aspect-ratio: auto;
  height: calc(min(150cqw, 600px) + var(--bw-cat-k));
}