/* ============================================
   SKYLAR PRESS — Mobile CSS
   Appliqué sur tous les écrans <= 768px
   ============================================ */

@media(max-width:768px){

  /* ── NAV ── */
  .nav{padding:.8rem 1rem .5rem}
  .nav-logo{height:80px !important}
  .nav-atelier{font-size:.52rem;letter-spacing:.08em}
  .nav-rule{width:95%}
  .nav-row{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    justify-content:flex-start;
    padding:.2rem .3rem;
    scrollbar-width:none;
    width:100%;
  }
  .nav-row::-webkit-scrollbar{display:none}
  .nav-links{gap:1rem;flex-shrink:0}
  .nav-links a{font-size:.55rem;letter-spacing:.1em;white-space:nowrap}
  .nav-lang{
    position:relative !important;
    right:auto !important;
    flex-shrink:0;
    margin-left:.6rem;
    font-size:.55rem;
    white-space:nowrap;
  }

  /* ── HERO ── */
  .hero{height:56vw;min-height:220px}
  .hero-h1{font-size:clamp(1.4rem,5.5vw,2rem) !important}
  .hero-tagline{font-size:clamp(1.4rem,5.5vw,2rem) !important}
  .hero-content{padding:1rem}
  .hero-rule{width:35px}
  .hero-scroll span{font-size:.65rem}

  /* ── ACCROCHE ── */
  .accroche{padding:2.5rem 1.2rem}
  .accroche-h2{font-size:clamp(1.4rem,5.5vw,2rem) !important}
  .accroche-rule{width:35px}

  /* ── SEP ── */
  .sep{height:2rem !important}

  /* ── ELENA INTRO ── */
  .elena-intro{grid-template-columns:1fr !important}
  .elena-photo{min-height:280px}
  .elena-content{padding:2.5rem 1.2rem}
  .elena-name{font-size:2rem !important}
  .elena-title{font-size:.58rem}
  .elena-bio{font-size:.9rem}
  .enl-title{font-size:.95rem}

  /* ── BIO ── */
  .bio{grid-template-columns:1fr !important;gap:2rem;padding:2.5rem 1.2rem}
  .bio-right{padding-top:0 !important;justify-content:flex-start !important}
  .bio-left h2{font-size:1.6rem}
  .bio-left p{font-size:.88rem}
  .cmaq-badge p{font-size:.6rem}

  /* ── PHÉNO ── */
  .pheno{padding:2.5rem 1.2rem}
  .pheno-h2{font-size:1.5rem !important}
  .pheno-text{font-size:.9rem}
  .pheno-quote{font-size:1rem;padding:.8rem 0}

  /* ── CRAFT ── */
  .craft{grid-template-columns:1fr !important;height:auto !important}
  .craft-cell{height:55vw}

  /* ── DÉMARCHE ── */
  .demarche{grid-template-columns:1fr !important}
  .demarche-img{min-height:250px}
  .demarche-content{padding:2.5rem 1.2rem}
  .demarche-h2{font-size:1.6rem}
  .step h3{font-size:1rem}
  .step p{font-size:.85rem}

  /* ── ATELIER STRIP ── */
  .atelier{grid-template-columns:1fr !important;height:auto !important}
  .atelier-cell{height:55vw}

  /* ── EN COURS ── */
  .encours{grid-template-columns:1fr !important}
  .encours-img{min-height:250px}
  .encours-content{padding:2.5rem 1.2rem}
  .encours-content h2{font-size:1.6rem}
  .encours-content p{font-size:.88rem}

  /* ── ACQUISTION ── */
  .acquisition{padding:3rem 1.2rem}
  .acquisition h2{font-size:1.5rem}

  /* ── LP ── */
  .lp{padding:3rem 1.2rem}
  .lp-h2{font-size:clamp(1.4rem,5.5vw,2rem) !important}
  .lp-text{font-size:.9rem}
  .lp-quote{font-size:1rem;padding:.8rem 0}
  .lp-tag{font-size:.7rem}

  /* ── HERO SECTIONS ── */
  .hero-collabs{height:45vw;min-height:180px}
  .hero-collabs-content h1{font-size:clamp(1.4rem,5.5vw,2rem) !important}
  .hero-boutique{height:45vw;min-height:180px}
  .hero-boutique-content h2{font-size:clamp(1.4rem,5.5vw,2rem) !important}

  /* ── COLLABORATIONS ── */
  .collabs{padding:2.5rem 1.2rem}
  .collabs-intro{font-size:.88rem}
  .collabs-grid{grid-template-columns:1fr !important}
  .collab-img{height:220px}
  .collab-name{font-size:.95rem}
  .collab-cta{
    grid-template-columns:1fr !important;
    gap:1.5rem;
    padding:1.8rem 1.2rem;
    text-align:center;
  }
  .collab-cta h3{font-size:1.2rem}
  .collab-cta p{font-size:.85rem}

  /* ── BOUTIQUE ── */
  .boutique{padding:2.5rem 1.2rem}
  .boutique-intro{font-size:.88rem}
  .photos-grid{grid-template-columns:1fr 1fr !important;gap:2px}
  .photo-cell{height:42vw}
  .commande{flex-direction:column !important;padding:1.5rem 1.2rem;gap:1.2rem}
  .commande p{font-size:.85rem}
  .collabs-teaser{
    grid-template-columns:1fr !important;
    padding:1.8rem 1.2rem;
    gap:1.2rem;
    text-align:center;
  }
  .collabs-teaser h3{font-size:1.2rem}

  /* ── CONTACT ── */
  .contact-main{grid-template-columns:1fr !important}
  .contact-img{min-height:250px}
  .contact-content{padding:2.5rem 1.2rem}
  .contact-phrase{font-size:1.5rem !important}
  .contact-desc{font-size:.88rem}
  .email-link{font-size:1.1rem}
  .hero-h1{font-size:clamp(1.4rem,5.5vw,2rem) !important}

  /* ── ATELIERS ── */
  .ateliers{grid-template-columns:1fr !important}
  .atelier:first-child{border-right:none !important;border-bottom:1.5px solid rgba(139,94,60,.15)}
  .atelier{padding:2rem 1.2rem}
  .atelier-city{font-size:1.4rem}
  .atelier-detail{font-size:.82rem}

  /* ── RAISONS ── */
  .raisons{grid-template-columns:1fr !important;padding:2.5rem 1.2rem;gap:2rem}
  .raison h3{font-size:.95rem}
  .raison p{font-size:.82rem}

  /* ── FOOTER ── */
  .footer{
    padding:1.2rem;
    flex-direction:column !important;
    text-align:center;
    gap:.8rem;
  }
  .footer-links{justify-content:center;flex-wrap:wrap;gap:1rem}
  .footer-copy{font-size:.55rem}
  .footer-links a{font-size:.55rem}
}