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

@media (max-width: 1050px) {

  .desktop-nav {
    gap: 17px;
  }

  .brand {
    min-width: 220px;
  }

  .cabinet-intro {
    gap: 45px;
  }

}


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

@media (max-width: 850px) {

  /* ==========================================================
     GLOBAL
  ========================================================== */

  body {
    padding-bottom: 72px;
    font-size: 16px;
  }

  .container {
    width: min(calc(100% - 50px), var(--container));
  }

  .section {
    padding: 75px 0;
  }


  /* ==========================================================
     HEADER
  ========================================================== */


  .desktop-nav,
  .header-phone {
    display: none;
  }

  .menu-button {
    display: flex;
    margin-left: auto;
    border: 0;
    background: transparent;
    color: var(--navy);
  }

  .mobile-nav {
    display: grid;
    max-height: 0;
    overflow: hidden;
    background: var(--white);
    transition: max-height .25s ease;
  }

  .mobile-nav.open {
    max-height: 300px;
  }

  .mobile-nav a {
    padding: 15px 25px;
    color: var(--navy);
    font-weight: 700;
  }


  /* ==========================================================
     HERO
  ========================================================== */

  .hero {
    min-height: auto;
    display: block;
    background-position: top;
  }

  .hero::after {
    background: linear-gradient(to bottom,
        var(--cream) 0%,
        rgba(248, 246, 240, 0.90) 40%,
        rgba(248, 246, 240, 0.35) 90%,
        rgba(248, 246, 240, 0) 150%);
  }

  .hero-grid {
    width: min(calc(100% - 50px), var(--container));
    margin-inline: auto;
    display: block;
  }

  .hero-copy {
    max-width: none;
    padding: 60px 0 65px;
  }

  .hero h1 {
    font-size: clamp(39px, 11vw, 54px);
  }

  .hero-text {
    font-size: 17px;
  }

  .hero-actions {
    align-items: stretch;
  }

  .hero-actions .btn {
    flex: 1 1 auto;
  }

  .hero-phone {
    display: none;
  }


  /* ==========================================================
     PRATICIEN
  ========================================================== */

  .practitioner-grid {
    grid-template-columns: 1fr;
    gap: 35px;
  }

  .practitioner-profile {
    margin: auto;
  }

  .profile-photo {
    height: 290px;
  }


  /* ==========================================================
     CABINET
  ========================================================== */

  .cabinet-intro {
    grid-template-columns: 1fr;
    gap: 45px;
  }

  .cabinet-text {
    max-width: 720px;
  }

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


  /* ==========================================================
     CONTACT
  ========================================================== */

  .contact-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .contact-info {
    padding: 20px;
  }

  .map-container,
  .map-container iframe {
    min-height: 350px;
  }


  /* ==========================================================
     FOOTER
  ========================================================== */

  .footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 30px;
  }

  .footer-brand {
    justify-content: center;
  }

  .footer-nav {
    flex-direction: column;
    gap: 15px;
  }

  .footer-social {
    justify-content: center;
  }

  .footer-bottom {
    margin-top: 35px;
  }


  /* ==========================================================
     BOUTON APPEL
  ========================================================== */

  .mobile-call {
    position: fixed;
    right: 16px;
    bottom: 14px;
    left: 16px;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    color: var(--white);
    background: var(--green-dark);
    border-radius: 999px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
    font-weight: 800;
  }

  .mobile-call>svg {
    margin-right: 7px;
  }

}


/* ============================================================
   MENTIONS LÉGALES
============================================================ */

@media (max-width: 850px) {

  .legal-page {
    padding: 50px 0px;
  }

  .legal-container h1 {
    font-size: 32px;
    margin-bottom: 30px;
  }

  .legal-section {
    padding: 22px;
  }

  .legal-section h2 {
    font-size: 20px;
  }

}