/*
Theme Name: Kadence Child - MA CHANSON
Template: kadence
Version: 2.0.0
Description: Child theme MA CHANSON (noir / ivoire / or)
*/

/* Filet de securite anti-debordement horizontal (mobile) */
html, body{ max-width:100%; overflow-x:hidden; }

/* Polices hebergees localement (avant : Google Fonts externe) — supprime une
   requete bloquante vers un domaine tiers avant le premier affichage du texte.
   Fichiers "variable" : un seul .woff2 par famille couvre toutes les graisses. */
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('assets/fonts/Inter-Variable.woff2') format('woff2-variations'), url('assets/fonts/Inter-Variable.woff2') format('woff2');
}
@font-face{
  font-family:'Playfair Display'; font-style:normal; font-weight:500 700; font-display:swap;
  src:url('assets/fonts/PlayfairDisplay-Variable.woff2') format('woff2-variations'), url('assets/fonts/PlayfairDisplay-Variable.woff2') format('woff2');
}

:root{
  --mc-black:#0d0d0d;
  --mc-black-soft:#161513;
  --mc-white:#ffffff;
  --mc-ivory:#faf7f0;
  --mc-cream:#f3efe4;
  --mc-gold:#b8935a;
  --mc-gold-deep:#9c7a44;
  --mc-gold-light:#e9d6ae;
  --mc-text-muted:#6f6a60;
  --mc-radius:16px;
  --mc-font-head:'Playfair Display', Georgia, serif;
  --mc-font-body:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mc-max:1280px;
}

/* =========================================================
   0. LARGEUR GLOBALE — correction du conteneur Kadence
   Par défaut Kadence limite l'entry-content à 842px (mode blog).
   On l'élargit à une largeur "site commercial".
   ========================================================= */
.content-container.site-container{ max-width: var(--mc-max) !important; }
.entry-content-wrap{ padding: 0 !important; }
body.content-style-boxed .content-container .entry-content-wrap,
body.content-style-boxed .entry.single-entry{ box-shadow:none !important; background:transparent !important; }
/* Bannière de titre generique masquee sur nos pages personnalisees uniquement (nos propres hero prennent le relais) ; conservee sur panier/checkout/mon compte. */
body:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .entry-hero.page-hero-section{ display:none !important; }
.site-container{ padding-left:24px; padding-right:24px; }
@media (max-width:600px){ .site-container{ padding-left:18px; padding-right:18px; } }

/* =========================================================
   1. TYPOGRAPHIE
   ========================================================= */
body, input, select, optgroup, textarea, button{ font-family:var(--mc-font-body) !important; color:var(--mc-black); font-size:17px; }
h1,h2,h3,h4,.mc-font-head{ font-family:var(--mc-font-head) !important; font-weight:600 !important; letter-spacing:.2px; color:var(--mc-black); }
h1{ font-size:clamp(2.6rem,5.2vw,4.2rem) !important; line-height:1.1 !important; }
h2{ font-size:clamp(2rem,3.6vw,2.8rem) !important; line-height:1.2 !important; }
h3{ font-size:clamp(1.35rem,2.2vw,1.7rem) !important; line-height:1.3 !important; }
p{ font-size:1.08rem; line-height:1.7; }
a{ transition:all .2s ease; }
img{ border-radius:var(--mc-radius); }

/* =========================================================
   2. HEADER
   ========================================================= */
#masthead.site-header{
  position:sticky; top:0; z-index:600;
  background:rgba(13,13,13,.96); backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid rgba(184,147,90,.25);
}
.site-header-row{ padding-top:10px; padding-bottom:10px; min-height:auto; }
.brand.has-logo-image img.custom-logo{ max-height:96px !important; width:auto !important; height:auto !important; }
@media (max-width:600px){ .brand.has-logo-image img.custom-logo{ max-height:78px !important; } }
.mobile-toggle-open-container .menu-toggle-open,
.mobile-toggle-open-container .menu-toggle-open:focus{ color:#f2eee2 !important; }
.mobile-toggle-open-container .menu-toggle-open:hover,
.mobile-toggle-open-container .menu-toggle-open:focus-visible{ color:var(--mc-gold) !important; }
/* Le logo image contient deja le texte "MA CHANSON" : on masque le titre texte redondant affiche a cote. */
.site-header .site-title-wrap{ display:none !important; }
.mc-cart-menu-item > a{
  display:flex !important; align-items:center; position:relative;
  padding:10px 10px !important; white-space:nowrap;
}
.mc-cart-menu-item svg{ width:22px; height:22px; }
.mc-cart-count{
  position:absolute; top:2px; right:0; min-width:16px; height:16px; padding:0 3px;
  background:var(--mc-gold); color:var(--mc-black); border-radius:999px; font-size:.65rem; font-weight:800;
  display:flex; align-items:center; justify-content:center; line-height:1;
}
.site-branding .site-title, .site-branding .site-title a{
  font-family:var(--mc-font-head) !important; font-weight:700 !important;
  font-size:1.7rem !important; letter-spacing:.5px; color:var(--mc-black) !important;
}
.main-navigation ul.menu > li > a,
.main-navigation ul.menu > li > a:link,
.main-navigation ul.menu > li > a:visited,
.main-navigation ul.menu > li > a:active{
  font-family:var(--mc-font-body); font-weight:600; font-size:.94rem;
  color:#f2eee2 !important; padding:10px 12px !important;
}
.main-navigation ul.menu > li > a:hover,
.main-navigation ul.menu > li > a:focus{ color:var(--mc-gold) !important; }
.main-navigation ul.menu > li.current-menu-item > a,
.main-navigation ul.menu > li.current-menu-item > a:visited,
.main-navigation ul.menu > li.current_page_item > a,
.main-navigation ul.menu > li.current_page_item > a:visited{ color:var(--mc-gold) !important; background:transparent !important; }
.mc-cart-menu-item > a, .mc-cart-menu-item > a:visited{ color:#f2eee2 !important; }
.mc-cart-menu-item > a:hover{ color:var(--mc-gold) !important; }
.menu-cta-button{ margin-left:8px; }
.main-navigation ul.menu > li.menu-cta-button > a,
.main-navigation ul.menu > li.menu-cta-button > a:link,
.main-navigation ul.menu > li.menu-cta-button > a:visited{
  background:var(--mc-gold) !important; color:var(--mc-black) !important;
  border-radius:999px !important; padding:13px 28px !important; font-weight:700 !important;
  font-size:.98rem !important; box-shadow:0 6px 18px rgba(184,147,90,.3);
}
.main-navigation ul.menu > li.menu-cta-button > a:hover{ background:var(--mc-gold-light) !important; color:var(--mc-black) !important; }

/* =========================================================
   3. BOUTONS
   ========================================================= */
.mc-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding:18px 38px; border-radius:999px; font-weight:700; font-size:1.05rem;
  text-decoration:none !important; cursor:pointer; border:2px solid transparent;
  min-height:56px; font-family:var(--mc-font-body);
}
.mc-btn-lg{ padding:20px 46px; font-size:1.15rem; }
/* CTA final (h2 + bouton) : meme espace en dessous du bouton qu'au-dessus (28px). */
.mc-section-dark.mc-center a.mc-btn-gold.mc-btn-lg{ margin-bottom:28px; }
@media (max-width:600px){
  .mc-btn{ white-space:nowrap; }
  .mc-btn-lg{ padding:15px 24px; font-size:.98rem; min-height:50px; }
}
@media (max-width:360px){ .mc-btn-lg{ padding:14px 16px; font-size:.9rem; } }
.mc-btn-gold{ background:var(--mc-gold); color:var(--mc-black) !important; box-shadow:0 10px 26px rgba(184,147,90,.35); }
.mc-btn-gold:hover{ background:var(--mc-gold-deep); transform:translateY(-1px); }
.mc-btn-outline{ background:transparent; border-color:rgba(255,255,255,.6); color:var(--mc-white) !important; }
.mc-btn-outline:hover{ background:rgba(255,255,255,.12); border-color:#fff; }
.mc-btn-outline-dark{ background:transparent; border-color:var(--mc-black); color:var(--mc-black) !important; }
.mc-btn-outline-dark:hover{ background:var(--mc-black); color:var(--mc-white) !important; }

/* =========================================================
   4. SECTIONS
   ========================================================= */
.mc-section{ padding:100px 24px; max-width:var(--mc-max); margin:0 auto; }
@media (max-width:1024px){ .mc-section{ padding:72px 22px; } }
@media (max-width:600px){
  .mc-section{ padding:56px 18px; }
  .mc-section-dark{ padding:64px 22px; }
  .mc-section-dark h2{ line-height:1.35 !important; }
  .mc-section-dark .mc-lead{ font-size:1.08rem; line-height:1.7; }
}
.mc-section-dark{ background:var(--mc-black); color:var(--mc-white); }
.mc-section-dark h1,.mc-section-dark h2,.mc-section-dark h3{ color:var(--mc-white) !important; }
.mc-section-dark p{ color:#dcdad4; }
.mc-section-cream{ background:var(--mc-cream); }
.mc-section-full{ max-width:none; padding-left:0; padding-right:0; }
.mc-center{ text-align:center; }
.mc-eyebrow{ display:inline-block; color:var(--mc-gold); text-transform:uppercase; letter-spacing:3px; font-size:.82rem; font-weight:700; margin-bottom:14px; }
.mc-lead{ font-size:1.25rem; color:var(--mc-text-muted); max-width:720px; margin:20px auto 0; }
.mc-section-dark .mc-lead{ color:#d4d2cb; }
.mc-section > h2.mc-center + .mc-lead{ margin-left:auto; margin-right:auto; }

/* =========================================================
   5. HERO ACCUEIL
   ========================================================= */
.mc-hero{
  position:relative; overflow:hidden; isolation:isolate;
  background:
    radial-gradient(ellipse 60% 50% at 18% 8%, rgba(184,147,90,.22) 0%, transparent 60%),
    radial-gradient(ellipse 70% 55% at 85% 100%, rgba(184,147,90,.14) 0%, transparent 55%),
    radial-gradient(ellipse 100% 70% at 50% -10%, #241f17 0%, var(--mc-black) 55%);
  color:#fff; text-align:center; padding:160px 24px 130px;
}
.mc-hero:before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:34px 34px; opacity:.35; mix-blend-mode:screen;
}
.mc-hero > *{ position:relative; z-index:2; }
.mc-hero-particles{ position:absolute; inset:0; z-index:1; overflow:hidden; pointer-events:none; }
.mc-hero-particles span{
  position:absolute; bottom:-20px; width:5px; height:5px; border-radius:50%;
  background:radial-gradient(circle, rgba(233,196,138,.9) 0%, rgba(233,196,138,0) 70%);
  animation:mcFloat 14s linear infinite;
}
.mc-hero-particles span:nth-child(1){ left:8%; animation-delay:0s; animation-duration:16s; }
.mc-hero-particles span:nth-child(2){ left:22%; animation-delay:3s; animation-duration:12s; }
.mc-hero-particles span:nth-child(3){ left:38%; animation-delay:6s; animation-duration:18s; }
.mc-hero-particles span:nth-child(4){ left:55%; animation-delay:1s; animation-duration:14s; }
.mc-hero-particles span:nth-child(5){ left:70%; animation-delay:8s; animation-duration:15s; }
.mc-hero-particles span:nth-child(6){ left:85%; animation-delay:4s; animation-duration:17s; }
.mc-hero-particles span:nth-child(7){ left:95%; animation-delay:10s; animation-duration:13s; }
@keyframes mcFloat{
  0%{ transform:translateY(0) scale(.6); opacity:0; }
  10%{ opacity:1; }
  90%{ opacity:.5; }
  100%{ transform:translateY(-620px) scale(1.1); opacity:0; }
}
.mc-hero-visual{ display:flex; justify-content:center; margin-bottom:36px; opacity:.95; filter:drop-shadow(0 0 26px rgba(184,147,90,.35)); }
.mc-hero h1, .mc-hero h2{ color:#fff !important; max-width:900px; margin:0 auto; font-size:clamp(2.6rem,5.2vw,4.2rem) !important; line-height:1.1 !important; }
.mc-hero .mc-lead{ color:#e7e5df; font-size:1.3rem; }
.mc-hero-actions{ display:flex; flex-wrap:wrap; gap:18px; justify-content:center; margin-top:42px; }
@media (max-width:600px){
  .mc-hero{ padding:112px 18px 64px; }
  .mc-hero-visual svg{ width:96px; height:96px; }
  .mc-hero h1, .mc-hero h2{ font-size:1.85rem !important; line-height:1.25 !important; }
  .mc-hero .mc-lead{ font-size:1.05rem; }
  .mc-hero-actions{ flex-direction:column; align-items:stretch; gap:12px; margin-top:28px; }
  .mc-hero-actions .mc-btn{ width:calc(100% - 96px); align-self:center; padding:15px 20px; font-size:.98rem; min-height:50px; white-space:nowrap; }
  .mc-hero-waveform{ margin-top:32px; }
}
@media (max-width:360px){
  .mc-hero h1, .mc-hero h2{ font-size:1.6rem !important; }
  .mc-hero-actions .mc-btn{ font-size:.9rem; padding:14px 14px; }
}

/* Waveform decorative (hero, sections, footer) */
.mc-waveform{ display:flex; align-items:center; justify-content:center; gap:4px; height:34px; }
.mc-waveform span{ display:block; width:3px; border-radius:2px; background:var(--mc-gold); opacity:.75; }
.mc-waveform.mc-waveform-anim span{ animation:mcWave 1.8s ease-in-out infinite; }
.mc-waveform span:nth-child(1){ height:30%; animation-delay:-1.2s; }
.mc-waveform span:nth-child(2){ height:60%; animation-delay:-1.0s; }
.mc-waveform span:nth-child(3){ height:100%; animation-delay:-.8s; }
.mc-waveform span:nth-child(4){ height:45%; animation-delay:-.6s; }
.mc-waveform span:nth-child(5){ height:80%; animation-delay:-.4s; }
.mc-waveform span:nth-child(6){ height:55%; animation-delay:-.2s; }
.mc-waveform span:nth-child(7){ height:90%; animation-delay:0s; }
.mc-waveform span:nth-child(8){ height:40%; animation-delay:-.9s; }
.mc-waveform span:nth-child(9){ height:70%; animation-delay:-.5s; }
.mc-waveform span:nth-child(10){ height:35%; animation-delay:-.3s; }
@keyframes mcWave{ 0%,100%{ transform:scaleY(.5); } 50%{ transform:scaleY(1); } }
.mc-hero-waveform{ margin-top:54px; opacity:.55; }

@media (prefers-reduced-motion: reduce){
  .mc-hero-particles span,
  .mc-waveform.mc-waveform-anim span,
  .mc-glow-pulse{ animation:none !important; }
}

/* =========================================================
   6. GRILLES
   ========================================================= */
.mc-grid{ display:grid; gap:28px; }
.mc-grid-3{ grid-template-columns:repeat(3,1fr); }
.mc-grid-4{ grid-template-columns:repeat(4,1fr); }
/* Audio (2-4 cartes) : auto-fit borne pour rester a 2 colonnes max sur desktop
   et se replier naturellement des que la largeur reelle manque (plus robuste
   qu'un seuil de viewport fixe, qui peut ne pas correspondre a tous les telephones). */
.mc-grid-2{ grid-template-columns:repeat(auto-fit, minmax(min(420px, 100%),1fr)); }
/* Occasions : toujours au moins 2 colonnes, meme sur petit mobile (cartes simples icone+libelle). */
.mc-grid-occasions{ grid-template-columns:repeat(3,1fr); }
@media (max-width:900px){ .mc-grid-3,.mc-grid-4{ grid-template-columns:repeat(2,1fr); } .mc-grid-occasions{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:680px){ .mc-grid-3{ grid-template-columns:1fr; } }

/* =========================================================
   7. OCCASIONS — cartes studio (fond sombre, halo au survol)
   ========================================================= */
.mc-occasion-card{
  position:relative; background:linear-gradient(160deg, #1a1712 0%, var(--mc-black-soft) 100%);
  border:1px solid rgba(184,147,90,.22); border-radius:var(--mc-radius);
  padding:38px 22px; text-align:center; transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  overflow:hidden;
}
.mc-occasion-card:after{
  content:""; position:absolute; inset:0; border-radius:inherit; opacity:0; transition:opacity .3s ease;
  background:radial-gradient(circle at 50% 0%, rgba(184,147,90,.35) 0%, transparent 65%);
  pointer-events:none;
}
.mc-occasion-card:hover{ transform:translateY(-6px); box-shadow:0 20px 40px rgba(0,0,0,.45); border-color:var(--mc-gold); }
.mc-occasion-card:hover:after{ opacity:1; }
.mc-occasion-card .mc-icon{ width:42px; height:42px; margin:0 auto 18px; color:var(--mc-gold); position:relative; z-index:1; }
.mc-occasion-card strong{ font-family:var(--mc-font-head); font-size:1.1rem; font-weight:600; display:block; color:#fff; position:relative; z-index:1; }
@media (max-width:680px){
  .mc-occasion-card{ padding:24px 14px; }
  .mc-occasion-card .mc-icon{ width:32px; height:32px; margin-bottom:12px; }
  .mc-occasion-card strong{ font-size:.92rem; }
}

/* =========================================================
   8. ETAPES (comment ca marche) — ligne d'onde reliant les etapes
   ========================================================= */
.mc-steps-row{ position:relative; }
.mc-steps-row .mc-waveform{ position:absolute; top:38px; left:0; right:0; margin:0 auto; max-width:70%; opacity:.28; z-index:0; }
@media (max-width:900px){ .mc-steps-row .mc-waveform{ display:none; } }
.mc-step{ position:relative; z-index:1; text-align:center; padding:14px; }
.mc-step-num{
  font-family:var(--mc-font-head); font-size:1.6rem; font-weight:700; color:var(--mc-gold);
  display:flex; align-items:center; justify-content:center; width:76px; height:76px; border-radius:50%;
  margin:0 auto 18px; background:radial-gradient(circle, rgba(184,147,90,.18) 0%, transparent 72%);
  border:1.5px solid rgba(184,147,90,.4);
}
.mc-step .mc-step-emoji{ font-size:1.3rem; display:block; margin-bottom:10px; }
.mc-step h3{ margin-top:6px; }
@media (max-width:680px){
  .mc-step{ padding:8px; }
  .mc-step-num{ width:58px; height:58px; font-size:1.3rem; margin-bottom:12px; }
  .mc-grid-3 .mc-step:not(:last-child){ margin-bottom:-6px; }
}

/* =========================================================
   9. TARIFS / PRICING — cartes studio sur fond sombre
   ========================================================= */
.mc-pricing-card{
  background:linear-gradient(165deg, #17140f 0%, var(--mc-black) 100%);
  border:1px solid rgba(184,147,90,.25); border-radius:20px; padding:44px 32px;
  position:relative; box-shadow:0 10px 34px rgba(0,0,0,.35); display:flex; flex-direction:column;
  color:#fff;
}
.mc-pricing-card h3{ color:#fff !important; }
.mc-pricing-featured{
  border:2px solid var(--mc-gold); box-shadow:0 30px 60px rgba(184,147,90,.25), inset 0 0 60px rgba(184,147,90,.06);
  transform:translateY(-10px); background:linear-gradient(165deg, #22190f 0%, #14110c 100%);
}
@media (max-width:900px){ .mc-pricing-featured{ transform:none; } }
.mc-badge{
  position:absolute; top:-16px; left:50%; transform:translateX(-50%);
  background:var(--mc-gold); color:var(--mc-black); font-size:.76rem; font-weight:700;
  text-transform:uppercase; letter-spacing:1.5px; padding:8px 20px; border-radius:999px; white-space:nowrap;
  box-shadow:0 6px 18px rgba(184,147,90,.4);
}
.mc-pricing-card h3{ margin:8px 0 0; font-size:1.5rem !important; }
.mc-price{ font-family:var(--mc-font-head); font-size:3.4rem; font-weight:700; color:var(--mc-gold-light); margin:10px 0 24px; line-height:1; }
.mc-price span{ font-size:1rem; color:#a8a297; font-family:var(--mc-font-body); font-weight:400; }
.mc-pricing-card ul{ list-style:none; margin:0 0 30px; padding:0; text-align:left; flex-grow:1; }
.mc-pricing-card ul li{ padding:10px 0; border-bottom:1px dashed rgba(255,255,255,.1); font-size:1rem; color:#e3e0d8; }
.mc-pricing-card ul li:last-child{ border-bottom:none; }
.mc-pricing-card ul li:before{ content:"✓ "; color:var(--mc-gold); font-weight:700; }
.mc-pricing-card .mc-btn{ width:100%; }
.mc-offer-toggle{ margin:0 0 20px; border-top:1px dashed rgba(255,255,255,.15); padding-top:14px; flex-grow:0; }
.mc-offer-toggle summary{
  cursor:pointer; list-style:none; color:var(--mc-gold-light); font-size:.88rem; font-weight:600;
  display:flex; align-items:center; justify-content:center; gap:6px; text-transform:uppercase; letter-spacing:.5px;
}
.mc-offer-toggle summary::-webkit-details-marker{ display:none; }
.mc-offer-toggle summary:after{ content:"▾"; font-size:.85rem; transition:transform .2s ease; }
.mc-offer-toggle[open] summary:after{ transform:rotate(180deg); }
.mc-pricing-card .mc-offer-toggle > ul{ margin:16px 0 0; flex-grow:0; }
.mc-offer-why{ margin-top:22px; display:grid; grid-template-columns:1fr; gap:12px; text-align:left; }
.mc-offer-why-title{
  font-family:var(--mc-font-head); font-weight:600; font-size:.95rem; color:#fff; margin:0 0 4px; text-align:center;
}
.mc-offer-why .mc-occasion-card{ padding:20px 18px; text-align:left; }
.mc-offer-why .mc-occasion-card .mc-icon{ margin:0 0 10px; }
.mc-pricing-specs{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 24px; }
.mc-pricing-specs span{
  font-size:.78rem; font-weight:600; color:var(--mc-gold-light); background:rgba(184,147,90,.12);
  border:1px solid rgba(184,147,90,.3); border-radius:999px; padding:6px 12px;
}
@media (max-width:680px){
  .mc-pricing-card{ padding:32px 24px; }
  .mc-pricing-featured{ transform:none; }
  .mc-price{ font-size:2.7rem; margin:8px 0 18px; }
}

/* =========================================================
   10. EXEMPLES / AUDIO — cartes de lecture premium
   ========================================================= */
.mc-audio-card{
  position:relative; background:linear-gradient(160deg,#181510 0%, var(--mc-black) 100%);
  border:1px solid rgba(184,147,90,.22); border-radius:var(--mc-radius);
  padding:26px; display:flex; gap:22px; align-items:center; text-align:left; overflow:hidden;
}
.mc-audio-demo-badge{
  position:absolute; top:16px; right:16px; font-size:.68rem; font-weight:700; letter-spacing:1px;
  text-transform:uppercase; color:var(--mc-black); background:var(--mc-gold); padding:4px 10px; border-radius:999px;
}
.mc-audio-cover{
  position:relative; flex:0 0 88px; width:88px; height:88px; border-radius:14px;
  background:linear-gradient(135deg,#2a2216,#0d0d0d); border:1px solid rgba(184,147,90,.3);
  display:flex; align-items:center; justify-content:center; color:var(--mc-gold); overflow:hidden;
}
.mc-audio-cover:after{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 30% 20%, rgba(184,147,90,.35), transparent 60%); }
.mc-audio-play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:1;
  background:rgba(13,13,13,.35); color:var(--mc-gold-light); cursor:default;
}
.mc-audio-play svg{ width:26px; height:26px; }
@media (max-width:420px){
  .mc-audio-card{ flex-direction:column; text-align:center; padding:22px 18px; gap:16px; }
  .mc-audio-cover{ margin:0 auto; }
  .mc-audio-row{ justify-content:center; }
  .mc-audio-demo-badge{ top:14px; right:14px; }
}
.mc-audio-body{ flex:1; min-width:0; }
.mc-audio-body .mc-audio-tag{ font-size:.78rem; text-transform:uppercase; letter-spacing:1.5px; color:var(--mc-gold); font-weight:700; }
.mc-audio-body strong{ display:block; font-family:var(--mc-font-head); font-size:1.25rem; margin:5px 0 4px; color:#fff; }
.mc-audio-body p{ margin:0 0 12px; color:#b9b4a8; font-size:.95rem; }
.mc-audio-row{ display:flex; align-items:center; gap:14px; }
.mc-audio-row .mc-waveform{ height:24px; flex:1; }
.mc-audio-row .mc-waveform span{ opacity:.5; }
.mc-audio-duration{ font-size:.82rem; color:#8a8579; font-variant-numeric:tabular-nums; }
.mc-audio-soon{ display:inline-block; margin-top:10px; font-size:.78rem; color:#8a8579; }

/* =========================================================
   11. FAQ
   ========================================================= */
.mc-faq-item{ border-bottom:1px solid #ece5d3; padding:22px 0; }
.mc-faq-item summary{ font-weight:600; cursor:pointer; font-family:var(--mc-font-head); font-size:1.15rem; list-style:none; }
.mc-faq-item summary::-webkit-details-marker{ display:none; }
.mc-faq-item summary:after{ content:"+"; float:right; color:var(--mc-gold); font-size:1.4rem; }
.mc-faq-item[open] summary:after{ content:"–"; }
.mc-faq-item p{ margin-top:12px; color:var(--mc-text-muted); font-size:1.02rem; }

/* =========================================================
   12. STICKY MOBILE CTA
   ========================================================= */
.mc-sticky-cta{ display:none; }
@media (max-width:782px){
  .mc-sticky-cta{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:9999;
    background:var(--mc-black); padding:12px 16px; justify-content:center;
    box-shadow:0 -6px 20px rgba(0,0,0,.28);
  }
  .mc-sticky-cta a{ width:100%; text-align:center; padding:15px 20px; min-height:auto; }
  body{ padding-bottom:70px; }
}

/* =========================================================
   13. FOOTER PERSONNALISE
   ========================================================= */
.mc-footer{ background:var(--mc-black); color:#e7e5df; padding:56px 24px 30px; }
.mc-footer-waveform{ display:flex; justify-content:center; margin-bottom:36px; opacity:.4; }
.mc-footer-inner{ max-width:var(--mc-max); margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; }
@media (max-width:782px){ .mc-footer-inner{ grid-template-columns:1fr; gap:32px; text-align:center; } }
@media (max-width:600px){ .mc-footer{ padding:44px 20px 24px; } .mc-footer-bottom{ font-size:.8rem; text-align:center; } }
.mc-footer-brand{ font-family:var(--mc-font-head); font-size:1.6rem; color:#fff; font-weight:700; }
.mc-footer-tagline{ color:var(--mc-gold-light); margin-top:6px; font-style:italic; }
.mc-footer h4{ color:#fff !important; font-size:1rem !important; text-transform:uppercase; letter-spacing:1.5px; margin-bottom:18px; font-family:var(--mc-font-body); }
.mc-footer ul{ list-style:none; margin:0; padding:0; }
.mc-footer ul li{ margin-bottom:12px; }
.mc-footer ul li a{ color:#cfccc3; text-decoration:none; }
.mc-footer ul li a:hover{ color:var(--mc-gold); }
.mc-footer-bottom{ max-width:var(--mc-max); margin:50px auto 0; padding-top:24px; border-top:1px solid rgba(255,255,255,.1); color:#8a8579; font-size:.88rem; }
#colophon.site-footer .site-info{ display:none; }

/* =========================================================
   14. FORMULAIRE DE PERSONNALISATION (page produit)
   ========================================================= */
.mc-order-panel{ background:var(--mc-white); border:1px solid #ece5d3; border-radius:24px; padding:44px; max-width:820px; margin:0 auto; }
@media (max-width:600px){ .mc-order-panel{ padding:24px 18px; } }
.mc-wizard-progress{ display:flex; align-items:flex-start; justify-content:center; gap:4px; margin-bottom:40px; flex-wrap:wrap; }
.mc-wizard-step{ display:flex; flex-direction:column; align-items:center; gap:8px; min-width:64px; }
.mc-wizard-dot{
  width:36px; height:36px; border-radius:50%; background:#f1ede2; color:var(--mc-text-muted);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.9rem; font-family:var(--mc-font-head);
  border:2px solid transparent; flex-shrink:0;
}
.mc-wizard-dot.is-active{ background:var(--mc-gold); color:var(--mc-black); box-shadow:0 4px 14px rgba(184,147,90,.4); }
.mc-wizard-dot.is-done{ background:var(--mc-black); color:var(--mc-gold-light); }
.mc-wizard-label{ font-size:.72rem; color:var(--mc-text-muted); text-align:center; line-height:1.2; }
.mc-wizard-dot.is-active ~ .mc-wizard-label{ color:var(--mc-black); font-weight:700; }
.mc-wizard-sep{ width:24px; height:2px; background:#e7e1d2; margin-top:17px; flex-shrink:0; }
@media (max-width:500px){
  .mc-wizard-progress{ gap:2px; }
  .mc-wizard-step{ min-width:0; }
  .mc-wizard-label{ display:none; }
  .mc-wizard-sep{ margin-top:0; width:14px; }
}

/* Etape 1 : offre selectionnee */
.mc-offer-summary{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  background:linear-gradient(135deg, rgba(184,147,90,.1), rgba(184,147,90,.03)); border:1px solid rgba(184,147,90,.3);
  border-radius:14px; padding:18px 22px; margin-bottom:6px;
}
.mc-offer-summary-tag{ display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:1.5px; color:var(--mc-gold-deep); font-weight:700; margin-bottom:4px; }
.mc-offer-summary strong{ font-family:var(--mc-font-head); font-size:1.3rem; }
.mc-offer-summary-price{ font-family:var(--mc-font-head); font-size:1.6rem; font-weight:700; color:var(--mc-black); }
.mc-offer-switch{ font-size:.85rem; color:var(--mc-text-muted); margin:8px 0 24px; }
.mc-offer-switch a{ color:var(--mc-gold-deep); font-weight:600; }

/* Etape 3 : sous-titres de bloc */
.mc-field-group{
  font-family:var(--mc-font-head); font-size:1.05rem; font-weight:700; color:var(--mc-black);
  margin:28px 0 14px; padding-top:20px; border-top:1px dashed #e2ddd0;
}
.mc-field-group:first-of-type{ margin-top:0; padding-top:0; border-top:none; }

/* Option express (case a cocher) */
.mc-checkbox-row{ display:flex; align-items:flex-start; gap:12px; cursor:pointer; font-size:.98rem; }
.mc-checkbox-row input[type=checkbox]{ width:20px; height:20px; margin-top:2px; accent-color:var(--mc-gold); flex-shrink:0; }
.mc-express-row{ background:#fdfcf9; border:1.5px solid #e2ddd0; border-radius:12px; padding:16px 18px; margin-top:22px; }
.mc-option-included{ background:#f6f3e9; border-color:#e7ddc0; }
.mc-checkbox-row-included{ cursor:default; }
.mc-included-check{
  width:20px; height:20px; margin-top:2px; flex-shrink:0; border-radius:50%; background:var(--mc-gold);
  color:#fff; font-size:.72rem; font-weight:700; display:flex; align-items:center; justify-content:center;
}

/* Etape 4 : recapitulatif de commande */
.mc-order-recap{ background:#fdfcf9; border:1.5px solid #e2ddd0; border-radius:14px; padding:22px 24px; margin-bottom:28px; }
.mc-recap-title{ font-family:var(--mc-font-head); font-size:1.1rem; margin:0 0 14px; }
.mc-recap-list{ display:grid; grid-template-columns:auto 1fr; gap:8px 16px; margin:0; }
.mc-recap-list dt{ color:var(--mc-text-muted); font-size:.92rem; }
.mc-recap-list dd{ margin:0; font-weight:600; font-size:.92rem; text-align:right; }
.mc-recap-total{ display:flex; justify-content:space-between; align-items:center; margin-top:16px; padding-top:16px; border-top:1px solid #e2ddd0; }
.mc-recap-total span{ font-weight:600; }
.mc-recap-total strong{ font-family:var(--mc-font-head); font-size:1.4rem; color:var(--mc-gold-deep); }

/* Bouton reel WooCommerce : masque hors de la derniere etape */
form.cart .single_add_to_cart_button.mc-submit-hidden{ display:none !important; }
.mc-song-form fieldset.mc-step-panel{ border:none; padding:0; margin:0 0 40px; }
.mc-song-form.js-wizard-active fieldset.mc-step-panel{ display:none; margin:0; animation:mcFadeIn .35s ease; }
.mc-song-form.js-wizard-active fieldset.mc-step-panel.is-active{ display:block; }
@keyframes mcFadeIn{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none;} }
.mc-song-form legend{ font-family:var(--mc-font-head); font-weight:700; font-size:1.35rem; padding:0 0 22px; }
.mc-song-form .mc-field{ margin-bottom:20px; }
.mc-song-form label{ display:block; font-weight:600; margin-bottom:8px; font-size:.96rem; }
.mc-song-form input[type=text], .mc-song-form input[type=date], .mc-song-form select, .mc-song-form textarea{
  width:100%; padding:14px 16px; border:1.5px solid #e2ddd0; border-radius:10px; font-size:1.02rem; background:#fdfcf9;
}
.mc-song-form input:focus, .mc-song-form select:focus, .mc-song-form textarea:focus{ outline:none; border-color:var(--mc-gold); background:#fff; }
.mc-song-form textarea{ min-height:120px; }
.mc-song-form .required{ color:var(--mc-gold-deep); }
.mc-song-form .mc-optional{ color:var(--mc-text-muted); font-weight:400; font-size:.85rem; }
.mc-wizard-nav{ display:flex; justify-content:space-between; gap:14px; margin-top:30px; }
.mc-wizard-nav button{ font-family:var(--mc-font-body); }
.mc-wizard-back{ background:transparent; border:2px solid #e2ddd0; color:var(--mc-black); border-radius:999px; padding:14px 28px; font-weight:700; cursor:pointer; }
.mc-wizard-next{ background:var(--mc-black); color:#fff; border:none; border-radius:999px; padding:14px 30px; font-weight:700; cursor:pointer; }
.mc-wizard-next:hover{ background:var(--mc-gold-deep); }
form.cart .single_add_to_cart_button{
  width:100%; background:var(--mc-gold) !important; color:var(--mc-black) !important; border:none !important;
  border-radius:999px !important; padding:19px !important; font-size:1.15rem !important; font-weight:700 !important;
  box-shadow:0 12px 26px rgba(184,147,90,.35); margin-top:8px;
}
form.cart .quantity{ display:none; }
/* Reserve l'espace du bouton WhatsApp flottant : le bouton de paiement ne doit jamais etre masque. */
@media (max-width:600px){ form.cart .single_add_to_cart_button{ width:calc(100% - 62px) !important; } }
/* Espace entre "Ajouter au panier" et les boutons de paiement express (Google Pay / Amazon Pay)
   injectes par la passerelle de paiement — CSS uniquement, aucune config de paiement modifiee. */
/* Portee au formulaire de la page produit uniquement (evite le bouton WhatsApp
   flottant a cet endroit precis) : ne doit pas s'appliquer au tunnel de commande,
   ou cette meme classe est reutilisee par WooCommerce Payments pour les boutons
   de paiement express (Google Pay / Apple Pay / Amazon Pay). */
body.single-product .wcpay-express-checkout-wrapper{ margin-top:22px !important; }
body.single-product .wcpay-express-checkout-wrapper + *{ margin-top:16px; }
@media (max-width:600px){ body.single-product .wcpay-express-checkout-wrapper{ max-width:calc(100% - 62px) !important; } }

/* =========================================================
   14b. FORMULAIRE DE CONTACT
   ========================================================= */
.mc-contact-form{ max-width:620px; margin:0 auto; text-align:left; background:#fff; border:1px solid #ece5d3; border-radius:20px; padding:40px; }
@media (max-width:600px){ .mc-contact-form{ padding:24px 20px; } }
.mc-contact-form .mc-field{ margin-bottom:20px; }
.mc-contact-form label{ display:block; font-weight:600; margin-bottom:8px; font-size:.96rem; }
.mc-contact-form input, .mc-contact-form textarea{
  width:100%; padding:14px 16px; border:1.5px solid #e2ddd0; border-radius:10px; font-size:1.02rem; background:#fdfcf9; font-family:var(--mc-font-body);
}
.mc-contact-form textarea{ min-height:140px; }
.mc-contact-form input:focus, .mc-contact-form textarea:focus{ outline:none; border-color:var(--mc-gold); background:#fff; }
.mc-contact-form button{ width:100%; }
.mc-notice{ max-width:620px; margin:0 auto 24px; padding:16px 20px; border-radius:12px; font-weight:600; }
.mc-notice-success{ background:#eaf6ec; color:#1e5c2a; border:1px solid #bfe3c6; }
.mc-notice-error{ background:#fbe9e7; color:#8a2c20; border:1px solid #f1c3ba; }

/* =========================================================
   15. PAGE PRODUIT — landing
   ========================================================= */
.mc-product-hero{
  position:relative; overflow:hidden; isolation:isolate;
  background:
    radial-gradient(ellipse 60% 50% at 18% 8%, rgba(184,147,90,.22) 0%, transparent 60%),
    radial-gradient(ellipse 70% 55% at 85% 100%, rgba(184,147,90,.14) 0%, transparent 55%),
    radial-gradient(ellipse 100% 70% at 50% -10%, #241f17 0%, var(--mc-black) 55%);
  color:#fff; text-align:center; padding:120px 24px 90px;
}
.mc-product-hero:before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:34px 34px; opacity:.35; mix-blend-mode:screen;
}
.mc-product-hero > *{ position:relative; z-index:2; }
.mc-product-hero h1{ color:#fff !important; }
@media (max-width:600px){
  .mc-product-hero{ padding:100px 18px 60px !important; }
  .mc-product-hero h1{ font-size:1.7rem !important; line-height:1.3 !important; }
  .mc-product-price{ font-size:2.4rem !important; }
  .mc-product-tagline{ font-size:1.05rem !important; }
}
.mc-product-price{ font-family:var(--mc-font-head); font-size:3.6rem; color:var(--mc-gold-light); margin:14px 0; }
.mc-product-tagline{ font-size:1.3rem; color:#e7e5df; max-width:640px; margin:0 auto; }
.mc-benefit-list{ list-style:none; margin:0 auto; padding:0; max-width:760px; display:grid; gap:16px; }
.mc-benefit-list li{ display:flex; gap:14px; align-items:flex-start; font-size:1.08rem; background:#fff; border:1px solid #ece5d3; border-radius:14px; padding:18px 20px; }
.mc-benefit-list li:before{ content:"✓"; color:var(--mc-gold); font-weight:900; font-size:1.2rem; }
.mc-benefit-grid{ list-style:none; margin:0 auto; padding:0; max-width:960px; display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
@media (max-width:700px){ .mc-benefit-grid{ grid-template-columns:1fr; } }
.mc-benefit-grid li{ background:#fff; border:1px solid #ece5d3; border-radius:16px; padding:24px; font-size:1.05rem; display:flex; gap:14px; align-items:flex-start; box-shadow:0 4px 14px rgba(13,13,13,.04); }
.mc-benefit-grid li .mc-check{ flex:0 0 auto; width:28px; height:28px; border-radius:50%; background:var(--mc-gold); color:var(--mc-black); display:flex; align-items:center; justify-content:center; font-weight:900; font-size:.95rem; }
.mc-why-grid{ max-width:900px; margin:0 auto; }

/* =========================================================
   16. WOOCOMMERCE — nettoyage éléments boutique génériques
   ========================================================= */
.related.products, .up-sells, .woocommerce-breadcrumb, .product_meta, .woocommerce-tabs{ display:none !important; }

/* =========================================================
   18. BOUTON WHATSAPP FLOTTANT — contact secondaire
   ========================================================= */
.mc-whatsapp-float{
  position:fixed; right:20px; bottom:24px; z-index:590;
  width:52px; height:52px; border-radius:50%;
  background:var(--mc-black); color:#25D366; border:1.5px solid var(--mc-gold);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 22px rgba(13,13,13,.3); transition:transform .2s ease, box-shadow .2s ease;
}
.mc-whatsapp-float:hover{ transform:translateY(-3px); box-shadow:0 12px 28px rgba(13,13,13,.4); color:#25D366; }
/* Sur mobile, remonte au-dessus de la barre CTA fixe ("Créer ma chanson") pour ne jamais la masquer.
   Cette barre est absente sur produit/panier/checkout/mon compte : le bouton peut y redescendre. */
@media (max-width:782px){
  .mc-whatsapp-float{ width:48px; height:48px; right:14px; bottom:86px; }
  body.single-product .mc-whatsapp-float,
  body.woocommerce-cart .mc-whatsapp-float,
  body.woocommerce-checkout .mc-whatsapp-float,
  body.woocommerce-account .mc-whatsapp-float{ bottom:14px; }
}

/* =========================================================
   17. SELECTEUR D'UNIVERS MUSICAL — chips avec icone note
   ========================================================= */
.mc-genre-picker{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
@media (max-width:480px){ .mc-genre-picker{ grid-template-columns:1fr; } }
.mc-genre-picker input[type=radio]{ position:absolute; opacity:0; width:0; height:0; }
.mc-genre-chip{
  display:flex; align-items:center; gap:10px; padding:14px 16px; border:1.5px solid #e2ddd0; border-radius:12px;
  cursor:pointer; font-size:.98rem; font-weight:600; color:var(--mc-black); background:#fdfcf9; transition:all .2s ease;
}
.mc-genre-chip svg{ flex:0 0 auto; width:18px; height:18px; color:var(--mc-gold); }
.mc-genre-picker input[type=radio]:checked + .mc-genre-chip{
  border-color:var(--mc-gold); background:linear-gradient(135deg, rgba(184,147,90,.12), rgba(184,147,90,.04)); color:var(--mc-black);
  box-shadow:0 4px 14px rgba(184,147,90,.18);
}
.mc-genre-picker input[type=radio]:focus-visible + .mc-genre-chip{ outline:2px solid var(--mc-gold); outline-offset:2px; }

/* =========================================================
   19. MON COMPTE — habillage MA CHANSON du compte WooCommerce natif
   ========================================================= */
.woocommerce-account .woocommerce-MyAccount-navigation ul{ list-style:none; margin:0; padding:0; border:1px solid #ece5d3; border-radius:14px; overflow:hidden; }
.woocommerce-account .woocommerce-MyAccount-navigation li{ border-bottom:1px solid #ece5d3; }
.woocommerce-account .woocommerce-MyAccount-navigation li:last-child{ border-bottom:none; }
.woocommerce-account .woocommerce-MyAccount-navigation a{
  display:block; padding:14px 18px; font-family:var(--mc-font-body); font-weight:600; color:var(--mc-black); text-decoration:none;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{ background:var(--mc-black); color:var(--mc-gold-light); }
.woocommerce-account .woocommerce-MyAccount-navigation a:hover{ color:var(--mc-gold-deep); }

.woocommerce-account table.woocommerce-orders-table,
.woocommerce-account table.shop_table{ border:1px solid #ece5d3; border-radius:12px; overflow:hidden; border-collapse:separate; }
.woocommerce-account table.woocommerce-orders-table th{ background:var(--mc-cream); font-family:var(--mc-font-head); font-weight:700; }

/* Detail de commande : le prix et la quantite doivent rester alignes en haut,
   meme quand la liste des informations de personnalisation est tres longue. */
.woocommerce-table--order-details td,
.woocommerce-table--order-details th{ vertical-align:top; padding-top:16px; }
.woocommerce-table--order-details .wc-item-meta{ margin:10px 0 0; padding:0; list-style:none; }
.woocommerce-table--order-details .wc-item-meta li{ margin-bottom:10px; line-height:1.5; }
.woocommerce-table--order-details .wc-item-meta li strong{ font-family:var(--mc-font-body); color:var(--mc-black); }
.woocommerce-account .woocommerce-orders-table__cell-order-status mark{ background:none; color:var(--mc-gold-deep); font-weight:700; }

.woocommerce-account .button,
.woocommerce-account .woocommerce-button,
.woocommerce-account button[name="save_account_details"],
.woocommerce-account button[type="submit"]{
  background:var(--mc-gold) !important; color:var(--mc-black) !important; border:none !important; border-radius:999px !important;
  padding:13px 26px !important; font-weight:700 !important; text-transform:none !important; display:inline-block; margin:3px 4px 3px 0;
}
.woocommerce-account .button:hover,
.woocommerce-account .woocommerce-button:hover{ background:var(--mc-gold-deep) !important; color:var(--mc-black) !important; }
.woocommerce-account .button.view,
.woocommerce-account .woocommerce-button.view{ background:transparent !important; color:var(--mc-black) !important; border:1.5px solid var(--mc-black) !important; }
.woocommerce-account .button.cancel,
.woocommerce-account .woocommerce-button.cancel{ background:transparent !important; color:#a12b2b !important; border:1.5px solid #a12b2b !important; }

.woocommerce-account fieldset{ border:1px solid #ece5d3; border-radius:14px; padding:20px; }
.woocommerce-account legend{ font-family:var(--mc-font-head); font-weight:700; padding:0 10px; }

/* Boite "chanson prete" sur le detail de commande cote client */
.mc-delivery-box{
  background:linear-gradient(135deg, rgba(184,147,90,.1), rgba(184,147,90,.03)); border:1.5px solid var(--mc-gold);
  border-radius:16px; padding:24px; margin:24px 0; text-align:center;
}
.mc-delivery-box p{ margin:0 0 14px; font-family:var(--mc-font-head); font-size:1.15rem; }

/* =========================================================
   20. NOTICES WOOCOMMERCE — succes / info / erreur
   Reprend l'habillage deja utilise pour le formulaire de contact,
   applique globalement (ajout panier, erreurs de validation, etc.).
   Le code couleur (vert/rouge) est conserve pour la lisibilite fonctionnelle.
   ========================================================= */
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice,
ul.woocommerce-error{
  border-top-color:var(--mc-gold) !important; border-radius:12px !important; padding:16px 20px 16px 50px !important;
  font-family:var(--mc-font-body) !important; font-weight:600 !important; box-shadow:none !important;
}
.woocommerce-message::before, .woocommerce-info::before{ color:var(--mc-gold-deep) !important; top:16px !important; }
.woocommerce-error::before{ color:#a12b2b !important; top:16px !important; }
.woocommerce-message .button, .woocommerce-error .button, .woocommerce-info .button,
.woocommerce-message .wc-forward, .woocommerce-info .wc-forward{
  background:var(--mc-gold) !important; color:var(--mc-black) !important; border-radius:999px !important;
  padding:10px 22px !important; font-weight:700 !important; border:none !important;
}
.woocommerce-message .button:hover, .woocommerce-error .button:hover, .woocommerce-info .button:hover{ background:var(--mc-gold-deep) !important; }

/* =========================================================
   21. PANIER & CHECKOUT — WooCommerce Blocks (React)
   Ce site utilise les blocs Panier/Commande (et non les anciens gabarits),
   d'ou des classes "wc-block-*". On habille les elements generiques
   (boutons, champs, totaux) sans toucher au fonctionnement du tunnel.
   ========================================================= */
.woocommerce-cart .entry-content, .woocommerce-checkout .entry-content{ max-width:var(--mc-max); margin:0 auto; padding:56px 24px 90px; }
@media (max-width:600px){ .woocommerce-cart .entry-content, .woocommerce-checkout .entry-content{ padding:32px 18px 70px; } }

/* Boutons : Proceder au paiement / Payer / Appliquer un code / Retour au panier... */
.wc-block-components-button.wp-element-button,
.wc-block-components-button{
  background:var(--mc-gold) !important; color:var(--mc-black) !important; border:none !important;
  border-radius:999px !important; font-weight:700 !important; font-family:var(--mc-font-body) !important;
  box-shadow:0 10px 26px rgba(184,147,90,.3) !important; padding:14px 28px !important;
}
.wc-block-components-button.wp-element-button:hover,
.wc-block-components-button:hover{ background:var(--mc-gold-deep) !important; color:var(--mc-black) !important; }
/* Boutons secondaires (ex : "Retour au panier", contour uniquement) */
.wc-block-components-button.wp-element-button.is-link,
.wc-block-components-button.outlined{
  background:transparent !important; color:var(--mc-black) !important; border:1.5px solid var(--mc-black) !important;
  box-shadow:none !important;
}
.wc-block-cart__submit-container .wc-block-components-button,
.wc-block-checkout__actions_row .wc-block-components-button{ width:100%; padding:18px !important; font-size:1.08rem !important; }

/* CAUSE REELLE du chevauchement signale sur mobile : la traduction francaise du
   bloc WooCommerce "Express Checkout" est "Validation de commande express", affiche
   comme un vrai <h2>. Notre regle typographique globale (section 1) agrandit TOUS les
   h2 du site a une taille "titre marketing" (jusqu'a 2.8rem) : applique ici, ce titre
   interne du bloc devient enorme, passe sur 3 lignes et deborde sur les boutons
   Google Pay / Amazon Pay juste en dessous. On neutralise cette taille uniquement a
   l'interieur des blocs panier/checkout — leurs titres d'etape restent des libelles
   de formulaire sobres, jamais des titres de page. */
.wc-block-checkout h2, .wc-block-cart h2,
.wc-block-checkout h3, .wc-block-cart h3,
.wc-block-components-express-payment__title{
  font-size:1.05rem !important; line-height:1.4 !important; margin:0 0 12px !important;
}

/* Paiement express (Google Pay / Apple Pay / Amazon Pay...) : ces boutons doivent
   toujours garder leur apparence officielle imposee par leur fournisseur, jamais
   notre habillage "pilule doree" ci-dessus. */
.wc-block-components-express-payment{ margin-bottom:20px; }
.wc-block-components-express-payment .wc-block-components-button,
.wc-block-components-express-payment__event-buttons .wc-block-components-button,
.wcpay-express-checkout-wrapper .wc-block-components-button{
  background:revert !important; color:revert !important; border:revert !important;
  border-radius:revert !important; box-shadow:revert !important; padding:revert !important;
  font-weight:revert !important; font-family:revert !important; width:auto !important;
}

/* Champs de saisie (adresse, contact, coupon...) */
.wc-block-components-text-input input[type=text], .wc-block-components-text-input input[type=email],
.wc-block-components-text-input input[type=tel], .wc-block-components-text-input input[type=number],
.wc-block-components-textarea textarea, .wc-block-components-address-form input, .wc-block-components-combobox input{
  border:1.5px solid #e2ddd0 !important; border-radius:10px !important; font-family:var(--mc-font-body) !important;
}
.wc-block-components-text-input input:focus, .wc-block-components-textarea textarea:focus{ border-color:var(--mc-gold) !important; box-shadow:none !important; }
.wc-block-components-text-input label, .wc-block-components-address-form label{ font-family:var(--mc-font-body) !important; }
.wc-block-components-radio-control__option{ border-radius:10px !important; }
.wc-block-components-radio-control__option.wc-block-components-radio-control__option-checked,
.wc-block-components-radio-control__input:checked{ accent-color:var(--mc-gold) !important; }

/* Titres d'etape du checkout (Coordonnees / Adresse / Paiement) */
.wc-block-components-checkout-step__title{ font-family:var(--mc-font-head) !important; font-weight:700 !important; color:var(--mc-black) !important; }
.wc-block-components-checkout-step__heading-content, .wc-block-checkout__form{ font-family:var(--mc-font-body); }

/* Recapitulatif / totaux (panier + colonne de droite du checkout) */
.wc-block-components-totals-item__value, .wc-block-components-totals-footer-item .wc-block-components-totals-item__value{
  font-family:var(--mc-font-head) !important; font-weight:700 !important; color:var(--mc-black) !important;
}
.wc-block-components-totals-footer-item{ border-top:1px solid #e2ddd0 !important; }
.wc-block-components-panel, .wc-block-components-order-summary, .wc-block-checkout__sidebar .wc-block-components-totals-wrapper{
  border-radius:16px !important; border:1px solid #ece5d3 !important;
}
.wc-block-components-panel__button{ font-family:var(--mc-font-body) !important; font-weight:600 !important; color:var(--mc-gold-deep) !important; }

/* Lignes produit du panier */
.wc-block-components-product-name{ font-family:var(--mc-font-head) !important; color:var(--mc-black) !important; text-decoration:none !important; }
.wc-block-cart-item__wrap{ border-color:#ece5d3 !important; }

@media (max-width:600px){
  .wc-block-components-button.wp-element-button, .wc-block-components-button{ padding:13px 20px !important; font-size:.98rem !important; }
}

/* =========================================================
   22. CONFIRMATION DE COMMANDE — mise en avant MA CHANSON
   S'affiche avant le recapitulatif natif WooCommerce (numero, table
   de commande, adresse...) qui reste entierement present en dessous.
   ========================================================= */
.mc-thankyou-hero{
  background:linear-gradient(165deg, #17140f 0%, var(--mc-black) 100%); color:#fff; border-radius:24px;
  padding:48px 32px; text-align:center; margin-bottom:40px; border:1px solid rgba(184,147,90,.3);
}
.mc-thankyou-emoji{ font-size:2.4rem; margin:0 0 8px; }
.mc-thankyou-hero h2{ color:#fff !important; margin:0 0 12px; font-size:clamp(1.5rem,4vw,2.2rem) !important; }
.mc-thankyou-sub{ color:#d4d2cb; max-width:520px; margin:0 auto 30px; }
.mc-thankyou-recap{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(180px,100%),1fr)); gap:20px 28px;
  max-width:760px; margin:0 auto; text-align:left;
}
.mc-thankyou-recap dt{ font-size:.74rem; text-transform:uppercase; letter-spacing:1.5px; color:var(--mc-gold-light); margin-bottom:4px; }
.mc-thankyou-recap dd{ margin:0; font-weight:700; font-family:var(--mc-font-head); font-size:1.05rem; }
@media (max-width:600px){ .mc-thankyou-hero{ padding:34px 22px; } }

.woocommerce-order .woocommerce-order-overview{
  display:flex; flex-wrap:wrap; gap:16px 32px; list-style:none; margin:0 0 36px; padding:24px;
  background:#fdfcf9; border:1px solid #ece5d3; border-radius:16px;
}
.woocommerce-order .woocommerce-order-overview li{ font-size:.95rem; }
.woocommerce-order .woocommerce-order-overview li strong{ display:block; font-family:var(--mc-font-head); font-size:1.1rem; margin-top:2px; }

/* =========================================================
   23. CONNEXION / CREATION DE COMPTE
   ========================================================= */
#customer_login.col2-set{ display:grid; grid-template-columns:1fr 1fr; gap:32px; max-width:900px; margin:0 auto; }
@media (max-width:700px){ #customer_login.col2-set{ grid-template-columns:1fr; gap:24px; } }
#customer_login .u-column1, #customer_login .u-column2{
  background:#fff; border:1px solid #ece5d3; border-radius:20px; padding:36px 32px; float:none; width:auto;
}
@media (max-width:600px){ #customer_login .u-column1, #customer_login .u-column2{ padding:26px 22px; } }
#customer_login h2{ margin-top:0 !important; font-size:1.5rem !important; }
.woocommerce-form-login .form-row, .woocommerce-form-register .form-row{ margin-bottom:18px; }
.woocommerce-form-login label, .woocommerce-form-register label{ display:block; font-weight:600; margin-bottom:8px; font-size:.96rem; }
.woocommerce-form-login .woocommerce-Input, .woocommerce-form-register .woocommerce-Input{
  width:100%; padding:14px 16px !important; border:1.5px solid #e2ddd0 !important; border-radius:10px !important;
  font-size:1.02rem; background:#fdfcf9; font-family:var(--mc-font-body);
}
.woocommerce-form-login .woocommerce-Input:focus, .woocommerce-form-register .woocommerce-Input:focus{ outline:none; border-color:var(--mc-gold) !important; background:#fff; }
.woocommerce-form-login__submit, .woocommerce-form-register__submit{
  background:var(--mc-gold) !important; color:var(--mc-black) !important; border:none !important; border-radius:999px !important;
  padding:15px 30px !important; font-weight:700 !important; width:100%;
}
.woocommerce-form-login__submit:hover, .woocommerce-form-register__submit:hover{ background:var(--mc-gold-deep) !important; }
.woocommerce-form-login__rememberme{ display:flex !important; align-items:center; gap:8px; font-weight:400 !important; }
.woocommerce-LostPassword{ margin-top:14px; font-size:.92rem; }
.woocommerce-LostPassword a{ color:var(--mc-gold-deep); font-weight:600; }

/* =========================================================
   24. AIDES DE SAISIE DISCRETES (formulaire de personnalisation)
   ========================================================= */
.mc-field-hint{ margin:6px 0 0; font-size:.84rem; color:var(--mc-text-muted); font-style:italic; }

/* =========================================================
   25. WIDGET COOKIES — ne jamais masquer les boutons flottants
   Les couleurs de la banniere sont personnalisees via les reglages
   propres au plugin (cookieadmin_consent_settings), pas en CSS :
   seul le positionnement mobile est ajuste ici pour eviter tout
   chevauchement avec la barre CTA et le bouton WhatsApp.
   ========================================================= */
@media (max-width:782px){
  .cookieadmin_law_container.cookieadmin_bottom,
  .cookieadmin_box.cookieadmin_bottom{ bottom:86px !important; }
  body.single-product .cookieadmin_law_container.cookieadmin_bottom,
  body.single-product .cookieadmin_box.cookieadmin_bottom,
  body.woocommerce-cart .cookieadmin_law_container.cookieadmin_bottom,
  body.woocommerce-cart .cookieadmin_box.cookieadmin_bottom,
  body.woocommerce-checkout .cookieadmin_law_container.cookieadmin_bottom,
  body.woocommerce-checkout .cookieadmin_box.cookieadmin_bottom,
  body.woocommerce-account .cookieadmin_law_container.cookieadmin_bottom,
  body.woocommerce-account .cookieadmin_box.cookieadmin_bottom{ bottom:20px !important; }
}

/* =========================================================
   26. MON COMPTE — TELECHARGEMENTS (chanson finalisee)
   Table native WooCommerce (woocommerce-table--order-downloads) : on habille
   son contenu, pas sa mecanique (lien de telechargement securise inchange).
   ========================================================= */
.woocommerce-table--order-downloads{ border:1px solid #ece5d3; border-radius:14px; overflow:hidden; }
.woocommerce-table--order-downloads th{ background:var(--mc-cream); font-family:var(--mc-font-head); font-weight:700; }
.mc-download-title{ display:block; font-family:var(--mc-font-head); font-size:1.1rem; color:var(--mc-black); }
.mc-download-format{ display:block; font-size:.82rem; color:var(--mc-text-muted); margin-top:2px; }
.woocommerce-MyAccount-downloads-file.mc-btn{ padding:12px 24px; min-height:auto; }
@media (max-width:600px){
  .woocommerce-table--order-downloads td, .woocommerce-table--order-downloads th{ padding:14px 12px; }
}

/* =========================================================
   27. SUIVI VISUEL DE LA CREATION — Recue / En cours / Prete
   Affiche sur la confirmation de commande et le detail de commande
   ("Mon compte"). Deduit du statut natif WooCommerce, sans nouveau statut.
   ========================================================= */
.mc-progress-tracker{ display:flex; align-items:flex-start; justify-content:center; gap:0; margin:28px auto; max-width:520px; }
.mc-progress-step{ display:flex; flex-direction:column; align-items:center; gap:8px; flex:0 0 auto; width:100px; }
.mc-progress-dot{
  width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; background:#f1ede2; color:var(--mc-text-muted); border:2px solid transparent; flex-shrink:0;
}
.mc-progress-line{ flex:1 1 auto; height:2px; margin-top:22px; background:#e7e1d2; min-width:20px; }
.mc-progress-line-done{ background:var(--mc-gold); }
.mc-progress-label{ font-size:.78rem; text-align:center; line-height:1.25; color:var(--mc-text-muted); }
.mc-progress-done .mc-progress-dot{ background:var(--mc-black); color:var(--mc-gold-light); }
.mc-progress-done .mc-progress-label{ color:var(--mc-black); }
.mc-progress-active .mc-progress-dot{ background:var(--mc-gold); color:var(--mc-black); box-shadow:0 4px 14px rgba(184,147,90,.4); }
.mc-progress-active .mc-progress-label{ color:var(--mc-black); font-weight:700; }
.mc-thankyou-hero .mc-progress-label{ color:#d4d2cb; }
.mc-thankyou-hero .mc-progress-active .mc-progress-label,
.mc-thankyou-hero .mc-progress-done .mc-progress-label{ color:#fff; }
.mc-progress-note{ text-align:center; max-width:480px; margin:0 auto 24px; color:var(--mc-text-muted); font-size:.94rem; }
.mc-thankyou-hero .mc-progress-note{ color:#d4d2cb; }
.mc-progress-note-done{ color:var(--mc-gold-deep); font-weight:600; }
.mc-thankyou-hero .mc-progress-note-done{ color:var(--mc-gold-light); }
@media (max-width:480px){
  .mc-progress-step{ width:76px; }
  .mc-progress-dot{ width:38px; height:38px; font-size:1rem; }
  .mc-progress-label{ font-size:.7rem; }
  .mc-progress-line{ margin-top:19px; }
}

/* =========================================================
   28. FILTRES "NOS CHANSONS" — par occasion
   ========================================================= */
.mc-song-filters{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:0 0 40px; }
.mc-filter-chip{
  background:transparent; border:1.5px solid rgba(184,147,90,.4); color:#e7e5df;
  border-radius:999px; padding:9px 20px; font-size:.88rem; font-weight:600; font-family:var(--mc-font-body);
  cursor:pointer; transition:all .2s ease;
}
.mc-filter-chip:hover{ border-color:var(--mc-gold); color:#fff; }
.mc-filter-chip.is-active{ background:var(--mc-gold); border-color:var(--mc-gold); color:var(--mc-black); }
.mc-song-filters-empty{ text-align:center; color:#a8a297; margin:0 0 32px; }
@media (max-width:600px){
  .mc-song-filters{ gap:8px; margin-bottom:28px; }
  .mc-filter-chip{ padding:8px 14px; font-size:.8rem; }
}
/* .mc-audio-card force son propre display:flex, ce qui l'emporte sinon sur
   l'attribut natif "hidden" pose par le filtre JS (meme specificite, regle
   d'auteur declaree apres la feuille de style par defaut du navigateur). */
.mc-audio-card[hidden]{ display:none !important; }

/* =========================================================
   29. PROGRAMME DE PARRAINAGE
   ========================================================= */
.mc-referral-box{
  background:linear-gradient(135deg, rgba(184,147,90,.1), rgba(184,147,90,.03)); border:1.5px solid var(--mc-gold);
  border-radius:16px; padding:24px 26px; margin:0 0 28px; text-align:center;
}
.mc-referral-title{ font-family:var(--mc-font-head); font-size:1.15rem; font-weight:700; margin:0 0 8px; }
.mc-referral-text{ color:var(--mc-text-muted); font-size:.92rem; margin:0 0 16px; max-width:440px; margin-left:auto; margin-right:auto; }
.mc-referral-code-row{ display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; }
.mc-referral-code{
  font-family:var(--mc-font-head); font-size:1.2rem; font-weight:700; letter-spacing:1.5px;
  background:#fff; border:1.5px dashed var(--mc-gold); border-radius:10px; padding:10px 20px; color:var(--mc-black);
}
.mc-referral-copy{ padding:10px 20px; min-height:auto; }
.mc-thankyou-hero .mc-referral-box{ background:rgba(255,255,255,.06); border-color:rgba(184,147,90,.4); }
.mc-thankyou-hero .mc-referral-title{ color:#fff; }
.mc-thankyou-hero .mc-referral-text{ color:#d4d2cb; }
.mc-thankyou-hero .mc-referral-code{ background:rgba(255,255,255,.08); color:#fff; }
.mc-thankyou-hero .mc-referral-copy{ border-color:rgba(255,255,255,.6); color:#fff; }
@media (max-width:480px){
  .mc-referral-box{ padding:20px 18px; }
  .mc-referral-code{ font-size:1.05rem; padding:9px 16px; }
}