/* Page-owned styles for histoire-et-choix */
.histoire-page {
  --histoire-gap-section: var(--space-48);
  --histoire-gap-cards: var(--space-24);
  --histoire-gap-inner: var(--space-16);
  display: flex;
  flex-direction: column;
  gap: var(--histoire-gap-section);
}

/* Héro narratif */
.hero-narratif {
  position: relative;
  width: 100%;
  min-height: 300px;
  background-color: var(--color-nuit-profonde);
  overflow: hidden;
}

.hero-narratif__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-narratif__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  display: block;
}

.hero-narratif__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14, 10, 20, 0.55) 0%, rgba(14, 10, 20, 0.85) 100%);
}

.hero-narratif__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container-reading);
  margin-inline: auto;
  padding: var(--space-32) var(--gutter-mobile);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-16);
  text-align: left;
}

.hero-narratif__content h1 {
  font-size: clamp(2rem, 5vw, 2.5rem);
  line-height: var(--text-display-line-height);
  font-weight: var(--text-display-weight);
  color: var(--color-texte-principal);
  margin-block-end: 0;
}

.hero-narratif__chapo {
  color: var(--color-texte-secondaire);
  font-size: var(--text-body-size);
  line-height: var(--text-body-line-height);
  margin-block-end: 0;
}

.hero-narratif__cta {
  margin-block-start: var(--space-8);
}

/* Introduction narrative */
.intro-narrative__inner {
  width: 100%;
  max-width: var(--container-reading);
  margin-inline: auto;
  padding-inline: var(--gutter-mobile);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  text-align: left;
}

.intro-narrative__inner h2 {
  margin-block-end: 0;
}

.intro-narrative__inner p {
  margin-block-end: 0;
}

.intro-narrative__quote {
  margin-block-end: 0;
}

/* Les choix qui comptent */
.choix-comptent__header {
  width: 100%;
  max-width: var(--container-reading);
  margin-inline: auto;
  padding-inline: var(--gutter-mobile);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  text-align: left;
  margin-block-end: var(--space-24);
}

.choix-comptent__header h2 {
  margin-block-end: 0;
}

.choix-comptent__lead {
  color: var(--color-texte-secondaire);
  margin-block-end: 0;
}

.choix-comptent__grid {
  width: 100%;
  max-width: var(--container-grid);
  margin-inline: auto;
  padding-inline: var(--gutter-mobile);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--histoire-gap-cards);
}

.choix-comptent__card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.choix-comptent__card h3 {
  margin-block-end: 0;
}

.choix-comptent__card p {
  margin-block-end: 0;
}

/* Les routes romantiques */
.routes-romantiques__header {
  width: 100%;
  max-width: var(--container-reading);
  margin-inline: auto;
  padding-inline: var(--gutter-mobile);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  text-align: left;
  margin-block-end: var(--space-24);
}

.routes-romantiques__header h2 {
  margin-block-end: 0;
}

.routes-romantiques__lead {
  color: var(--color-texte-secondaire);
  margin-block-end: 0;
}

.routes-romantiques__grid {
  width: 100%;
  max-width: var(--container-grid);
  margin-inline: auto;
  padding-inline: var(--gutter-mobile);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--histoire-gap-cards);
}

.fiche-personnage {
  min-width: 0;
  background-color: var(--color-prune-surface);
  border: 1px solid var(--color-bordure-fine);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color var(--transition-fast);
}

.fiche-personnage:hover {
  border-color: var(--color-framboise-sombre);
}

.fiche-personnage img {
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  display: block;
  background-color: var(--color-prune-surface);
}

.fiche-personnage__corps {
  padding: var(--space-16);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.fiche-personnage__corps h3 {
  margin-block-end: 0;
}

.fiche-personnage__role {
  color: var(--color-texte-secondaire);
  margin-block-end: 0;
}

.fiche-personnage__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  min-height: 2.75rem;
  padding: var(--space-8) var(--space-12);
  border: 1px solid var(--color-bordure-fine);
  border-radius: var(--radius-sm);
  background-color: transparent;
  color: var(--color-texte-principal);
  font-size: var(--text-small-size);
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
  align-self: flex-start;
}

.fiche-personnage__toggle:hover {
  border-color: var(--color-framboise-sombre);
  color: var(--color-framboise-action);
}

.fiche-personnage__toggle[aria-expanded="true"] span {
  transform: rotate(180deg);
}

.fiche-personnage__toggle span {
  display: inline-block;
  transition: transform var(--transition-accordion);
}

.fiche-personnage__details {
  margin-block-start: var(--space-8);
}

.fiche-personnage__details p {
  margin-block-end: 0;
}

/* Timeline des chapitres */
.timeline-chapitres__inner {
  width: 100%;
  max-width: var(--container-reading);
  margin-inline: auto;
  padding-inline: var(--gutter-mobile);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  text-align: left;
}

.timeline-chapitres__inner h2 {
  margin-block-end: 0;
}

.timeline-chapitres__lead {
  color: var(--color-texte-secondaire);
  margin-block-end: 0;
}

.timeline-chapitres__liste {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.timeline-chapitres__liste::before {
  content: "";
  position: absolute;
  left: 0.5rem;
  top: 0.25rem;
  bottom: 0.25rem;
  width: 1px;
  background-color: var(--color-or-rose);
}

.timeline-chapitres__jalon {
  position: relative;
  padding-inline-start: var(--space-32);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.timeline-chapitres__jalon::before {
  content: "";
  position: absolute;
  left: 0.25rem;
  top: 0.35rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--color-or-rose);
}

.timeline-chapitres__jalon h3 {
  margin-block-end: 0;
}

.timeline-chapitres__jalon p {
  margin-block-end: 0;
}

/* Chapitres secrets */
.chapitres-secrets__inner {
  width: 100%;
  max-width: var(--container-reading);
  margin-inline: auto;
  padding-inline: var(--gutter-mobile);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  text-align: left;
}

.chapitres-secrets__inner h2 {
  margin-block-end: 0;
}

.chapitres-secrets__lead {
  color: var(--color-texte-secondaire);
  margin-block-end: 0;
}

.chapitres-secrets__liste {
  margin-block-end: 0;
}

.chapitres-secrets__liste li {
  margin-block-end: var(--space-16);
}

.chapitres-secrets__liste li:last-child {
  margin-block-end: 0;
}

.chapitres-secrets__liste h3 {
  margin-block-end: var(--space-8);
}

.chapitres-secrets__liste p {
  margin-block-end: 0;
}

/* Conseils pour bien choisir */
.conseils-choix__inner {
  width: 100%;
  max-width: var(--container-reading);
  margin-inline: auto;
  padding-inline: var(--gutter-mobile);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  text-align: left;
}

.conseils-choix__inner h2 {
  margin-block-end: 0;
}

.conseils-choix__liste {
  margin-block-end: 0;
}

.conseils-choix__liste li {
  margin-block-end: var(--space-16);
}

.conseils-choix__liste li:last-child {
  margin-block-end: 0;
}

.conseils-choix__liste h3 {
  margin-block-end: var(--space-8);
}

.conseils-choix__liste p {
  margin-block-end: 0;
}

/* Témoignages */
.temoignages__inner {
  width: 100%;
  max-width: var(--container-grid);
  margin-inline: auto;
  padding-inline: var(--gutter-mobile);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  text-align: left;
}

.temoignages__inner h2 {
  margin-block-end: 0;
}

.temoignages__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--histoire-gap-cards);
}

.temoignages__citation {
  min-width: 0;
  margin-block-end: 0;
}

/* FAQ rapide */
.faq-rapide__inner {
  width: 100%;
  max-width: var(--container-reading);
  margin-inline: auto;
  padding-inline: var(--gutter-mobile);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  text-align: left;
}

.faq-rapide__inner h2 {
  margin-block-end: 0;
}

.faq-rapide__liste {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.faq-rapide__item {
  background-color: var(--color-prune-surface);
  border: 1px solid var(--color-bordure-fine);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.faq-rapide__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding: var(--space-16);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  min-height: 2.75rem;
}

.faq-rapide__question h3 {
  margin-block-end: 0;
  flex: 1;
  min-width: 0;
}

.faq-rapide__chevron {
  display: inline-block;
  transition: transform var(--transition-accordion);
  color: var(--color-texte-secondaire);
  font-size: var(--text-small-size);
}

.faq-rapide__question[aria-expanded="true"] .faq-rapide__chevron {
  transform: rotate(180deg);
}

.faq-rapide__reponse {
  padding: 0 var(--space-16) var(--space-16);
}

.faq-rapide__reponse p {
  margin-block-end: 0;
}

/* Appel à l'action final */
.appel-final {
  width: 100%;
  padding-inline: var(--gutter-mobile);
}

.appel-final__panneau {
  width: 100%;
  max-width: var(--container-reading);
  margin-inline: auto;
  background-color: var(--color-prune-elevee);
  border: 1px solid var(--color-framboise-sombre);
  border-radius: var(--radius-lg);
  padding: var(--space-32) var(--space-24);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
  text-align: center;
}

.appel-final__panneau h2 {
  margin-block-end: 0;
}

.appel-final__panneau p {
  margin-block-end: 0;
  color: var(--color-texte-secondaire);
}

.appel-final__cta {
  margin-block-start: var(--space-8);
}

/* Tablet : 720px et plus */
@media (min-width: 45rem) {
  .hero-narratif {
    min-height: 400px;
  }

  .hero-narratif__content {
    padding: var(--space-48) var(--gutter-desktop);
    align-items: center;
    text-align: center;
  }

  .hero-narratif__content h1 {
    font-size: var(--text-display-size);
  }

  .intro-narrative__inner,
  .choix-comptent__header,
  .routes-romantiques__header,
  .timeline-chapitres__inner,
  .chapitres-secrets__inner,
  .conseils-choix__inner,
  .faq-rapide__inner {
    padding-inline: var(--gutter-desktop);
  }

  .choix-comptent__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-inline: var(--gutter-desktop);
  }

  .routes-romantiques__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-inline: var(--gutter-desktop);
  }

  .temoignages__inner {
    padding-inline: var(--gutter-desktop);
  }

  .temoignages__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .appel-final {
    padding-inline: var(--gutter-desktop);
  }

  .timeline-chapitres__liste::before {
    left: 50%;
    transform: translateX(-50%);
  }

  .timeline-chapitres__jalon {
    width: 50%;
    padding-inline-start: 0;
  }

  .timeline-chapitres__jalon:nth-child(odd) {
    align-self: flex-start;
    padding-inline-end: var(--space-32);
    text-align: right;
  }

  .timeline-chapitres__jalon:nth-child(even) {
    align-self: flex-end;
    padding-inline-start: var(--space-32);
    text-align: left;
  }

  .timeline-chapitres__jalon::before {
    left: auto;
    right: -0.25rem;
  }

  .timeline-chapitres__jalon:nth-child(even)::before {
    left: -0.25rem;
    right: auto;
  }
}

/* Desktop large : 1024px et plus */
@media (min-width: 64rem) {
  .histoire-page {
    --histoire-gap-section: var(--space-64);
  }

  .hero-narratif {
    min-height: 400px;
  }

  .hero-narratif__content {
    padding: var(--space-64) var(--gutter-desktop);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .fiche-personnage__toggle span,
  .faq-rapide__chevron {
    transition: none;
  }
}