/**
 * Fiche produit — vitrine
 *
 * Ne définit QUE ce qui est propre au produit. Cartes, boutons, champs
 * et conteneur viennent du thème du site : les redéfinir ici produirait
 * une page qui ne ressemble pas au reste.
 */

/* ── Fil d'Ariane ── */

.shop-crumbs {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    flex-wrap: wrap;
    padding: var(--space-lg) 0 0;
    font-size: var(--font-size-sm);
    color: var(--text-tertiary);
}

.shop-crumbs a { color: var(--text-secondary); text-decoration: none; }
.shop-crumbs a:hover { color: var(--primary-600); }
.shop-crumbs i { font-size: 10px; opacity: 0.5; }

.product {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-2xl);
    padding: var(--space-2xl) 0;
    align-items: start;
}

/* ── Galerie ── */

.product__main {
    position: relative;
    aspect-ratio: 1;
    padding: 0;
    overflow: hidden;
}

/* Pastille de remise : elle se voit avant le prix, et c'est souvent
   elle qui retient l'attention. */
.product__badge {
    position: absolute;
    top: var(--space-md);
    left: var(--space-md);
    z-index: 2;
    padding: 5px 12px;
    border-radius: var(--radius-full);
    background: var(--danger);
    color: #fff;
    font-size: var(--font-size-sm);
    font-weight: 700;
}

.product__main img { width: 100%; height: 100%; object-fit: cover; display: block; }

.product__main--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-5xl);
    color: var(--text-tertiary);
}

.product__thumbs {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-md);

    /* Défilement horizontal seul.
       
       Déclarer `overflow-x` sans son pendant vertical force
       `overflow-y: auto` — une règle CSS discrète qui rognait la
       vignette agrandie en haut et en bas.
       
       `visible` est refusé par la spécification quand l'autre axe est
       `auto`, d'où `clip` avec une marge de dépassement : elle laisse
       respirer l'agrandissement sans rendre la bande défilable
       verticalement. */
    overflow-x: auto;
    overflow-y: clip;
    overflow-clip-margin: 8px;

    /* Marge intérieure : elle sert de repli là où
       `overflow-clip-margin` n'est pas géré — l'agrandissement tient
       alors dans le rembourrage plutôt que de dépasser. */
    padding: 6px 2px;
}

.product__thumb {
    flex-shrink: 0;
    width: 76px;
    height: 76px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: var(--radius-lg);
    background: none;
    cursor: pointer;
    overflow: hidden;
    transition: border-color var(--transition-fast), transform var(--transition-fast);
}

/* Agrandissement plutôt que remontée : la vignette dépassait du cadre
   et passait sous l'image principale.
   
   `z-index` avec `position: relative` : sans lui, la vignette agrandie
   passe sous ses voisines, qui viennent après dans le flux. */
.product__thumb:hover {
    transform: scale(1.06);
    position: relative;
    z-index: 1;
}
.product__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product__thumb.is-active { border-color: var(--primary-500); }

/* ── Informations ── */

.product__sku {
    margin: 0 0 var(--space-xs);
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.product__title {
    margin: 0 0 var(--space-sm);
    font-size: var(--font-size-3xl);
    font-weight: 700;
    line-height: 1.2;
}

.product__price {
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
    flex-wrap: wrap;
    margin: 0 0 var(--space-lg);
}

.product__price strong {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--primary-600);
}

.product__from {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-weight: 400;
}

/* Ancien prix barré : gris et plus petit, il accompagne le prix sans
   lui disputer l'attention. */
.product__price s {
    font-size: var(--font-size-md);
    color: var(--text-tertiary);
}

.product__lead {
    margin: 0 0 var(--space-xl);
    color: var(--text-secondary);
    line-height: 1.7;
}

/* ── Choix ── */

.product__field { margin-bottom: var(--space-lg); }

.product__label {
    display: block;
    margin-bottom: var(--space-sm);
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.product__required { color: var(--danger); }

/* Porteur de données seulement : la pastille près du champ laissait se
   demander si son montant était déjà compris dans le prix annoncé. */
.product__extra { display: none; }

/* Compteur de caractères : atteindre la limite sans prévenir donne
   l'impression que le clavier ne répond plus. */
.product__count {
    display: block;
    margin-top: 4px;
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.product__count.is-full { color: var(--warning-dark); font-weight: 600; }

.product__options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

/* Boutons de déclinaison : forme propre au produit, mais couleurs et
   transitions reprises du thème. */
.product__option {
    min-width: 48px;
    padding: 0 var(--space-md);
    height: 42px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-input);
    color: var(--text-primary);
    font: inherit;
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.product__option:hover:not(:disabled) {
    border-color: var(--primary-400);
    transform: translateY(-1px);
}

.product__option.is-selected {
    border-color: var(--primary-500);
    background: var(--primary-500);
    color: #fff;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15);
}

/* Combinaison inexistante : barrée plutôt que masquée. La faire
   disparaître donnerait l'impression que la taille n'existe pas du
   tout, alors qu'elle existe dans une autre couleur. */
.product__option.is-unavailable {
    opacity: 0.4;
    cursor: not-allowed;
    text-decoration: line-through;
}

.product__help {
    display: block;
    margin-top: var(--space-xs);
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

/* ── Achat ── */

.product__buy {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-xl);
}

.product__qty { width: 80px; text-align: center; flex-shrink: 0; }

.product__buy .btn { flex: 1; }

.product__stock {
    margin: var(--space-sm) 0 0;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.product__stock.is-low { color: var(--warning-dark); }
.product__stock.is-out { color: var(--danger); }

.product__description {
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--border-color);
    line-height: 1.8;
    color: var(--text-secondary);
}

@media (max-width: 900px) {
    .product {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
        padding: var(--space-lg) 0;
    }

    .product__title { font-size: var(--font-size-2xl); }
}

/* ── Réassurance ── */

/* Les questions qui retiennent au moment de valider, répondues avant
   qu'elles se posent. */
.product__trust {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin: var(--space-xl) 0 0;
    padding: var(--space-md) 0 0;
    border-top: 1px solid var(--border-color);
    list-style: none;
}

.product__trust li {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.product__trust i { color: var(--primary-500); }

/* ── Description et caractéristiques ── */

.product-details {
    padding: var(--space-xl) 0 var(--space-3xl);
    border-top: 1px solid var(--border-color);
}

.product-details__tabs {
    display: flex;
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
    border-bottom: 1px solid var(--border-color);
}

.product-details__tab {
    padding: var(--space-sm) 0;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--text-secondary);
    font: inherit;
    font-size: var(--font-size-md);
    cursor: pointer;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.product-details__tab:hover { color: var(--text-primary); }

.product-details__tab.is-active {
    color: var(--primary-600);
    border-bottom-color: var(--primary-500);
}

.product-details__title {
    margin: 0 0 var(--space-md);
    font-size: var(--font-size-xl);
}

.product-details__panel { display: none; line-height: 1.8; color: var(--text-secondary); }
.product-details__panel.is-active { display: block; }

/* Caractéristiques en deux colonnes : libellé et valeur alignés d'une
   ligne à l'autre, ce qu'une liste simple ne donnerait pas. */
.product-specs {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--space-sm) var(--space-xl);
    margin: 0;
    max-width: 520px;
}

.product-specs dt { color: var(--text-tertiary); font-size: var(--font-size-sm); }
.product-specs dd { margin: 0; color: var(--text-primary); }

/* ── Champ de fichier ── */

/* Zone d'accueil plutôt que le bouton natif : celui-ci affiche « Aucun
   fichier sélectionné » dans une police système qui jure avec le reste,
   et son apparence varie d'un navigateur à l'autre. */
/* Fond plein plutôt que transparent : sur une carte en verre, un cadre
   vide se confond avec l'arrière-plan et ne se lit pas comme une zone
   à remplir. */
.product__files {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-surface-secondary);
    overflow: hidden;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.product__files.is-over {
    border-color: var(--primary-500);
    background: rgba(var(--primary-rgb), 0.08);
}

.product__files input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

/* Une rangée plutôt qu'un pavé : l'icône, le libellé et les
   contraintes tiennent sur une ligne, la zone ne fait plus 150 pixels
   de haut pour un seul bouton. */
.product__files__drop {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    width: 100%;
    padding: var(--space-md);
    border: 0;
    background: none;
    font: inherit;
    text-align: left;
    color: inherit;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.product__files__drop:hover { background: rgba(var(--primary-rgb), 0.06); }

.product__files__drop[hidden] { display: none; }

.product__files__drop i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    color: var(--primary-500);
    font-size: var(--font-size-lg);
}

.product__files__drop strong {
    display: block;
    font-size: var(--font-size-sm);
}

.product__files__label { min-width: 0; }

/* Contraintes annoncées avant le choix : les découvrir après l'envoi
   oblige à recommencer avec un fichier qu'il faut d'abord convertir. */
.product__files__drop small {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

/* Une fois des fichiers retenus, l'ajout passe sous la liste. */
.product__files.has-files .product__files__drop {
    border-top: 1px solid var(--border-color);
}

.product__files__list:not(:empty) {
    padding: var(--space-sm);
    background: var(--bg-surface);
}

.product__files__item {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto auto;
    gap: var(--space-sm);
    align-items: center;
    padding: var(--space-xs);
    border-radius: var(--radius-sm);
}

.product__files__item + .product__files__item { margin-top: 4px; }

/* Vignette pour une image, icône sinon : sans aperçu, rien ne distingue
   deux photos dont on ne se rappelle plus les noms. */
.product__files__thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sm);
    background: var(--bg-surface-secondary);
    color: var(--text-tertiary);
    overflow: hidden;
}

.product__files__thumb img { width: 100%; height: 100%; object-fit: cover; }

.product__files__name {
    font-size: var(--font-size-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product__files__item small {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    white-space: nowrap;
}

.product__files__remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--text-tertiary);
    font-size: 12px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.product__files__remove:hover { background: var(--danger); color: #fff; }

/* Message d'erreur sous la zone : `alert()` fige la page derrière une
   fenêtre système qui ne ressemble à rien du site, et oblige à cliquer
   avant de comprendre. */
.product__files__error {
    display: none;
    align-items: flex-start;
    gap: 6px;
    margin: var(--space-xs) 0 0;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    background: rgba(225, 29, 72, 0.08);
    color: var(--danger);
    font-size: var(--font-size-xs);
}

.product__files__error.is-visible { display: flex; }

/* ── Erreurs de champ ── */

/* Message sous le champ concerné : les bulles natives affichent un
   texte anglais dans une police système, disparaissent au premier clic,
   et n'en montrent qu'une à la fois. */
.product__error {
    display: none;
    align-items: flex-start;
    gap: 6px;
    margin: var(--space-xs) 0 0;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    background: rgba(225, 29, 72, 0.08);
    color: var(--danger);
    font-size: var(--font-size-xs);
}

.product__error.is-visible { display: flex; }

/* Champ marqué : le message seul ne suffit pas quand plusieurs erreurs
   s'affichent et qu'on remonte la page. */
.product__field .is-invalid {
    border-color: var(--danger);
}

.product__field .is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.12);
}

/* ── Panier ── */

.cart { padding: var(--space-xl) 0 var(--space-3xl); }

.cart__title { margin: 0 0 var(--space-lg); }

.cart__error {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 var(--space-lg);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    background: rgba(225, 29, 72, 0.08);
    color: var(--danger);
    font-size: var(--font-size-sm);
}

.cart__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-3xl) var(--space-lg);
    text-align: center;
}

.cart__empty i { font-size: 48px; color: var(--text-tertiary); }
.cart__empty p { margin: 0; color: var(--text-secondary); }

/* Récapitulatif à droite, collant : sur un panier long, le total et le
   bouton resteraient sinon hors de vue pendant qu'on ajuste les
   quantités. */
.cart__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--space-xl);
    align-items: start;
}

.cart__summary { position: sticky; top: var(--space-lg); padding: var(--space-lg); }
.cart__summary h2 { margin: 0 0 var(--space-md); font-size: var(--font-size-lg); }

.cart__summary dl { margin: 0; }

.cart__summary dl > div {
    display: flex;
    justify-content: space-between;
    gap: var(--space-md);
    padding: 4px 0;
    font-size: var(--font-size-sm);
}

.cart__summary dt { color: var(--text-secondary); }
.cart__summary dd { margin: 0; font-variant-numeric: tabular-nums; }

.cart__summary-discount dd { color: var(--success, #16a34a); }
.cart__summary-shipping em { font-style: normal; color: var(--text-tertiary); font-size: var(--font-size-xs); }

.cart__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-color);
}

.cart__total strong { font-size: var(--font-size-xl); }

.cart__tax {
    margin: 2px 0 0;
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    text-align: right;
}

.cart__checkout { width: 100%; margin-top: var(--space-md); justify-content: center; }

.cart__blocked {
    margin: var(--space-xs) 0 0;
    font-size: var(--font-size-xs);
    color: var(--danger);
    text-align: center;
}

.cart__continue {
    display: block;
    margin-top: var(--space-sm);
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

/* ── Ligne de panier ── */

.cart-line {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto auto auto;
    gap: var(--space-md);
    align-items: center;
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--border-color);
}

.cart-line__thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: var(--radius-md);
    background: var(--bg-surface-secondary);
    color: var(--text-tertiary);
    overflow: hidden;
}

.cart-line__thumb img { width: 100%; height: 100%; object-fit: cover; }

.cart-line__main { min-width: 0; }
.cart-line__main strong { display: block; font-size: var(--font-size-md); }

.cart-line__variant {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

/* Options de personnalisation : le détail de ce qui a été commandé,
   sans quoi deux lignes du même produit seraient indistinguables. */
.cart-line__options {
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

.cart-line__options span::after { content: ' : '; }

.cart-line__warn {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
    font-size: var(--font-size-xs);
    color: var(--warning-dark, #b45309);
}

.cart-line__qty { display: flex; align-items: center; gap: 4px; }
.cart-line__qty input { width: 68px; text-align: center; }

.cart-line__price {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cart-line__remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.cart-line__remove:hover { background: var(--danger); color: #fff; }

@media (max-width: 900px) {
    .cart__layout { grid-template-columns: 1fr; }
    .cart__summary { position: static; }

    .cart-line {
        grid-template-columns: 60px minmax(0, 1fr) auto;
        row-gap: var(--space-sm);
    }

    /* Quantité et prix passent sous le nom : sur trois colonnes, ils
       écraseraient le libellé de l'article. */
    .cart-line__qty { grid-column: 2; }
    .cart-line__price { grid-column: 3; }
}

/* ── Tunnel de commande ── */

.checkout { padding: var(--space-xl) 0 var(--space-3xl); }
.checkout__title { margin: 0 0 var(--space-lg); }

.checkout__errors {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    background: rgba(225, 29, 72, 0.08);
    color: var(--danger);
    font-size: var(--font-size-sm);
}

.checkout__errors ul { margin: 0; padding-left: var(--space-md); }

.checkout__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--space-xl);
    align-items: start;
}

.checkout__form { display: flex; flex-direction: column; gap: var(--space-lg); }

.checkout__form section { padding: var(--space-lg); }
.checkout__form h2 { margin: 0 0 var(--space-md); font-size: var(--font-size-lg); }

.form-row { display: flex; gap: var(--space-md); flex-wrap: wrap; }
.form-row > .form-group { flex: 1; min-width: 200px; }
.form-group--narrow { flex: 0 0 140px; min-width: 120px; }

.checkout__same { margin-bottom: var(--space-md); }

.checkout__shipping-address[hidden] { display: none; }

/* Indication plutôt qu'une section vide : dire pourquoi il n'y a rien
   vaut mieux que de laisser chercher. */
.checkout__hint {
    margin: 0;
    padding: var(--space-md);
    border-radius: var(--radius-md);
    background: var(--bg-surface-secondary);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

/* ── Méthodes de livraison et de paiement ── */

.checkout__methods { display: flex; flex-direction: column; gap: var(--space-sm); }

.checkout__method {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.checkout__method:hover { border-color: var(--primary-400); }

/* Choix retenu mis en évidence : sur une liste de trois options, le
   point d'un bouton radio seul se repère mal. */
.checkout__method:has(input:checked) {
    border-color: var(--primary-500);
    background: rgba(var(--primary-rgb), 0.05);
}

.checkout__method-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-md);
    background: var(--bg-surface-secondary);
    color: var(--primary-500);
}

.checkout__method-main { flex: 1; min-width: 0; }
.checkout__method-main strong { display: block; font-size: var(--font-size-sm); }
.checkout__method-main span { font-size: var(--font-size-xs); color: var(--text-tertiary); }

.checkout__method-price {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ── Récapitulatif ── */

.checkout__summary {
    position: sticky;
    top: var(--space-lg);
    padding: var(--space-lg);
}

.checkout__summary h2 { margin: 0 0 var(--space-md); font-size: var(--font-size-lg); }

.checkout__items {
    margin: 0 0 var(--space-md);
    padding: 0 0 var(--space-md);
    border-bottom: 1px solid var(--border-color);
    list-style: none;
}

.checkout__items li {
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
    padding: 4px 0;
    font-size: var(--font-size-sm);
}

.checkout__item-qty { color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.checkout__item-name { flex: 1; min-width: 0; }

.checkout__item-name em {
    display: block;
    font-style: normal;
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

.checkout__item-price { font-variant-numeric: tabular-nums; white-space: nowrap; }

.checkout__totals { margin: 0; }

.checkout__totals > div {
    display: flex;
    justify-content: space-between;
    padding: 3px 0;
    font-size: var(--font-size-sm);
}

.checkout__totals dt { color: var(--text-secondary); }
.checkout__totals dd { margin: 0; font-variant-numeric: tabular-nums; }

.checkout__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--border-color);
}

.checkout__total strong { font-size: var(--font-size-xl); }

.checkout__tax {
    margin: 2px 0 0;
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    text-align: right;
}

.checkout__submit { width: 100%; margin-top: var(--space-md); justify-content: center; }

.checkout__back {
    display: block;
    margin-top: var(--space-sm);
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

/* ── Confirmation ── */

.thanks { padding: var(--space-3xl) 0; }

.thanks__box {
    max-width: 520px;
    margin: 0 auto;
    padding: var(--space-2xl);
    text-align: center;
}

.thanks__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: var(--space-md);
    border-radius: 50%;
    background: var(--bg-surface-secondary);
    color: var(--text-tertiary);
    font-size: var(--font-size-2xl);
}

.thanks__icon--ok { background: rgba(22, 163, 74, 0.12); color: #16a34a; }

.thanks__ref { color: var(--text-secondary); font-size: var(--font-size-sm); }
.thanks__total { margin: var(--space-md) 0; }

/* ── Redirection vers la passerelle ── */

.payment-redirect { padding: var(--space-3xl) 0; text-align: center; }
.payment-redirect .card { max-width: 420px; margin: 0 auto; padding: var(--space-2xl); }

.payment-redirect__spinner {
    display: inline-block;
    width: 32px;
    height: 32px;
    margin-bottom: var(--space-md);
    border: 3px solid var(--border-color);
    border-top-color: var(--primary-500);
    border-radius: 50%;
    animation: payment-spin 0.8s linear infinite;
}

@keyframes payment-spin { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
    .checkout__layout { grid-template-columns: 1fr; }
    .checkout__summary { position: static; }
}

/* Échec d'un ajout au panier : sans ce message, la page se rechargeait
   sans rien dire, et le visiteur ne savait pas quoi corriger. */
.product__error {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    background: rgba(225, 29, 72, 0.08);
    color: var(--danger);
    font-size: var(--font-size-sm);
}

/* Champ obligatoire non rempli, signalé au clic sur le bouton.
   
   Nommer les champs plutôt que les compter : « 3 champs restent à
   remplir » oblige à chercher lesquels. */
.product__field.is-missing .form-input,
.product__field.is-missing .form-select,
.product__field.is-missing .form-textarea,
.product__field.is-missing .cselect__display,
.product__field.is-missing .product__files {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.12);
}

.product__field.is-missing .product__label { color: var(--danger); }

/* Bouton désactivé : pas de curseur barré.
   
   Il signale un refus là où l'état suffit, et le geste devient
   désagréable sans rien apprendre. */
#product-submit:disabled { cursor: default; }

/* Total en cours de recalcul : une quantité vient de changer, l'envoi
   part dans un instant.
   
   Atténué plutôt que barré : le barré annonce une valeur annulée, alors
   qu'elle est simplement en train d'être remplacée. */
.cart__total.is-stale strong {
    opacity: 0.4;
    transition: opacity 150ms ease;
}

.cart__refresh { width: 100%; margin-top: var(--space-md); justify-content: center; }

/* Confirmation d'une action sur le panier.
   
   Elle s'efface d'elle-même : rester affichée après le geste suivant
   la ferait passer pour une réponse à celui-là. */
.cart__done {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    background: rgba(22, 163, 74, 0.1);
    color: var(--success-dark, #15803d);
    font-size: var(--font-size-sm);
    animation: cart-done-out 400ms ease 4s forwards;
}

@keyframes cart-done-out {
    to { opacity: 0; visibility: hidden; margin-bottom: 0; padding: 0; height: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .cart__done { animation: none; }
}

/* Panier en cours d'envoi.
   
   Un voile plutôt que des champs désactivés : un champ `disabled` n'est
   pas envoyé avec le formulaire, et le panier partirait sans aucune
   quantité — donc vidé. */
.cart__layout.is-sending {
    pointer-events: none;
    opacity: 0.6;
    transition: opacity 150ms ease;
}

/* ── Reprise de paiement ──

   Une page à part du tunnel : l'adresse et le panier sont déjà
   enregistrés, seul le moyen manque. */

.resume {
    display: flex;
    justify-content: center;
    padding: var(--space-2xl) var(--space-md);
}

.resume__card {
    width: 100%;
    max-width: 480px;
    padding: var(--space-xl);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
}

.resume__card h1 { margin: 0 0 4px; font-size: var(--font-size-xl); }
.resume__card h2 { margin: var(--space-lg) 0 var(--space-sm); font-size: var(--font-size-sm); }

.resume__ref {
    margin: 0 0 var(--space-lg);
    color: var(--text-tertiary);
    font-size: var(--font-size-sm);
    font-variant-numeric: tabular-nums;
}

/* Montant mis en avant : c'est la première chose qu'on vérifie avant
   de sortir sa carte. */
.resume__amount {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: var(--space-md);
    border-radius: var(--radius-md);
    background: var(--bg-surface-secondary);
}

.resume__amount span { color: var(--text-secondary); font-size: var(--font-size-sm); }
.resume__amount strong { font-size: var(--font-size-xl); }

.resume__items {
    margin: var(--space-md) 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--font-size-sm);
}

.resume__items li {
    display: flex;
    justify-content: space-between;
    gap: var(--space-md);
    padding: 3px 0;
    color: var(--text-secondary);
}

.resume__items em { font-style: normal; color: var(--text-tertiary); }

.resume__methods { display: flex; flex-direction: column; gap: var(--space-sm); }

.resume__method {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: inherit;
    text-decoration: none;
    transition: border-color var(--transition-fast);
}

.resume__method:hover { border-color: var(--primary-500); }

.resume__method > span { flex: 1; min-width: 0; }
.resume__method strong { display: block; font-size: var(--font-size-sm); }

.resume__method em {
    font-style: normal;
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

.resume__note {
    margin: var(--space-lg) 0 0;
    color: var(--text-tertiary);
    font-size: var(--font-size-xs);
    text-align: center;
}

/* ── Lien de paiement inutilisable ──

   Une page plutôt qu'une redirection muette : le client vient régler
   une commande, l'envoyer à la vitrine sans un mot le laisse sans
   savoir quoi faire. */

.pay-error {
    display: flex;
    justify-content: center;
    padding: var(--space-2xl) var(--space-md);
}

.pay-error__card {
    max-width: 440px;
    padding: var(--space-xl);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    text-align: center;
}

.pay-error__card > i {
    font-size: 40px;
    color: var(--warning, #d97706);
}

.pay-error__card h1 { margin: var(--space-md) 0 var(--space-sm); font-size: var(--font-size-xl); }

.pay-error__card p {
    margin: 0 0 var(--space-lg);
    color: var(--text-secondary);
    line-height: 1.5;
}

.pay-error__home {
    display: block;
    margin-top: var(--space-md);
    color: var(--text-tertiary);
    font-size: var(--font-size-sm);
}

/* Erreur sur la page de choix : le client revient d'une tentative qui
   n'a rien donné, il doit savoir pourquoi. */
.resume__error {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: var(--space-lg) 0 0;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    background: rgba(217, 119, 6, 0.1);
    color: var(--warning-dark, #b45309);
    font-size: var(--font-size-sm);
}

/* Moyen choisi à la commande : le client l'a déjà décidé une fois, le
   lui rappeler évite de rechoisir à froid. */
.resume__current {
    margin: var(--space-md) 0 0;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

/* Moyen d'origine mis en avant dans la liste : sans repère, on relit
   les trois options alors qu'une seule a déjà été retenue. */
.resume__method.is-current {
    border-color: var(--primary-500);
    background: rgba(var(--primary-rgb), 0.04);
}

/* Aucun moyen disponible : dit SUR la page de reprise, pour que le
   client garde sous les yeux ce qu'il était venu régler. */
.resume__unavailable {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    margin: var(--space-lg) 0;
    padding: var(--space-md);
    border-radius: var(--radius-md);
    background: var(--bg-surface-secondary);
}

.resume__unavailable > i { font-size: 20px; color: var(--text-tertiary); flex-shrink: 0; }
.resume__unavailable strong { display: block; font-size: var(--font-size-sm); }

.resume__unavailable p {
    margin: 4px 0 0;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.45;
}

.resume__card .btn--lg { width: 100%; justify-content: center; }

/* ════════════════════════════════════════════════════════════
   CATALOGUE
   ════════════════════════════════════════════════════════════ */

.catalog {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-xl) var(--space-md);
}

.catalog__head { margin-bottom: var(--space-lg); }
.catalog__head h1 { margin: 0 0 6px; }
.catalog__head p { margin: 0; color: var(--text-secondary); }

/* ── Catégories ── */

.catalog__filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.catalog__filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    color: inherit;
    font-size: var(--font-size-sm);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.catalog__filter:hover { border-color: var(--primary-500); }

.catalog__filter.is-active {
    border-color: var(--primary-500);
    background: var(--primary-500);
    color: #fff;
}

/* Compteur : il dit combien de produits attendent derrière le filtre,
   sans faire cliquer pour le découvrir. */
.catalog__filter span {
    font-size: var(--font-size-xs);
    opacity: 0.6;
}

/* ── Barre de recherche ── */

.catalog__bar {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.catalog__bar input { flex: 1; min-width: 0; }
.catalog__bar select { width: auto; min-width: 170px; }

/* ── Grille ──

   `auto-fill` et non `auto-fit` : avec deux produits, `auto-fit` les
   étire sur toute la largeur et donne des vignettes démesurées. */
.catalog__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: var(--space-lg);
}

.product-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    transition: border-color var(--transition-fast), transform var(--transition-fast);
}

.product-card:hover { border-color: var(--primary-500); transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
    .product-card { transition: none; }
    .product-card:hover { transform: none; }
}

/* Rapport fixe : sans lui, des images de proportions différentes font
   sauter la hauteur des cartes d'une ligne à l'autre. */
.product-card__image {
    position: relative;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-surface-secondary);
    color: var(--text-tertiary);
    font-size: 30px;
}

.product-card__image img { width: 100%; height: 100%; object-fit: cover; }

.product-card__tag {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
}

.product-card__tag.is-sale { background: var(--danger, #e11d48); }

.product-card__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--space-md);
}

.product-card__body strong { font-size: var(--font-size-sm); line-height: 1.3; }

.product-card__body span {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    line-height: 1.4;

    /* Deux lignes au plus : une description longue déséquilibrerait
       la grille. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-card__body em {
    margin-top: 4px;
    font-style: normal;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ── Pagination et vide ── */

.catalog__pages {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-top: var(--space-xl);
}

.catalog__pages a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: inherit;
    font-size: var(--font-size-sm);
    text-decoration: none;
}

.catalog__pages a.is-active {
    border-color: var(--primary-500);
    background: var(--primary-500);
    color: #fff;
}

.catalog__empty {
    padding: var(--space-2xl) 0;
    color: var(--text-tertiary);
    text-align: center;
}

@media (max-width: 600px) {
    .catalog__bar { flex-wrap: wrap; }
    .catalog__bar input { flex-basis: 100%; }
    .catalog__grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-md); }
}

/* ════════════════════════════════════════════════════════════
   ACCUEIL DE BOUTIQUE
   ════════════════════════════════════════════════════════════ */

/* ── Bannières ── */

.hero {
    position: relative;
    overflow: hidden;
    background: var(--bg-surface-secondary);
}

.hero__track { display: flex; }

/* Chaque diapositive occupe toute la largeur et se superpose : les
   empiler en absolu ferait perdre la hauteur au conteneur. */
.hero__slide {
    position: relative;
    flex: 0 0 100%;
    display: none;
}

.hero__slide.is-active { display: block; }

.hero__slide img {
    display: block;
    width: 100%;
    height: clamp(220px, 34vw, 460px);
    object-fit: cover;
}

/* Voile sombre sous le texte : un titre blanc sur une photo claire
   devient illisible. Le dégradé n'assombrit que le bas. */
.hero__caption {
    position: absolute;
    inset: auto 0 0;
    padding: var(--space-xl) var(--space-lg);
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.72));
    color: #fff;
}

.hero__caption h2 { margin: 0 0 6px; font-size: clamp(20px, 3.2vw, 32px); }

.hero__caption p {
    margin: 0 0 var(--space-md);
    max-width: 52ch;
    opacity: 0.92;
    line-height: 1.45;
}

.hero__dots {
    position: absolute;
    bottom: var(--space-md);
    right: var(--space-lg);
    display: flex;
    gap: 6px;
}

.hero__dots button {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    transition: background var(--transition-fast), width var(--transition-fast);
}

.hero__dots button.is-active { width: 22px; border-radius: 5px; background: #fff; }

/* ── Sections ── */

.storefront {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-xl) var(--space-md);
}

.storefront__intro { margin-bottom: var(--space-2xl); text-align: center; }
.storefront__intro h1 { margin: 0 0 var(--space-sm); }

.storefront__intro p {
    max-width: 62ch;
    margin: 0 auto;
    color: var(--text-secondary);
    line-height: 1.6;
}

.storefront__section { margin-bottom: var(--space-2xl); }

.storefront__title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.storefront__title h2 { margin: 0; font-size: var(--font-size-xl); }

.storefront__title a {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    text-decoration: none;
    white-space: nowrap;
}

.storefront__title a:hover { color: var(--primary-500); }

/* ── Catégories ──

   `--cat` porte la couleur de la catégorie, posée en ligne depuis
   la base. Le dégradé s'y adapte sans style à rallonge. */
.cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-md);
}

.cat-card {
    --cat: var(--primary-500);

    position: relative;
    display: block;
    aspect-ratio: 3 / 2;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--cat);
    color: #fff;
    text-decoration: none;
}

.cat-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-base);
}

.cat-card:hover img { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
    .cat-card img, .cat-card:hover img { transition: none; transform: none; }
}

.cat-card__body {
    position: absolute;
    inset: auto 0 0;
    padding: var(--space-lg) var(--space-md) var(--space-md);
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
}

.cat-card__body strong { display: block; font-size: var(--font-size-lg); }

.cat-card__body em {
    font-style: normal;
    font-size: var(--font-size-xs);
    opacity: 0.85;
}

@media (max-width: 600px) {
    .cat-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    .hero__caption { padding: var(--space-lg) var(--space-md); }
    .hero__dots { right: var(--space-md); }
}