/* Lecture du catalogue public sur ordinateur et téléphone. */
html { scroll-padding-top: 130px; }
body { font-size: clamp(20px, 1.1vw, 24px); line-height: 1.6; }
.announcement { font-size: 16px; line-height: 1.5; padding: 14px 20px; }
.site-header { height: auto; min-height: 104px; padding-block: 18px; gap: 28px; }
.brand { font-size: 34px; }
.brand span { font-size: 20px; }
.site-header nav { gap: clamp(22px, 2vw, 44px); flex-wrap: wrap; }
.site-header nav a { font-size: 20px; }
.cart-button { font-size: 20px; min-height: 54px; }
.eyebrow { font-size: 17px; line-height: 1.5; }
.hero-copy>p:not(.eyebrow) { max-width: 38em; font-size: clamp(22px, 1.3vw, 29px); line-height: 1.65; }
.primary-button, .checkout-button { font-size: 21px; padding: 18px 27px; min-height: 56px; }
.hero-visual span { font-size: 20px; }
.hero-visual b { font-size: 34px; }
.section-heading { gap: 40px; }
.section-heading>p { font-size: 22px; max-width: 30em; }
.filters { gap: 12px; }
.filters button { font-size: 20px; min-height: 52px; padding: 14px 22px; }
.product-grid { gap: 22px; padding: 0; border: 0; background: transparent; }
.product-card { border: 1px solid var(--line); }
.product-badge { font-size: 15px; padding: 8px 12px; }
.product-info { padding: 26px; }
.product-info span { font-size: 18px; }
.product-info h3 { font-size: clamp(25px, 1.5vw, 32px); line-height: 1.3; margin: 10px 0 20px; }
.product-info div { font-size: 23px; flex-wrap: wrap; }
.swatches i { width: 20px; height: 20px; }
.commitments { gap: 24px; }
.commitments h3 { font-size: 32px; line-height: 1.25; }
.commitments p { font-size: 21px; line-height: 1.65; }
footer { font-size: 20px; line-height: 1.6; gap: 42px; }
footer small { font-size: 17px; }
.cart-panel { width: min(580px, 100%); padding: 30px; }
.cart-head p, .cart-summary p, .cart-summary small { font-size: 17px; line-height: 1.5; }
.cart-head button, .close-dialog { width: 48px; height: 48px; flex-shrink: 0; }
.cart-line { grid-template-columns: 80px minmax(0, 1fr) auto; gap: 16px; }
.cart-line img { width: 80px; height: 104px; }
.cart-line h3 { font-size: 20px; line-height: 1.4; }
.cart-line p { font-size: 17px; }
.qty-control button { width: 40px; height: 40px; font-size: 22px; }
.product-dialog { width: min(1240px, calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow: auto; }
.product-copy>p { font-size: 21px; line-height: 1.65; }
.product-copy .price { font-size: 30px; }
.option-group>span, .stock-status { font-size: 18px; }
.option-buttons button { min-width: 48px; min-height: 48px; font-size: 20px; }
.add-product { font-size: 21px; min-height: 56px; }
.checkout-dialog { max-width: 760px; }
.checkout-dialog>p:not(.eyebrow) { font-size: 21px; }
.toast { font-size: 18px; max-width: calc(100% - 32px); }
@media (max-width: 1100px) {
  .site-header { flex-wrap: wrap; }
  .site-header nav { order: 3; width: 100%; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 780px) {
  html { scroll-padding-top: 24px; }
  body { font-size: 18px; }
  .announcement { font-size: 15px; }
  .site-header { position: relative; gap: 16px; padding-inline: 20px; }
  .site-header nav { display: flex; gap: 12px 24px; }
  .site-header nav a { font-size: 18px; }
  .brand { font-size: 30px; }
  .brand span { font-size: 17px; }
  .cart-button { font-size: 18px; padding: 10px 13px; }
  .eyebrow { font-size: 16px; }
  .hero-copy>p:not(.eyebrow) { font-size: 21px; }
  .hero h1 { font-size: clamp(50px, 12vw, 80px); }
  .primary-button, .checkout-button { font-size: 19px; }
  .section-heading>p { font-size: 20px; }
  .filters button { font-size: 18px; padding: 12px 18px; }
  .product-grid { gap: 18px; }
  .product-info { padding: 22px; }
  .product-info h3 { font-size: 26px; }
  .product-info div { font-size: 22px; }
  .commitments { gap: 18px; }
  .commitments p, .product-copy>p, .checkout-dialog>p:not(.eyebrow) { font-size: 19px; }
  footer { font-size: 18px; }
  .cart-panel { padding: 20px; }
  .cart-line { grid-template-columns: 60px minmax(0, 1fr) auto; gap: 10px; }
  .cart-line img { width: 60px; height: 82px; }
  .cart-head h2 { font-size: 32px; }
}
@media (max-width: 600px) {
  .product-grid { grid-template-columns: 1fr; }
  .product-photo { aspect-ratio: 1; }
  .hero-visual, .hero-visual img { min-height: 390px; }
  .section-heading h2 { font-size: 46px; }
}