/* ================= HISTOIRE (récit de marque) ================= */
.histoire__grille {
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: 56px;
  align-items: center;
}

.histoire .entete--gauche { margin-bottom: 30px; }

/* Mini-récit en 2 temps */
.histoire__intertitre {
  font-family: var(--f-script);
  font-weight: 600;
  font-size: 30px;
  color: var(--terracotta);
  transform: rotate(-1.5deg);
  transform-origin: left center;
  margin-bottom: 8px;
}
.histoire__recit p {
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--brun-doux);
  max-width: 540px;
  margin-bottom: 28px;
}

/* Photo + tampon « 10 ans » qui déborde du coin haut-droit */
.histoire__visuel { position: relative; }
.histoire__visuel .media-organique { aspect-ratio: 4 / 5; }

.histoire__tampon {
  position: absolute;
  top: -36px;
  right: -22px;
  width: 110px;
  height: auto;
  transform: rotate(-8deg);
  z-index: 2;
  filter: drop-shadow(0 14px 24px rgba(30, 31, 32, 0.30));
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.histoire__visuel:hover .histoire__tampon { transform: rotate(3deg) scale(1.06); }

/* --- Responsive --- */
@media (max-width: 991px) {
  .histoire__grille { gap: 36px; }
  .histoire__intertitre { font-size: 27px; }
}

@media (max-width: 767px) {
  /* Empilé : la photo passe après le texte (ordre du flux) */
  .histoire__grille { grid-template-columns: 1fr; gap: 26px; }
  .histoire__visuel { margin-top: 22px; }
  .histoire__visuel .media-organique { aspect-ratio: 4 / 4.4; }
  .histoire__tampon { width: 92px; top: -30px; right: -4px; }
}

@media (max-width: 479px) {
  .histoire__intertitre { font-size: 25px; }
  .histoire__recit p { font-size: 15.5px; }
  .histoire__tampon { width: 82px; top: -26px; }
}