/* Confort mobile : memes couleurs, formes et visuels que la reference 1.0. */
@media (max-width:850px) {
  .hero-deck-controls {gap:8px;min-height:48px}
  .hero-deck-arrow {flex:0 0 48px;width:48px;height:48px;font-size:24px}
  .hero-autoplay-toggle {
    flex:0 0 76px;width:76px;min-width:76px;min-height:44px;padding:6px 8px;
    display:inline-flex;align-items:center;justify-content:center;
  }
  .product-arrow {width:48px;height:48px;top:calc(50% - 24px);font-size:26px}
}

/* Garder une ligne a 320 pixels et dans le hero encore en deux colonnes. */
@media (max-width:360px), (min-width:601px) and (max-width:700px) {
  .hero-deck-controls {gap:6px}
  .hero-deck-arrow {flex-basis:44px;width:44px;height:44px}
  .hero-flavor-status {min-width:94px}
  .hero-autoplay-toggle {flex-basis:68px;width:68px;min-width:68px}
}

/* Menu hamburger en faible hauteur : cinq liens visibles, logo entier. */
@media (orientation:landscape) and (max-height:500px) and (max-width:1100px) {
  .pop-v3 .site-header {height:68px;padding:0 4%;gap:10px}
  .pop-v3 .brand {width:132px;height:auto;aspect-ratio:1575/708}
  .pop-v3 .header-button {min-height:44px;font-size:14px;padding:10px 14px}
  .pop-v3 .menu-toggle {width:44px;min-width:44px;height:44px}
  .pop-v3 #site-nav {
    top:68px;padding:8px 6%;gap:0 24px;
    grid-template-columns:repeat(2,minmax(0,1fr));
    max-height:calc(100dvh - 68px);overflow-y:auto;overscroll-behavior:contain;
  }
  .pop-v3 #site-nav.is-open {display:grid}
  .pop-v3 #site-nav a {
    display:flex;align-items:center;min-height:48px;padding:9px 0;
    font-size:17px;line-height:1.35;
  }
}