/* =====================================================================
   Panier 2026 — commandes/panier.php (préfixe pn26-)
   Même vocabulaire visuel que fiche-produit-2026.css
   ===================================================================== */
main.pn26-page {
    --pn-orange: #c8641e; --pn-orange-d: #a9500f; --pn-rouge: #bd2425; --pn-vert: #2f7d32;
    --pn-txt: #3d3d3d; --pn-txt-l: #7a7268; --pn-ligne: #e3dccf; --pn-creme: #faf8f4; --pn-sable: #f1ebe2;
    color: var(--pn-txt); font-family: 'Poppins', 'Urbanist', Arial, sans-serif; font-size: 15px; line-height: 1.5; text-align: left;
}
main.pn26-page * { box-sizing: border-box; }
main.pn26-page { overflow-x: hidden; overflow-x: clip; }   /* clip : coupe les débordements sans casser position: sticky */
main.pn26-page section#contenu { padding: 16px 30px 40px; max-width: 1240px; margin: 0 auto; }

/* ---------- en-tête ---------- */
.pn26-entete { display: flex; align-items: baseline; justify-content: space-between; gap: 10px 20px; flex-wrap: wrap; margin: 0 0 20px; }
main.pn26-page h1 { font-size: 30px; font-weight: 600; text-transform: none; margin: 0; padding: 0; left: auto; line-height: 1.2; text-align: left; }
main.pn26-page h1 span { font-size: 16px; font-weight: 500; color: var(--pn-txt-l); margin-left: 8px; }
.pn26-continuer { color: var(--pn-orange-d); text-decoration: none; font-weight: 600; font-size: 14px; }
.pn26-continuer:hover { text-decoration: underline; }

/* ---------- boutons ---------- */
.pn26-btn { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 13px 20px; border: 0; border-radius: 10px; background: var(--pn-orange); color: #fff; font: inherit; font-size: 16px; font-weight: 600; text-decoration: none; text-align: center; cursor: pointer; transition: background .15s; }
.pn26-btn:hover, .pn26-btn:focus { background: var(--pn-orange-d); color: #fff; }
.pn26-btn i { color: #fff; }
.pn26-btn-2 { background: #fff; color: var(--pn-txt); border: 1.5px solid var(--pn-ligne); }
.pn26-btn-2:hover, .pn26-btn-2:focus { background: var(--pn-creme); color: var(--pn-txt); border-color: var(--pn-orange); }
.pn26-btn-off, .pn26-btn-off:hover { background: #d9d1c4; color: #fff; cursor: not-allowed; }

/* ---------- panier vide ---------- */
.pn26-vide { text-align: center; background: #fff; border: 1px solid var(--pn-ligne); border-radius: 14px; padding: 44px 24px; margin: 0 0 28px; }
.pn26-vide > i { font-size: 44px; color: var(--pn-orange); margin-bottom: 10px; }
main.pn26-page .pn26-vide h2 { font-size: 24px; font-weight: 600; text-transform: none; margin: 0 0 6px; padding: 0; text-align: center; }
.pn26-vide p { color: var(--pn-txt-l); margin: 0 0 20px; }
.pn26-vide-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---------- 2 colonnes : articles | récapitulatif ---------- */
.pn26 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 370px); gap: 28px; align-items: start; margin: 0 0 32px; }

.pn26-articles { display: flex; flex-direction: column; gap: 10px; min-width: 0; margin: 0; }
.pn26-ligne { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto 110px 36px; gap: 16px; align-items: center; background: #fff; border: 1px solid var(--pn-ligne); border-radius: 12px; padding: 12px 14px; }
.pn26-img { position: relative; width: 76px; height: 76px; border-radius: 8px; background: var(--pn-creme); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pn26-img img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; background: var(--pn-creme); }
.pn26-img i { position: absolute; color: #cbbfae; font-size: 26px; }
.pn26-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pn26-nom { color: var(--pn-txt); font-weight: 600; text-decoration: none; line-height: 1.35; }
.pn26-nom:hover { color: var(--pn-orange-d); }
.pn26-remarque { font-size: 13px; color: #4a443c; }
.pn26-ref { font-size: 12.5px; color: var(--pn-txt-l); }
.pn26-qte { display: flex; align-items: center; gap: 6px; }
.pn26-qte-label { font-size: 12px; color: var(--pn-txt-l); }
main.pn26-page .pn26-qte select { height: 42px; min-width: 72px; padding: 0 8px; border: 1.5px solid var(--pn-ligne); border-radius: 8px; background: #fff; font: inherit; font-size: 15px; font-weight: 600; color: var(--pn-txt); cursor: pointer; }
main.pn26-page .pn26-qte select:focus { outline: none; border-color: var(--pn-orange); }
.pn26-qte-fixe { font-size: 14px; font-weight: 600; }
/* vente au mètre : − longueur + */
.pn26-metre { display: inline-flex; align-items: stretch; height: 42px; border: 1.5px solid var(--pn-ligne); border-radius: 8px; overflow: hidden; background: #fff; }
.pn26-metre button { width: 32px; border: 0; padding: 0; background: var(--pn-creme); font: inherit; font-size: 18px; color: var(--pn-txt); cursor: pointer; }
.pn26-metre button:hover { background: var(--pn-sable); color: var(--pn-orange-d); }
main.pn26-page .pn26-metre input { width: 58px; height: auto; margin: 0; padding: 0; border: 0; border-left: 1px solid var(--pn-ligne); border-right: 1px solid var(--pn-ligne); border-radius: 0; text-align: center; font: inherit; font-size: 15px; font-weight: 600; color: var(--pn-txt); background: #fff; }
main.pn26-page .pn26-metre input:focus { outline: none; background: #fff8ee; }
.pn26-unite { font-size: 13px; color: var(--pn-txt-l); }
.pn26-prix { text-align: right; font-size: 17px; font-weight: 700; white-space: nowrap; }
.pn26-prix small { display: block; font-size: 11.5px; font-weight: 500; color: var(--pn-txt-l); }
.pn26-suppr { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--pn-txt-l); text-decoration: none; transition: background .15s, color .15s; }
.pn26-suppr:hover { background: #fdecea; color: var(--pn-rouge); }

/* ---------- récapitulatif ---------- */
.pn26-recap { position: sticky; top: 150px; background: #fff; border: 1px solid var(--pn-ligne); border-radius: 14px; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
main.pn26-page .pn26-recap h2 { font-size: 20px; font-weight: 600; text-transform: none; margin: 0; padding: 0; text-align: left; }
.pn26-totaux { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.pn26-totaux > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14.5px; }
.pn26-totaux dt { color: #4a443c; font-weight: 400; margin: 0; }
.pn26-totaux dt small { display: block; font-size: 12px; color: var(--pn-txt-l); }
.pn26-totaux dd { margin: 0; white-space: nowrap; font-weight: 500; }
.pn26-moins dd { color: var(--pn-vert); }
.pn26-sous-total { border-top: 1px solid var(--pn-ligne); padding-top: 8px; margin-top: 2px; }
.pn26-total { border-top: 2px solid var(--pn-txt); padding-top: 10px; margin-top: 4px; }
.pn26-totaux .pn26-total dt, .pn26-totaux .pn26-total dd { font-size: 20px; font-weight: 700; color: var(--pn-txt); }
.pn26-mini { margin: -6px 0 0; font-size: 13px; color: var(--pn-rouge); text-align: center; }
.pn26-info-bloc, .pn26-fidelite { display: flex; gap: 10px; margin: 0; padding: 10px 12px; border-radius: 10px; font-size: 13.5px; line-height: 1.45; }
.pn26-info-bloc { background: var(--pn-creme); }
.pn26-fidelite { background: #fff8ee; border: 1px solid #f0d3b4; }
.pn26-info-bloc i, .pn26-fidelite i { color: var(--pn-orange); margin-top: 3px; }
.pn26-promo { margin: 0; }
.pn26-promo label { display: block; font-size: 13px; font-weight: 600; margin: 0 0 5px; width: auto; float: none; }
.pn26-promo > div { display: flex; gap: 8px; }
main.pn26-page .pn26-promo input { flex: 1; min-width: 0; height: 42px; padding: 0 12px; border: 1.5px solid var(--pn-ligne); border-radius: 8px; font: inherit; font-size: 15px; text-transform: uppercase; }
main.pn26-page .pn26-promo input:focus { outline: none; border-color: var(--pn-orange); }
main.pn26-page .pn26-promo button { height: 42px; padding: 0 14px; border: 1.5px solid var(--pn-ligne); border-radius: 8px; background: #fff; font: inherit; font-size: 14px; font-weight: 600; color: var(--pn-txt); cursor: pointer; }
main.pn26-page .pn26-promo button:hover { border-color: var(--pn-orange); color: var(--pn-orange-d); }
.pn26-reassur { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--pn-ligne); display: flex; flex-direction: column; gap: 7px; font-size: 13px; }
.pn26-reassur i { color: var(--pn-orange); width: 18px; text-align: center; margin-right: 6px; }
.pn26-reassur a { color: var(--pn-txt); }
.pn26-paypal { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "logo texte" "logo lien"; gap: 2px 12px; align-items: center; padding: 12px 14px; border-radius: 10px; background: #eef4fc; border: 1.5px solid #b9d0ee; color: #003087; text-decoration: none; transition: border-color .15s, background .15s; }
.pn26-paypal:hover { background: #e3edfa; border-color: #0070ba; color: #003087; }
.pn26-pp-logo { grid-area: logo; font-family: Verdana, Arial, sans-serif; font-size: 19px; font-weight: 700; font-style: italic; letter-spacing: -.5px; color: #003087; background: #fff; border-radius: 8px; padding: 8px 10px; }
.pn26-pp-logo span { color: #009cde; }
.pn26-paypal .pn26-pp-texte { grid-area: texte; font-size: 14px; line-height: 1.35; }
.pn26-paypal b { display: block; font-size: 16px; font-weight: 700; color: #003087; }
.pn26-paypal em { grid-area: lien; font-style: normal; font-size: 13px; font-weight: 600; color: #0070ba; }
.pn26-paypal em i { font-size: 11px; margin-left: 2px; }

/* ---------- aide ---------- */
.pn26-aide { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.pn26-aide > a { display: flex; flex-direction: column; gap: 3px; background: #fff; border: 1px solid var(--pn-ligne); border-radius: 12px; padding: 16px 18px; text-decoration: none; color: var(--pn-txt); transition: border-color .15s; }
.pn26-aide > a:hover { border-color: var(--pn-orange); }
.pn26-aide i { color: var(--pn-orange); font-size: 20px; margin-bottom: 4px; }
.pn26-aide b { font-size: 15px; }
.pn26-aide small { color: var(--pn-txt-l); font-size: 13px; line-height: 1.45; }
.pn26-promo-vide { background: #fff; border: 1px solid var(--pn-ligne); border-radius: 12px; padding: 16px 18px; }
.pn26-promo-vide label i { color: var(--pn-orange); margin-right: 4px; }

/* ---------- barre fixe mobile ---------- */
.pn26-barre { display: none; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
    .pn26 { grid-template-columns: minmax(0, 1fr); }
    .pn26-recap { position: static; }
}
@media (max-width: 700px) {
    main.pn26-page section#contenu { padding: 10px 16px 40px; }
    main.pn26-page h1 { font-size: 24px; }
    /* ligne d'article : image | infos, puis quantité / prix / suppression en dessous */
    .pn26-ligne { grid-template-columns: 64px minmax(0, 1fr) auto 36px; grid-template-areas: "img info info suppr" "img qte prix prix"; gap: 8px 12px; padding: 12px; }
    .pn26-img { grid-area: img; width: 64px; height: 64px; align-self: start; }
    .pn26-info { grid-area: info; }
    .pn26-suppr { grid-area: suppr; align-self: start; }
    .pn26-qte { grid-area: qte; }
    .pn26-prix { grid-area: prix; }
    .pn26-barre { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 850; background: #fff; border-top: 1px solid #e3dccf; box-shadow: 0 -4px 16px rgba(0,0,0,.08); padding: 10px 16px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); gap: 14px; align-items: center; font-family: 'Poppins', Arial, sans-serif; visibility: hidden; opacity: 0; transition: opacity .2s, visibility .2s; }
    .pn26-barre.visible { visibility: visible; opacity: 1; }
    body.h26-tabbar-present .pn26-barre { bottom: 62px; padding-bottom: 10px; }
    .pn26-barre > div { display: flex; flex-direction: column; line-height: 1.1; min-width: 100px; }
    .pn26-barre small { color: #7a7268; font-size: 11px; }
    .pn26-barre b { font-size: 20px; color: #3d3d3d; }
    .pn26-barre .pn26-btn { flex: 1; min-height: 46px; padding: 11px 12px; font-size: 15px; }
}

/* Frais de port payants : montant minimum (le transporteur choisi ensuite peut s'y ajouter) */
main.pn26-page .pn26-apartir { font-size: 12px; font-weight: 400; color: var(--pn-txt-l); }

/* Lien vers la page de réassurance « Commander en confiance » */
main.pn26-page .pn26-confiance { text-align: center; margin: 10px 0 12px; }
main.pn26-page .pn26-confiance a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: 1.5px solid var(--pn-orange); border-radius: 99px; color: var(--pn-orange-d); font-size: 14px; font-weight: 600; text-decoration: none; transition: background .15s, color .15s; }
main.pn26-page .pn26-confiance a:hover { background: var(--pn-orange); color: #fff; }