/* ─────────────────────────────────────────────────────
   mobile.css — Toutes les media queries responsives
   Modifier ici pour adapter la version mobile
───────────────────────────────────────────────────── */

/* ── TABLETTE (≤ 768px) ── */
@media(max-width:768px) {
  .hero { grid-template-columns: 1fr; grid-template-rows: 55vw 1fr; height: auto; min-height: auto; }
  .hero-copy { padding: 36px 28px; }
  .soin { grid-template-columns: 1fr; }
  .soin-img { min-height: 56vw; max-height: 70vw; }
  .soin-img::after { background: linear-gradient(to bottom, transparent 72%, rgba(18,15,9,.85) 100%); }
  .contact-wrap { grid-template-columns: 1fr; }
}

/* ── MOBILE (≤ 700px) ── */
@media(max-width:700px) {
  /* Header */
  header     { padding: 0 20px; }
  .hd-nav    { display: none; }
  .hd-tel    { display: none; }
  .hd-burger { display: flex; }

  /* Hero */
  .hero         { grid-template-rows: 58vw 1fr; }
  .hero-h1      { font-size: clamp(40px, 11vw, 60px); margin-bottom: 14px; }
  .hero-overline { margin-bottom: 12px; }
  .hero-desc    { font-size: 13px; margin-bottom: 28px; max-width: 100%; }
  .hero-yr      { top: 18px; right: 18px; }
  .hero-copy    { padding: 28px 22px 32px; justify-content: center; }
  .hero-line    { margin-bottom: 14px; }
  .hero-btns    { flex-direction: column; gap: 10px; }
  .btn-k, .btn-g { width: 100%; text-align: center; padding: 15px; }

  /* Annonce */
  .annonce       { padding: 14px 20px; flex-direction: column; gap: 6px; }
  .annonce-left  { font-size: 15px; }
  .annonce-right { font-size: 9px; }

  /* Prix or */
  .or-col                     { padding: 36px 20px; }
  .or-col-a                   { border-right: none; border-bottom: 1px solid rgba(255,255,255,.06); }
  .or-col-title, .or-col-b-title { font-size: 26px; margin-bottom: 20px; }
  .or-val                     { font-size: 22px; }
  .or-section                 { grid-template-columns: 1fr; }

  /* Collection */
  .coll-header { padding: 48px 20px 0; flex-direction: column; align-items: flex-start; gap: 16px; }
  .coll-title  { font-size: clamp(30px, 9vw, 48px); }
  .coll-tabs   { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; gap: 2px; }
  .ctab        { font-size: 8px; letter-spacing: 1px; padding: 10px 4px; text-align: center; white-space: nowrap; }
  .coll-grid   { padding: 14px 12px 40px; gap: 3px; }
  .coll-end-strip { padding: 16px 20px; }

  /* Cartes produit */
  .prd-info { padding: 12px 14px 16px; }
  .prd-name { font-size: 16px; }
  .prd-desc { display: none; } /* Détail visible dans la popup */
  .prd-ref  { font-size: 8px; }

  /* Entretien */
  .soin-content { padding: 32px 22px 48px; }
  .soin-title   { font-size: clamp(28px, 8vw, 42px); margin-bottom: 24px; }
  .soin-item    { padding: 16px 0; gap: 14px; }
  .soin-name    { font-size: 17px; }
  .soin-text    { font-size: 12px; }

  /* Contact */
  .contact-aside     { padding: 40px 20px; }
  .ca-brand          { font-size: 28px; }
  .contact-form-wrap { padding: 40px 20px; }
  .cf-title          { font-size: 26px; }

  /* Map & Instagram */
  .map-strip    { padding: 16px 20px; flex-direction: column; align-items: flex-start; gap: 10px; }
  .insta-strip  { padding: 22px 20px; flex-direction: column; align-items: flex-start; gap: 14px; }
  .insta-strip-btn { width: 100%; text-align: center; padding: 14px; }

  /* Footer */
  footer   { padding: 28px 20px; flex-direction: column; gap: 18px; }
  .ft-links { gap: 18px; justify-content: center; }

  /* Popup — bottom sheet sur mobile */
  #product-popup { padding: 0; align-items: flex-end; }
  .pp-box        { max-height: 95vh; border-radius: 12px 12px 0 0; display: flex; flex-direction: column; }
  .pp-media      { max-height: 42vh; }
  .pp-main-img   { min-height: 0; flex: 1; }
  .pp-body       { padding: 20px 20px 28px; justify-content: flex-start; overflow-y: auto; }
  .pp-name       { font-size: 26px; }
  .pp-price      { font-size: 20px; margin-bottom: 16px; }
  .pp-close      { top: 10px; right: 12px; color: rgba(250,250,247,.7); }
  .pp-sep        { margin-bottom: 14px; }
  .pp-ref        { margin-bottom: 8px; }
  .pp-cat        { margin-bottom: 14px; }
}

/* ── PETITE TABLETTE grille (≤ 760px) ── */
@media(max-width:760px) {
  .coll-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── FORMULAIRE colonne unique (≤ 540px) ── */
@media(max-width:540px) {
  .cf-row { grid-template-columns: 1fr; }
}

/* ── PETIT MOBILE grille colonne unique (≤ 480px) ── */
@media(max-width:480px) {
  .coll-grid { grid-template-columns: 1fr !important; }
}

/* ── POPUP colonne unique (≤ 640px) ── */
@media(max-width:640px) {
  .pp-box  { grid-template-columns: 1fr; }
  .pp-body { padding: 28px 24px; }
}