/* ============================================================
   MAISON NUANCE — Adaptations responsive
   Approche : desktop first sur les grilles, mobile soigné
   ============================================================ */

/* ---------- Grands écrans (≤ 1080px) ---------- */
@media (max-width: 1080px) {
  .nav-list { gap: 1.6rem; }
  .main-nav { gap: 1.8rem; }
  .gallery-grid { grid-auto-rows: 160px; }
}

/* ---------- Tablettes (≤ 900px) ---------- */
@media (max-width: 900px) {
  :root { --gutter: 1.5rem; }

  /* Navigation : panneau déroulant */
  .nav-toggle { display: flex; }

  .main-nav {
    position: fixed;
    inset: 0 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6rem 1.75rem 2.5rem;
    background-color: var(--cream);
    box-shadow: 0 20px 40px rgba(44, 44, 44, .08);
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: transform .6s var(--ease), opacity .5s var(--ease), visibility .5s;
  }
  .main-nav.is-open { transform: translateY(0); opacity: 1; visibility: visible; }

  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list li { border-bottom: 1px solid var(--line); }
  .nav-link {
    display: block;
    padding-block: 1.1rem;
    font-size: .82rem;
    color: var(--charcoal);
  }
  .nav-link::after { display: none; }

  .nav-cta {
    margin-top: 1.8rem;
    border-color: var(--charcoal);
    color: var(--charcoal);
  }

  /* En-tête sur fond clair dès que le menu est ouvert */
  .site-header.is-menu-open { background-color: var(--cream); }
  .site-header.is-menu-open .brand-name { color: var(--charcoal); }
  .site-header.is-menu-open .brand-tagline { color: var(--charcoal-45); }

  /* Sections en une colonne */
  .intro-grid,
  .contact-grid { grid-template-columns: 1fr; }

  .intro-figure::after { inset: .9rem -.9rem -.9rem .9rem; }

  .values-grid { grid-template-columns: 1fr 1fr; }
  .values-grid .value-card:last-child { grid-column: 1 / -1; }

  /* Galerie : 2 colonnes */
  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
  .gallery-item--wide { grid-column: span 2; grid-row: span 2; }
  .gallery-item--tall { grid-row: span 3; }

  /* Barre d'actions sticky : visible en mobile / tablette */
  .sticky-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 70;
    background-color: var(--cream);
    box-shadow: 0 -6px 24px rgba(44, 44, 44, .14);
    padding-bottom: env(safe-area-inset-bottom, 0);
    transform: translateY(110%);
    transition: transform .55s var(--ease);
  }
  .sticky-bar.is-visible { transform: translateY(0); }

  .sticky-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 58px;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
  }
  .sticky-btn i { font-size: 1.15rem; }
  .sticky-btn--wa   { background-color: var(--whatsapp); color: #fff; }
  .sticky-btn--book { background-color: var(--charcoal); color: var(--cream); }

  /* Évite que la barre masque le pied de page */
  .site-footer { padding-bottom: 6.5rem; }
}

/* ---------- Mobiles (≤ 620px) ---------- */
@media (max-width: 620px) {
  body { font-size: .96rem; }

  :root { --section-y: clamp(3.5rem, 12vw, 5rem); }

  /* Hero */
  .hero { min-height: 92svh; }
  .hero-content { padding-block: 8rem 6.5rem; }
  .hero-title { max-width: 100%; }
  .hero-veil {
    background:
      linear-gradient(to bottom, rgba(20,18,15,.62) 0%, rgba(20,18,15,.45) 45%, rgba(20,18,15,.78) 100%);
  }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
  .hero-scroll { display: none; }

  /* Bandeau défilant plus discret */
  .marquee-track { font-size: .95rem; gap: 2rem; animation-duration: 26s; }

  /* Intro */
  .intro-stats { gap: 1.6rem 2rem; }
  .intro-stats dt { font-size: 1.45rem; }

  /* Carte des prestations : prix sous le nom pour rester lisible */
  .menu-card { padding: 1.6rem 1.3rem; }
  .menu-item-head { flex-wrap: wrap; gap: .3rem .6rem; }
  .menu-item-name { flex: 1 1 100%; font-size: 1.12rem; }
  .menu-dots { flex: 1 1 auto; transform: translateY(-.35em); }
  .menu-item-price { font-size: .92rem; }
  .menu-item-desc { font-size: .84rem; }
  .menu-list + .menu-group-title { margin-top: 2.2rem; }

  /* Valeurs : pile verticale */
  .values-grid { grid-template-columns: 1fr; }
  .values-grid .value-card:last-child { grid-column: auto; }

  /* Galerie : une colonne rythmée */
  .gallery-grid { grid-template-columns: 1fr; grid-auto-rows: 230px; gap: .75rem; }
  .gallery-item,
  .gallery-item--wide,
  .gallery-item--tall { grid-column: auto; grid-row: span 1; }
  .gallery-item--tall { grid-row: span 2; }
  .gallery-item figcaption { opacity: 1; transform: none; }

  /* Contact */
  .contact-list li { grid-template-columns: 1fr; gap: .35rem; }
  .contact-actions { flex-direction: column; }
  .contact-actions .btn { width: 100%; }

  .quote p { max-width: 100%; }
}

/* ---------- Très petits écrans (≤ 380px) ---------- */
@media (max-width: 380px) {
  .btn { letter-spacing: .1em; padding-inline: 1.3rem; }
  .sticky-btn { font-size: .68rem; letter-spacing: .08em; }
  .brand-tagline { letter-spacing: .24em; }
}

/* ---------- Écrans larges (≥ 1500px) ---------- */
@media (min-width: 1500px) {
  :root { --max-width: 1320px; }
}