:root {
  --rose: #ef476f;
  --rose-dark: #c9184a;
  --pink-soft: #fff0f5;
  --pink-light: #fff7fa;
  --cream: #fffaf5;
  --wine: #761137;
  --gold: #d4a84f;
  --text: #4b2636;
  --white: #ffffff;
  --shadow: rgba(91, 27, 54, 0.18);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;

  font-family: "Montserrat", sans-serif;

  color: var(--text);

  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;

  background:
    radial-gradient(circle at top left, #ffd7e5 0%, transparent 32%),
    radial-gradient(circle at bottom right, #ffc9dc 0%, transparent 30%),
    linear-gradient(
      135deg,
      #fff6f9,
      #ffe6ef,
      #fff8f4
    );
}


/* =========================
   COEURS EN ARRIÈRE-PLAN
========================= */

.hearts-background {
  position: fixed;
  inset: 0;

  overflow: hidden;

  pointer-events: none;

  z-index: 0;
}

.floating-heart {
  position: absolute;

  bottom: -50px;

  color: rgba(239, 71, 111, 0.22);

  animation: floatHeart linear forwards;
}

@keyframes floatHeart {

  from {
    transform:
      translateY(0)
      rotate(0deg);

    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  to {
    transform:
      translateY(-120vh)
      rotate(360deg);

    opacity: 0;
  }
}


/* =========================
   MUSIQUE
========================= */

.yt-player-hidden {

  position: fixed;

  bottom: 0;

  left: 0;

  width: 2px;

  height: 2px;

  overflow: hidden;

  opacity: 0;

  pointer-events: none;

  z-index: -1;
}


.music-toggle {

  position: fixed;

  top: 18px;

  right: 18px;

  z-index: 50;

  width: 46px;

  height: 46px;

  display: none;

  align-items: center;

  justify-content: center;

  border: 1px solid rgba(255,255,255,.4);

  border-radius: 50%;

  background:
    linear-gradient(
      135deg,
      #a41348,
      #6d0c31
    );

  color: white;

  font-size: 18px;

  cursor: pointer;

  box-shadow:
    0 8px 20px rgba(91, 27, 54, .3);

  transition:
    transform .2s ease,
    opacity .2s ease;
}


.music-toggle.visible {
  display: flex;
}


.music-toggle:hover {
  transform: scale(1.08);
}


.music-toggle:active {
  transform: scale(.94);
}


html[dir="rtl"] .music-toggle {
  right: auto;
  left: 18px;
}


@media (max-width: 480px) {

  .music-toggle {
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    font-size: 15px;
  }

  html[dir="rtl"] .music-toggle {
    right: auto;
    left: 12px;
  }

}


/* =========================
   SÉLECTION DE LA LANGUE
========================= */

.lang-card {

  width: min(420px, 92vw);

  padding: 55px 40px;

  text-align: center;

  border-radius: 28px;

  background: rgba(255,255,255,.92);

  backdrop-filter: blur(18px);

  box-shadow:
    0 25px 80px rgba(99, 22, 53, .18);

  animation:
    floatCard 5s ease-in-out infinite;
}


.lang-heart {

  font-size: 54px;

  margin-bottom: 18px;

  animation:
    heartbeat 1.6s infinite;
}


.lang-title {

  margin: 0 0 30px;

  color: var(--wine);

  font-size: 17px;

  font-weight: 600;

  line-height: 1.9;
}


.lang-options {

  display: grid;

  gap: 14px;
}


.lang-button {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 12px;

  padding: 16px 20px;

  border: 1px solid #ead8df;

  border-radius: 16px;

  background: #fffafd;

  color: var(--text);

  cursor: pointer;

  font-size: 16px;

  font-weight: 600;

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease,
    background .2s ease;
}


.lang-button:hover {

  transform: translateY(-3px);

  border-color: var(--rose);

  background: #fff5f8;

  box-shadow:
    0 12px 25px rgba(239,71,111,.15);
}


.lang-button:active {

  transform: translateY(0) scale(.97);
}


.lang-flag {

  font-size: 24px;
}


/* =========================
   APPLICATION
========================= */

.app {
  position: relative;

  z-index: 2;

  min-height: 100vh;
  min-height: 100dvh;
}


/* =========================
   ÉCRANS
========================= */

.screen {
  display: none;

  min-height: 100vh;
  min-height: 100dvh;

  align-items: center;
  justify-content: center;

  padding: 30px 20px;

  perspective: 1600px;
}

.screen.active {
  display: flex;

  animation: screenFade 0.7s ease;
}

@keyframes screenFade {

  from {
    opacity: 0;
    transform: scale(0.97);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}


/* =========================
   COUVERTURE DU LIVRE
========================= */

.book-cover {

  --rx: 0deg;
  --ry: 0deg;
  --mx: 50%;
  --my: 50%;

  position: relative;

  width: min(530px, 95vw);

  min-height: 650px;

  padding: 70px 50px;

  text-align: center;

  color: #fff;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  border-radius:
    10px 28px 28px 10px;

  border:
    3px solid rgba(255,255,255,.25);

  background:

    radial-gradient(
      circle at var(--mx) var(--my),
      rgba(255,255,255,.18),
      transparent 40%
    ),

    radial-gradient(
      circle at 50% 25%,
      rgba(255,255,255,.14),
      transparent 28%
    ),

    linear-gradient(
      145deg,
      #6d0c31,
      #a41348 45%,
      #590d2c
    );

  transform-style: preserve-3d;

  transform:
    rotateX(var(--rx))
    rotateY(var(--ry));

  transition:
    transform .4s cubic-bezier(.22,1,.36,1),
    box-shadow .4s ease;

  will-change: transform;

  box-shadow:

    -16px 18px 0 #410720,

    -21px 23px 40px rgba(74, 8, 35, .35),

    0 25px 60px rgba(74, 8, 35, .3),

    inset 4px 0 12px rgba(255,255,255,.08);
}


.book-cover:hover {

  box-shadow:

    -16px 18px 0 #410720,

    -26px 30px 55px rgba(74, 8, 35, .4),

    0 35px 80px rgba(74, 8, 35, .35),

    inset 4px 0 12px rgba(255,255,255,.1);
}


.book-cover::before {

  content: "";

  position: absolute;

  left: 20px;

  top: 15px;

  bottom: 15px;

  width: 2px;

  background:
    rgba(255,255,255,.25);

  transform: translateZ(2px);
}


.book-cover > * {
  transform: translateZ(35px);
}


.cover-decoration,
.heart-big {
  transform: translateZ(60px);
}


.cover-decoration {

  width: 75px;

  height: 75px;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 20px;

  border-radius: 50%;

  border:
    1px solid rgba(255,255,255,.4);

  font-size: 38px;

  color: #ffd5df;
}


.small-title {

  text-transform: uppercase;

  letter-spacing: 3px;

  font-size: 12px;

  font-weight: 600;

  opacity: .85;
}


.book-cover h1 {

  margin: 15px 0 0;

  font-family: "Great Vibes", cursive;

  font-weight: 400;

  font-size: clamp(60px, 11vw, 92px);

  line-height: .9;
}


.book-cover h1 span {

  display: block;

  color: #ffd6e1;
}


.heart-big {

  margin: 25px 0;

  font-size: 50px;

  filter:
    drop-shadow(
      0 8px 10px rgba(0,0,0,.15)
    );

  animation:
    heartbeat 1.6s infinite;
}


@keyframes heartbeat {

  0%, 100% {
    transform: scale(1);
  }

  15% {
    transform: scale(1.15);
  }

  30% {
    transform: scale(1);
  }

  45% {
    transform: scale(1.12);
  }

  60% {
    transform: scale(1);
  }
}


.intro {

  max-width: 380px;

  margin: 0 auto;

  line-height: 1.8;

  font-size: 16px;
}


.signature {

  margin: 28px 0;

  font-family: "Great Vibes", cursive;

  font-size: 31px;

  color: #ffdce5;
}


/* =========================
   BOUTONS
========================= */

button {
  font-family: inherit;

  -webkit-tap-highlight-color: transparent;

  touch-action: manipulation;
}

.main-button,
.next-button,
.copy-button,
.whatsapp-button {

  border: 0;

  cursor: pointer;

  border-radius: 100px;

  padding: 17px 28px;

  font-size: 15px;

  font-weight: 700;

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    opacity .2s ease;
}


.main-button {

  background: white;

  color: var(--wine);

  box-shadow:
    0 10px 25px rgba(0,0,0,.15);
}


.main-button:hover {

  transform:
    translateY(-3px)
    scale(1.02);
}


.main-button:active,
.next-button:active:not(:disabled),
.copy-button:active,
.whatsapp-button:active {

  transform:
    translateY(0)
    scale(.97);
}


.main-button span {
  margin-left: 8px;
}


/* =========================
   LIVRE
========================= */

.book-container {

  width: min(1100px, 96vw);

  perspective: 2200px;
}


.book {

  position: relative;

  min-height: 660px;

  display: grid;

  grid-template-columns: 1fr 1fr;

  overflow: hidden;

  border-radius: 18px;

  background: var(--cream);

  transform-style: preserve-3d;

  transform: rotateX(2deg);

  box-shadow:

    0 30px 80px rgba(92, 26, 52, .22),

    0 8px 20px rgba(92, 26, 52, .12),

    0 2px 0 rgba(255,255,255,.6) inset;
}


.book::before {

  content: "";

  position: absolute;

  left: 50%;

  top: 0;

  bottom: 0;

  width: 40px;

  margin-left: -20px;

  pointer-events: none;

  z-index: 3;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(91, 27, 54, .09) 50%,
      transparent
    );
}


.page {

  position: relative;

  padding: 55px 50px;

  min-height: 660px;
}


.page-left {

  display: flex;

  flex-direction: column;

  background:

    radial-gradient(
      circle at top left,
      rgba(239,71,111,.10),
      transparent 35%
    ),

    linear-gradient(
      135deg,
      #fff8f3,
      #fff2f6
    );

  border-right:
    1px solid rgba(91, 27, 54, .1);

  box-shadow:
    inset -12px 0 25px rgba(91,27,54,.05);
}


.page-right {

  background:

    radial-gradient(
      circle at bottom right,
      rgba(239,71,111,.06),
      transparent 35%
    ),

    #fffefc;

  transform-origin: left center;

  transform-style: preserve-3d;

  backface-visibility: hidden;
}


.page-right::after {

  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  opacity: 0;

  background:
    linear-gradient(
      90deg,
      rgba(74,8,35,.35),
      transparent 35%
    );

  transition: opacity .2s ease;
}


.page-right.turning::after {
  opacity: 1;
}


.page-right.turning {

  animation:
    pageTurn3d .6s cubic-bezier(.45,.05,.55,.95);
}


@keyframes pageTurn3d {

  0% {
    transform: rotateY(0deg);
  }

  50% {
    transform: rotateY(-100deg);
  }

  50.001% {
    transform: rotateY(80deg);
  }

  100% {
    transform: rotateY(0deg);
  }
}


/* =========================
   PAGE GAUCHE
========================= */

.page-header {

  color: var(--rose-dark);

  text-transform: uppercase;

  letter-spacing: 2px;

  font-size: 12px;

  font-weight: 700;
}


.mini-heart {

  margin-right: 5px;
}


.chapter-number {

  margin-top: 90px;

  color: var(--gold);

  font-size: 13px;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 3px;
}


.page-left h2 {

  margin: 10px 0 22px;

  font-family: "Great Vibes", cursive;

  font-size: 55px;

  line-height: 1;

  font-weight: 400;

  color: var(--wine);
}


.quote {

  max-width: 380px;

  font-family: Georgia, serif;

  font-style: italic;

  font-size: 17px;

  line-height: 1.8;

  color: #7e5363;
}


.progress-wrapper {

  margin-top: auto;
}


.progress-info {

  display: flex;

  justify-content: space-between;

  margin-bottom: 10px;

  font-size: 12px;

  font-weight: 600;

  color: #805466;
}


.progress-bar {

  height: 7px;

  overflow: hidden;

  border-radius: 100px;

  background: #eddde3;
}


.progress-fill {

  width: 0;

  height: 100%;

  border-radius: 100px;

  background:
    linear-gradient(
      90deg,
      #c9184a,
      #ff758f
    );

  transition:
    width .4s ease;
}


.page-decoration {

  position: absolute;

  right: 35px;

  top: 35px;

  font-size: 80px;

  color:
    rgba(201, 24, 74, .06);
}


/* =========================
   QUESTIONS
========================= */

.question-number {

  display: inline-block;

  padding: 7px 13px;

  border-radius: 30px;

  background: #fff0f4;

  color: var(--rose-dark);

  font-size: 11px;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 1px;
}


.page-right h3 {

  margin:
    25px 0 30px;

  font-size:
    clamp(23px, 3vw, 30px);

  line-height: 1.45;

  color: #4b2030;
}


.answers {

  display: grid;

  gap: 13px;
}


.answer-button {

  width: 100%;

  display: flex;

  align-items: center;

  gap: 15px;

  padding: 16px 18px;

  border-radius: 14px;

  border:
    1px solid #ead8df;

  background:
    rgba(255,255,255,.8);

  color: #563444;

  cursor: pointer;

  text-align: left;

  font-size: 14px;

  line-height: 1.45;

  transition:
    .25s ease;
}


.answer-button:hover {

  transform:
    translateX(4px);

  border-color:
    #ec8fab;

  background:
    #fff5f8;
}


.answer-button:active {

  transform:
    translateX(2px)
    scale(.98);
}


.answer-letter {

  flex:
    0 0 35px;

  width: 35px;

  height: 35px;

  display: flex;

  justify-content: center;

  align-items: center;

  border-radius: 50%;

  background:
    #fff0f4;

  color:
    var(--rose-dark);

  font-weight: 700;

  transition:
    .2s;
}


.answer-button.selected {

  border-color:
    var(--rose);

  background:
    linear-gradient(
      135deg,
      #fff0f5,
      #ffe7ef
    );

  box-shadow:
    0 7px 18px rgba(239,71,111,.12);
}


.answer-button.selected
.answer-letter {

  color: white;

  background:
    var(--rose-dark);
}


/* =========================
   TEXTE LIBRE
========================= */

.free-answer {

  width: 100%;

  min-height: 220px;

  padding: 20px;

  resize: vertical;

  border:
    1px solid #ead5dd;

  border-radius: 16px;

  outline: none;

  color: var(--text);

  background: #fffafd;

  font-family: inherit;

  font-size: 15px;

  line-height: 1.7;

  transition:
    border .2s,
    box-shadow .2s;
}


.free-answer:focus {

  border-color:
    var(--rose);

  box-shadow:
    0 0 0 4px rgba(239,71,111,.08);
}


.hidden {
  display: none !important;
}


/* =========================
   NAVIGATION
========================= */

.navigation {

  display: flex;

  gap: 15px;

  justify-content: space-between;

  margin-top: 35px;
}


.secondary-button {

  padding: 14px 18px;

  border: 0;

  border-radius: 12px;

  background: transparent;

  color: #876171;

  cursor: pointer;

  font-weight: 600;
}


.next-button {

  margin-left: auto;

  color: white;

  background:
    linear-gradient(
      135deg,
      #c9184a,
      #ef476f
    );

  box-shadow:
    0 10px 20px rgba(201,24,74,.20);
}


.next-button:hover:not(:disabled) {

  transform:
    translateY(-2px);
}


.next-button:disabled {

  opacity: .35;

  cursor:
    not-allowed;
}


/* =========================
   PAGE FINALE
========================= */

.final-card {

  width:
    min(620px, 95vw);

  padding:
    55px 45px;

  text-align:
    center;

  border-radius:
    28px;

  background:
    rgba(255,255,255,.92);

  backdrop-filter:
    blur(18px);

  transform-style: preserve-3d;

  animation:
    floatCard 5s ease-in-out infinite;

  box-shadow:
    0 25px 80px rgba(99, 22, 53, .18);
}


@keyframes floatCard {

  0%, 100% {
    transform:
      translateY(0)
      rotateX(0deg);
  }

  50% {
    transform:
      translateY(-10px)
      rotateX(1.5deg);
  }
}


.final-heart {

  font-size:
    65px;

  animation:
    heartbeat 1.6s infinite;
}


.final-card h2 {

  margin:
    10px 0;

  color:
    var(--wine);

  font-family:
    "Great Vibes", cursive;

  font-size:
    62px;

  font-weight:
    400;
}


.final-message {

  max-width:
    480px;

  margin:
    0 auto 30px;

  color:
    #765363;

  font-size:
    14px;

  line-height:
    1.8;
}


.knowledge-result {

  margin:
    25px 0;

  padding:
    23px;

  border-radius:
    18px;

  background:
    linear-gradient(
      135deg,
      #fff2f6,
      #fff9f5
    );
}


.knowledge-result span {

  display:
    block;

  margin-bottom:
    7px;

  font-size:
    13px;

  color:
    #865468;
}


.knowledge-result strong {

  color:
    var(--rose-dark);

  font-size:
    33px;
}


.love-message {

  margin:
    25px 0 30px;
}


.love-message p {

  margin-bottom:
    6px;

  font-size:
    13px;
}


.love-message strong {

  color:
    var(--wine);

  font-family:
    "Great Vibes", cursive;

  font-size:
    30px;
}


.copy-button,
.whatsapp-button {

  display:
    block;

  width:
    100%;

  max-width:
    420px;

  margin:
    12px auto;

  color:
    white;
}


.copy-button {

  background:
    linear-gradient(
      135deg,
      #761137,
      #a41348
    );
}


.whatsapp-button {

  background:
    linear-gradient(
      135deg,
      #128c7e,
      #25d366
    );
}


.copy-button:hover,
.whatsapp-button:hover {

  transform:
    translateY(-2px);

  box-shadow:
    0 12px 25px rgba(0,0,0,.13);
}


.copy-confirmation {

  height:
    20px;

  margin:
    12px 0;

  opacity:
    0;

  color:
    #138f55;

  font-size:
    13px;

  font-weight:
    600;

  transition:
    opacity .3s;
}


.copy-confirmation.show {
  opacity: 1;
}


.restart-button {

  margin-top:
    10px;

  border:
    0;

  background:
    transparent;

  color:
    #9a7181;

  cursor:
    pointer;

  font-weight:
    600;
}


/* =========================
   RESPONSIVE
========================= */

@media (max-width: 800px) {

  .screen {
    padding:
      18px 10px;

    align-items:
      flex-start;
  }

  .book-container {
    width: min(600px, 100%);
  }

  .book {
    display:
      block;

    min-height:
      auto;

    border-radius: 20px;

    transform: none;
  }

  .book::before {
    display: none;
  }

  .page {
    min-height:
      auto;

    padding:
      35px 25px;
  }

  .page-left {
    min-height:
      auto;

    padding-bottom: 26px;

    border-right: 0;

    border-bottom:
      1px solid rgba(91, 27, 54, .1);

    box-shadow:
      inset 0 -12px 25px rgba(91,27,54,.05);
  }

  .chapter-number {
    margin-top:
      16px;
  }

  .page-left h2 {
    font-size:
      40px;

    margin-bottom: 14px;
  }

  .quote {
    font-size: 15px;
  }

  .progress-wrapper {
    margin-top:
      22px;
  }

  .page-decoration {
    font-size: 60px;
    right: 20px;
    top: 20px;
  }

  .book-cover {
    min-height:
      auto;

    width: min(500px, 100%);

    padding:
      45px 28px;
  }

  .heart-big {
    margin: 18px 0;
  }

  .final-card {
    width: min(560px, 100%);

    padding:
      38px 24px;
  }

  .final-card h2 {
    font-size: 48px;
  }

}


@media (max-width: 480px) {

  .screen {
    padding: 14px 8px;
  }

  .page {
    padding:
      26px 16px;
  }

  .page-left {
    padding: 26px 16px 22px;
  }

  .book-cover {
    padding: 36px 20px;

    border-radius: 10px 20px 20px 10px;
  }

  .book-cover h1 {
    font-size: clamp(48px, 15vw, 70px);
  }

  .small-title {
    font-size: 11px;
    letter-spacing: 2px;
  }

  .intro {
    font-size: 14.5px;
  }

  .page-left h2 {
    font-size: 34px;
  }

  .page-right h3 {
    margin: 18px 0 22px;
    font-size: clamp(19px, 5.5vw, 24px);
  }

  .answer-button {
    padding:
      13px 14px;

    gap: 12px;

    font-size: 13.5px;
  }

  .answer-letter {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    font-size: 13px;
  }

  .free-answer {
    min-height: 160px;
    padding: 16px;
    font-size: 14px;
  }

  .navigation {
    gap:
      10px;

    margin-top: 26px;
  }

  .secondary-button {
    padding:
      12px 10px;

    font-size: 13.5px;
  }

  .next-button {
    padding:
      14px 20px;

    font-size: 14px;
  }

  .final-card h2 {
    font-size: 38px;
  }

  .final-heart {
    font-size: 52px;
  }

  .final-message {
    font-size: 13.5px;
  }

  .knowledge-result {
    padding: 18px;
  }

  .copy-button,
  .whatsapp-button {
    padding: 15px 20px;
    font-size: 14px;
  }

}


@media (max-width: 360px) {

  .book-cover h1 {
    font-size: clamp(40px, 15vw, 56px);
  }

  .page-left h2 {
    font-size: 30px;
  }

  .answer-button {
    font-size: 13px;
  }

}


/* Écrans tactiles : pas de hover fantôme, on garde l'accent sur active */
@media (hover: none) {

  .answer-button:hover {
    transform: none;
    border-color: #ead8df;
    background: rgba(255,255,255,.8);
  }

  .main-button:hover {
    transform: none;
  }

}


/* =========================
   ARABE / RTL
========================= */

body.lang-ar {

  font-family: "Reem Kufi", "Montserrat", sans-serif;

}


body.lang-ar .book-cover h1,
body.lang-ar .page-left h2,
body.lang-ar .final-card h2,
body.lang-ar .signature,
body.lang-ar .love-message strong,
body.lang-ar .lang-title {

  font-family: "Amiri", "Reem Kufi", serif;

}


body.lang-ar .quote {

  font-family: "Amiri", serif;

  font-style: normal;

}


/* Reliure et décorations qui doivent s'inverser en RTL */

html[dir="rtl"] .book-cover::before {
  left: auto;
  right: 20px;
}

html[dir="rtl"] .page-decoration {
  right: auto;
  left: 35px;
}

html[dir="rtl"] .page-left {
  border-right: 0;
  border-left: 1px solid rgba(91, 27, 54, .1);

  box-shadow:
    inset 12px 0 25px rgba(91,27,54,.05);
}

html[dir="rtl"] .page-right {
  transform-origin: right center;
}

html[dir="rtl"] .main-button span {
  margin-left: 0;
  margin-right: 8px;
}

html[dir="rtl"] .next-button {
  margin-left: 0;
  margin-right: auto;
}

html[dir="rtl"] .answer-button {
  text-align: right;
}

html[dir="rtl"] .mini-heart {
  margin-right: 0;
  margin-left: 5px;
}

@media (max-width: 800px) {

  html[dir="rtl"] .page-left {
    border-left: 0;
    border-bottom: 1px solid rgba(91, 27, 54, .1);

    box-shadow:
      inset 0 -12px 25px rgba(91,27,54,.05);
  }

  html[dir="rtl"] .page-decoration {
    left: 20px;
  }

}