/* ------------------------------------------------------------------
   Ma Sérénade — feuille de style unique.

   Direction : décalque de la mise en page de SonglyGift (le leader du
   marché), demandée explicitement. Fond crème, colonne centrée, gros
   serif avec la seconde moitié en italique terracotta, bouton terracotta.
   Couleurs relevées au pixel sur leur page : #FFFAF6, #E07A5F, #2D3436.

   Les TEXTES, eux, sont écrits en français — pas traduits.
   ------------------------------------------------------------------ */

@font-face {
  font-family: 'Fraunces';
  src: url('/assets/fonts/Fraunces-normal.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Figtree';
  src: url('/assets/fonts/Figtree-normal.woff2') format('woff2');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --creme: #fffaf6;
  --creme-2: #fdf6f0;
  --blanc: #ffffff;
  --terre: #e07a5f;
  --terre-fonce: #c9654b;
  --terre-pale: #fbeae4;
  --encre: #2d3436;
  --encre-doux: #6e6a67;
  --trait: #efe4dc;
  --vert: #00b67a;

  --display: 'Fraunces', Georgia, serif;
  --corps: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --page: min(1080px, 100% - 2.5rem);
  --rayon: 16px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--creme);
  color: var(--encre);
  font-family: var(--corps);
  font-size: clamp(1.02rem, 0.98rem + 0.2vw, 1.12rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--display);
  font-variation-settings: 'SOFT' 30, 'WONK' 0, 'opsz' 120;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
img { max-width: 100%; }

:where(a, button, input, textarea, select):focus-visible {
  outline: 3px solid var(--terre);
  outline-offset: 3px;
  border-radius: 4px;
}
.champ:focus-visible { outline: 2px solid var(--terre); outline-offset: 0; }

.enveloppe { width: var(--page); margin-inline: auto; }
.centre { text-align: center; }

.oeil-seul {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ---------------- barre ---------------- */

.barre {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: 1.6rem;
}
.marque {
  font-family: var(--display);
  font-variation-settings: 'SOFT' 30, 'WONK' 0, 'opsz' 40;
  font-size: 1.42rem; font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none; color: var(--encre);
}
.marque span { color: var(--terre); }
.barre-lien {
  font-size: 0.94rem; color: var(--encre-doux); text-decoration: none;
}
.barre-lien:hover { color: var(--terre); }

/* ---------------- hero ---------------- */

.hero {
  text-align: center;
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 7vw, 5.5rem);
  display: grid; justify-items: center; gap: 1.5rem;
}
.hero h1 {
  font-size: clamp(2.4rem, 1.4rem + 4.4vw, 4.1rem);
  max-width: 15ch;
}
/* la seconde moitié du titre, en italique terracotta — signature du modèle */
.hero h1 em {
  font-style: italic; color: var(--terre); font-weight: 600;
}
.hero-texte {
  max-width: 46ch; color: var(--encre-doux);
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.25rem);
}
.mention { font-size: 0.92rem; color: var(--encre-doux); }

/* ---------------- bouton ---------------- */

.bouton {
  display: inline-flex; align-items: center; gap: 0.55rem;
  background: var(--terre); color: #fff;
  font-family: var(--corps); font-size: 1.08rem; font-weight: 700;
  letter-spacing: -0.01em;
  padding: 1.05rem 2.1rem;
  border: none; border-radius: 999px;
  text-decoration: none; cursor: pointer;
  transition: transform 0.16s ease, background 0.16s ease;
  box-shadow: 0 12px 28px -16px rgba(224, 122, 95, 0.95);
}
.bouton:hover { transform: translateY(-2px); background: var(--terre-fonce); }
.bouton:active { transform: translateY(0); }
.bouton[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }
.bouton-sobre {
  background: transparent; color: var(--encre);
  border: 1px solid var(--trait); box-shadow: none; font-weight: 600;
}
.bouton-sobre:hover { background: var(--creme-2); }

/* ---------------- bandeau de confiance ---------------- */

.confiance {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 0.65rem 0.9rem;
  font-size: 0.94rem; color: var(--encre-doux);
}
.visages { display: flex; }
.visages i {
  width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid var(--creme);
  margin-left: -10px; display: grid; place-items: center;
  font-style: normal; font-size: 0.85rem; font-weight: 700; color: #fff;
}
.visages i:first-child { margin-left: 0; }

.etoiles { display: flex; gap: 2px; }
.etoiles b {
  width: 21px; height: 21px; display: grid; place-items: center;
  background: var(--trait); border-radius: 3px;
}
.etoiles b svg { width: 14px; height: 14px; fill: #fff; }
.etoiles.pleines b { background: var(--vert); }

.tp-logo { display: inline-flex; align-items: center; gap: 0.3rem; font-weight: 700; color: var(--encre); }
.tp-logo svg { width: 17px; height: 17px; fill: var(--vert); }

/* ---------------- sections ---------------- */

.section { padding-block: clamp(3.2rem, 6.5vw, 5.5rem); }
.section-alt { background: var(--creme-2); }

.titre-section {
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.9rem);
  text-align: center;
}
.chapeau {
  margin: 0.9rem auto 0; max-width: 52ch;
  color: var(--encre-doux); text-align: center;
}

/* les marches : une vraie séquence, donc la numérotation est méritée */
.marches {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem; margin-top: clamp(2.2rem, 4vw, 3rem);
}
@media (max-width: 860px) { .marches { grid-template-columns: 1fr; } }

.marche {
  background: var(--blanc); border: 1px solid var(--trait);
  border-radius: var(--rayon); padding: 1.7rem 1.6rem;
  display: grid; gap: 0.55rem; align-content: start;
}
.marche-tete { display: flex; align-items: center; gap: 0.6rem; }
.marche-rang {
  font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 800; color: var(--terre);
}
.marche-tarif {
  font-size: 0.78rem; font-weight: 800;
  padding: 0.15rem 0.55rem; border-radius: 999px;
  background: #e8f7f0; color: #0a7a55;
}
.marche-tarif.payant { background: var(--terre-pale); color: var(--terre-fonce); }
.marche-emoji { font-size: 1.7rem; line-height: 1; }
.marche h3 { font-size: 1.28rem; }
.marche p { color: var(--encre-doux); font-size: 0.98rem; }

.apres-marches { margin-top: 2.4rem; display: grid; justify-items: center; gap: 0.8rem; }

/* ---------------- avis (emplacement réservé) ---------------- */

.avis-vide {
  margin-top: clamp(2rem, 4vw, 2.8rem);
  background: var(--blanc); border: 1px dashed var(--trait);
  border-radius: var(--rayon);
  padding: clamp(2rem, 4vw, 3rem);
  display: grid; justify-items: center; gap: 0.9rem; text-align: center;
}
.avis-vide p { color: var(--encre-doux); max-width: 46ch; }

.avis-grille {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 1.2rem; margin-top: clamp(2rem, 4vw, 2.8rem);
}
.avis {
  background: var(--blanc); border: 1px solid var(--trait);
  border-radius: var(--rayon); padding: 1.5rem;
  display: grid; gap: 0.8rem; align-content: start;
}
.avis p { font-size: 0.98rem; }
.avis footer { font-weight: 700; font-size: 0.94rem; }

/* ---------------- exemples ---------------- */

.exemples {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr));
  gap: 1.3rem; margin-top: clamp(2rem, 4vw, 2.8rem);
}
.exemple {
  background: var(--blanc); border: 1px solid var(--trait);
  border-radius: var(--rayon); padding: 1.4rem;
  display: grid; gap: 0.85rem; grid-template-rows: auto auto 1fr auto;
}
.exemple-occasion {
  font-size: 0.74rem; letter-spacing: 0.13em; text-transform: uppercase;
  font-weight: 800; color: var(--terre);
}
.exemple h3 { font-size: 1.18rem; }
.exemple .histoire {
  font-size: 0.95rem; color: var(--encre-doux); font-style: italic;
  border-left: 2px solid var(--terre-pale); padding-left: 0.9rem;
}

/* ---------------- lecteur ---------------- */

.lecteur { display: grid; gap: 0.7rem; }
.lecteur-haut { display: flex; align-items: center; gap: 0.8rem; }

.jouer {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  border: none; cursor: pointer;
  background: var(--terre); color: #fff;
  display: grid; place-items: center;
  transition: transform 0.16s ease, background 0.16s ease;
}
.jouer:hover { transform: scale(1.06); background: var(--terre-fonce); }
.jouer svg { width: 18px; height: 18px; }

.lecteur-titre { font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; font-size: 0.98rem; }
.lecteur-meta { font-size: 0.85rem; color: var(--encre-doux); }

.onde {
  display: flex; align-items: center; gap: 2px;
  height: 34px; width: 100%;
  cursor: pointer; border: none; background: none; padding: 0;
}
.onde span {
  flex: 1; border-radius: 1px; min-width: 2px;
  background: #ead9d0;
  transition: background 0.12s linear;
}
.onde span.on { background: var(--terre); }

/* ---------------- prix ---------------- */

.carte-prix {
  max-width: 460px; margin: clamp(2rem, 4vw, 2.8rem) auto 0;
  background: var(--blanc); border: 1px solid var(--trait);
  border-radius: var(--rayon); padding: clamp(1.8rem, 3vw, 2.4rem);
  display: grid; gap: 1.1rem; justify-items: center; text-align: center;
}
.montant {
  font-family: var(--display);
  font-variation-settings: 'SOFT' 30, 'WONK' 0, 'opsz' 144;
  font-size: clamp(2.8rem, 2rem + 4vw, 3.8rem); font-weight: 600; line-height: 1;
}
.montant small {
  display: block; font-family: var(--corps); font-size: 0.9rem;
  color: var(--encre-doux); font-weight: 500; margin-top: 0.6rem;
}
.inclus { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; text-align: left; }
.inclus li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.97rem; }
.inclus li::before { content: '✓'; color: var(--vert); font-weight: 800; flex: none; }

/* ---------------- questions ---------------- */

.questions { margin: clamp(2rem, 4vw, 2.6rem) auto 0; max-width: 720px; }
.question { border-bottom: 1px solid var(--trait); }
.question:first-child { border-top: 1px solid var(--trait); }
.question summary {
  cursor: pointer; list-style: none; padding: 1.2rem 2.2rem 1.2rem 0;
  font-weight: 700; position: relative;
}
.question summary::-webkit-details-marker { display: none; }
.question summary::after {
  content: '+'; position: absolute; right: 0.3rem; top: 50%;
  transform: translateY(-50%); color: var(--terre); font-size: 1.5rem; font-weight: 400;
}
.question[open] summary::after { content: '–'; }
.question p { padding-bottom: 1.3rem; color: var(--encre-doux); }

/* ---------------- appel final & pied ---------------- */

.final {
  text-align: center; display: grid; justify-items: center; gap: 1.3rem;
  padding-block: clamp(3.2rem, 6.5vw, 5.5rem);
}
.final h2 { font-size: clamp(2rem, 1.3rem + 3vw, 3.1rem); max-width: 17ch; }
.final h2 em { font-style: italic; color: var(--terre); }

.pied {
  border-top: 1px solid var(--trait);
  padding-block: 2.2rem; font-size: 0.92rem; color: var(--encre-doux);
}
.pied-rang { display: flex; flex-wrap: wrap; gap: 0.7rem 1.6rem; justify-content: space-between; }

/* ---------------- tunnel (quiz) & écoute ---------------- */

.tunnel { min-height: 100vh; display: flex; flex-direction: column; background: var(--creme); }
.tunnel-corps { flex: 1; display: grid; align-items: center; padding-block: clamp(1.5rem, 4vw, 3rem); }

.jauge { height: 3px; background: var(--trait); position: relative; }
.jauge i { position: absolute; inset: 0 auto 0 0; background: var(--terre); transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1); }

.etape { max-width: 640px; margin-inline: auto; width: 100%; }
.etape-rang {
  font-size: 0.76rem; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--terre); font-weight: 800; margin-bottom: 0.9rem;
}
.etape h2 { font-size: clamp(1.7rem, 1.15rem + 2.2vw, 2.4rem); }
.etape-aide { margin-top: 0.8rem; color: var(--encre-doux); font-size: 0.97rem; }

.champ {
  width: 100%; margin-top: 1.7rem;
  background: var(--blanc); border: 1px solid var(--trait);
  border-radius: 12px;
  color: var(--encre); font-family: var(--corps); font-size: 1.06rem;
  padding: 0.95rem 1.1rem;
}
.champ::placeholder { color: #b3aca7; }
.champ:focus { border-color: var(--terre); }
textarea.champ { min-height: 190px; resize: vertical; line-height: 1.6; }

.compteur { margin-top: 0.5rem; font-size: 0.85rem; color: var(--encre-doux); text-align: right; }

.choix { display: grid; gap: 0.65rem; margin-top: 1.7rem; }
.choix-grille { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.choix button {
  text-align: left; cursor: pointer;
  background: var(--blanc); border: 1px solid var(--trait); border-radius: 12px;
  color: var(--encre); font-family: var(--corps); font-size: 1rem;
  padding: 0.9rem 1.1rem;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.choix button:hover { border-color: var(--terre); background: var(--terre-pale); }
.choix button[aria-pressed='true'] { border-color: var(--terre); background: var(--terre-pale); }
.choix button b { display: block; font-weight: 700; }
.choix button i { display: block; font-style: normal; font-size: 0.87rem; color: var(--encre-doux); margin-top: 0.15rem; }

.tunnel-pied { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 2rem; }
.retour {
  background: none; border: none; cursor: pointer;
  color: var(--encre-doux); font-family: var(--corps); font-size: 0.95rem; padding: 0.5rem 0;
}
.retour:hover { color: var(--encre); }
.erreur { color: #b3402a; font-size: 0.92rem; margin-top: 0.9rem; }

.attente { max-width: 560px; margin-inline: auto; text-align: center; display: grid; gap: 1.2rem; justify-items: center; }
.attente h2 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.3rem); }
.attente p { color: var(--encre-doux); }

.souffle { display: flex; gap: 0.5rem; }
.souffle i {
  width: 9px; height: 9px; border-radius: 50%; background: var(--terre);
  animation: souffle 1.5s ease-in-out infinite;
}
.souffle i:nth-child(2) { animation-delay: 0.22s; }
.souffle i:nth-child(3) { animation-delay: 0.44s; }
@keyframes souffle { 0%, 100% { opacity: 0.25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-5px); } }

.etapes-prod { display: grid; gap: 0.5rem; margin-top: 0.4rem; text-align: left; }
.etape-prod { display: flex; gap: 0.7rem; align-items: center; font-size: 0.95rem; color: var(--encre-doux); }
.etape-prod b { color: var(--terre); font-weight: 800; width: 1.1rem; flex: none; }
.etape-prod.faite { color: var(--encre); }

.versions { display: grid; gap: 1.2rem; margin-top: 1.8rem; }
@media (min-width: 780px) { .versions { grid-template-columns: 1fr 1fr; } }
.versions article {
  background: var(--blanc); border: 1px solid var(--trait);
  border-radius: var(--rayon); padding: 1.3rem;
}

.bandeau-extrait {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 800; color: var(--terre);
}

.debloquer {
  margin-top: 2rem; background: var(--blanc);
  border: 2px solid var(--terre); border-radius: var(--rayon);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  display: grid; gap: 0.9rem; justify-items: start;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}