/**
 * @file
 * Points de rupture. Chargés en dernier (groupe « theme »).
 *
 * 1100px : 3 colonnes → 2
 *  860px : passage en colonne unique des blocs jumelés, menu mobile
 *  640px : mobile, mosaïques empilées
 */

@media (max-width: 1100px) {
  .hero-grid {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }

  /* Le fil « En continu » passe sous la une, sur trois colonnes. */
  .hero-grid > .region--hero-stream {
    order: 3;
    grid-column: 1 / -1;
  }

  .hero-grid .stream ol,
  .hero-grid .stream ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 24px;
  }

  .hero-grid .stream li {
    padding-top: 13px;
    border-top: var(--ccd-rule);
  }

  .feature-grid {
    grid-template-columns: 1fr 1fr;
  }

  .feature-grid > :first-child {
    grid-column: 1 / -1;
  }

  .mosaic {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 210px);
  }

  .mosaic__cell--xl {
    grid-row: span 1;
    grid-column: span 2;
  }

  .magazine {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer__cols {
    grid-template-columns: 1fr 1fr;
  }

  .ad-slot--header {
    display: none;
  }

  .page-content--sidebar {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 860px) {
  .topbar .region nav,
  .topbar .region .menu {
    display: none;
  }

  /* Retour au flux par ligne : en colonne unique, `grid-auto-flow: column`
     recréerait autant de colonnes qu'il y a de blocs dans la région. */
  .duo,
  .trio,
  .subscribe .wrap {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-flow: row;
    gap: 34px;
  }

  /* Vedette et brèves d'une même rubrique restent accolées une fois
     empilées. Voir zones.css : on vise .block, la région intermédiaire
     étant en display:contents. */
  .duo .block:nth-child(even),
  .trio .block:nth-child(even) {
    margin-top: -34px;
  }

  .lead__sub {
    grid-template-columns: 1fr;
  }

  .lead__sub > * + * {
    border-top: var(--ccd-rule);
    border-left: 0;
  }

  .hero-grid .stream ol,
  .hero-grid .stream ul {
    grid-template-columns: 1fr;
  }

  .masthead .wrap {
    flex-wrap: wrap;
    gap: 16px;
  }

  .masthead input[type="search"],
  .masthead input[type="text"] {
    width: 100%;
  }

  /* Menu mobile piloté par js/mainnav.js */
  .mainnav__toggle {
    display: block;
  }

  .mainnav .wrap {
    flex-wrap: wrap;
  }

  .mainnav .region--primary-menu {
    flex-basis: 100%;
  }

  .mainnav ul {
    display: none;
    flex-direction: column;
    align-items: stretch;
  }

  .mainnav.is-open ul {
    display: flex;
  }

  .mainnav li {
    border-top: var(--ccd-rule);
  }

  .mainnav a::after {
    display: none;
  }
}

@media (max-width: 640px) {
  .hero-grid,
  .feature-grid,
  .magazine {
    grid-template-columns: 1fr;
  }

  .mosaic {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 200px);
  }

  .mosaic__cell--xl,
  .mosaic__cell--wide,
  .tile--xl,
  .tile--wide {
    grid-row: span 1;
    grid-column: span 1;
  }

  .mosaic__cell--xl h4,
  .tile--xl h4 {
    font-size: 21px;
  }

  .trio {
    grid-template-columns: 1fr;
  }

  .footer__cols {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .footer__bottom .region {
    margin-left: 0;
  }

  /* La date longue se casse en trois lignes sous 640 px et déforme la
     barre de service : les liens et la connexion priment. */
  .topbar__date {
    display: none;
  }

  .site-brand__name {
    font-size: 32px;
  }

  .sechead h2 {
    font-size: 21px;
  }

  .band {
    padding: 34px 0;
  }
}