/* cart.css — page panier. */

/* Cart page ----------------------------------------------------------------- */
/* #app n'a pas de max-width (les grilles s'étirent volontairement sur toute
   la largeur) : sans ça, le panier s'étire sur un écran ultrawide. */
.cart-page {
    --cart-thumb-w: clamp(96px, 15vw, 150px);
    max-width: 1400px;
    margin: 0 auto;
}

/* En-tête de colonnes + lignes partagent la même grille pour rester alignés. */
.cart-cols,
.cart-line {
    display: grid;
    /* Colonnes quantité/total fluides (clamp sur la largeur d'écran) : elles
       rétrécissent avec la page au lieu de rester fixes, sinon le sélecteur
       de quantité vient écraser le titre alors qu'il reste de la marge à
       droite. */
    grid-template-columns: minmax(0, 1fr) clamp(192px, 20vw, 260px) clamp(80px, 9vw, 140px);
    column-gap: clamp(16px, 3vw, 32px);
}

.cart-cols {
    margin-top: 32px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
}

.cart-cols span:last-child {
    text-align: right;
}

.cart-line {
    align-items: start;
    padding: 32px 0;
    border-bottom: 1px solid var(--line);
}

.cart-line-product {
    display: flex;
    align-items: flex-start;
    gap: clamp(20px, 4vw, 40px);
}

.cart-line-thumb {
    flex: 0 0 var(--cart-thumb-w);
}

.cart-line-thumb img {
    display: block;
    width: var(--cart-thumb-w);
    object-fit: cover;
    background: var(--surface);
}

.cart-line-info {
    font-size: 15px;
}

.cart-line-title {
    display: inline-block;
    text-decoration: none;
    text-underline-offset: 3px;
    font-weight: 400;
}

/* margin-top hérité de la règle partagée .price (components.css, 6px) : même
   écart repris explicitement ci-dessous pour .cart-line-size, qui avait
   jusque-là 10px — un écart différent entre titre→prix et prix→taille, sans
   raison délibérée. */
.cart-line-info .price {
    font-size: 14px;
}

.cart-line-size {
    margin-top: 6px;
    font-size: 14px;
    color: var(--text-soft);
}

.cart-line-qty {
    display: flex;
    align-items: center;
    gap: 14px;
}

.cart-line-subtotal {
    text-align: right;
    font-size: 16px;
    line-height: var(--control-h);
}

/* Poubelle : icône SVG contour, sans fond ni couleur d'alerte — même
   sobriété que le stepper juste à côté. */
.cart-line-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--control-h);
    height: var(--control-h);
    padding: 0;
    background: transparent;
    color: var(--text);
    border: 0;
    flex-shrink: 0;
    cursor: pointer;
}

/* Au survol, le couvercle se soulève en pivotant et le corps descend un peu
   (icône en deux groupes, voir TRASH_ICON, js/pages/cart.js). */
.trash-lid,
.trash-body {
    transition: transform .2s ease;
}

.trash-lid {
    transform-box: fill-box;
    transform-origin: left bottom;
}

.cart-line-remove:hover .trash-lid {
    transform: translate(-1px, 1.5px) rotate(-15deg);
}

.cart-line-remove:hover .trash-body {
    transform: translateY(1.5px);
}

.cart-bottom {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(240px, 40vw, 380px);
    gap: clamp(20px, 4vw, 48px);
    margin-top: 48px;
    align-items: start;
}

.cart-note-details {
    max-width: 420px;
}

.cart-note {
    max-width: none;
}

/* Barre "Order special instructions" — <summary>, donc clavier/accessibilité
   gratuits ; même poids que "Estimated total" (500, plus appuyé que le corps
   de page léger par défaut). Repliable SEULEMENT sous 600px (panier empilé,
   voir plus bas pour le chevron et le filet en dessous, propres à cet état) :
   sur grand écran le champ reste TOUJOURS ouvert, cette barre n'est alors
   qu'un simple libellé, pas un contrôle (`cursor: pointer` réservé lui aussi
   au petit écran, voir plus bas — un curseur main sur un texte qui ne fait
   plus rien serait trompeur). Le clic est de toute façon neutralisé sur grand
   écran par un garde côté JS (`js/pages/cart.js`, comme le récapitulatif du
   paiement sous 1000px, `checkout.js`) : sans lui, le `<summary>` — toujours
   interactif nativement — se refermerait quand même au clic. */
.cart-note-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--muted);
    list-style: none;
    user-select: none;
    -webkit-user-select: none;
}

.cart-note-toggle::-webkit-details-marker {
    display: none;
}

.cart-note-details .cart-note {
    margin-top: 12px;
}

.cart-summary .btn {
    display: flex;
    margin-top: 24px;
}

.cart-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
}

.cart-total-label {
    font-weight: 500;
}

.cart-total-amount {
    font-size: 22px;
    font-weight: 500;
}

.cart-summary-note {
    margin: 12px 0 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.6;
}

/* Petit écran : colonnes Product / Total seulement ; la ligne devient une
   grille (image | infos | total), et le sélecteur de quantité passe sous les
   infos, à droite de l'image (`display:contents` sur .cart-line-product rend
   l'image et les infos directement placables dans la grille de la ligne). */
@media (max-width: 600px) { /* sm */
    /* Le panier passe en plein cadre à cette taille (comme le récapitulatif
       déroulant du paiement, checkout.css) : le total + bouton restent
       TOUJOURS visibles en bas de l'écran (au-dessus de la barre d'outils de
       Safari sur iPhone, `env(safe-area-inset-bottom)`), la liste défilant
       dans sa propre fenêtre bornée par 2 filets (celui de .cart-cols en haut,
       celui de #cart-lines en bas) plutôt que par le défilement de toute la
       page — sans ça, rien ne garantirait que le total reste visible avant
       d'avoir défilé jusqu'au bout de la liste (même principe que
       .summary-panel-scroll côté paiement : max-height/overflow-y:auto, pas
       position:sticky). #app perd son padding vertical habituel (comme sur
       la home, `body.home #app`) : .cart-page prend le relais avec le sien,
       en colonne flex, pour répartir sa hauteur entre en-tête fixe (titre +
       colonnes), liste (flexible, défilante) et pied fixe (note + total).
       `height: 100svh` explicite ici, ET `flex: none` pour annuler le
       `flex: 1` de #app (base.css, dont le `flex-basis: 0%` implicite
       ignorerait sinon complètement cette hauteur : un item flex dont la
       base est 0% se dimensionne par flex-grow, pas par sa propriété
       `height`, quelle que soit sa valeur). Sans `flex: none`, la hauteur de
       #app suit alors le contenu de .cart-page (flex-grow sans base fixe se
       contente de la taille du contenu s'il n'y a pas d'autre espace libre à
       distribuer dans le flex de `body`) : constaté avec un seul article, le
       total et le bouton "Checkout" remontaient juste sous la liste au lieu
       de rester en bas de l'écran. `body` n'a qu'un `min-height: 100vh`, pas
       une hauteur fixe — sans le `height: 100svh` (en plus de `flex: none`),
       une liste plus haute que l'écran ferait grandir #app pour l'accueillir
       en entier (min-height ne plafonne rien), annulant tout l'intérêt du
       `overflow-y: auto` de #cart-lines, plutôt que de forcer #app à
       s'arrêter à la hauteur de l'écran et de laisser la liste déborder DANS
       sa propre fenêtre (essayé, constaté en testant avec une liste assez
       longue pour dépasser l'écran : #app grandissait sans borne, le bouton
       "Checkout" se retrouvant hors écran cette fois par le haut du
       problème). `100svh`, pas `100vh` (déborderait sous la barre d'adresse
       mobile) ni `100dvh` (essayé un temps, comme pour le hero de la home,
       voir CLAUDE.md "100svh, pas 100dvh") : `dvh` recalcule cette hauteur EN
       CONTINU pendant que la barre d'adresse se rétracte au scroll, donc
       pendant qu'on défile DANS `#cart-lines` (dont la hauteur suit celle de
       #app) — le même défaut, repéré plus tard sur `/checkout` (le titre y
       défile aussi, ce qui le rendait plus visible : un grand espace blanc
       apparaissait entre le header et le formulaire pendant le scroll), a été
       corrigé ici par cohérence même si moins flagrant côté panier (titre/
       en-tête de colonnes `flex:none`, hors de la zone qui grandit). `svh`
       (hauteur "petite", barre d'adresse supposée déployée) fixe cette
       hauteur une fois pour toutes, recalculée seulement à un vrai
       redimensionnement. Le `body` (min-height:100vh, base.css) reste alors
       plus haut que 100svh (à cause du footer, qui suit #app dans le flux) :
       la page peut toujours défiler un peu plus loin pour l'atteindre, sans
       conséquence puisque le panier lui-même reste toujours entièrement
       visible dès le chargement, quel que soit le nombre d'articles. */
    #app:has(.cart-page:not(.empty-state)) {
        flex: none;
        height: 100svh;
        padding: 0;
    }

    .cart-page:not(.empty-state) {
        display: flex;
        flex-direction: column;
        height: 100%;
        padding: 88px 16px calc(16px + env(safe-area-inset-bottom));
    }

    .cart-page .title-row,
    .cart-cols {
        flex: none;
    }

    /* `min-height: 0` est indispensable : un enfant flex ne rétrécit pas sous
       son contenu par défaut, ce qui empêcherait `overflow-y: auto` de jouer
       son rôle ici (la liste pousserait la hauteur de .cart-page au lieu de
       défiler dans l'espace qui lui est laissé). */
    #cart-lines {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        border-bottom: 1px solid var(--line);
    }

    /* Le filet fixe ci-dessus (bas de la fenêtre de défilement) ferait doublon
       avec celui de la dernière ligne, juste au-dessus, une fois la liste
       assez courte pour ne pas défiler (ou une fois défilée jusqu'au bout). */
    #cart-lines .cart-line:last-child {
        border-bottom: none;
    }

    /* Commentaire pleine largeur au-dessus du total. */
    .cart-bottom {
        flex: none;
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: 0;
        padding-top: 16px;
    }

    .cart-cols {
        grid-template-columns: 1fr auto;
    }

    /* Chevron ET filet de séparation en dessous — repris tels quels de
       .accordion-item (product.css) pour rester cohérent avec les menus
       déroulants des fiches produit — n'existent qu'ici : le champ n'est
       repliable que sur petit écran (panier empilé), voir le commentaire de
       .cart-note-toggle plus haut. */
    .cart-note-details {
        padding-bottom: 14px;
        border-bottom: 1px solid var(--line);
    }

    .cart-note-toggle {
        cursor: pointer;
    }

    .cart-note-toggle::after {
        content: '';
        width: 7px;
        height: 7px;
        margin-right: 6px;
        border-right: 1.5px solid currentColor;
        border-bottom: 1.5px solid currentColor;
        transform: rotate(45deg);
        transition: transform .2s ease;
    }

    /* `:not([data-closing])` : pendant la fermeture animée, `open` reste vrai
       jusqu'à la fin (animateDetails, utils.js) mais le chevron doit
       redevenir "bas" tout de suite, pas attendre la fin du fondu de hauteur
       — même principe que .accordion-item[open]:not([data-closing]). */
    .cart-note-details[open]:not([data-closing]) .cart-note-toggle::after {
        transform: rotate(-135deg);
    }

    .cart-cols span:nth-child(2) {
        display: none;
    }

    .cart-line {
        grid-template-columns: var(--cart-thumb-w) minmax(0, 1fr) auto;
        column-gap: 20px;
        row-gap: 16px;
        padding: 24px 0;
    }

    .cart-line-product {
        display: contents;
    }

    .cart-line-thumb {
        grid-column: 1;
        grid-row: 1 / span 2;
    }

    .cart-line-info {
        grid-column: 2;
        grid-row: 1;
    }

    .cart-line-subtotal {
        grid-column: 3;
        grid-row: 1;
        line-height: 1.4;
    }

    .cart-line-qty {
        grid-column: 2 / -1;
        grid-row: 2;
        align-self: start;
    }
}