/* ==========================================================================
   AsYouShip — Sections de page
   1. Hero + cockpit
   2. Bandeau de preuve
   3. Pages en construction
   ========================================================================== */

/* ==========================================================================
   1. HERO
   ========================================================================== */
.ays-hero {
	position: relative;
	overflow: hidden;
	padding-block: calc(76px + clamp(44px, 5vw, 82px)) clamp(52px, 6vw, 90px);
	background: var(--ays-canvas);   /* ivoire : la page « respire », comme la couverture de la charte */
}

/*
| Le halo et la trame appartenaient à l'ancien style. La charte est à plat :
| ces deux calques décoratifs (aria-hidden dans la vue) ne sont plus peints.
*/
.ays-hero__aura,
.ays-hero__grid-lines { display: none; }

.ays-hero__aura {
	position: absolute;
	inset: -30% -12% auto -12%;
	height: 900px;
	background:
		radial-gradient(44% 58% at 20% 24%, rgba(60, 209, 144, .13), transparent 62%),
		radial-gradient(38% 52% at 86% 10%, rgba(13, 38, 36, .05), transparent 60%);
	pointer-events: none;
}

/* Trame technique, masquée en dégradé pour ne jamais devenir un motif. */
.ays-hero__grid-lines {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(13, 38, 36, .045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(13, 38, 36, .045) 1px, transparent 1px);
	background-size: 58px 58px;
	-webkit-mask-image: radial-gradient(72% 62% at 46% 28%, #000 0%, transparent 76%);
	mask-image: radial-gradient(72% 62% at 46% 28%, #000 0%, transparent 76%);
	pointer-events: none;
}

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

.ays-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin-bottom: var(--ays-sp-6);
	padding: .38rem .85rem .38rem .6rem;
	border: 1px solid var(--ays-slate-200);
	border-radius: var(--ays-r-pill);
	background: #fff;
	color: var(--ays-slate-700);
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: -.005em;
}

.ays-live-dot {
	position: relative;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--ays-cash);
}

.ays-live-dot::after {
	content: '';
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	border: 1px solid var(--ays-cash);
	opacity: .55;
	animation: ays-ping 2.4s var(--ays-ease-out) infinite;
}

@keyframes ays-ping {
	0%   { transform: scale(.7); opacity: .7; }
	70%  { transform: scale(1.5); opacity: 0; }
	100% { transform: scale(1.5); opacity: 0; }
}

.ays-hero__title {
	margin-bottom: var(--ays-sp-5);
	font-size: var(--ays-fs-display);
	line-height: 1.04;
	letter-spacing: -.036em;   /* Inter, gras et serré, comme les titres de la charte */
}

.ays-hero__title span { display: block; }

.ays-hero__lead {
	max-width: 34rem;
	margin-bottom: var(--ays-sp-8);
	color: var(--ays-slate-600);
	font-size: var(--ays-fs-lead);
	line-height: 1.62;
}

.ays-hero__lead strong {
	color: var(--ays-ink);
	font-weight: 620;
}

.ays-hero__actions {
	display: flex;
	align-items: center;
	gap: var(--ays-sp-3);
	flex-wrap: wrap;
	margin-bottom: var(--ays-sp-6);
}

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

.ays-hero__reassure li {
	display: flex;
	align-items: center;
	gap: .4rem;
}

.ays-hero__reassure i { color: var(--ays-cash-ink); }

/* --- Cockpit : maquette d'interface en HTML, pas une image ---------------- */
/* La marge intérieure laisse les cartes flottantes déborder des angles
   sans jamais recouvrir une donnée de la maquette. */
.ays-hero__stage { padding: 38px 26px 0; }

.ays-hero__frame { position: relative; }

.ays-mock {
	position: relative;
	border: 1px solid var(--ays-slate-200);
	border-radius: var(--ays-r-xl);
	background: #fff;
	box-shadow: var(--ays-sh-3);
	overflow: hidden;
}

.ays-mock__bar {
	display: flex;
	align-items: center;
	gap: var(--ays-sp-3);
	padding: var(--ays-sp-3) var(--ays-sp-4);
	border-bottom: 1px solid var(--ays-slate-200);
	background: var(--ays-canvas);

	/*
	| La barre figure le chrome d'une application : onglets, avatar, pastilles.
	| Rien n'y est repliable sans cesser de ressembler à un logiciel. Elle
	| glisse donc latéralement dans son propre cadre — ce que ferait la vraie
	| application sur un écran étroit — sans jamais entraîner la page.
	*/
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
}
.ays-mock__bar::-webkit-scrollbar { display: none; }
.ays-mock__bar > * { flex: 0 0 auto; }

.ays-mock__switch {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	white-space: nowrap;
	padding: .3rem .6rem;
	border: 1px solid var(--ays-slate-200);
	border-radius: var(--ays-r-sm);
	background: #fff;
	color: var(--ays-ink);
	font-size: .78rem;
	font-weight: 620;
}

.ays-mock__switch i { color: var(--ays-slate-400); font-size: .7rem; }

.ays-mock__tabs {
	display: flex;
	gap: var(--ays-sp-3);
	margin-inline-start: var(--ays-sp-2);
	color: var(--ays-slate-500);
	font-size: .76rem;
	font-weight: 560;
}

.ays-mock__tabs span.is-active {
	color: var(--ays-ink);
	box-shadow: inset 0 -2px 0 var(--ays-cobalt);
	padding-bottom: 2px;
}

.ays-mock__avatar {
	margin-inline-start: 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: .68rem;
	font-weight: 700;
}

.ays-mock__kpis {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: var(--ays-slate-200);
	border-bottom: 1px solid var(--ays-slate-200);
}

.ays-mock__kpi {
	padding: var(--ays-sp-4) var(--ays-sp-3);
	background: #fff;
}

.ays-mock__kpi-label {
	display: block;
	color: var(--ays-slate-500);
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.ays-mock__kpi-value {
	display: block;
	margin-top: 3px;
	color: var(--ays-ink);
	font-family: var(--ays-font-display);
	font-size: 1.16rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: -.03em;
}

.ays-mock__kpi-value small { font-size: .62em; font-weight: 620; }

.ays-mock__spark {
	display: flex;
	align-items: flex-end;
	gap: 2px;
	height: 18px;
	margin-top: 6px;
}

.ays-mock__spark i {
	flex: 1;
	border-radius: 1.5px;
	background: var(--ays-cobalt-100);
	transform-origin: bottom;
	animation: ays-spark 3.4s var(--ays-ease) infinite alternate;
}

/* Hauteurs différenciées : l'histogramme reste lisible même à l'arrêt. */
.ays-mock__spark i:nth-child(1) { height: 42%; animation-delay: 0s; }
.ays-mock__spark i:nth-child(2) { height: 66%; animation-delay: .18s; }
.ays-mock__spark i:nth-child(3) { height: 52%; animation-delay: .36s; }
.ays-mock__spark i:nth-child(4) { height: 84%; animation-delay: .54s; }
.ays-mock__spark i:nth-child(5) { height: 61%; animation-delay: .72s; }
.ays-mock__spark i:nth-child(6) { height: 96%; animation-delay: .9s; }
.ays-mock__spark i:nth-child(7) { height: 74%; animation-delay: 1.08s; }

.ays-mock__spark i:nth-child(2n) { background: var(--ays-cobalt-300); }
.ays-mock__spark--cash i { background: var(--ays-cash-line); }
.ays-mock__spark--cash i:nth-child(2n) { background: var(--ays-cash); }

@keyframes ays-spark {
	from { transform: scaleY(.72); }
	to   { transform: scaleY(1); }
}

.ays-mock__list { padding: var(--ays-sp-2) 0; }

.ays-mock__row {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: var(--ays-sp-3);
	padding: .62rem var(--ays-sp-4);
	border-bottom: 1px solid var(--ays-slate-100);
}

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

.ays-mock__ref {
	display: block;
	color: var(--ays-ink);
	font-size: .82rem;
	font-weight: 620;
}

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

.ays-mock__state {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .22rem .55rem;
	border-radius: var(--ays-r-pill);
	font-size: .7rem;
	font-weight: 650;
	white-space: nowrap;
}

.ays-mock__state i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.ays-mock__state--cobalt  { background: var(--ays-cobalt-050);  color: var(--ays-cobalt-700); }
.ays-mock__state--cash    { background: var(--ays-cash-050);    color: var(--ays-cash-ink); }
.ays-mock__state--relance { background: var(--ays-relance-050); color: var(--ays-relance-ink); }
.ays-mock__state--slate   { background: var(--ays-slate-100);   color: var(--ays-slate-600); }

/* Une commande qui change d'état sous les yeux du visiteur. */
.ays-mock__swap { position: relative; display: inline-grid; }
.ays-mock__swap > * { grid-area: 1 / 1; }
.ays-mock__swap > :first-child { animation: ays-swap-a 7s steps(1, end) infinite; }
.ays-mock__swap > :last-child  { animation: ays-swap-b 7s steps(1, end) infinite; }

@keyframes ays-swap-a {
	0%, 46%   { opacity: 1; }
	50%, 100% { opacity: 0; }
}

@keyframes ays-swap-b {
	0%, 46%   { opacity: 0; }
	50%, 100% { opacity: 1; }
}

.ays-mock__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ays-sp-3);
	padding: var(--ays-sp-3) var(--ays-sp-4);
	border-top: 1px solid var(--ays-slate-200);
	background: var(--ays-canvas);
	color: var(--ays-slate-500);
	font-size: .72rem;
}

/* Cartes flottantes autour du cockpit */
.ays-float {
	position: absolute;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: var(--ays-sp-3);
	padding: .7rem .9rem;
	border: 1px solid var(--ays-slate-200);
	border-radius: var(--ays-r-md);
	background: rgba(255, 255, 255, .92);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	box-shadow: var(--ays-sh-2);
	animation: ays-float 6s var(--ays-ease) infinite alternate;
}

.ays-float__icon {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: var(--ays-r-sm);
	font-size: .9rem;
}

.ays-float__title {
	display: block;
	color: var(--ays-ink);
	font-size: .8rem;
	font-weight: 640;
	line-height: 1.25;
}

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

/* Les cartes flottantes se posent sur les angles, jamais sur les données. */
.ays-float--relance {
	inset-block-start: calc(100% - 20px);
	inset-inline-start: -26px;
	animation-delay: .4s;
}

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

.ays-float--marge {
	inset-block-end: calc(100% - 20px);
	inset-inline-end: -26px;
}

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

@keyframes ays-float {
	from { transform: translateY(-5px); }
	to   { transform: translateY(5px); }
}

.ays-hero__caption {
	margin-top: var(--ays-sp-12);
	color: var(--ays-slate-500);
	font-size: var(--ays-fs-xs);
	text-align: center;
}

/* ==========================================================================
   2. BANDEAU DE PREUVE
   ========================================================================== */
.ays-proof {
	padding-block: clamp(40px, 4vw, 60px);
	border-block: 1px solid var(--ays-slate-200);
	background: var(--ays-canvas);
}

.ays-proof__grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--ays-sp-6);
	margin-bottom: var(--ays-sp-10);
}

.ays-proof__item { text-align: center; }

.ays-proof__caption {
	margin-bottom: var(--ays-sp-4);
	color: var(--ays-slate-500);
	font-size: var(--ays-fs-xs);
	font-weight: 600;
	letter-spacing: .1em;
	text-align: center;
	text-transform: uppercase;
}

/* ==========================================================================
   3. LA CHAÎNE DU CHAOS
   ========================================================================== */
.ays-chaos { overflow: hidden; }

.ays-chaos__aura {
	position: absolute;
	inset: auto -10% -45% -10%;
	height: 520px;
	background: none;   /* halo retiré : la charte est à plat */
	pointer-events: none;
}

.ays-chain {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--ays-sp-3);
	margin: 0 0 var(--ays-sp-10);
	padding: 0;
	list-style: none;
}

.ays-chain__step {
	position: relative;
	display: flex;
	align-items: center;
	gap: .5rem;
	margin-inline-end: 26px;
	padding: .58rem .9rem;
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: var(--ays-r-md);
	background: rgba(255, 255, 255, .045);
	color: rgba(255, 255, 255, .78);
	font-size: .88rem;
	font-weight: 550;
	white-space: nowrap;
}

.ays-chain__step::after {
	content: '\2192';
	position: absolute;
	inset-inline-start: 100%;
	inset-block-start: 50%;
	width: 26px;
	color: rgba(255, 255, 255, .3);
	text-align: center;
	transform: translateY(-50%);
}

.ays-chain__step:last-child {
	margin-inline-end: 0;
	border-color: rgba(229, 72, 77, .45);
	background: rgba(229, 72, 77, .08);
	color: #fff;
}

.ays-chain__step:last-child::after { display: none; }

.ays-chain__icon { color: rgba(255, 255, 255, .45); }
.ays-chain__step:last-child .ays-chain__icon { color: var(--ays-retour); }

.ays-chaos__kicker {
	max-width: 760px;
	margin-inline: auto;
	color: #fff;
	font-family: var(--ays-font-display);
	font-size: clamp(1.15rem, 1rem + .8vw, 1.55rem);
	font-weight: 600;
	letter-spacing: -.02em;
	line-height: 1.4;
	text-align: center;
	text-wrap: balance;
}

/* ==========================================================================
   4. LES QUATRE PILIERS
   ========================================================================== */
.ays-flow {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--ays-sp-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ays-flow__rail {
	position: absolute;
	inset-block-start: 28px;
	inset-inline: 13%;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--ays-cobalt-100), var(--ays-cobalt) 45%, var(--ays-cash));
}

.ays-flow__pulse {
	position: absolute;
	inset-block-start: -3px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 0 3px rgba(60, 209, 144, .45);
	animation: ays-travel 5s var(--ays-ease-out) infinite;
}

@keyframes ays-travel {
	0%        { inset-inline-start: 0; opacity: 0; }
	10%       { opacity: 1; }
	90%       { opacity: 1; }
	100%      { inset-inline-start: 100%; opacity: 0; }
}

.ays-flow__step {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.ays-flow__marker {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 58px;
	height: 58px;
	margin-bottom: var(--ays-sp-5);
	border: 1px solid var(--ays-slate-200);
	border-radius: 50%;
	background: #fff;
	box-shadow: var(--ays-sh-2);
	color: var(--ays-cobalt);
	font-size: 1.3rem;
}

.ays-flow__marker--cash    { color: var(--ays-cash-ink); }
.ays-flow__marker--relance { color: var(--ays-relance-ink); }
.ays-flow__marker--ink     { color: var(--ays-ink); }

.ays-flow .ays-card {
	width: 100%;
	text-align: center;
}

.ays-flow__num {
	display: block;
	margin-bottom: var(--ays-sp-2);
	color: var(--ays-slate-400);
	font-family: var(--ays-font-body);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .16em;
}

.ays-flow__name {
	margin-bottom: var(--ays-sp-2);
	font-size: 1.18rem;
}

.ays-flow__claim {
	margin-bottom: var(--ays-sp-2);
	color: var(--ays-ink);
	font-size: .96rem;
	font-weight: 600;
	line-height: 1.4;
}

/* ==========================================================================
   5. SECTION EN DEUX COLONNES (confirmation)
   ========================================================================== */
.ays-split__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
	gap: clamp(36px, 5vw, 72px);
	align-items: center;
}

/*
| Un élément de grille reçoit « min-width: auto » : il refuse de descendre
| sous sa largeur de contenu minimale, quitte à élargir la grille et à faire
| déborder la page. Le minmax(0, …) ci-dessus protège la PISTE, pas l'élément
| qui s'y place — les deux sont nécessaires.
*/
.ays-split__grid > * { min-width: 0; }

.ays-checklist {
	display: grid;
	gap: var(--ays-sp-5);
	margin: var(--ays-sp-8) 0;
	padding: 0;
	list-style: none;
}

.ays-checklist li {
	display: flex;
	gap: var(--ays-sp-3);
}

.ays-checklist__mark {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	margin-top: 3px;
	border-radius: 50%;
	background: var(--ays-cash-050);
	color: var(--ays-cash-ink);
	font-size: .78rem;
}

.ays-checklist strong {
	display: block;
	color: var(--ays-ink);
	font-weight: 640;
}

.ays-checklist__desc {
	display: block;
	color: var(--ays-slate-600);
	font-size: .94rem;
	line-height: 1.55;
}

/* --- Le trajet d'une commande dans la confirmation ---------------------- */
.ays-timeline-card {
	padding: clamp(20px, 2.4vw, 28px);
	border: 1px solid var(--ays-slate-200);
	border-radius: var(--ays-r-xl);
	background: #fff;
	box-shadow: var(--ays-sh-3);
}

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

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

.ays-timeline {
	position: relative;
	display: grid;
	gap: var(--ays-sp-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 44px (heure) + 10px (gouttière) + 8px (demi-pastille) = 62px */
.ays-timeline__rail {
	position: absolute;
	inset-inline-start: 62px;
	inset-block: 10px;
	width: 2px;
	background: var(--ays-slate-200);
}

.ays-timeline__trace {
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	background: linear-gradient(180deg, var(--ays-cobalt), var(--ays-cash));
	animation: ays-trace 9s var(--ays-ease) infinite;
}

@keyframes ays-trace {
	0%        { height: 0; }
	62%, 88%  { height: 100%; }
	100%      { height: 0; }
}

.ays-timeline__item {
	display: grid;
	grid-template-columns: 44px 18px 1fr;
	align-items: start;
	gap: 10px;
	opacity: .2;
	transform: translateY(5px);
	animation: ays-step 9s var(--ays-ease) infinite;
	animation-delay: var(--ays-step-delay, 0s);
}

@keyframes ays-step {
	0%       { opacity: .2; transform: translateY(5px); }
	5%, 86%  { opacity: 1; transform: none; }
	100%     { opacity: .2; transform: translateY(5px); }
}

.ays-timeline__time {
	color: var(--ays-slate-400);
	font-size: .76rem;
	font-variant-numeric: tabular-nums;
	line-height: 1.6;
	text-align: end;
	white-space: nowrap;
}

.ays-timeline__dot {
	width: 10px;
	height: 10px;
	margin: 5px 4px 0;
	border: 2px solid #fff;
	border-radius: 50%;
	background: var(--ays-slate-400);
	box-shadow: 0 0 0 2px var(--ays-slate-200);
}

.ays-timeline__item--cobalt  .ays-timeline__dot { background: var(--ays-cobalt);  box-shadow: 0 0 0 2px var(--ays-cobalt-100); }
.ays-timeline__item--relance .ays-timeline__dot { background: var(--ays-relance); box-shadow: 0 0 0 2px var(--ays-relance-line); }
.ays-timeline__item--cash    .ays-timeline__dot { background: var(--ays-cash);    box-shadow: 0 0 0 2px var(--ays-cash-line); }

.ays-timeline__label {
	display: block;
	color: var(--ays-ink);
	font-size: .93rem;
	font-weight: 620;
	line-height: 1.35;
}

.ays-timeline__item--relance .ays-timeline__label { color: var(--ays-relance-ink); }
.ays-timeline__item--cash    .ays-timeline__label { color: var(--ays-cash-ink); }

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

.ays-timeline-card__legend {
	margin: var(--ays-sp-6) 0 0;
	padding-top: var(--ays-sp-4);
	border-top: 1px solid var(--ays-slate-200);
	color: var(--ays-slate-500);
	font-size: .85rem;
}

/* ==========================================================================
   6. AIGUILLAGE, CARTE ET TRANSPORTEURS
   ========================================================================== */
.ays-routing {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
	gap: clamp(32px, 4vw, 64px);
	align-items: center;
	margin-bottom: clamp(48px, 5vw, 80px);
}

.ays-routing__flow {
	display: grid;
	gap: var(--ays-sp-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ays-routing__step {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--ays-sp-4);
	padding: var(--ays-sp-4);
	border: 1px solid var(--ays-slate-200);
	border-radius: var(--ays-r-md);
	background: #fff;
	box-shadow: var(--ays-sh-1);
}

.ays-routing__step:not(:last-child)::after {
	content: '';
	position: absolute;
	inset-inline-start: 34px;
	inset-block-start: 100%;
	width: 2px;
	height: var(--ays-sp-4);
	background: var(--ays-cobalt-100);
}

.ays-routing__icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border-radius: var(--ays-r-sm);
	background: var(--ays-cobalt-050);
	color: var(--ays-cobalt);
}

.ays-routing__step:last-child .ays-routing__icon {
	background: var(--ays-cash-050);
	color: var(--ays-cash-ink);
}

.ays-routing__label {
	display: block;
	color: var(--ays-ink);
	font-size: .96rem;
	font-weight: 620;
	line-height: 1.3;
}

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

.ays-map__svg {
	display: block;
	width: 100%;
	max-width: 290px;
	margin-inline: auto;
}

.ays-map__land { filter: drop-shadow(0 18px 34px rgba(13, 38, 36, .12)); }

/* Le dégradé de la carte est écrit en attributs dans la vue
   (components/tunisia_map.php) : la règle CSS l'emporte sur l'attribut. */
.ays-map__svg stop:first-child { stop-color: var(--ays-brand-deep); }
.ays-map__svg stop:last-child  { stop-color: var(--ays-brand-mint); }

.ays-map__hubs circle {
	fill: var(--ays-cobalt);
	transform-box: fill-box;
	transform-origin: center;
	animation: ays-hub 3.4s var(--ays-ease) infinite;
}

.ays-map__hubs circle:nth-child(2n) { fill: var(--ays-cash); animation-delay: .5s; }
.ays-map__hubs circle:nth-child(3n) { animation-delay: 1s; }
.ays-map__hubs circle:nth-child(4n) { animation-delay: 1.6s; }

@keyframes ays-hub {
	0%, 100% { opacity: .4; transform: scale(.82); }
	50%      { opacity: 1;  transform: scale(1); }
}

.ays-map__caption {
	max-width: 300px;
	margin: var(--ays-sp-5) auto 0;
	color: var(--ays-slate-500);
	font-size: var(--ays-fs-xs);
	text-align: center;
}

.ays-carriers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--ays-sp-3);
}

.ays-carriers__note {
	margin: var(--ays-sp-6) auto 0;
	max-width: 560px;
	color: var(--ays-slate-500);
	font-size: .92rem;
	text-align: center;
}

/* ==========================================================================
   7. RENTABILITÉ RÉELLE
   ========================================================================== */
.ays-split__grid--reverse .ays-split__text   { order: 2; }
.ays-split__grid--reverse .ays-split__visual { order: 1; }

.ays-pnl {
	padding: clamp(20px, 2.4vw, 30px);
	border: 1px solid var(--ays-slate-200);
	border-radius: var(--ays-r-xl);
	background: #fff;
	box-shadow: var(--ays-sh-3);
}

.ays-pnl__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	/* Une pastille d'état ne se coupe jamais (white-space: nowrap) : en dessous
	   de 400 px elle passe donc à la ligne, faute de quoi elle pousse l'en-tête
	   du panneau hors de l'écran. */
	flex-wrap: wrap;
	gap: var(--ays-sp-3);
	margin-bottom: var(--ays-sp-5);
}

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

.ays-pnl__row {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 8px 12px;
	padding: .68rem 0;
	border-bottom: 1px solid var(--ays-slate-100);
}

.ays-pnl__row--revenue { border-bottom-color: var(--ays-slate-200); }

.ays-pnl__label {
	grid-column: 1;
	grid-row: 1;
	color: var(--ays-slate-600);
	font-size: .92rem;
}

.ays-pnl__value {
	grid-column: 2;
	grid-row: 1;
	color: var(--ays-ink);
	font-family: var(--ays-font-display);
	font-size: 1.02rem;
	font-weight: 700;
	white-space: nowrap;
}

.ays-pnl__value small { color: var(--ays-slate-400); font-size: .7em; }
.ays-pnl__value--cost { color: var(--ays-retour-ink); font-size: .95rem; font-weight: 650; }

.ays-pnl__bar {
	grid-column: 1 / -1;
	grid-row: 2;
	height: 6px;
	border-radius: 3px;
	background: var(--ays-slate-100);
	overflow: hidden;
}

.ays-pnl__bar > span {
	display: block;
	width: var(--ays-bar, 0%);
	height: 100%;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--ays-retour-line), var(--ays-retour));
	transform-origin: left;
	animation: ays-bar .9s var(--ays-ease) both;
	animation-delay: var(--ays-bar-delay, 0ms);
}

@keyframes ays-bar {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

.ays-pnl__row--result {
	margin-top: var(--ays-sp-4);
	padding-top: var(--ays-sp-4);
	border-top: 2px solid var(--ays-ink);
	border-bottom: 0;
}

.ays-pnl__value--result {
	color: var(--ays-cash-ink);
	font-size: clamp(1.3rem, 1.1rem + .6vw, 1.6rem);
}

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

/* ==========================================================================
   8. LE GRAND MESSAGE
   ========================================================================== */
.ays-statement { text-align: center; }

.ays-statement__line {
	margin: 0 0 .35rem;
	color: var(--ays-slate-400);
	font-family: var(--ays-font-display);
	font-size: clamp(1.5rem, 1.05rem + 2vw, 2.6rem);
	font-weight: 700;
	letter-spacing: -.032em;
	line-height: 1.16;
	text-wrap: balance;
}

.ays-statement__line--strong { color: var(--ays-ink); }

.ays-statement__rule {
	display: block;
	width: 116px;
	height: 3px;
	margin: var(--ays-sp-8) auto var(--ays-sp-6);
	border-radius: 3px;
	background: linear-gradient(90deg, var(--ays-cobalt), var(--ays-cash));
}

.ays-statement__kicker {
	margin: 0;
	color: var(--ays-cobalt);
	font-size: 1.05rem;
	font-weight: 650;
}

/* ==========================================================================
   9. CANAUX ET MULTI-BOUTIQUES
   ========================================================================== */
.ays-channels {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--ays-sp-4);
	margin-bottom: clamp(48px, 5vw, 80px);
}

.ays-channel {
	display: flex;
	flex-direction: column;
	padding: var(--ays-sp-5);
	border: 1px solid var(--ays-slate-200);
	border-radius: var(--ays-r-lg);
	background: #fff;
	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-channel:hover {
	transform: translateY(-2px);
	border-color: var(--ays-cobalt-100);
	box-shadow: var(--ays-sh-2);
}

.ays-channel__icon {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	margin-bottom: var(--ays-sp-4);
	border-radius: var(--ays-r-sm);
	background: var(--ays-cobalt-050);
	color: var(--ays-cobalt);
}

.ays-channel__name {
	color: var(--ays-ink);
	font-family: var(--ays-font-display);
	font-size: 1rem;
	font-weight: 650;
	letter-spacing: -.015em;
}

.ays-channel__mode {
	margin-bottom: 6px;
	color: var(--ays-cobalt-700);
	font-size: .7rem;
	font-weight: 650;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.ays-channel__desc {
	color: var(--ays-slate-600);
	font-size: .88rem;
	line-height: 1.5;
}

.ays-stores {
	display: grid;
	justify-items: center;
	gap: var(--ays-sp-5);
	padding: clamp(28px, 3vw, 48px);
	border: 1px solid var(--ays-slate-200);
	border-radius: var(--ays-r-xl);
	background: #fff;
	text-align: center;
}

.ays-stores__cloud {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--ays-sp-3);
}

.ays-stores__chip {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .5rem .9rem;
	border: 1px dashed var(--ays-slate-300);
	border-radius: var(--ays-r-pill);
	color: var(--ays-slate-600);
	font-size: .88rem;
	font-weight: 560;
}

.ays-stores__chip i { color: var(--ays-slate-400); }

.ays-stores__arrow { color: var(--ays-cobalt); font-size: 1.15rem; }

.ays-stores__hub {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: var(--ays-sp-5) var(--ays-sp-10);
	border: 1px solid var(--ays-cobalt-100);
	border-radius: var(--ays-r-lg);
	background: var(--ays-cobalt-050);
}

.ays-stores__hub-label {
	color: var(--ays-cobalt-700);
	font-size: .8rem;
	font-weight: 620;
}

.ays-stores__text { max-width: 640px; }
.ays-stores__text h3 { margin-bottom: var(--ays-sp-2); }
.ays-stores__text p { color: var(--ays-slate-600); }

/* ==========================================================================
   10. CYCLE DE VIE ET JOURNAL D'AUDIT
   ========================================================================== */
.ays-states { margin-bottom: clamp(56px, 6vw, 100px); }

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

.ays-state {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: var(--ays-sp-4) var(--ays-sp-5);
	border: 1px solid var(--ays-slate-200);
	border-radius: var(--ays-r-md);
	background: #fff;
}

.ays-state--major { padding: var(--ays-sp-5); box-shadow: var(--ays-sh-1); }

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

.ays-state__group {
	color: var(--ays-slate-500);   /* posé sur les fonds teintés des états : 4,5:1 au moins */
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.ays-state__label {
	color: var(--ays-ink);
	font-family: var(--ays-font-display);
	font-size: 1.02rem;
	font-weight: 650;
	letter-spacing: -.02em;
}

.ays-state__num {
	position: absolute;
	inset-block-start: 10px;
	inset-inline-end: 12px;
	color: var(--ays-slate-500);   /* le numéro se lit : le gris clair précédent n'atteignait que 1,4:1 */
	font-size: .72rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.ays-state--cobalt  { border-color: var(--ays-cobalt-100); background: var(--ays-cobalt-050); }
.ays-state--cash    { border-color: var(--ays-cash-line);    background: var(--ays-cash-050); }
.ays-state--relance { border-color: var(--ays-relance-line); background: var(--ays-relance-050); }
.ays-state--retour  { border-color: var(--ays-retour-line);  background: var(--ays-retour-050); }

.ays-states__caption {
	margin-bottom: var(--ays-sp-5);
	color: var(--ays-slate-500);
	font-size: .92rem;
	text-align: center;
}

.ays-states__branches {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--ays-sp-3);
	margin: 0 0 var(--ays-sp-10);
	padding: 0;
	list-style: none;
}

.ays-states__branches .ays-state {
	flex-direction: row;
	align-items: center;
	gap: .6rem;
	padding: .48rem .85rem;
}

.ays-states__branches .ays-state__num { position: static; }
.ays-states__branches .ays-state__label { font-size: .92rem; }

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

.ays-state-card {
	padding: var(--ays-sp-5);
	border: 1px solid var(--ays-slate-200);
	border-radius: var(--ays-r-md);
	background: var(--ays-canvas);
}

.ays-state-card__num {
	color: var(--ays-cobalt);
	font-size: .72rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.ays-state-card__title { margin: 4px 0 6px; font-size: 1rem; }

.ays-state-card__text {
	margin: 0;
	color: var(--ays-slate-600);
	font-size: .88rem;
	line-height: 1.5;
}

.ays-audit { align-items: center; }

.ays-audit-log {
	display: grid;
	gap: var(--ays-sp-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ays-audit-log li {
	display: grid;
	grid-template-columns: 44px 1fr auto;
	align-items: baseline;
	gap: 10px;
	padding-bottom: var(--ays-sp-3);
	border-bottom: 1px solid var(--ays-slate-100);
}

.ays-audit-log li:last-child { padding-bottom: 0; border-bottom: 0; }

.ays-audit-log__time { color: var(--ays-slate-400); font-size: .76rem; }

.ays-audit-log__text {
	color: var(--ays-ink);
	font-size: .92rem;
	font-weight: 560;
}

.ays-audit-log__who {
	color: var(--ays-slate-500);
	font-size: .78rem;
	white-space: nowrap;
}

/* ==========================================================================
   11. POUR QUI ?
   ========================================================================== */
.ays-persona {
	margin-top: var(--ays-sp-8);
	padding: clamp(24px, 3vw, 44px);
	border: 1px solid var(--ays-slate-200);
	border-radius: var(--ays-r-xl);
	background: #fff;
	box-shadow: var(--ays-sh-1);
}

.ays-persona__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	gap: clamp(24px, 3vw, 48px);
	align-items: center;
}

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

.ays-persona__title {
	margin-bottom: var(--ays-sp-4);
	font-size: clamp(1.22rem, 1.1rem + .6vw, 1.6rem);
}

.ays-persona__pain {
	margin-bottom: var(--ays-sp-3);
	color: var(--ays-slate-500);
	font-style: italic;
}

.ays-persona__gain {
	margin-bottom: var(--ays-sp-4);
	color: var(--ays-ink);
	font-weight: 600;
}

.ays-persona__points {
	display: grid;
	gap: var(--ays-sp-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ays-persona__points li {
	display: flex;
	align-items: flex-start;
	gap: .6rem;
	padding: var(--ays-sp-3) var(--ays-sp-4);
	border-radius: var(--ays-r-md);
	background: var(--ays-canvas);
	color: var(--ays-slate-700);
	font-size: .93rem;
}

.ays-persona__points i { margin-top: 3px; color: var(--ays-cash-ink); }

/* ==========================================================================
   12. TABLEAU DE COMPARAISON
   ========================================================================== */
.ays-compare {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
}

.ays-compare th {
	padding: var(--ays-sp-4) var(--ays-sp-5);
	border-bottom: 1px solid var(--ays-slate-200);
	color: var(--ays-slate-500);
	font-size: .8rem;
	font-weight: 650;
	letter-spacing: .08em;
	text-align: start;
	text-transform: uppercase;
}

.ays-compare th.ays-compare__after { letter-spacing: 0; text-transform: none; }
.ays-compare th .ays-logo__mark { width: 26px; height: 26px; }
.ays-compare th .ays-logo__word { font-size: 1.05rem; }

.ays-compare td {
	padding: var(--ays-sp-4) var(--ays-sp-5);
	border-bottom: 1px solid var(--ays-slate-100);
	color: var(--ays-slate-600);
	font-size: .96rem;
	vertical-align: top;
}

.ays-compare .ays-compare__after {
	background: var(--ays-cash-050);
}

.ays-compare td.ays-compare__after { color: var(--ays-ink); font-weight: 560; }
.ays-compare thead .ays-compare__after { border-radius: var(--ays-r-lg) var(--ays-r-lg) 0 0; }
.ays-compare tbody tr:last-child .ays-compare__after { border-radius: 0 0 var(--ays-r-lg) var(--ays-r-lg); }

.ays-compare__icon { margin-inline-end: .5rem; font-size: .82rem; }
.ays-compare__icon--no  { color: var(--ays-slate-300); }
.ays-compare__icon--yes { color: var(--ays-cash-ink); }

/* ==========================================================================
   13. PAGE EN CONSTRUCTION
   ========================================================================== */
.ays-soon {
	padding-block: clamp(80px, 10vw, 160px);
	text-align: center;
}

.ays-soon__code {
	display: inline-block;
	margin-top: var(--ays-sp-4);
	padding: .3rem .7rem;
	border-radius: var(--ays-r-sm);
	background: var(--ays-slate-100);
	color: var(--ays-slate-600);
	font-family: var(--ays-font-mono);
	font-size: .82rem;
}

/* ==========================================================================
   ADAPTATIONS
   ========================================================================== */
@media (max-width: 991.98px) {
	.ays-hero { padding-block: calc(68px + 40px) 56px; }
	.ays-hero__grid { grid-template-columns: 1fr; gap: var(--ays-sp-10); }
	.ays-hero__lead { max-width: none; }
	.ays-hero__stage { max-width: 640px; }
	.ays-proof__grid { grid-template-columns: repeat(3, 1fr); gap: var(--ays-sp-8) var(--ays-sp-4); }

	.ays-flow { grid-template-columns: repeat(2, 1fr); gap: var(--ays-sp-8) var(--ays-sp-5); }
	.ays-flow__rail { display: none; }

	.ays-split__grid { grid-template-columns: 1fr; gap: var(--ays-sp-12); }
	.ays-split__grid--reverse .ays-split__text,
	.ays-split__grid--reverse .ays-split__visual { order: 0; }
	.ays-routing { grid-template-columns: 1fr; }
	.ays-routing__map { max-width: 420px; margin-inline: auto; }

	.ays-channels { grid-template-columns: repeat(2, 1fr); }
	.ays-states__spine { grid-template-columns: repeat(2, 1fr); gap: var(--ays-sp-4); }
	.ays-states__spine .ays-state:not(:last-child)::after { display: none; }
	.ays-states__grid { grid-template-columns: repeat(2, 1fr); }
	.ays-persona__grid { grid-template-columns: 1fr; }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
	.ays-channels { grid-template-columns: repeat(3, 1fr); }
	.ays-states__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 767.98px) {
	/* Le tableau de comparaison devient une pile de cartes. */
	.ays-compare thead { display: none; }

	.ays-compare tbody tr {
		display: grid;
		margin-bottom: var(--ays-sp-4);
		border: 1px solid var(--ays-slate-200);
		border-radius: var(--ays-r-lg);
		overflow: hidden;
	}

	.ays-compare td { border-bottom: 0; }
	.ays-compare tbody tr:last-child .ays-compare__after { border-radius: 0; }

	.ays-compare td::before {
		content: attr(data-label);
		display: block;
		margin-bottom: 4px;
		color: var(--ays-slate-400);
		font-size: .68rem;
		font-weight: 650;
		letter-spacing: .08em;
		text-transform: uppercase;
	}
}

@media (max-width: 767.98px) {
	.ays-hero__actions .ays-btn { width: 100%; }
	.ays-mock__kpis { grid-template-columns: repeat(2, 1fr); }
	.ays-mock__tabs { display: none; }
	.ays-hero__stage { padding: 30px 16px 0; }
	.ays-float { padding: .55rem .7rem; }
	.ays-float--relance { inset-block-start: calc(100% - 6px); inset-inline-start: -14px; }
	.ays-float--marge   { inset-block-end: calc(100% - 6px); inset-inline-end: -14px; }
	.ays-proof__grid { grid-template-columns: repeat(2, 1fr); }
	.ays-proof__item:last-child { grid-column: 1 / -1; }
}

@media (max-width: 575.98px) {
	.ays-flow { grid-template-columns: 1fr; gap: var(--ays-sp-6); }
	.ays-flow__marker { margin-bottom: var(--ays-sp-4); }
	.ays-chain { gap: var(--ays-sp-2); }
	.ays-chain__step { margin-inline-end: 20px; font-size: .82rem; }
	.ays-chain__step::after { width: 20px; }
	.ays-timeline__item { grid-template-columns: 38px 18px 1fr; }
	.ays-timeline__rail { inset-inline-start: 56px; }
	.ays-channels { grid-template-columns: 1fr; }
	.ays-states__spine { grid-template-columns: 1fr; }
	.ays-states__grid { grid-template-columns: 1fr; }
	.ays-audit-log li { grid-template-columns: 40px 1fr; }
	.ays-audit-log__who { grid-column: 2; }
}

@media (max-width: 479.98px) {
	.ays-float { display: none; }
}