/* ==========================================================================
   QUAI 31 — Responsive (tablette ≤ 1024px, mobile ≤ 640px)
   Les maquettes sont desktop : l'adaptation mobile suit la même hiérarchie.
   ========================================================================== */

@media (max-width: 1024px) {
  .container, .container-wide { padding: 0 24px; }
  .grille-cartes { grid-template-columns: repeat(2, 1fr); }
  .insta-strip__grid { grid-template-columns: repeat(2, 1fr); }
  .insta-strip__grid img { height: 200px; }
}

@media (max-width: 860px) {
  /* --- Navigation mobile : burger + panneau --- */
  .nav { display: flex; justify-content: center; position: relative; }
  .nav__burger {
    display: block;
    position: absolute;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 110;
    padding: 8px;
  }
  .nav__burger span {
    display: block;
    width: 26px; height: 2px;
    margin: 6px 0;
    background: currentColor;
    transition: transform .25s, opacity .25s;
  }
  .site-header--light .nav__burger { color: #fff; }
  .site-header--dark  .nav__burger { color: var(--brun); }
  body.nav-ouvert .nav__burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  body.nav-ouvert .nav__burger span:nth-child(2) { opacity: 0; }
  body.nav-ouvert .nav__burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  /* Menu ouvert : l'en-tête devient un panneau plein écran totalement opaque */
  body.nav-ouvert { overflow: hidden; }
  body.nav-ouvert .site-header {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: #4e463f;
    overflow-y: auto;
    padding-top: 24px;
  }
  body.nav-ouvert .nav {
    flex-direction: column;
    justify-content: flex-start;
    gap: 4px;
    min-height: 100%;
    padding-bottom: 40px;
  }
  .nav__list { display: none; }
  body.nav-ouvert .nav__list--left,
  body.nav-ouvert .nav__list--right {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    background: transparent;
  }
  body.nav-ouvert .nav__burger {
    position: fixed;
    top: 22px;
    left: 22px;
    transform: none;
    color: #fff;
    z-index: 210;
  }
  body.nav-ouvert .nav__logo { order: -1; margin: 30px 0 26px; }
  body.nav-ouvert .nav__logo img { content: url('../img/monogram-blanc.png'); }
  .nav__link { color: #fff !important; font-size: 15px; padding: 10px 18px; }
  body.nav-ouvert .nav__link--rdv { background: var(--blanc); color: var(--brun) !important; }

  /* Sous-menu replié : ne s'ouvre qu'au clic sur « Nos soins » */
  .nav__dropdown {
    position: static;
    display: none;
    padding-top: 4px;
    min-width: 0;
    text-align: center;
  }
  .nav__item--dropdown:hover .nav__dropdown { display: none; }
  .nav__item--dropdown.is-open .nav__dropdown { display: block; }
  /* Chevron indiquant que l'entrée se déplie */
  .nav__item--dropdown > .nav__link::after {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: 10px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .25s;
  }
  .nav__item--dropdown.is-open > .nav__link::after {
    transform: translateY(1px) rotate(-135deg);
  }
  .nav__dropdown li a {
    background: transparent;
    color: rgba(255, 255, 255, .82);
    font-size: 13px;
    padding: 5px 12px;
  }

  /* --- Méga-menu « Nos soins » --- */
  /* le li prend toute la largeur : sans cela « Nos soins » se cale à gauche */
  .nav__item--soins {
    display: block;
    width: 100%;
    align-self: auto;
    text-align: center;
  }
  .nav__item--soins > .nav__link { display: inline-block; }
  .megamenu { position: static; padding-top: 8px; display: none; }
  .megamenu::before { display: none; }
  .nav__item--soins:hover .megamenu { display: none; }
  .nav__item--soins.is-open .megamenu { display: block; }
  .megamenu__inner { padding: 0; }
  .megamenu__panneau {
    width: 100%;
    max-height: none;
    background: transparent;
    backdrop-filter: none;
    padding: 4px 0 0;
    text-align: center;
  }
  .megamenu__titre { padding-left: 0; font-size: 12px; }
  .megamenu__titre::before { display: none; }
  .megamenu__liste { font-weight: 400; font-size: 13px; }

  /* --- Sections --- */
  .section { padding: 56px 0; }
  .hero--haut { min-height: 620px; }
  /* la nav mobile occupe le haut du hero : on réserve la place sous le logo */
  .hero__contenu { padding-top: 170px; }
  .temoignages { grid-template-columns: 1fr; }
  .libelle-vertical { writing-mode: horizontal-tb; transform: none; margin-bottom: 14px; }
  .mentions-page { padding-top: 130px; }
  .mentions-page__contenu { margin-left: auto; }
  .site-footer__mentions { justify-content: center; }
}

@media (max-width: 640px) {
  body { font-size: 15px; }
  /* Les retours à la ligne des maquettes desktop cassent les petits écrans */
  .hero__texte br, .site-footer__texte br, .section__intro br { display: none; }
  .titre-section { letter-spacing: .18em; text-indent: .18em; }
  /* Aucun titre ne doit dépasser la largeur de l'écran */
  .titre-hero, .titre-section, .titre-sous, .faq__categorie,
  .carte-besoin__titre, .carte-solution__titre, .insta-strip__title {
    overflow-wrap: anywhere;
  }
  .container, .container-wide { padding: 0 18px; }
  .grille-cartes { grid-template-columns: 1fr; }
  .hero { min-height: 520px; }
  /* En dessous de 640px, on autorise le retour à la ligne des grands titres */
  .titre-hero { letter-spacing: .16em; text-indent: .16em; white-space: normal; }
  .accordeon__bouton { font-size: 15px; padding: 14px 20px; }
  .insta-strip__grid img { height: 150px; }
  .carrousel__slide img { height: 220px; }
  .site-footer__links { flex-direction: column; gap: 10px; }
}