/* Page /creators — familles créatrices (gifting). Complète style.css + home-v2.css, même DA que l'accueil.
   Élément fort : « le marché » en deux panneaux teintés face à face (vert = ce que vous recevez, lilas = ce qu'on
   aimerait), reliés par un échange. Le reste reprend les composants du site (bandes, étapes, FAQ, appel violet). */

.creators .hero h1 { max-width: 15ch; }
.creators .nav .btn--sm { padding: 0 20px; }

/* --- Étapes (vraie séquence : colorier → scanner → regarder) --- */
.cr-steps { list-style: none; display: grid; gap: 24px; max-width: 1040px; margin: 0 auto; }
.cr-steps li { display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: start; align-content: start; }
.cr-steps .n {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: var(--bg); color: var(--red); font-size: 1.75rem; font-weight: 800; line-height: 1;
}
.cr-steps h3 { font-size: 1.25rem; margin: 6px 0 4px; }
.cr-steps p { font-size: 1.0625rem; }
@media (min-width: 900px) {
  .cr-steps { grid-template-columns: repeat(3, 1fr); gap: 40px; }
  .cr-steps li { grid-template-columns: 1fr; gap: 12px; }
}

/* --- Le marché --- */
.deal { position: relative; display: grid; gap: 16px; max-width: 1040px; margin: 0 auto; }
.deal-card { border-radius: var(--r-panel); padding: 28px 24px 30px; }
.deal-card--get { background: var(--dino-tint); }
.deal-card--give { background: var(--uni-tint); }
.deal-card h3 { font-size: 1.5rem; margin-bottom: 14px; }
.deal-card--get h3 { color: var(--dino-deep); }
.deal-card--give h3 { color: var(--uni-deep); }
.deal-card ul { list-style: none; display: grid; gap: 12px; }
.deal-card li { position: relative; padding-left: 30px; font-size: 1.0625rem; color: var(--ink); }
.deal-card li::before {
  content: ''; position: absolute; left: 0; top: .2em; width: 20px; height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%232f7a3a'/%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.deal-card--give li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%237a52c7'/%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
/* L'échange entre les deux panneaux */
.deal-swap {
  justify-self: center; align-self: center; z-index: 1; display: grid; place-items: center;
  width: 52px; height: 52px; margin: -34px 0; border-radius: 50%; background: #fff; color: var(--ink); box-shadow: var(--shadow);
}
.deal-swap svg { width: 26px; height: 26px; transform: rotate(90deg); }
@media (min-width: 720px) {
  .deal { grid-template-columns: 1fr auto 1fr; gap: 0 10px; align-items: stretch; }
  .deal-swap { margin: 0 -26px; }
  .deal-swap svg { transform: none; }
  .deal-card { padding: 36px 40px 40px; }
}

.deal-note { max-width: 62ch; margin: 28px auto 0; text-align: center; font-size: 1.0625rem; }

/* --- Choix du livre : deux colonnes teintées (vert dino, lilas licorne), 3 vraies photos chacune --- */
.bookpick-grid { display: grid; gap: 20px; max-width: 1040px; margin: 0 auto; }
.bookpick { --tint: var(--dino-tint); --deep: var(--dino-deep); background: var(--tint); border-radius: var(--r-panel); padding: 14px 14px 28px; text-align: center; }
.bookpick--unicorn { --tint: var(--uni-tint); --deep: var(--uni-deep); }
.bookpick-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 20px; }
.bookpick-photos img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 18px; }
.bookpick-photos .bookpick-main { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
.bookpick h3 { color: var(--deep); font-size: 1.625rem; margin-bottom: 6px; }
.bookpick p { max-width: 36ch; margin: 0 auto 18px; color: var(--ink); }
.bookpick .btn { max-width: 100%; white-space: normal; text-align: center; line-height: 1.2; }
@media (min-width: 720px) { .bookpick-grid { grid-template-columns: 1fr 1fr; gap: 24px; } .bookpick { padding: 16px 16px 32px; } }

/* --- Preuve : la vidéo UGC (verticale) à côté des notes Amazon --- */
.proof { display: grid; gap: 28px; justify-items: center; max-width: 960px; margin: 0 auto; }
.proof-video { width: min(100%, 300px); }
.proof-video video { width: 100%; height: auto; aspect-ratio: 480 / 848; border-radius: var(--r-media); background: var(--ink); box-shadow: var(--shadow-lg); }
.proof-video figcaption { margin-top: 10px; text-align: center; font-size: .95rem; color: var(--muted); }
.proof-text { text-align: center; max-width: 46ch; order: -1; }  /* mobile : titre et notes avant la vidéo */
.proof-text h2 { margin-bottom: 18px; }
@media (min-width: 720px) {
  .proof { grid-template-columns: 300px 1fr; align-items: center; gap: 56px; }
  .proof-text { text-align: left; order: 0; }
  .proof-text .rating { justify-content: flex-start; }
  .proof-text .rating-detail { margin-left: 0; }
}
.rating { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 14px; }
.rating .stars { color: var(--yellow); font-size: 2rem; letter-spacing: 2px; line-height: 1; text-shadow: 0 2px 0 rgba(46,42,94,.12); }
.rating-score { font-size: 1.5rem; font-weight: 800; color: var(--ink); }
.rating-detail { margin: 10px auto 22px; max-width: 46ch; color: var(--muted); font-size: 1rem; }

/* --- FAQ --- */
.cr-faq { max-width: 760px; margin: 0 auto; }

/* --- Bouton de l'appel final : adresse longue, elle peut passer à la ligne sur petit écran --- */
.creators .final .btn { max-width: 100%; white-space: normal; text-align: center; line-height: 1.2; padding-top: 14px; padding-bottom: 14px; }