/* Transaction pages share the public design, while the account controllers keep
   their proven field IDs and request contracts. No rules escape .commerce.
   Les couleurs viennent des jetons de design.css : le thème s'applique ici aussi.
   --soft et --c-err(-line) restent nommés ainsi, le HTML les référence. */
.commerce{--soft:var(--muted);--v:var(--accent);--c-err:#a72c2c;--c-err-line:#ddb2b2;padding-block:72px 88px;color:var(--ink)}
.commerce-intro{max-width:790px;margin-bottom:36px}
.commerce-intro h1{font-size:clamp(2.3rem,5vw,4.8rem);line-height:1.04;letter-spacing:-.045em;margin:12px 0 24px;text-wrap:balance}
.commerce-intro>p:last-child{max-width:700px;font-size:1.1rem;line-height:1.7;color:var(--soft)}
.commerce .eyebrow{font-size:.74rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--v);margin:0 0 12px}
.commerce .panel{padding:28px;border:1px solid var(--line);border-radius:22px;background:var(--surface);min-width:0;box-shadow:0 5px 20px var(--shade-soft)}
.commerce .panel h2{font-size:1.55rem;line-height:1.25;margin:0 0 12px}
.commerce .panel h3{font-size:1.2rem;line-height:1.4;margin:0 0 12px}
.commerce p{line-height:1.7}
.commerce a:not(.button){text-underline-offset:4px}
.commerce .button{display:inline-flex;justify-content:center;align-items:center;gap:8px;min-height:48px;padding:12px 19px;border:1px solid var(--line-strong);border-radius:11px;font:inherit;font-weight:750;line-height:1.4;text-decoration:none;cursor:pointer;background:var(--surface);color:var(--ink);box-sizing:border-box;white-space:normal;text-align:center}
.commerce .button-primary{background:var(--v);border-color:var(--v);color:#fff}
.commerce .button-secondary{background:var(--surface);color:var(--ink)}
.commerce .button:hover{filter:brightness(.96)}
.commerce .button:disabled{opacity:.6;cursor:wait}
.commerce :where(a,button,input,summary):focus-visible{outline:3px solid var(--focus-out);outline-offset:3px;box-shadow:0 0 0 3px var(--focus-in)}
.commerce .notice{padding:18px 22px;border-radius:14px;background:var(--sky);border:1px solid var(--line);line-height:1.7;margin:16px 0;color:var(--ink)}
.commerce-payment-switch{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 24px;margin-bottom:30px!important}
.commerce-payment-switch p{margin:0;color:var(--soft);font-size:.92rem}
.commerce-payment-switch>a{grid-column:2;grid-row:1/3;font-size:.92rem;font-weight:700}
.commerce-plans,.commerce-support-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.commerce .commerce-plan{display:flex;flex-direction:column;padding:34px}
.commerce .commerce-plan-featured{border:2px solid var(--v);background:var(--surface-2);box-shadow:0 12px 32px var(--shade-soft)}
.commerce-price{font-size:3.5rem;font-weight:750;letter-spacing:-.05em;line-height:1.1!important;margin:14px 0}
.commerce-price span{font-size:1rem;font-weight:500;letter-spacing:0;color:var(--soft)}
.commerce-plan>p:not(.commerce-price):not(.eyebrow){color:var(--soft)}
.commerce-features{padding:0;list-style:none;margin:20px 0 26px;line-height:1.55}
.commerce-features li{position:relative;margin:0 0 13px;padding-left:24px}
.commerce-features li:before{content:'✓';position:absolute;left:0;color:var(--v);font-weight:800}
.commerce-plan .commerce-features{flex:1}
.commerce-plan>.button{width:100%}
.commerce .commerce-fine{font-size:.84rem;color:var(--soft);line-height:1.6;margin-top:16px}
.commerce-legal{font-size:.9rem;color:var(--soft);margin:24px 0 42px}
.commerce-help{margin:28px auto 0;font-size:.94rem;color:var(--soft)}
.commerce-account-layout,.commerce-download-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:72px;align-items:start}
.commerce-account-layout{max-width:1080px}
.commerce-account-aside{padding:30px 0;max-width:410px}
.commerce-account-aside h2{font-size:clamp(1.65rem,2.8vw,2.4rem);line-height:1.2;letter-spacing:-.025em;margin:10px 0 24px}
.commerce-account-aside p{color:var(--soft)}
.commerce-account-aside hr{border:0;border-top:1px solid var(--line);margin:30px 0}
.commerce .field{background:var(--surface);color:var(--ink);min-height:47px;font-family:inherit!important;font-size:16px!important}
/* Saisie de l'adresse sur la page de commande (20/09) : remplace le prompt()
   natif. Cible de 52 px — au-delà du minimum de 44 px, et confortable au doigt. */
.commerce-identity{max-width:540px;margin:0 0 26px}
.commerce-identity label{display:block;font-weight:750;margin-bottom:8px}
.commerce-identity .field{width:100%;box-sizing:border-box;min-height:52px;padding:12px 15px;border:1px solid var(--line-strong);border-radius:11px}
.commerce-identity .field[aria-invalid="true"]{border-color:var(--c-err);box-shadow:0 0 0 2px var(--c-err-line)}
.commerce-identity .commerce-fine{margin-top:8px}
.commerce-error{margin:10px 0 0;color:var(--c-err);font-weight:700;line-height:1.5}
.commerce-payment-state{margin:24px 0 0;padding:16px 20px;border:1px solid var(--c-err-line);border-radius:14px;background:var(--surface-2);color:var(--ink);font-weight:600;line-height:1.6}
.commerce-error[hidden],.commerce-payment-state[hidden]{display:none}
.commerce-identity-known{margin-top:0!important}
.commerce .commerce-role-radio{display:block;margin:8px auto 0;accent-color:var(--v);width:17px;height:17px}
.commerce :is(#rEns,#rDir):has(input:checked){background:var(--sky)!important;border-color:var(--v)!important}
.commerce :is(#rEns,#rDir):has(input:not(:checked)){background:var(--surface)!important;border-color:var(--line-strong)!important}
.commerce :is(#zone,#gate) label{display:block;line-height:1.5;margin-top:7px}
.commerce :is(#zone,#gate) #msg{margin:8px 0;line-height:1.5}
.commerce #zone>div[style]{margin-top:0!important}
.commerce #gate .panel>h3{margin-bottom:12px!important}
.commerce-badge{display:inline-block;border-radius:99px;padding:5px 10px;background:var(--sky);font-size:.8rem;font-weight:750;color:var(--accent)}
.commerce-badge.free{background:var(--sand);color:var(--gold-ink)}
.commerce-compatibility{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 34px}
.commerce-compatibility span{font-size:.85rem;background:var(--surface-2);border-radius:99px;padding:8px 14px;color:var(--muted)}
.commerce-download-options{display:grid;gap:20px;margin-top:18px}
.commerce #hello{margin-top:0}
.commerce-install,.commerce-first-steps{margin-top:64px}
.commerce-install>h2,.commerce-first-steps>h2{font-size:clamp(1.7rem,3vw,2.3rem);line-height:1.2;margin-bottom:24px}
.commerce-install details.panel{margin:12px 0;padding:20px 24px}
.commerce-install summary{font-size:1rem;font-weight:750;cursor:pointer;padding-right:16px}
.commerce-install details>p{color:var(--soft);margin-bottom:0;max-width:820px}
.commerce-three{grid-template-columns:repeat(3,minmax(0,1fr))}
.commerce-three>a.panel{display:block;color:inherit;text-decoration:none}
.commerce-three>a.panel:hover{border-color:var(--v)}
.commerce-step{display:inline-block;font-size:1rem;font-weight:800;letter-spacing:.07em;margin-bottom:20px;color:var(--v)}
.commerce-thanks{max-width:900px}
.commerce-thanks .commerce-intro h1{font-size:clamp(2.2rem,4.4vw,3.8rem)}
.commerce-confirmation>.button{margin:12px 10px 0 0}
.commerce-confirmation .commerce-step{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:var(--sky)}
.commerce-loading{color:var(--soft)}
@media(max-width:900px){.commerce-account-layout,.commerce-download-layout{gap:36px;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}.commerce .commerce-plan{padding:26px}.commerce-three{grid-template-columns:1fr}.commerce-account-aside{padding-top:20px}.commerce-payment-switch{grid-template-columns:1fr}.commerce-payment-switch>a{grid-column:1;grid-row:auto;margin-top:6px}}
@media(max-width:650px){.commerce{padding-block:42px 56px}.commerce-intro h1{font-size:2.55rem}.commerce-plans,.commerce-account-layout,.commerce-download-layout,.commerce-support-grid{grid-template-columns:1fr}.commerce .panel{padding:22px}.commerce-price{font-size:3rem}.commerce-account-aside{max-width:none;padding:12px 2px}.commerce-account-aside h2 br{display:none}.commerce-intro{margin-bottom:26px}.commerce .notice{padding:16px}.commerce :is(#zone,#gate) .button{padding:11px 10px;font-size:.93rem}.commerce-confirmation>.button{width:100%;margin-right:0}.commerce-install,.commerce-first-steps{margin-top:42px}}

.commerce-web{margin-top:18px}.commerce-web .button{margin:12px 0}.commerce-web h2{margin:8px 0 12px}