/* Produits — la vitrine pilotée par le catalogue (produits.html).
 * Prolonge le design existant (product-card, filter-btn, products-grid) :
 * uniquement ce que la page dynamique AJOUTE — prix barrés, fiche, états. */

/* Onglets : une seule ligne qui défile au doigt sur tablette, jamais de
 * débordement de page (audit visuel : iPad 1167×840). */
#produits-onglets {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    scrollbar-width: thin;
}
#produits-onglets .filter-btn { flex: 0 0 auto; }
.filter-btn--offres { border-color: #DC2626; color: #DC2626; font-weight: 700; }
.filter-btn--offres.active { background: #DC2626; color: #fff; }

/* Prix, avec ou sans offre */
.produit-prix { margin: 10px 0 6px; }
.produit-prix-barre {
    text-decoration: line-through;
    color: #9ca3af;
    margin-right: 8px;
    font-size: 0.95em;
}
.produit-prix-actuel { font-size: 1.25em; font-weight: 700; }
.produit-prix-actuel--offre { color: #DC2626; }
.produit-mention-reference {
    font-size: 0.72em;
    color: #6b7280;
    margin: 4px 0 0;
    line-height: 1.35;
}

/* Carte : le lien fiche au-dessus du bouton, cible tactile >= 44 px */
.produit-lien-fiche {
    display: block;
    text-align: center;
    padding: 12px 0;
    min-height: 44px;
    box-sizing: border-box;
}

/* Choix du modèle exact (accessoires multi-modèles — verre, coque…) */
.produit-modele { margin: 14px 0; }
.produit-modele label { display: block; font-weight: 600; margin-bottom: 6px; }
.produit-modele-select {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font: inherit;
    background: #fff;
}
.produit-modele-rappel { color: #DC2626; font-size: 0.9rem; margin: 8px 0 0; }

/* Le `.btn` du site fait 41 px de haut (14 px de rembourrage + une ligne de
 * 16 px) — trois pixels sous la cible tactile de 44 px, mesuré sur iPad
 * 1167×840. On corrige ICI, sur les boutons de cette page, plutôt que sur
 * `.btn` : la règle globale habille tout le site, et un changement de hauteur
 * partout se paierait en décalages sur des pages qu'on n'a pas regardées. */
.produit-carte .btn,
.produit-fiche-infos .btn {
    min-height: 44px;
}

/* Fiche produit
 *
 * `padding-top`/`padding-bottom` SÉPARÉMENT, jamais le raccourci `padding`.
 * La fiche porte aussi la classe `.container`, qui donne les 24 px de marge
 * latérale de tout le site. Un raccourci `padding: 24px 0 48px` remet ces
 * marges à ZÉRO — et comme `#produit-fiche` est un sélecteur d'identifiant
 * (spécificité 100) face à `.container` (10), c'est le zéro qui gagne. Résultat
 * mesuré sur iPad 1167×840 : titre, prix et bouton collés au bord gauche de
 * l'écran (x=0), alors que la liste juste au-dessus est bien à 24 px.
 */
#produit-fiche {
    padding-top: 24px;
    padding-bottom: 48px;
}
.produit-retour {
    display: inline-block;
    padding: 12px 0;
    min-height: 44px;
    box-sizing: border-box;
    font-weight: 600;
}
.produit-fiche-corps {
    display: grid;
    grid-template-columns: minmax(220px, 380px) 1fr;
    gap: 32px;
    align-items: start;
    margin-top: 8px;
}
.produit-fiche-image img { width: 100%; height: auto; border-radius: 16px; }
.produit-fiche-infos h1 { margin: 0 0 8px; }
.produit-dispo { margin: 12px 0 16px; font-weight: 600; }
.produit-dispo--oui { color: #15803d; }
.produit-dispo--non { color: #b91c1c; }
.produit-associes { margin-top: 40px; }
.produit-associes h2 { margin-bottom: 16px; }

/* États d'attente et de panne : honnêtes, jamais un écran blanc */
#produits-attente, #produits-panne, #produits-vide {
    text-align: center;
    padding: 48px 16px;
    color: #6b7280;
}

@media (max-width: 760px) {
    .produit-fiche-corps { grid-template-columns: 1fr; }
}