/*
 * Composants de l'espace guest — construits à neuf pour le prototype.
 * S'appuie sur les tokens partagés (public/assets/common/css/colors.css +
 * fonts.css) — jamais de duplication de couleurs/polices ici, seule la
 * hauteur de topbar diffère (header guest plus haut que la sidebar
 * customer), d'où le petit override ci-dessous.
 */

:root {
	--topbar-height: 84px;
}

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

html { scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--font-base);
	color: var(--ink);
	background: var(--paper);
	-webkit-font-smoothing: antialiased;
	/* Filet de sécurité anti-débordement horizontal — n'affecte pas
	   position:sticky (contrairement à overflow-x:hidden qui force
	   overflow-y:auto sur body et casse le header collant). */
	overflow-x: clip;
}

h1, h2, h3, h4, h5, h6, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

button { font-family: inherit; }

img { max-width: 100%; display: block; }

/* ============ Skeleton de chargement pour <x-guest.image> ============ */

.guest-img--skeleton {
	background: linear-gradient(90deg, var(--surface) 25%, var(--divider) 37%, var(--surface) 63%);
	background-size: 400% 100%;
	animation: guest-img-shimmer 1.4s ease infinite;
}
.guest-img--skeleton.is-loaded {
	animation: none;
	background: none;
}
@keyframes guest-img-shimmer {
	0% { background-position: 100% 50%; }
	100% { background-position: 0 50%; }
}
@media (prefers-reduced-motion: reduce) {
	.guest-img--skeleton { animation: none; }
}

svg.icon, i[data-lucide] {
	width: 1.25rem;
	height: 1.25rem;
	stroke: currentColor;
	stroke-width: 1.8;
}

/* Icônes Lucide masquées tant que le JS ne les a pas converties en SVG
   (évite le flash d'icônes vides au chargement). display:inline-block est
   nécessaire pour que width/height s'appliquent sur le <i> avant conversion. */
i[data-lucide] {
	display: inline-block;
	visibility: hidden;
}
body.icons-ready i[data-lucide], body.icons-ready svg.icon {
	visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============ Layout général ============ */

.container {
	width: 100%;
	max-width: var(--content-width);
	margin-inline: auto;
	padding-inline: var(--s6);
}

.section { padding-block: var(--s16); }
.section--soft { background: var(--surface); }
.section--dark { background: var(--ink); color: var(--paper); }
.section--tight { padding-block: var(--s10); }

.section__head { max-width: 640px; margin-bottom: var(--s10); }
.section__head--center { margin-inline: auto; text-align: center; }

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--s2);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--teal);
	background: var(--teal-soft);
	padding: var(--s1) var(--s3);
	border-radius: var(--radius-pill);
	margin-bottom: var(--s4);
}
.eyebrow svg { width: 1rem; height: 1rem; }
.section--dark .eyebrow { background: rgba(216,255,84,.14); color: var(--signal); }

h1 { font-size: clamp(2.1rem, 3.4vw, 3.4rem); font-weight: 700; line-height: 1.08; letter-spacing: -.01em; }
h2 { font-size: clamp(1.6rem, 2.4vw, 2.3rem); font-weight: 700; line-height: 1.16; letter-spacing: -.01em; }
h3 { font-size: 1.25rem; font-weight: 700; line-height: 1.25; }
p { line-height: 1.6; color: var(--muted); }
.lead { font-size: 1.1rem; color: var(--ink-2); }

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

/* ============ Barre de contact (au-dessus du header) ============ */

.topbar { background: var(--ink); color: var(--paper); font-size: .92rem; }
.topbar__row {
	width: 100%;
	max-width: var(--content-width);
	margin-inline: auto;
	padding-inline: var(--s6);
	padding-block: var(--s3);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s6);
	flex-wrap: wrap;
}
.topbar__contacts { display: flex; align-items: center; gap: var(--s8); flex-wrap: wrap; }
.topbar__contacts a, .topbar__contacts span {
	display: inline-flex;
	align-items: center;
	gap: var(--s2);
	font-weight: 600;
	color: var(--paper);
}
.topbar__contacts a:hover { color: var(--signal); }
.topbar__contacts svg, .topbar__contacts .icon-wa { width: 1.15rem; height: 1.15rem; flex-shrink: 0; color: var(--signal); }

/* ============ Header ============ */

.site-header {
	position: sticky;
	top: 0;
	z-index: 40;
	height: var(--topbar-height);
	display: flex;
	align-items: center;
	background: #fff;
	border-bottom: 1px solid var(--line);
}

.site-header__row {
	width: 100%;
	max-width: var(--content-width);
	margin-inline: auto;
	padding-inline: var(--s6);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s8);
}

.brand {
	display: flex;
	align-items: center;
	gap: var(--s2);
	font-weight: 800;
	font-size: 1.3rem;
	color: var(--ink);
	flex-shrink: 0;
}
.brand span { color: var(--teal); }
.site-header .brand-logo { height: 28px; width: auto; }

.primary-nav { display: flex; align-items: center; gap: var(--s6); margin-inline: auto; }
.primary-nav a {
	font-size: .92rem;
	font-weight: 600;
	color: var(--ink-2);
	padding: var(--s2) 0;
	border-bottom: 2px solid transparent;
	transition: color var(--transition), border-color var(--transition);
}
.primary-nav a:hover, .primary-nav a.is-active { color: var(--teal); border-color: var(--teal); }

.header-actions { display: flex; align-items: center; gap: var(--s3); flex-shrink: 0; }

.locale-switch {
	display: inline-flex;
	align-items: center;
	gap: var(--s1);
	font-size: .85rem;
	font-weight: 600;
	color: var(--ink-2);
	padding: var(--s2) var(--s3);
	border-radius: var(--radius-sm);
	border: 1px solid var(--line);
	background: var(--surface);
}
.locale-switch__flag { display: inline-flex; flex-shrink: 0; width: 16px; height: 16px; border-radius: 50%; overflow: hidden; }
.locale-switch__flag img { width: 100%; height: 100%; object-fit: contain; display: block; }

.nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--line);
	background: var(--surface);
}

.mobile-nav {
	position: fixed;
	inset: var(--header-offset, var(--topbar-height)) 0 0 0;
	background: var(--paper);
	z-index: 39;
	padding: var(--s8) var(--s6);
	overflow-y: auto;
	transform: translateY(-16px);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: transform .28s ease, opacity .28s ease, visibility 0s .28s;
}
.mobile-nav.is-open {
	transform: translateY(0);
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: transform .28s ease, opacity .28s ease, visibility 0s;
}

/* ============ Méga-menu desktop (fullwidth, animé) ============ */

.mega-menu__scrim {
	position: fixed;
	inset: var(--header-offset, var(--topbar-height)) 0 0 0;
	background: rgba(16,23,19,.22);
	z-index: 37;
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s ease, visibility 0s .25s;
}
.mega-menu__scrim.is-open { opacity: 1; visibility: visible; transition: opacity .25s ease, visibility 0s; }

.mega-menu {
	position: fixed;
	top: var(--header-offset, var(--topbar-height));
	left: 0; right: 0;
	background: #fff;
	border-bottom: 1px solid var(--line);
	z-index: 38;
	transform: translateY(-12px);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: transform .25s ease, opacity .25s ease, visibility 0s .25s;
}
.mega-menu.is-open {
	transform: translateY(0);
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: transform .25s ease, opacity .25s ease, visibility 0s;
}
.mega-menu__inner { display: grid; grid-template-columns: repeat(4, 1fr) 1.3fr; gap: var(--s8); padding-block: var(--s8); }
.mega-menu__col h4 { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: var(--s4); }
.mega-menu__col ul { display: flex; flex-direction: column; gap: var(--s3); }
.mega-menu__col a { display: flex; align-items: center; gap: var(--s2); font-size: .88rem; color: var(--ink-2); }
.mega-menu__col a:hover { color: var(--teal); }
.mega-menu__col svg { width: 1rem; height: 1rem; color: var(--teal); flex-shrink: 0; }
.mega-menu__promo { background: var(--paper); border-radius: var(--radius-md); padding: var(--s6); display: flex; flex-direction: column; gap: var(--s3); }
.mega-menu__promo > .badge { align-self: flex-start; }
.mega-menu__promo p { font-size: .82rem; }

/* ---- Panneau consolidé "Produits" : tabs verticaux + tabpanels + colonnes partagées ---- */
.mega-menu__inner--products {
	grid-template-columns: 220px 1fr;
	grid-template-rows: auto auto;
	align-items: start;
}
.mega-menu__tabs {
	grid-column: 1;
	grid-row: 1 / span 2;
	display: flex;
	flex-direction: column;
	gap: var(--s2);
	border-right: 1px solid var(--line);
	padding-right: var(--s6);
}
.mega-menu__tabs button {
	display: flex;
	align-items: center;
	gap: var(--s3);
	border: 1px solid transparent;
	border-radius: var(--radius-md);
	background: none;
	padding: var(--s3) var(--s4);
	font-size: .88rem;
	font-weight: 700;
	color: var(--ink-2);
	text-align: left;
	cursor: pointer;
}
.mega-menu__tabs button svg { width: 1rem; height: 1rem; color: var(--teal); flex-shrink: 0; }
.mega-menu__tabs button:hover { border-color: var(--teal); background: var(--teal-soft); }
.mega-menu__tabs button[aria-selected="true"] { border-color: var(--teal); background: var(--teal-soft); }
.mega-menu__tabs button[aria-selected="true"] span { color: var(--teal); }
.mega-menu__tabpanels { grid-column: 2; grid-row: 1; }
.mega-menu__tabpanel { display: grid; grid-template-columns: 1fr 1fr 1.1fr; gap: var(--s8); }
.mega-menu__tabpanel[hidden] { display: none; }
.mega-menu__col-shared-group { grid-column: 2; grid-row: 2; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s8); margin-top: var(--s8); padding-top: var(--s8); border-top: 1px solid var(--line); }

/* ============ Sélecteur de langue plein écran (drapeau + ISO) ============ */

.locale-menu {
	position: fixed;
	top: var(--header-offset, var(--topbar-height));
	left: 0; right: 0;
	background: #fff;
	border-bottom: 1px solid var(--line);
	z-index: 38;
	max-height: calc(100vh - var(--header-offset, var(--topbar-height)));
	overflow-y: auto;
	-ms-overflow-style: none;
	scrollbar-width: none;
	transform: translateY(-12px);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: transform .25s ease, opacity .25s ease, visibility 0s .25s;
}
.locale-menu::-webkit-scrollbar { display: none; }
.locale-menu.is-open {
	transform: translateY(0);
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: transform .25s ease, opacity .25s ease, visibility 0s;
}
.locale-menu__inner { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s3); padding-block: var(--s8); }
/* Lien "retour au menu" : n'a de sens que quand le sélecteur a été ouvert
   depuis le tiroir mobile (celui-ci se ferme avant l'ouverture) — masqué
   sur desktop où il n'y a pas de tiroir à rouvrir. */
.locale-menu__back {
	display: none;
	grid-column: 1 / -1;
	align-items: center;
	gap: var(--s2);
	width: 100%;
	background: none;
	border: none;
	border-bottom: 1px solid var(--divider);
	padding: 0 0 var(--s4);
	margin-bottom: var(--s2);
	font-size: .88rem;
	font-weight: 700;
	color: var(--teal);
	text-align: left;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.locale-menu__back svg { width: 1rem; height: 1rem; color: var(--teal); flex-shrink: 0; }
.locale-menu__item {
	display: flex;
	align-items: center;
	gap: var(--s3);
	padding: var(--s3);
	border-radius: var(--radius-sm);
	border: 1px solid var(--line);
	background: var(--surface);
	text-align: left;
}
.locale-menu__item:hover { border-color: var(--teal); background: var(--teal-soft); }
.locale-menu__item.is-active { border-color: var(--teal); background: var(--teal-soft); }
.locale-menu__item.is-active .locale-menu__item-text strong { color: var(--teal); }
/* Vignette du drapeau réel (asset_flag_lang) : icône ronde (SVG carré),
   boîte carrée sans bordure pour ne pas la couper. */
.locale-menu__item .flag {
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}
.locale-menu__item .flag img { width: 100%; height: 100%; object-fit: contain; display: block; }
.locale-menu__item-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.locale-menu__item-text strong { font-size: .82rem; font-weight: 800; color: var(--ink); }
.locale-menu__item-text small { font-size: .7rem; font-weight: 500; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ============ Popup RGPD ============ */

.gdpr-banner {
	position: fixed;
	left: var(--s5); right: var(--s5); bottom: var(--s5);
	max-width: 460px;
	margin-inline: auto;
	background: #fff;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-lg);
	padding: var(--s6);
	z-index: 90;
	transform: translateY(24px);
	opacity: 0;
	visibility: hidden;
	transition: transform .3s ease, opacity .3s ease, visibility 0s .3s;
}
.gdpr-banner.is-visible { transform: translateY(0); opacity: 1; visibility: visible; transition: transform .3s ease, opacity .3s ease, visibility 0s; }
.gdpr-banner__head { display: flex; align-items: center; gap: var(--s2); font-weight: 800; margin-bottom: var(--s2); }
.gdpr-banner__head svg { color: var(--teal); }
.gdpr-banner p { font-size: .84rem; }
.gdpr-banner p a { font-weight: 700; color: var(--teal); }
.gdpr-banner__actions { display: flex; gap: var(--s3); margin-top: var(--s5); flex-wrap: wrap; }
.gdpr-banner__actions .btn { flex: 1; }

/* ============ Galaxie de devises autour du logo ============ */

.orbit__satellite-wrap { position: absolute; inset: -8%; animation: orbit-rotate 24s linear infinite; }
.orbit__satellite-wrap--2 { animation-delay: -6s; }
.orbit__satellite-wrap--3 { animation-delay: -12s; }
.orbit__satellite-wrap--4 { animation-delay: -18s; }
.orbit__satellite {
	position: absolute; top: 0; left: 50%;
	width: 46px; height: 46px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--line-strong);
	display: flex; align-items: center; justify-content: center;
	overflow: hidden;
	transform: translate(-50%, -50%);
	animation: orbit-counter-rotate 24s linear infinite;
}
.orbit__satellite img { width: 100%; height: 100%; object-fit: cover; }
.orbit__satellite-wrap--2 .orbit__satellite, .orbit__satellite-wrap--3 .orbit__satellite, .orbit__satellite-wrap--4 .orbit__satellite { animation-delay: inherit; }

@keyframes orbit-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes orbit-counter-rotate { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(-360deg); } }

@media (prefers-reduced-motion: reduce) {
	.orbit__satellite-wrap, .orbit__satellite { animation: none; }
}

/* ============ Galaxie multi-devises — favicon central + anneaux + devises en orbite ============ */

/* Taille fluide (clamp) : tous les enfants sont dimensionnés en %, donc ils
   rétrécissent avec le conteneur au lieu de déborder en px fixe sur mobile.
   overflow: hidden — les satellites (taille fixe en px, voir .mega-orbit__sat)
   ne suivent pas ce rétrécissement en %, donc à faible largeur ils peuvent
   dépasser la boîte à certaines phases de la rotation ; ce clip empêche tout
   débordement horizontal de page sans rogner l'effet voulu (satellites à
   cheval sur le trait de l'anneau), qui reste bien à l'intérieur de la boîte. */
.mega-orbit { position: relative; width: clamp(240px, 78vw, 520px); height: clamp(240px, 78vw, 520px); max-width: 100%; margin-inline: auto; overflow: hidden; }

.mega-orbit__ring {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: #fff;
}
.mega-orbit__ring--1 { width: 38.46%; height: 38.46%; opacity: 1; z-index: 3; }
.mega-orbit__ring--2 { width: 61.54%; height: 61.54%; opacity: .75; z-index: 2; }
.mega-orbit__ring--3 { width: 84.62%; height: 84.62%; opacity: .5; z-index: 1; }

.mega-orbit__core {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 21.15%; height: 21.15%;
	border-radius: 50%;
	background: var(--surface);
	display: flex; align-items: center; justify-content: center;
	z-index: 4;
}
.mega-orbit__core img { width: 49%; height: 49%; object-fit: contain; }

/* Rayon de l'orbite des satellites = rayon exact de l'anneau extérieur, en %
   (inset symétrique = même technique que .orbit__satellite-wrap plus haut),
   pour qu'ils tournent moitié dedans, moitié dehors de son trait, à toute
   taille d'écran. z-index au-dessus du cœur pour que les drapeaux restent
   visibles par-dessus. */
.mega-orbit__sat-wrap {
	position: absolute;
	inset: 7.69%;
	z-index: 5;
	animation: orbit-rotate 40s linear infinite;
}
.mega-orbit__sat {
	position: absolute;
	top: 0; left: 50%;
	width: 52px; height: 52px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--line-strong);
	display: flex; align-items: center; justify-content: center;
	overflow: hidden;
	transform: translate(-50%, -50%);
	animation: orbit-counter-rotate 40s linear infinite;
}
.mega-orbit__sat img { width: 100%; height: 100%; object-fit: cover; }

@media (prefers-reduced-motion: reduce) {
	.mega-orbit__sat-wrap, .mega-orbit__sat { animation: none; }
}

/* ============ Avis vérifiés (type "trust score") ============ */

.trustscore { display: flex; align-items: center; gap: var(--s8); flex-wrap: wrap; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--s8); }
.trustscore__score { text-align: center; flex-shrink: 0; }
.trustscore__score strong { display: block; font-size: 2.4rem; font-weight: 800; }
.trustscore__stars { display: flex; gap: 2px; justify-content: center; margin-block: var(--s2); }
.trustscore__stars svg { width: 1.2rem; height: 1.2rem; color: var(--signal-deep); fill: currentColor; }
.trustscore__score span { font-size: .78rem; color: var(--muted); }
.trustscore__bars { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: var(--s2); }
.trust-bar { display: flex; align-items: center; gap: var(--s3); font-size: .78rem; color: var(--muted); }
.trust-bar__track { flex: 1; height: 6px; background: var(--divider); border-radius: var(--radius-pill); overflow: hidden; }
.trust-bar__fill { height: 100%; background: var(--teal); }

/* ============ Bandeau image pleine largeur + bloc inset ============ */

.media-band { position: relative; border-radius: var(--radius-xl); overflow: hidden; min-height: 420px; display: flex; align-items: center; }
.media-band__bg {
	position: absolute; inset: 0;
	background:
		linear-gradient(135deg, rgba(16,23,19,.62), rgba(12,108,88,.5)),
		url('/assets/guest/images/home/media-band.jpg') center/cover no-repeat;
}
.media-band__bg::after {
	content: "";
	position: absolute; inset: 0;
	background-image: repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 2px, transparent 2px 42px);
}
.media-band__inset {
	position: relative; z-index: 1;
	background: #fff;
	border-radius: var(--radius-lg);
	padding: var(--s8);
	max-width: 380px;
	margin: var(--s10);
}

.balance-band { position: relative; border-radius: var(--radius-xl); overflow: hidden; min-height: 340px; display: flex; align-items: flex-end; padding: var(--s10); }
.balance-band__bg {
	position: absolute; inset: 0;
	background:
		linear-gradient(150deg, rgba(16,23,19,.62), rgba(12,108,88,.45)),
		url('/assets/guest/images/home/balance-band.jpg') center/cover no-repeat;
}
.balance-band .balance-tile { position: relative; z-index: 1; }

/* ============ Devises éparpillées ("pêle-mêle") ============ */

.split-visual { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--s12); align-items: center; }
.split-visual--reverse { grid-template-columns: .9fr 1.1fr; }
.split-visual--reverse .split-visual__visual { order: -1; }

.currency-scatter { position: relative; height: 240px; }
.currency-scatter__item {
	position: absolute;
	width: 58px; height: 58px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--line-strong);
	display: flex; align-items: center; justify-content: center;
	overflow: hidden;
	animation: float-y 5s ease-in-out infinite;
}
.currency-scatter__item img { width: 100%; height: 100%; object-fit: cover; }
@keyframes float-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@media (prefers-reduced-motion: reduce) { .currency-scatter__item { animation: none; } }

/* ============ Hero avec fond animé (remplace une vidéo) ============ */

.hero--media { position: relative; overflow: hidden; color: #fff; }
.hero__bg-motion { position: absolute; inset: 0; background: url('../images/home/hero.jpg') center/cover no-repeat, var(--ink); z-index: 0; overflow: hidden; }
.hero__bg-motion span { position: absolute; border-radius: 50%; filter: blur(70px); }
.hero__bg-motion span:nth-child(1) { width: 440px; height: 440px; background: var(--teal); opacity: .6; top: -140px; left: -100px; animation: drift-a 18s ease-in-out infinite; }
.hero__bg-motion span:nth-child(2) { width: 380px; height: 380px; background: var(--signal); opacity: .3; bottom: -160px; right: -80px; animation: drift-b 22s ease-in-out infinite; }
.hero__bg-motion::after { content: ""; position: absolute; inset: 0; background: rgba(16,23,19,.58); }
@keyframes drift-a { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(50px,-30px) scale(1.15); } }
@keyframes drift-b { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-40px,30px) scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .hero__bg-motion span { animation: none; } }
.home-hero .hero__bg-motion span { display: none; }
.hero--media .container, .hero--media .hero__grid { position: relative; z-index: 1; }
.hero--media h1, .hero--media .lead, .hero--media .hero__trust span { color: #fff; }
.hero--media .lead { color: rgba(255,255,255,.82); }
.hero--media .hero__trust span { color: rgba(255,255,255,.75); }
.hero--media .hero__trust svg { color: var(--signal); }
.hero--media .btn--outline { border-color: rgba(255,255,255,.4); color: #fff; }

/* Hero variante D (vidéo) — même habillage que .hero--media (overlay sombre,
texte blanc), fond remplacé par une <video> ; le poster (défini en style
inline sur .hero__bg-video) sert de secours si prefers-reduced-motion. */
.hero--video { position: relative; overflow: hidden; color: #fff; }
.hero__bg-video { position: absolute; inset: 0; z-index: 0; overflow: hidden; background-size: cover; background-position: center; }
.hero__bg-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__bg-video::after { content: ""; position: absolute; inset: 0; background: rgba(16,23,19,.58); }
@media (prefers-reduced-motion: reduce) { .hero__bg-video video { display: none; } }
.hero--video .container, .hero--video .hero__grid { position: relative; z-index: 1; }
.hero--video h1, .hero--video .lead, .hero--video .hero__trust span { color: #fff; }
.hero--video .lead { color: rgba(255,255,255,.82); }
.hero--video .hero__trust span { color: rgba(255,255,255,.75); }
.hero--video .hero__trust svg { color: var(--signal); }
.hero--video .btn--outline { border-color: rgba(255,255,255,.4); color: #fff; }
.mobile-nav a {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: var(--s3);
	padding: var(--s4) 0;
	border-bottom: 1px solid var(--divider);
}
.mobile-nav > a svg { width: 1.2rem; height: 1.2rem; color: var(--teal); flex-shrink: 0; }
.mobile-nav > a > span { display: flex; flex-direction: column; gap: 2px; }
.mobile-nav > a strong { font-size: 1.1rem; font-weight: 700; color: var(--ink); }
.mobile-nav > a small { font-size: .8rem; font-weight: 500; color: var(--muted); }
.mobile-nav__actions { display: flex; flex-direction: column; gap: var(--s3); margin-top: var(--s8); }
/* .mobile-nav a impose justify-content:space-between + gros libellé pour
   les liens de navigation — annulé ici pour que les boutons restent des
   boutons centrés (icône + texte) au lieu d'hériter ce style de lien. */
.mobile-nav__actions .btn {
	justify-content: center;
	padding: 0 var(--s5);
	font-size: .88rem;
	border-bottom: none;
}

.mobile-nav__locale {
	display: flex;
	align-items: center;
	gap: var(--s3);
	width: 100%;
	margin-bottom: var(--s6);
	padding: var(--s3) var(--s4);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: var(--surface);
}
.mobile-nav__locale > svg { width: 1.2rem; height: 1.2rem; color: var(--teal); flex-shrink: 0; }
.mobile-nav__locale-text { display: flex; flex-direction: column; gap: 2px; flex: 1; text-align: left; }
.mobile-nav__locale-text strong { font-size: .92rem; font-weight: 700; color: var(--ink); }
.mobile-nav__locale-text small { font-size: .78rem; font-weight: 500; color: var(--muted); }
.mobile-nav__locale .locale-switch__code {
	font-size: .78rem;
	font-weight: 800;
	color: var(--teal);
	background: var(--teal-soft);
	padding: var(--s1) var(--s2);
	border-radius: var(--radius-pill);
}
.mobile-nav__locale > svg:last-child { color: var(--muted-2); width: 1rem; height: 1rem; }

.mobile-nav__contacts {
	display: flex;
	flex-direction: column;
	gap: var(--s2);
	margin-top: var(--s8);
	padding-top: var(--s6);
	border-top: 1px solid var(--divider);
}
.mobile-nav__contacts a, .mobile-nav__contacts span {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	gap: var(--s2);
	padding: var(--s1) 0;
	font-size: .92rem;
	font-weight: 600;
	color: var(--ink-2);
	border-bottom: none;
}
.mobile-nav__contacts a:hover { color: var(--teal); }
.mobile-nav__contacts svg, .mobile-nav__contacts .icon-wa { width: 1.1rem; height: 1.1rem; flex-shrink: 0; color: var(--teal); }

/* ============ Boutons ============ */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s2);
	min-height: 46px;
	padding: 0 var(--s5);
	border-radius: var(--radius-sm);
	border: 1px solid transparent;
	font-size: .88rem;
	font-weight: 700;
	white-space: nowrap;
	cursor: pointer;
	transition: transform var(--transition), background var(--transition), border-color var(--transition), color var(--transition);
}
.btn svg { width: 1.05rem; height: 1.05rem; }
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--ink); color: var(--paper); }
.btn--primary:hover { background: var(--ink-2); }

.btn--signal { background: var(--signal); color: var(--ink); }
.btn--signal:hover { background: var(--signal-deep); }

.btn--secondary { background: var(--surface); border-color: var(--ink); color: var(--ink); }
.btn--secondary:hover { background: var(--paper); }

.btn--outline { background: transparent; border-color: var(--line-strong); color: var(--ink); }
.btn--outline:hover { border-color: var(--ink); }

.btn--ghost { background: transparent; color: var(--ink-2); }
.btn--ghost:hover { color: var(--ink); }

.btn--danger { background: transparent; border-color: var(--coral); color: var(--coral); }

.btn--sm { min-height: 38px; padding: 0 var(--s4); font-size: .82rem; }
.btn--lg { min-height: 52px; padding: 0 var(--s6); font-size: .95rem; }
.btn--block { width: 100%; }

.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ============ Hero ============ */

.hero {
	padding-block: var(--s24) var(--s16);
	background:
		radial-gradient(720px 420px at 85% -10%, rgba(216,255,84,.28), transparent 60%),
		var(--paper);
}
.hero__grid {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: var(--s16);
	align-items: center;
}
.hero__actions { display: flex; gap: var(--s3); margin-top: var(--s8); flex-wrap: wrap; }
.hero__trust { display: flex; gap: var(--s6); margin-top: var(--s10); flex-wrap: wrap; }
.hero__trust span { display: flex; align-items: center; gap: var(--s2); font-size: .82rem; font-weight: 600; color: var(--muted); }
.hero__trust svg { color: var(--teal); width: 1.1rem; height: 1.1rem; }

.hero__visual { position: relative; min-height: 380px; }
.bank-card.hero__visual-card { position: absolute; right: 0; bottom: -30px; }
.badge.hero__visual-badge { position: absolute; left: 0; bottom: 10px; background: var(--surface); padding: var(--s2) var(--s3); }

/* Pile visuelle : solde + carte, empilées, décor pur CSS (aucune image) */
.balance-tile {
	background: var(--surface);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-lg);
	padding: var(--s6);
	max-width: 300px;
}
.balance-tile span { display: block; font-size: .78rem; font-weight: 600; color: var(--muted); margin-bottom: var(--s2); }
.balance-tile strong { font-size: 1.9rem; font-weight: 800; color: var(--ink); }
.balance-tile__row { display: flex; justify-content: space-between; margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--divider); font-size: .78rem; color: var(--muted); }

/* ============ Carte bancaire — 100% CSS, construite de zéro ============ */

.bank-card {
	position: relative;
	width: min(100%, 340px);
	aspect-ratio: 1.586;
	border-radius: var(--radius-md);
	padding: var(--s5);
	color: #fff;
	overflow: hidden;
	box-shadow: 0 10px 20px rgba(16,23,19,.14);
	border: 1px solid rgba(255,255,255,.14);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.bank-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url('../images/cards/guilloche.svg'), linear-gradient(135deg, var(--ink) 0%, var(--ink-2) 55%, var(--teal) 130%);
	background-size: cover, cover;
	background-position: center, center;
	background-blend-mode: soft-light;
}
.bank-card::after {
	content: "";
	position: absolute;
	width: 220px; height: 220px;
	right: -70px; top: -90px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(216,255,84,.35), transparent 70%);
}
.bank-card > * { position: relative; z-index: 1; }
.bank-card__top { display: flex; justify-content: space-between; align-items: flex-start; }
.bank-card__brand { font-weight: 800; letter-spacing: .02em; font-size: 1.05rem; }
.bank-card__brand span { color: var(--signal); }
.bank-card__chip {
	width: 40px; height: 30px;
	margin-top: var(--s5);
	border-radius: 6px;
	background: linear-gradient(155deg, #f4e3ab, #cba966);
	display: grid;
	grid-template-columns: 1fr 1fr;
}
.bank-card__chip::before, .bank-card__chip::after { content: ""; border: 1px solid rgba(0,0,0,.22); }
.bank-card__number { font-size: 1.1rem; letter-spacing: .12em; font-weight: 600; font-variant-numeric: tabular-nums; }
.bank-card__bottom { display: flex; justify-content: space-between; align-items: flex-end; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; opacity: .85; }
.bank-card__bottom strong { display: block; font-size: .88rem; text-transform: none; letter-spacing: 0; opacity: 1; }

.bank-card--gold::before {
	background-image: url('../images/cards/guilloche.svg'), linear-gradient(135deg, #5a4a1f 0%, #8a6d2c 55%, #d5bd78 130%);
	background-size: cover, cover;
	background-position: center, center;
	background-blend-mode: soft-light;
}
.bank-card--gold .bank-card__brand span { color: #fff4cf; }

.bank-card--business::before {
	background-image: url('../images/cards/guilloche.svg'), linear-gradient(135deg, var(--ink) 0%, var(--ink-2) 55%, var(--teal) 140%);
	background-size: cover, cover;
	background-position: center, center;
	background-blend-mode: soft-light;
}

.bank-card-stage {
	background: var(--ink);
	border-radius: var(--radius-xl);
	padding: var(--s16) var(--s10);
	display: flex;
	justify-content: center;
	align-items: center;
}

/* ============ Bande partenaires (forme fine, pleine largeur) ============ */

.strip { background: var(--surface); border-block: 1px solid var(--line); padding-block: var(--s6); }
/* Bande partenaires : défilement horizontal continu (marquee), jamais de
   retour à la ligne, à toute largeur. Le markup duplique le jeu d'items une
   fois (.strip__set × 2, voir partners-strip.blade.php) : l'espacement est
   porté par margin-right sur .strip__item (pas de gap sur .strip__track),
   donc les deux .strip__set ont une largeur strictement identique et
   translateX(-50%) tombe exactement sur la jonction — aucun saut visible,
   ni début ni fin perceptibles. */
.strip__viewport { overflow: hidden; }
.strip__track { display: flex; width: max-content; animation: strip-scroll 22s linear infinite; will-change: transform; }
.strip:hover .strip__track { animation-play-state: paused; }
.strip__set { display: flex; align-items: center; flex: 0 0 auto; }
.strip__item { display: flex; align-items: center; gap: var(--s2); font-weight: 800; font-size: .95rem; color: var(--muted); letter-spacing: .01em; flex: 0 0 auto; white-space: nowrap; margin-right: var(--s10); }
.strip__item svg { width: 1.15rem; height: 1.15rem; }
.strip__item-img { width: 1.5rem; height: 1.5rem; border-radius: var(--radius-sm); object-fit: cover; border: 1px solid var(--line); flex-shrink: 0; }
@keyframes strip-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.strip__track { animation: none; }
}

/* ============ Étapes numérotées ============ */

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s8); }
.step { text-align: center; position: relative; }
.step__num {
	width: 52px; height: 52px;
	border-radius: 50%;
	background: var(--ink);
	color: var(--signal);
	display: flex; align-items: center; justify-content: center;
	font-weight: 800; font-size: 1.05rem;
	margin-inline: auto;
}
.step h3 { margin-top: var(--s4); }
.step p { margin-top: var(--s2); font-size: .88rem; }

/* ============ Bloc sombre arrondi (variante de section--dark, forme "carte") ============ */

.showcase {
	background: var(--ink);
	color: var(--paper);
	border-radius: var(--radius-xl);
	padding: var(--s16) var(--s12);
	position: relative;
	overflow: hidden;
}
.showcase__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: var(--s12); align-items: center; }
.showcase__grid--reverse { grid-template-columns: 1.15fr .85fr; }
.showcase__grid--reverse .showcase__visual { order: 2; }
.showcase p { color: var(--muted-2); }

.orbit { position: relative; aspect-ratio: 1; max-width: 300px; margin-inline: auto; }
.orbit__ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.14); }
.orbit__ring--inner { inset: 15%; border-color: rgba(255,255,255,.2); }
.orbit__core {
	position: absolute; inset: 32%;
	border-radius: 50%;
	background: linear-gradient(155deg, var(--teal), #0a5a49);
	display: flex; align-items: center; justify-content: center;
}
.orbit__core svg { width: 2.3rem; height: 2.3rem; color: #fff; }
.orbit__badge {
	position: absolute; top: 6%; right: -4%;
	background: var(--signal); color: var(--ink);
	border-radius: var(--radius-pill);
	padding: var(--s2) var(--s3);
	font-size: .72rem; font-weight: 800;
	display: flex; align-items: center; gap: var(--s1);
	border: 1px solid rgba(0,0,0,.08);
}

/* Emplacement fixe accueil (index.blade.php) : bordure de séparation
   garantie avec la section suivante (FAQ ou CTA final), quelle que soit
   la variante d'app-promo tirée — évite l'effet de fusion entre deux tons
   de fond proches (surface/paper) sans bordure ni ombre entre eux. */
.app-promo-slot { border-bottom: 1px solid var(--line); }

/* ============ Promo application — section split, photo pleine largeur ============ */

.app-promo { background: var(--surface); border-radius: var(--radius-xl); padding: var(--s16) var(--s12); }
.app-promo__grid { display: grid; grid-template-columns: 1fr .75fr; gap: var(--s12); align-items: center; }
.app-promo__visual { order: 2; position: relative; }
.app-promo__visual img {
	width: 100%;
	aspect-ratio: 1/1;
	object-fit: cover;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
}

/* ============ Cards / listes ============ */

.card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	padding: var(--s6);
}
.card--elevated { border-color: var(--line-strong); }

/* Carte "active"/mise en avant : fond couleur accent, jamais d'ombre */
.card--accent { background: var(--signal); border-color: var(--signal-deep); }
.card--accent p { color: var(--ink-2); }
.card--accent .badge--teal { background: var(--surface); }
.card--accent .btn--outline { border-color: var(--ink); }

.feature-list { display: grid; gap: var(--s3); }
.feature-list li { display: flex; align-items: flex-start; gap: var(--s3); font-size: .92rem; color: var(--ink-2); }
.feature-list svg { color: var(--teal); flex-shrink: 0; width: 1.15rem; height: 1.15rem; margin-top: .1rem; }

.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s6); }
.stat strong { display: block; font-size: 2rem; font-weight: 800; }
.stat span { font-size: .82rem; color: var(--muted); }
.section--dark .stat span { color: var(--muted-2); }
.section--dark .section__head p { color: var(--muted-2); }

/* Séparateur vertical entre chiffres clés (ex. "Le prêt en quelques chiffres"). */
.grid--stats-divided > .stat { position: relative; text-align: center; }
.grid--stats-divided > .stat:not(:first-child)::before {
	content: '';
	position: absolute;
	left: calc(var(--s6) / -2);
	top: 0;
	bottom: 0;
	width: 1px;
	background: var(--divider);
}

/* Badge de réputation Trustpilot, sous les chiffres clés (accueil). */
.trust-badge { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s3); margin-top: var(--s10); padding-top: var(--s8); border-top: 1px solid rgba(243, 240, 232, .12); }
.trust-badge__logo { height: 4rem; width: auto; }
.trust-badge__text { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2); font-size: .86rem; color: var(--muted-2); }

.badge {
	display: inline-flex;
	align-items: center;
	gap: var(--s1);
	font-size: .74rem;
	font-weight: 700;
	padding: var(--s1) var(--s2);
	border-radius: var(--radius-pill);
}
.badge--teal { background: var(--teal-soft); color: var(--teal); }
.badge--warning { background: var(--warning-soft); color: var(--warning); }
.badge--coral { background: var(--coral-soft); color: var(--coral); }
.badge--neutral { background: var(--divider); color: var(--muted); }

/* ============ Onglets produits (accueil) ============ */

.tabs-nav { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s8); }
.tab-btn {
	padding: var(--s2) var(--s5);
	border-radius: var(--radius-pill);
	border: 1px solid var(--line);
	background: var(--surface);
	font-size: .85rem;
	font-weight: 700;
	color: var(--ink-2);
	display: inline-flex;
	align-items: center;
	gap: var(--s2);
}
.tab-btn.is-active { background: var(--signal); border-color: var(--signal-deep); color: var(--ink); }

/* ============ Visuels d'onglets produits — stage sombre + carte détail ============ */

.tab-visual {
	position: relative;
	overflow: hidden;
	background: linear-gradient(160deg, var(--ink) 0%, var(--ink-2) 60%, #16241d 100%);
	border-radius: var(--radius-xl);
	padding: var(--s10);
	height: 440px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.tab-visual::before {
	content: "";
	position: absolute; inset: 0;
	background-image: radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px);
	background-size: 22px 22px;
	-webkit-mask-image: radial-gradient(circle at 30% 25%, #000 0%, transparent 70%);
	mask-image: radial-gradient(circle at 30% 25%, #000 0%, transparent 70%);
}
.tab-visual::after {
	content: "";
	position: absolute; width: 320px; height: 320px;
	right: -110px; bottom: -120px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(216,255,84,.22), transparent 70%);
}
.tab-visual > * { position: relative; z-index: 1; }
.tab-visual__card { background: var(--surface); border-radius: var(--radius-lg); padding: var(--s6); width: 100%; max-width: 340px; }
.tab-visual__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.tab-visual__head strong { font-size: 1.7rem; font-weight: 800; display: block; margin-top: var(--s3); }
.tab-visual__head span { font-size: .78rem; color: var(--muted); }

.mini-tx { display: grid; gap: var(--s3); margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--divider); }
.mini-tx__row { display: flex; align-items: center; gap: var(--s3); }
.mini-tx__icon { width: 34px; height: 34px; border-radius: 50%; background: var(--teal-soft); color: var(--teal); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mini-tx__icon svg { width: 1rem; height: 1rem; }
.mini-tx__body { flex: 1; min-width: 0; }
.mini-tx__body strong { display: block; font-size: .82rem; font-weight: 700; }
.mini-tx__body span { font-size: .72rem; color: var(--muted); }
.mini-tx__amount { font-size: .82rem; font-weight: 800; flex-shrink: 0; }
.mini-tx__amount--in { color: var(--teal); }

.gauge-track { height: 8px; border-radius: var(--radius-pill); background: var(--divider); overflow: hidden; margin-top: var(--s5); }
.gauge-track__fill { height: 100%; border-radius: var(--radius-pill); background: var(--teal); }
.mini-stat-row { display: flex; justify-content: space-between; gap: var(--s3); margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--divider); }
.mini-stat-row div span { display: block; font-size: .68rem; color: var(--muted); }
.mini-stat-row div strong { display: block; font-size: .9rem; font-weight: 800; margin-top: 2px; }

.cover-list { display: grid; gap: var(--s3); margin-top: var(--s5); }
.cover-list li { display: flex; align-items: center; gap: var(--s2); font-size: .82rem; font-weight: 600; color: var(--ink-2); }
.cover-list svg { width: 1.05rem; height: 1.05rem; color: var(--teal); flex-shrink: 0; }

.bank-card-stack { position: relative; width: min(100%, 340px); }
.bank-card-stack .bank-card--business { position: absolute; inset: 0; transform: translate(16px, 16px) scale(.96); opacity: .55; }
.bank-card-stack .bank-card--gold { position: relative; }

/* ============ Séparateurs obliques entre sections ============ */

/* Le triangle retiré par clip-path doit être "rattrapé" par la section
   voisine (marge négative = chevauchement), sinon il laisse apparaître le
   fond de la page au lieu de la couleur de la section adjacente. */
.slant-top { clip-path: polygon(0 28px, 100% 0, 100% 100%, 0 100%); margin-top: -28px; padding-top: calc(var(--s16) + 28px); position: relative; }
.slant-bottom { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 28px)); margin-bottom: -28px; padding-bottom: calc(var(--s16) + 28px); position: relative; }
.slant-both { clip-path: polygon(0 28px, 100% 0, 100% calc(100% - 28px), 0 100%); margin-block: -28px; padding-block: calc(var(--s16) + 28px); position: relative; }

/* ============ Slider témoignages (flèches + puces, scrollbar masquée) ============ */

.testimonial-slider { position: relative; }
.testimonial-rail {
	display: flex; gap: var(--s5);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	margin: 0 calc(var(--s6) * -1);
	padding-inline: var(--s6);
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.testimonial-rail::-webkit-scrollbar { display: none; height: 0; }
.testimonial-rail .testimonial-card { flex: 0 0 320px; scroll-snap-align: start; }
.testimonial-slider__controls { display: flex; align-items: center; justify-content: center; gap: var(--s6); margin-top: var(--s6); }
.testimonial-slider__arrow {
	width: 40px; height: 40px; border-radius: 50%;
	border: 1px solid var(--line-strong);
	background: var(--surface);
	display: flex; align-items: center; justify-content: center;
	color: var(--ink);
	flex-shrink: 0;
}
.testimonial-slider__arrow:hover { border-color: var(--teal); color: var(--teal); }
.testimonial-slider__dots { display: flex; gap: var(--s2); }
.testimonial-slider__dots button {
	width: 8px; height: 8px; border-radius: 50%;
	background: var(--divider); border: none; padding: 0;
}
.testimonial-slider__dots button.is-active { background: var(--teal); width: 22px; border-radius: var(--radius-pill); transition: width .2s ease, background .2s ease; }
.tab-panel { display: none; }
.tab-panel.is-active { display: grid; grid-template-columns: .9fr 1.1fr; gap: var(--s10); align-items: center; position: relative; }
.tab-panel.tab-panel--text.is-active { display: block; max-width: 720px; }

/* ============ Indicateur de scroll horizontal ============ */
/* Rangée de barres réutilisable : à ajouter juste sous tout bloc qui
   devient scrollable horizontalement sur petit écran (voir règles
   d'activation par section dans les media queries ci-dessous). */
.scroll-bars {
	display: none;
	width: fit-content;
	gap: var(--s2);
	margin-top: var(--s4);
	margin-inline: 0;
}
.scroll-bars span {
	flex: 0 0 auto;
	width: 22px;
	height: 4px;
	border-radius: var(--radius-pill);
	background: var(--line-strong);
}
.scroll-bars span:first-child {
	background: var(--teal);
}

/* ============ Témoignages ============ */

.testimonial-card { display: flex; flex-direction: column; gap: var(--s4); }
.testimonial-card__stars { display: flex; gap: 2px; color: var(--signal-deep); }
.testimonial-card__stars svg { width: 1rem; height: 1rem; fill: currentColor; }
.testimonial-card__quote { font-size: .95rem; color: var(--ink-2); }
.testimonial-card__author { display: flex; align-items: center; gap: var(--s3); margin-top: auto; }
.avatar-dot {
	width: 40px; height: 40px; border-radius: 50%;
	background: var(--teal-soft); color: var(--teal);
	display: flex; align-items: center; justify-content: center;
	font-weight: 800; font-size: .9rem;
}
.avatar-img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.testimonial-card__author strong { display: block; font-size: .85rem; }
.testimonial-card__author span { font-size: .76rem; color: var(--muted); }

.testimonial-spotlight {
	grid-column: span 2;
	background: var(--ink);
	border-color: var(--ink);
	color: var(--paper);
	flex-direction: row;
	align-items: center;
	gap: var(--s8);
}
.testimonial-spotlight .testimonial-card__quote { color: var(--paper); font-size: 1.2rem; font-weight: 600; }
.testimonial-spotlight .testimonial-card__author span { color: var(--muted-2); }
.testimonial-spotlight .avatar-dot { background: rgba(216,255,84,.16); color: var(--signal); flex-shrink: 0; }
.testimonial-spotlight .avatar-img { border: 2px solid rgba(255,255,255,.25); }

/* ============ FAQ (accordéon, jamais de table) ============ */

.faq-list { display: flex; flex-direction: column; gap: var(--s3); }
.faq-item { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; }
.faq-item__q {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s4);
	padding: var(--s5) var(--s6);
	font-weight: 700;
	font-size: .95rem;
	text-align: left;
	background: none;
	border: none;
	cursor: pointer;
}
.faq-item__q svg { transition: transform var(--transition); flex-shrink: 0; }
.faq-item.is-open .faq-item__q svg { transform: rotate(180deg); }
.faq-item__a { padding: 0 var(--s6); max-height: 0; overflow: hidden; transition: max-height var(--transition), padding var(--transition); }
.faq-item.is-open .faq-item__a { padding: 0 var(--s6) var(--s5); max-height: 400px; }

/* ============ Formulaires ============ */

.auth-shell {
	min-height: calc(100vh - var(--topbar-height));
	display: grid;
	grid-template-columns: 1fr 1fr;
}
.auth-shell__form { display: flex; align-items: center; padding: var(--s10) var(--s10); }
.auth-shell__panel {
	background: var(--surface);
	color: var(--ink);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: var(--s16);
	position: relative;
	overflow: hidden;
	border-left: 1px solid var(--line);
}
/* Deux blocs seulement dans le panneau : le logo seul en haut, tout le
   texte (accroche, chiffres, badges) resserré en bas au niveau du
   séparateur — le space-between du panneau fait le grand écart entre les
   deux, ce wrapper garde le bloc du bas cohérent en interne. */
.auth-shell__panel-content { display: flex; flex-direction: column; gap: var(--s4); }
.auth-shell__panel h2 { line-height: 1.25; }
.auth-shell__panel p { color: var(--muted); line-height: 1.6; }
.auth-shell__panel .feature-list { gap: var(--s4); }
.auth-shell__panel .feature-list li { color: var(--ink); line-height: 1.5; }
.auth-shell__panel .feature-list svg { color: var(--teal); }
/* Motif de fond (grille de points) — un fond plat seul est interdit (cf.
   convention projet), toujours un motif SVG discret dessus. Pas de
   dégradé : couleurs pleines uniquement. */
.auth-shell__panel::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Ccircle cx='2' cy='2' r='1.4' fill='%230c6c58' fill-opacity='.14'/%3E%3C/svg%3E");
	background-size: 36px 36px;
	pointer-events: none;
}
.auth-shell__panel::after {
	content: "";
	position: absolute;
	width: 420px; height: 420px;
	right: -140px; bottom: -160px;
	border-radius: 50%;
	background: var(--teal-soft);
	pointer-events: none;
}
.auth-shell__panel > * { position: relative; z-index: 1; }

/* Chiffres clés compacts, variante étroite du .stat-grid homepage (4 col)
   pensée pour la largeur du panneau auth (2 col, valeurs plus resserrées). */
.auth-panel-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); }
.auth-shell__panel .auth-panel-stats .stat strong { color: var(--ink); font-size: 1.7rem; }
.auth-shell__panel .auth-panel-stats .stat span { color: var(--muted); }

/* Badge de réputation Trustpilot, variante compacte du .trust-badge
   homepage (qui suppose la pleine largeur d'une section) — resserré pour
   tenir dans la colonne du panneau, aligné à gauche plutôt que centré. */
.auth-shell__panel .trust-badge {
	padding-top: var(--s5);
	border-top: 1px solid var(--line);
	justify-content: flex-start;
}
.auth-shell__panel .trust-badge__logo { height: 1.6rem; }
.auth-shell__panel .trust-badge__text { color: var(--muted); font-size: .82rem; }

/* Liste des garanties de sécurité/certification en bas du panneau — reprend
   les mêmes constats déjà établis dans le pied de page global (mêmes clés
   de traduction), présentés ici en petites pastilles. */
.auth-panel-badges {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--s3);
	padding-top: var(--s6);
	border-top: 1px solid var(--line);
}
.auth-panel-badges__item {
	display: flex;
	align-items: center;
	gap: var(--s2);
	font-size: .8rem;
	font-weight: 600;
	color: var(--ink);
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	padding: var(--s2) var(--s3);
}
.auth-panel-badges__item svg { width: 1.1rem; height: 1.1rem; flex-shrink: 0; color: var(--teal); }

/* Logo du site au-dessus du formulaire (pages sans header) — toujours
   visible. .auth-shell__inner porte la même largeur que le formulaire
   (au lieu de laisser chacun se centrer séparément) pour que le logo et le
   formulaire partagent exactement la même marge gauche, y compris sur
   ordinateur/tablette. */
.auth-shell__form { flex-direction: column; justify-content: center; }
.auth-shell__inner { width: 100%; max-width: 400px; margin-inline: auto; display: flex; flex-direction: column; gap: var(--s8); }
.auth-shell__inner--wide { max-width: 640px; }
.auth-brand { display: inline-flex; }
.auth-brand__logo { height: 40px; width: auto; }

/* Petit pied de page des pages auth (pas de long footer, juste mentions +
   quelques liens). */
.auth-footer {
	background: #fff;
	border-top: 1px solid var(--line);
	padding: var(--s6);
}
.auth-footer__row {
	max-width: var(--content-width);
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s4);
	flex-wrap: wrap;
	font-size: .82rem;
	color: var(--muted);
}
.auth-footer__links { display: flex; gap: var(--s5); flex-wrap: wrap; }
.auth-footer__links a { color: var(--muted); font-weight: 600; }
.auth-footer__links a:hover { color: var(--teal); }

.auth-form { width: 100%; }
.auth-steps { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s8); }
.auth-steps__dot {
	display: flex; align-items: center; justify-content: center;
	width: 28px; height: 28px; border-radius: 50%;
	border: 1px solid var(--line-strong); color: var(--muted);
	font-size: .8rem; font-weight: 700; flex-shrink: 0;
	transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}
.auth-steps__dot.is-active { background: var(--teal); border-color: var(--teal); color: #fff; }
.auth-steps__dot.is-done { background: var(--teal-soft); border-color: var(--teal); color: var(--teal); }
.auth-steps__line { flex: 1; height: 1px; background: var(--line-strong); }
.auth-form__head { margin-bottom: var(--s8); }
.auth-form__head p { margin-top: var(--s2); }

.form-field { margin-bottom: var(--s5); }
.form-field label { display: block; font-size: .82rem; font-weight: 700; margin-bottom: var(--s2); }
.form-field .hint { font-size: .76rem; color: var(--muted); margin-top: var(--s2); }
.input-wrap { position: relative; display: flex; align-items: center; }
/* Enfant direct uniquement : sinon cette règle vise aussi l'icône du bouton
   œil (.input-wrap__action svg, imbriqué plus profond) et lui impose le
   même position:absolute + left que l'icône de gauche, ce qui la fait
   sortir de la case. */
.input-wrap > svg { position: absolute; left: var(--s4); color: var(--muted); width: 1.05rem; height: 1.05rem; }
.input-wrap__action {
	position: absolute; right: var(--s3); top: 50%; transform: translateY(-50%);
	background: none; border: none; color: var(--muted); cursor: pointer;
	display: flex; padding: var(--s1);
}
/* Sans taille explicite, le SVG lucide garde ses attributs par défaut
   (24x24) et déborde de ce petit bouton — même gabarit que l'icône de
   gauche (.input-wrap svg) pour rester cohérent et dans les clous. */
.input-wrap__action svg { width: 1.05rem; height: 1.05rem; }

input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
input[type="date"], input[type="number"], select, textarea {
	width: 100%;
	min-height: 48px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--line);
	background: var(--surface);
	padding: 0 var(--s4);
	font-size: .92rem;
	font-family: var(--font-base);
	color: var(--ink);
	transition: border-color var(--transition);
}
textarea { min-height: 120px; padding-block: var(--s3); resize: vertical; }
/* Déclaré après la règle générique input[type=...] (même spécificité) :
   sinon son padding: 0 var(--s4) écrase padding-left ici et le texte
   démarre sous l'icône de .input-wrap. */
.input-wrap input, .input-wrap select { padding-left: var(--s10); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-soft); }
/* Préfixe indicatif (+33...) du picker pays maison — largeur variable selon
   le pays, d'où un padding-left élargi propre à ce champ (plutôt que
   var(--s10), calé sur une icône fixe de 1.05rem). Déclaré après la règle
   générique ci-dessus (même spécificité) pour pouvoir la surcharger. */
.input-wrap--prefixed .input-wrap__prefix { position: absolute; left: var(--s4); color: var(--muted); font-size: .92rem; font-family: var(--font-base); pointer-events: none; }
.input-wrap--prefixed input { padding-left: calc(var(--s4) + 2.75rem); }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.form-row--3 { grid-template-columns: repeat(3, 1fr); }
/* État d'erreur de validation Laravel (@error) — le template n'a pas ce cas,
   couleur "danger" alignée sur --coral déjà utilisé ailleurs sur le site. */
.form-field.has-error input, .form-field.has-error select,
.form-field.has-error--js input, .form-field.has-error--js select,
.form-field.has-error--js .combobox__trigger { border-color: var(--coral); }
.form-field__error { color: var(--coral); font-size: .78rem; margin-top: var(--s2); }
/* Confirmation "email vérifié" (étape 1 inscription) — même code couleur
   --teal que .auth-steps__dot.is-done, pour rester cohérent avec le reste
   de l'indicateur d'étapes. */
.form-field__success { display: flex; align-items: center; gap: var(--s2); color: var(--teal); font-size: .88rem; font-weight: 600; margin-bottom: var(--s5); }
.form-field__success svg { width: 1.1rem; height: 1.1rem; flex-shrink: 0; }
/* Petit texte d'aide générique, utilisable hors .form-field (ex: rappel de
   l'adresse email au-dessus du bloc code) — .form-field .hint ci-dessus ne
   couvre que l'usage à l'intérieur d'un champ. */
.hint { font-size: .76rem; color: var(--muted); }
/* Variante de .hint utilisée hors .form-field (bloc code de l'étape 1
   inscription) — display:block par défaut car ce sont des <span>/<p>, marge
   basse pour l'espacement vertical entre les lignes de ce bloc. */
.hint--block { display: block; margin-bottom: var(--s3); }
/* Bouton texte sans habillage bouton (contrairement à .btn--ghost, pensé
   pour accompagner un .btn de la même rangée) — "Renvoyer le code",
   "Modifier l'adresse email" en ligne dans un message de confirmation. */
.link-action { background: none; border: none; padding: 0; font: inherit; font-weight: 700; color: var(--teal); cursor: pointer; }
.link-action:hover { text-decoration: underline; }
.link-action:disabled { color: var(--muted); cursor: default; text-decoration: none; }
/* Rangée d'actions à deux boutons ("Retour" + bouton principal) — reprend
   l'habillage jusque-là posé en inline sur chaque étape du formulaire
   d'inscription, factorisé ici pour ne plus le répéter. */
.form-actions--split { display: flex; gap: var(--s3); }
/* Lien "Modifier l'adresse email" (étape 1 inscription) — placé juste sous
   les cases du code de vérification, pas à hauteur du bouton "Vérifier le
   code" (qui est dans .form-actions, séparé par sa propre marge). */
.form-actions__edit-email { text-align: left; margin-top: var(--s3); font-size: .85rem; }
[x-cloak] { display: none !important; }

/* Variante "solo" de .auth-shell (page inscription) : pas de panneau
   marketing latéral, formulaire seul centré sur toute la largeur. */
.auth-shell--solo { grid-template-columns: 1fr; }

/* Bloc de saisie du code de vérification à 6 chiffres (étape 1 inscription),
   piloté par la bibliothèque Verino (x-verino, voir register.blade.php +
   vendor/verino-alpine.min.js) — cases générées par la lib, restylées ici
   via ses variables --verino-* pour reproduire l'apparence des inputs
   standards du formulaire (mêmes tokens de couleur/rayon). */
.otp-field {
	--verino-gap: var(--s3);
	--verino-font-size: 1.4rem;
	--verino-font-weight: 700;
	--verino-radius: var(--radius-sm);
	--verino-border-width: 1px;
	--verino-border-color: var(--line);
	--verino-bg: var(--surface);
	--verino-bg-filled: var(--surface);
	--verino-color: var(--ink);
	--verino-active-color: var(--teal);
	--verino-active-ring: 0 0 0 3px var(--teal-soft);
	--verino-motion-duration: 150ms;
	margin-bottom: var(--s2);
	/* Verino pose display:inline-flex + flex-wrap:wrap et une taille fixe
	   (--verino-size, 56px) en style inline sur le conteneur et chaque case
	   (non surchargeables via variable). On force le conteneur en pleine
	   largeur sur une seule ligne. Chaque case vise 56px (comme avant) mais
	   peut rétrécir (flex-shrink) si les 6 cases + gaps dépassent la largeur
	   dispo (mobile étroit) — jamais grandir au-delà (desktop large). */
	display: flex !important;
	width: 100%;
	flex-wrap: nowrap !important;
}
.otp-field [data-slot] {
	width: auto !important;
	height: auto !important;
	min-width: 0 !important;
	flex: 0 1 56px !important;
	max-width: 56px;
	aspect-ratio: 1 / 1;
}
.otp-field--error { --verino-border-color: var(--coral); --verino-error-color: var(--coral); }

/* Sélecteur de pays avec recherche + drapeau (register). */
.combobox { position: relative; }
.combobox__trigger {
	width: 100%; min-height: 48px; display: flex; align-items: center; gap: var(--s3);
	border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface);
	padding: 0 var(--s4); font-size: .92rem; font-family: var(--font-base); color: var(--ink);
	cursor: pointer; text-align: left;
}
.combobox__trigger:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-soft); }
.combobox__trigger span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combobox__trigger .combobox__placeholder { color: var(--muted); }
.combobox__trigger svg { width: 1rem; height: 1rem; color: var(--muted); flex-shrink: 0; }
/* Les SVG drapeaux (public/assets/common/images/flags/countries/) sont des
   badges ronds inscrits dans un viewBox carré 512x512 — un conteneur
   rectangulaire les rognait en haut/bas via object-fit:cover. Conteneur
   carré + border-radius:50% = plus de rognage. */
.combobox__flag { width: 20px; height: 20px; object-fit: cover; border-radius: 50%; flex-shrink: 0; }
.combobox__panel {
	position: absolute; z-index: 20; top: calc(100% + var(--s2)); left: 0; right: 0;
	background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
	max-height: 280px; display: flex; flex-direction: column; overflow: hidden;
}
.combobox__search { display: flex; align-items: center; gap: var(--s2); padding: var(--s3); border-bottom: 1px solid var(--line); }
.combobox__search svg { width: 1rem; height: 1rem; color: var(--muted); flex-shrink: 0; }
.combobox__search input { border: none; min-height: auto; padding: 0; }
.combobox__search input:focus { box-shadow: none; }
.combobox__list { list-style: none; margin: 0; padding: var(--s2); overflow-y: auto; }
.combobox__list li { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s3); border-radius: var(--radius-sm); cursor: pointer; font-size: .88rem; }
/* .combobox__list li (classe + élément) est plus spécifique que la règle
   UA display:none du attribut [hidden] (un seul sélecteur d'attribut) — sans
   cette surcharge, le filtre JS (li.hidden = true) n'a aucun effet visuel. */
.combobox__list li[hidden] { display: none; }
.combobox__list li:hover { background: var(--paper); }
.combobox__list img { width: 20px; height: 20px; object-fit: cover; border-radius: 50%; flex-shrink: 0; }
.combobox__empty { color: var(--muted); justify-content: center; cursor: default; }
.combobox__empty:hover { background: none; }

@media (max-width: 780px) {
	/* Double classe pour battre .form-row{grid-template-columns:1fr} (même
	   media query, définie plus bas dans ce fichier) sans dépendre de l'ordre. */
	.form-row.form-row--2-mobile { grid-template-columns: 1fr 1fr; gap: var(--s3); }
}
/* align-items: flex-start (pas center) + texte regroupé dans un seul span :
   sinon la case et le texte sont des items flex distincts en nowrap, le
   texte ne peut jamais passer à la ligne (voir loan-request.html). */
.form-check { display: flex; align-items: flex-start; gap: var(--s2); font-size: .85rem; color: var(--ink-2); }
.form-check input { width: 18px; height: 18px; min-height: auto; flex-shrink: 0; margin-top: .15rem; }
.form-check span { flex: 1; }
/* Case "conditions" (register) : classe posée par @error('terms') côté Blade
   et par has-error--js côté JS (register.js), jamais stylée jusqu'ici faute
   de règle de validation sur ce champ. */
.form-check.has-error input, .form-check.has-error--js input { outline: 2px solid var(--coral); outline-offset: 2px; }
/* register.js (showStepErrors) insère le message d'erreur comme 3e enfant
   flex du <label class="form-check"> (checkbox + span étant les deux
   premiers) : sans flex-basis: 100%, il reste sur la même ligne que le texte
   au lieu de passer dessous. */
.form-check { flex-wrap: wrap; }
.form-check .form-field__error { flex-basis: 100%; margin: var(--s2) 0 0; margin-left: calc(18px + var(--s2)); }

/* Jauge de mot de passe (register) — même principe que .password-meter côté
   customer (neobank.css), tokens couleur guest. */
.password-meter { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; margin-top: var(--s2); }
.password-meter i { height: 5px; background: var(--line); border-radius: 3px; }
.password-meter i.is-on { background: var(--green); }
.password-meter span { grid-column: 1/-1; color: var(--muted); font-size: .78rem; }
.password-meter i:last-of-type.is-on ~ span { color: var(--green); }
.form-split { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s6); font-size: .85rem; }
.form-actions { margin-top: var(--s8); }
.form-foot { text-align: center; margin-top: var(--s6); font-size: .85rem; color: var(--muted); }
.form-foot a { font-weight: 700; color: var(--teal); }
/* Variante avec icône (ex: mention "connexion sécurisée" sous le formulaire
   mot de passe oublié) — icône et texte côte à côte, centrés. */
.form-foot--icon { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); width: 100%; }
.form-foot--icon svg { flex-shrink: 0; }

.form-page { max-width: 760px; margin-inline: auto; padding-block: var(--s16); }
.form-page .card { padding: var(--s10); }
.form-page__head { text-align: center; margin-bottom: var(--s8); }
.form-page__head p { margin-top: var(--s3); }

.radio-pills { display: flex; gap: var(--s3); }
.radio-pill { flex: 1; }
.radio-pill input { position: absolute; opacity: 0; pointer-events: none; }
.radio-pill span {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--s2);
	min-height: 48px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--line);
	font-size: .88rem;
	font-weight: 700;
	color: var(--ink-2);
	cursor: pointer;
}
.radio-pill input:checked + span { border-color: var(--teal); background: var(--teal-soft); color: var(--teal); }

.stepper { display: flex; gap: var(--s2); margin-bottom: var(--s8); }
.stepper span { flex: 1; height: 4px; border-radius: var(--radius-pill); background: var(--divider); }
.stepper span.is-done, .stepper span.is-active { background: var(--teal); }
.stepper-labels { display: flex; justify-content: space-between; margin-bottom: var(--s2); font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted-2); }
.stepper-labels span.is-active { color: var(--teal); }
.stepper-labels span.is-done { color: var(--ink-2); }

/* ============ Simulateur / résultat calcul ============ */

.simulator { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s10); align-items: start; }
.simulator.is-hidden { display: none; }
.simulator__form { padding: var(--s8); }
.form-section-title { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: var(--s4); }
.simulator__result {
	background: var(--ink);
	color: var(--paper);
	border-radius: var(--radius-lg);
	padding: var(--s8);
	position: sticky;
	top: calc(var(--header-offset, var(--topbar-height)) + var(--s6));
}
.simulator__result span { font-size: .8rem; color: var(--muted-2); }
.simulator__result strong { display: block; font-size: 2.4rem; font-weight: 800; margin-block: var(--s2) var(--s6); }
.simulator__row { display: flex; justify-content: space-between; padding-block: var(--s3); border-top: 1px solid rgba(255,255,255,.12); font-size: .85rem; }

/* Curseur personnalisé : piste remplie en teal jusqu'à la valeur courante
   (--range-progress posé en JS par loan-calculator.js), thumb rond. */
input[type="range"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 100%;
	height: 28px;
	margin: 0;
	padding: 0;
	background: transparent;
	outline: none;
	cursor: pointer;
}
input[type="range"]:focus,
input[type="range"]:focus-visible {
	outline: none;
	box-shadow: none;
}
/* Piste : stylisée sur le pseudo-élément dédié plutôt que sur l'input
   lui-même — sinon le style par défaut du navigateur (bordure/ombre
   interne) reste visible par-dessus le dégradé et rend le rendu grossier. */
input[type="range"]::-webkit-slider-runnable-track {
	height: 10px;
	border-radius: var(--radius-pill);
	background: linear-gradient(to right,
		var(--teal) 0%, var(--teal) var(--range-progress, 50%),
		var(--line) var(--range-progress, 50%), var(--line) 100%);
	border: none;
	box-shadow: none;
}
input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 28px; height: 28px;
	margin-top: -9px;
	border-radius: 50%;
	background: #fff;
	border: 4px solid var(--teal);
	box-shadow: var(--shadow-card);
	cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease;
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.08); }
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.15); }
input[type="range"]::-moz-range-track { height: 10px; border-radius: var(--radius-pill); background: var(--line); border: none; }
input[type="range"]::-moz-range-progress { height: 10px; border-radius: var(--radius-pill); background: var(--teal); }
input[type="range"]::-moz-range-thumb {
	width: 28px; height: 28px;
	border-radius: 50%;
	background: #fff;
	border: 4px solid var(--teal);
	box-shadow: var(--shadow-card);
	cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease;
}
input[type="range"]::-moz-range-thumb:hover { transform: scale(1.08); }
input[type="range"]:active::-moz-range-thumb { transform: scale(1.15); }
input[type="range"]::-moz-focus-outer { border: 0; }
input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--teal-soft); }
input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px var(--teal-soft); }

.range-hints { display: flex; justify-content: space-between; margin-top: var(--s2); font-size: .72rem; color: var(--muted-2); }

/* ============ Adresse / contact (sans iframe) ============ */

.address-card { display: grid; gap: var(--s5); }
.address-row { display: flex; gap: var(--s3); align-items: flex-start; }
.address-row svg { color: var(--teal); flex-shrink: 0; margin-top: .15rem; }
.address-row strong { display: block; font-size: .88rem; }
.address-row span { font-size: .85rem; color: var(--muted); }
.map-visual {
	border-radius: var(--radius-md);
	background:
		repeating-linear-gradient(0deg, rgba(16,23,19,.05) 0 1px, transparent 1px 32px),
		repeating-linear-gradient(90deg, rgba(16,23,19,.05) 0 1px, transparent 1px 32px),
		var(--teal-soft);
	min-height: 220px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}
.map-visual__pin {
	width: 48px; height: 48px; border-radius: 50% 50% 50% 0;
	background: var(--teal); transform: rotate(-45deg);
	display: flex; align-items: center; justify-content: center;
	border: 3px solid var(--surface);
}
.map-visual__pin svg { transform: rotate(45deg); color: #fff; }

.contact-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: var(--s10); align-items: start; }

/* ============ Pages légales ============ */

/* Barre de progression de lecture, fixée sous le header dynamique. */
.legal-progress { position: fixed; left: 0; top: var(--header-offset, var(--topbar-height)); width: 100%; height: 3px; background: transparent; z-index: 40; pointer-events: none; }
.legal-progress span { display: block; height: 100%; width: 0%; background: var(--teal); transition: width .1s linear; }

.legal-layout { display: grid; grid-template-columns: .3fr .7fr; gap: var(--s12); align-items: start; }
.legal-toc { position: sticky; top: calc(var(--header-offset, var(--topbar-height)) + var(--s6)); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--s5); }
.legal-toc__head { display: flex; align-items: center; gap: var(--s2); font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted-2); padding: 0 var(--s3) var(--s4); border-bottom: 1px solid var(--line); margin-bottom: var(--s3); }
.legal-toc__head i { width: 1rem; height: 1rem; color: var(--teal); }
.legal-toc__list { display: flex; flex-direction: column; gap: var(--s1); }
.legal-toc a { display: flex; align-items: flex-start; gap: var(--s3); padding: var(--s2) var(--s3); border-radius: var(--radius-sm); font-size: .84rem; color: var(--muted); border-left: 2px solid transparent; line-height: 1.3; }
.legal-toc__num { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--paper); color: var(--muted-2); font-size: .7rem; font-weight: 700; transition: background .15s ease, color .15s ease; }
.legal-toc a:hover, .legal-toc a.is-active { color: var(--teal); border-color: var(--teal); background: var(--teal-soft); }
.legal-toc a:hover .legal-toc__num, .legal-toc a.is-active .legal-toc__num { background: var(--teal); color: #fff; }
.legal-article { margin-bottom: var(--s10); scroll-margin-top: calc(var(--header-offset, var(--topbar-height)) + var(--s6)); }
.legal-article h2 { font-size: 1.3rem; margin-bottom: var(--s4); }
.legal-article h3 { font-size: 1rem; margin-block: var(--s5) var(--s2); }
.legal-article p { margin-bottom: var(--s3); }
.legal-article ul { display: flex; flex-direction: column; gap: var(--s2); margin-bottom: var(--s3); }
.legal-article li { color: var(--muted); font-size: .92rem; padding-left: var(--s5); position: relative; }
.legal-article li::before { content: ""; position: absolute; left: 0; top: .5em; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }

/* ============ Décomposition code BIC/SWIFT ============ */

/* Grille des 4 segments du code (banque / pays / localisation / agence). */
.code-breakdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); margin-block: var(--s6); }
.code-breakdown__segment { display: flex; flex-direction: column; align-items: center; gap: var(--s3); padding: var(--s5) var(--s3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); text-align: center; }
.code-breakdown__value { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size: 1.5rem; font-weight: 700; color: var(--teal); background: var(--teal-soft); border-radius: var(--radius-sm); padding: var(--s2) var(--s4); }
.code-breakdown__label { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted-2); }

/* Card de mise en avant du BIC de BK. avec bouton de copie. */
.bic-highlight { display: flex; align-items: center; justify-content: space-between; gap: var(--s5); flex-wrap: wrap; }
.bic-highlight__code { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size: 2rem; font-weight: 700; letter-spacing: .06em; color: var(--ink); }
.bic-highlight__copy { display: inline-flex; align-items: center; gap: var(--s2); white-space: nowrap; }
.bic-highlight__copy.is-copied { background: var(--teal); border-color: var(--teal); color: #fff; }

/* ============ Pages d'état système (erreurs, maintenance...) ============ */
/* Plein écran minimal : pas de nav ni footer complet, juste le logo, une
   carte centrée et un pied de page réduit. Utilisé par les pages
   error-4xx/5xx, maintenance, service-indisponible, connexion-perdue,
   delai-depasse et fonctionnalite-indisponible-pays. */
.state-page { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--paper); }
.state-page__mark { padding: var(--s8) var(--s6) 0; }
.state-page__body { flex: 1; display: flex; align-items: center; justify-content: center; padding: var(--s10) var(--s6); }
.state-page__card { max-width: 460px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.state-page__icon { display: flex; align-items: center; justify-content: center; width: 4.5rem; height: 4.5rem; border-radius: 50%; margin-bottom: var(--s6); }
.state-page__icon i { width: 2.1rem; height: 2.1rem; }
.state-page__icon--info { background: var(--teal-soft); color: var(--teal); }
.state-page__icon--warning { background: var(--warning-soft); color: var(--warning); }
.state-page__icon--danger { background: var(--coral-soft); color: var(--coral); }
.state-page__code { font-size: .82rem; font-weight: 700; letter-spacing: .06em; color: var(--muted-2); text-transform: uppercase; margin-bottom: var(--s2); }
.state-page__title { font-size: 1.6rem; margin-bottom: var(--s3); }
.state-page__message { color: var(--muted); line-height: 1.55; }
.state-page__actions { display: flex; gap: var(--s3); flex-wrap: wrap; justify-content: center; margin-top: var(--s8); }
.state-page__footer { padding: var(--s6); display: flex; align-items: center; justify-content: center; gap: var(--s6); flex-wrap: wrap; font-size: .82rem; color: var(--muted-2); }
.state-page__footer-links { display: flex; gap: var(--s5); }
.state-page__footer-links a:hover { color: var(--teal); }

@media (max-width: 480px) {
	.state-page__title { font-size: 1.35rem; }
	.state-page__actions { flex-direction: column; width: 100%; }
	.state-page__actions .btn { width: 100%; justify-content: center; }
}

@media (max-width: 720px) {
	.code-breakdown { grid-template-columns: repeat(2, 1fr); }
	.bic-highlight__code { font-size: 1.4rem; }
}

/* ============ Footer ============ */

/* Pas de transition oblique ici : la section précédente n'est pas toujours
   sombre selon la page, un ::before en biseau créait une bordure/bande
   parasite en haut du footer sur les pages qui terminent sur fond clair. */
.site-footer { background: #fff; color: var(--ink); padding-block: 0 var(--s8); border-top: 1px solid var(--line); }

.footer-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--s8);
	flex-wrap: wrap;
	padding-block: var(--s10);
	border-bottom: 1px solid var(--divider);
}
.footer-newsletter { display: flex; gap: var(--s2); flex-wrap: wrap; }
.footer-newsletter input { width: 240px; }

/* 8 catégories sur 2 lignes de 4 ; footer-brand en bandeau pleine largeur au-dessus. */
.footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s6) var(--s6); padding-block: var(--s10); }
.footer-brand { grid-column: 1 / -1; padding-bottom: var(--s6); margin-bottom: var(--s6); border-bottom: 1px solid var(--divider); }
.footer-brand p { color: var(--muted); margin-top: var(--s4); max-width: 420px; font-size: .86rem; }
.footer-social { display: flex; gap: var(--s2); margin-top: var(--s6); }
.footer-social a {
	width: 36px; height: 36px; border-radius: 50%;
	border: 1px solid var(--line);
	display: flex; align-items: center; justify-content: center;
	color: var(--ink-2);
}
.footer-social a:hover { border-color: var(--teal); color: var(--teal); }
.footer-col h4 { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: var(--s4); }
.footer-col ul { display: flex; flex-direction: column; gap: var(--s3); }
.footer-col a { font-size: .85rem; color: var(--ink-2); }
.footer-col a:hover { color: var(--teal); }

.footer-badges { display: flex; gap: var(--s4); flex-wrap: wrap; padding-block: var(--s8); border-top: 1px solid var(--divider); }
.footer-badges span { display: flex; align-items: center; gap: var(--s2); font-size: .78rem; font-weight: 700; color: var(--muted); }
.footer-badges svg { width: 1.1rem; height: 1.1rem; color: var(--teal); }

.footer-legal {
	padding-top: var(--s6);
	border-top: 1px solid var(--divider);
	font-size: .68rem;
	line-height: 1.6;
	color: var(--muted-2);
}
.footer-legal p + p { margin-top: var(--s3); }

.footer-bottom {
	padding-top: var(--s6);
	border-top: 1px solid var(--divider);
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--s3);
	font-size: .78rem;
	color: var(--muted);
}
.footer-bottom__links { display: flex; gap: var(--s5); flex-wrap: wrap; }
.footer-bottom__links a { color: var(--muted); }
.footer-bottom__links a:hover { color: var(--teal); }

/* ============ Breadcrumb ============ */

.breadcrumb { display: flex; align-items: center; gap: var(--s2); font-size: .82rem; color: var(--muted); margin-bottom: var(--s6); }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--teal); }
.breadcrumb svg { width: 1rem; height: 1rem; }

/* ============ Responsive ============ */

@media (max-width: 1240px) {
	.container, .site-header__row, .footer-bottom { max-width: 100%; }
}

@media (max-width: 1020px) {
	.hero__grid, .simulator, .contact-grid { grid-template-columns: 1fr; }
	/* Panneau d'onglet (texte + bloc visuel) : au lieu d'empiler, on garde
	   la disposition côte à côte et on scrolle horizontalement. */
	.tab-panel.is-active { display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; -ms-overflow-style: none; scrollbar-width: none; }
	.tab-panel.is-active::-webkit-scrollbar { display: none; }
	.tab-panel.is-active > * { flex: 0 0 100%; scroll-snap-align: start; min-width: 0; }
	/* Promo application mobile (texte + mockup téléphone) : même traitement
	   que le panneau d'onglet, scroll horizontal plutôt qu'empilement. */
	.app-promo__grid { display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; -ms-overflow-style: none; scrollbar-width: none; }
	.app-promo__grid::-webkit-scrollbar { display: none; }
	.app-promo__grid > * { flex: 0 0 100%; scroll-snap-align: start; min-width: 0; }
	.app-promo__grid + .scroll-bars { display: flex; }
	.simulator__result { position: static; }
	.footer-grid { grid-template-columns: repeat(3, 1fr); }
	.stat-grid { grid-template-columns: repeat(2, 1fr); }
	.steps { grid-template-columns: repeat(2, 1fr); }
	.showcase__grid, .showcase__grid--reverse, .legal-layout, .split-visual, .split-visual--reverse { grid-template-columns: 1fr; gap: var(--s8); }
	.split-visual--reverse .split-visual__visual { order: 0; }
	.legal-toc { position: static; }
	.legal-toc__list { flex-direction: row; flex-wrap: wrap; }
	.legal-toc a { flex: none; }
	.showcase__grid--reverse .showcase__visual { order: 0; }
	.showcase, .app-promo { padding: var(--s10) var(--s6); }
	.mega-menu__inner { grid-template-columns: repeat(2, 1fr); }
	.mega-menu__promo { grid-column: span 2; }
	.mega-menu__inner--products { grid-template-columns: 1fr; }
	.mega-menu__tabs { grid-row: 1; border-right: none; border-bottom: 1px solid var(--line); padding-right: 0; padding-bottom: var(--s4); flex-direction: row; flex-wrap: wrap; }
	.mega-menu__tabpanels { grid-column: 1; grid-row: 2; }
	.mega-menu__tabpanel { grid-template-columns: repeat(2, 1fr); }
	.mega-menu__tabpanel .mega-menu__promo { grid-column: span 2; }
	.mega-menu__col-shared-group { grid-column: 1; grid-row: 3; grid-template-columns: repeat(2, 1fr); }
	.locale-menu__inner { grid-template-columns: repeat(3, 1fr); }
	.testimonial-spotlight { grid-column: span 1; flex-direction: column; align-items: flex-start; }
	/* Bascule vers le menu hamburger avant que nav + actions ne se
	   chevauchent et ne provoquent un débordement horizontal. */
	.primary-nav { display: none; }
	.nav-toggle { display: flex; }
}

@media (max-width: 780px) {
	.media-band__inset { margin: var(--s6); max-width: none; }
	.topbar { display: none; }
	/* Connexion déjà dupliqué dans .mobile-nav__actions — le retirer du
	   header évite le débordement horizontal sur téléphone. Le sélecteur de
	   langue reste, mais seulement sa version dans le tiroir mobile
	   (.mobile-nav__locale) — celle du header est masquée ici. */
	.header-actions .locale-switch { display: none; }
	.header-actions .btn--ghost { display: none; }
	.locale-menu__inner { grid-template-columns: repeat(2, 1fr); }
	.locale-menu__back { display: flex; }
	/* Force le panneau à couvrir tout l'écran jusqu'en bas : sinon le
	   scrim semi-transparent (22% opacité) reste seul visible et
	   cliquable sous une liste de langues courte, laissant le hero
	   transparaître et se refermant au clic dans cette zone. */
	.locale-menu { bottom: 0; min-height: calc(100vh - var(--header-offset, var(--topbar-height))); }
	.auth-shell { grid-template-columns: 1fr; }
	.auth-shell__panel { display: none; }
	.auth-shell__form { padding: var(--s8) var(--s5); }
	/* Icône + texte ne tiennent plus côte à côte sur téléphone (mention
	   "connexion sécurisée" du formulaire mot de passe oublié) — empilés. */
	.form-foot--icon { flex-direction: column; gap: var(--s1); }
	.grid-2, .grid-3, .grid-4, .steps { grid-template-columns: 1fr; }
	.grid--stats-divided > .stat:not(:first-child)::before { left: 0; right: 0; top: calc(var(--s6) / -2); bottom: auto; width: auto; height: 1px; }
	/* Comptes en aperçu : scroll horizontal plutôt qu'empilement vertical. */
	.grid-3.accounts-grid { display: flex; flex-wrap: nowrap; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; -ms-overflow-style: none; scrollbar-width: none; }
	.grid-3.accounts-grid::-webkit-scrollbar { display: none; }
	.grid-3.accounts-grid > * { flex: 0 0 85%; scroll-snap-align: start; }
	.grid-3.accounts-grid + .scroll-bars { display: flex; }
	/* Étapes d'ouverture de compte : scroll horizontal plutôt qu'empilement. */
	.steps.onboarding-steps { display: flex; flex-wrap: nowrap; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; -ms-overflow-style: none; scrollbar-width: none; }
	.steps.onboarding-steps::-webkit-scrollbar { display: none; }
	.steps.onboarding-steps > * { flex: 0 0 85%; scroll-snap-align: start; }
	.steps.onboarding-steps + .scroll-bars { display: flex; }
	.onboarding-steps .step {
		text-align: left;
		background: var(--surface);
		border: 1px solid var(--line);
		border-radius: var(--radius-md);
		padding: var(--s6);
		padding-bottom: var(--s8);
	}
	.onboarding-steps .step__num { margin-inline: 0; }
	.form-row { grid-template-columns: 1fr; }
	.footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s8); }
	.footer-bottom { flex-direction: column; gap: var(--s3); align-items: flex-start; }
	.footer-top { flex-direction: column; align-items: flex-start; }
	.footer-newsletter { width: 100%; }
	.footer-newsletter input { width: 100%; }
	.footer-newsletter button { width: 100%; justify-content: center; }
	/* Bande partenaires : défilement continu géré à toute largeur (voir bloc
	   .strip__row plus haut) — plus rien à faire ici sur mobile. */
	.hero__trust { flex-wrap: nowrap; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; }
	.hero__trust::-webkit-scrollbar { display: none; }
	.hero__trust span { flex: 0 0 auto; }
	.hero__trust + .scroll-bars { display: flex; }
	/* Carte + solde cachés sur téléphone — plus rien à empiler dans le
	   visuel, on masque tout le bloc. */
	.hero__visual { display: none; }
	/* Grille d'accès rapide (onglets Comptes/Cartes/Crédits/Assurances) :
	   scroll horizontal plutôt que wrap sur plusieurs lignes. */
	.tabs-nav { flex-wrap: nowrap; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; }
	.tabs-nav::-webkit-scrollbar { display: none; }
	.tab-btn { flex: 0 0 auto; }
	.tabs-nav + .scroll-bars { display: flex; }
}

/* Hero de l'accueil (.hero__grid/.hero__visual) : rendu identique au
   desktop sur tablette/iPad (768-1020px) — seul le hero est concerné ici,
   le reste (nav, simulator, contact-grid, etc.) garde son comportement
   actuel tant qu'il n'a pas été revu séparément. */
@media (min-width: 768px) and (max-width: 1020px) {
	.hero__grid { grid-template-columns: 1.05fr .95fr; gap: var(--s16); align-items: center; }
	/* Hero variante B (.hero--split) : la même règle générique .split-visual
	   passe à 1 colonne dès 1020px pour les autres sections de la page —
	   ici on la restaure en 2 colonnes pour rester identique au desktop. */
	.hero--split .split-visual { grid-template-columns: 1.1fr .9fr; gap: var(--s12); }
}

/* Sections "Une banque organisée autour de votre quotidien." et "Toute
   votre banque, dans votre poche." : pas de slide/scroll horizontal sur
   tablette/iPad, même rendu que desktop (grille côte à côte). */
@media (min-width: 768px) and (max-width: 1020px) {
	.tab-panel.is-active { display: grid; grid-template-columns: .9fr 1.1fr; gap: var(--s10); align-items: center; overflow-x: visible; scroll-snap-type: none; }
	.tab-panel.is-active > * { flex: initial; min-width: initial; scroll-snap-align: none; }
	.app-promo__grid { display: grid; grid-template-columns: 1fr .75fr; gap: var(--s12); align-items: center; overflow-x: visible; scroll-snap-type: none; }
	.app-promo__grid > * { flex: initial; min-width: initial; scroll-snap-align: none; }
	.app-promo__visual { order: 2; }
	.app-promo__grid + .scroll-bars { display: none; }
}
@media (min-width: 768px) and (max-width: 780px) {
	.hero__visual { display: block; }
	.tabs-nav { flex-wrap: wrap; overflow-x: visible; }
	.tabs-nav + .scroll-bars { display: none; }
	.tab-btn { flex: initial; }
}

@media (max-width: 480px) {
	.section { padding-block: var(--s10); }
	.hero { padding-block: var(--s16) var(--s10); }
	.stat-grid { grid-template-columns: 1fr 1fr; }
	.header-actions .btn span.btn-label--full { display: none; }
	.mega-orbit__sat { width: 40px; height: 40px; }
	/* Deux CTA hero ne tiennent pas sur une ligne en dessous de 480px :
	   on garde le principal (signal) et on cache le secondaire (outline). */
	.hero__actions { flex-wrap: nowrap; }
	.hero__actions .btn--outline { display: none; }
}

/* ============ Utilitaires d'espacement (pages guides Lots 1-8) ============
   Mappés sur l'échelle --s* existante — jamais de valeur arbitraire. */

.u-mt-1 { margin-top: var(--s1); }
.u-mt-2 { margin-top: var(--s2); }
.u-mt-3 { margin-top: var(--s3); }
.u-mt-4 { margin-top: var(--s4); }
.u-mt-5 { margin-top: var(--s5); }
.u-mt-6 { margin-top: var(--s6); }
.u-mt-8 { margin-top: var(--s8); }
.u-mt-10 { margin-top: var(--s10); }
.u-mt-16 { margin-top: var(--s16); }
.u-mb-2 { margin-bottom: var(--s2); }
.u-text-center { text-align: center; }
.u-max-320 { max-width: 320px; }
.u-max-480 { max-width: 480px; }
.u-max-560 { max-width: 560px; }
.u-max-640 { max-width: 640px; }
.u-max-700 { max-width: 700px; }
.u-max-760 { max-width: 760px; }

/* Section "CTA final" (randomizer accueil) — remplace les styles inline
   d'origine, valeurs identiques. */
.cta-final__desc { color: var(--muted-2); margin-top: var(--s4); }
.cta-final__actions { display: flex; justify-content: center; gap: var(--s3); margin-top: var(--s8); flex-wrap: wrap; }

/* Bloc "icône + titre/texte + bouton à droite", répété tel quel sur
   plusieurs pages guides (contact, accessibilité, plafonds carte...). */
.info-cta { display: flex; align-items: center; gap: var(--s4); }
.info-cta i[data-lucide] { width: 2rem; height: 2rem; color: var(--teal); flex-shrink: 0; }
.info-cta .btn { margin-left: auto; flex-shrink: 0; }