/* ============================================================================
   Extensions guest — composants absents du template d'origine (guest.css).
   Jamais de modification de guest.css : ce fichier est chargé en plus, après.
   Tokens réutilisés tels quels (--ink, --teal, --signal, --warning, --coral,
   --radius-md, --s*) — aucune nouvelle valeur arbitraire.
   ============================================================================ */

/* Utilitaire fond blanc générique — sibling de .section--soft/.section--dark
   (guest.css), mais guest.css ne se modifie jamais (voir en-tête). Nécessaire
   pour blocks.diagonal-statement.outerClass="section--white" : certains
   fichiers blocks/*.css redéfinissent .section--white en le scopant à leur
   propre composant (ex: .section--white.icon-trio-centered), ce qui ne
   s'applique pas à la section générique de diagonal-statement — cette règle
   non scopée sert de fallback dans tous les cas. */
.section--white {
	background: #fff;
}

/* Breadcrumb lisible sur fond sombre (.hero--media) — guest.css ne définit
   pas cette variante (les pages existantes utilisaient des style="" inline
   au cas par cas, ce que la règle "no inline CSS" interdit désormais). */
.hero--media .breadcrumb a { color: rgba(255,255,255,.7); }
.hero--media .breadcrumb span { color: rgba(255,255,255,.9); }
.hero--media .breadcrumb i[data-lucide] { color: rgba(255,255,255,.5); }

/* Hero /testimonials : même photo que le lien vers cette page depuis
   institution/key-figures.blade.php (cohérence visuelle), au lieu du
   placeholder picsum générique de .hero__bg-motion. */
.testimonials-hero .hero__bg-motion {
	background-image: url('/assets/guest/images/testimonials/hero.jpg');
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

/* Carte fond blanc pur (au lieu de var(--surface), légèrement crème) —
   besoin ponctuel : page simulateur de prêt sur fond blanc intégral. */
.card--white {
	background: #fff;
}

/* Page simulateur de prêt guest : fond blanc plein écran (au lieu du
   fond crème --paper du body), avec un petit espace autour du contenu.
   Motif SVG tuilé très discret (billet, pièce, € et $) pour éviter un
   aplat blanc totalement nu — cf règle "flat bg needs SVG motif". */
.loan-simulator-main {
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='%23101713' stroke-opacity='.02' stroke-width='2'%3E%3Crect x='14' y='18' width='56' height='34' rx='5'/%3E%3Ccircle cx='60' cy='35' r='9'/%3E%3Ccircle cx='170' cy='150' r='17'/%3E%3C/g%3E%3Ctext x='110' y='70' font-family='Arial,sans-serif' font-size='42' fill='%23101713' fill-opacity='.018'%3E%E2%82%AC%3C/text%3E%3Ctext x='24' y='180' font-family='Arial,sans-serif' font-size='38' fill='%23101713' fill-opacity='.018'%3E%24%3C/text%3E%3C/svg%3E");
	background-size: 220px 220px;
	padding: var(--s6);
	position: relative;
}
.loan-simulator-main > .form-page {
	position: relative;
	z-index: 1;
}

/* Panneau résultat du simulateur en fond blanc au lieu du fond sombre
   par défaut de .simulator__result (guest.css) — page simulateur guest
   entièrement blanche. */
.simulator__result--white {
	background: #fff;
	color: var(--ink);
	border: 1px solid var(--line);
}
.simulator__result--white span { color: var(--muted); }
.simulator__result--white .simulator__row { border-top-color: var(--line); }
.simulator__result--white .loan-simulator__disclaimer { color: var(--muted-2); }

/* Mention légale obligatoire (conformité Google Ads crédit), visible sans
   scroll au-dessus du consent-gate. Reprend tel quel le patron .alert
   .alert--warning .alert--badge déjà établi pour les encarts de disclosure
   guest (badge icône rond, sans bordure, fond porté par le conteneur —
   voir mémoire guest_alert_badge_pattern). */
.loan-compliance-section {
	background: var(--surface);
	border-radius: var(--radius-lg);
	padding: var(--s6);
	margin-bottom: var(--s6);
}
.loan-compliance-notice__footnote { color: var(--muted); font-size: .8rem; margin-top: var(--s2) !important; }

/* Récap de la demande sur le formulaire de contact (venant du simulateur
   de prêt guest, ?type=...&ref=...) : remplace le select sujet + l'input
   objet par un bloc lecture seule, les deux champs partant en hidden. */
.loan-recap {
	background: var(--surface);
	border: 1px solid var(--line);
	margin-bottom: var(--s6);
}
.loan-recap .eyebrow { color: var(--teal); }
.loan-recap__topic { font-weight: 700; margin-top: var(--s3); }
.loan-recap__subject { color: var(--muted); margin-top: var(--s1); font-size: .9rem; }

/* Simulateur de prêt guest (loan-request.blade.php) — le simulateur du
   template est pensé en pleine page (grille 2 colonnes) ; ici il est
   imbriqué dans la carte étroite existante de la colonne de droite, donc
   affichage en une seule colonne, pas la grille .simulator d'origine. */
.loan-simulator { display: block; }
.loan-simulator .simulator__form { padding: 0; }
.loan-simulator .simulator__result { margin-top: var(--s6); }
.loan-consent-gate-title { margin-top: var(--s3); }
.loan-consent-list { margin-top: var(--s6); display: flex; flex-direction: column; gap: var(--s4); }
.loan-consent-link { font-weight: 700; color: var(--teal); }
.simulator__row--plain { border-top: none; }
.loan-simulator__disclaimer { color: var(--muted-2); font-size: .76rem; }

/* loan-request.blade.php — hero/formulaire, aucun style inline */
.loan-request-hero { padding-block: var(--s8); }
.loan-request-hero h1 { max-width: 700px; }
.loan-request-hero .lead { margin-top: var(--s5); max-width: 600px; }
.loan-request-aside { display: flex; flex-direction: column; gap: var(--s6); }
.loan-request-disclaimers p { font-size: .8rem; }
.loan-request-disclaimers p + p { margin-top: var(--s2); }
.loan-request-submit-note { font-size: .78rem; text-align: center; margin-top: var(--s3); }
.card-eyebrow-text { font-size: 12px; margin-top: var(--s1); }
.card--centered { text-align: center; }
.icon-teal-lg { width: 2rem; height: 2rem; color: var(--teal); }

/* Lien de colonne footer actif — guest.css ne définit pas .footer-col a.is-active
   (le pattern .is-active n'existait que pour la nav principale). */
.footer-col a.is-active {
	color: var(--teal);
	font-weight: 600;
}

/* Alerte / encadré informatif — absent du template, nécessaire pour risques,
   avertissements, "ce que nous ne demanderons jamais", notes importantes. */
.alert {
	display: flex;
	align-items: flex-start;
	gap: var(--s3);
	padding: var(--s4) var(--s5);
	border-radius: var(--radius-md);
	border-left: 4px solid var(--teal);
	background: var(--teal-soft);
	margin-bottom: var(--s6);
}

.alert i[data-lucide] {
	width: 1.25rem;
	height: 1.25rem;
	flex-shrink: 0;
	margin-top: .15rem;
	color: var(--teal);
}

.alert p {
	margin: 0;
}

.alert strong {
	display: block;
	margin-bottom: var(--s1);
}

.alert--warning {
	border-left-color: var(--warning);
	background: var(--warning-soft);
}

.alert--warning i[data-lucide] {
	color: var(--warning);
}

.alert--danger {
	border-left-color: var(--coral);
	background: var(--coral-soft);
}

.alert--danger i[data-lucide] {
	color: var(--coral);
}

/* Variante carte : alerte plus posée, utilisée seule dans une section (pas
   collée entre deux autres blocs) — fond blanc, ombre, padding généreux. */
.alert--card {
	padding: var(--s6) var(--s7);
	border-radius: var(--radius-lg);
	background: #fff;
	box-shadow: var(--shadow-card);
	border-left-width: 5px;
}
.alert--card i[data-lucide] { width: 1.5rem; height: 1.5rem; margin-top: 0; }
.alert--card strong { font-size: 1.05rem; }

/* Variante badge : icône en pastille ronde, carte élevée fond blanc — reprend
   le langage visuel des cartes du site (radius-lg + shadow-card), plutôt
   qu'un encadré administratif à bordure fine. */
.alert--badge {
	align-items: center;
	gap: var(--s5);
	padding: var(--s7) var(--s8);
	border: none;
	border-radius: var(--radius-lg);
	background: transparent;
	box-shadow: none;
}
.alert--badge .alert__icon-badge {
	flex-shrink: 0;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--teal-soft);
}
.alert--badge.alert--warning .alert__icon-badge { background: var(--warning-soft); }
.alert--badge .alert__icon-badge i[data-lucide] { width: 1.4rem; height: 1.4rem; margin-top: 0; color: var(--teal); }
.alert--badge.alert--warning .alert__icon-badge i[data-lucide] { color: var(--warning); }
.alert--badge strong { font-size: 1.1rem; }
.alert--badge p { margin-top: var(--s1); color: var(--muted); }

/* Comparatif en cartes tête-à-tête — remplace un <table>, jamais utilisé dans
   le template d'origine (parti pris assumé : "FAQ en accordéon, jamais de table"). */
.compare-cards__title { font-size: 1.2rem; }
.compare-cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--s5);
}

.compare-cards .card h3 {
	display: flex;
	align-items: center;
	gap: var(--s2);
	margin-bottom: var(--s3);
}

.compare-cards .card ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--s2);
}

.compare-cards .card li {
	display: flex;
	align-items: flex-start;
	gap: var(--s2);
}

.compare-cards .card li i[data-lucide] {
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
	margin-top: .2rem;
	color: var(--teal);
}

@media (max-width: 720px) {
	.compare-cards {
		grid-template-columns: 1fr;
	}
}

/* Timeline — horizontale à partir de tablette (ligne + puces au-dessus de
   chaque étape), verticale uniquement en mobile < 640px (ligne + puces à
   gauche) : pour un fonctionnement étape par étape avec états, quand .steps
   (horizontal, 4 max, sans ligne de connexion) ne suffit pas à la séquence. */
.timeline {
	position: relative;
	display: flex;
	flex-direction: row;
	gap: var(--s8);
	padding-top: var(--s6);
}

.timeline::before {
	content: "";
	position: absolute;
	left: .3rem;
	right: .3rem;
	top: .3rem;
	height: 2px;
	background: var(--teal-soft);
}

.timeline__item {
	position: relative;
	flex: 1;
}

.timeline__item::before {
	content: "";
	position: absolute;
	left: .05rem;
	top: calc(var(--s6) * -1 + .05rem);
	width: .6rem;
	height: .6rem;
	border-radius: 50%;
	background: var(--teal);
}

.timeline__item h3 {
	margin: 0 0 var(--s1);
}

.timeline__item p {
	margin: 0;
	color: var(--muted);
}

@media (max-width: 640px) {
	.timeline {
		flex-direction: column;
		gap: var(--s6);
		padding-top: 0;
		padding-left: var(--s6);
	}

	.timeline::before {
		left: .3rem;
		right: auto;
		top: .3rem;
		bottom: .3rem;
		width: 2px;
		height: auto;
	}

	.timeline__item::before {
		left: calc(var(--s6) * -1 + .05rem);
		top: .2rem;
	}
}

/* Correctif .tab-visual__card (accueil, section "produits" à onglets) : le
   panneau clair occupe TOUT l'espace de .tab-visual, bord à bord — rendu
   "capture d'écran de l'application" plein cadre sur le fond sombre. Le
   padding qui aérait .tab-visual passe donc sur la carte elle-même ; son
   rayon est neutralisé car .tab-visual (overflow:hidden) impose déjà son
   propre arrondi au bord de la carte. Le contenu interne reste contraint à
   la largeur d'un écran (320px) et réparti verticalement, pour ne pas
   étirer les items. guest.css d'origine non modifié, override ici, sans
   fond décoratif ajouté (le panneau reste --surface uni). */
.tab-visual {
	padding: 0;
}

.tab-visual__card {
	position: relative;
	max-width: none;
	width: 100%;
	height: 100%;
	border-radius: 0;
	border: 1px solid var(--line);
	padding: var(--s8);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--s5);
	overflow: hidden;
}

.tab-visual__card > *:not(.tab-visual__motif) {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 320px;
	flex-shrink: 0;
	margin-top: 0 !important;
}

.tab-visual__card .mini-stat-row {
	padding-top: var(--s4);
	border-top: 1px solid var(--divider);
}

/* Motif de fond discret (papier comptable) — renforce le côté "capture
   d'écran d'interface bancaire" sans jamais gêner la lecture du contenu. */
.tab-visual__motif {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image: url('../images/guest/motifs/dotted-ledger.svg');
	background-repeat: repeat;
	background-size: 40px 40px;
	opacity: 1;
}

/* Variante .tab-visual__card utilisée par l'onglet "Cartes" : la carte
   bancaire (.bank-card-stack) est affichée au centre, avec des items
   (.mini-stat-row) en dessous — jamais dans guest.css d'origine, qui
   n'avait pas de .tab-visual__card pour cet onglet. */
.tab-visual__card .bank-card-stack {
	margin-block: 0;
}

/* Grille de devises réelles (page /international/guide/available-currencies)
   — données dynamiques (table currencies + countries), pas de composant du
   pool dédié à une liste de cette forme précise. Réutilise .card.card--elevated
   déjà défini, ajoute juste la mise en page interne (drapeau + nom + pays). */
.currency-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--s5);
	margin-top: var(--s10);
}
.currency-card__head {
	display: flex;
	align-items: center;
	gap: var(--s3);
}
.currency-card__flag {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	border: 1px solid var(--line);
}
.currency-card__head h3 { font-size: 1.05rem; }
.currency-card__code { font-size: .82rem; color: var(--muted); }
.currency-card__countries {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s2);
	margin-top: var(--s4);
}
.currency-card__chip {
	font-size: .78rem;
	padding: var(--s1) var(--s3);
	border-radius: 999px;
	background: var(--teal-soft);
	color: var(--teal);
}

/* Page "Statut des services" — panneau type page de statut (UptimeRobot),
   un cadre englobant, une rangée par service : nom à gauche, bandeau de
   barres pleine largeur au centre, statut à droite. Pas de pourcentage ni
   d'historique par jour inventé (aucun monitoring réel en place) — la
   barre reste uniformément verte tant qu'aucun incident réel n'existe. */
.status-panel {
	/* Vert vif demandé explicitement (référence : capture UptimeRobot),
	   distinct de --teal utilisé partout ailleurs sur le site. */
	--status-green: #22c55e;
	max-width: 920px;
	margin: var(--s2) auto 0;
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	background: var(--surface);
	overflow: hidden;
}
.status-panel__row {
	display: flex;
	align-items: center;
	gap: var(--s6);
	padding: var(--s5) var(--s6);
}
.status-panel__row + .status-panel__row { border-top: 1px solid var(--line); }
.status-panel__label {
	display: flex;
	align-items: center;
	gap: var(--s3);
	width: 180px;
	flex-shrink: 0;
	font-weight: 600;
	font-size: .88rem;
}
.status-panel__label svg { width: 18px; height: 18px; color: var(--muted); flex-shrink: 0; }
.status-panel__bar {
	flex: 1;
	height: 22px;
	border-radius: 3px;
	background-image: repeating-linear-gradient(90deg, var(--status-green) 0 3px, transparent 3px 5px);
}
.status-panel__bar--down { background-image: repeating-linear-gradient(90deg, var(--coral) 0 3px, transparent 3px 5px); }
.status-panel__state {
	display: flex;
	align-items: center;
	gap: var(--s2);
	font-size: .85rem;
	font-weight: 600;
	flex-shrink: 0;
}
.status-panel__state--ok { color: var(--status-green); }
.status-panel__state--down { color: var(--coral); }
.status-panel__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.status-panel__dot--ok { background: var(--status-green); }
.status-panel__dot--down { background: var(--coral); }

@media (max-width: 780px) {
	.status-panel__row { flex-wrap: wrap; gap: var(--s3); padding: var(--s4); }
	.status-panel__label { width: auto; }
	.status-panel__bar { flex-basis: 100%; order: 3; height: 16px; }
}

/* CTA final accueil — marge au-dessus du titre. */
.cta-final__title { margin-top: var(--s6); }

/* Section carte du monde (/about) — pas de padding bas, la section-split
   qui suit apporte déjà son propre espacement en haut. */
.world-map-section { padding-bottom: 0; }

/* Petite carte "canal de contact" (icône + libellé centrés). */
.channel-card { text-align: center; }
.channel-card svg { width: 2rem; height: 2rem; color: var(--teal); }
.channel-card h3 { margin-top: var(--s4); }

/* Spinner de chargement sur bouton — même convention que côté customer
   (neobank.css .is-loading/.btn-spinner), portée ici pour le formulaire
   d'inscription (étapes 1/2, register.js). Le contenu du bouton reste dans
   le DOM (accessible, pas de layout shift) mais devient invisible pendant
   le chargement, seul le spinner reste affiché. */
.is-loading { position: relative; pointer-events: none; opacity: .75; }
.is-loading > *:not(.btn-spinner) { visibility: hidden; }
.btn-spinner { display: none; }
.is-loading .btn-spinner { display: inline-flex; position: absolute; inset: 0; align-items: center; justify-content: center; }
.btn-spinner svg { width: 18px; height: 18px; animation: btn-spin .8s linear infinite; }
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* Variante page (pas dans un bouton .is-loading, donc pas concernée par la
   règle .btn-spinner{display:none} ci-dessus) — repère d'attente pendant
   l'amorçage Alpine de la page inscription, retiré du DOM par la vue dès
   qu'Alpine tourne (voir register.blade.php). */
/* Motif icônes banque (bâtiment, mobile, bouclier, carte, cadenas) en une
   seule image plein cadre (cover, pas de tuilage) — opacité relevée à .12
   pour rester lisible, contrairement au premier essai en motif réseau
   tuilé 80px trop discret pour être perçu. */
.auth-form-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: stretch;
	min-height: 220px;
	padding: var(--s16) 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='300' viewBox='0 0 600 300'%3E%3Cg fill='none' stroke='%23101713' stroke-opacity='.12' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate%2840,30%29'%3E%3Cpath d='M4 14 L20 4 L36 14'/%3E%3Cline x1='4' y1='14' x2='36' y2='14'/%3E%3Cline x1='8' y1='14' x2='8' y2='30'/%3E%3Cline x1='16' y1='14' x2='16' y2='30'/%3E%3Cline x1='24' y1='14' x2='24' y2='30'/%3E%3Cline x1='32' y1='14' x2='32' y2='30'/%3E%3Cline x1='4' y1='34' x2='36' y2='34'/%3E%3C/g%3E%3Cg transform='translate%28150,210%29 rotate%28-8%29'%3E%3Crect x='12' y='2' width='16' height='36' rx='3'/%3E%3Cline x1='18' y1='32' x2='22' y2='32'/%3E%3C/g%3E%3Cg transform='translate%28260,40%29 rotate%286%29'%3E%3Cpath d='M20 3 L34 9 V19 C34 29 28 35 20 38 C12 35 6 29 6 19 V9 Z'/%3E%3Cpath d='M14 20 L18 24 L27 14'/%3E%3C/g%3E%3Cg transform='translate%28370,220%29 rotate%28-4%29'%3E%3Crect x='1' y='1' width='38' height='26' rx='4'/%3E%3Cline x1='1' y1='10' x2='39' y2='10'/%3E%3Cline x1='6' y1='19' x2='16' y2='19'/%3E%3C/g%3E%3Cg transform='translate%28470,60%29 rotate%2810%29'%3E%3Crect x='4' y='16' width='22' height='18' rx='3'/%3E%3Cpath d='M9 16 V10 a6 6 0 0 1 12 0 V16'/%3E%3C/g%3E%3Cg transform='translate%28500,190%29 scale%28.8%29'%3E%3Cpath d='M4 14 L20 4 L36 14'/%3E%3Cline x1='4' y1='14' x2='36' y2='14'/%3E%3Cline x1='8' y1='14' x2='8' y2='30'/%3E%3Cline x1='16' y1='14' x2='16' y2='30'/%3E%3Cline x1='24' y1='14' x2='24' y2='30'/%3E%3Cline x1='32' y1='14' x2='32' y2='30'/%3E%3Cline x1='4' y1='34' x2='36' y2='34'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.btn-spinner--page { display: inline-flex; position: static; }
.btn-spinner--page svg { width: 32px; height: 32px; color: var(--teal); }
/* Le logo du site (.auth-brand, register.blade.php) reste statique dans le
   DOM pendant l'amorçage Alpine — pas de logo affiché tant que ce repère
   d'attente est présent, il réapparaît seul dès que .auth-form-loading est
   retiré (x-init du spinner). */
.auth-shell__form:has(.auth-form-loading) .auth-brand { display: none; }

/* Bannière incitation installation PWA — page login. */
.pwa-banner[hidden] { display: none; }
.pwa-banner { margin-bottom: 22px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); display: flex; align-items: center; gap: 14px; }
.pwa-banner__icon { width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; background: var(--teal-soft); color: var(--teal); display: grid; place-items: center; }
.pwa-banner__icon svg { width: 20px; height: 20px; }
.pwa-banner__body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.pwa-banner__body strong { font-size: .88rem; }
.pwa-banner__body p { margin: 0; color: var(--muted); font-size: .78rem; }
.pwa-banner__close { flex-shrink: 0; background: none; border: 0; color: var(--muted); cursor: pointer; display: grid; place-items: center; padding: 4px; }
.pwa-banner__close svg { width: 18px; height: 18px; }

@media (max-width: 620px) {
	.pwa-banner { flex-wrap: wrap; }
	.pwa-banner__body { flex-basis: 100%; order: 3; }
}