/* ==========================================================================
   AsYouShip — Socle : polices, réinitialisation, typographie, mise en page
   ========================================================================== */

/* --- Polices auto-hébergées (aucune requête vers un tiers) --------------- */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/inter-variable-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: 'Plus Jakarta Sans';
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url('../fonts/jakarta-variable-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;
}

/* --- Réinitialisation ---------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 96px;
}

body {
	margin: 0;
	background: var(--ays-white);
	color: var(--ays-slate-700);
	font-family: var(--ays-font-body);
	font-size: var(--ays-fs-body);
	line-height: var(--ays-lh-body);
	font-feature-settings: 'cv02', 'cv03', 'cv04', 'ss01';
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/*
| Il n'y a volontairement pas d'« overflow-x: hidden » sur body.
|
| La règle ne corrige rien : elle rend le débordement invisible tout en le
| laissant en place. Le visiteur perd la partie coupée, la barre de défilement
| horizontale disparaît, et le défaut ne se voit plus — donc ne se corrige
| jamais. Elle empêche aussi position: sticky de fonctionner sur les
| descendants, parce qu'elle fait de body un conteneur de défilement.
|
| Chaque débordement est traité à sa source. Le banc de mesure
| tools/responsive-audit.mjs vérifie qu'il n'en reste aucun.
*/

img,
svg { max-width: 100%; }

img { height: auto; }

/*
| Un mot plus long que sa colonne élargit celle-ci et pousse toute la page :
| c'est la cause du débordement de quelques pixels que l'on observait à 320 px
| sur les blocs de texte. « break-word » ne coupe que les mots qui ne tiennent
| pas — une phrase ordinaire n'est jamais affectée. C'est une règle
| typographique, pas un cache-misère : rien n'est masqué, tout reste lisible.
*/
body { overflow-wrap: break-word; }

h1, h2, h3, h4, h5 {
	margin: 0 0 var(--ays-sp-4);
	color: var(--ays-ink);
	font-family: var(--ays-font-display);
	font-weight: 700;
	letter-spacing: -.022em;
	line-height: var(--ays-lh-snug);
	text-wrap: balance;
}

h1 { font-size: var(--ays-fs-h1); line-height: var(--ays-lh-tight); letter-spacing: -.032em; }
h2 { font-size: var(--ays-fs-h2); line-height: 1.14; letter-spacing: -.028em; }
h3 { font-size: var(--ays-fs-h3); }
h4 { font-size: var(--ays-fs-h4); }

p  { margin: 0 0 var(--ays-sp-4); }
p:last-child { margin-bottom: 0; }

/* L'encre et l'action partagent le vert profond : un lien nu prend donc la
   menthe assombrie, seule teinte de la charte lisible en texte (5,2:1). */
a {
	color: var(--ays-link);
	text-decoration: none;
	transition: color var(--ays-t-fast) var(--ays-ease-out);
}

a:hover { color: var(--ays-link-hover); }

ul, ol { margin: 0 0 var(--ays-sp-4); padding-inline-start: 1.25rem; }

strong, b { font-weight: 650; color: var(--ays-slate-800); }

hr {
	height: 1px;
	margin: var(--ays-sp-12) 0;
	border: 0;
	background: var(--ays-slate-200);
	opacity: 1;
}

::selection {
	background: var(--ays-cobalt-100);
	color: var(--ays-ink);
}

:focus-visible {
	outline: 2px solid var(--ays-cobalt);
	outline-offset: 3px;
	border-radius: var(--ays-r-sm);
}

/* Sur un fond vert profond, un contour vert profond disparaîtrait : la menthe
   prend le relais (8,1:1). */
.ays-section--dark :focus-visible,
.ays-ctaband :focus-visible,
.ays-footer :focus-visible,
.ays-announce :focus-visible { outline-color: var(--ays-brand-mint); }

/* --- Mise en page -------------------------------------------------------- */
.ays-container {
	width: 100%;
	max-width: var(--ays-container);
	margin-inline: auto;
	padding-inline: var(--ays-gutter);
}

.ays-container--narrow { max-width: 880px; }

.ays-section {
	position: relative;
	padding-block: var(--ays-section-y);
}

.ays-section--tint   { background: var(--ays-canvas); }
.ays-section--tight  { padding-block: clamp(48px, 5vw, 80px); }

/* Deux sections teintées qui se suivent forment un seul bloc : sans cela,
   l'espacement se doublerait à la jointure. */
.ays-section--tint + .ays-section--tint { padding-top: 0; }

.ays-section--dark {
	background: var(--ays-ink);
	color: rgba(255, 255, 255, .74);
}

.ays-section--dark h1,
.ays-section--dark h2,
.ays-section--dark h3,
.ays-section--dark h4 { color: #fff; }

/* Filet de séparation discret entre deux sections de même fond */
.ays-section--ruled { border-top: 1px solid var(--ays-slate-200); }

.ays-section__head {
	max-width: 760px;
	margin-bottom: clamp(40px, 5vw, 64px);
}

.ays-section__head--center {
	margin-inline: auto;
	text-align: center;
}

/* --- Éléments de titraille ---------------------------------------------- */
/* Surtitre à la manière des documents de la marque : petites capitales
   espacées, gris vert, précédées du point menthe. */
.ays-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--ays-sp-2);
	margin-bottom: var(--ays-sp-4);
	color: var(--ays-slate-500);
	font-family: var(--ays-font-body);
	font-size: var(--ays-fs-eyebrow);
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.ays-eyebrow::before {
	content: '';
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--ays-brand-mint);
}

.ays-lead {
	max-width: var(--ays-measure);
	color: var(--ays-slate-600);
	font-size: var(--ays-fs-lead);
	line-height: 1.6;
}

.ays-section__head--center .ays-lead { margin-inline: auto; }

.ays-section--dark .ays-lead { color: rgba(255, 255, 255, .72); }
.ays-section--dark .ays-eyebrow { color: var(--ays-cobalt-300); }

.ays-muted { color: var(--ays-slate-500); }
.ays-small { font-size: var(--ays-fs-sm); }
.ays-xs    { font-size: var(--ays-fs-xs); }

.ays-num { font-variant-numeric: tabular-nums; }

/* Le mot mis en avant prend l'accent de la marque, en aplat : la charte
   n'emploie pas de dégradé. Menthe assombrie sur fond clair (5,2:1), menthe
   pure sur fond sombre. Le nom de la classe est gardé : les vues l'emploient. */
.ays-gradient-text { color: var(--ays-link); }
.ays-section--dark .ays-gradient-text { color: var(--ays-brand-mint); }

/* Placeholder de contenu à renseigner : visible, jamais oubliable */
.ays-placeholder {
	padding: .05em .4em;
	border: 1px dashed var(--ays-relance);
	border-radius: var(--ays-r-sm);
	background: var(--ays-relance-050);
	color: var(--ays-relance-ink);
	font-family: var(--ays-font-mono);
	font-size: .85em;

	/*
	| Le repère se lit d'un bloc mais accepte de passer à la ligne. Écrit en
	| « nowrap », « [PRIX À DÉFINIR] » imposait 29 px de plus que la colonne
	| des formules et faisait déborder la page des tarifs à toutes les
	| largeurs. Le tiret conditionnel n'a pas lieu d'être ici : la coupure se
	| fait entre les mots, la mention reste parfaitement lisible.
	*/
	white-space: normal;
	overflow-wrap: break-word;
}

/* --- Accessibilité ------------------------------------------------------- */
/* Propriétés logiques : le lien d'évitement se cache du bon côté quel que
   soit le sens de lecture. */
.ays-skip {
	position: absolute;
	inset-inline-start: -9999px;
	z-index: var(--ays-z-overlay);
	padding: var(--ays-sp-3) var(--ays-sp-5);
	border-radius: var(--ays-r-md);
	background: var(--ays-ink);
	color: #fff;
	font-weight: 600;
}

.ays-skip:focus {
	inset-inline-start: var(--ays-sp-4);
	inset-block-start: var(--ays-sp-4);
	color: #fff;
}

.ays-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* --- Apparition au défilement -------------------------------------------- */
[data-reveal] {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity var(--ays-t-slow) var(--ays-ease),
		transform var(--ays-t-slow) var(--ays-ease);
	transition-delay: var(--ays-reveal-delay, 0ms);
}

[data-reveal].is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}

	[data-reveal] { opacity: 1; transform: none; }

	/* Les animations en boucle s'arrêtent sur leur dernière image :
	   on force ici l'état lisible plutôt que l'état de fin de cycle. */
	.ays-timeline__item { opacity: 1 !important; transform: none !important; animation: none !important; }
	.ays-timeline__trace { height: 100% !important; }
	.ays-flow__pulse { display: none; }
	.ays-map__hubs circle { opacity: .9 !important; transform: none !important; }
	.ays-mock__spark i { transform: none !important; }
	.ays-live-dot::after { display: none; }
}