/* ==================================================================
   Page « La Fabrique »
   ================================================================== */

/* --- Notre histoire : texte a gauche, image a droite --- */
.story {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--sp-10);
  align-items: center;
}
.story__text h2 { font-size: var(--fs-2xl); margin-block: var(--sp-3) var(--sp-5); max-width: 14ch; }
.story__text .prose { color: var(--text-muted); }

.story__note {
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--surface-2);
}
.story__note strong { display: block; margin-bottom: var(--sp-2); }
.story__note p { font-size: var(--fs-sm); color: var(--text-muted); }

.story__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }

.story__media {
  position: relative;
  margin: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 5 / 6;
}
.story__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Liseré chaud rappelant l'identite de la marque. */
.story__media::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  pointer-events: none;
}

@media (max-width: 900px) {
  .story { grid-template-columns: 1fr; gap: var(--sp-6); }
  .story__text h2 { max-width: 100%; }
  .story__media { aspect-ratio: 4 / 3; }
}

/* --- Ancienne mise en page (conservee pour compatibilite) --- */
.about-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--sp-10);
  align-items: start;
}
@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; } }

.about-pillars { display: grid; gap: var(--sp-4); }
.about-pillars .pillar {
  padding: var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.about-pillars .pillar h3 { font-size: var(--fs-md); }
.about-pillars .pillar p { font-size: var(--fs-sm); color: var(--text-muted); margin-top: var(--sp-2); }