/* ============================================================
   FICHE TECHNIQUE MATÉRIAU (CPT material).
   Colonne de vignettes (réutilise .project-vignette de single-project.css) à gauche,
   INDÉPENDANTE. À droite, dans le flux : petit sur-titre « FICHE TECHNIQUE », le nom du
   matériau (.titre1), puis les rubriques de texte l'une sous l'autre (sans contour), avec
   une bande « Des projets en … » (4 photos carrées de l'atlas) intercalée.
   ============================================================ */

.material-fiche { width: 100%; }

/* ── Grille : vignettes | contenu ── */
.fiche-grid { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 34px; align-items: start; }
/* .project-vignettes réutilisé hors du contexte .project-acf : on neutralise ses largeurs/hauteurs. */
.fiche-grid .project-vignettes { width: 100%; min-height: 0; position: sticky; top: 116px; gap: var(--grid-gap, 12px); }

.fiche-content { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

/* ── En-tête : titre à gauche, bouton « guide » aligné à droite, au niveau du titre ── */
.fiche-head-row { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
/* ── Titre : sur-titre « FICHE TECHNIQUE » + nom du matériau ── */
.fiche-head { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fiche-kicker {
  font-family: "Archivo", sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--color-muted, #878787);
}
.fiche-head .titre1 { margin: 0; }

/* ── Intro + rubriques : dans le flux, sans contour ── */
.material-intro {
  font-family: "Archivo", sans-serif; font-size: 14px; line-height: 1.65; color: var(--color-text);
  text-align: justify;
}
.material-section { display: flex; flex-direction: column; gap: 8px; }
.material-section-title {
  font-family: "Gambetta", sans-serif; font-weight: bold; letter-spacing: .02em;
  font-size: 18px; color: var(--color-text, #111); margin: 0;
}
.material-section-text {
  font-family: "Archivo", sans-serif; font-size: 13px; line-height: 1.65; color: var(--color-text);
  text-align: justify;
}
.material-intro p:last-child,
.material-section-text p:last-child { margin-bottom: 0; }
/* Images insérées : pleine largeur SI assez grandes, jamais étirées au-delà (max-width, pas width). */
.material-intro img,
.material-section-text img { max-width: 100%; width: auto; height: auto; display: block; margin: 12px 0; }

/* ── Galerie « Exemples de projets en … » : photos CARRÉES de l'atlas, défilement par flèches
   (.gallery-prev / .gallery-next héritées de single-project.css) ── */
.fiche-strip { display: flex; flex-direction: column; gap: 10px; }
/* Plus d'air après la galerie de projets (chantier/projet), avant « Spécificités techniques ». */
.fiche-strip--projets { margin-bottom: 26px; }
.fiche-gallery { width: 100%; }   /* .gallery-container fournit position:relative + overflow:hidden */
.fiche-gallery-track {
  display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.fiche-gallery-track::-webkit-scrollbar { display: none; }
.fiche-shot {
  position: relative; flex: 0 0 calc((100% - 30px) / 4); aspect-ratio: 1 / 1;   /* 4 visibles */
  scroll-snap-align: start; overflow: hidden; display: block; background: var(--color-fill, #efeae2);
}
.fiche-shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.fiche-shot:hover img { transform: scale(1.04); }

/* Ouvrages : couvertures PORTRAIT (6 visibles), même piste défilante que les projets. */
.fiche-book { position: relative; flex: 0 0 calc((100% - 50px) / 6); aspect-ratio: 3 / 4; overflow: hidden; display: block; background: var(--color-fill, #efeae2); }
.fiche-book img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.fiche-book:hover img { transform: scale(1.04); }

/* ── Bouton « Télécharger le guide » (aligné à droite) ── */
.material-guide-btn {
  flex-shrink: 0; display: inline-block; padding: 12px 24px;
  background: var(--color-text, #000); color: #fff !important;
  font-family: "Archivo", sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .03em;
  text-decoration: none; transition: background .15s;
}
.material-guide-btn:hover { background: var(--color-main, #D53016); color: #fff !important; }

/* ── Responsive ── */
@media (max-width: 820px) {
  .fiche-grid { grid-template-columns: 1fr; gap: 20px; }
  .fiche-grid .project-vignettes { position: static; flex-direction: row; flex-wrap: wrap; }
  .fiche-grid .project-vignette { flex: 1 1 30%; }
  .fiche-shot { flex-basis: calc((100% - 10px) / 2); }   /* 2 visibles sur mobile */
  .fiche-book { flex-basis: calc((100% - 20px) / 3); }   /* 3 couvertures visibles sur mobile */
  /* En-tête empilé sur mobile : titre puis bouton pleine largeur. */
  .fiche-head-row { flex-direction: column; align-items: stretch; gap: 14px; }
  .material-guide-btn { text-align: center; }
}