/* Crée Ma Chanson — responsive mobile dédié 2026 */
.cmc-mobile-header{display:none}

@media(max-width:760px){
  html.cmc-js body:not(.admin-page) .cmc-hero-home{display:none!important}
  html.cmc-js body:not(.admin-page) .cmc-mobile-header{
    display:block;
    position:relative;
    z-index:120;
    width:100%;
    padding:10px 10px 0;
  }
  .cmc-mobile-bar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    min-height:68px;
    padding:9px 10px 9px 12px;
    border:1px solid rgba(161,140,255,.24);
    border-radius:20px;
    background:
      radial-gradient(circle at 0 0,rgba(73,170,255,.10),transparent 34%),
      radial-gradient(circle at 100% 100%,rgba(245,69,197,.10),transparent 36%),
      linear-gradient(145deg,rgba(8,21,58,.96),rgba(36,22,78,.94));
    box-shadow:0 14px 34px rgba(3,7,31,.20),inset 0 1px 0 rgba(255,255,255,.055);
    backdrop-filter:blur(15px) saturate(130%);
  }
  .cmc-mobile-brand{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
    color:#fff;
    text-decoration:none;
  }
  .cmc-mobile-brand img,
  .cmc-mobile-brand-mark{
    flex:0 0 44px;
    width:44px;
    height:44px;
    border-radius:14px;
    object-fit:cover;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,140,218,.28);
    background:linear-gradient(135deg,rgba(62,45,142,.76),rgba(14,82,133,.52));
    box-shadow:0 0 22px rgba(146,76,255,.13),inset 0 1px 0 rgba(255,255,255,.07);
  }
  .cmc-mobile-brand-copy{display:flex;flex-direction:column;min-width:0;line-height:1.08}
  .cmc-mobile-brand-copy strong{font-size:15px;font-weight:950;letter-spacing:-.015em;white-space:nowrap}
  .cmc-mobile-brand-copy small{margin-top:4px;color:#aebad3;font-size:9px;font-weight:700;white-space:nowrap}

  .cmc-mobile-menu-toggle{
    flex:0 0 48px;
    width:48px;
    height:48px;
    padding:0;
    border:1px solid rgba(255,125,213,.30);
    border-radius:15px;
    background:linear-gradient(145deg,rgba(91,60,179,.28),rgba(210,75,165,.14));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    cursor:pointer;
  }
  .cmc-mobile-menu-toggle span{display:block;width:21px;height:2px;border-radius:999px;background:#f7efff;box-shadow:0 0 8px rgba(255,126,214,.24);transition:.18s ease}
  .cmc-mobile-header.is-open .cmc-mobile-menu-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .cmc-mobile-header.is-open .cmc-mobile-menu-toggle span:nth-child(2){opacity:0}
  .cmc-mobile-header.is-open .cmc-mobile-menu-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  .cmc-mobile-nav{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
    margin:8px 0 0;
    padding:10px;
    border:1px solid rgba(165,146,255,.22);
    border-radius:20px;
    background:linear-gradient(150deg,rgba(8,20,55,.98),rgba(37,22,78,.98));
    box-shadow:0 18px 42px rgba(2,6,27,.26),inset 0 1px 0 rgba(255,255,255,.05);
  }
  .cmc-mobile-nav[hidden]{display:none!important}
  .cmc-mobile-nav-link{
    min-height:52px;
    padding:9px 11px;
    display:flex;
    align-items:center;
    gap:11px;
    border:1px solid rgba(145,130,255,.14);
    border-radius:15px;
    background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.018));
    color:#eef1ff;
    text-decoration:none;
    font-weight:850;
    font-size:13px;
  }
  .cmc-mobile-nav-link[aria-current="page"]{
    border-color:rgba(255,123,211,.60);
    background:linear-gradient(135deg,rgba(112,71,204,.34),rgba(219,77,168,.22));
    box-shadow:0 0 24px rgba(255,95,196,.07),inset 0 1px 0 rgba(255,255,255,.07);
  }
  .cmc-mobile-nav-icon{
    flex:0 0 34px;
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border-radius:12px;
    color:#ff9bdd;
    background:rgba(103,75,190,.14);
    border:1px solid rgba(150,130,255,.16);
  }
  .cmc-mobile-nav-label{min-width:0;overflow-wrap:anywhere}

  /* Les retours textuels deviennent inutiles avec le header mobile. */
  body:not(.admin-page) .cmc-page-return-wrap{display:none!important}

  /* Connexion / inscription : vraie composition mobile, compacte. */
  body.cmc-page-login main,
  body.cmc-page-register main{padding-top:14px!important}
  body.cmc-page-login .login.panel,
  body.cmc-page-register .login.panel,
  body.cmc-page-register .register.panel{
    width:calc(100% - 20px)!important;
    max-width:560px!important;
    margin:12px auto 36px!important;
    padding:24px 18px!important;
    border-radius:22px!important;
  }
  body.cmc-page-login .login.panel h1,
  body.cmc-page-register :is(.login.panel,.register.panel) h1{
    margin:0 0 20px!important;
    font-size:clamp(34px,10vw,46px)!important;
    line-height:1.02!important;
  }
  body.cmc-page-login .login.panel .field,
  body.cmc-page-register :is(.login.panel,.register.panel) .field{margin-bottom:16px!important}
  body.cmc-page-login .login.panel input,
  body.cmc-page-register :is(.login.panel,.register.panel) input{
    min-height:52px!important;
    font-size:16px!important;
  }
  body.cmc-page-login .login.panel .btn,
  body.cmc-page-register :is(.login.panel,.register.panel) .btn{width:100%!important;min-height:50px!important}

  /* Espace client : menu mobile indépendant dans son comportement. */
  body.cmc-account-area .account-nav{
    display:flex!important;
    grid-template-columns:none!important;
    width:100%!important;
    margin:10px 0 8px!important;
    padding:8px 10px!important;
    gap:8px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    border-left:0!important;
    border-right:0!important;
    border-radius:0!important;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    background:linear-gradient(180deg,rgba(9,21,57,.96),rgba(31,21,70,.92))!important;
    box-shadow:0 12px 28px rgba(3,7,30,.14)!important;
  }
  body.cmc-account-area .account-nav::-webkit-scrollbar{display:none}
  body.cmc-account-area .account-nav-item{
    flex:0 0 auto!important;
    width:auto!important;
    min-width:118px!important;
    min-height:52px!important;
    padding:8px 10px!important;
    flex-direction:row!important;
    justify-content:flex-start!important;
    gap:8px!important;
    border-radius:14px!important;
    text-align:left!important;
    scroll-snap-align:start;
  }
  body.cmc-account-area .account-nav-item>span{
    flex:0 0 26px!important;
    width:26px!important;
    font-size:15px!important;
    text-align:center!important;
  }
  body.cmc-account-area .account-nav-item strong{font-size:10px!important;white-space:nowrap!important}

  body.cmc-account-area .account-page.section,
  body.cmc-account-area .account-page{
    width:calc(100% - 20px)!important;
    padding:14px 0 56px!important;
  }
  body.cmc-account-area .account-hero,
  body.cmc-account-area .account-page-head{
    min-height:0!important;
    padding:20px 18px!important;
    margin-bottom:18px!important;
    border-radius:22px!important;
  }
  body.cmc-account-area .account-hero::before,
  body.cmc-account-area .account-page-head::before{width:160px!important;height:160px!important;right:-65px!important;top:-70px!important}
  body.cmc-account-area .account-hero::after,
  body.cmc-account-area .account-page-head::after{right:20px!important;bottom:18px!important;width:84px!important}
  body.cmc-account-area .account-hero .eyebrow,
  body.cmc-account-area .account-page-head .eyebrow{font-size:9px!important}
  body.cmc-account-area .account-hero h1,
  body.cmc-account-area .account-page-head h1{
    margin:5px 0 7px!important;
    font-size:clamp(28px,8vw,38px)!important;
    letter-spacing:-.035em!important;
  }
  body.cmc-account-area .account-hero p,
  body.cmc-account-area .account-page-head p{font-size:12px!important;line-height:1.5!important;max-width:88%!important}
  body.cmc-account-area .account-section{margin:18px 0!important}
  body.cmc-account-area .account-section-title{margin:0 2px 9px!important;gap:4px!important}
  body.cmc-account-area .account-section-title h2{font-size:22px!important}
  body.cmc-account-area .panel,
  body.cmc-account-area .detail-card,
  body.cmc-account-area .order-detail-head,
  body.cmc-account-area .billing-profile-card,
  body.cmc-account-area .referral-account-card{
    padding:17px!important;
    border-radius:20px!important;
  }
  body.cmc-account-area .account-billing-form,
  body.cmc-account-area .billing-profile-form{grid-template-columns:1fr!important;gap:12px!important}
  body.cmc-account-area .billing-profile-form .billing-wide{grid-column:auto!important}
  body.cmc-account-area .billing-profile-form>div:last-child{grid-column:auto!important}
  body.cmc-account-area .orders-grid,
  body.cmc-account-area .account-thread-grid,
  body.cmc-account-area .account-delivery-grid{grid-template-columns:1fr!important}
  body.cmc-account-area .referral-account-card{grid-template-columns:1fr!important;gap:14px!important}
}

@media(max-width:390px){
  .cmc-mobile-brand-copy small{display:none}
  .cmc-mobile-brand-copy strong{font-size:14px}
  .cmc-mobile-brand img,.cmc-mobile-brand-mark{flex-basis:40px;width:40px;height:40px}
  .cmc-mobile-menu-toggle{flex-basis:44px;width:44px;height:44px}
  body.cmc-account-area .account-nav-item{min-width:108px!important}
  body.cmc-account-area .account-hero h1,
  body.cmc-account-area .account-page-head h1{font-size:29px!important}
}

@media(prefers-reduced-motion:reduce){
  .cmc-mobile-menu-toggle span,
  .cmc-mobile-nav-link{transition:none!important}
}