/* ----------------------------
   ZOSIM CLEAN — HISTOIRE VIVANTE
----------------------------- */

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.page-histoire {
  background: linear-gradient(180deg, var(--color-bg-off, #f0f5f3) 0%, var(--color-bg, #fafbfa) 100%);
  min-height: 100vh;
}

.history-page {
  max-width: 1300px;
  margin: 0 auto;
  padding: 5.5rem 1rem 4rem;
  box-sizing: border-box;
}
@media (min-width: 640px) {
  .history-page {
    padding: 6rem 2rem 4rem;
  }
}

.history-page .story-section {
  background-color: var(--color-white, #fff);
  border-radius: var(--radius-lg, 1rem);
  padding: 2rem 1.5rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  border: 1px solid var(--color-border, #e5e7eb);
  animation: fadeIn 0.5s ease-out;
}

/* === HERO IMAGE BLOCK === */
.story-intro {
  display: flex;
  gap: 3rem;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 2.5rem;
  animation: slideUp 1.2s ease;
}

.story-intro img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--color-border, #e5e7eb);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease;
}

.story-intro img:hover {
  transform: scale(1.05);
}

/* === TEXT BLOCKS === */
.story-section article {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  animation: fadeIn 2s ease;
}

.story-section p {
  color: #3e3a37;
}

.story-section strong {
  color: var(--color-accent, #0d9488);
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 0 0.1em;
}

.story-section blockquote {
  border-left: 4px solid var(--color-accent, #0d9488);
  background: var(--color-accent-light, #ccfbf1);
  padding: 1.5rem;
  border-radius: var(--radius-md, 0.5rem);
  text-align: center;
  color: var(--color-text, #1f2937);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  position: relative;
}

.page-histoire .story-section p {
  line-height: 1.9;
  letter-spacing: 0.2px;
}

.page-histoire .story-section blockquote {
  font-size: clamp(0.875rem, 1.8vw, 1rem);
  line-height: 1.8;
}

/* === ANIMATIONS === */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-width: 359px) {
}