/* Takoori - Page panier 100% codee. HTML entierement construit par nous (cart-coded.php),
les seules classes "natives" WooCommerce restantes sont fonctionnelles (remove, qty,
coupon_code, apply_coupon, update_cart) pour que le JS AJAX de WooCommerce continue de
les cibler. Aucun heritage de markup table/Astra a neutraliser : CSS Grid pour les
lignes d'article, comportement responsive predictible a chaque palier. */
body.tk-coded-page.woocommerce-cart,
body.tk-coded-page.woocommerce-cart #page,
body.tk-coded-page.woocommerce-cart .site-content,
body.tk-coded-page.woocommerce-cart .ast-container { background: #fff !important; }
body.tk-coded-page.woocommerce-cart { overflow-x: hidden; }
.tk-cart-coded.tk-coded-wrap {
max-width: 1560px; margin: 0 auto; padding: 28px 32px 64px;
font-family: var(--tk-body); color: var(--tk-ink);
}
.tk-cart-coded .woocommerce-breadcrumb {
font-family: var(--tk-body); font-size: 13px; color: var(--tk-ink-2); margin-bottom: 18px;
}
.tk-cart-coded .woocommerce-breadcrumb a { color: var(--tk-ink-2); text-decoration: none; }
.tk-cart-coded .woocommerce-breadcrumb a:hover { color: var(--tk-accent); }
.tk-cart-title {
font-family: var(--tk-display); font-size: 32px; font-weight: 800; color: var(--tk-ink);
margin: 0 0 24px;
}
/* ---------- Notices ---------- */
.tk-cart-coded .woocommerce-notices-wrapper:empty { display: none; }
.tk-cart-coded .woocommerce-message,
.tk-cart-coded .woocommerce-error,
.tk-cart-coded .woocommerce-info {
list-style: none; margin: 0 0 16px; padding: 14px 16px; border-radius: var(--tk-radius-sm);
font-family: var(--tk-body); font-size: 14px; display: flex; align-items: center;
justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
/* Icone police WooCommerce (::before) retiree -- prevue avec un padding-gauche reserve
dans le CSS natif, absent ici (design uniforme), donc elle se posait sur le texte
("Panier mis a jour" -> icone collee sur "Pa"). Aucune icone de police heritee
ailleurs sur cette page codee -- coherent de la retirer plutot que de recreer l'espace. */
.tk-cart-coded .woocommerce-message::before,
.tk-cart-coded .woocommerce-error::before,
.tk-cart-coded .woocommerce-info::before {
content: none !important;
}
.tk-cart-coded .woocommerce-message { background: var(--tk-tint); color: var(--tk-ink); border: 1px solid rgba(13,110,99,.18); }
.tk-cart-coded .woocommerce-error,
.tk-cart-coded .woocommerce-info { background: var(--tk-tint); color: var(--tk-ink); border: 1px solid rgba(13,110,99,.18); }
.tk-cart-coded .woocommerce-error { background: #fdecec; color: var(--tk-danger); border-color: rgba(176,0,32,.25); }
.tk-cart-coded .woocommerce-message .button,
.tk-cart-coded .woocommerce-error .button {
background: var(--tk-cta); color: #fff; border: none; border-radius: var(--tk-radius-sm);
padding: 8px 16px; font-weight: 700; font-size: 13px; text-decoration: none;
}
/* ---------- Panier vide ---------- */
.tk-cart-empty { padding: 40px 0; }
.tk-cart-empty p { font-family: var(--tk-body); font-size: 16px; color: var(--tk-ink-2); margin: 0 0 16px; }
.tk-cart-empty-cta {
display: inline-block; background: var(--tk-cta); color: #fff; text-decoration: none;
padding: 12px 24px; border-radius: var(--tk-radius-sm); font-weight: 700; font-size: 14px;
}
/* ---------- Layout general ---------- */
.tk-cart-body { display: grid; grid-template-columns: 1fr 460px; gap: 48px; align-items: start; }
.tk-cart-form { min-width: 0; }
.tk-cart-totals { min-width: 0; }
/* ---------- Ligne d'article (CSS Grid, pas de flex-wrap imprevisible) ---------- */
.tk-cart-items { display: flex; flex-direction: column; }
.tk-cart-item {
display: grid;
grid-template-columns: 84px 1fr 120px 100px 32px;
grid-template-areas: "img info qty subtotal remove";
align-items: center; column-gap: 16px; row-gap: 8px;
padding: 20px 4px; border-bottom: 1px solid var(--tk-line);
position: relative;
}
.tk-cart-item-img { grid-area: img; display: block; }
.tk-cart-item-img img {
width: 84px; height: 84px; object-fit: cover; border-radius: var(--tk-radius-sm);
border: 1px solid var(--tk-line); display: block;
}
.tk-cart-item-info { grid-area: info; min-width: 0; }
.tk-cart-item-name {
font-family: var(--tk-body); font-size: 14.5px; font-weight: 600; color: var(--tk-ink);
text-decoration: none; line-height: 1.4; display: inline-block;
}
.tk-cart-item-name:hover { color: var(--tk-accent); }
.tk-cart-item-attrs {
margin-top: 6px; font-size: 12.5px; color: var(--tk-ink-2);
display: flex; flex-wrap: wrap; column-gap: 10px; row-gap: 2px;
}
.tk-cart-item-attrs strong { font-weight: 600; color: var(--tk-ink-2); }
.tk-cart-item-unit-price {
margin-top: 6px; font-family: var(--tk-body); font-size: 12.5px; color: var(--tk-ink-2);
}
.tk-cart-item-qty { grid-area: qty; }
.tk-cart-item-qty .quantity { display: flex; align-items: center; }
.tk-cart-item-qty input.qty {
width: 60px; text-align: center; padding: 8px 4px; border: 1px solid var(--tk-line);
border-radius: var(--tk-radius-sm); font-family: var(--tk-body); font-size: 14px;
}
.tk-cart-item-subtotal {
grid-area: subtotal; text-align: right; font-family: var(--tk-body); font-weight: 800;
font-size: 15px; color: var(--tk-ink);
}
.tk-cart-item-remove {
grid-area: remove; display: flex; align-items: center; justify-content: center;
width: 30px; height: 30px; border-radius: 50%; background: var(--tk-tint);
color: var(--tk-ink-2); font-size: 18px; text-decoration: none; line-height: 1;
justify-self: end;
}
.tk-cart-item-remove:hover { background: #fdecec; color: var(--tk-danger); }
/* ---------- Actions (coupon + mettre a jour) ---------- */
.tk-cart-actions {
display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; padding: 18px 4px 0;
border-top: 1px solid var(--tk-line); margin-top: 4px;
}
/* nowrap : a certaines largeurs intermediaires (~1000-1280px), le wrap interne du
groupe coupon cassait "Appliquer le code promo" tout seul sur une ligne, entre
le champ et "Mettre a jour le panier" -- ordre visuel incoherent (10/08, verif
7 paliers). Le groupe entier bascule desormais en bloc via le wrap du parent
.tk-cart-actions (deja en place), jamais en scindant ses propres enfants. */
/* "Appliquer le code" (raccourci de "...code promo" le 10/08) libere assez de place
pour retenir un min-width plus modeste -- avant, meme en nowrap, le texte plus long
forcait un min-width 420px qui ecrasait "Mettre a jour le panier" a certaines largeurs. */
.tk-cart-coupon { display: flex; flex-wrap: nowrap; gap: 8px; flex: 1 1 320px; min-width: 350px; }
.tk-cart-coupon-btn { flex-shrink: 0; }
.tk-cart-coupon-input {
flex: 1; min-width: 160px; padding: 10px 12px !important; border: 1px solid var(--tk-line) !important;
border-radius: var(--tk-radius-sm) !important; font-family: var(--tk-body) !important; font-size: 14px !important;
}
.tk-cart-coupon-btn,
.tk-cart-update-btn {
padding: 10px 18px; border: 1px solid var(--tk-line); background: #fff; color: var(--tk-ink);
border-radius: var(--tk-radius-sm); font-family: var(--tk-body); font-weight: 700; font-size: 13.5px;
cursor: pointer; white-space: nowrap; flex: none;
}
/* !important necessaire : Astra a une regle globale button:hover qui remplit le fond en
bordeaux (#A7244E) + texte blanc -- on ne surchargeait que border-color/color, jamais
background-color, donc le bordeaux d'Astra passait quand meme au survol (10/08,
constat Joffrey). */
.tk-cart-coupon-btn:hover, .tk-cart-coupon-btn:focus,
.tk-cart-update-btn:hover, .tk-cart-update-btn:focus {
border-color: var(--tk-accent) !important; color: var(--tk-accent) !important;
background-color: #fff !important;
}
.tk-cart-coded .coupon-error-notice,
.tk-cart-coded .coupon-success-notice {
flex-basis: 100%; margin: 4px 0 0; padding: 10px 12px; border-radius: var(--tk-radius-sm);
font-family: var(--tk-body); font-size: 13.5px;
}
.tk-cart-coded .coupon-error-notice { background: #fdecec; color: var(--tk-danger); }
.tk-cart-coded .coupon-success-notice { background: var(--tk-tint); color: var(--tk-ink); }
/* ---------- Colonne totaux (sticky, lignes flex maison) ---------- */
.tk-cart-totals { position: sticky; top: 24px; }
.tk-cart-totals {
background: var(--tk-tint); border-radius: var(--tk-radius); padding: 24px;
border: 1px solid rgba(13,110,99,.15);
}
.tk-cart-totals h2 {
font-family: var(--tk-display); font-size: 19px; font-weight: 800; color: var(--tk-ink);
margin: 0 0 16px;
}
.tk-cart-totals-row {
display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
padding: 10px 0; border-bottom: 1px solid rgba(13,110,99,.15);
font-family: var(--tk-body); font-size: 14px;
}
.tk-cart-totals-row > span:first-child { flex: 0 0 auto; font-weight: 600; color: var(--tk-ink); }
.tk-cart-totals-row > span:last-child { text-align: right; color: var(--tk-ink); }
.tk-cart-totals-total { font-weight: 800; font-size: 17px; border-bottom: none; padding-top: 14px; }
.tk-cart-totals-total > span { font-weight: 800; }
.tk-cart-totals-shipping ul#shipping_method { list-style: none; margin: 0; padding: 0; text-align: right; }
.tk-cart-totals-shipping ul#shipping_method li { margin: 0 0 4px; }
.tk-cart-totals-shipping .woocommerce-shipping-destination { font-size: 12.5px; color: var(--tk-ink-2); margin: 4px 0 0; }
/* ---------- Reassurance (meme contenu que la fiche produit codee, cf tk-fiche-coded.r14
.tk-coded-reassurance) -- colonne etroite (380-480px) donc empile verticalement plutot
qu'en ligne comme sur la fiche produit. */
/* Continuer mes achats (10/08, demande Joffrey -- absent quand le panier n'est pas
vide, seul le panier vide avait ce lien). */
.tk-cart-continue { margin-bottom: 16px; }
.tk-cart-continue a {
font-family: var(--tk-body); font-size: 13.5px; font-weight: 600; color: var(--tk-ink-2);
text-decoration: none;
}
.tk-cart-continue a:hover { color: var(--tk-accent); }
/* Statut stock par ligne (10/08) -- meme convention de classes que la fiche produit
codee (tk-fiche-coded.r14.css .tk-stock-info), reprise ici pour coherence visuelle
inter-pages meme si les fichiers CSS restent separes. */
.tk-cart-item-stock {
display: flex; align-items: center; gap: 8px; margin-top: 4px;
font-family: var(--tk-body); font-size: 11.5px; flex-wrap: wrap;
}
.tk-cart-item-stock .tk-stock-info__label { font-weight: 700; color: var(--tk-stock); }
.tk-cart-item-stock.tk-stock-backorder .tk-stock-info__label { color: var(--tk-star); }
.tk-cart-item-stock.tk-stock-out .tk-stock-info__label { color: var(--tk-danger); }
.tk-cart-item-stock .tk-stock-info__delivery { color: var(--tk-ink-2); }
/* Barre de livraison gratuite (10/08, seuil reconfigure a 100€ le meme jour). */
.tk-cart-freeship { margin-bottom: 16px; }
.tk-cart-freeship-msg {
margin: 0 0 8px; font-family: var(--tk-body); font-size: 13px; color: var(--tk-ink-2);
}
.tk-cart-freeship-msg strong { color: var(--tk-ink); font-weight: 700; }
.tk-cart-freeship-msg--done { color: var(--tk-stock); font-weight: 600; }
.tk-cart-freeship-bar {
height: 6px; background: rgba(13,110,99,.12); border-radius: 999px; overflow: hidden;
}
.tk-cart-freeship-fill {
height: 100%; background: var(--tk-accent); border-radius: 999px; transition: width .3s ease;
}
/* Chips blancs plutot que texte nu -- sur le fond teinte (tint) de la colonne totaux, du
texte + icone vert de la meme famille de couleur que le fond restait plat, sans relief
(constat Joffrey 10/08, 2 iterations avant celle-ci). Le blanc cree un vrai contraste et
reprend le langage pilule deja utilise sur cette meme carte (toggle Alma 2X/3X/4X). */
.tk-cart-reassurance {
display: flex; flex-direction: column; gap: 8px; margin-top: 16px; padding-top: 16px;
border-top: 1px solid rgba(13,110,99,.15);
}
/* Ligne 1 : une pilule a gauche, une a droite (space-between). Ligne 2 : la 3e pilule
seule, centree en dessous (demande Joffrey 10/08, plus equilibre que 3 pilules
collees a gauche en flex-wrap). */
.tk-cart-reassurance-row { display: flex; justify-content: space-between; gap: 8px; }
.tk-cart-reassurance-row--center { justify-content: center; }
.tk-cart-reassurance span {
display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
background: #fff; border: 1px solid rgba(13,110,99,.14); border-radius: 999px;
padding: 7px 13px 7px 11px; box-shadow: 0 1px 2px rgba(13,110,99,.06);
font-family: var(--tk-body); font-size: 12px; font-weight: 600; color: var(--tk-ink);
}
.tk-cart-reassurance svg { color: var(--tk-accent); flex-shrink: 0; }
.tk-cart-proceed { margin-top: 18px; }
.tk-cart-proceed a.checkout-button {
display: block; text-align: center; background: var(--tk-cta); color: #fff !important;
text-decoration: none; padding: 15px; border-radius: var(--tk-radius-sm);
font-family: var(--tk-body); font-weight: 700; font-size: 15.5px; transition: background .15s;
}
.tk-cart-proceed a.checkout-button:hover { background: var(--tk-cta-h); }
/* Apple Pay / Google Pay cote a cote (16/08, harmonisation avec le fix fiche produit du
meme jour). Widget natif WooCommerce/Stripe : min-width:260px par defaut sur chaque
bouton -> 2 x 260px depasse la largeur de la colonne totaux (410px) -> flex-wrap force
un retour a la ligne (empiles). Meme cause/meme fix que tk-fiche-coded.r18.css : plancher
reduit + nowrap explicite, jamais 0 (evite aussi le risque de gel a hauteur 0 au montage
deja rencontre sur la fiche). */
#wc-stripe-express-checkout-element { flex-wrap: nowrap !important; }
#wc-stripe-express-checkout-element > div { flex: 1 1 130px !important; min-width: 130px !important; }
/* Calculateur de livraison (si actif) */
.tk-cart-totals .shipping-calculator-form { margin-top: 10px; text-align: left; }
.tk-cart-totals .shipping-calculator-form p { margin: 0 0 8px; }
.tk-cart-totals .shipping-calculator-form select,
.tk-cart-totals .shipping-calculator-form input[type="text"] {
width: 100%; padding: 9px 10px; border: 1px solid var(--tk-line); border-radius: var(--tk-radius-sm);
font-family: var(--tk-body); font-size: 13.5px;
}
.tk-cart-totals .shipping-calculator-button { color: var(--tk-accent); font-size: 13px; text-decoration: underline; }
/* ---------- Cross-sells ---------- */
.tk-cross-sells:empty { display: none; }
.tk-cross-sells h2 { font-family: var(--tk-display); font-size: 20px; font-weight: 800; margin: 0 0 16px; }
.tk-cross-sells ul.products {
display: grid; grid-template-columns: 1fr; gap: 14px; list-style: none; margin: 0; padding: 0;
}
.tk-cross-sells ul.products li.product {
border: 1px solid var(--tk-line); border-radius: var(--tk-radius); overflow: hidden;
transition: box-shadow .15s;
}
.tk-cross-sells ul.products li.product:hover { box-shadow: var(--tk-card-sh); }
.tk-cross-sells ul.products img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.tk-cross-sells ul.products .woocommerce-loop-product__title {
font-family: var(--tk-body); font-size: 13.5px; font-weight: 600; padding: 10px 12px 0; margin: 0;
color: var(--tk-ink);
}
.tk-cross-sells ul.products .price {
font-family: var(--tk-body); font-weight: 800; font-size: 14px; padding: 4px 12px 12px; color: var(--tk-ink);
}
/* ============================================================================
RESPONSIVE - meme echelle a 7 paliers que la fiche produit codee.
>1600 tres grand ecran 2 col (1fr/480px)
1600 grand desktop 2 col (1fr/460px)
1280 desktop 2 col (1fr/440px)
1024 petit desktop 2 col (1fr/400px)
900 tablette 1 col (empile)
600 tablette portrait 1 col, grille article 2 lignes (img+info+suppr / qte+s-total)
430 mobile 1 col compact
============================================================================ */
@media (min-width: 1601px) {
.tk-cart-body { grid-template-columns: 1fr 480px; gap: 56px; }
}
@media (max-width: 1600px) {
.tk-cart-coded.tk-coded-wrap { padding: 26px 28px 60px; }
.tk-cart-body { grid-template-columns: 1fr 460px; gap: 48px; }
}
@media (max-width: 1280px) {
.tk-cart-coded.tk-coded-wrap { padding: 24px 22px 56px; }
.tk-cart-body { grid-template-columns: 1fr 440px; gap: 40px; }
}
@media (max-width: 1024px) {
.tk-cart-body { grid-template-columns: 1fr 400px; gap: 32px; }
.tk-cart-title { font-size: 29px; }
.tk-cart-item { grid-template-columns: 76px 1fr 110px 90px 30px; column-gap: 12px; }
}
@media (max-width: 900px) {
.tk-cart-body { grid-template-columns: 1fr; }
.tk-cart-totals { position: static; max-width: 460px; }
.tk-cart-item { grid-template-columns: 84px 1fr 120px 100px 32px; column-gap: 16px; }
}
@media (max-width: 600px) {
.tk-cart-coded.tk-coded-wrap { padding: 20px 16px 48px; }
.tk-cart-title { font-size: 26px; }
.tk-cart-totals { max-width: 100%; }
.tk-cart-item {
grid-template-columns: 72px 1fr 32px;
/* subtotal etait mappe sur la seule 3e colonne (32px, prevue pour le bouton x) --
"1553,00 €" y debordait hors viewport (constat 10/08 en verifiant les 7 paliers).
Qty passe sous l'image (colonne 1, assez large pour le stepper 60px), subtotal
recupere les 2 colonnes restantes (1fr + 32px) pour avoir la place d'exister. */
grid-template-areas:
"img info remove"
"qty subtotal subtotal";
row-gap: 10px; padding: 18px 4px;
}
.tk-cart-item-img img { width: 72px; height: 72px; }
.tk-cart-item-unit-price { margin-top: 4px; font-size: 13px; }
.tk-cart-item-subtotal { text-align: right; align-self: center; }
.tk-cart-item-qty { align-self: center; }
.tk-cart-actions { flex-direction: column; align-items: stretch; }
.tk-cart-coupon { flex-direction: column; flex: none; min-width: 0; }
.tk-cart-coupon-input,
.tk-cart-coupon-btn,
.tk-cart-update-btn { width: 100%; box-sizing: border-box; flex: none; }
}
@media (max-width: 430px) {
.tk-cart-coded.tk-coded-wrap { padding: 16px 12px 40px; }
.tk-cart-title { font-size: 22px; }
.tk-cart-item { grid-template-columns: 64px 1fr 28px; column-gap: 10px; }
.tk-cart-item-img img { width: 64px; height: 64px; }
.tk-cart-item-name { font-size: 13.5px; }
.tk-cart-totals { padding: 18px; }
.tk-cart-totals h2 { font-size: 17px; }
}