/* DESIGN MAGAZINE: responsive pass on the Inspiration pages (Romain 01/10 22 h: « très belle sur mobile, mais pas
   assez responsive »). Loaded AFTER assets/css/inspiration.css (agent Inspiration, untouched) on the section and its
   articles only (inc/design-mag.php). Checked at 360, 390, 430, 768 and 1024 px. */

/* À la une: on a phone the title no longer sits in a white box over the picture */
@media (max-width: 720px) {
  .im-une-texte h2 { margin: 0.4rem 0 0; padding: 0; max-width: none; width: auto; background: none; }
  .im-une .im-wrap { row-gap: 1rem; }
}

/* Palmarès cards: a lone card never sits in half the width; on a phone, picture beside the text */
@media (max-width: 720px) {
  .im-palmares { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
  .im-palmares .im-carte:nth-child(n) { margin-top: 0; }
  .im-palmares .im-carte { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); column-gap: 1rem; align-items: end; }
  .im-palmares .im-carte > .im-visuel { grid-row: 1 / span 4; }
}

/* Colours: 2 columns made 160 px discs; 3 on phones, 4 on tablets */
@media (max-width: 520px) { .im-palette { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem 0.8rem; } }
@media (max-width: 340px) { .im-palette { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.im-teinte span:last-child { overflow-wrap: anywhere; }

/* Article: the 18 thumbnails were 6 tiny columns (and a long name pushed a picture over its neighbour) */
.ia-vignettes a { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 520px) {
  .ia-vignettes { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 4.6rem; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 0.4rem; scrollbar-width: none; }
  .ia-vignettes::-webkit-scrollbar { display: none; }
  .ia-vignettes li { scroll-snap-align: start; }
  .ia-vignettes a { font-size: 0.72rem; }
}

/* Article on tablets (600 to 900 px): picture and text side by side again, the close-up under the text,
   instead of a portrait photo taller than the screen */
@media (min-width: 600px) and (max-width: 900px) {
  .ia-canape .ia-photo { grid-column: 1 / 7; grid-row: 1 / 3; }
  .ia-canape .ia-texte { grid-column: 7 / 13; grid-row: 1; }
  .ia-canape .ia-serre { grid-column: 8 / 13; grid-row: 2; }
  .ia-inverse .ia-photo { grid-column: 7 / 13; }
  .ia-inverse .ia-texte { grid-column: 1 / 7; }
  .ia-inverse .ia-serre { grid-column: 1 / 6; }
  .ia-accroche { font-size: 1.35rem; }
}

/* Buttons: full width on phones, 44 px targets, never a broken label */
@media (max-width: 520px) {
  .ia-boutons { display: grid; grid-template-columns: minmax(0, 1fr); }
  .ia-boutons > a, .im-une-texte .cta, .im-une-texte a[class*="cta"] { width: 100%; min-height: 46px; justify-content: center; text-align: center; }
}
.ia-boutons > a { min-height: 44px; }