/* Derma Pico — compléments communs (menu mobile, responsive, simulateur) */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
[hidden] { display: none !important; }
img { max-width: 100%; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid #276E74; outline-offset: 2px; }

/* Menu mobile */
.menu-toggle { display: none; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1px solid #C9D9D8; border-radius: 999px; background: #FFFFFF; color: #0F3F43; cursor: pointer; padding: 0; }
.menu-toggle path { transition: transform .2s ease, opacity .2s ease; transform-origin: 12px 12px; }
.menu-toggle[aria-expanded="true"] .l1 { transform: translateY(5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .l2 { opacity: 0; }
.menu-toggle[aria-expanded="true"] .l3 { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 1060px) {
  .menu-toggle { display: inline-flex; }
  .main-nav { display: none !important; width: 100%; flex-direction: column; align-items: stretch !important; gap: 0 !important; padding: 4px 0 12px; }
  .main-nav.open { display: flex !important; }
  .main-nav .nav { padding: 14px 0 !important; border-top: 1px solid #DCE5E4; font-size: 17px !important; }
  .main-nav .btn { margin-top: 14px; }
}

/* Simulateur */
.sim-size { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 72px; padding: 12px 14px; border-radius: 4px; cursor: pointer; text-align: left; font-family: inherit; box-sizing: border-box; background: #F6F8F7; color: #0F3F43; border: 1px solid #C9D9D8; }
.sim-size:hover { border-color: #0F4E53; }
.sim-size[aria-pressed="true"] { background: #0F4E53; color: #FFFFFF; border-color: #0F4E53; }
.sim-line { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid #2C5E62; }

/* Téléphones */
@media (max-width: 640px) {
  header img { height: 44px !important; }
  main section[style*="padding: 96px 0"], main section[style*="padding: 104px 0"], main section[style*="padding: 88px 0"] { padding-top: 64px !important; padding-bottom: 64px !important; }
  main img[style*="height: 5"], main img[style*="height: 4"] { height: 300px !important; }
  main img[style*="height: 300px"] { height: 240px !important; }
  main [style*="border-radius: 160px"] { border-radius: 4px 96px 4px 4px !important; }
  main iframe { height: 300px !important; }
  footer[style*="padding: 80px 0 32px"] { padding-top: 56px !important; }
  table { font-size: 15px !important; }
}
@media (max-width: 420px) {
  main a.card[style*="grid-template-columns: 160px 1fr"] { grid-template-columns: 96px 1fr !important; gap: 16px !important; }
  main a.card[style*="grid-template-columns: 160px 1fr"] img { width: 96px !important; height: 96px !important; }
}