/* ==========================================================================
   AsYouShip — Pages intérieures
   1. En-tête de page pilier
   2. Arguments détaillés
   3. Étapes suivantes
   4. Visuels : file de commandes, écran agent, bordereau, paiements
   5. Blocs d'appoint
   ========================================================================== */

/* ==========================================================================
   1. EN-TÊTE DE PAGE PILIER
   ========================================================================== */
.ays-pillar-hero {
	position: relative;
	overflow: hidden;
	padding-block: clamp(28px, 4vw, 48px) clamp(56px, 6vw, 92px);
	background: var(--ays-canvas);   /* ivoire, comme l'en-tête de la page d'accueil */
}

/* Halo décoratif de l'ancien style (aria-hidden dans les vues) : la charte est
   à plat, il n'est plus peint. Employé aussi par les en-têtes de pages
   transverses et par la page de démonstration. */
.ays-pillar-hero__aura { display: none; }

.ays-pillar-hero__aura {
	position: absolute;
	inset: -40% -12% auto -12%;
	height: 760px;
	background:
		radial-gradient(42% 56% at 22% 26%, rgba(60, 209, 144, .12), transparent 62%),
		radial-gradient(36% 50% at 84% 14%, rgba(13, 38, 36, .05), transparent 60%);
	pointer-events: none;
}

.ays-breadcrumb {
	position: relative;
	display: flex;
	align-items: center;
	gap: .5rem;
	margin-bottom: clamp(24px, 3vw, 40px);
	color: var(--ays-slate-400);
	font-size: var(--ays-fs-xs);
}

.ays-breadcrumb a { color: var(--ays-slate-500); }
.ays-breadcrumb a:hover { color: var(--ays-link); }

/* Le fil d'Ariane est une navigation, et souvent le seul chemin de retour sur
   un téléphone. Mesuré à 45 × 21 : sous le minimum, et logé tout en haut de
   l'écran là où le pouce vise le moins bien. */
@media (pointer: coarse) {
	.ays-breadcrumb a {
		display: inline-flex;
		align-items: center;
		min-height: 24px;
	}
}
.ays-breadcrumb [aria-current] { color: var(--ays-slate-600); font-weight: 560; }

.ays-pillar-hero__grid {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
	gap: clamp(36px, 4vw, 64px);
	align-items: center;
}

/* Voir la note de .ays-split__grid : protéger la piste ne suffit pas, il faut
   aussi autoriser l'élément à se comprimer. */
.ays-pillar-hero__grid > * { min-width: 0; }

.ays-pillar-hero__step {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	margin-bottom: var(--ays-sp-5);
	color: var(--ays-slate-500);
	font-size: .82rem;
	font-weight: 650;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.ays-pillar-hero__num {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--ays-brand-mint);   /* le numéro du pilier dans le point de la marque */
	color: var(--ays-brand-deep);
	font-size: .78rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0;
}

.ays-pillar-hero h1 {
	margin-bottom: var(--ays-sp-5);
	font-size: clamp(2rem, 1.45rem + 1.75vw, 2.8rem);
	line-height: 1.08;
}

.ays-microcopy {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ays-sp-5);
	margin: var(--ays-sp-6) 0 0;
	padding: 0;
	list-style: none;
	color: var(--ays-slate-500);
	font-family: var(--ays-font-mono);
	font-size: .8rem;
}

.ays-microcopy li { display: flex; align-items: center; gap: .45rem; }

.ays-microcopy__dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--ays-cobalt-300);
}

/* ==========================================================================
   2. ARGUMENTS DÉTAILLÉS
   ========================================================================== */
.ays-points {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--ays-sp-5) clamp(32px, 4vw, 64px);
}

.ays-point {
	display: flex;
	gap: var(--ays-sp-4);
	padding: var(--ays-sp-5) 0;
	border-top: 1px solid var(--ays-slate-200);
}

.ays-point__index {
	flex: 0 0 auto;
	color: var(--ays-cobalt);
	font-family: var(--ays-font-body);
	font-size: .78rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: .06em;
	padding-top: 3px;
}

.ays-point__title {
	margin-bottom: var(--ays-sp-2);
	font-size: 1.06rem;
	line-height: 1.35;
}

.ays-point__text {
	margin: 0;
	color: var(--ays-slate-600);
	font-size: .95rem;
	line-height: 1.6;
}

/* ==========================================================================
   3. ÉTAPES SUIVANTES
   ========================================================================== */
.ays-next {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--ays-sp-5);
}

.ays-next__card {
	display: flex;
	flex-direction: column;
	gap: var(--ays-sp-2);
	padding: var(--ays-sp-6);
	border: 1px solid var(--ays-slate-200);
	border-radius: var(--ays-r-lg);
	background: #fff;
	color: inherit;
	box-shadow: var(--ays-sh-1);
	transition: transform var(--ays-t-base) var(--ays-ease),
		box-shadow var(--ays-t-base) var(--ays-ease),
		border-color var(--ays-t-base) var(--ays-ease);
}

.ays-next__card:hover {
	transform: translateY(-3px);
	border-color: var(--ays-cobalt-100);
	box-shadow: var(--ays-sh-2);
	color: inherit;
}

.ays-next__num {
	color: var(--ays-slate-400);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .16em;
}

.ays-next__icon {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	margin-bottom: var(--ays-sp-2);
	border-radius: var(--ays-r-md);
	background: var(--ays-cobalt-050);
	color: var(--ays-cobalt);
	font-size: 1.15rem;
}

.ays-next__name {
	color: var(--ays-ink);
	font-family: var(--ays-font-display);
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: -.02em;
}

.ays-next__text {
	flex: 1;
	margin-bottom: var(--ays-sp-3);
	color: var(--ays-slate-600);
	font-size: .94rem;
	line-height: 1.5;
}

/* ==========================================================================
   4. VISUELS DES PAGES PILIERS
   ========================================================================== */
.ays-visual { position: relative; }

/* --- Recevoir : convergence des canaux ---------------------------------- */
.ays-sources {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--ays-sp-2);
}

.ays-src {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .42rem .8rem;
	border: 1px solid var(--ays-slate-200);
	border-radius: var(--ays-r-pill);
	background: #fff;
	box-shadow: var(--ays-sh-1);
	color: var(--ays-slate-700);
	font-size: .82rem;
	font-weight: 580;
	white-space: nowrap;
}

.ays-src i { color: var(--ays-cobalt); }

.ays-converge {
	display: block;
	width: 100%;
	height: 56px;
}

/* Couleur des tracés écrite en attributs dans la vue (visual_recevoir.php) :
   la règle CSS l'emporte, l'opacité de chaque arrêt est conservée. */
.ays-converge stop { stop-color: var(--ays-brand-deep); }

/* --- Confirmer : l'écran de l'agent ------------------------------------- */
.ays-drawer {
	border: 1px solid var(--ays-slate-200);
	border-radius: var(--ays-r-xl);
	background: #fff;
	box-shadow: var(--ays-sh-3);
	overflow: hidden;
}

.ays-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ays-sp-3);
	padding: var(--ays-sp-5);
	border-bottom: 1px solid var(--ays-slate-200);
	background: var(--ays-canvas);
}

.ays-drawer__ref {
	display: block;
	color: var(--ays-ink);
	font-family: var(--ays-font-display);
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: -.02em;
}

.ays-drawer__meta { display: block; color: var(--ays-slate-500); font-size: .82rem; }

.ays-drawer__client {
	display: flex;
	align-items: center;
	gap: var(--ays-sp-3);
	flex-wrap: wrap;
	padding: var(--ays-sp-5);
	border-bottom: 1px solid var(--ays-slate-100);
}

.ays-drawer__avatar {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--ays-cobalt-050);
	color: var(--ays-cobalt-700);
	font-size: .8rem;
	font-weight: 700;
}

.ays-drawer__name { display: block; color: var(--ays-ink); font-size: .95rem; font-weight: 640; }
.ays-drawer__phone { display: block; color: var(--ays-slate-400); font-family: var(--ays-font-mono); font-size: .8rem; letter-spacing: .12em; }

.ays-drawer__tags {
	display: flex;
	gap: var(--ays-sp-2);
	flex-wrap: wrap;
	margin-inline-start: auto;
}

.ays-drawer__block {
	padding: var(--ays-sp-5);
	border-bottom: 1px solid var(--ays-slate-100);
}

.ays-drawer__label {
	display: block;
	margin-bottom: var(--ays-sp-3);
	color: var(--ays-slate-400);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.ays-attempt {
	display: flex;
	align-items: center;
	gap: var(--ays-sp-3);
	padding: .4rem 0;
	font-size: .88rem;
}

.ays-attempt__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ays-slate-300);
}

.ays-attempt__dot--relance { background: var(--ays-relance); }
.ays-attempt__dot--cobalt  { background: var(--ays-cobalt); }

.ays-attempt__text { color: var(--ays-slate-600); }

.ays-attempt__state {
	margin-inline-start: auto;
	color: var(--ays-relance-ink);
	font-weight: 620;
	font-size: .82rem;
}

.ays-attempt__state--live { color: var(--ays-cobalt-700); }

.ays-score {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ays-sp-2);
}

.ays-score__chip {
	padding: .3rem .65rem;
	border: 1px dashed var(--ays-slate-300);
	border-radius: var(--ays-r-pill);
	color: var(--ays-slate-500);
	font-size: .76rem;
	font-weight: 560;
}

.ays-score__chip--on {
	border-style: solid;
	border-color: var(--ays-cobalt-100);
	background: var(--ays-cobalt-050);
	color: var(--ays-cobalt-700);
}

.ays-drawer__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ays-sp-2);
	padding: var(--ays-sp-5);
	background: var(--ays-canvas);
}

.ays-fake-btn {
	padding: .48rem .9rem;
	border: 1px solid var(--ays-slate-200);
	border-radius: var(--ays-r-sm);
	background: #fff;
	color: var(--ays-slate-600);
	font-size: .82rem;
	font-weight: 600;
}

.ays-fake-btn--cash    { border-color: transparent; background: var(--ays-cash);    color: var(--ays-brand-deep); }   /* blanc sur menthe : 1,96:1 */
.ays-fake-btn--relance { border-color: var(--ays-relance-line);     background: var(--ays-relance-050); color: var(--ays-relance-ink); }
.ays-fake-btn--ghost   { border-style: dashed; color: var(--ays-cobalt-700); }

/* --- Livrer : règles d'aiguillage et bordereau --------------------------- */
.ays-rules {
	padding: var(--ays-sp-5);
	border: 1px solid var(--ays-slate-200);
	border-radius: var(--ays-r-lg);
	background: #fff;
	box-shadow: var(--ays-sh-2);
}

.ays-rules__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ays-sp-3);
	margin-bottom: var(--ays-sp-4);
}

.ays-rules__title {
	color: var(--ays-ink);
	font-family: var(--ays-font-display);
	font-size: .98rem;
	font-weight: 700;
}

.ays-rule {
	display: grid;
	grid-template-columns: 1fr auto auto;
	align-items: center;
	gap: var(--ays-sp-3);
	padding: .6rem 0;
	border-top: 1px solid var(--ays-slate-100);
	font-size: .88rem;
}

.ays-rule__cond { color: var(--ays-slate-600); }
.ays-rule__cond i { margin-inline-end: .35rem; color: var(--ays-slate-400); }
.ays-rule__arrow { color: var(--ays-slate-300); }

.ays-rule__carrier {
	padding: .24rem .6rem;
	border-radius: var(--ays-r-sm);
	background: var(--ays-cobalt-050);
	color: var(--ays-cobalt-700);
	font-weight: 640;
	white-space: nowrap;
}

.ays-rules__note {
	margin: var(--ays-sp-4) 0 0;
	color: var(--ays-slate-400);
	font-size: var(--ays-fs-xs);
}

.ays-label {
	margin-top: var(--ays-sp-5);
	margin-inline-start: auto;
	max-width: 340px;
	padding: var(--ays-sp-5);
	border: 1px solid var(--ays-slate-300);
	border-radius: var(--ays-r-md);
	background: #fff;
	box-shadow: var(--ays-sh-3);
}

.ays-label__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ays-sp-3);
	padding-bottom: var(--ays-sp-3);
	border-bottom: 1px dashed var(--ays-slate-300);
}

.ays-label__carrier {
	color: var(--ays-ink);
	font-family: var(--ays-font-display);
	font-size: .85rem;
	font-weight: 700;
}

.ays-label__body {
	display: grid;
	gap: 6px;
	padding-block: var(--ays-sp-4);
	font-size: .82rem;
}

.ays-label__field { color: var(--ays-slate-600); }
.ays-label__field b { display: block; color: var(--ays-slate-400); font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.ays-label__field--cod { color: var(--ays-cash-ink); font-weight: 700; font-size: .95rem; }

.ays-label__barcode {
	display: block;
	height: 46px;
	margin-bottom: 6px;
	background-image: repeating-linear-gradient(90deg,
		var(--ays-ink) 0 2px, transparent 2px 4px,
		var(--ays-ink) 4px 5px, transparent 5px 9px,
		var(--ays-ink) 9px 12px, transparent 12px 14px,
		var(--ays-ink) 14px 15px, transparent 15px 19px);
}

.ays-label__code {
	display: block;
	color: var(--ays-slate-500);
	font-family: var(--ays-font-mono);
	font-size: .72rem;
	letter-spacing: .16em;
	text-align: center;
}

/* --- Encaisser : rapprochement des paiements ---------------------------- */
.ays-pay { padding: var(--ays-sp-2) 0; }

.ays-pay__row {
	display: grid;
	grid-template-columns: 78px 1fr 44px 72px auto;
	align-items: center;
	gap: var(--ays-sp-3);
	padding: .6rem var(--ays-sp-4);
	border-bottom: 1px solid var(--ays-slate-100);
	color: var(--ays-slate-600);
	font-size: .84rem;
}

.ays-pay__row:last-child { border-bottom: 0; }

.ays-pay__row--head {
	color: var(--ays-slate-400);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.ays-pay__ref { color: var(--ays-ink); font-weight: 640; }

/* La carte se pose sous l'angle inférieur gauche, hors du tableau. */
.ays-visual--offset { padding-bottom: 34px; }

.ays-float--report {
	inset-block-start: calc(100% - 54px);
	inset-inline-start: -18px;
}

.ays-float--report .ays-float__icon { background: var(--ays-cash-050); color: var(--ays-cash-ink); }

/* ==========================================================================
   5. BLOCS D'APPOINT
   ========================================================================== */
.ays-notice {
	display: flex;
	gap: var(--ays-sp-4);
	max-width: 860px;
	margin: clamp(40px, 4vw, 64px) auto 0;
	padding: var(--ays-sp-5) var(--ays-sp-6);
	border: 1px solid var(--ays-cobalt-100);
	border-radius: var(--ays-r-lg);
	background: var(--ays-cobalt-050);
	color: var(--ays-slate-700);
	font-size: .94rem;
	line-height: 1.6;
}

.ays-notice__icon { flex: 0 0 auto; color: var(--ays-cobalt); font-size: 1.1rem; }
.ays-notice strong { color: var(--ays-ink); }

.ays-retry {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--ays-sp-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ays-retry__step {
	position: relative;
	padding: var(--ays-sp-5);
	border: 1px solid var(--ays-slate-200);
	border-radius: var(--ays-r-md);
	background: #fff;
	text-align: center;
}

.ays-retry__step:not(:last-child)::after {
	content: '\2192';
	position: absolute;
	inset-inline-start: calc(100% + 2px);
	inset-block-start: 50%;
	width: 12px;
	color: var(--ays-slate-300);
	text-align: center;
	transform: translateY(-50%);
}

.ays-retry__when {
	display: block;
	color: var(--ays-cobalt);
	font-family: var(--ays-font-display);
	font-size: 1.2rem;
	font-weight: 700;
	letter-spacing: -.02em;
}

.ays-retry__who {
	display: block;
	margin-top: 2px;
	color: var(--ays-slate-500);
	font-size: .8rem;
}

.ays-retry__step--end { border-color: var(--ays-retour-line); background: var(--ays-retour-050); }
.ays-retry__step--end .ays-retry__when { color: var(--ays-retour-ink); }

.ays-split__grid--tight { gap: clamp(28px, 3vw, 52px); align-items: center; }

/* ==========================================================================
   6. PAGES TRANSVERSES
   ========================================================================== */
.ays-page-hero {
	position: relative;
	overflow: hidden;
	padding-block: clamp(28px, 4vw, 48px) clamp(40px, 5vw, 68px);
	background: var(--ays-canvas);
}

.ays-page-hero__inner {
	position: relative;
	max-width: 780px;
	margin-inline: auto;
	text-align: center;
}

.ays-page-hero h1 {
	margin-bottom: var(--ays-sp-5);
	font-size: clamp(2rem, 1.45rem + 1.75vw, 2.8rem);
	line-height: 1.08;
}

.ays-page-hero .ays-lead { margin-inline: auto; }
/* Le surtitre garde son point menthe, centré ou non : c'est le repère de la
   marque, plus un trait qu'il fallait masquer en composition centrée. */

.ays-feature-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--ays-sp-5);
}

.ays-feature-grid--two { grid-template-columns: repeat(2, 1fr); }

/* Une carte devenue lien garde l'aspect d'une carte. */
a.ays-card { display: block; color: inherit; text-decoration: none; }

.ays-mini-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--ays-sp-4);
}

.ays-mini-card {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: var(--ays-sp-5);
	border: 1px solid var(--ays-slate-200);
	border-radius: var(--ays-r-lg);
	background: #fff;
	color: inherit;
	transition: transform var(--ays-t-base) var(--ays-ease),
		border-color var(--ays-t-base) var(--ays-ease),
		box-shadow var(--ays-t-base) var(--ays-ease);
}

.ays-mini-card:hover {
	transform: translateY(-2px);
	border-color: var(--ays-cobalt-100);
	box-shadow: var(--ays-sh-2);
	color: inherit;
}

.ays-mini-card__icon {
	margin-bottom: var(--ays-sp-2);
	color: var(--ays-cobalt);
	font-size: 1.2rem;
}

.ays-mini-card__title { color: var(--ays-ink); font-weight: 640; font-size: .98rem; }
.ays-mini-card__text  { color: var(--ays-slate-500); font-size: .85rem; }

/* --- Extrait d'API ------------------------------------------------------- */
.ays-code {
	border: 1px solid var(--ays-slate-800);
	border-radius: var(--ays-r-lg);
	background: var(--ays-ink);
	box-shadow: var(--ays-sh-3);
	overflow: hidden;
}

.ays-code__head {
	display: flex;
	align-items: center;
	gap: var(--ays-sp-3);
	padding: var(--ays-sp-4) var(--ays-sp-5);
	border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.ays-code__method {
	padding: .16rem .5rem;
	border-radius: var(--ays-r-sm);
	background: var(--ays-cobalt);
	color: #fff;
	font-family: var(--ays-font-mono);
	font-size: .72rem;
	font-weight: 700;
}

.ays-code__path {
	color: rgba(255, 255, 255, .86);
	font-family: var(--ays-font-mono);
	font-size: .84rem;
}

.ays-code__badge {
	margin-inline-start: auto;
	color: rgba(255, 255, 255, .62);
	font-size: .72rem;
}

.ays-code__body {
	margin: 0;
	padding: var(--ays-sp-5);
	overflow-x: auto;
	color: rgba(255, 255, 255, .82);
	font-family: var(--ays-font-mono);
	font-size: .82rem;
	line-height: 1.7;
}

.ays-code__foot {
	display: flex;
	align-items: center;
	gap: var(--ays-sp-3);
	padding: var(--ays-sp-4) var(--ays-sp-5);
	border-top: 1px solid rgba(255, 255, 255, .1);
	background: rgba(255, 255, 255, .03);
	color: rgba(255, 255, 255, .62);
	font-size: .84rem;
}

.ays-code__foot strong { color: #fff; }

.ays-code__status {
	padding: .12rem .45rem;
	border-radius: var(--ays-r-sm);
	background: var(--ays-cash);
	color: var(--ays-brand-deep);
	font-family: var(--ays-font-mono);
	font-size: .74rem;
	font-weight: 700;
}

/* --- Chiffres techniques -------------------------------------------------- */
.ays-figures {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--ays-sp-5);
	padding: var(--ays-sp-8);
	border: 1px solid var(--ays-slate-200);
	border-radius: var(--ays-r-xl);
	background: var(--ays-canvas);
	text-align: center;
}

.ays-figures__value {
	display: block;
	color: var(--ays-ink);
	font-family: var(--ays-font-display);
	font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
	font-weight: 700;
	letter-spacing: -.03em;
}

.ays-figures__label {
	display: block;
	margin-top: 4px;
	color: var(--ays-slate-500);
	font-size: .84rem;
}

/* --- Limites assumées ----------------------------------------------------- */
.ays-limits {
	display: grid;
	gap: var(--ays-sp-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ays-limits li {
	display: flex;
	gap: var(--ays-sp-4);
	padding: var(--ays-sp-4) var(--ays-sp-5);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: var(--ays-r-md);
	background: rgba(255, 255, 255, .04);
	color: rgba(255, 255, 255, .78);
	font-size: .95rem;
	line-height: 1.6;
}

.ays-limits__mark {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	margin-top: .55rem;
	border-radius: 50%;
	background: var(--ays-relance);
}

/* --- Récit ---------------------------------------------------------------- */
.ays-story { margin: 0; padding: 0; list-style: none; }

.ays-story__item {
	display: flex;
	gap: var(--ays-sp-6);
	padding: var(--ays-sp-8) 0;
	border-top: 1px solid var(--ays-slate-200);
}

.ays-story__item:first-child { border-top: 0; padding-top: 0; }

.ays-story__num {
	flex: 0 0 auto;
	color: var(--ays-cobalt);
	font-family: var(--ays-font-display);
	font-size: 1.05rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.ays-story__title { margin-bottom: var(--ays-sp-3); font-size: 1.35rem; }
.ays-story__text  { margin: 0; color: var(--ays-slate-600); }

/* --- Tarifs --------------------------------------------------------------- */
.ays-toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--ays-sp-3);
	margin-top: var(--ays-sp-8);
	padding: .5rem .8rem;
	border: 1px solid var(--ays-slate-200);
	border-radius: var(--ays-r-pill);
	background: #fff;
	box-shadow: var(--ays-sh-1);
}

/* La bascule posée par la section tarifaire, hors de l'en-tête de page.
   Elle ne réclame aucun espacement propre : celui de l'en-tête au-dessus et
   celui de la grille en dessous suffisent. */
.ays-toggle--standalone { display: flex; width: max-content; max-width: 100%; margin: 0 auto; }

.ays-section--flush { padding-block: 0; }

/* Posée juste sous un en-tête ivoire, la bascule chevauche la jointure : la
   moitié haute de sa bande reprend l'ivoire, la moitié basse le blanc de la
   grille des formules. Sans cela, la limite des deux fonds frôlait la pastille. */
.ays-page-hero + .ays-section--flush { background: linear-gradient(var(--ays-canvas) 50%, var(--ays-white) 50%); }

.ays-toggle__label { color: var(--ays-slate-600); font-size: .9rem; font-weight: 580; }

.ays-toggle__save {
	padding: .2rem .6rem;
	border-radius: var(--ays-r-pill);
	background: var(--ays-cash-050);
	color: var(--ays-cash-ink);
	font-size: .78rem;
	font-weight: 650;
}

.ays-switch { display: inline-flex; cursor: pointer; }
.ays-switch input { position: absolute; opacity: 0; width: 0; height: 0; }

.ays-switch__track {
	position: relative;
	display: block;
	width: 42px;
	height: 24px;
	border-radius: var(--ays-r-pill);
	background: var(--ays-slate-300);
	transition: background var(--ays-t-fast) var(--ays-ease-out);
}

.ays-switch__knob {
	position: absolute;
	inset-block-start: 3px;
	inset-inline-start: 3px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	box-shadow: var(--ays-sh-1);
	transition: transform var(--ays-t-base) var(--ays-ease);
}

.ays-switch input:checked + .ays-switch__track { background: var(--ays-cobalt); }
.ays-switch input:checked + .ays-switch__track .ays-switch__knob { transform: translateX(18px); }
.ays-switch input:focus-visible + .ays-switch__track { box-shadow: var(--ays-ring); }

/* Les quatre cartes font la même hauteur : une colonne plus courte que ses
   voisines se lit comme une offre moins fournie. */
.ays-plans {
	display: grid;
	/* minmax(0, 1fr) et non 1fr : sans cela, une ligne longue et insécable
	   élargit sa colonne et les quatre cartes cessent d'être identiques. */
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--ays-sp-4);
	align-items: stretch;
}

.ays-plans > * { min-width: 0; }

.ays-plan {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: var(--ays-sp-6);
	border: 1px solid var(--ays-slate-200);
	border-radius: var(--ays-r-xl);
	background: #fff;
	box-shadow: var(--ays-sh-1);
}

.ays-plan--featured {
	border-color: var(--ays-cobalt);
	box-shadow: var(--ays-sh-3);
}

.ays-plan__badge {
	position: absolute;
	inset-block-start: -12px;
	inset-inline-start: 50%;
	padding: .25rem .7rem;
	border-radius: var(--ays-r-pill);
	background: var(--ays-brand-mint);   /* l'accent de la charte, texte vert profond (8,1:1) */
	color: var(--ays-brand-deep);
	font-size: .72rem;
	font-weight: 650;
	white-space: nowrap;
	transform: translateX(-50%);
}

.ays-plan__name { margin-bottom: 4px; font-size: 1.25rem; }

/* Deux lignes réservées : les prix restent alignés d'une carte à l'autre,
   qu'une accroche tienne sur une ligne ou sur deux. */
.ays-plan__for {
	margin-bottom: var(--ays-sp-5);
	color: var(--ays-slate-500);
	font-size: .88rem;
	line-height: 1.5;
	min-height: 3em;
}

.ays-plan__price {
	margin-bottom: var(--ays-sp-5);
	padding-bottom: var(--ays-sp-5);
	border-bottom: 1px solid var(--ays-slate-100);
}

.ays-plan__amount {
	display: block;
	color: var(--ays-ink);
	font-family: var(--ays-font-display);
	font-size: 1.05rem;
	font-weight: 700;
}

.ays-plan__period { display: block; color: var(--ays-slate-500); font-size: .8rem; }

.ays-plan__strike {
	display: block;
	color: var(--ays-slate-500);
	font-size: .85rem;
	text-decoration: line-through;
}

.ays-plan__limits {
	margin: 0 0 var(--ays-sp-5);
	padding: 0;
	list-style: none;
	font-size: .88rem;
}

.ays-plan__limits li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ays-sp-3);
	padding: .4rem 0;
	min-height: 3.1em;   /* une ligne ou deux : les lignes restent en face */
	color: var(--ays-slate-600);
	min-width: 0;
}

/*
| Intitulé et valeur se partagent la ligne. Sans min-width: 0, un repère
| commercial comme « [PRIX À DÉFINIR] » impose sa largeur et élargit la carte :
| c'est ce qui débordait de 7 px à 1024 px, là où les quatre formules sont
| encore côte à côte mais déjà à l'étroit.
*/
.ays-plan__limits li > * { min-width: 0; }
.ays-plan__limits strong { color: var(--ays-ink); text-align: end; }

.ays-plan__features {
	margin: var(--ays-sp-5) 0 0;
	padding: var(--ays-sp-5) 0 0;
	border-top: 1px solid var(--ays-slate-100);
	list-style: none;
	display: grid;
	gap: var(--ays-sp-2);
	font-size: .88rem;
	color: var(--ays-slate-600);
}

/* La puce garde sa taille, le libellé se replie. Sans min-width: 0, l'élément
   de liste impose sa largeur de contenu minimale et élargit toute la carte —
   y compris sur grand écran, où les quatre colonnes cessaient d'être égales. */
.ays-plan__features li { display: flex; gap: .5rem; align-items: flex-start; min-width: 0; }
.ays-plan__features li > * { min-width: 0; }
.ays-plan__features i { flex: 0 0 auto; }
.ays-plan__features i { margin-top: 3px; color: var(--ays-cash-ink); }

.ays-custom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ays-sp-6);
	flex-wrap: wrap;
	padding: clamp(24px, 3vw, 40px);
	border: 1px dashed var(--ays-slate-300);
	border-radius: var(--ays-r-xl);
	background: var(--ays-canvas);
}

/* --- Pages légales -------------------------------------------------------- */
.ays-prose h2 {
	margin-top: var(--ays-sp-10);
	margin-bottom: var(--ays-sp-4);
	font-size: 1.25rem;
}

.ays-prose h2:first-child { margin-top: 0; }
.ays-prose p { color: var(--ays-slate-600); }

/* ==========================================================================
   7. DEMANDE DE DÉMONSTRATION
   ========================================================================== */
.ays-page-hero--form { padding-block-end: clamp(56px, 6vw, 96px); }

.ays-demo {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: clamp(36px, 4vw, 72px);
	align-items: start;
}

.ays-demo__pitch h1 {
	margin-bottom: var(--ays-sp-5);
	font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem);
	line-height: 1.1;
}

.ays-demo__trust {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--ays-sp-4);
	margin-top: var(--ays-sp-8);
	padding-top: var(--ays-sp-6);
	border-top: 1px solid var(--ays-slate-200);
}

.ays-demo__trust-value {
	display: block;
	color: var(--ays-ink);
	font-family: var(--ays-font-display);
	font-size: 1.35rem;
	font-weight: 700;
	letter-spacing: -.03em;
}

.ays-demo__trust-label {
	display: block;
	color: var(--ays-slate-500);
	font-size: .8rem;
}

.ays-form-card {
	padding: clamp(24px, 3vw, 40px);
	border: 1px solid var(--ays-slate-200);
	border-radius: var(--ays-r-xl);
	background: #fff;
	box-shadow: var(--ays-sh-3);
}

.ays-form-card__title { margin-bottom: var(--ays-sp-2); font-size: 1.4rem; }

.ays-form-card__sub {
	margin-bottom: var(--ays-sp-6);
	color: var(--ays-slate-500);
	font-size: .92rem;
}

.ays-form-card__legal {
	margin: var(--ays-sp-4) 0 0;
	color: var(--ays-slate-500);
	font-size: var(--ays-fs-xs);
	line-height: 1.5;
	text-align: center;
}

.ays-field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--ays-sp-4);
}

fieldset.ays-field {
	border: 0;
	margin: 0 0 var(--ays-sp-5);
	padding: 0;
}

.ays-choices {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ays-sp-2);
}

.ays-choice { cursor: pointer; }
.ays-choice input { position: absolute; opacity: 0; width: 0; height: 0; }

.ays-choice span {
	display: inline-block;
	padding: .42rem .8rem;
	border: 1px solid var(--ays-slate-200);
	border-radius: var(--ays-r-pill);
	color: var(--ays-slate-600);
	font-size: .85rem;
	font-weight: 550;
	transition: all var(--ays-t-fast) var(--ays-ease-out);
}

.ays-choice:hover span { border-color: var(--ays-cobalt-300); }

.ays-choice input:checked + span {
	border-color: var(--ays-cobalt);
	background: var(--ays-cobalt-050);
	color: var(--ays-cobalt-700);
}

.ays-choice input:focus-visible + span { box-shadow: var(--ays-ring); }

.ays-input.is-invalid,
.ays-select.is-invalid,
.ays-textarea.is-invalid { border-color: var(--ays-retour); }

.ays-btn.is-loading { opacity: .7; pointer-events: none; }

/* --- Page de remerciement ------------------------------------------------ */
.ays-thanks__mark {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	margin: 0 auto var(--ays-sp-6);
	border-radius: 50%;
	background: var(--ays-cash-050);
	color: var(--ays-cash-ink);
	font-size: 1.6rem;
}

.ays-thanks__steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--ays-sp-4);
	margin: var(--ays-sp-10) 0 0;
	padding: 0;
	list-style: none;
	text-align: start;
}

.ays-thanks__steps li {
	display: flex;
	gap: var(--ays-sp-3);
	padding: var(--ays-sp-5);
	border: 1px solid var(--ays-slate-200);
	border-radius: var(--ays-r-lg);
	background: #fff;
}

.ays-thanks__steps strong { display: block; color: var(--ays-ink); font-size: .98rem; }
.ays-thanks__steps span span { color: var(--ays-slate-600); font-size: .88rem; }

.ays-thanks__num {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--ays-cobalt-050);
	color: var(--ays-cobalt-700);
	font-size: .8rem;
	font-weight: 700;
}

/* ==========================================================================
   ADAPTATIONS
   ========================================================================== */
@media (max-width: 991.98px) {
	.ays-pillar-hero__grid { grid-template-columns: 1fr; gap: var(--ays-sp-10); }
	.ays-pillar-hero__visual { max-width: 620px; }
	.ays-points { grid-template-columns: 1fr; gap: 0; }
	.ays-next { grid-template-columns: 1fr; }
	.ays-retry { grid-template-columns: repeat(2, 1fr); }
	.ays-retry__step:not(:last-child)::after { display: none; }
	.ays-retry__step--end { grid-column: 1 / -1; }
	.ays-label { margin-inline: auto; }

	.ays-feature-grid { grid-template-columns: repeat(2, 1fr); }
	.ays-figures { grid-template-columns: repeat(3, 1fr); }
	.ays-plans { grid-template-columns: repeat(2, 1fr); gap: var(--ays-sp-5); }
	.ays-plan__for { min-height: 0; }
	.ays-story__item { flex-direction: column; gap: var(--ays-sp-3); }
	.ays-demo { grid-template-columns: 1fr; }
	.ays-thanks__steps { grid-template-columns: 1fr; }
}

@media (max-width: 575.98px) {
	.ays-retry { grid-template-columns: 1fr; }
	.ays-pay__row { grid-template-columns: 70px 1fr auto; }
	.ays-pay__row > :nth-child(3),
	.ays-pay__row > :nth-child(4) { display: none; }
	.ays-drawer__tags { margin-inline-start: 0; }
	.ays-float--report { position: static; margin-top: var(--ays-sp-4); }

	.ays-feature-grid { grid-template-columns: 1fr; }
	.ays-mini-grid { grid-template-columns: 1fr; }
	.ays-figures { grid-template-columns: repeat(2, 1fr); padding: var(--ays-sp-5); }
	.ays-plans { grid-template-columns: 1fr; }
	.ays-toggle { flex-wrap: wrap; justify-content: center; border-radius: var(--ays-r-lg); }
	.ays-custom { flex-direction: column; align-items: stretch; text-align: center; }
	.ays-field-row { grid-template-columns: 1fr; gap: 0; }
	.ays-demo__trust { grid-template-columns: 1fr; gap: var(--ays-sp-3); text-align: center; }
}