/* style.css */
:root {
  --color-primary: #e91e63;   /* Rose vif (couleur principale) */
  --color-secondary: #9c27b0; /* Violet (couleur secondaire) */
  --color-light-bg: #fff0f5;  /* Rose très clair pour sections en surbrillance */
  --color-light-bg-alt: #FFFDE7; /* Jaune très clair pour alternance */
}

/* Réinitialisation de base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.6;
  color: #333;
  background: #fff;
}
/* Titres globaux avec Poppins */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.2;
  letter-spacing: .2px;
  margin-bottom: .5em;
}

/* H1 déjà géré avec .brand-title */

/* H2 : moderne, couleur primaire */
h2 {
  font-weight: 800;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--color-primary);
  text-align: center;
}

/* H3 : sobre et fort */
h3 {
  font-weight: 700;
  font-size: 1.15rem;
  color: #111;
}

a {
  text-decoration: none;
  color: unset;
}

/* --- FIX header : logo + H1 sur une seule ligne, collés --- */
.site-header{
  display:flex;
  align-items:center;
  justify-content:center;   /* centre l’ensemble dans la page */
  gap:10px;                 /* logo très près du titre */
  padding:18px 20px;
  flex-wrap:nowrap;         /* surtout pas de retour à la ligne */
  max-width:1200px;
  margin:0 auto;
}
.site-logo{
  height:80px;              /* petit logo */
  width:auto;
  flex:0 0 auto;
}

/* Écrase la version "plein écran" du H1 définie plus haut */
.brand-title{
  display:inline-block !important;
  width:auto !important;
  margin:0 !important;
  text-align:left !important;
}
.brand-title::after{
  margin:8px 0 0 !important;   /* trait sous le H1, aligné à gauche */
}

/* Option si tu veux aligner tout à gauche au lieu de centrer */
@media (min-width:0){
  .site-header.left { justify-content:flex-start; }
}




/* Section spacing */
section {
  padding: 60px 20px;
  max-width: 1200px;
  margin: 0 auto;
}
section h2 {
  color: var(--color-primary);
  margin-bottom: 1em;
  font-size: 1.8em;
}
section p {
  margin-bottom: 1em;
  font-size: 1.1em;
}

/* === ESPACE ENTRE SECTIONS (sans changer la largeur) === */
:root{
  --section-gap: clamp(48px, 7vw, 100px); /* distance entre blocs */
}

/* garde ton width/centrage existant */
/* ajoute seulement de l'air entre deux sections */
section + section{
  margin-top: var(--section-gap);
}

/* un peu d'air après le header aussi */
.site-header + section{
  margin-top: var(--section-gap);
}


/* ===== H1 marque – cancion personalizada ===== */
.brand-title{
  font-family: 'Poppins','Helvetica Neue',Arial,sans-serif;
  font-weight: 900;
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: .3px;
  margin: 0 0 .35em;
  text-transform: none;  
  /* on garde exactement le texte fourni */
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  -webkit-background-clip: text;  background-clip: text;
  color: transparent;
  /* barre d’accent en dessous */
  position: relative;
    display: block;
  text-align: center;
  margin: 25px auto 40px;  /* marge au-dessus et en dessous */
  width: 100%;
}
.brand-title::after{
  content: "";
  display: block;
  width: 88px; height: 6px;
  margin: 10px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  opacity: .9;
}

/* Option : inverser le dégradé sur le 2e mot si tu utilises <span> */
.brand-title span{
  background: linear-gradient(135deg, var(--color-secondary), var(--color-primary));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}



/* Hero section */
.hero {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: #fff;
  text-align: center;
  padding: 100px 20px;
}
.hero h1 {
  font-size: 2.5em;
  margin-bottom: 0.4em;
}
.hero .tagline {
  font-size: 1.3em;
  margin-bottom: 1.2em;
  font-style: italic;
}

/* CTA button */
.cta-button {
  display: inline-block;
  background: var(--color-primary);
  color: #fff;
  padding: 15px 25px;
  font-size: 1.1em;
  font-weight: bold;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  transition: background 0.3s;
  margin-top: 15px;
}
.cta-button:hover {
  background: #d81b60; /* couleur primaire légèrement assombrie */
}


/* ===== THEMATIC CARDS – look moderne ===== */
.thematic-cards{
  background:
    radial-gradient(900px 240px at 50% 0, rgba(233,30,99,.08), transparent 60%),
    #fff;
  padding:72px 20px;
  text-align:center;
}
.thematic-cards h2{
  color:#111;
  font-size:clamp(1.6rem,3vw,2.4rem);
  letter-spacing:.2px;
  margin-bottom:28px;
}
.thematic-cards h2::after{
  content:"";
  display:block;
  width:72px;height:4px;margin:12px auto 0;
  border-radius:999px;
  background:linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  opacity:.8;
}

/* Grille fluide centrée */
.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  gap:20px;
  max-width:1100px;
  margin:0 auto;
}

/* Cartes modernes */
.thematic-card{
  position:relative;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-left:none; /* override ancien style */
  border-radius:16px;
  padding:22px 20px;
  box-shadow:0 12px 28px rgba(0,0,0,.06);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  display:flex; flex-direction:column; gap:8px;
}
.thematic-card::before{
  content:"";
  position:absolute; left:12px; right:12px; top:10px; height:4px;
  background:linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  border-radius:999px;
  opacity:.9;
}
.thematic-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 38px rgba(0,0,0,.08);
  border-color:rgba(233,30,99,.28);
}

/* Titres + texte */
.thematic-card h3{
  color:#111;
  font-weight:900;
  font-size:1.1rem;
  display:flex; align-items:center; gap:8px;
}
.thematic-card p{
  color:#444;
  line-height:1.65;
  font-size:.98rem;
  text-align:left;
}

/* Mobile */
@media (max-width:560px){
  .thematic-cards{ padding:64px 16px; }
  .thematic-card{ padding:18px; }
}





/* How it works (steps) */
/* ===== HOW v2 – cartes lisibles & timeline douce ===== */
.how--v2{
  background:
    radial-gradient(900px 240px at 50% 0, rgba(233,30,99,.08), transparent 60%),
    #fff;
  padding:72px 20px;
  text-align:center;
}
.how--v2 h2{
  color:#111;
  font-size:clamp(1.6rem,3vw,2.4rem);
  letter-spacing:.2px;
  margin-bottom:28px;
}
.how--v2 h2::after{
  content:"";
  display:block;
  width:72px;height:4px;margin:12px auto 0;
  border-radius:999px;
  background:linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  opacity:.85;
}

/* grille responsive */
.steps-v2{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px,1fr));
  gap:18px;
  max-width:1100px;
  margin:22px auto 0;
}

/* carte */
.step-card{
  position:relative;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:16px;
  padding:22px 18px 18px;
  text-align:left;
  box-shadow:0 12px 28px rgba(0,0,0,.06);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.step-card:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.08);
  border-color:rgba(233,30,99,.22);
}

/* pastille numéro + filet */
.step-num{
  position:absolute; left:16px; top:-16px;
  width:36px; height:36px; border-radius:12px;
  display:grid; place-items:center;
  font-weight:900; color:#fff;
  background:linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  box-shadow:0 10px 20px rgba(233,30,99,.25);
}
.step-card::after{
  content:"";
  position:absolute; left:16px; right:16px; top:14px;
  height:4px; border-radius:999px;
  background:linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  opacity:.12;
}

/* titres & bullets ultra lisibles */
.step-card h3{
  margin:10px 0 10px;
  font-weight:800; color:#111; font-size:1.08rem;
}
.step-points{
  margin:0; padding:0; list-style:none;
  display:flex; flex-direction:column; gap:8px;
}
.step-points li{
  position:relative; padding-left:28px;
  color:#333; line-height:1.55; font-size:.98rem;
}
.step-points li::before{
  content:"✓";
  position:absolute; left:0; top:0.1rem;
  width:18px; height:18px; display:grid; place-items:center;
  border-radius:50%;
  color:#fff; font-size:.8rem;
  background:var(--color-primary);
  box-shadow:0 0 0 4px rgba(233,30,99,.12);
}
.step-note{
  margin-top:10px; color:#666; font-size:.92rem;
}

/* mobile */
@media (max-width:560px){
  .how--v2{ padding:64px 16px; }
  .step-card{ padding:20px 16px 16px; }
}



/* Team section */
.team {
  background: #f9f9f9;
}

/* Examples (audio samples) section */
/* 💎 PLAYER ULTRA-STYLE */
.player {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 18px 20px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.player-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .95em;
  font-weight: 600;
  color: #555;
}

.track-title {
  color: var(--color-secondary);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 70%;
}

.time-display {
  font-family: monospace;
  color: #888;
}

.player-controls {
  display: flex;
  align-items: center;
  gap: 14px;
}

.btn {
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 50%;
  font-size: 1.4em;
  color: #fff;
  background: var(--color-primary);
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.btn:hover   { transform: translateY(-2px); }
.btn:active  { transform: scale(.95); }

.stop-btn {
  background: #d32f2f;
}

.timeline {
  flex: 1;
  height: 8px;
  position: relative;
  background: #ececec;
  border-radius: 5px;
  overflow: hidden;
}
.progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: var(--color-primary);
  transition: width .2s ease;
}

/* Mobile friendly */
@media(max-width:600px){
  .player-info { flex-direction: column; align-items: flex-start; gap:4px; }
  .track-title { max-width: 100%; }
}


/* ===== Reseñas (version statique, sans accordion) ===== */
.reviews-static{
  background:
    radial-gradient(900px 240px at 50% 0, rgba(233,30,99,.08), transparent 60%),
    #fff;
  padding: 72px 20px;
  text-align: center;
}
.reviews-static h2{
  color:#111;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin-bottom: 28px;
}
.reviews-static h2::after{
  content:"";
  display:block;
  width:72px; height:4px; margin:12px auto 0;
  border-radius:999px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  opacity:.8;
}

/* Grille et cartes */
.reviews-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  max-width: 1100px;
  margin: 0 auto;
}
.review-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:16px;
  padding:18px 16px;
  text-align:left;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.review-card:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.08);
  border-color: rgba(233,30,99,.22);
}

/* Contenu */
.review-stars{ color:#00b67a; font-weight:800; letter-spacing:1px; }
.review-date{ display:block; font-size:.86rem; color:#666; margin-top:4px; }
.review-title{ margin-top:8px; font-size:1.02rem; font-weight:800; color:#111; }

/* Mobile */
@media (max-width:560px){
  .reviews-static{ padding:64px 16px; }
}





/* Card glassy + hover doux */
.card{
  position:relative;
  border-radius:16px;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 12px 28px rgba(0,0,0,.06);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{ transform:translateY(-3px); box-shadow:0 16px 36px rgba(0,0,0,.08); }

/* Header compact en grille */
.card summary{
  display:grid;
  grid-template-columns:1fr auto;
  row-gap:8px; align-items:center;
  padding:16px 16px 12px;
}
.card .stars{ color:#00b67a; font-weight:800; }
.card time{ justify-self:end; color:#777; font-size:.82rem; }
.card .snippet{
  grid-column:1 / -1;
  color:#222; font-weight:700;
}
.card .chevron{ right:16px; top:auto; bottom:16px; }

/* État ouvert: accent et fond léger */
.card[open]{ border-color:rgba(233,30,99,.26); box-shadow:0 18px 40px rgba(233,30,99,.14); }
.card[open] summary{ background:linear-gradient(0deg, rgba(233,30,99,.06), rgba(233,30,99,.06)); }

/* Corps lisible */
.card p{
  padding:12px 16px 16px;
  font-size:.95rem; line-height:1.65; color:#333; text-align:left;
}
.card p::before{ content:"“"; color:var(--color-primary); margin-right:6px; font-weight:900; }
.card p::after{ content:"”"; color:var(--color-primary); margin-left:6px; font-weight:900; }

@media (min-width:860px){
  .reviews-new{ padding:80px 20px; }
}


/* Carte */
.card{
  width:240px;
  border:1px solid #e4e4e4;
  border-radius:10px;
  background:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,.05);
  transition:box-shadow .25s, transform .25s;
  overflow:hidden;
}
.card:hover{ box-shadow:0 6px 18px rgba(0,0,0,.08); transform:translateY(-2px); }

/* Header replié */
.card summary{
  list-style:none;
  cursor:pointer;
  padding:14px 16px;
  display:flex;
  flex-direction:column;
  gap:6px;
  position:relative;
}
.card summary::-webkit-details-marker{display:none;}

/* Chevron */
.chevron{
  position:absolute;
  right:16px;
  top:20px;
  width:10px;
  height:6px;
  color:#888;
  transition:transform .3s;
}

/* Stars + snippet */
.stars{
  color:#00b67a;
  font-size:1.05em;
  letter-spacing:1px;
}
.card time{
  font-size:.8em;
  color:#666;
}
.snippet{
  font-weight:600;
  font-size:.9em;
  color:#333;
}

/* Contenu déplié */
.card p{
  padding:0 16px 16px;
  font-size:.9em;
  line-height:1.6;
  color:#444;
}

/* Animation ouverture */
.card[open] .chevron{ transform:rotate(180deg); }
.card[open] p{
  animation:fadeSlide .35s ease;
}
@keyframes fadeSlide{
  from{opacity:0;transform:translateY(-6px);}
  to{opacity:1;transform:translateY(0);}
}

/* Mobile */
@media(max-width:600px){
  .card{width:100%;max-width:350px;}
}




/* ===== FAQ – Accordéon stylé ===== */
.faq--acc{
  background:
    radial-gradient(900px 240px at 50% 0, rgba(233,30,99,.08), transparent 60%),
    #fff;
  padding:72px 20px;
  text-align:center;
}
.faq--acc h2{
  color:#111;
  font-size:clamp(1.6rem,3vw,2.4rem);
  letter-spacing:.2px;
  margin-bottom:28px;
}
.faq--acc h2::after{
  content:"";
  display:block;
  width:72px;height:4px;margin:12px auto 0;
  border-radius:999px;
  background:linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  opacity:.85;
}

.faq-list{
  max-width:900px;
  margin:22px auto 0;
  display:grid;
  gap:12px;
}

/* Carte/accès */
.faq-entry{
  border:1px solid rgba(0,0,0,.06);
  border-radius:14px;
  background:#fff;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  overflow:hidden;
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.faq-entry[open]{ 
  border-color: rgba(233,30,99,.22);
  box-shadow:0 16px 36px rgba(233,30,99,.14);
  transform: translateY(-1px);
}

/* En-tête cliquable */
.faq-entry > summary{
  list-style:none;
  cursor:pointer;
  padding:16px 18px;
  text-align:left;
  font-weight:800;
  display:flex; align-items:center; gap:12px;
}
.faq-entry > summary::-webkit-details-marker{ display:none; }

/* Chevron */
.faq-entry > summary::after{
  content:"";
  margin-left:auto;
  width:10px; height:10px;
  border-right:2px solid #888; border-bottom:2px solid #888;
  transform: rotate(-45deg);
  transition: transform .2s ease, border-color .2s ease;
}
.faq-entry[open] > summary::after{
  transform: rotate(135deg);
  border-color:#111;
}

/* Corps */
.faq-a{
  padding:0 18px 16px 18px;
  text-align:left;
  animation: faqFade .25s ease;
}
.faq-a p{ color:#444; line-height:1.65; font-size:.98rem; }
@keyframes faqFade{ from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:translateY(0);} }

/* Mobile */
@media (max-width:560px){
  .faq--acc{ padding:64px 16px; }
  .faq-entry > summary{ padding:14px 14px; }
  .faq-a{ padding:0 14px 14px; }
}





/* Final CTA section */
.cta-section {
  text-align: center;
  background: #f9f9f9;
  padding: 50px 20px;
}
.cta-section h2 {
  font-size: 1.8em;
  margin-bottom: 0.5em;
}
.cta-section p {
  font-size: 1.1em;
  margin-bottom: 1.2em;
}
.cta-section .cta-button {
  font-size: 1.2em;
  padding: 15px 30px;
}

/* Footer */
.footer {
  text-align: center;
  background: #333;
  color: #fff;
  padding: 15px 20px;
  font-size: 0.9em;
}

/* Responsive adjustments */
@media(max-width: 768px) {
  .samples {
    flex-direction: column;
    align-items: stretch;
  }
  .sample {
    min-width: unset;
    flex: 1 1 100%;
  }
  .hero {
    padding: 80px 20px;
  }
  .hero h1 {
    font-size: 2em;
  }
  .hero .tagline {
    font-size: 1.1em;
  }
}




/* ===== ORDER FORM – version premium ===== */
.order-section{
  background:
    radial-gradient(1100px 300px at 50% 0, rgba(233,30,99,.08), transparent 60%),
    #fff;
  padding: 80px 20px;
  text-align: center;
}

.order-section h2{
  color:#111;
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
  margin-bottom: 18px;
}
.order-section h2::after{
  content:"";
  display:block;
  width:84px; height:6px; margin:12px auto 0;
  border-radius:999px;
  background:linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  opacity:.9;
}

/* Carte du form avec bordure dégradée */
.order-form{
  position: relative;
  max-width: 880px;
  margin: 24px auto 0;
  padding: 26px;
  border-radius: 20px;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, var(--color-primary), var(--color-secondary)) border-box;
  border: 2px solid transparent;
  box-shadow: 0 22px 60px rgba(0,0,0,.08);
}

/* Grille moderne */
.order-form .form-row{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 18px;
  margin-bottom: 10px;
}

/* Champ + label flottant (sans changer le HTML) */
.form-field{
  position: relative;
  margin-bottom: 16px;
}
.form-field label{
  position: absolute;
  left: 14px;
  top: 14px;
  padding: 0 8px;
  font-weight: 800;
  color: #777;
  background: #fff;
  border-radius: 8px;
  transform-origin: left center;
  transform: translateY(0) scale(1);
  transition: transform .18s ease, color .18s ease, box-shadow .18s ease;
  pointer-events: none;
}

/* Inputs */
.order-form input,
.order-form select,
.order-form textarea{
  width: 100%;
  border: 1.5px solid #e5e5e5;
  border-radius: 14px;
  background: #fff;
  padding: 18px 14px 14px;
  font-size: 1rem;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

/* Focus glow + label remonte */
.form-field:focus-within label{
  transform: translateY(-18px) scale(.92);
  color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(233,30,99,.10);
}
.form-field:focus-within input,
.form-field:focus-within select,
.form-field:focus-within textarea{
  border-color: transparent;
  box-shadow: 0 0 0 2px rgba(233,30,99,.35);
  background: #fff;
}

/* État rempli (via JS .has-value) */
.form-field.has-value label{
  transform: translateY(-18px) scale(.92);
  color:#444;
  box-shadow:none;
}

/* Select custom arrow */
.order-form select{
  appearance: none;
  background-image:
    linear-gradient(135deg, var(--color-primary), var(--color-secondary)),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='white' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");
  background-size: 0 0, 14px 10px;
  background-repeat: no-repeat;
  background-position: left -9999px top -9999px, right 12px center;
  padding-right: 36px;
}

/* Textarea */
.order-form textarea{
  min-height: 140px;
  resize: vertical;
}

.form-feedback{
  margin-top: 8px;
  font-weight: 800;
  font-size: .95rem;
  color: #0a7c2f;
}
.form-feedback.is-error{ color:#c62828; }

/* Erreurs natives (HTML5) visibles même avec novalidate */
.order-form input:invalid[required],
.order-form select:invalid[required]{
  border-color: #ff5a5a;
  box-shadow: 0 0 0 2px rgba(255,90,90,.25);
}

/* reCAPTCHA centré */
.g-recaptcha{ display:inline-block; margin: 6px auto 0; }

/* Bouton submit — néon dégradé */
.order-section .cta-button{
  display:inline-block;
  margin-top: 16px;
  font-size: 1.05rem;
  font-weight: 900;
  padding: 14px 26px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  box-shadow: 0 16px 32px rgba(233,30,99,.35);
  transition: transform .14s ease, filter .14s ease, box-shadow .14s ease;
}
.order-section .cta-button:hover{
  transform: translateY(-2px);
  filter: brightness(1.02);
  box-shadow: 0 22px 40px rgba(233,30,99,.40);
}

/* Mobile */
@media (max-width: 640px){
  .order-form{ padding:18px; }
  .order-form .form-row{ grid-template-columns: 1fr; gap: 14px; }
}






/* ===== CTA HERO – ultra-conversion ===== */
.pricing-highlight{
  position: relative;
  overflow: hidden;
  padding: 96px 20px;
  text-align: center;
  background:
    radial-gradient(1400px 420px at 50% -10%, rgba(233,30,99,.10), transparent 60%),
    #fff;
}
.pricing-highlight::before,
.pricing-highlight::after{
  content:""; position:absolute; inset:auto;
  width: 520px; height: 520px; border-radius: 50%;
  filter: blur(70px); opacity:.28; pointer-events:none;
}
.pricing-highlight::before{ left:-160px; bottom:-200px; background: rgba(233,30,99,.18); }
.pricing-highlight::after{ right:-140px; top:-220px; background: rgba(156,39,176,.18); }

.cta-hero{
  --grad: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  max-width: 900px; margin: 0 auto;
  padding: 36px 28px 30px;
  border-radius: 22px;
  background:
    linear-gradient(#fff, #fff) padding-box,
    var(--grad) border-box;
  border: 2px solid transparent;
  box-shadow: 0 26px 68px rgba(0,0,0,.10);
  position: relative;
}

/* Badge ruban */
.cta-badge{
  position:absolute; top:16px; left:-14px;
  background: var(--grad); color:#fff; font-weight:900; letter-spacing:.6px;
  padding:10px 18px; border-radius: 12px;
  transform: rotate(-6deg);
  box-shadow: 0 16px 30px rgba(233,30,99,.28);
}

/* Titre + sous-titre */
.cta-hero h2{
  color:#111; font-weight:900;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  margin-bottom: 6px;
}
.cta-sub{ color:#333; font-size:1.1rem; margin-bottom: 16px; }

/* Bloc prix */
.cta-price{
  display:inline-flex; align-items:baseline; gap:14px;
  margin: 8px 0 12px; position:relative;
}
.cta-price .old{
  font-size: clamp(1.1rem, 2.4vw, 1.4rem);
  color:#888; position:relative;
}
.cta-price .old::after{
  content:""; position:absolute; left:-6%; right:-6%; top:50%;
  height:10px; transform:skewY(-8deg) translateY(-50%);
  background: linear-gradient(90deg, transparent, rgba(233,30,99,.8), transparent);
}
.cta-price .arrow{ color:#bbb; font-weight:800; }
.cta-price .new{
  font-size: clamp(1.9rem, 5vw, 3rem);
  font-weight: 900;
  background: var(--grad); -webkit-background-clip:text; background-clip:text;
  color: transparent; text-shadow: 0 14px 30px rgba(233,30,99,.28);
}
.cta-price .save{
  font-size:.85rem; font-weight:900; color:#fff; white-space:nowrap;
  padding:6px 10px; border-radius:999px; margin-left:4px;
  background: var(--grad);
  box-shadow: 0 10px 20px rgba(233,30,99,.25);
}

/* Avantages */
.cta-benefits{
  list-style:none; padding:0; margin: 8px 0 18px;
  display:flex; flex-wrap:wrap; gap:10px 14px; justify-content:center;
}
.cta-benefits li{
  position:relative; padding:8px 12px 8px 36px;
  background:#fff; border:1px solid #eee; border-radius:999px;
  font-weight:700; color:#333;
  box-shadow:0 8px 20px rgba(0,0,0,.05);
}
.cta-benefits li::before{
  content:"✓";
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; display:grid; place-items:center;
  border-radius:50%; color:#fff; background: var(--color-primary);
  box-shadow:0 0 0 4px rgba(233,30,99,.12);
}

/* Bouton principal – boosté */
.cta-primary{
  font-size: clamp(1.05rem, 2.2vw, 1.2rem);
  font-weight: 900; letter-spacing:.2px;
  border-radius: 14px;
  padding: 16px 30px;
  background: var(--grad);
  box-shadow: 0 18px 36px rgba(233,30,99,.35);
  display:inline-block;
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
.cta-primary:hover{
  transform: translateY(-2px);
  filter: brightness(1.02);
  box-shadow: 0 24px 46px rgba(233,30,99,.42);
}

/* Confiance */
.cta-trust{
  display:flex; gap:14px; justify-content:center; align-items:center;
  margin-top:14px; color:#555; font-size:.95rem;
}
.cta-trust .stars{ color:#00b67a; font-weight:800; letter-spacing:1px; }

/* Note sous CTA */
.cta-note{ color:#666; font-size:.95rem; margin-top:10px; }

/* Mobile */
@media (max-width:560px){
  .pricing-highlight{ padding: 80px 16px; }
  .cta-badge{ transform:none; left:12px; top:12px; }
}






/* ===== PROMO FLASH 48H ===== */
.promo-spotlight{
  --bg-grad: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  position: relative;
  isolation: isolate;
  background: radial-gradient(1200px 600px at 50% -20%, rgba(233,30,99,.15), transparent 60%),
              #fff;
  padding: 48px 22px;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,.08);
  overflow: hidden;
  text-align: center;
}
.promo-spotlight::after{
  content:"";
  position:absolute; inset:-2px;
  background: conic-gradient(from 180deg at 50% -10%, rgba(233,30,99,.25), rgba(156,39,176,.25), transparent 50%);
  filter: blur(40px);
  z-index:-1;
}

.promo-ribbon{
  position:absolute; top:18px; left:-14px;
  background: var(--bg-grad);
  color:#fff; font-weight:800; letter-spacing:.5px;
  padding:10px 24px;
  transform: rotate(-6deg);
  box-shadow:0 12px 24px rgba(233,30,99,.25);
  border-radius:10px;
}

.promo-title{
  font-size: clamp(1.8rem, 2.6vw, 2.4rem);
  color:#111; margin-bottom:.3em;
}
.promo-subtitle{
  font-size:1.05rem; color:#444; margin-bottom:1.2rem;
}

.promo-prices{
  display:inline-flex; align-items:baseline; gap:14px;
  margin: 6px 0 16px;
  position: relative;
}
.price-old{
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  color:#888; position:relative; opacity:.9;
}
.price-old::after{
  content:"";
  position:absolute; left:-6%; right:-6%; top:50%;
  height:10px; transform:skewY(-8deg) translateY(-50%);
  background: linear-gradient(90deg, transparent, rgba(233,30,99,.8), transparent);
}
.price-arrow{ color:#bbb; font-weight:700; }
.price-new{
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  font-weight: 900;
  background: var(--bg-grad); -webkit-background-clip:text; background-clip:text;
  color: transparent; position: relative;
  text-shadow: 0 12px 24px rgba(233,30,99,.25);
}
.price-new::before{
  content:"";
  position:absolute; inset:-16px -22px -10px -22px; z-index:-1;
  background: radial-gradient(300px 120px at 50% 60%, rgba(233,30,99,.18), transparent 70%);
  filter: blur(10px);
}

.promo-countdown{
  display:flex; justify-content:center; gap:10px; margin: 10px auto 18px;
}
.cd-unit{
  display:grid; place-items:center;
  width:72px; border-radius:14px; padding:10px 0 6px;
  background: #fff; border:1px solid rgba(233,30,99,.25);
  box-shadow: 0 8px 24px rgba(0,0,0,.06), inset 0 0 0 4px rgba(233,30,99,.06);
}
.cd-unit strong{
  font-size:1.4rem; line-height:1; color:#111;
}
.cd-unit span{
  font-size:.75rem; color:#777; letter-spacing:.5px; text-transform:uppercase;
}

.promo-benefits{
  display:flex; flex-wrap:wrap; gap:10px 16px; justify-content:center;
  margin: 6px 0 18px; padding:0;
  list-style:none;
}
.promo-benefits li{
  position:relative; padding:8px 12px 8px 36px;
  background:#fff; border:1px solid #eee; border-radius:999px;
  box-shadow:0 6px 18px rgba(0,0,0,.05);
  font-weight:600; color:#333;
}
.promo-benefits li::before{
  content:"✓";
  position:absolute; left:12px; top:50%; transform:translateY(-52%);
  width:18px; height:18px; display:grid; place-items:center;
  border-radius:50%;
  color:#fff; font-size:.85rem;
  background: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(233,30,99,.12);
}

.promo-cta{
  margin-top: 4px;
  border-radius: 14px;
  padding: 16px 28px;
  font-weight: 800; letter-spacing:.2px;
  box-shadow: 0 14px 22px rgba(233,30,99,.25);
}
.promo-cta:hover{ transform: translateY(-1px); }
.pulse{ animation: pulse 1.4s infinite; }
@keyframes pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(233,30,99,.28); }
  50%{ box-shadow:0 0 0 18px rgba(233,30,99,0); }
}
@media (prefers-reduced-motion: reduce){
  .pulse{ animation:none; }
}

.trust-row{
  display:flex; gap:14px; justify-content:center; align-items:center;
  margin-top:14px; color:#555; font-size:.95rem;
}
.stars{ color:#00b67a; font-weight:800; letter-spacing:1px; }

/* Sticky bar */
.sticky-promo-bar{
  position: fixed; left: 50%; transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 640px;
  bottom: 12px; z-index: 9999;
  background: #111; color:#fff; border-radius: 16px;
  box-shadow: 0 18px 36px rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.08);
}
.sticky-promo-bar .bar-content{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:12px 14px 12px 16px;
}
.bar-text{ font-weight:700; }
.bar-timer{ font-family: ui-monospace, SFMono-Regular, Menlo, monospace; opacity:.9; }
.bar-cta{
  background: var(--color-primary);
  color:#fff; font-weight:800; padding:10px 16px; border-radius:12px;
  box-shadow: 0 10px 16px rgba(233,30,99,.35);
}
.bar-cta:hover{ filter: brightness(.96); }
.bar-close{
  margin-left:auto;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  font-weight: 900;
  font-size: 16px;
  line-height: 1;
  border-radius: 10px;
  cursor: pointer;
  opacity: .9;
  padding: 6px 8px;
  transition: opacity .15s ease, transform .15s ease, background .15s ease;
}
.bar-close:hover{
  opacity: 1;
  transform: translateY(-1px);
  background: rgba(255,255,255,.2);
}

@media (max-width: 560px){
  .cd-unit{ width:64px; }
  .sticky-promo-bar{ width: calc(100% - 20px); }
  .sticky-promo-bar .bar-content{ gap:8px; }
  .bar-text{ font-size:.95rem; }
  .bar-close{ padding:4px; }
}

/* Option: masque le ruban si conflit visuel */
@media (max-width:480px){
  .promo-ribbon{ transform:none; left:12px; top:12px; border-radius:8px; }
}





/* ===== PLAYLIST PLAYER ===== */
.playlist{ 

  background: #fff;
  padding: 60px 20px;
  text-align: center;
}
.pl-title{ text-align:center; font-size:clamp(1.5rem,2.6vw,2.2rem); margin-bottom:18px; }



.pp{
  --p: var(--color-primary, #e91e63);
  --s: var(--color-secondary, #9c27b0);
  --grad: linear-gradient(135deg, var(--p), var(--s));
  display:grid; gap:16px;
  grid-template-columns: 1fr;
}

@media (min-width: 860px){
  .pp{ grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); align-items:start; }
}

.pp-main{
  background:#fff; border:1px solid rgba(0,0,0,.06);
  border-radius:16px; padding:16px;
  box-shadow:0 10px 28px rgba(0,0,0,.06);
}

.pp-meta{ display:flex; align-items:baseline; gap:10px; margin-bottom:10px; flex-wrap:wrap; }
.pp-title{ font-weight:900; font-size:clamp(1.05rem,2.2vw,1.3rem); color:#111; }
.pp-tag{ font-size:.75rem; font-weight:800; color:#fff; background:var(--grad); padding:4px 8px; border-radius:999px; }

.pp-controls{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.pp-btn{
  display:grid; place-items:center; width:44px; height:44px; border-radius:12px;
  border:1px solid rgba(0,0,0,.08); background:#111; color:#fff; font-weight:900;
  box-shadow:0 8px 16px rgba(0,0,0,.15); transition:transform .12s ease, filter .12s ease;
}
.pp-btn:hover{ transform:translateY(-1px); filter:brightness(1.06); }
.pp-next, .pp-prev{ background:#fff; color:#111; }
.pp-time{ margin-left:auto; font-variant-numeric:tabular-nums; color:#555; font-weight:700; }

.pp-timeline{
  position:relative; height:12px; margin-top:12px; border-radius:999px; cursor:pointer; outline:none;
  background: #f3f3f3; box-shadow: inset 0 2px 6px rgba(0,0,0,.06);
}
.pp-buffer{
  position:absolute; inset:0; width:0%; border-radius:999px;
  background:linear-gradient(90deg, rgba(0,0,0,.06), rgba(0,0,0,.03));
}
.pp-progress{
  position:absolute; inset:0; width:0%; border-radius:999px; background:var(--grad);
  box-shadow:0 6px 16px rgba(233,30,99,.25);
}
.pp-handle{
  position:absolute; right:-7px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.25);
}

.pp-list{
  list-style:none; margin:0; padding:0;
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:16px;
  box-shadow:0 10px 28px rgba(0,0,0,.06);
  overflow:hidden;
}

.pp-row{
  width:100%; display:grid; grid-template-columns: 28px 1fr auto auto 18px;
  align-items:center; gap:12px; padding:14px;
  background:transparent; border:0; text-align:left; cursor:pointer;
}
.pp-row:hover{ background:rgba(0,0,0,.03); }
.pp-row:focus-visible{ outline:2px solid var(--p); outline-offset:-2px; border-radius:8px; }

.pp-idx{ font-weight:800; color:#999; }
.pp-row-title{ font-weight:800; color:#151515; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pp-row-tag{
  font-size:.72rem; font-weight:800; color:#fff; background:var(--grad);
  padding:3px 8px; border-radius:999px; justify-self:start;
}
.pp-row-time{ font-variant-numeric:tabular-nums; color:#666; font-weight:700; }
.pp-eq{ display:none; width:18px; height:12px; align-items:flex-end; gap:2px; }
.pp-eq i{ display:block; width:3px; height:3px; background:var(--p); animation:eq 1s infinite ease-in-out; }
.pp-eq i:nth-child(2){ animation-delay:.15s; }
.pp-eq i:nth-child(3){ animation-delay:.3s; }

.pp-track + .pp-track .pp-row{ border-top:1px solid #f2f2f2; }

.is-active .pp-row{ background:rgba(233,30,99,.06); }
.is-playing .pp-eq{ display:flex; }
.is-playing .pp-idx{ display:none; }

@keyframes eq{
  0%,100%{ height:3px }
  50%{ height:12px }
}

@media (max-width:560px){
  .pp-row{ grid-template-columns: 22px 1fr auto auto 14px; gap:10px; padding:12px; }
  .pp-row-tag{ display:none; }
}