/* app/assets/stylesheets/histoire.css */

.histoire-intro {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 22px;
  padding: 130px 64px 90px;
  background: var(--dark-charcoal, #1B1611);
  overflow: hidden;
}

.histoire-intro-pattern {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.06;
  pointer-events: none;
  width: 780px;
  height: 780px;
}

.histoire-pill {
  position: relative;
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gold-accent, #C9A227);
}

.histoire-intro h1 {
  position: relative;
  font-family: "Playfair Display", serif;
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1.2;
  color: #faf6f0;
  font-weight: 500;
  max-width: 720px;
}

.histoire-intro h1 em {
  font-style: italic;
  color: var(--gold-accent, #C9A227);
}

.histoire-intro p {
  position: relative;
  font-size: 16px;
  line-height: 1.8;
  color: #c3b8a9;
  max-width: 560px;
}

.histoire-story {
  display: flex;
  gap: 70px;
  /* La colonne de droite s'étire sur toute la hauteur de la photo au lieu
     de s'arrêter à son propre contenu. */
  align-items: stretch;
  padding: 110px 64px;
  max-width: 1280px;
  margin: 0 auto;
}

/* La colonne média est étirée par align-items: stretch du parent (même
   hauteur que le texte), mais la photo elle-même n'a pas à remplir cette
   hauteur : elle est centrée dedans, à sa taille naturelle. Combiner
   width:100%/height:100% avec object-fit:cover forçait sa largeur réelle
   (300px) à remplir une boîte bien plus haute (680px) que son format
   propre (1367x1895) ne le permet sans rogner sévèrement l'image, et sans
   tenir dans l'écran sans défiler. */
.histoire-story-media {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* L'arche et son double cadre ont disparu : ils encadraient un flacon
   détouré sur fond blanc, traitement inadapté à une photographie. */
.histoire-story-photo {
  width: auto;
  height: auto;
  /* Le plafond de 360px ne protégeait que contre une photo trop grande sur
     desktop : rien ne la contraignait à la largeur réelle du conteneur en
     dessous, d'où un débordement horizontal sur mobile. min(360px, 100%)
     retient le plus restrictif des deux. */
  max-width: min(360px, 100%);
  max-height: 560px;
  display: block;
  border-radius: 6px;
}

.histoire-story-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  /* Répartit pill/titre, vers arabes et paragraphe français sur la hauteur
     disponible plutôt que de les tasser en haut, pour couvrir visuellement
     la même hauteur que la photo. */
  justify-content: space-between;
  gap: 22px;
}

.histoire-story-content h2 {
  font-family: "Playfair Display", serif;
  font-size: 32px;
  line-height: 1.25;
  color: var(--text-primary, #2A241E);
  margin: 0;
}

.histoire-fr p {
  font-size: 15px;
  line-height: 1.85;
  color: var(--text-secondary, #6B6256);
  margin: 0 0 14px;
}

.histoire-fr p:last-of-type { margin-bottom: 0; }

/* ---------- Vers arabes ---------- */
.histoire-ar {
  text-align: right;
  font-family: "Amiri", "Playfair Display", serif;
  color: var(--text-secondary, #6B6256);
  padding: 18px 22px;
  border-right: 2px solid rgba(201, 162, 39, 0.35);
  background: rgba(201, 162, 39, 0.04);
}

/* Chaque <br> du poème marque une fin de vers : un interligne plus large
   qu'un paragraphe de prose, pour que le rythme se voie autant qu'il se
   lit. */
.histoire-poem {
  font-size: 1.1rem;
  line-height: 2.3;
  margin: 0;
}

/* ---------- Slogan, dans les deux langues ---------- */
.histoire-fr .histoire-slogan,
.histoire-ar .histoire-slogan {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(201, 162, 39, 0.3);
  color: var(--gold-accent, #C9A227);
  font-weight: 500;
}

/* Même voix que la citation finale de la page ("L'art de la parfumerie
   ne se mesure pas...") : Playfair Display en italique, plutôt que le
   texte courant en Inter. */
.histoire-fr .histoire-slogan {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.5;
  margin-bottom: 0;
}

.histoire-ar .histoire-slogan {
  font-size: 1.2rem;
  line-height: 1.7;
}

.histoire-quote {
  padding: 40px 64px 100px;
  text-align: center;
}

.histoire-quote p {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: 24px;
  line-height: 1.6;
  color: var(--text-primary, #2A241E);
  max-width: 720px;
  margin: 0 auto;
}

.histoire-quote span {
  display: block;
  margin-top: 18px;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-secondary, #6B6256);
}

.histoire-values {
  padding: 90px 64px 130px;
  background: var(--soft-cream, #FAF6F0);
}

.histoire-values-row {
  display: flex;
  gap: 56px;
  justify-content: center;
  max-width: 1100px;
  margin: 0 auto;
}

.histoire-value {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 280px;
  text-align: center;
}

.histoire-value h3 {
  font-family: "Playfair Display", serif;
  font-size: 17px;
  margin: 0;
  color: var(--text-primary, #2A241E);
}

.histoire-value p {
  font-size: 13.5px;
  color: var(--text-secondary, #6B6256);
  line-height: 1.7;
  margin: 0;
}

.histoire-cta {
  padding: 90px 64px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.histoire-cta h2 {
  font-family: "Playfair Display", serif;
  font-size: 30px;
  margin: 0;
  color: var(--text-primary, #2A241E);
}

@media (max-width: 860px) {
  .histoire-intro {
    padding: 90px 24px 70px;
  }
  .histoire-story {
    flex-direction: column;
    gap: 36px;
    padding: 70px 24px;
  }
  .histoire-story-media {
    width: 100%;
    max-width: 380px;
  }
  .histoire-values-row {
    flex-direction: column;
    gap: 40px;
    align-items: center;
  }
  .histoire-quote,
  .histoire-cta,
  .histoire-values {
    padding-left: 24px;
    padding-right: 24px;
  }
}