/* ============================================================
   Epicopi — habillage de la boutique en ligne (Oscar / Bootstrap 4)
   Reprend les tokens de couleur/typo de la page d'accueil (home.html)
   sans toucher au balisage Bootstrap 4 / JS d'Oscar (data-toggle, etc.)
   ============================================================ */

:root {
  --bg:           #F2F3FB;
  --bg2:          #DEE2F7;
  --surface:      #FFFFFF;
  --surface2:     #E7EBFB;
  /* Bleu du logo — couleur de marque principale (boutons/liens) */
  --accent:       #006F9E;
  --accent-dk:    #00567D;
  --accent-soft:  rgba(0,111,158,.10);
  --accent-line:  rgba(0,111,158,.25);
  --sage:         #4C8C6E;
  --amber:        #D98C2B;
  --amber-soft:   rgba(217,140,43,.14);
  /* Jaune du logo — CTA sur fond sombre */
  --yellow:       #F6EE31;
  --yellow-dk:    #E0D400;
  /* Rose du logo — boutons secondaires */
  --pink:         #D6017D;
  --pink-dk:      #BF016E;
  --pink-soft:    rgba(214,1,125,.12);
  --fg:           #2B211B;
  --fg2:          #3A2E24;
  --muted:        #6B5B4C;
  --border:       rgba(43,33,27,.12);
  --border-s:     rgba(43,33,27,.18);
  /* Bleu nuit dérivé de --accent/--accent-dk (au lieu du brun quasi noir précédent) */
  --dark-bg:      #0D2530;
  --dark-fg:      #EAF4F8;
  --dark-muted:   rgba(234,244,248,.65);
  --font-display: 'Bricolage Grotesque', Georgia, sans-serif;
  --font-body:    'Nunito', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;
  --radius-card:  16px;
  --radius-pill:  999px;
  --maxw:         1140px;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.footer { margin-top: auto; }
.page .page_inner { background: var(--bg); box-shadow: none; border-radius: 0; }
h1, h2, h3, h4, .page-header h1 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--fg);
}
a { color: var(--accent-dk); }
a:hover { color: var(--accent); }

/* ── Top account bar ─────────────────────────────────────── */
.navbar.accounts.bg-light {
  background: var(--bg2) !important;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.navbar.accounts .nav-link { color: var(--muted) !important; }
.navbar.accounts .nav-link:hover { color: var(--accent-dk) !important; }
.navbar.accounts .navbar-toggler { display: none; }
.navbar.accounts .navbar-collapse { display: block !important; height: auto !important; }

/* ── Header / brand ──────────────────────────────────────── */
.header.container { background: var(--bg); padding-top: 18px; padding-bottom: 6px; }
.checkout-steps-header { padding: 24px 0 4px; }
.header .h1 a {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--fg) !important;
  text-decoration: none;
  font-size: 26px;
}
.header .h1 small { color: var(--muted); font-family: var(--font-body); font-size: 13px; margin-left: 8px; }
.basket-mini { color: var(--muted); }
.mini-basket-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--surface2); color: var(--fg);
  transition: background .2s, color .2s;
}
.mini-basket-btn:hover { background: var(--accent-soft); color: var(--accent-dk); }
.mini-basket-icon { width: 22px; height: 22px; }
.mini-basket-count {
  position: absolute; top: -2px; right: -2px;
  min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 999px; background: var(--pink); color: #fff;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; line-height: 1;
  border: 2px solid var(--surface);
}

/* ── Primary nav (categories) ────────────────────────────── */
.navbar.navbar-dark.bg-dark {
  background: var(--accent) !important;
  border-radius: var(--radius-card);
  margin: 10px 0 28px;
}
.navbar.navbar-dark .nav-link,
.navbar.navbar-dark .navbar-toggler-icon { color: #fff !important; }
.navbar.navbar-dark .dropdown-menu {
  background: var(--surface);
  border: 1px solid var(--border-s);
  border-radius: var(--radius-card);
}
.navbar.navbar-dark .dropdown-item { color: var(--fg); }
.navbar.navbar-dark .dropdown-item:hover { background: var(--accent-soft); color: var(--accent-dk); }

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: 600;
  white-space: nowrap;
}
.btn-primary, .btn-success {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}
.btn-primary:hover, .btn-success:hover {
  background-color: var(--accent-dk) !important;
  border-color: var(--accent-dk) !important;
}
.btn-secondary, .btn-outline-secondary {
  background-color: transparent !important;
  border-color: var(--border-s) !important;
  color: var(--fg) !important;
}
.btn-secondary:hover, .btn-outline-secondary:hover {
  background-color: var(--accent-soft) !important;
  border-color: var(--accent-line) !important;
  color: var(--accent-dk) !important;
}
/* Boutons du header partagé (website/components/header.html) — classes du site
   vitrine (pas des classes Bootstrap), voir home.html pour les originaux */
.btn-outline {
  background: transparent;
  border: 1.5px solid var(--pink);
  color: var(--pink);
  text-decoration: none;
}
.btn-outline:hover { background: var(--pink); border-color: var(--pink); color: #fff; }

/* ── En-tête partagé (website/components/header.html) ────────────────────
   Mêmes règles que home.html, pour que la boutique ait exactement la même
   navigation que le site vitrine. ── */
header.nav {
  display: block;
  position: sticky; top: 0; z-index: 100;
  background: var(--surface);
  border-bottom: 1px solid var(--border-s);
}
.nav-inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: 0 clamp(20px,4vw,48px);
  height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo img { height: 54px; width: auto; max-width: none; display: block; flex-shrink: 0; }
.logo-sub {
  font-family: var(--font-mono); font-size: 10px; color: var(--muted);
  letter-spacing: .06em; text-transform: uppercase;
}
.nav-links { display: flex; align-items: center; gap: 26px; list-style: none; }
.nav-links a {
  font-family: var(--font-body); font-size: 14px; font-weight: 500;
  color: var(--muted); text-decoration: none; transition: color .2s;
  white-space: nowrap;
}
.nav-links a:hover { color: var(--fg); }
.nav-locations {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 12px; color: var(--fg);
  white-space: nowrap;
}
.nav-right { display: flex; align-items: center; gap: 22px; }
/* CTA du menu — rose du logo, pour se distinguer du bleu utilisé comme action
   principale ailleurs (panier, checkout, formulaires) */
.nav-right .btn-primary {
  background-color: var(--pink) !important;
  border-color: var(--pink) !important;
  color: #fff !important;
}
.nav-right .btn-primary:hover {
  background-color: var(--pink-dk) !important;
  border-color: var(--pink-dk) !important;
}
/* Même taille sur la boutique (styles.css) et le site vitrine (site.css) : le
   bouton prenait la taille de .btn propre à chaque feuille de style. */
.nav-right .btn-help {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-size: 18px; font-weight: 600; line-height: 26px;
  letter-spacing: 0; padding: 10px 17px; border: 1px solid var(--pink);
}
.btn-help-icon { display: none; }
/* ← Sur mobile, le libellé complet ("Besoin d'aide ?") prend trop de place à côté
   du panier et du burger — le bouton devient un rond avec juste l'icône téléphone,
   comme le panier juste à côté. */
@media (max-width: 600px) {
  .btn-help {
    width: 44px; height: 44px; padding: 0 !important;
    border-radius: 50% !important;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .btn-help-text { display: none; }
  .btn-help-icon { display: block; }
}
.nav-burger {
  display: none; background: none; border: none; cursor: pointer;
  padding: 4px; flex-direction: column; gap: 5px;
}
.nav-burger span { display: block; width: 22px; height: 1.5px; background: var(--fg); }
.nav-mobile {
  display: none; flex-direction: column;
  background: var(--surface); border-bottom: 1px solid var(--border-s);
}
.nav-mobile a {
  display: block; padding: 14px clamp(20px,4vw,48px);
  font-family: var(--font-body); font-size: 14px; font-weight: 500;
  color: var(--muted); text-decoration: none; border-top: 1px solid var(--border);
}
.nav-mobile.open { display: flex; }

@media (max-width: 1250px) {
  .nav-links, .nav-locations, .nav-boutique-btn { display: none; }
  .nav-burger { display: flex; }
}

.container.page { max-width: var(--maxw); }

/* ── Breadcrumb / page header ────────────────────────────── */
.breadcrumb { background: transparent; padding-left: 0; font-size: 13px; color: var(--muted); }
.breadcrumb .active { color: var(--fg); }
.page-header h1 {
  font-size: clamp(24px, 3vw, 34px);
  position: relative; padding-bottom: 20px; margin-bottom: 4px;
}
.page-header h1::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 48px; height: 3px; border-radius: 2px; background: var(--accent);
}

.content h4 {
  font-family: var(--font-head, var(--font-body)); font-weight: 700; font-size: 15px;
}

/* ── Product grid tiles ──────────────────────────────────────────────
   Carte sobre : cadre fin + fond blanc constants, photo posée sur un fond
   neutre au format carré (pour que la grille reste alignée même quand les
   photos produit ont des proportions différentes), micro-interaction de
   survol discrète (contour + ombre légère, sans translation ni halo). */
.row.list-unstyled { align-items: flex-start; }
.row.list-unstyled > li { display: flex; margin-bottom: 28px; }
.product_pod {
  display: flex; flex-direction: column; width: 100%; height: auto; margin: 0;
  overflow: visible;
  text-align: center; padding: 20px 20px 22px;
  background: var(--surface); border: 1px solid var(--border-s);
  border-radius: var(--radius-card);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.product_pod:hover {
  border-color: var(--accent-line, var(--accent));
  box-shadow: 0 6px 20px rgba(43,33,27,.08);
}
.product_pod .image_container {
  background: var(--bg);
  border-radius: calc(var(--radius-card) - 8px);
  aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
}
.product_pod img.img-thumbnail {
  border: none;
  background: transparent;
  max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
}
.product_pod h3 { font-size: 14.5px; font-family: var(--font-body); font-weight: 600; line-height: 1.35; margin-top: 16px !important; }
.product_pod h3 a { color: var(--fg); text-decoration: none; }
.product_pod-title a {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.product_pod .product_price {
  position: static; float: none; bottom: auto;
  color: var(--accent-dk); font-weight: 600;
  margin-top: auto; padding-top: 14px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.product_pod .price_color {
  color: var(--accent-dk); font-family: var(--font-display); font-size: 19px; font-weight: 700;
}
.product_pod .product_price .btn-block {
  white-space: normal; line-height: 1.3; font-size: 13.5px;
  padding: 12px 18px; margin-top: 2px;
}

.price_color { color: var(--accent-dk); font-family: var(--font-mono); font-weight: 700; font-size: 22px; }
.basket-items .price_color { color: var(--accent-dk); }

/* ── Cards / panels used across basket, checkout, account ── */
.card {
  border: 1px solid var(--border-s);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: 0 4px 18px rgba(43,33,27,.06);
}
.card.card-body { padding: 28px; }
.card.card-body h2, .card.card-body .h4 { margin-bottom: 8px; }
.card.card-body .text-muted { margin-bottom: 24px; }
.card-body.bg-light, .bg-light { background-color: var(--bg2) !important; }
.table thead th { color: var(--muted); font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }

/* ── Panier (basket) ─────────────────────────────────────────── */
.page-header .basket-subtitle { color: var(--muted); font-size: 14px; margin-top: -6px; }
.breadcrumb-item a i { margin-right: 4px; }

.basket-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 28px; align-items: start; }
@media (max-width: 900px) { .basket-layout { grid-template-columns: 1fr; } }
.basket-side { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 16px; }

.basket-title {
  border-bottom: none; padding: 0 18px 10px;
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted);
}
.basket-items {
  background: var(--surface); border: 1px solid var(--border-s); border-radius: 12px;
  padding: 20px 18px; margin-bottom: 14px;
}
.basket-items:nth-child(even) { background: var(--surface); }
.basket-items h3 { font-size: 16px; margin-bottom: 4px; }
.basket-items .availability { font-size: 13px; }
.basket-items img.img-thumbnail { border: none; background: var(--surface2); border-radius: 10px; padding: 6px; }

.qty-stepper {
  display: flex; align-items: stretch; max-width: 140px;
  border: 1px solid var(--border-s); border-radius: 10px; overflow: hidden;
}
.qty-stepper .form-control {
  border: none; border-radius: 0; text-align: center; padding: 8px 4px;
  -moz-appearance: textfield;
}
.qty-stepper .form-control::-webkit-outer-spin-button,
.qty-stepper .form-control::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-stepper-btn {
  flex: none; width: 34px; border: none; background: var(--surface2); color: var(--fg);
  font-size: 16px; font-weight: 700; cursor: pointer; transition: background .2s;
}
.qty-stepper-btn:hover { background: var(--accent-soft); color: var(--accent-dk); }
/* Action secondaire (mise à jour quantité) — neutre, pour laisser le bleu du CTA
   principal "Procéder au paiement" comme seul repère de couleur fort de la page */
.qty-update-btn {
  margin-top: 8px; background: transparent !important; border-color: var(--border-s) !important;
  color: var(--fg) !important; font-size: 12.5px; border-radius: 8px !important;
}
.qty-update-btn:hover {
  background: var(--surface2) !important; border-color: var(--border-s) !important;
}
.basket-line-actions { margin-top: 10px; }
.basket-line-actions a { color: var(--accent-dk); text-decoration: none; }
.basket-line-actions a:hover { text-decoration: underline; }

.voucher-card, .basket-trust-row, .basket-totals-card {
  background: var(--surface); border: 1px solid var(--border-s); border-radius: 12px;
}
.voucher-card { padding: 20px 22px; margin-top: 18px; }
.voucher-card h2 { font-size: 16px; margin-bottom: 14px; }
.voucher-form-row { display: flex; gap: 10px; }
.voucher-form-row .form-control { flex: 1; }
/* Code promo — même bleu que le CTA principal, forme rectangulaire pour rester
   une action secondaire (pas de troisième couleur d'accent sur la page) */
.voucher-form-row .btn-primary {
  border-radius: 8px !important;
}
.voucher-hint { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.voucher-hint i { color: var(--accent); margin-right: 4px; }

.basket-trust-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  padding: 20px; margin-top: 18px;
}
@media (max-width: 700px) { .basket-trust-row { grid-template-columns: 1fr; } }
.basket-trust-item { display: flex; align-items: center; gap: 12px; }
.basket-trust-icon {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-dk);
  display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.basket-trust-item:nth-child(2) .basket-trust-icon { background: var(--sage-soft); color: var(--sage); }
.basket-trust-item:nth-child(3) .basket-trust-icon { background: var(--amber-soft); color: var(--amber); }
.basket-trust-item strong { display: block; font-size: 13.5px; color: var(--fg); }
.basket-trust-item div span { display: block; font-size: 12px; color: var(--muted); }

.basket-totals-card { padding: 22px; }
.basket-totals-title { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.basket-totals-icon {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-dk);
  display: flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1;
}
.basket-totals-title h2 { font-size: 17px; margin: 0; }
#basket_totals .table, #basket_totals table { background: transparent; margin: 0; }
#basket_totals th, #basket_totals td { border-color: var(--border); padding: 9px 4px; font-size: 13.5px; }
#basket_totals h3 { font-size: 13px; margin: 0; color: var(--muted); font-weight: 600; }
#basket_totals .total { background-color: var(--bg2) !important; border-radius: 10px; }
#basket_totals .total.order-total { font-weight: 700; }
#basket_totals .order-total .price_color { font-size: 17px; }
#basket_totals .price_color { color: var(--accent-dk); }
#basket_totals .basket-totals-spacer th, #basket_totals .basket-totals-spacer td { border: none; padding: 4px 0; }

.basket-checkout-btn { width: 100%; text-align: center; }
.basket-checkout-btn i { margin-right: 6px; }

/* ── Panier / Checkout — habillage éditorial sobre ───────────
   Scopé à body.basket-page et body.checkout-page (voir templates/oscar/
   basket/basket.html et templates/oscar/checkout/layout.html, block
   body_class) pour ne pas affecter le reste du site. Même fond que le
   reste du site (var(--bg), au lieu du crème précédent qui tirait sur
   le jaune), titres en serif, cartes remplacées par des filets fins/
   dividers au lieu de boîtes ombrées. Les boutons (couleur/forme)
   restent inchangés. */
body.basket-page,
body.basket-page .page .page_inner,
body.checkout-page,
body.checkout-page .page .page_inner {
  background: var(--bg);
}
body.basket-page .page-header h1,
body.checkout-page .sub-header h1 {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
}
body.checkout-page .sub-header h1 { font-weight: 700; }
body.basket-page .basket-title,
body.checkout-page .basket-title {
  border-bottom: 1px solid var(--border-s);
  padding: 0 0 12px; margin-bottom: 6px;
}
body.basket-page .basket-items,
body.checkout-page .basket-items {
  background: transparent; border: none; border-radius: 0;
  border-bottom: 1px solid var(--border-s);
  padding: 22px 0; margin-bottom: 0;
}
body.basket-page .basket-items:last-of-type,
body.checkout-page .basket-items:last-of-type { border-bottom: none; }
body.basket-page .basket-items img.img-thumbnail { background: var(--bg2); }
/* ← Sur mobile, la miniature produit de chaque ligne du panier prenait toute la
   largeur au-dessus du reste (nom, quantité, prix) — retirée pour une liste plus
   compacte ; uniquement sur cette page, pas sur la boutique ni la home. */
@media (max-width: 600px) {
  body.basket-page .basket-items .row > .col-md-2:first-child { display: none; }
}
body.basket-page .voucher-card,
body.basket-page .basket-totals-card,
body.basket-page .basket-trust-row,
body.checkout-page .checkout-summary-card,
body.checkout-page .basket-totals-card {
  background: transparent; border: 1px solid var(--border-s); border-radius: 8px;
}
body.basket-page .basket-totals-icon,
body.basket-page .basket-trust-icon,
body.checkout-page .basket-totals-icon {
  background: var(--surface2); color: var(--muted);
}
body.basket-page .basket-trust-item:nth-child(2) .basket-trust-icon,
body.basket-page .basket-trust-item:nth-child(3) .basket-trust-icon {
  background: var(--surface2); color: var(--muted);
}
body.basket-page #basket_totals .total,
body.checkout-page #basket_totals .total {
  background-color: transparent !important; border-top: 1px solid var(--border-s);
  border-radius: 0;
}
/* Barre d'étapes du checkout — plus de boîte blanche/ombre, juste la
   rangée d'étapes posée sur le fond crème, comme le reste de la page ;
   pastilles en contour plutôt qu'en aplat de couleur */
body.checkout-page .checkout-steps {
  background: transparent; border: none; border-radius: 0;
  padding: 0 0 18px;
}
body.checkout-page .checkout-step-num {
  background: transparent; border: 1.5px solid var(--border-s); color: var(--muted);
}
body.checkout-page .checkout-step.active .checkout-step-num {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
body.checkout-page .checkout-step.previous .checkout-step-num,
body.checkout-page .checkout-step.visited .checkout-step-num {
  background: transparent; border-color: var(--accent-dk); color: var(--accent-dk);
}
body.checkout-page .checkout-step.active .checkout-step-link { border-bottom-color: var(--accent); }

/* Cartes récap (adresse/livraison), choix du mode de paiement, bandeau de
   réassurance — icônes en ligne plutôt qu'en pastille colorée, lien "Modifier"
   en texte simple plutôt qu'en bouton pilule */
body.checkout-page .checkout-summary-icon {
  width: auto; height: auto; background: transparent; border-radius: 0;
  color: var(--accent-dk); font-size: 20px;
}
body.checkout-page .checkout-summary-edit {
  padding: 0; border: none; border-radius: 0; gap: 0;
  color: var(--accent-dk); text-decoration: underline;
}
body.checkout-page .checkout-summary-edit:hover { background: transparent; color: var(--accent); }
body.checkout-page .checkout-summary-edit i { display: none; }
body.checkout-page .payment-choice-icon {
  width: auto; height: auto; background: transparent; border-radius: 0;
  color: var(--accent-dk); font-size: 22px;
}
body.checkout-page .checkout-trust-row {
  background: transparent; border: 1px solid var(--border-s); border-radius: 8px;
}
body.checkout-page .checkout-trust-icon,
body.checkout-page .checkout-trust-item:nth-child(2) .checkout-trust-icon,
body.checkout-page .checkout-trust-item:nth-child(3) .checkout-trust-icon,
body.checkout-page .checkout-trust-item:nth-child(4) .checkout-trust-icon {
  background: transparent; border: 1.5px solid var(--border-s); color: var(--fg);
}

/* ── Forms ────────────────────────────────────────────────── */
.form-control, .form-select {
  border-radius: 10px;
  border: 1px solid var(--border-s);
  background: var(--surface);
  color: var(--fg);
}
.form-control:focus, .form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--fg);
  -webkit-box-shadow: 0 0 0 1000px var(--surface) inset;
  box-shadow: 0 0 0 1000px var(--surface) inset;
  transition: background-color 9999s ease-in-out 0s;
}
input[type="file"].form-control {
  height: auto; padding: 12px 14px; cursor: pointer;
}
input[type="file"].form-control::file-selector-button,
input[type="file"].form-control::-webkit-file-upload-button {
  margin-right: 16px;
  padding: 11px 20px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent-dk);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
input[type="file"].form-control:hover::file-selector-button,
input[type="file"].form-control:hover::-webkit-file-upload-button {
  background: var(--accent);
  color: #fff;
}

/* ── Connexion / Inscription (templates/oscar/customer/login_registration.html) ── */
.breadcrumb-item + .breadcrumb-item::before { content: "\203A"; }
.auth-page { position: relative; overflow: hidden; padding: 4px 0 24px; }
.auth-page::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  top: -10px; left: -10px; width: 140px; height: 140px;
  background-image: radial-gradient(var(--border-s) 1.5px, transparent 1.5px);
  background-size: 16px 16px;
  -webkit-mask-image: radial-gradient(circle, #000 40%, transparent 75%);
  mask-image: radial-gradient(circle, #000 40%, transparent 75%);
}
.auth-page::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  right: -120px; bottom: -160px; width: 360px; height: 360px; border-radius: 50%;
  background: var(--accent-soft);
}
.auth-page .row { position: relative; z-index: 1; }
.auth-card { position: relative; }
.auth-card-header { display: flex; align-items: center; gap: 16px; }
.auth-card-icon {
  flex: none; width: 54px; height: 54px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-dk);
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.auth-card-header h2 { margin-bottom: 2px; }
.auth-card-subtitle { color: var(--muted); font-size: 14px; margin: 0; }
.auth-card-divider { padding: 18px 0; }
.auth-card-divider span {
  display: block; width: 48px; height: 3px; border-radius: 2px;
  background: var(--accent); position: relative; top: -1px;
}
.auth-card-divider::before {
  content: ""; display: block; height: 1px; background: var(--border); margin-top: -3px;
}
.auth-card input[type="email"],
.auth-card input[name$="username"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B5B4C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16v16H4z'/%3E%3Cpath d='m4 6 8 7 8-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 14px center; background-size: 16px;
  padding-left: 40px;
}
.auth-password-wrap { position: relative; display: block; }
.auth-password-wrap input[type="password"], .auth-password-wrap input[type="text"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B5B4C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='9' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 14px center; background-size: 16px;
  padding-left: 40px; padding-right: 42px; width: 100%;
}
.auth-password-toggle {
  position: absolute; top: 50%; right: 10px; transform: translateY(-50%);
  background: none; border: none; color: var(--muted); cursor: pointer; padding: 4px;
}
.auth-password-toggle:hover { color: var(--accent-dk); }
.auth-forgot { margin: 6px 0 18px; font-size: 13.5px; }
.auth-forgot a { text-decoration: underline; }
.auth-submit { width: 100%; text-align: center; }
.auth-submit i { margin-left: 6px; }
/* Honeypot anti-spam (website.captcha.HoneypotCaptchaMixin) sur le formulaire
   d'inscription — masqué visuellement et pour les lecteurs d'écran, laissé
   dans le flux du DOM pour que les bots qui remplissent tous les champs le
   renseignent quand même. */
.form-group:has(.captcha-honeypot) {
  position: absolute !important; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; margin: 0;
}
.auth-switch {
  margin: 20px 0 0; padding-top: 18px; border-top: 1px solid var(--border);
  text-align: center; font-size: 13.5px; color: var(--muted);
}
.auth-switch a { font-weight: 600; text-decoration: none; }
.auth-switch a:hover { text-decoration: underline; }

/* ── Alerts / badges ──────────────────────────────────────── */
.alert-info { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-dk); }
.alert-success { background: rgba(95,115,80,.12); border-color: rgba(95,115,80,.3); color: var(--sage); }
.badge-warning, .badge.bg-warning { background-color: var(--yellow) !important; color: var(--dark-bg) !important; }

/* ── Pagination ───────────────────────────────────────────── */
.pagination .page-link { color: var(--accent-dk); border-color: var(--border-s); }
.pagination .page-item.active .page-link { background-color: var(--accent); border-color: var(--accent); }

/* ── Footer ───────────────────────────────────────────────── */
footer.container.epicopi-shop-footer {
  background: var(--dark-bg);
  color: var(--dark-muted);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  padding: 32px clamp(20px, 4vw, 48px) 24px;
  margin-top: 48px;
  max-width: none;
}
footer.container.epicopi-shop-footer a { color: var(--dark-fg); }
footer.container.epicopi-shop-footer .epicopi-shop-footer-brand {
  font-family: var(--font-display); font-weight: 700; color: var(--dark-fg); font-size: 18px;
}

/* ============================================================
   Primitives partagées avec home.html (mêmes règles, pour les pages
   secondaires qui étendent website/base.html — assistance, adaptation
   de fichiers, etc.)
   ============================================================ */
html { scroll-behavior: smooth; }
.wrap    { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(20px,4vw,48px); }
.section { padding: clamp(64px,7vw,96px) 0; }

.eyebrow {
  display: block;
  font-family: var(--font-body); font-size: 14px; font-weight: 500;
  font-style: italic; letter-spacing: normal; text-transform: none;
  color: var(--accent); margin-bottom: 10px;
}
.section-title {
  font-size: clamp(30px,4vw,46px);
  font-weight: 700; color: var(--fg); line-height: 1.1;
}
.diff-intro {
  font-size: 15.5px; color: var(--muted); line-height: 1.7;
  max-width: 640px; margin-bottom: 18px;
}

/* Grille de cartes réutilisable (usages, métiers, etc.) */
.cards-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px,2.5vw,28px); margin-bottom: clamp(28px,3.5vw,36px);
}
.cards-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .cards-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cards-grid-4 { grid-template-columns: 1fr; } }
.cards-grid .card-item-title {
  font-family: var(--font-head); font-size: 16px; font-weight: 700;
  color: var(--fg); margin-bottom: 8px;
}
.cards-grid .card-item-desc { font-size: 13.5px; color: var(--muted); line-height: 1.6; }
@media (max-width: 900px) { .cards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cards-grid { grid-template-columns: 1fr; } }

/* Bannière d'en-tête pour les pages secondaires (assistance, adaptation
   de fichiers) — même fond que le hero de la home (var(--bg2)), pour que
   toutes les pages annexes partagent la même couleur de bannière. */
.subhero {
  background: var(--bg2);
  padding: clamp(56px,7vw,84px) 0 clamp(40px,5vw,56px);
}
.subhero h1 {
  font-family: var(--font-display); font-weight: 600; color: var(--fg);
  font-size: clamp(30px,4vw,44px); margin-bottom: 12px;
}
.subhero p { color: var(--muted); font-size: 16px; max-width: 640px; }

/* Formulaires (contact, assistance) */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label {
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted);
}
.field input, .field textarea {
  font-family: var(--font-body); font-size: 15px; color: var(--fg);
  background: var(--surface); border: 1px solid var(--border-s);
  border-radius: 10px; padding: 12px 14px; width: 100%;
}
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.field textarea { resize: vertical; min-height: 110px; }
.field .errorlist { list-style: none; margin: 4px 0 0; padding: 0; color: #b3401f; font-size: 12.5px; }
.form-msg {
  border-radius: var(--radius-card); padding: 14px 18px; margin-bottom: 20px;
  font-size: 14.5px;
}
.form-msg.success { background: rgba(95,115,80,.12); border: 1px solid rgba(95,115,80,.3); color: var(--sage); }
.form-msg.error { background: rgba(179,64,31,.1); border: 1px solid rgba(179,64,31,.3); color: #8A3016; }

/* ── Pied de page partagé (website/components/footer.html) ─────────── */
.footer { background: var(--surface); border-top: 1px solid var(--border-s); }
.footer-top {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: clamp(28px,4vw,56px); padding: clamp(32px,4vw,48px) 0 28px;
  border-bottom: 1px solid var(--border); margin-bottom: 18px;
}
.footer-brand { max-width: 320px; }
.footer-logo-img { height: 34px; width: auto; display: block; margin-bottom: 14px; }
.footer-tagline { font-size: 13px; color: var(--muted); line-height: 1.65; }
.footer-cols { display: flex; flex-wrap: wrap; gap: clamp(28px,4vw,56px); }
.footer-col { display: flex; flex-direction: column; gap: 10px; min-width: 140px; }
.footer-col-title {
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--fg); opacity: .7; margin-bottom: 2px;
}
.footer-col a, .footer-col span {
  font-family: var(--font-body); font-size: 13px; color: var(--muted); text-decoration: none;
}
.footer-col a:hover { color: var(--accent-dk); }
.footer-copyright { font-family: var(--font-mono); font-size: 11px; color: var(--muted); opacity: .7; padding-bottom: 28px; }

/* ── Checkout — barre d'étapes, cartes de récap, choix du paiement ────────── */
.sub-header h1, .sub-header h2 {
  position: relative; padding-bottom: 20px; margin-bottom: 18px;
}
.sub-header h1::after, .sub-header h2::after {
  content: ""; position: absolute; left: 0; bottom: -1px;
  width: 48px; height: 3px; border-radius: 2px; background: var(--accent);
}

.checkout-steps {
  background: var(--surface); border: 1px solid var(--border-s); border-radius: var(--radius-card);
  padding: 18px 22px; margin-bottom: 8px;
}
.checkout-steps-list {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 4px;
  list-style: none; margin: 0; padding: 0;
}
.checkout-step { display: flex; }
.checkout-step-link {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 10px; border-bottom: 3px solid transparent;
  color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 600;
}
.checkout-step-num {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 700;
  background: var(--surface2); color: var(--muted);
}
.checkout-step.active .checkout-step-link { color: var(--fg); border-bottom-color: var(--accent); }
.checkout-step.active .checkout-step-num { background: var(--accent); color: #fff; }
.checkout-step.previous .checkout-step-link,
.checkout-step.visited .checkout-step-link { color: var(--accent-dk); }
.checkout-step.previous .checkout-step-num,
.checkout-step.visited .checkout-step-num { background: var(--accent-soft); color: var(--accent-dk); }
.checkout-step.disabled .checkout-step-link { color: var(--muted); cursor: default; }
.checkout-step-sep { color: var(--border-s); font-size: 12px; display: flex; align-items: center; }
@media (max-width: 700px) {
  .checkout-step-label { display: none; }
  .checkout-steps-list { justify-content: center; }
}

.checkout-summary-card {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--surface); border: 1px solid var(--border-s); border-radius: var(--radius-card);
  padding: 18px; margin-bottom: 14px;
}
.checkout-summary-icon {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-dk);
  display: flex; align-items: center; justify-content: center; font-size: 16px; line-height: 1;
}
.checkout-summary-body { flex: 1; }
.checkout-summary-body h3 { font-size: 15px; margin-bottom: 4px; }
.checkout-summary-body address, .checkout-summary-body p { font-size: 13.5px; color: var(--muted); margin: 0; }
/* Rappel du créneau de retrait — répété sur les pages suivantes du checkout
   (paiement, aperçu) et sur la commande, pour que le client s'en souvienne. */
.checkout-pickup-slot-reminder {
  margin-top: 8px !important; color: var(--accent-dk) !important;
}
.checkout-pickup-slot-reminder i { margin-right: 4px; }
.checkout-pickup-slot-reminder strong { color: var(--fg); }
.checkout-summary-edit {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: var(--radius-pill); border: 1px solid var(--border-s);
  color: var(--accent-dk); text-decoration: none; font-size: 12.5px; font-weight: 600;
  white-space: nowrap;
}
.checkout-summary-edit:hover { background: var(--accent-soft); }

.payment-choice-form { display: flex; flex-direction: column; }
.payment-choice-card {
  display: flex; align-items: center; gap: 14px; cursor: pointer;
  background: var(--surface); border: 1.5px solid var(--border-s); border-radius: var(--radius-card);
  padding: 16px 18px; margin-bottom: 12px; transition: border-color .2s, box-shadow .2s;
}
.payment-choice-card:has(.payment-choice-input:checked) {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.payment-choice-input { flex: none; width: 18px; height: 18px; accent-color: var(--accent); order: 3; margin-left: auto; }
.payment-choice-icon {
  flex: none; width: 40px; height: 40px; border-radius: 10px;
  background: var(--surface2); color: var(--accent-dk);
  display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.payment-choice-text { display: flex; flex-direction: column; gap: 2px; }
.payment-choice-text strong { font-size: 14.5px; color: var(--fg); }
.payment-choice-text span { font-size: 12.5px; color: var(--muted); }
.payment-choice-submit { margin-top: 6px; }
.payment-choice-submit i { margin-left: 6px; }
.payment-choice-secure {
  text-align: center; font-size: 12.5px; color: var(--muted); margin: 10px 0 0;
}
.payment-choice-secure i { color: var(--accent); margin-right: 4px; }

/* ── Créneau de retrait (templates/oscar/checkout/pickup_slot.html) ── */
.pickup-slot-choices { border: none; padding: 0; margin: 0 0 18px; }
.pickup-slot-choices legend { padding: 0 0 12px; font-weight: 700; color: var(--fg); }
.pickup-slot-choice {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  background: var(--surface); border: 1.5px solid var(--border-s); border-radius: var(--radius-card);
  padding: 14px 18px; margin-bottom: 10px; transition: border-color .2s, box-shadow .2s;
  font-size: 14.5px; color: var(--fg);
}
.pickup-slot-choice:has(input:checked) {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.pickup-slot-choice input { flex: none; width: 18px; height: 18px; accent-color: var(--accent); }
.pickup-slot-hint { font-size: 13px; color: var(--muted); margin: 0 0 18px; }

.checkout-trust-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px;
  background: var(--surface); border: 1px solid var(--border-s); border-radius: var(--radius-card);
  padding: 20px; margin-top: 24px;
}
@media (max-width: 700px) { .checkout-trust-row { grid-template-columns: 1fr; } }
.checkout-trust-item { display: flex; align-items: center; gap: 12px; }
.checkout-trust-icon {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-dk);
  display: flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1;
}
.checkout-trust-item:nth-child(2) .checkout-trust-icon { background: var(--sage-soft); color: var(--sage); }
.checkout-trust-item:nth-child(3) .checkout-trust-icon { background: var(--amber-soft); color: var(--amber); }
.checkout-trust-item:nth-child(4) .checkout-trust-icon { background: var(--pink-soft); color: var(--pink); }
.checkout-trust-item strong { display: block; font-size: 13.5px; color: var(--fg); }
.checkout-trust-item div span { display: block; font-size: 12px; color: var(--muted); }

/* Étape "Paiement" (templates/oscar/checkout/payment_details.html) — moyens de
   paiement acceptés en badges + récapitulatif de commande dans la colonne
   latérale (.basket-layout/.basket-main/.basket-side réutilisés) */
.payment-methods-list {
  list-style: none; margin: 18px 0 22px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.payment-method-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--border-s); border-radius: var(--radius-pill);
  padding: 9px 16px; font-size: 13.5px; font-weight: 600; color: var(--fg);
}
.payment-method-badge i { font-size: 18px; color: var(--accent-dk); }
.payment-details-continue i { margin-left: 6px; }
.checkout-order-items { display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; }
.checkout-order-item { display: flex; align-items: center; gap: 12px; }
.checkout-order-item img {
  flex: none; width: 48px; height: 48px; object-fit: cover;
  border-radius: 8px; background: var(--surface2);
}
.checkout-order-item-body { flex: 1; min-width: 0; }
.checkout-order-item-body p { margin: 0; font-size: 13.5px; color: var(--fg); }
.checkout-order-item-body span { font-size: 12px; color: var(--muted); }
.checkout-order-item .price_color { font-size: 14px; }

/* Étape "Mode de livraison" — les 3 boutons "Choisir cette option" reprennent
   les 3 couleurs de marque déjà utilisées sur la home (bleu/rose/jaune) au
   lieu du même bleu répété trois fois. */
.shipping-methods-list .basket-items:nth-child(3n+2) .btn-primary {
  background-color: var(--pink) !important; border-color: var(--pink) !important;
}
.shipping-methods-list .basket-items:nth-child(3n+2) .btn-primary:hover {
  background-color: var(--pink-dk) !important; border-color: var(--pink-dk) !important;
}
.shipping-methods-list .basket-items:nth-child(3n+3) .btn-primary {
  background-color: var(--yellow) !important; border-color: var(--yellow) !important;
  color: var(--dark-bg) !important;
}
.shipping-methods-list .basket-items:nth-child(3n+3) .btn-primary:hover {
  background-color: var(--yellow-dk) !important; border-color: var(--yellow-dk) !important;
}
/* Étape "Mode de livraison" : centre le prix et le bouton verticalement sur
   la hauteur de la colonne de gauche (nom + description), plus haute d'une
   ligne pour les méthodes avec description — sans ça le prix/bouton
   restent collés en haut, avec un vide disgracieux en dessous. */
.shipping-methods-list .basket-items .row { align-items: center; }
.shipping-method-price {
  display: flex; flex-direction: column; gap: 2px;
  font-family: var(--font-display); font-size: 16px; font-weight: 700;
  padding-right: 20px;
}
@media (max-width: 991px) {
  /* En dessous de la largeur "desktop", les colonnes Bootstrap (nom, prix,
     bouton) deviennent trop étroites pour cohabiter sur une seule ligne —
     le prix/poids finissait collé au bouton. On empile plutôt les 3 zones,
     chacune en pleine largeur. */
  .shipping-methods-list .basket-items .row { flex-direction: column; align-items: flex-start; row-gap: 10px; }
  .shipping-methods-list .basket-items .row > [class*="col-"] { max-width: 100%; flex: 0 0 100%; }
  .shipping-method-price {
    flex-direction: row; align-items: baseline; gap: 8px; padding-right: 0;
  }
  .shipping-methods-list .basket-items .col-sm-3 .btn { width: 100%; }
}
/* Poids retenu affiché sous le prix (barème par poids, voir
   shipping.services.chronopost) — pour que le tarif Chronopost ne semble
   pas arbitraire au client. */
.shipping-method-weight {
  font-family: var(--font-body); font-size: 11.5px; font-weight: 400;
  color: var(--muted); white-space: nowrap;
}

/* "Point retrait" (widget Colissimo, pas encore intégré — voir
   shipping_methods.html) : rangée grisée, non sélectionnable. */
.shipping-method-soon { opacity: 0.6; }
.shipping-method-soon h4 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.shipping-method-soon .badge { font-size: 11px; font-weight: 600; }

/* Page "merci" (templates/oscar/checkout/merci.html) — écran de remerciement
   final, hors du stepper des 5 étapes */
.merci-page {
  text-align: center; max-width: 480px; margin: clamp(40px,8vw,80px) auto;
  padding: 0 20px;
}
.merci-title {
  font-family: Georgia, 'Times New Roman', serif; font-weight: 700;
  font-size: clamp(28px,4vw,40px); color: var(--fg); margin-bottom: 14px;
}
.merci-sub { font-size: 15px; color: var(--muted); line-height: 1.6; margin-bottom: 28px; }

/* ── Compte client (Profil / Commandes / Emails / Notifications) ─────
   Scopé à body.account-profile — c'est le body_class déjà posé par défaut
   par oscar/customer/baseaccountpage.html, donc ceci s'applique à TOUTES
   les pages du compte (profil, historique commandes, détail commande,
   emails, notifications) sans avoir à surcharger chaque template. Même
   fond que le reste du site / titres serif / cartes en filets fins que
   panier et checkout ; les boutons ne sont pas touchés. */
body.account-profile,
body.account-profile .page .page_inner {
  background: var(--bg);
}
body.account-profile .page-header h1 {
  font-family: Georgia, 'Times New Roman', serif; font-weight: 700;
}
body.account-profile .sidebar .nav-pills {
  display: flex; flex-direction: column; gap: 2px;
}
body.account-profile .sidebar .nav-link {
  border-radius: 0; border-left: 2px solid transparent;
  padding: 9px 14px; color: var(--muted); font-size: 14px; font-weight: 600;
}
body.account-profile .sidebar .nav-link:hover { background: var(--surface2); color: var(--fg); }
body.account-profile .sidebar .nav-link.active {
  background: transparent; border-left-color: var(--accent);
  color: var(--accent-dk);
}
body.account-profile .card.card-body.bg-light {
  background: transparent !important; border: 1px solid var(--border-s);
  border-radius: 8px; box-shadow: none;
}
body.account-profile .table {
  background: transparent;
}
body.account-profile .table th, body.account-profile .table td {
  border-color: var(--border); font-size: 13.5px;
}
body.account-profile .table-striped tbody tr:nth-of-type(odd) { background: transparent; }
body.account-profile .table-bordered { border: 1px solid var(--border); }

/* Page "Configurer l'impression" (templates/oscar/basket/configure.html) :
   formulaire à gauche, prix estimé + bouton d'ajout au panier dans une
   colonne de droite (repris du même motif que .basket-layout/.basket-side
   sur la page panier) — repasse en une seule colonne sous 900px. */
.configure-intro { color: var(--muted); font-size: 14.5px; margin: -8px 0 14px; max-width: 520px; }
.configure-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 28px; align-items: start; }
/* Le formulaire lui-même ne dépasse pas 520px (.configure-main) : contrairement
   à .basket-layout (copié à l'origine, seuil à 900px), les 2 colonnes tiennent
   encore confortablement sur des fenêtres plus étroites. */
@media (max-width: 760px) { .configure-layout { grid-template-columns: 1fr; } }
.configure-main { max-width: 520px; }
.configure-side { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 16px; }
.configure-form input[type="file"].form-control { background: var(--surface); }
.configure-form button[type="submit"] i { margin-right: 6px; }
/* Produit "libre" (format + couleur) : aperçu du prix unitaire, mis à jour
   en direct par le script de configure.html. Empilé (libellé au-dessus du
   montant) plutôt que côte à côte : dans .configure-side (~1fr, souvent
   plus étroit que .configure-main), une seule ligne fait facilement
   passer le libellé à la ligne au milieu du prix. */
.configure-price-preview {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 18px; border-radius: 12px;
  background: var(--accent-soft); border: 1px solid var(--accent-line);
}
.configure-price-preview-label {
  font-size: 13px; font-weight: 600; color: var(--muted);
}
.configure-price-preview-value { display: flex; align-items: baseline; gap: 6px; }
.configure-price-preview-amount {
  font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--accent-dk);
}
.configure-price-preview-unit { font-size: 12.5px; color: var(--muted); }
/* Prix total (prix à l'exemplaire × quantité), sous le prix unitaire —
   séparé par un filet pour ne pas se confondre avec lui. */
.configure-price-preview-total {
  font-size: 13px; color: var(--fg);
  padding-top: 8px; margin-top: 2px; border-top: 1px solid var(--accent-line);
}
.configure-price-preview-total strong { font-family: var(--font-display); color: var(--accent-dk); }

/* Compteur de quantité — message "quantité maximale atteinte" (voir le
   script du compteur dans configure.html) */
.configure-qty-hint { font-size: 12.5px; margin: 6px 0 0; }

/* Options à choix unique (ex: "Plastification"), rendues en case à cocher
   plutôt qu'en menu déroulant à une seule entrée utile — voir
   basket.forms.build_configuration_form. Django rend ça comme une liste à
   choix multiples (même avec un seul choix), d'où ce ciblage par id plutôt
   qu'une classe dédiée : le conteneur généré porte "form-control" comme les
   champs texte, ce qui lui donnait par défaut l'apparence d'un cadre de
   saisie vide au lieu d'une simple case à cocher. */
.configure-form div[id^="id_option_group_"].form-control {
  background: transparent; border: none; padding: 0; height: auto;
}
.configure-form div[id^="id_option_group_"].form-control label {
  display: flex; align-items: center; gap: 8px;
  font-weight: 500; cursor: pointer; margin: 0;
}
.configure-form div[id^="id_option_group_"].form-control input[type="checkbox"] {
  width: 17px; height: 17px; margin: 0; accent-color: var(--accent); cursor: pointer;
}
/* Case "Reliure" (BooleanField, rendue en .form-check par form_field.html) :
   même taille, même alignement et même libellé que la case "Plastification"
   ci-dessus (liste à choix multiples), au lieu du style Bootstrap par défaut
   (case plus petite, décalée de 1,25 rem). */
.configure-form .form-check { padding-left: 0; }
.configure-form .form-check label {
  display: flex; align-items: center; gap: 8px;
  font-weight: 500; cursor: pointer; margin: 0;
}
.configure-form .form-check input[type="checkbox"] {
  position: static; margin: 0; width: 17px; height: 17px;
  accent-color: var(--accent); cursor: pointer; flex: none;
}
/* Le libellé de groupe est vide pour ces champs à choix unique — le texte de
   la case à cocher suffit, pas besoin d'un titre en double au-dessus. */
.configure-form .form-group:has(div[id^="id_option_group_"].form-control) > label.col-form-label {
  display: none;
}

/* Page de confirmation de commande (templates/oscar/checkout/thank_you.html) —
   refonte : intro + badge illustratif, cartes de récap (adresse/livraison/
   paiement), contenu de commande + total sticky (mêmes tokens que .basket-*),
   bandeau d'actions final (imprimer / continuer les achats). */
.thankyou-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.thankyou-hero-text { margin: 0; }
.thankyou-hero-icon {
  flex: none; position: relative; width: 84px; height: 84px; border-radius: 50%;
  background: var(--accent-soft); display: flex; align-items: center; justify-content: center;
}
.thankyou-hero-icon i.fa-envelope { font-size: 30px; color: var(--accent-dk); }
.thankyou-hero-check {
  position: absolute; bottom: -2px; right: -2px; width: 28px; height: 28px; border-radius: 50%;
  background: var(--sage); color: #fff; border: 3px solid var(--bg);
  display: flex; align-items: center; justify-content: center; font-size: 12px;
}
@media (max-width: 700px) { .thankyou-hero-icon { display: none; } }

.thankyou-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 28px; align-items: start; }
@media (max-width: 900px) { .thankyou-layout { grid-template-columns: 1fr; } }
.thankyou-side { position: sticky; top: 20px; }

.thankyou-summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 28px; }
@media (max-width: 700px) { .thankyou-summary-grid { grid-template-columns: 1fr; } }
.thankyou-info-card {
  background: var(--surface); border: 1px solid var(--border-s); border-radius: var(--radius-card);
  padding: 20px;
}
.thankyou-info-icon {
  width: 40px; height: 40px; border-radius: 12px; margin-bottom: 14px;
  background: var(--accent-soft); color: var(--accent-dk);
  display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.thankyou-summary-grid .thankyou-info-card:nth-child(2) .thankyou-info-icon { background: var(--amber-soft); color: var(--amber); }
.thankyou-summary-grid .thankyou-info-card:nth-child(3) .thankyou-info-icon { background: var(--pink-soft); color: var(--pink); }
.thankyou-info-card h3 { font-size: 14.5px; margin-bottom: 6px; }
.thankyou-info-card address, .thankyou-info-card p { font-size: 13px; color: var(--muted); margin: 0 0 4px; }
.thankyou-info-card p:last-child, .thankyou-info-card address:last-child { margin-bottom: 0; }

.thankyou-tracking { margin-top: 24px; }

.thankyou-actions {
  display: flex; align-items: center; gap: 24px;
  background: var(--surface); border: 1px solid var(--border-s); border-radius: var(--radius-card);
  padding: 22px 26px; margin-top: 28px;
}
@media (max-width: 700px) { .thankyou-actions { flex-direction: column; align-items: stretch; } }
.thankyou-action-item { flex: 1; display: flex; align-items: center; gap: 16px; }
.thankyou-action-icon {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-dk);
  display: flex; align-items: center; justify-content: center; font-size: 17px;
}
.thankyou-action-text { flex: 1; min-width: 0; }
.thankyou-action-text strong { display: block; font-size: 14.5px; color: var(--fg); }
.thankyou-action-text span { display: block; font-size: 12.5px; color: var(--muted); }
.thankyou-action-btn { flex: none; white-space: nowrap; }
.thankyou-action-btn i { margin-left: 6px; }
/* "Imprimer" — rose, pour distinguer cette action secondaire du bleu de "Continuer" */
.thankyou-action-item:first-child .thankyou-action-btn {
  background-color: var(--pink) !important;
  border-color: var(--pink) !important;
}
.thankyou-action-item:first-child .thankyou-action-btn:hover {
  background-color: var(--pink-dk) !important;
  border-color: var(--pink-dk) !important;
}
.thankyou-action-divider { width: 1px; align-self: stretch; background: var(--border); }
@media (max-width: 700px) { .thankyou-action-divider { display: none; } }

/* Page "Aperçu de la commande" (templates/oscar/checkout/preview.html) — même mise en
   page 2 colonnes que le panier (.basket-layout/.basket-main/.basket-side réutilisés) */
.checkout-page-subtitle { color: var(--muted); font-size: 14px; margin: -8px 0 20px; }
.checkout-preview-heading { font-size: 17px; margin: 24px 0 14px; }
.checkout-preview-qty {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; padding: 6px 10px; border-radius: 10px;
  background: var(--surface2); font-weight: 700; font-size: 14px;
}
.checkout-preview-edit-link { margin: 4px 0 0; text-align: right; font-size: 13.5px; }
.checkout-preview-edit-link a { text-decoration: none; }
.checkout-preview-edit-link a:hover { text-decoration: underline; }

.availability { font-size: 13.5px; font-weight: 600; }
.availability i { margin-right: 5px; }
.availability.available, .availability.instock { color: var(--sage); }
.availability.unavailable, .availability.outofstock { color: var(--pink-dk); }

/* ── Page produit — gabarit propre (templates/oscar/catalogue/detail.html),
   plus aucune trace du look Oscar par défaut (table brute, galerie carousel
   Bootstrap, sidebar) : hero image/infos en 2 colonnes, sections séparées
   par un filet, caractéristiques en grille de paires clé/valeur. */
.pd { max-width: var(--maxw); margin: 0 auto; padding: 4px 0 48px; }
.pd-hero {
  display: grid; grid-template-columns: minmax(0,440px) 1fr;
  gap: clamp(28px,4vw,56px); margin-bottom: clamp(36px,5vw,56px); align-items: start;
}
.pd-media {
  aspect-ratio: 1 / 1; background: var(--surface2); border: 1px solid var(--border-s);
  border-radius: var(--radius-card); display: flex; align-items: center; justify-content: center;
  overflow: hidden; padding: 24px;
}
.pd-media img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pd-info { position: relative; }
.pd-edit-link {
  position: absolute; top: 0; right: 0; font-size: 12px; color: var(--muted); text-decoration: none;
}
.pd-title {
  font-family: var(--font-display); font-size: clamp(28px,3.4vw,38px); font-weight: 700;
  color: var(--fg); margin: 4px 0 18px; line-height: 1.15;
}
.pd-price-row .price_color { font-size: 30px; margin-bottom: 8px; }
.pd-price-from {
  display: block; font-size: 12.5px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px;
}
.price_color_from {
  font-size: 11px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 0;
}
.pd-reviews-link { margin: 4px 0 20px; }
.pd-cta { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--border); max-width: 360px; }
.pd-variants { margin-top: 20px; display: flex; flex-direction: column; gap: 8px; }
.pd-variants-label {
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted);
}
@media (max-width: 820px) { .pd-hero { grid-template-columns: 1fr; } }

.pd-section { padding: clamp(26px,4vw,38px) 0; border-top: 1px solid var(--border); }
.pd-section-header { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pd-description { font-size: 15px; color: var(--fg2); line-height: 1.7; max-width: 760px; }
.pd-muted { color: var(--muted); font-size: 14px; }
.pd-see-all { font-size: 13px; font-weight: 600; color: var(--accent-dk); text-decoration: none; }
.pd-see-all:hover { text-decoration: underline; }

.pd-specs {
  display: grid; grid-template-columns: repeat(2, minmax(220px,1fr));
  max-width: 760px; border: 1px solid var(--border-s); border-radius: var(--radius-card); overflow: hidden;
}
.pd-spec {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 12px 18px; border-bottom: 1px solid var(--border); font-size: 13.5px;
}
.pd-spec dt { color: var(--muted); font-weight: 600; margin: 0; }
.pd-spec dd { margin: 0; color: var(--fg); text-align: right; }
.pd-spec:nth-last-child(-n+2) { border-bottom: none; }
@media (max-width: 600px) {
  .pd-specs { grid-template-columns: 1fr; }
  .pd-spec:nth-last-child(-n+2) { border-bottom: 1px solid var(--border); }
  .pd-spec:last-child { border-bottom: none; }
}

.pd-price-table-title { font-size: 16px; margin: 28px 0 4px; }
.pd-price-table-wrap { max-width: 760px; margin: 14px 0; overflow-x: auto; }
.pd-price-table {
  width: 100%; border-collapse: collapse; font-size: 14px; overflow: hidden;
  border-radius: var(--radius-card);
}
.pd-price-table th, .pd-price-table td { padding: 10px 18px; text-align: right; white-space: nowrap; }
.pd-price-table th:first-child { text-align: left; }
.pd-price-table .pd-price-head th { background: #5b5b5b; color: #fff; font-weight: 700; border-top: 3px solid #fff; }
.pd-price-table tbody:first-child .pd-price-head th { border-top: none; }
.pd-price-table tbody th[scope="row"] { font-weight: 600; }
.pd-price-table tbody td, .pd-price-table tbody th[scope="row"] { background: #dcdcdc; border-top: 1px solid #fff; color: var(--fg); }
.pd-price-table--couleur .pd-price-head th { background: #1fa9e0; }
.pd-price-table--couleur .pd-price-head th:nth-child(2) { background: #e6007e; }
.pd-price-table--couleur .pd-price-head th:nth-child(4) { background: #f7d900; color: #2b211b; }
.pd-price-table--couleur tbody td, .pd-price-table--couleur tbody th[scope="row"] { background: #d6effa; }

.pd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 20px; margin-top: 20px; }
.pd .review-list { padding-left: 0; margin-top: 16px; }

/* ── Résultats de recherche (templates/oscar/search/results.html) — plus de
   sidebar de filtres ni de tri, grille .product_pod pleine largeur */
.search-results { max-width: var(--maxw); margin: 0 auto; padding: 4px 0 48px; }
.search-results-count { color: var(--muted); font-size: 14px; margin: -8px 0 28px; }
.search-results-empty { color: var(--muted); font-size: 15px; }
.search-results-empty a { color: var(--accent-dk); }

/* ── Bannière cookies (website/components/cookie_bar.html, django-cookie-
   consent) — dupliquée dans site_vitrine_briefs/css/site.css : home.html
   (autocontenu) et la boutique ne chargent jamais les deux feuilles à la
   fois (même pattern que .mini-basket-btn). */
.cookie-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  background: var(--surface); border-top: 1px solid var(--border-s);
  box-shadow: 0 -6px 20px rgba(43,33,27,.12);
}
.cookie-bar-inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: 18px clamp(20px,4vw,48px);
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.cookie-bar-text { font-size: 13.5px; color: var(--muted); line-height: 1.6; margin: 0; flex: 1 1 320px; }
.cookie-bar-text a { color: var(--accent-dk); text-decoration: underline; }
.cookie-bar-actions { display: flex; gap: 10px; flex-wrap: wrap; flex: none; }
@media (max-width: 600px) {
  .cookie-bar-inner { flex-direction: column; align-items: stretch; }
  .cookie-bar-actions .btn { flex: 1; justify-content: center; }
}

/* Boutons radio (type de compte) : Oscar ajoute "form-control" à tous les
   widgets, ce qui étire les inputs sur toute la largeur et les désaligne
   de leur libellé. */
.auth-card [id$="account_type"] { display: flex; gap: 24px; flex-wrap: wrap; }
.auth-card [id$="account_type"] > div { margin: 0; }
.auth-card [id$="account_type"] label {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0; font-weight: 500; cursor: pointer;
}
.auth-card input[type="radio"].form-control,
.auth-card input[type="checkbox"].form-control {
  width: auto; height: auto; padding: 0; margin: 0; flex: none;
}

/* Panier : les prix (police mono 22px) débordaient de leur colonne et se
   chevauchaient ; on les empêche de passer à la ligne et on réduit la taille. */
body.basket-page .basket-items .price_color { font-size: 18px; white-space: nowrap; }

/* ── Impression (page de confirmation de commande) ──
   Le header est en position: sticky : à l'impression il se répétait au
   milieu des pages. On retire tout l'habillage du site (navigation,
   étapes, pied de page, bandeau cookies, boutons) et on ne garde que le
   contenu de la commande, en une seule colonne. */
.print-only { display: none; }
@media print {
  header.nav, .nav-mobile, .checkout-steps-header, footer, .epicopi-shop-footer,
  .cookie-bar, .no-print, .mini-basket-btn, .alert, .sub-header .btn {
    display: none !important;
  }
  .print-only { display: block !important; }
  .print-brand {
    margin: 0 0 14px; padding-bottom: 8px; border-bottom: 2px solid #000;
    font-size: 12px; line-height: 1.5;
  }
  body, .page, .page_inner, .container { background: #fff !important; box-shadow: none !important; }
  .container, .page_inner { max-width: none !important; width: 100% !important; padding: 0 !important; margin: 0 !important; }
  .thankyou-layout { display: block !important; }
  .thankyou-side, .basket-side { position: static !important; margin-top: 16px; }
  .thankyou-summary-grid { display: block !important; }
  .thankyou-info-card, .basket-items, .basket-totals-card { break-inside: avoid; page-break-inside: avoid; box-shadow: none !important; }
  .thankyou-hero-icon { display: none !important; }
  a[href]:after { content: none !important; }
}