/* =========================================================
   DESIGNER BY NATURE — 6. MATIÈRES
   Surface brune — la seule du site, et la seule qui parle de matière.
   Elle s'intercale entre l'expérience, qui monte un espace, et les
   services : on vient de voir un lieu se construire, on regarde de quoi
   il est fait.

   BÂTIE SUR LE MODÈLE DU JOURNAL
   Même en-tête que les autres sections, un bouton à droite, puis une
   rangée de cartes : image en haut, catégorie, titre, texte. La section
   ne suit plus la mise en page de la plaquette — seuls ses textes en
   viennent.

   TROIS VERSIONS ÉCARTÉES, ET CE QU'ELLES ONT APPRIS
   La première alignait trois vignettes de même taille sous un titre :
   rien n'y était hiérarchisé. La deuxième en promouvait une en grand
   format face à un bloc éditorial — on agrandissait à 697 px une
   photographie qui en mesure 662, et le grain devenait visible. La
   troisième les réduisait à des carrés de 240 px dans une planche
   encadrée : nettes, mais reléguées, alors qu'elles sont le sujet.

   L'ÉQUILIBRE RETENU
   En cartes, chaque image occupe toute la largeur de sa colonne — 419 px
   au plus large, sous les 483 de la plus petite source. Elle ouvre son
   bloc, se voit, et reste nette.
   ========================================================= */

.matieres {
  position: relative;
  background-color: var(--surface);
  color: var(--fg);
  overflow: hidden;
}

/* ---------- LE FOND ---------- */
/* AUCUN CALQUE COMPOSÉ, ET C'EST VOULU
   Le fond et son voile étaient d'abord glissés sous le contenu par des
   z-index négatifs, ce qui obligeait à poser `isolation: isolate` sur la
   section. Chacun de ces éléments force la section entière dans une
   couche composée, et un texte peint sur une couche dont le fond est
   inconnu peut y perdre son lissage en niveaux de gris — le navigateur
   retombe alors sur un crénage sous-pixel qui borde les lettres de
   liserés rouges et cyan.

   L'ordre du document suffit : le fond et le voile précèdent le contenu,
   c'est donc au contenu de remonter d'un cran. Pas de z-index négatif,
   pas d'isolation, pas de filtre de fond.

   La photographie — escalier de chêne, main courante en laiton, sol en
   pierre, murs à la chaux — porte les trois familles dont parle le texte
   dans un même cadre. C'est ce qui la justifie ici plutôt qu'une vue
   d'ambiance quelconque. Elle est posée en balise `img` et non en
   `background-image` : une balise se précharge, se décode en parallèle
   et accepte le chargement différé. */

.matieres__fond {
  position: absolute;
  inset: 0;
}

.matieres__fond img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

/* UN VOILE QUI LAISSE VOIR LA MATIÈRE
   Deux couches. Un aplat brun à 80 %, qui garde à la section son
   identité de couleur et assure le contraste du texte ; puis un dégradé
   vertical plus dense en haut et en bas qu'au centre, qui protège
   l'en-tête et le pied de section en laissant la photographie respirer
   là où rien n'est écrit.

   À 80 % on distingue encore le limon de l'escalier et la lumière sur le
   mur, et le texte ivoire garde plus de 9:1 sur la zone la plus claire
   qu'il traverse. En dessous de 70 % ce rapport tombe par endroits sous
   7:1, et le fond cesse d'être un fond. */
.matieres__voile {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to bottom,
      rgba(30, 25, 20, .55) 0%,
      rgba(30, 25, 20, 0) 38%,
      rgba(30, 25, 20, 0) 62%,
      rgba(30, 25, 20, .55) 100%
    ),
    rgba(48, 40, 32, .8);
}

/* Le contenu passe devant le fond et son voile, qui le précèdent dans le
   document : un simple indice positif suffit. */
.matieres__inner {
  position: relative;
  z-index: 1;
}

/* ---------- CHAPÔ ---------- */
/* Une seule respiration entre l'en-tête et les cartes. Le journal n'en a
   pas, mais ce texte-là est celui du client : il ne se supprime pas pour
   la symétrie. */

.matieres__chapo {
  max-width: 62ch;
  margin-bottom: var(--sp-bloc);
  font-size: var(--fs-small);
  line-height: var(--lh-lisible);
  color: var(--muted);
}

/* ---------- LES TROIS CARTES ---------- */

.matieres__liste {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-8);
}

.matiere {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-5);
}

/* L'image ouvre la carte, en portrait : c'est le format qui donne le plus
   de surface à largeur de colonne égale, et les trois sources sont toutes
   plus hautes que larges. */
.matiere__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background-color: rgba(250, 248, 243, .05);
}

/* Le cadre porte le masque de révélation et ne bouge plus ; la couche
   intérieure porte la parallaxe. clip-path et transform ne cohabitent
   pas bien sur un même élément pendant le défilement. */
.matiere__zoom {
  position: absolute;
  /* Débord vertical : la parallaxe ne doit jamais découvrir le fond. */
  inset: -6% 0;
}

.matiere__zoom img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-long) var(--ease-sortie);
}

.matiere:hover .matiere__zoom img { transform: scale(1.04); }

.matiere__corps {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.matiere__categorie {
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--accent);
}

.matiere__titre {
  font-family: var(--display);
  font-size: var(--fs-h4);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: var(--ls-titre);
  color: var(--fg);
}

.matiere__texte {
  font-size: var(--fs-small);
  line-height: var(--lh-lisible);
  color: var(--muted);
}

/* ---------- LA PHRASE DE CLÔTURE ---------- */
/* Elle n'est pas un paragraphe de plus : police de titrage, plus grande,
   détachée par un filet. Sans quoi la section s'arrêtait sur une carte
   au lieu de se conclure. */

.matieres__signe {
  margin-top: var(--sp-bloc);
  padding-top: var(--sp-6);
  border-top: var(--trait) solid var(--rule);
  font-family: var(--display);
  font-size: var(--fs-h4);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: .01em;
  color: var(--fg);
}

/* ---------- RESPONSIVE ---------- */
/* UNE COLONNE, PUIS TROIS. JAMAIS DEUX.
   Le journal passe par un palier à deux colonnes parce qu'il compte
   quatre articles : deux rangées de deux, sans reste. Ici il y a trois
   familles — un palier à deux colonnes laisse toujours la troisième
   seule sur sa rangée. Elle avait d'abord été étalée sur toute la
   largeur, image à gauche du texte : une carte qui ne ressemble plus aux
   deux autres, pour une seule taille d'écran.

   Trois colonnes dès 768 px : chaque carte y fait 226 px, ses images
   226 × 282 — bien en dessous des 483 px de la plus petite source, donc
   nettes même à double densité. */

@media (min-width: 48rem) {
  .matieres__liste {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gouttiere);
  }
}