/**
 * ASI Checkout — frontend styles.
 *
 * Everything is scoped under .asi-co so the theme cannot bleed in and this
 * cannot bleed out. Colours come from settings via inline custom properties.
 *
 * Note on states: themes (Astra here) style bare <button> elements including
 * their :hover/:focus background, so every interactive element below
 * re-declares its own colours for every state.
 */

/**
 * Exo 2, self-hosted. Two subsets cover French (latin + latin-ext); one
 * variable file per subset carries the whole 400-800 range, so the checkout
 * gets four weights for two requests and never touches a font CDN.
 * Licence: assets/fonts/OFL.txt
 */
@font-face {
	font-family: "Exo 2 ASI";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("fonts/exo2-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Exo 2 ASI";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("fonts/exo2-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
		U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
		U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
		U+A720-A7FF;
}

.asi-co {
	--asi-font: "Exo 2 ASI", "Exo 2", -apple-system, BlinkMacSystemFont,
		"Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--asi-primary: #046bd2;
	--asi-primary-dark: #045cb4;
	--asi-accent: #fc7978;
	--asi-ink: #1e293b;
	--asi-muted: #64748b;
	--asi-line: #e2e8f0;
	--asi-bg: #f9fafb;
	--asi-cta: #16a34a;
	--asi-cta-dark: #15803d;
	--asi-step: #16327c;
	--asi-radius: 14px;
	--asi-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .06);

	box-sizing: border-box;
	max-width: 100%;
	margin: 0;
	color: var(--asi-ink);
	font-family: var(--asi-font);
	font-size: 15px;
	line-height: 1.5;
	text-align: left;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Exo 2's default figures are proportional, so prices of different digit
   widths would not line up down the column. Tabular figures fix the column
   and keep the two price stacks aligned. */
.asi-co__price,
.asi-co__old,
.asi-co__monthly,
.asi-co__sumprice,
.asi-co__sumold,
.asi-co__summonthly,
.asi-co__cc-dial,
.asi-co__cc-item-dial,
.asi-co__dialbox {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

.asi-co *,
.asi-co *::before,
.asi-co *::after {
	box-sizing: border-box;
}

/* Inheritance is not enough: a theme rule like `h1 { font-family: ... }`
   targets the element directly and so beats anything inherited from .asi-co,
   which left headings rendering in the theme's own webfont. `.asi-co *` is a
   class-level selector, so it outranks those element rules. */
.asi-co,
.asi-co * {
	font-family: var(--asi-font);
}

/* :where() carries no specificity, so this reset weighs the same as a single
   class. That is deliberate: it still beats a theme's `h1 {}` element rule,
   but it no longer outranks the component classes below. Written as
   `.asi-co h2` it was (0,1,1) and silently killed the margin and padding of
   every heading, paragraph and list component in this file. */
.asi-co :where(p, h1, h2, ul, ol, li) {
	margin: 0;
	padding: 0;
}

.asi-co :where(ul, ol) {
	list-style: none;
}

/* An author `display` declaration beats the UA rule behind the [hidden]
   attribute, so anything below with display:flex/block would stay visible
   while hidden. The whole step machinery toggles [hidden], so this guard is
   load-bearing, not defensive. */
.asi-co [hidden] {
	display: none !important;
}

.asi-co__ico {
	flex: none;
	display: block;
}

/* ---------------------------------------------------------------- top bar */

.asi-co__bar {
	position: relative;
	background: #fff;
	border-bottom: 1px solid var(--asi-line);
}

.asi-co__bar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	max-width: 1120px;
	margin: 0 auto;
	padding: 13px 24px;
}

/* With a centred logo the bar becomes three tracks. Both side tracks are 1fr
   so the middle one centres on the bar rather than on the leftover space —
   otherwise the logo would drift as the back link's label changes between
   steps. */
.asi-co__bar--logo-center .asi-co__bar-inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
}

.asi-co__bar--logo-center .asi-co__secure {
	justify-self: end;
}

.asi-co__bar-left {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
}

.asi-co__bar-center {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
}

.asi-co__logolink {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	text-decoration: none;
}

/* The height itself is set inline from the setting. */
.asi-co__logo {
	display: block;
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

.asi-co__brand {
	color: var(--asi-ink);
	font-size: 16px;
	font-weight: 800;
	letter-spacing: -.01em;
	white-space: nowrap;
}

.asi-co__back {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 4px 2px;
	background: none;
	color: var(--asi-ink);
	border: 0;
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 600;
	cursor: pointer;
}

.asi-co__back:hover,
.asi-co__back:focus,
.asi-co__back:focus-visible,
.asi-co__back:active {
	background: none;
	color: var(--asi-primary);
	box-shadow: none;
}

.asi-co a.asi-co__back {
	text-decoration: none;
}

.asi-co__secure {
	display: flex;
	flex: none;
	align-items: center;
	gap: 6px;
	color: var(--asi-muted);
	font-size: 13.5px;
}

.asi-co__secure .asi-co__ico {
	color: var(--asi-cta);
}

/* ------------------------------------------------------------------ shell */

.asi-co__wrap {
	max-width: 1120px;
	margin: 0 auto;
	padding: 26px 24px 48px;
}

/* ---------------------------------------------------------------- stepper */

.asi-co__steps {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-bottom: 42px;
}

.asi-co__stepitem {
	display: flex;
	align-items: center;
	gap: 9px;
}

.asi-co__stepdot {
	position: relative;
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	background: var(--asi-line);
	color: var(--asi-muted);
	border-radius: 50%;
	font-size: 13px;
	font-weight: 700;
	transition: background-color .2s ease, color .2s ease;
}

.asi-co__stepcheck {
	display: none;
}

.asi-co__steplabel {
	color: var(--asi-muted);
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
}

.asi-co__stepitem.is-current .asi-co__stepdot {
	background: var(--asi-step);
	color: #fff;
}

.asi-co__stepitem.is-current .asi-co__steplabel {
	color: var(--asi-ink);
}

.asi-co__stepitem.is-done .asi-co__stepdot {
	background: var(--asi-cta);
	color: #fff;
}

.asi-co__stepitem.is-done .asi-co__steplabel {
	color: var(--asi-ink);
}

.asi-co__stepitem.is-done .asi-co__stepnum {
	display: none;
}

.asi-co__stepitem.is-done .asi-co__stepcheck {
	display: block;
}

.asi-co__stepline {
	flex: 0 1 130px;
	height: 2px;
	background: var(--asi-line);
	border-radius: 2px;
	overflow: hidden;
}

.asi-co__stepline span {
	display: block;
	width: 0;
	height: 100%;
	background: var(--asi-cta);
	transition: width .3s ease;
}

.asi-co__steps.is-step2 .asi-co__stepline span {
	width: 100%;
}

/* ----------------------------------------------------------- step layout */

.asi-co__step--narrow {
	max-width: 660px;
	margin: 0 auto;
}

/* The plan grid needs the full shell width; its header stays centred. */
.asi-co__step--plans {
	max-width: 1080px;
	margin: 0 auto;
}

.asi-co__head {
	margin-bottom: 26px;
	text-align: center;
}

.asi-co__head .asi-co__subtitle {
	margin-bottom: 0;
}

.asi-co__title {
	margin: 0 0 5px;
	color: var(--asi-ink);
	font-size: 25px;
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.22;
}

.asi-co__subtitle {
	margin: 0 0 20px;
	color: var(--asi-muted);
	font-size: 14.5px;
}

.asi-co__card {
	padding: 18px;
	background: #fff;
	border: 1px solid var(--asi-line);
	border-radius: var(--asi-radius);
	box-shadow: var(--asi-shadow);
}

.asi-co__card--center {
	text-align: center;
}

/* Two columns on desktop; on mobile the order summary leads, then the form,
   then the reassurance card sits right under the order button. */
.asi-co__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas:
		"order"
		"main"
		"pay";
	gap: 16px;
	align-items: start;
}

.asi-co__side--order { grid-area: order; }
.asi-co__main        { grid-area: main; min-width: 0; }
.asi-co__side--pay   { grid-area: pay; }

@media (min-width: 900px) {
	.asi-co__layout {
		grid-template-columns: minmax(0, 1fr) 330px;
		/* The third row soaks up the form's extra height, otherwise rows 1 and 2
		   stretch to it and the two side cards drift far apart. */
		grid-template-rows: auto auto 1fr;
		grid-template-areas:
			"main order"
			"main pay"
			"main .";
		gap: 16px 28px;
	}
}

/* -------------------------------------------------------------- plan list */

.asi-co__group + .asi-co__group {
	margin-top: 26px;
}

/* The left inset matches a plan card's border + padding, so the heading lines
   up with the card content it labels instead of hugging the card's outer edge.
   Keep it in step with .asi-co__plan's padding if that ever changes. */
.asi-co__group-title {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0 0 8px;
	padding: 2px 17px 4px;
	color: var(--asi-muted);
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
}

/* Colour only — the padding above already applies to every tone. */
.asi-co__group-title--blue  { color: var(--asi-primary); }
.asi-co__group-title--amber { color: #d97706; }
.asi-co__group-title--green { color: var(--asi-cta); }

/* Two plans per row from tablet up; the last odd card simply keeps its column
   rather than stretching across, which reads as a deliberate grid. */
.asi-co__plans {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
	align-items: start;
}

@media (min-width: 720px) {
	.asi-co__plans {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}
}

/* The border width is deliberately constant. Thickening it on selection and
   compensating with fractional padding shifted the row by a pixel, because
   sub-pixel borders and paddings do not round in step. Selection changes
   colour only, and an inset ring supplies the extra visual weight. */
.asi-co__plan {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px 15px;
	background: #fff;
	border: 2px solid var(--asi-line);
	border-radius: 12px;
	cursor: pointer;
	transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}

.asi-co__plan:hover {
	border-color: #cbd5e1;
}

.asi-co__plan.is-selected {
	background: color-mix(in srgb, var(--asi-step) 4%, #fff);
	border-color: var(--asi-step);
	box-shadow: inset 0 0 0 1px var(--asi-step), 0 1px 3px rgba(15, 23, 42, .07);
}

@supports not (background: color-mix(in srgb, red 5%, white)) {
	.asi-co__plan.is-selected {
		background: #f5f7fd;
	}
}

.asi-co__plan.is-selected .asi-co__price {
	color: var(--asi-step);
}

.asi-co__plan-input,
.asi-co__pay input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.asi-co__plan-input:focus-visible ~ .asi-co__dot,
.asi-co__pay input:focus-visible ~ .asi-co__dot {
	outline: 2px solid var(--asi-primary);
	outline-offset: 2px;
}

.asi-co__dot {
	position: relative;
	flex: none;
	width: 17px;
	height: 17px;
	background: #fff;
	border: 2px solid #cbd5e1;
	border-radius: 50%;
	transition: border-color .16s ease, background-color .16s ease;
}

.asi-co__plan.is-selected .asi-co__dot {
	background: var(--asi-step);
	border-color: var(--asi-step);
}

.asi-co__pay.is-selected .asi-co__dot {
	background: var(--asi-primary);
	border-color: var(--asi-primary);
}

.asi-co__plan.is-selected .asi-co__dot::after,
.asi-co__pay.is-selected .asi-co__dot::after {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 6px;
	height: 6px;
	background: #fff;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	content: "";
}

.asi-co__plan-main {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.asi-co__plan-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 7px;
}

.asi-co__plan-name {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -.01em;
}

.asi-co__plan-meta {
	color: var(--asi-muted);
	font-size: 12px;
	line-height: 1.4;
}

.asi-co__chip {
	padding: 2px 7px;
	border-radius: 999px;
	font-size: 9.5px;
	font-weight: 800;
	letter-spacing: .07em;
	text-transform: uppercase;
	white-space: nowrap;
}

.asi-co__chip--grey   { background: #e5e7eb; color: #4b5563; }
.asi-co__chip--red    { background: #dc2626; color: #fff; }
.asi-co__chip--violet { background: #7c3aed; color: #fff; }
.asi-co__chip--amber  { background: #f59e0b; color: #fff; }
.asi-co__chip--green  { background: var(--asi-cta); color: #fff; }
.asi-co__chip--blue   { background: var(--asi-primary); color: #fff; }

.asi-co__plan-price {
	display: flex;
	flex: none;
	flex-direction: column;
	align-items: flex-end;
	gap: 1px;
	text-align: right;
}

.asi-co__old {
	color: #94a3b8;
	font-size: 11.5px;
	text-decoration: line-through;
}

.asi-co__price {
	font-size: 17px;
	font-weight: 800;
	letter-spacing: -.02em;
	white-space: nowrap;
}

.asi-co__monthly {
	color: var(--asi-muted);
	font-size: 11px;
	white-space: nowrap;
}

/* ------------------------------------------------------------- side cards */

.asi-co__sidecard {
	padding: 16px 18px;
	background: var(--asi-bg);
	border: 1px solid var(--asi-line);
	border-radius: var(--asi-radius);
}

.asi-co__sidetitle {
	display: block;
	margin-bottom: 10px;
	color: var(--asi-muted);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.asi-co__sumrow {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	justify-content: space-between;
}

.asi-co__sumleft {
	min-width: 0;
}

.asi-co__sumplan {
	display: block;
	font-size: 16.5px;
	font-weight: 800;
	letter-spacing: -.01em;
	line-height: 1.35;
}

.asi-co__sumsep,
.asi-co__sumdur {
	color: var(--asi-muted);
	font-size: 14px;
	font-weight: 600;
}

.asi-co__sumright {
	flex: none;
	text-align: right;
}

.asi-co__sumold {
	display: block;
	color: #94a3b8;
	font-size: 12px;
	text-decoration: line-through;
}

.asi-co__sumprice {
	display: block;
	font-size: 24px;
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1.15;
	white-space: nowrap;
}

.asi-co__summonthly {
	display: block;
	color: var(--asi-muted);
	font-size: 11.5px;
	white-space: nowrap;
}

/* -------------------------------------------------- décompte de la remise */

.asi-co__bill {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--asi-line);
}

.asi-co__billrow {
	display: flex;
	gap: 12px;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 6px;
	color: var(--asi-muted);
	font-size: 13px;
	/* Les montants doivent s'aligner en colonne : sans chiffres de largeur fixe,
	   « 45,99€ » et « 4,60€ » ne tombent pas sur la même virgule. */
	font-variant-numeric: tabular-nums;
}

.asi-co__billrow > span:last-child,
.asi-co__billrow b {
	flex: none;
	white-space: nowrap;
}

.asi-co__billrow--off {
	color: var(--asi-cta);
	font-weight: 600;
}

.asi-co__billcode {
	padding: 1px 5px;
	background: rgba( 22, 163, 74, .1 );
	border-radius: 3px;
	font-family: inherit;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .02em;
}

.asi-co__billrow--total {
	margin: 10px 0 0;
	padding-top: 10px;
	border-top: 1px solid var(--asi-line);
	color: var(--asi-ink);
	font-size: 14px;
	font-weight: 700;
}

.asi-co__billrow--total b {
	font-size: 24px;
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1.15;
}

.asi-co__sidecard .asi-co__link {
	margin-top: 6px;
}

/* Après le décompte, « Modifier » a besoin d'air : collé au total il se lit
   comme une ligne de plus dans l'addition. */
.asi-co__bill:not([hidden]) + .asi-co__link {
	margin-top: 12px;
}

/* --------------------------------------------------------- payment marks */

.asi-co__marks {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin-bottom: 14px;
}

.asi-co__mark {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 30px;
	padding: 0 9px;
	background: #fff;
	border: 1px solid var(--asi-line);
	border-radius: 6px;
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1;
}

.asi-co__mark-txt {
	color: #475569;
}

.asi-co__mark-ico {
	color: #475569;
}

.asi-co__mark-visa {
	color: #1a1f71;
	font-size: 13px;
	font-style: italic;
	font-weight: 800;
	letter-spacing: -.02em;
}

.asi-co__mc {
	position: relative;
	display: block;
	width: 30px;
	height: 18px;
}

.asi-co__mc i {
	position: absolute;
	top: 1px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
}

.asi-co__mc i:first-child {
	left: 0;
	background: #eb001b;
}

.asi-co__mc i:last-child {
	right: 0;
	background: #f79e1b;
	mix-blend-mode: multiply;
}

.asi-co__mark-pp {
	font-size: 12.5px;
	font-style: italic;
	letter-spacing: -.02em;
}

.asi-co__mark-pp b {
	color: #003087;
	font-weight: 800;
}

.asi-co__mark-pp i {
	color: #009cde;
	font-style: italic;
	font-weight: 800;
}

.asi-co__mark-btc {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 17px;
	height: 17px;
	background: #f7931a;
	color: #fff;
	border-radius: 50%;
	font-size: 11px;
	font-weight: 700;
}

.asi-co__nopay {
	color: var(--asi-muted);
	font-size: 13px;
	line-height: 1.55;
}

.asi-co__nopay strong {
	color: var(--asi-ink);
	font-weight: 700;
}

/* ----------------------------------------------------------------- fields */

.asi-co__form .asi-co__btn {
	margin-top: 18px;
}

.asi-co__form {
	padding: 20px;
	background: #fff;
	border: 1px solid var(--asi-line);
	border-radius: var(--asi-radius);
	box-shadow: var(--asi-shadow);
}

.asi-co__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 15px 18px;
}

@media (min-width: 620px) {
	.asi-co__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

.asi-co__field {
	min-width: 0;
}

.asi-co__field--pay {
	margin-top: 16px;
}

.asi-co__label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 600;
}

.asi-co__inwrap {
	position: relative;
	display: block;
}

.asi-co__inico {
	position: absolute;
	top: 50%;
	left: 13px;
	color: #94a3b8;
	transform: translateY(-50%);
	pointer-events: none;
}

.asi-co__selcaret {
	position: absolute;
	top: 50%;
	right: 12px;
	color: var(--asi-muted);
	transform: translateY(-50%);
	pointer-events: none;
}

/* Double-scoped on purpose. Themes style fields with selectors like
   `input[type="text"], select, textarea { padding: .75em }`, whose specificity
   (0,1,1) beats a single class (0,1,0) — which silently killed the icon
   padding. `.asi-co .asi-co__input` is (0,2,0) and wins. */
.asi-co .asi-co__input {
	display: block;
	width: 100%;
	max-width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 12px 14px;
	background: #fff;
	color: var(--asi-ink);
	border: 1.5px solid var(--asi-line);
	border-radius: 10px;
	/* 16px keeps iOS Safari from zooming the viewport on focus. */
	font-family: inherit;
	font-size: 16px;
	line-height: 1.35;
	outline: none;
	transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
	appearance: none;
}

.asi-co .asi-co__input--icon {
	padding-left: 40px;
}

.asi-co .asi-co__input::placeholder {
	color: #9aa5b4;
	opacity: 1;
}

.asi-co .asi-co__input:focus {
	border-color: var(--asi-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--asi-primary) 14%, transparent);
}

.asi-co .asi-co__input.is-bad {
	background: #fef6f6;
	border-color: #f0a9a9;
}

.asi-co .asi-co__select {
	padding-right: 38px;
	color: var(--asi-ink);
	cursor: pointer;
}

.asi-co__error {
	margin: 5px 0 0;
	color: #dc2626;
	font-size: 12px;
	font-weight: 600;
}

.asi-co__error--global {
	margin: 0 0 18px;
	padding: 12px 15px;
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: 10px;
	font-size: 13.5px;
}

/* ------------------------------------------------------- country + phone */

.asi-co__cc {
	position: relative;
}

.asi-co .asi-co__cc-toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 12px 12px 12px 40px;
	background: #fff;
	color: var(--asi-ink);
	border: 1.5px solid var(--asi-line);
	border-radius: 10px;
	font-family: inherit;
	font-size: 15px;
	text-align: left;
	cursor: pointer;
	transition: border-color .16s ease, box-shadow .16s ease;
}

.asi-co__cc-toggle .asi-co__inico {
	left: 13px;
}

.asi-co__cc-toggle:hover,
.asi-co__cc-toggle:focus,
.asi-co__cc-toggle:focus-visible,
.asi-co__cc-toggle:active,
.asi-co__cc-toggle[aria-expanded="true"] {
	background: #fff;
	color: var(--asi-ink);
	border-color: var(--asi-primary);
	box-shadow: none;
}

.asi-co__cc-flag {
	flex: none;
	font-size: 17px;
	line-height: 1;
}

.asi-co__cc-name {
	flex: 1 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.asi-co__cc-dial {
	flex: none;
	color: var(--asi-muted);
	font-size: 13.5px;
	font-variant-numeric: tabular-nums;
}

.asi-co__cc-caret {
	flex: none;
	color: var(--asi-muted);
}

.asi-co__phone {
	display: flex;
	gap: 8px;
}

.asi-co__dialbox {
	display: flex;
	flex: none;
	align-items: center;
	gap: 5px;
	min-height: 48px;
	padding: 0 12px;
	background: var(--asi-bg);
	border: 1.5px solid var(--asi-line);
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
}

.asi-co__dialbox span:first-child {
	font-size: 16px;
	line-height: 1;
}

.asi-co__input--phone {
	flex: 1 1 auto;
	min-width: 0;
}

.asi-co__cc-panel {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 40;
	width: 100%;
	min-width: 260px;
	padding: 8px;
	background: #fff;
	border: 1px solid var(--asi-line);
	border-radius: 11px;
	box-shadow: 0 14px 38px rgba(15, 23, 42, .18);
}

.asi-co .asi-co__cc-search {
	display: block;
	width: 100%;
	margin: 0 0 6px;
	padding: 9px 12px;
	background: #fff;
	color: var(--asi-ink);
	border: 1.5px solid var(--asi-line);
	border-radius: 8px;
	font-family: inherit;
	font-size: 16px;
	outline: none;
}

.asi-co__cc-search:focus {
	border-color: var(--asi-primary);
}

.asi-co__cc-list {
	max-height: 244px;
	margin: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.asi-co__cc-item {
	display: flex;
	align-items: center;
	gap: 9px;
	width: 100%;
	padding: 9px;
	background: none;
	color: var(--asi-ink);
	border: 0;
	border-radius: 7px;
	font-family: inherit;
	font-size: 14px;
	text-align: left;
	cursor: pointer;
}

.asi-co__cc-item:hover,
.asi-co__cc-item:focus,
.asi-co__cc-item:focus-visible {
	background: var(--asi-bg);
	color: var(--asi-ink);
	outline: none;
	box-shadow: none;
}

.asi-co__cc-item[aria-selected="true"] {
	background: var(--asi-bg);
	font-weight: 700;
}

.asi-co__cc-item-flag {
	flex: none;
	font-size: 16px;
	line-height: 1;
}

.asi-co__cc-item-name {
	flex: 1 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.asi-co__cc-item-dial {
	flex: none;
	color: var(--asi-muted);
	font-variant-numeric: tabular-nums;
}

.asi-co__cc-empty {
	padding: 12px 9px;
	color: var(--asi-muted);
	font-size: 13px;
	text-align: center;
}

/* ---------------------------------------------------------- payment radio */

.asi-co__pays {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.asi-co__pay {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 14px;
	background: #fff;
	border: 1.5px solid var(--asi-line);
	border-radius: 10px;
	font-size: 14.5px;
	cursor: pointer;
	transition: border-color .16s ease;
}

.asi-co__pay:hover {
	border-color: #cbd5e1;
}

.asi-co__pay.is-selected {
	border-color: var(--asi-primary);
}

.asi-co__pay-label {
	font-weight: 600;
}

/* ------------------------------------------------------------ promo block */

.asi-co__promo {
	display: flex;
	gap: 12px;
	margin-top: 18px;
	padding: 14px 16px;
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
	border-radius: 11px;
}

.asi-co__promopill {
	flex: none;
	align-self: flex-start;
	padding: 3px 9px;
	background: var(--asi-cta);
	color: #fff;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.asi-co__promobody {
	min-width: 0;
}

.asi-co__promobody b {
	display: block;
	margin-bottom: 4px;
	color: #14532d;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
}

.asi-co__promobody p {
	color: #256b43;
	font-size: 12.5px;
	line-height: 1.55;
}

/* --------------------------------------------------------------- buttons */

.asi-co__btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: 100%;
	min-height: 54px;
	margin: 26px 0 0;
	padding: 15px 22px;
	border: 0;
	border-radius: 11px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .16s ease, transform .1s ease, opacity .16s ease;
}

.asi-co__btn:active {
	transform: translateY(1px);
}

/* Step 1 advances (navy); step 2 commits the order (green). */
.asi-co__btn--next {
	background: var(--asi-step);
	color: #fff;
}

.asi-co__btn--next:hover,
.asi-co__btn--next:focus,
.asi-co__btn--next:focus-visible,
.asi-co__btn--next:active {
	background: color-mix(in srgb, var(--asi-step) 85%, #000);
	color: #fff;
}

@supports not (background: color-mix(in srgb, red 5%, white)) {
	.asi-co__btn--next:hover {
		background: #0f2560;
	}
}

.asi-co__actions {
	max-width: 680px;
	margin: 0 auto;
}

.asi-co__btn--cta {
	background: var(--asi-cta);
	color: #fff;
}

.asi-co__btn--cta:hover,
.asi-co__btn--cta:focus,
.asi-co__btn--cta:focus-visible,
.asi-co__btn--cta:active {
	background: var(--asi-cta-dark);
	color: #fff;
}

.asi-co__btn:focus-visible {
	outline: 2px solid var(--asi-ink);
	outline-offset: 2px;
}

.asi-co__btn[disabled],
.asi-co__btn.is-busy {
	cursor: not-allowed;
	opacity: .6;
}

.asi-co__btn--wa {
	background: #25d366;
	color: #fff;
}

.asi-co__btn--wa:hover,
.asi-co__btn--wa:focus,
.asi-co__btn--wa:focus-visible,
.asi-co__btn--wa:active {
	background: #1eb855;
	color: #fff;
}

.asi-co__spinner {
	display: none;
	flex: none;
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255, 255, 255, .4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: asi-spin .7s linear infinite;
}

.asi-co__btn.is-busy .asi-co__spinner {
	display: block;
}

@keyframes asi-spin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.asi-co__spinner { animation-duration: 2s; }
	.asi-co__stepline span,
	.asi-co__stepdot,
	.asi-co__plan,
	.asi-co__btn { transition: none; }
}

.asi-co__link {
	display: inline-block;
	padding: 2px 0;
	background: none;
	color: var(--asi-primary);
	border: 0;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.asi-co__link:hover,
.asi-co__link:focus,
.asi-co__link:focus-visible,
.asi-co__link:active {
	background: none;
	color: var(--asi-primary-dark);
	text-decoration: underline;
	box-shadow: none;
}

.asi-co__legal {
	margin: 11px 0 0;
	color: var(--asi-muted);
	font-size: 12.5px;
	text-align: center;
}

/* ------------------------------------------------------- confirmation */

.asi-co__check {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	margin: 0 auto 15px;
	background: #ecfdf5;
	color: var(--asi-cta);
	border: 1px solid #a7f3d0;
	border-radius: 50%;
}

.asi-co__order-no {
	margin: 0 0 10px;
	color: var(--asi-primary);
	font-size: 14.5px;
	font-weight: 800;
	letter-spacing: .02em;
}

.asi-co__recap,
.asi-co__pay-info {
	margin-top: 16px;
	padding: 14px 16px;
	background: var(--asi-bg);
	border: 1px solid var(--asi-line);
	border-radius: 11px;
	text-align: left;
}

.asi-co__recap p,
.asi-co__pay-info p {
	display: flex;
	gap: 12px;
	justify-content: space-between;
	padding: 4px 0;
	font-size: 13.5px;
}

.asi-co__recap p span {
	color: var(--asi-muted);
}

.asi-co__recap p b {
	text-align: right;
	word-break: break-word;
}

.asi-co__recap-total {
	margin-top: 4px;
	padding-top: 9px !important;
	border-top: 1px solid var(--asi-line);
}

.asi-co__recap-total b {
	color: var(--asi-ink);
	font-size: 17px;
	font-weight: 800;
}

.asi-co__pay-info p {
	display: block;
	color: var(--asi-ink);
	word-break: break-word;
}

/* --------------------------------------------------------------- badges */

.asi-co__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	justify-content: center;
	margin: 26px 0 0;
}

.asi-co__badge {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--asi-muted);
	font-size: 12.5px;
}

.asi-co__badge--green .asi-co__badge-ico { color: var(--asi-cta); }
.asi-co__badge--amber .asi-co__badge-ico { color: #f59e0b; }
.asi-co__badge--blue  .asi-co__badge-ico { color: var(--asi-primary); }

.asi-co__badge-dot {
	width: 5px;
	height: 5px;
	background: #34d399;
	border-radius: 50%;
}

/* -------------------------------------------------------------- honeypot */

.asi-co__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.asi-co--empty {
	padding: 30px 18px;
	color: var(--asi-muted);
	text-align: center;
}

/* ------------------------------------------------------------- responsive */

@media (max-width: 899px) {
	.asi-co__stepline {
		flex: 0 1 70px;
	}
}

@media (max-width: 620px) {
	.asi-co__bar-inner {
		padding: 12px 15px;
	}

	.asi-co__secure {
		font-size: 12.5px;
	}

	/* Three items do not fit a phone bar: the padlock alone still carries the
	   reassurance, so the wording goes and the logo keeps its centre. */
	.asi-co__bar--logo-center .asi-co__secure-txt {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.asi-co__bar-left {
		gap: 10px;
	}

	.asi-co__back {
		font-size: 13.5px;
	}

	.asi-co__wrap {
		padding: 20px 15px 38px;
	}

	.asi-co__steps {
		gap: 9px;
		margin-bottom: 28px;
	}

	.asi-co__steplabel {
		font-size: 13px;
	}

	.asi-co__form,
	.asi-co__card {
		padding: 16px 14px;
	}

	.asi-co__sidecard {
		padding: 14px 15px;
	}

	.asi-co__title {
		font-size: 21px;
	}

	.asi-co__head {
		margin-bottom: 20px;
	}

	.asi-co__sumprice {
		font-size: 21px;
	}

	.asi-co__plan {
		gap: 10px;
		padding: 12px 13px;
	}

	.asi-co__plan-name {
		font-size: 14.5px;
	}

	.asi-co__group-title {
		/* Cards lose 2px of padding at this width, so the inset follows. */
		padding: 2px 15px 4px;
		font-size: 10.5px;
	}

	.asi-co__price {
		font-size: 16px;
	}

	.asi-co__btn {
		font-size: 15px;
	}

	.asi-co__badges {
		gap: 6px 14px;
	}
}

/* Very narrow phones: keep the order button text on one line. */
@media (max-width: 380px) {
	.asi-co__btn {
		gap: 6px;
		padding: 15px 14px;
		font-size: 14.5px;
	}
}

/* Full-page template: neutralise theme background behind the checkout. */
body.asi-co-page {
	margin: 0;
	background: var(--asi-page-bg, #fff);
}


/* -------------------------------------------------------- options payantes */

.asi-co__addons {
	margin: 0;
}

.asi-co__addons-title {
	display: block;
	margin-bottom: 8px;
	color: var(--asi-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.asi-co__addons-list {
	display: grid;
	gap: 8px;
}

/* Toute la pastille est cliquable, et l'état coché se lit sans chercher la
   case — même parti pris que le sélecteur de forfaits de l'admin. */
.asi-co__addon {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 13px;
	background: #fff;
	border: 1px solid var(--asi-line);
	border-radius: 10px;
	cursor: pointer;
	transition: border-color .12s ease, background-color .12s ease;
}

.asi-co__addon:hover {
	border-color: #cbd5e1;
}

.asi-co__addon.is-on {
	background: #f0fdf4;
	border-color: var(--asi-cta);
	box-shadow: inset 0 0 0 1px var(--asi-cta);
}

.asi-co .asi-co__addon input[type="checkbox"] {
	flex: none;
	width: 18px;
	min-width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--asi-cta);
}

.asi-co__addon-body {
	flex: 1 1 auto;
	min-width: 0;
}

.asi-co__addon-body b {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 7px;
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.35;
}

/* La pastille suit la ligne de base du nom, pas sa hauteur de police : sans ça
   elle flotte d'un pixel au-dessus et ça se voit. */
.asi-co__addon-body b .asi-co__chip {
	position: relative;
	top: -1px;
}

.asi-co__addon-note {
	display: block;
	margin-top: 2px;
	color: var(--asi-muted);
	font-size: 12.5px;
	line-height: 1.45;
}

/* « /mois » est une unité, pas un montant : plus discret que le chiffre, mais
   sur la même ligne, sinon le prix se lit comme un total. */
.asi-co__addon-price--free {
	color: var(--asi-cta);
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: .06em;
}

.asi-co__addon-per {
	color: var(--asi-muted);
	font-size: 12px;
	font-weight: 600;
}

/* La durée qui explique la multiplication, dans le récapitulatif. */
.asi-co__billmonths {
	color: var(--asi-muted);
	font-variant-numeric: tabular-nums;
}

.asi-co__addon-price {
	flex: none;
	color: var(--asi-cta);
	font-size: 14.5px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.asi-co__billrow--add {
	color: var(--asi-ink);
}

/* ------------------------------------------- rythme vertical de l'étape 2 */

/* Chaque bloc portait sa propre marge — 4, 0, 4, 18, 11 — et l'œil ne trouvait
   plus de régularité : le titre « Options » touchait le menu juste au-dessus.
   Une seule règle pour tous les frères qui suivent la grille des champs, et le
   rythme ne peut plus diverger au fil des ajouts. */
.asi-co__form > .asi-co__grid ~ * {
	margin-top: 24px;
}

/* La mention sous le bouton lui appartient : elle reste collée. */
.asi-co__form > .asi-co__legal {
	margin-top: 10px;
}

/* Le pot de miel est invisible mais bien dans le flux : lui donner du rythme
   creuserait un trou que personne ne peut expliquer en regardant la page. */
.asi-co__form > .asi-co__hp {
	margin-top: 0;
}

/* ------------------------------------------------------- consentement */

.asi-co__consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	cursor: pointer;
}

.asi-co .asi-co__consent input[type="checkbox"] {
	flex: none;
	width: 17px;
	min-width: 17px;
	height: 17px;
	margin: 1px 0 0;
	accent-color: var(--asi-cta);
}

.asi-co__consent span {
	color: var(--asi-muted);
	font-size: 13px;
	line-height: 1.5;
}

/* ------------------------------------------------------------ code promo */

/* `__code`, pas `__promo` : `.asi-co__promo` est déjà l'encadré vert « OFFERT »
   plus bas dans le récapitulatif, et un champ n'a rien à faire dans son décor. */
.asi-co__code {
	margin: 0;
}

/* Un lien, pas un bouton : le champ code ne doit pas peser autant que le
   paiement. Toutes les couleurs sont redéclarées — le thème habille les
   <button> nus, survol compris. */
.asi-co .asi-co__code-toggle {
	padding: 0;
	background: none;
	border: 0;
	color: var(--asi-muted, #64748b);
	cursor: pointer;
	font-family: inherit;
	font-size: 13.5px;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.asi-co .asi-co__code-toggle:hover,
.asi-co .asi-co__code-toggle:focus,
.asi-co .asi-co__code-toggle:active {
	background: none;
	color: var(--asi-ink, #1e293b);
}

/* Une fois ouvert, le lien a fait son travail : le laisser reviendrait à
   proposer de refermer un champ que le client vient de demander. */
.asi-co__code.is-open .asi-co__code-toggle {
	display: none;
}

.asi-co__code-row {
	display: flex;
	gap: 8px;
}

.asi-co .asi-co__code-input {
	flex: 1 1 auto;
	min-width: 0;
	text-transform: uppercase;
}

.asi-co .asi-co__code-apply {
	flex: 0 0 auto;
	padding: 0 18px;
	background: var(--asi-ink, #1e293b);
	border: 0;
	border-radius: 10px;
	color: #fff;
	cursor: pointer;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
}

.asi-co .asi-co__code-apply:hover,
.asi-co .asi-co__code-apply:focus,
.asi-co .asi-co__code-apply:active {
	background: #0f172a;
	color: #fff;
}

.asi-co .asi-co__code-apply[disabled] {
	cursor: default;
	opacity: .6;
}

.asi-co__code-msg {
	margin: 8px 0 0;
	color: #166534;
	font-size: 13px;
	font-weight: 600;
}

.asi-co__code-msg.is-bad {
	color: #b32d2e;
	font-weight: 400;
}