/* ── MOBILE (≤ 768px) ── */
@media(max-width:768px){
  /* Body needs bottom padding for mobile nav */
  body{padding-bottom:60px}
  main{padding-bottom:4px}

  /* NAV — simplified on mobile */
  .nav{padding:0 16px;height:52px}
  .logo{width:96px}
  main{padding-top:52px}
  .nav-tabs{display:none}
  .nav-right{gap:4px}
  .gender-toggle{padding:0}
  .gender-btn{min-height:44px;padding:0 12px}
  .nav-menu{top:52px}
  .nav-lang{display:none}
  /* Show bottom nav */
  .mob-nav{display:block}
  /* Adjust sections that calculate off nav height */
  .ask-sec{height:calc(100vh - 52px - 60px)}
  .stg-sidebar{display:none}
  .srch-filters{display:none}
  .srch{flex-direction:column}
  .srch-main{padding:16px}

  /* ACCUEIL */
  .hm-wrap{padding-left:16px;padding-right:16px}
  .hm-sec{padding-top:56px;padding-bottom:56px;gap:28px}
  .hm-hero-in{padding-top:48px;padding-bottom:40px;gap:18px}
  .hm-h1{font-size:44px}
  .hm-h2{font-size:32px}
  .hm-h2.hm-serif{font-size:36px}
  .hm-h2.hm-xl{font-size:38px}
  .hm-h3{font-size:30px}
  .hm-lead,.hm-vs ul{font-size:16px}
  .hm-prompt{padding:14px 14px 10px}
  .hm-prompt input{font-size:16px}
  .hm-marquee-in{gap:20px}
  .hm-daily,.hm-res-grid,.hm-inspi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hm-res-grid{gap:10px}
  .hm-day{padding:10px}
  .hm-name{flex-direction:column;gap:0}
  .hm-refine{gap:28px}
  .hm-convo{min-height:300px}
  .hm-inspis{gap:40px}
  .hm-inspi{gap:20px;padding-top:24px}
  .hm-inspi-q{padding:20px}
  .hm-quote{font-size:24px}
  .hm-duo{grid-template-columns:1fr;padding-bottom:64px;gap:48px}
  .hm-duo-vis{height:420px}
  .hm-moment{gap:28px}
  .hm-moment-q{font-size:28px}
  .hm-moment-th{width:72px;height:96px}
  .hm-moment-iq{font-size:19px}
  .hm-manif{padding-top:64px;gap:36px}
  .hm-before{padding:24px 0;border-right:0;border-bottom:1px solid var(--trait)}
  .hm-after{padding:24px 16px}
  .hm-hiw{margin-bottom:56px}
  .hm-steps{gap:24px}
  .hm-conscious-wrap,.hm-figures-wrap{padding-bottom:56px}
  .hm-conscious{padding:40px 20px;gap:28px}
  .hm-big{font-size:36px}
  .hm-figures{gap:24px}
  .hm-figures p:first-child{font-size:40px}
  .hm-final{padding-top:64px;padding-bottom:64px;gap:24px}
  .hm-final-h{font-size:40px}
  .hm-final-bar{flex-direction:column;align-items:stretch;padding:16px;gap:12px}
  .hm-final-btn{justify-content:center}

  /* DISCOVER */
  .disc{padding:20px 16px}
  .disc-hdr{flex-direction:column;gap:12px}
  .filters-box{width:100%;flex-direction:row;flex-wrap:wrap;padding:14px;gap:10px}
  .frow{flex:1 1 100%}

  /* SEARCH */
  .srch-main{padding:16px}
  .srch-chips{gap:6px}
  .chip{font-size:11px;padding:4px 11px}
  .mob-filter-btn{display:flex}

  /* PRODUCT GRID */
  .prod-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  /* NB : pas de `.pc{width:100%!important}` ici — cette règle (héritée du
     monolithe d'origine) forçait aussi les cartes des rangées à défilement
     horizontal (Ask, "aujourd'hui pour vous", "vous aimerez aussi") à
     s'étirer en pleine largeur, cassant ces carousels sur mobile. Les
     grilles (Search/Discover) n'en ont pas besoin : elles utilisent déjà
     .pc-full{width:100%}, indépendant de ce breakpoint. */
  .pc-img{height:200px}
  .pc-full .pc-img{height:220px}

  /* SETTINGS - mobile horizontal nav at top, collante au scroll */
  .mob-stg-nav{display:flex;position:sticky;top:52px;z-index:5}
  .stg-content{padding:20px 16px}
  .sct-h{font-size:24px}
  /* Tendances / Style Icons : pills sur une 2e ligne, sous image + texte */
  .score-row{flex-wrap:wrap;row-gap:12px}
  /* Pills alignées sur le début du texte : marge = largeur image + gap 16px
     (image 80px dans trends.js, 72px dans icons.js — à synchroniser). */
  .score-row .seg-sm{flex:1 1 100%;max-width:240px}
  .seg-sm[data-score-kind="trend"]{margin-left:96px}
  .seg-sm[data-score-kind="icon"]{margin-left:88px}
  .radar-wrap{flex-direction:column}
  .radar-box{width:100%;max-width:260px;margin:0 auto}
  .morph-grid{grid-template-columns:repeat(3,1fr);gap:8px}
  .morph-card{padding:12px 6px}
  .si-settings-grid{grid-template-columns:repeat(2,1fr)}
  .sform-row{grid-template-columns:1fr}

  /* WISHLIST */
  .wishlist-panel{width:100%;right:-100%}

  /* MODALS
     NB : .prod-sheet / .prod-modal / .ps-img sont mortes — aucun élément
     du DOM ne porte ces classes (ancien design de modale produit jamais
     nettoyé lors du passage à la page pleine). Conservées à l'identique
     pour ne rien changer au comportement du site. */
  .prod-sheet{border-radius:var(--r-xl) var(--r-xl) 0 0;max-height:92vh;margin-top:auto;align-self:flex-end;width:100%}
  .prod-modal{align-items:flex-end;padding:0}
  .ps-img{height:240px;border-radius:var(--r-xl) var(--r-xl) 0 0}
  .modal{padding:24px;max-height:90vh}
  .vs-sheet{border-radius:var(--r-xl) var(--r-xl) 0 0}
  .vsearch-modal{align-items:flex-end;padding:0}

  /* INSPIRATION */
  .insp-page{padding:20px 16px 40px}
  .insp-ttl{font-size:28px}
  .insp-tabs{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
  .insp-grid-looks{grid-template-columns:1fr}
  .insp-grid-icons{grid-template-columns:repeat(2,1fr)}
  .insp-grid-trends,.insp-grid-editorial{grid-template-columns:1fr}
  .look-card-img{height:260px}

  /* PAGE LOOK */
  .look-page{padding:16px 16px 40px}
  .look-hero{height:220px}
  .look-title{font-size:24px}
  .sp-page{padding:16px 16px 60px}
  .sp-ttl{font-size:28px}
  .sp-logos{grid-template-columns:repeat(2,1fr)}
  .sp-body .eco-hero{font-size:34px}
  .eco-band{padding:24px 18px}
  .eco-score,.eco-crits.eco-2col,.eco-timeline.eco-2col{grid-template-columns:1fr}
  .sp-body .eco-close p{font-size:28px}
  .cs-prompts{grid-template-columns:1fr}
  .cs-team{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lex-group{grid-template-columns:1fr;gap:4px}
  .sp-body .lex-letter{font-size:44px}
  .lex-index{top:52px}
  .inf-card{margin-left:0}
  .bv-logos{grid-template-columns:repeat(2,1fr)}
  .bv-logos li{min-height:80px}
  .ft-halves,.ft-cleed-top{grid-template-columns:1fr}
  .ft-cleed{padding:22px 18px}
  .ab-name{grid-template-columns:1fr;gap:16px}
  .sp-body .ab-mono{font-size:52px}
  .ab-stats,.ab-history{grid-template-columns:1fr}
  .pr-band{padding:12px;gap:12px}
  .cr-facts,.cr-values ul{grid-template-columns:1fr}
  .cr-facts > div{padding:12px 0;border-bottom:1px solid var(--border)}
  .cr-values{padding:28px 20px}
  .pr-article{padding:22px 18px}
  .sp-body .pr-article-h{font-size:28px}
  .pr-cards,.pr-kit{grid-template-columns:1fr}
  .pr-figures{padding:24px 18px}
  .pr-contact{padding:28px 20px}
  .sp-body .pr-contact-h{font-size:28px}
  .sp-body .eco-close .inf-close-txt{font-size:15px}
  .cs-chat{margin-left:0}
  .sp-body .eco-close.sc-contact .sc-contact-h{font-size:28px}

  /* FOOTER */
  .footer-inner{grid-template-columns:1fr 1fr;gap:28px 16px}
  .footer{padding:40px 16px 28px}
  .footer-top{flex-direction:column;gap:28px;margin-bottom:36px}
  .footer-contact{gap:28px}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:16px}

}