:root {
  --orange-fournil: #e67e22;
  --orange-hover: #d35400;
  --light-bg: #f9f9f9;
  --soft-bg: #f4f4f4;
  --dark-text: #333;
}

/* Section principale */
.about {
  font-family: "Helvetica Neue", Arial, sans-serif;
  color: var(--dark-text);
  line-height: 1.7;
}

/* Hero pleine largeur */
.hero-about {
  position: relative;
  text-align: center;
  padding: 120px 20px;
  color: #fff;
  width: 100%;
  background-size: cover;
  background-position: center;
}

/* Conteneur centré type Bootstrap */
.content-wrapper {
  max-width: 1140px; /* largeur max comme Bootstrap */
  margin: 0 auto;    /* centré */
  padding: 0 20px;   /* respiration latérale */
}

/* Blocs narratifs */
.story-block {
  width: 100%; /* fond en pleine largeur */
  padding: 80px 0;
}
.story-block h2 {
  font-size: 26px;
  color: var(--orange-fournil);
  margin-bottom: 20px;
  font-weight: 700;
}
.story-block p {
  font-size: 18px;
  margin-bottom: 20px;
}

/* Alternance de fonds */
.story-block:nth-child(even) {
  background: var(--light-bg);
}
.story-block:nth-child(odd) {
  background: #fff;
}

/* Images */
.story-block img {
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  margin-bottom: 20px;
}
.story-block img.float-left {
  float: left;
  width: 40%;
  margin: 0 20px 20px 0;
}
.story-block img.float-right {
  float: right;
  width: 40%;
  margin: 0 0 20px 20px;
}

/* Responsive */
@media (max-width: 768px) {
  .hero-about h1 {
    font-size: 32px;
  }
  .hero-about p {
    font-size: 18px;
  }
  .story-block {
    padding: 60px 0;
  }
  .content-wrapper {
    padding: 0 15px;
  }
  .story-block img {
    float: none;
    width: 100%;
    margin: 0 0 20px 0;
  }
  .story-block h2 {
    font-size: 22px;
  }
  .story-block p {
    font-size: 16px;
  }
}

.story-block img {
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  margin-bottom: 20px;
  object-fit: cover;   /* recadre l’image sans la déformer */
  height: 300px;       /* hauteur idéale prédéfinie */
  width: 40%;          /* largeur contrôlée */
}
.story-block img.float-left {
  float: left;
  margin: 0 20px 20px 0;
}
.story-block img.float-right {
  float: right;
  margin: 0 0 20px 20px;
}

/* Responsive */
@media (max-width: 768px) {
  .story-block img {
    float: none;
    width: 100%;
    height: 200px; /* plus petite hauteur sur mobile */
    margin: 0 0 20px 0;
  }
}