/* =========================================================
   HOOLALA.TM — PARCOURS D'ACHAT (Panier + Paiement) · design V2
   Cible les classes générées par les scripts d'origine (hoolala-cart-*,
   payment-*, checkout-summary-*) sans modifier leur fonctionnement.
   ========================================================= */
.cf-wrap{width:min(1400px,100% - 2 * var(--hd-pad,24px));margin-inline:auto;box-sizing:border-box}
.cf-hero,.hoolala-cart-page,.cf-checkout{font-family:var(--hd-sans);color:var(--hd-fg)}
.cf-hero *,.hoolala-cart-page *,.cf-checkout *{box-sizing:border-box}

/* ---------- En-tête + étapes ---------- */
.cf-hero{padding:clamp(22px,3vw,40px) 0 clamp(28px,3vw,44px);background:var(--hd-bg)}
.cf-steps{display:flex;gap:6px;margin:0 0 clamp(22px,3vw,40px);padding:4px;list-style:none;width:max-content;max-width:100%;border-radius:99px;background:var(--hd-bg-2);border:1px solid var(--hd-line);overflow-x:auto}
.cf-steps li,.cf-steps li a{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:99px;font:600 13px var(--hd-sans);color:var(--hd-fg-2);text-decoration:none;white-space:nowrap}
.cf-steps li a{padding:0}
.cf-steps b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--hd-line);color:var(--hd-fg);font-size:11px}
.cf-steps li.is-on{background:var(--hd-fg);color:var(--hd-bg)}
.cf-steps li.is-on b{background:var(--hd-bg);color:var(--hd-fg)}
.cf-steps li.is-done b{background:var(--hd-fg);color:var(--hd-bg)}
.cf-steps li.is-done b::before{content:"✓"}
.cf-steps li.is-done b{font-size:0}
.cf-steps li.is-done b::before{font-size:12px}
.cf-hero-row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.cf-title{margin:0;font:600 clamp(48px,6.6vw,112px)/.9 var(--hd-sans);letter-spacing:-.06em}
.cf-title em{font-family:var(--hd-serif);font-style:italic;font-weight:400;letter-spacing:-.02em}
.cf-hero-note{margin:0;max-width:38ch;color:var(--hd-fg-2);font-size:15px;line-height:1.5}
.cf-hero-note strong{display:block;margin-bottom:6px;color:var(--hd-fg);font:600 12px var(--hd-sans);letter-spacing:.1em;text-transform:uppercase}

/* ---------- PANIER (généré par le script) ---------- */
.hoolala-cart-page{padding-bottom:clamp(64px,8vw,120px)}
.hoolala-cart-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,420px);gap:clamp(20px,3vw,48px);align-items:start}
.hoolala-cart-list-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--hd-line-2);font:500 12px var(--hd-sans);letter-spacing:.08em;text-transform:uppercase}
.hoolala-cart-list-head strong{font-weight:600}
.hoolala-cart-list-head a{color:var(--hd-fg);text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:2px}
.hoolala-cart-list{display:grid;gap:12px}
.hoolala-cart-item{display:grid;grid-template-columns:auto 1fr;gap:clamp(14px,2vw,26px);padding:clamp(16px,2vw,24px);border-radius:22px;background:var(--hd-bg-2);border:1px solid var(--hd-line);animation:cf-in .6s var(--hd-ease) both}
.hoolala-cart-item:nth-child(2){animation-delay:.06s}.hoolala-cart-item:nth-child(3){animation-delay:.12s}.hoolala-cart-item:nth-child(4){animation-delay:.18s}
@keyframes cf-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.hoolala-cart-item-index{display:grid;place-items:center;width:clamp(56px,6vw,76px);aspect-ratio:1;border-radius:18px;background:var(--hd-fg);color:var(--hd-bg);font:800 clamp(24px,2.6vw,34px)/1 var(--hd-sans);letter-spacing:-.05em}
.hoolala-cart-item-content{display:grid;grid-template-columns:1fr auto;grid-template-areas:"label sub" "name sub" "price price" "controls remove";gap:4px 16px;align-items:center;min-width:0}
.hoolala-cart-item-label{grid-area:label;font:500 11px var(--hd-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--hd-fg-2)}
.hoolala-cart-item-name{grid-area:name;margin:0;font:600 clamp(20px,2vw,28px)/1.1 var(--hd-sans);letter-spacing:-.03em;overflow-wrap:anywhere}
.hoolala-cart-item-price{grid-area:price;font:500 14px var(--hd-sans);color:var(--hd-fg-2)}
.hoolala-cart-item-subtotal{grid-area:sub;align-self:start;font:700 clamp(20px,2vw,28px)/1 var(--hd-sans);letter-spacing:-.03em;white-space:nowrap}
.hoolala-cart-controls{grid-area:controls;display:inline-flex;align-items:center;width:max-content;margin-top:10px;padding:4px;border-radius:99px;background:var(--hd-bg);border:1px solid var(--hd-line)}
.hoolala-cart-qty-btn{display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:transparent;color:var(--hd-fg);font:600 20px/1 var(--hd-sans);cursor:pointer;transition:background .2s,color .2s}
.hoolala-cart-qty-btn:hover{background:var(--hd-fg);color:var(--hd-bg)}
.hoolala-cart-qty{width:52px;height:40px;border:0;background:transparent;color:var(--hd-fg);font:700 16px var(--hd-sans);text-align:center;-moz-appearance:textfield}
.hoolala-cart-qty::-webkit-outer-spin-button,.hoolala-cart-qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.hoolala-cart-qty:focus{outline:2px solid var(--hd-fg);outline-offset:-2px;border-radius:10px}
.hoolala-cart-remove{grid-area:remove;justify-self:end;margin-top:10px;padding:8px 0;border:0;background:none;color:var(--hd-fg-2);font:600 12px var(--hd-sans);letter-spacing:.08em;cursor:pointer;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.hoolala-cart-remove:hover{color:#d33;border-color:currentColor}
.hoolala-cart-summary{position:sticky;top:calc(var(--hd-hdr,68px) + 24px);padding:clamp(22px,2.6vw,32px);border-radius:26px;background:var(--hd-fg);color:var(--hd-bg)}
.hoolala-cart-summary h2{margin:0 0 18px;font:600 clamp(26px,2.4vw,36px)/1 var(--hd-sans);letter-spacing:-.04em;text-transform:none}
.hoolala-cart-line,.hoolala-cart-total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 0;border-bottom:1px solid color-mix(in srgb,var(--hd-bg) 16%,transparent)}
.hoolala-cart-line span{opacity:.7;font-size:14px}
.hoolala-cart-line strong{font:600 16px var(--hd-sans)}
.hoolala-cart-total{border-bottom:0;padding-top:18px}
.hoolala-cart-total span{font:600 13px var(--hd-sans);letter-spacing:.1em}
.hoolala-cart-total strong{font:700 clamp(30px,3vw,44px)/1 var(--hd-sans);letter-spacing:-.04em}
.hoolala-cart-checkout,.hoolala-cart-empty .btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:58px;margin-top:14px;border:0 !important;border-radius:999px;background:var(--hd-bg) !important;color:var(--hd-fg) !important;font:700 14px var(--hd-sans);letter-spacing:.04em;text-decoration:none;transition:transform .25s var(--hd-ease)}
.hoolala-cart-checkout:hover{transform:translateY(-2px)}
.hoolala-cart-note{margin:12px 0 0;font-size:12px;opacity:.6;text-align:center}
.hoolala-cart-empty{max-width:620px;margin:0 auto;padding:clamp(36px,5vw,70px) 24px;border-radius:28px;background:var(--hd-bg-2);border:1px solid var(--hd-line);text-align:center}
.hoolala-cart-empty::before{content:"";display:block;width:76px;height:76px;margin:0 auto 18px;background:var(--hd-fg);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linejoin='round'%3E%3Cpath d='M6 7h12l-1 13H7L6 7Z'/%3E%3Cpath d='M9 7a3 3 0 0 1 6 0'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linejoin='round'%3E%3Cpath d='M6 7h12l-1 13H7L6 7Z'/%3E%3Cpath d='M9 7a3 3 0 0 1 6 0'/%3E%3C/svg%3E") center/contain no-repeat;animation:cf-sway 3s ease-in-out infinite}
@keyframes cf-sway{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
.hoolala-cart-empty h2{margin:0;font:600 clamp(32px,4vw,56px)/1 var(--hd-sans);letter-spacing:-.05em}
.hoolala-cart-empty p{margin:12px auto 18px;max-width:40ch;color:var(--hd-fg-2)}
.hoolala-cart-empty .btn{width:auto;display:inline-flex;padding:0 26px;background:var(--hd-fg) !important;color:var(--hd-bg) !important}

/* ---------- PAIEMENT ---------- */
.cf-checkout{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,440px);gap:clamp(20px,3vw,48px);align-items:start;padding-bottom:clamp(64px,8vw,120px)}
.cf-form{padding:clamp(20px,2.6vw,34px);border-radius:28px;background:var(--hd-bg-2);border:1px solid var(--hd-line)}
.cf-sect{display:flex;align-items:center;gap:10px;margin:0 0 14px;font:600 15px var(--hd-sans)}
.cf-sect span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--hd-fg);color:var(--hd-bg);font-size:12px}
.cf-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:26px}
.cf-full{grid-column:1/-1}
.cf-field{position:relative;display:block}
.cf-field input,.cf-field textarea{width:100%;min-height:58px;padding:24px 16px 8px;border-radius:14px;border:1px solid var(--hd-line);background:var(--hd-bg);color:var(--hd-fg);font:500 16px var(--hd-sans);transition:border-color .2s,box-shadow .2s}
.cf-field textarea{min-height:110px;padding-top:28px;resize:vertical}
.cf-field span{position:absolute;left:16px;top:19px;font:500 15px var(--hd-sans);color:var(--hd-fg-2);pointer-events:none;transform-origin:0 0;transition:transform .25s var(--hd-ease),color .2s}
.cf-field input:focus,.cf-field textarea:focus{outline:none;border-color:var(--hd-fg);box-shadow:0 0 0 3px color-mix(in srgb,var(--hd-fg) 12%,transparent)}
.cf-field input:focus+span,.cf-field input:not(:placeholder-shown)+span,.cf-field textarea:focus+span,.cf-field textarea:not(:placeholder-shown)+span{transform:translateY(-11px) scale(.76);color:var(--hd-fg)}
.payment-box{padding-top:22px;border-top:1px solid var(--hd-line)}
.payment-intro{margin:-6px 0 14px;color:var(--hd-fg-2);font-size:14px}
.cf-pay-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.payment-option{position:relative;display:block;cursor:pointer}
.payment-option input{position:absolute;opacity:0;pointer-events:none}
.payment-option-content{position:relative;display:grid;gap:4px;height:100%;padding:16px 16px 16px 48px;border-radius:16px;border:1.5px solid var(--hd-line);background:var(--hd-bg);transition:border-color .2s,background .25s,color .25s,transform .25s var(--hd-ease)}
.payment-option:hover .payment-option-content{transform:translateY(-2px)}
.payment-option-content strong{font:700 13px/1.2 var(--hd-sans);letter-spacing:.03em}
.payment-option-content small{font:500 12px var(--hd-sans);opacity:.65}
.cf-radio{position:absolute;left:16px;top:17px;width:20px;height:20px;border-radius:50%;border:1.5px solid currentColor;opacity:.5}
.payment-option input:checked+.payment-option-content{border-color:var(--hd-fg);background:var(--hd-fg);color:var(--hd-bg)}
.payment-option input:checked+.payment-option-content .cf-radio{opacity:1;box-shadow:inset 0 0 0 4px var(--hd-fg),inset 0 0 0 10px var(--hd-bg)}
.payment-option input:focus-visible+.payment-option-content{outline:2px solid var(--hd-fg);outline-offset:3px}
.payment-details{margin-top:12px}
.payment-details:not(:empty){padding:16px;border-radius:16px;background:var(--hd-bg);border:1px dashed var(--hd-line-2);font-size:14px;line-height:1.55}
.payment-number{display:inline-block;margin:6px 0;padding:6px 12px;border-radius:10px;background:var(--hd-fg);color:var(--hd-bg);font:700 18px ui-monospace,Menlo,monospace;letter-spacing:.06em}
.cf-consent{position:relative;display:flex;align-items:flex-start;gap:12px;margin:22px 0 18px;font-size:14px;color:var(--hd-fg-2);cursor:pointer}
.cf-consent input{position:absolute;opacity:0;width:22px;height:22px;margin:0}
.cf-box{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:7px;border:1.5px solid var(--hd-line-2);background:var(--hd-bg)}
.cf-consent input:checked+.cf-box{background:var(--hd-fg)}
.cf-consent input:checked+.cf-box::after{content:"";width:10px;height:6px;margin-top:-2px;border:2px solid var(--hd-bg);border-top:0;border-right:0;transform:rotate(-45deg)}
.cf-consent input:focus-visible+.cf-box{outline:2px solid var(--hd-fg);outline-offset:2px}
.cf-submit{display:flex !important;align-items:center;justify-content:center;width:100%;min-height:60px;border:0 !important;border-radius:999px;background:var(--hd-fg) !important;color:var(--hd-bg) !important;font:700 15px var(--hd-sans) !important;letter-spacing:.04em;cursor:pointer;transition:transform .25s var(--hd-ease),opacity .2s}
.cf-submit:hover{transform:translateY(-2px)}
.cf-submit[disabled]{opacity:.6;transform:none}
.cf-summary{position:sticky;top:calc(var(--hd-hdr,68px) + 24px);padding:clamp(22px,2.6vw,32px) !important;border-radius:26px;background:var(--hd-fg) !important;color:var(--hd-bg) !important;border:0 !important}
.cf-summary h2{margin:0 0 16px;font:600 clamp(26px,2.4vw,36px)/1 var(--hd-sans);letter-spacing:-.04em}
.cf-summary #checkoutSummary p{margin:0;opacity:.75;font-size:14px}
.checkout-summary-row,.checkout-summary-total{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid color-mix(in srgb,var(--hd-bg) 16%,transparent);font-size:14px}
.checkout-summary-total{border-bottom:0;padding-top:16px;font:700 clamp(22px,2.2vw,32px)/1 var(--hd-sans);letter-spacing:-.03em}
.checkout-payment-notice{margin-top:18px;padding:16px;border-radius:16px;background:color-mix(in srgb,var(--hd-bg) 10%,transparent)}
.checkout-payment-notice strong{display:block;margin-bottom:6px;font:600 12px var(--hd-sans);letter-spacing:.1em;text-transform:uppercase}
.checkout-payment-notice p{margin:0;font-size:13px;line-height:1.55;opacity:.75}

@media (max-width:1000px){
  .hoolala-cart-layout,.cf-checkout{grid-template-columns:1fr}
  .hoolala-cart-summary,.cf-summary{position:static}
  .cf-pay-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .hoolala-cart-item{grid-template-columns:1fr}
  .hoolala-cart-item-index{width:48px;border-radius:14px;font-size:20px}
  .hoolala-cart-item-content{grid-template-areas:"label label" "name name" "price sub" "controls remove"}
  .cf-fields{grid-template-columns:1fr}
}

/* Les anciennes feuilles du site forcent la couleur des titres de .panel : on la reprend */
.cf-summary h2,.cf-summary strong,.cf-summary p,.cf-summary span,.hoolala-cart-summary h2,.hoolala-cart-summary strong{color:inherit !important}
.cf-field input:not(:placeholder-shown),.cf-field textarea:not(:placeholder-shown){padding-top:26px}

/* Taille / couleur choisies (panier) */
.hoolala-cart-item-variant{display:inline-flex;margin:6px 0 2px;padding:5px 12px;border-radius:999px;background:var(--hd-bg-2,#f4f4f2);color:var(--hd-fg,#0a0a0a);font:600 13px var(--hd-sans,inherit)}