.pageArticlesRangePage {
  margin-top: 1rem;
  margin-bottom: 4.5rem;

  .pageArticlesRangePage--banner {
    position: relative;
    padding: 5rem 0;

    .component-wrapper-picture--picture-image {
      position: absolute;
      z-index: 0;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }

    .pageArticlesRangePage--title {
      position: relative;
      font-size: 1.875rem;
      font-weight: 500;
      line-height: 2.25rem;
      color: var(--white);
      text-transform: uppercase;
      z-index: 2;
    }
  }

  h1.component-title-cta-images-and-caption--title {
      text-align: center;
      font-size: 3rem;
  }

  .pageArticlesRangePage--banner::after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 1;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(200deg, rgba(10, 10, 10, 0.1) 0%, rgba(10, 10, 10, 0.9) 100%);
  }

  h2 {
    font-size: 2.5rem;
  }

  .pageArticlesRangePage--blocks {
    margin: 3.125rem auto;

    .topic-title-text {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: var(--blue);

      .topic-title-text--title {
        font-size: 1.375rem;
        font-weight: 700;
        line-height: 1.2;
        text-transform: uppercase;
        margin: 0;
      }

      .topic-title-text--text {
        display: flex;
        flex-direction: column;
        align-items: center;

        h2 {
          font-size: 1.375rem;
          font-weight: 300;
          line-height: 1.2;
          margin: 0;
        }

        p {
          font-size: 1rem;
          line-height: 1.375rem;
          font-weight: lighter;
          text-align: center;
          margin-top: 1.25rem;
          margin-bottom: 0;
        }
      }
    }
  }

  .card-big-thematique--image {
    aspect-ratio: 149 / 111;
  }

  .pageArticlesRangePage--ranges {
    display: flex;
    flex-direction: column;
    gap: 1.875rem;
  }
}

.pageArticlesRangePage--childrenRange {
  .breadcrumbs {
    width: var(--content-width);
    max-width: 90rem;
    margin: 0 auto;
    margin-top: 0.5rem;
    box-sizing: border-box;
  }
  .pageArticlesRangePage--childrenRange--articles {
    margin-top: 3.125rem;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;

    .component-title-sliding-images-and-texts__pageRangePage-featured-videos {
      padding: 2.5rem 1.875rem;
      background-color: var(--color-3);
      .component-title-sliding-images-and-texts--title,
      .component-title-sliding-images-and-texts--subtitle {
        font-size: 1.125rem;
        font-weight: 700;
        line-height: 1.875rem;
        text-transform: uppercase;
      }
      .component-title-sliding-images-and-texts--subtitle {
        font-weight: 300;
      }
      .card--article:first-of-type {
        .card--article--content {
          padding: 0;
          border-bottom: 0.063rem solid #d7d7d7;
          padding-bottom: 1.875rem;
          padding-top: 1.25rem;
        }
      }
      .card--article {
        .card--article--content {
          padding: 0;
          padding-top: 1.875rem;
        }
      }
    }
    .component-title-cta-images-and-caption__pageRangePage--memo {
      margin: 0 auto;
      background-color: var(--color);
      display: flex;
      flex-direction: column;
      gap: 2rem;
      width: 100%;
      height: 458px;
      justify-content: center;
      align-items: center;
      .component-title-cta-images-and-caption--image-wrapper {
        .componentTitleCtaImagesAndCaption--picture-image {
          height: 3.75rem;
          width: auto;
          margin: 0 auto;
        }
      }
      .component-title-cta-images-and-caption__pageRangePage--memo--title {
        font-size: 1.5rem;
        line-height: 1.875rem;
        color: var(--white);
        margin: 0;
        width: 15.625rem;
        text-align: center;
      }
      .component-cta--dl-cta {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        gap: 0.5rem;
        background: var(--white);
        border-radius: 0.5rem;
        color: var(--color);
        font-size: 1rem;
        font-weight: 700;
        padding: 1rem 1.25rem;
        text-decoration: none;
        transition: opacity 0.3s ease;
      }
      .component-cta--dl-cta:hover {
        opacity: 0.8;
      }

      path {
        stroke: var(--color);
      }
    }
  }
  .pageArticlesRangePage--childrenRange--lower-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4.375rem;
    margin-top: 3.125rem;
  }
}

@media (min-width: 48rem /* 768px */) {
  .pageArticlesRangePage {
    margin-bottom: 7.5rem;

    .pageArticlesRangePage--banner {
      .pageArticlesRangePage--title {
        font-size: 2rem;
        line-height: 2.625rem;
      }
    }

    .pageArticlesRangePage--blocks {
      max-width: 50%;

      .topic-title-text {
        .topic-title-text--title {
          font-size: 1.625rem;
        }
        .topic-title-text--text {
          h2 {
            font-size: 1.625rem;
          }
        }
      }
    }

    .pageArticlesRangePage--ranges {
      max-width: 70rem;

      display: grid;
      grid-template-columns: repeat(3, 1fr);
      column-gap: 2rem;
      row-gap: 1.875rem;
    }
  }
  .pageArticlesRangePage--childrenRange {
    .pageArticlesRangePage--childrenRange--articles {
      display: grid;
      grid-template-columns: 1fr 1fr;
      row-gap: 2.5rem;
      column-gap: 1.875rem;
    }
  }
}

@media (min-width: 64rem /* 1024px */) {
  .pageArticlesRangePage {
    .pageArticlesRangePage--blocks {
      margin-top: 5.625rem;
    }
  }

  .pageArticlesRangePage--childrenRange {
    .pageArticlesRangePage--childrenRange--articles {
      grid-template-columns: 1fr 1fr 1fr;
    }
  }
}


/* ==================================================================
   PAGE THÉMATIQUES (rubrique parente) — refonte 2026
   Maquettes : desktop 68:856 (1440) / mobile 68:1795 (390)
   Unités relatives uniquement (rem), base 16.
   ================================================================== */

.pageArticlesRangePage {
	background-color: var(--lx-gray-100);
}

/* ============================================== GRILLE DES THÉMATIQUES */

.pageArticlesRangePage--grid {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	padding: 3.5rem var(--lx-gutter-mobile);
	text-align: left;
}

.pageArticlesRangePage--grid--title {
	width: 100%;
	max-width: 84rem;
	margin: 0 auto;
	font-family: var(--lx-font-main);
	font-size: 1.75rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--lx-accent-main);
	overflow-wrap: break-word;
}

.pageArticlesRangePage--grid--list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	width: 100%;
	max-width: 84rem;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.pageArticlesRangePage--grid--item {
	display: flex;
}

.pageArticlesRangePage--grid--item > * {
	width: 100%;
}

/* ==================================================================
   DESKTOP — à partir de 64rem (1024px)
   ================================================================== */

@media screen and (min-width: 48rem) {

	.pageArticlesRangePage--grid--list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1.5rem;
	}
}

@media screen and (min-width: 64rem) {

	.pageArticlesRangePage--grid {
		gap: 2.5rem;
		padding: 3rem var(--lx-gutter-desktop);
	}

	.pageArticlesRangePage--grid--title {
		font-size: 2.5rem;
		letter-spacing: -0.025em;
	}

	.pageArticlesRangePage--grid--list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

}

/* Les marges héritées de `.pageArticlesRangePage` servent les pages de
   thématique enfant, pas la page rubrique refondue : celle-ci gère ses
   propres espacements, bloc par bloc. */
.pageArticlesRangePage.pageArticlesRangePage {
	margin-top: 0;
	margin-bottom: 0;
}

/* ==================================================================
   PAGE THÉMATIQUE (rubrique enfant) — refonte 2026
   Maquettes : desktop 68:929 (1440) / mobile 68:1989 (390)
   ================================================================== */

.pageArticlesRangePage.pageArticlesRangePage {
	margin-top: 0;
	margin-bottom: 0;
	background-color: var(--lx-gray-100);
}

/* ------------------------------------------------------------ HERO */

.pageArticlesRangePage--hero {
	padding: 0 var(--lx-gutter-mobile);
	text-align: left;
}

.pageArticlesRangePage--hero--card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 2rem;
	padding: 1.5rem 1.5rem;
	border-radius: 0.75rem;
	/* Couleur de la thématique, portée par le champ `color` de la page. */
	background-color: var(--lx-theme, var(--lx-accent-main));
}

.pageArticlesRangePage--hero--breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--lx-font-main);
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--lx-neutral-very-light);
}

.pageArticlesRangePage--hero--breadcrumb li + li::before {
	content: "";
	display: inline-block;
	width: 1rem;
	height: 1rem;
	margin-right: 0.25rem;
	vertical-align: -0.1875rem;
	background-color: currentColor;
}

.pageArticlesRangePage--hero--breadcrumb a {
	color: inherit;
	text-decoration: underline;
}

.pageArticlesRangePage--hero--breadcrumb a:hover {
	color: var(--lx-accent-second-light);
}

.pageArticlesRangePage--hero--content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
	text-align: center;
}

.pageArticlesRangePage--hero--title {
	margin: 0;
	font-family: var(--lx-font-main);
	font-size: 2rem;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--lx-gray-100);
	overflow-wrap: break-word;
}

.pageArticlesRangePage--hero--subtitle {
	margin: 0;
	font-family: var(--lx-font-main);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--lx-neutral-very-light);
}

/* ------------------------------------------- AUTRES THÉMATIQUES */

.pageArticlesRangePage--siblings {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
	padding: 3.5rem var(--lx-gutter-mobile);
	background-color: var(--lx-gray-100);
	text-align: left;
}

.pageArticlesRangePage--siblings--head,
.pageArticlesRangePage--siblings--slider,
.pageArticlesRangePage--siblings--cta {
	width: 100%;
	max-width: 84rem;
	margin-inline: auto;
}

.pageArticlesRangePage--siblings--head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.pageArticlesRangePage--siblings--title {
	margin: 0;
	font-family: var(--lx-font-main);
	font-size: 1.75rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--lx-accent-main);
}

/* Le slider rogne sur ses deux bords : sans cela, les diapositives
   déjà passées glissent par-dessus ce qui se trouve à gauche. Le
   débordement voulu vers la droite est obtenu en tirant la marge
   jusqu'au bord de l'écran, pas en laissant l'overflow ouvert. */
.pageArticlesRangePage--siblings--slider {
	overflow: hidden;
}

.pageArticlesRangePage--siblings--slide {
	height: auto;
}

.pageArticlesRangePage--siblings--slide > * {
	height: 100%;
}

.pageArticlesRangePage--siblings--arrows {
	display: none;
	flex: 0 0 auto;
	gap: 0.5rem;
}

.pageArticlesRangePage--siblings--arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	padding: 0;
	border: 0.0625rem solid var(--lx-neutral-light);
	border-radius: 50%;
	background-color: var(--lx-accent-main);
	color: var(--lx-gray-100);
	cursor: pointer;
	transition: background-color var(--transition-time) ease,
		border-color var(--transition-time) ease,
		color var(--transition-time) ease;
}

.pageArticlesRangePage--siblings--arrow::before {
	content: "";
	width: 1.5rem;
	height: 1.5rem;
	background-color: currentColor;
}

.pageArticlesRangePage--siblings--arrow.is-prev::before {
	transform: rotate(180deg);
}

.pageArticlesRangePage--siblings--arrow:hover {
	background-color: var(--lx-main);
	border-color: var(--lx-main);
}

.pageArticlesRangePage--siblings--arrow.swiper-button-disabled {
	background-color: transparent;
	border-color: var(--lx-neutral-light);
	color: var(--lx-neutral-light);
	cursor: default;
	pointer-events: none;
}

.pageArticlesRangePage--siblings--cta {
	display: flex;
	justify-content: center;
	margin-top: 1rem;
}

/* Lien rendu directement par le gabarit : il n'y a pas d'entrée CTA
   derrière, la cible est la rubrique parente. */
.pageArticlesRangePage--siblings--link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 0.75rem 1rem;
	border-radius: var(--lx-radius-button);
	background-color: var(--lx-light-blue);
	font-family: var(--lx-font-main);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.4;
	color: var(--lx-main);
	text-align: center;
	text-decoration: none;
	transition: background-color var(--transition-time) ease,
		color var(--transition-time) ease;
}

.pageArticlesRangePage--siblings--link:hover {
	background-color: var(--lx-light-blue-hover);
	color: var(--lx-main);
}

@media screen and (min-width: 48rem) {

	.pageArticlesRangePage--siblings--slider {
		gap: 1.5rem;
	}
}

@media screen and (min-width: 64rem) {

	.pageArticlesRangePage--hero {
		padding: 0 var(--lx-gutter-desktop);
	}

	.pageArticlesRangePage--hero--card {
		max-width: 84rem;
		margin-inline: auto;
		padding: 6rem 3rem;
	}

	.pageArticlesRangePage--hero--breadcrumb {
		position: absolute;
		top: 1.5rem;
		left: 1.5rem;
	}

	.pageArticlesRangePage--hero--content {
		/* 888 px dans la maquette. */
		max-width: 55.5rem;
		margin-inline: auto;
	}

	.pageArticlesRangePage--hero--title {
		font-size: 3.5rem;
	}

	.pageArticlesRangePage--hero--subtitle {
		font-size: 1.25rem;
	}

	.pageArticlesRangePage--siblings {
		gap: 2.5rem;
		padding: 8rem var(--lx-gutter-desktop);
	}

	.pageArticlesRangePage--siblings--title {
		font-size: 2.5rem;
		letter-spacing: -0.025em;
	}

	.pageArticlesRangePage--siblings--arrows {
		display: flex;
	}


	.pageArticlesRangePage--siblings--cta {
		margin-top: 0;
	}

	.pageArticlesRangePage--siblings--link {
		width: auto;
	}
}

/* ==================================================================
   MOBILE — débordement du slider
   La marge négative amène le bord droit du slider au bord de l'écran ;
   l'overflow reste rogné pour que les diapositives déjà passées ne
   dérivent pas sur ce qui se trouve à gauche.
   Règle placée en fin de fichier : elle doit passer après le plafond
   `margin-inline: auto` appliqué au contenu.
   ================================================================== */

@media screen and (max-width: 63.9375rem) {

	.pageArticlesRangePage--siblings--slider {
		margin-right: calc(var(--lx-gutter-mobile) * -1);
	}
}