/* =========================
   TABLETTE
========================= */

@media(max-width:1080px){

  .hero-grid{
    grid-template-columns:1fr;
    min-height:auto;
    padding:50px 0 84px;
  }

  .hero-content-wrap{
    padding:20px 0 10px;
    max-width:720px;
  }

  .hero-visual{
    min-height:auto;
    justify-content:center;
  }

  .hero-blob{
    height:460px;
    animation:blobMorph 10s ease-in-out infinite;
  }

  .hero-deco{
    display:none;
  }

  /* Layout */
  .feature-grid,
  .card-grid-3,
  .grid-3,
  .commit-grid,
  .split-box,
  .contact-grid{
    grid-template-columns:1fr;
  }

  /* NAV MOBILE */
  .nav{
    display:none;
    position:absolute;
    top:86px;
    left:20px;
    right:20px;

    background:#fff;
    border:1px solid var(--border);
    border-radius:24px;
    box-shadow:var(--shadow);

    padding:20px;

    flex-direction:column;
    gap:18px;
  }

  .nav.is-open{
    display:flex;
  }

  .menu-toggle{
    display:block;
  }

  .btn-header{
    display:none;
  }
}


/* =========================
   TABLETTE PETITE
========================= */

@media(max-width:900px){

  .soins-gallery{
    grid-template-columns:repeat(2,1fr);
  }

}


/* =========================
   MOBILE
========================= */

@media(max-width:760px){

  h1{
    font-size:clamp(2rem,8.6vw,2.65rem);
    line-height:1.04;
    letter-spacing:-.06em;
  }

  .hero-content-wrap{
    padding:18px 0 0;
  }

  .badge{
    padding:8px 14px;
    font-size:.82rem;
  }

  .hero-kids .lead{
    font-size:.96rem;
    line-height:1.5;
    margin-bottom:14px;
  }

  .hero-actions{
    gap:12px;
    margin:16px 0;
  }

  .hero-blob{
    height:250px;
    border-width:6px;
  }

  .hero-grid{
    gap:8px;
    padding:26px 0 42px;
  }
}


/* =========================
   MOBILE SMALL
========================= */

@media(max-width:600px){

  .soins-gallery{
    grid-template-columns:1fr;
  }

  .soin-card,
  .soin-card img{
    min-height:240px;
  }

  .team-image{
    height:240px;
  }

}

@media(max-width:760px){
  .hero-kids{
    background:
      radial-gradient(circle at 105% 18%, rgba(30,136,245,.34) 0 135px, transparent 155px),
      radial-gradient(circle at -18% 58%, rgba(30,136,245,.22) 0 120px, transparent 145px),
      radial-gradient(circle at 100% 96%, rgba(255,200,61,.34) 0 110px, transparent 135px),
      linear-gradient(180deg,#ffffff 0%,#eef8ff 100%);
  }
}