/* ============================================================
   RESPONSIVE.CSS — Garnazelle LP
   Mobile-first : 480 / 768 / 992 / 1200
   ============================================================ */

/* ≤ 1200px — Container réduit, paddings ajustés */
@media (max-width: 1200px) {
  :root { --section-v: 80px; }

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

  /* Boutique : entre 993 et 1200px, la colonne 50/50 est trop étroite,
     le texte se sent à l'étroit. On rééquilibre image + texte en 45/55,
     et on adoucit le padding intérieur du texte. */
  .boutique-grid {
    grid-template-columns: 9fr 11fr;
  }
  .boutique-content {
    padding: 56px clamp(28px, 4%, 64px);
  }
}

/* DESKTOP : agrandir hero-left, réduire hero-right pour étaler le texte */
@media (min-width: 993px) {
  .hero-grid {
    grid-template-columns: 2fr 1fr;
  }
}

/* ≤ 992px — Basculement en colonnes uniques */
@media (max-width: 992px) {

  /* Hero : empilé verticalement */
  .hero-grid {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .hero-left {
    padding: 60px var(--gutter) 48px;
    order: 1;
  }

  .hero-right {
    border-left: none;
    border-top: 1px solid var(--bordure);
    padding: 48px var(--gutter) 60px;
    order: 2;
  }

  /* Grenouille : position et taille mobile */
  .frog-walker {
    top: 10px;
    width: 70px;
  }

  /* CTA mobile visible dans le header */
  .header-mobile-cta { display: flex !important; }
  .header-desktop-cta { display: none !important; }

  /* Narration : 2 → 1 */
  .narration-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .narration-grid.reverse { direction: ltr; }

  /* Boutique : 2 → 1 — l'image reste paysage, on garde le crop "vitrine + tabouret" */
  .boutique-grid {
    grid-template-columns: 1fr;
  }
  .boutique-img-wrap {
    aspect-ratio: 4 / 3;          /* mobile : un poil plus haut pour respirer */
    min-height: 0;
    max-height: 50vh;
  }
  .boutique-img-wrap img {
    object-position: center 60%;  /* même crop que desktop : pas de plafond, un peu de sol */
  }
  .wip-boutique { aspect-ratio: 4 / 3; min-height: 0; }
  .boutique-content {
    padding: 56px var(--gutter);
  }

  /* Galerie : 3 → 2 */
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Authority : compact */
  .authority-item {
    flex: 0 0 40%;
  }
}

/* ≤ 768px — Mobile tablette */
@media (max-width: 768px) {

  :root { --section-v: 60px; }

  /* Témoignages : 2 → 1 */
  .testi-grid {
    grid-template-columns: 1fr;
  }

  /* Galerie : 2 → 1 */
  .gallery-grid {
    grid-template-columns: 1fr;
  }

  /* Sticky bar : texte masqué */
  .sticky-bar-text { display: none; }
  .sticky-bar { justify-content: center; }
  .sticky-bar-cta { width: 100%; max-width: 320px; }

  /* H1 plus compact */
  h1 { letter-spacing: 0.15em; }
  h2 { letter-spacing: 0.2em; }

  /* Form card : padding réduit */
  .form-card { padding: 36px 24px; }

  /* Authority : pleine largeur */
  .authority-item {
    flex: 0 0 45%;
    padding: 10px 10px;
  }
}

/* ≤ 480px — Mobile portrait */
@media (max-width: 480px) {

  :root { --section-v: 48px; }

  .hero-left { padding: 48px 6% 36px; }
  .hero-right { padding: 36px 6% 48px; }

  .form-card { padding: 28px 20px; }

  .authority-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  .authority-item {
    flex: 1 1 100%;
    text-align: left;
    border-bottom: 1px solid var(--bordure);
    padding: 16px 0;
  }

  .testi-card { padding: 36px 24px; }

  .boutique-content { padding: 48px var(--gutter); }

  .sticky-bar { padding: 12px var(--gutter); }

  .btn-primary { padding: 16px 24px; font-size: 11px; }
}