/* pages/public.css — Styles specifiques pages publiques et hors-shell
   (public/bundle.html, partials/login_modal.html, offline.html, sav/*)
   Contenu : carte login, carte produit public, page offline, formulaires SAV.
   Maquette : login hors-shell, bundleBlock (handoff §4.1/4.14). */

/* ── Extrait de offline.html ─────────────────────────────────────────────────── */
.offline-wrap { max-width: 480px; margin: 0 auto; padding: var(--pad-app); text-align: center; }
.offline-icon { font-size: 56px; color: var(--text-muted); opacity: .35; margin-bottom: 12px; }
.offline-title { font-size: 22px; font-weight: 800; color: var(--ink); margin: 0 0 8px; }
.offline-sub { font-size: 14px; color: var(--text-muted); margin: 0 0 8px; }
.offline-note { font-size: 13px; color: var(--text-muted); margin: 0 0 24px; }
@media (max-width: 980px) { .offline-wrap { padding: var(--pad-app-m); } }

/* ── Extrait de sav\form.html ─────────────────────────────────────────────────── */
.sav-wrap { max-width: 500px; margin: 0 auto; padding: var(--pad-app); }
@media (max-width: 980px) { .sav-wrap { padding: var(--pad-app-m); } }

/* ── Extrait de sav\success.html ─────────────────────────────────────────────────── */
.sav-success-wrap { max-width: 460px; margin: 0 auto; padding: var(--pad-app); text-align: center; }
.sav-success-icon { font-size: 52px; color: var(--ok-icon); margin-bottom: 14px; }
.sav-success-title { font-size: 22px; font-weight: 800; color: var(--ink); margin: 0 0 8px; }
.sav-success-sub { font-size: 14px; color: var(--text-muted); margin: 0 0 6px; }
@media (max-width: 980px) { .sav-success-wrap { padding: var(--pad-app-m); } }

/* ─────────────────────────────────────────────────────────────────────────
   Desktop (ADDITIF, brief fix UI portail 2026-07-22) : rendu PC des pages
   publiques pensées mobile-first (accueil « Consultation QR », fiche bundle,
   en-têtes portail). Ne modifie RIEN en dessous de 992px — le rendu mobile
   existant (usage principal, scan QR) reste intact à l'identique. Au-dessus,
   on ajoute juste un peu d'air et une grille 2 colonnes plus soignée pour les
   cartes d'infos quand la largeur le permet.
   ───────────────────────────────────────────────────────────────────────── */
@media (min-width: 992px) {
  /* Spécificité : `body.public-product-page .product-hero` etc. (app.css)
     fixe déjà un padding en dur pour CES pages précisément — sans le préfixe
     `body.public-product-page`, une règle `.product-hero{...}` seule perdrait
     silencieusement (spécificité plus faible) et n'aurait aucun effet. */
  body.public-product-page .product-hero {
    padding-left: clamp(28px, 4vw, 64px);
    padding-right: clamp(28px, 4vw, 64px);
  }

  body.public-product-page .product-sheet-body {
    padding-left: clamp(24px, 4vw, 56px);
    padding-right: clamp(24px, 4vw, 56px);
  }

  body.public-product-page .product-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.public-product-page .product-info-card-wide {
    grid-column: 1 / -1;
  }
}