:root {
  --ink: #151512;
  --ink-soft: #282822;
  --paper: #f1eedf;
  --paper-bright: #fffdf3;
  --paper-deep: #ddd8c5;
  --acid: #d8ff3e;
  --signal: #f35a2d;
  --muted: #6f6d61;
  --display: "Bebas Neue", Impact, sans-serif;
  --body: "Spline Sans", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; color: var(--ink); background: var(--paper); font-family: var(--body); line-height: 1.5; }
img { display: block; max-width: 100%; }
a { color: inherit; }
a:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; }
.wrap { width: min(calc(100% - 40px), 1100px); margin-inline: auto; }
.grain { position: fixed; z-index: 100; inset: 0; pointer-events: none; opacity: .15; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.17'/%3E%3C/svg%3E"); }
.skip-link { position: fixed; z-index: 500; top: 10px; left: 10px; padding: 10px 14px; color: white; background: var(--ink); transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.topbar { color: var(--paper-bright); background: var(--ink); border-bottom: 3px solid var(--acid); }
.topbar-inner { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brand span { width: 42px; height: 42px; display: grid; place-items: center; color: var(--acid); border: 1px solid var(--acid); font-family: var(--display); font-size: 1.35rem; transform: rotate(-3deg); }
.brand strong { font-family: var(--display); font-size: 1.4rem; letter-spacing: .05em; }
.back-link { color: #bbb9ad; font-size: .75rem; text-underline-offset: 4px; }

.checkout-layout { display: grid; grid-template-columns: .82fr 1.18fr; gap: 34px; align-items: start; padding: 52px 0 72px; }
.order-summary { position: sticky; top: 20px; overflow: hidden; color: var(--paper-bright); background: var(--ink); border: 2px solid var(--ink); box-shadow: 10px 10px 0 var(--acid); }
.summary-label { padding: 13px 22px; color: var(--ink); background: var(--acid); font-size: .65rem; font-weight: 700; letter-spacing: .13em; }
h1, h2, h3 { margin-top: 0; font-family: var(--display); font-weight: 400; line-height: .94; }
.order-summary h1 { margin: 28px 24px 22px; font-size: clamp(3.5rem, 6vw, 5rem); }
.product-preview { height: 250px; position: relative; overflow: hidden; margin: 0 24px; background: var(--paper); border: 1px solid rgba(255,255,255,.2); }
.product-preview img { width: 44%; height: 330px; margin-left: 12%; object-fit: cover; object-position: top center; transform: rotate(-4deg) translateY(18px); border: 2px solid var(--ink); box-shadow: 7px 7px 0 rgba(0,0,0,.35); }
.preview-ticket { position: absolute; right: 14px; bottom: 20px; width: 48%; padding: 14px; color: var(--ink); background: var(--acid); border: 2px solid var(--ink); transform: rotate(2deg); }
.preview-ticket span, .preview-ticket small { display: block; font-size: .56rem; font-weight: 700; letter-spacing: .1em; }
.preview-ticket strong { display: block; margin: 3px 0; font-family: var(--display); font-size: 1.45rem; line-height: 1; }
.order-summary ul { margin: 22px 24px; padding: 0; list-style: none; }
.order-summary li { position: relative; padding: 9px 0 9px 24px; border-bottom: 1px solid rgba(255,255,255,.13); font-size: .76rem; }
.order-summary li::before { content: "✓"; position: absolute; left: 0; color: var(--acid); font-weight: 700; }
.summary-total { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding: 18px 24px; background: var(--ink-soft); border-top: 1px solid rgba(255,255,255,.15); }
.summary-total > span { color: #bbb9ad; font-size: .7rem; }
.summary-total > div { display: flex; align-items: baseline; gap: 10px; }
.summary-total del { color: #88867e; font-size: .8rem; }
.summary-total strong { color: var(--acid); font-family: var(--display); font-size: 3.2rem; line-height: 1; }
.summary-note { margin: 0; padding: 12px 20px; color: #99978e; font-size: .62rem; text-align: center; }

.payment-panel { padding: 34px; background: var(--paper-bright); border: 2px solid var(--ink); }
.step-label { color: var(--signal); font-size: .65rem; font-weight: 700; letter-spacing: .13em; }
.payment-panel h2 { margin: 9px 0 14px; font-size: clamp(3rem, 5vw, 4.8rem); }
.intro { color: var(--muted); }
.order-recap { margin: 28px 0 18px; border: 1px solid var(--ink); }
.order-recap > div { min-height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 9px 14px; border-bottom: 1px solid rgba(21,21,18,.18); font-size: .75rem; }
.order-recap > div:last-child { border-bottom: 0; }
.order-recap span { color: var(--muted); }
.order-recap .total { color: var(--paper-bright); background: var(--ink); }
.order-recap .total span { color: #bbb9ad; }
.order-recap .total strong { color: var(--acid); font-family: var(--display); font-size: 1.55rem; }
.founder-note { display: grid; gap: 2px; margin-bottom: 20px; padding: 14px 16px; background: var(--acid); border-left: 5px solid var(--ink); font-size: .75rem; }
.founder-note span { color: #45443d; }
.kooneo-slot { min-height: 360px; position: relative; overflow: hidden; background: var(--paper-bright); border: 2px solid var(--ink); }
.form-shell-head { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 9px 14px; color: var(--paper-bright); background: var(--ink); font-size: .58rem; font-weight: 700; letter-spacing: .13em; }
.form-shell-head span { color: var(--acid); }
.form-shell-head b { font-weight: 700; }
.form-loading { min-height: 290px; display: grid; place-items: center; align-content: center; gap: 14px; padding: 34px; color: var(--muted); background: var(--paper-bright); font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-align: center; text-transform: uppercase; }
.form-loading i { width: 42px; height: 42px; border: 3px solid var(--paper-deep); border-top-color: var(--signal); border-radius: 50%; animation: form-spin .8s linear infinite; }
.kooneo-slot.is-loaded .form-loading { display: none; }
.kooneo-slot > iframe { width: 100% !important; min-height: 640px; border: 0 !important; background: var(--paper-bright); }
.kooneo-slot > form,
.kooneo-slot > [data-koo-form],
.kooneo-slot > .koo-form,
.kooneo-slot > .kooneo-form { padding: 26px !important; }

/* Le formulaire Kooneo est normalement injecté dans la page. Ces règles sont
   volontairement limitées au conteneur de paiement. */
#kooneo-form-wrapper :where(form, fieldset) { margin: 0 !important; color: var(--ink) !important; background: transparent !important; border: 0 !important; box-shadow: none !important; font-family: var(--body) !important; }
#kooneo-form-wrapper :where(h1, h2, h3, h4, legend) { color: var(--ink) !important; font-family: var(--display) !important; font-weight: 400 !important; letter-spacing: .025em !important; line-height: 1 !important; }
#kooneo-form-wrapper :where(label, .label, [class*="label"]) { display: block; margin: 0 0 7px !important; color: var(--ink) !important; font-family: var(--body) !important; font-size: .68rem !important; font-weight: 700 !important; letter-spacing: .07em !important; text-transform: uppercase !important; }
#kooneo-form-wrapper :where(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), select, textarea) { width: 100% !important; min-height: 50px !important; margin: 0 0 16px !important; padding: 11px 13px !important; color: var(--ink) !important; background: var(--paper-bright) !important; border: 2px solid var(--ink) !important; border-radius: 0 !important; box-shadow: none !important; font-family: var(--body) !important; font-size: 16px !important; transition: box-shadow .15s ease, border-color .15s ease !important; }
#kooneo-form-wrapper :where(textarea) { min-height: 110px !important; resize: vertical; }
#kooneo-form-wrapper :where(input, select, textarea):focus { outline: 0 !important; border-color: var(--signal) !important; box-shadow: 5px 5px 0 var(--acid) !important; }
#kooneo-form-wrapper :where(input[type="checkbox"], input[type="radio"]) { width: 19px !important; height: 19px !important; margin-right: 9px !important; accent-color: var(--signal); }
#kooneo-form-wrapper :where(button, input[type="submit"], .btn, .button, [class*="submit"]) { min-height: 54px !important; padding: 13px 20px !important; color: var(--paper-bright) !important; background: var(--signal) !important; border: 2px solid var(--ink) !important; border-radius: 0 !important; box-shadow: 5px 5px 0 var(--ink) !important; font-family: var(--display) !important; font-size: 1.35rem !important; font-weight: 400 !important; letter-spacing: .045em !important; line-height: 1 !important; text-transform: uppercase !important; cursor: pointer !important; transition: transform .15s ease, box-shadow .15s ease !important; }
#kooneo-form-wrapper :where(button, input[type="submit"], .btn, .button, [class*="submit"]):hover { transform: translate(-2px, -2px) !important; box-shadow: 7px 7px 0 var(--ink) !important; }
#kooneo-form-wrapper :where(a) { color: var(--signal) !important; font-weight: 700 !important; text-underline-offset: 3px; }
#kooneo-form-wrapper :where(.error, .errors, .alert-danger, [class*="error"]) { padding: 10px 12px !important; color: #8f210b !important; background: #f8e4dc !important; border: 1px solid var(--signal) !important; border-radius: 0 !important; font-size: .75rem !important; }
#kooneo-form-wrapper :where(.success, .alert-success, [class*="success"]) { padding: 10px 12px !important; color: var(--ink) !important; background: var(--acid) !important; border: 1px solid var(--ink) !important; border-radius: 0 !important; }
.noscript-note { margin: 0; padding: 24px; color: var(--ink); background: var(--acid); font-weight: 700; text-align: center; }
@keyframes form-spin { to { transform: rotate(360deg); } }
.trust-row { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 16px; border: 1px solid rgba(21,21,18,.2); }
.trust-row span { padding: 11px 8px; border-right: 1px solid rgba(21,21,18,.2); color: var(--muted); font-size: .62rem; font-weight: 700; text-align: center; }
.trust-row span:last-child { border-right: 0; }
.guarantee { margin-top: 24px; display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: center; padding: 18px; background: var(--paper-deep); }
.guarantee > div { width: 60px; height: 60px; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 50%; font-family: var(--display); font-size: 2rem; }
.guarantee p { margin: 0; font-size: .72rem; }
.guarantee strong { display: block; }
.legal { margin: 22px 0 0; color: var(--muted); font-size: .63rem; }

.after-payment { padding: 48px 0; color: var(--paper-bright); background: var(--ink); border-top: 3px solid var(--acid); }
.after-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.after-grid article { padding: 20px 30px; border-right: 1px solid rgba(255,255,255,.15); }
.after-grid article:last-child { border-right: 0; }
.after-grid span { color: var(--acid); font-family: var(--display); font-size: 2.3rem; }
.after-grid h3 { margin: 12px 0 7px; font-size: 1.7rem; }
.after-grid p { margin: 0; color: #aaa89e; font-size: .72rem; }
footer { padding: 25px 0; color: var(--muted); background: var(--ink-soft); }
footer .wrap { display: flex; justify-content: space-between; gap: 20px; font-size: .65rem; }
footer strong { color: var(--paper-bright); font-family: var(--display); font-size: 1rem; }

@media (max-width: 850px) {
  .checkout-layout { grid-template-columns: 1fr; }
  .order-summary { position: static; }
  .product-preview { height: 290px; }
  .payment-panel { padding: 25px; }
  .kooneo-slot > form,
  .kooneo-slot > [data-koo-form],
  .kooneo-slot > .koo-form,
  .kooneo-slot > .kooneo-form { padding: 20px !important; }
}

@media (max-width: 570px) {
  .wrap { width: min(calc(100% - 24px), 1100px); }
  .topbar-inner { min-height: 64px; }
  .brand strong { font-size: 1.1rem; }
  .back-link { font-size: 0; }
  .back-link::after { content: "← Retour"; font-size: .7rem; }
  .checkout-layout { padding-top: 28px; }
  .order-summary h1 { font-size: 3.7rem; }
  .product-preview { height: 230px; }
  .payment-panel h2 { font-size: 3.15rem; }
  .order-recap > div { align-items: start; flex-direction: column; gap: 2px; }
  .trust-row { grid-template-columns: 1fr; }
  .trust-row span { border-right: 0; border-bottom: 1px solid rgba(21,21,18,.2); }
  .trust-row span:last-child { border-bottom: 0; }
  .guarantee { grid-template-columns: 1fr; }
  .kooneo-slot { margin-inline: -10px; }
  .form-shell-head { padding-inline: 12px; }
  .kooneo-slot > form,
  .kooneo-slot > [data-koo-form],
  .kooneo-slot > .koo-form,
  .kooneo-slot > .kooneo-form { padding: 16px !important; }
  .after-grid { grid-template-columns: 1fr; }
  .after-grid article { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.15); }
  footer .wrap { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .form-loading i { animation: none; }
  #kooneo-form-wrapper * { transition: none !important; }
}