/* Parties de l'article « Le latex naturel, késako ? » posées sur une vidéo de fond.
   La section sort de la colonne de lecture pour occuper toute la largeur de la page ;
   le texte reste dans la colonne, sur un voile clair qui garde la lecture nette. */

/* La partie reste dans la colonne de lecture : la barre « Le journal » reste à sa place. */
.lnk-fond {
  isolation: isolate;
  overflow: hidden;
  position: relative;
  margin-top: clamp(3rem, 7vw, 5rem);
  padding-block: clamp(2rem, 4vw, 3rem);
  background: var(--r-bg, #FCFBFA);
}

/* Le fond reste fixé pendant la lecture de la partie. La marge négative le ramène
   au-dessus du texte, qui le recouvre. */
.lnk-fond__fond {
  position: sticky;
  top: 0;
  z-index: -2;
  height: min(100vh, 40rem);
  margin-bottom: calc(-1 * min(100vh, 40rem));
  pointer-events: none;
}

.lnk-fond__fond video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Voile clair : la vidéo se voit, le texte reste lisible. */
.lnk-fond::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(252, 251, 250, .62);
}

.lnk-fond__contenu {
  position: relative;
}

@media (prefers-reduced-motion: reduce) {
  .lnk-fond__fond video { display: none; }
}

/* Parties sur fond vidéo : le texte sur une carte de papier, les photos en grille à côté.
   La carte reprend l'aplat décalé de la marque (ombre pleine, couleur de la carte). */
.lnk-fond .r-article__rangee {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  align-items: center;
}
.lnk-fond .r-article__texte {
  background: var(--r-bg-pure, #FFFFFF);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  box-shadow: .5rem .5rem 0 var(--arc, var(--arc-2));
}
.lnk-fond .r-article__media {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}
.lnk-fond .r-article__figure { margin: 0; }
.lnk-fond .r-article__figure img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
@media (min-width: 48rem) {
  .lnk-fond .r-article__rangee { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* Conclusion : une carte centrée sur le fond vidéo. */
.lnk-fond[aria-labelledby="et-voila-une-question"] .lnk-fond__contenu {
  max-width: 36rem;
  margin-inline: auto;
  padding: clamp(1.6rem, 4vw, 2.6rem);
  background: var(--r-bg-pure, #FFFFFF);
  box-shadow: .5rem .5rem 0 var(--arc-2);
  text-align: center;
}
.lnk-fond[aria-labelledby="et-voila-une-question"] .r-article__titre { margin-bottom: .75rem; }

/* Pictogrammes des catégories (barre latérale) : même trait pour les six, même taille,
   couleur de la suite de la charte. Propre à cette page : la feuille n'est chargée qu'ici. */
.r-journal__cats .r-picto {
  width: 1.6rem;
  height: 1.6rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.r-journal__cats li[data-rang="1"] .r-picto { color: #6128FF; }
.r-journal__cats li[data-rang="2"] .r-picto { color: #0A7A5D; }
.r-journal__cats li[data-rang="3"] .r-picto { color: #D63A22; }
.r-journal__cats li[data-rang="4"] .r-picto { color: #8A6708; }
.r-journal__cats li[data-rang="5"] .r-picto { color: #B0396A; }
.r-journal__cats li[data-rang="6"] .r-picto { color: #E4173F; }

/* Introduction : sommaire à gauche, texte à droite sur ordinateur ; empilés sur téléphone. */
.lnk-intro {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
.lnk-intro > .r-sommaire { margin: 0; }
/* Téléphone : le texte d'abord, le sommaire ensuite. */
.lnk-intro > .r-article__texte { order: -1; }
@media (min-width: 48rem) {
  .lnk-intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
  .lnk-intro > .r-sommaire { order: -1; }
  .lnk-intro > .r-article__texte { order: 0; }
}