/* ==========================================================================
   SeneChange — identité visuelle
   Toutes les couleurs sont définies ici (variables), d'après le logo et la
   maquette de référence (docs/brand/). Contrastes vérifiés (WCAG AA) :
   blanc / bleu nuit 16,5:1 ; blanc / vert 5,0:1 ; vert / blanc 5,0:1.
   ========================================================================== */
:root {
  /* Marque */
  --sc-navy-900: #031932;   /* fond le plus sombre (pied de page, héros) */
  --sc-navy-800: #0b1f3a;   /* bleu nuit principal */
  --sc-navy-700: #13315c;   /* bleu nuit des boutons et liens */
  --sc-green-600: #15803d;  /* vert « Sene » et actions positives */
  --sc-green-700: #116632;
  --sc-green-300: #4ade80;  /* vert clair sur fond sombre */
  --sc-surface: #f5f7fa;    /* gris très clair des sections */
  --sc-text-muted: #5b6b80;
  --sc-on-dark-muted: #c8d3e3;
  /* Accents du logo, à n'utiliser qu'en touches (drapeaux, illustration). */
  --sc-accent-red: #d52b1e;
  --sc-accent-blue: #0039a6;
  --sc-accent-yellow: #fdef42;

  /* Bootstrap */
  --bs-primary: var(--sc-navy-700);
  --bs-primary-rgb: 19, 49, 92;
  --bs-link-color: var(--sc-navy-700);
  --bs-link-color-rgb: 19, 49, 92;
  --bs-link-hover-color: var(--sc-navy-800);
  --bs-body-bg: #ffffff;
  --bs-body-color: #1b2a3d;
  --bs-border-radius: .6rem;
}

body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }

.btn { font-weight: 600; }
.btn-primary {
  --bs-btn-bg: var(--sc-navy-700); --bs-btn-border-color: var(--sc-navy-700);
  --bs-btn-hover-bg: var(--sc-navy-800); --bs-btn-hover-border-color: var(--sc-navy-800);
  --bs-btn-active-bg: var(--sc-navy-900); --bs-btn-active-border-color: var(--sc-navy-900);
}
.btn-outline-primary {
  --bs-btn-color: var(--sc-navy-700); --bs-btn-border-color: var(--sc-navy-700);
  --bs-btn-hover-bg: var(--sc-navy-700); --bs-btn-hover-border-color: var(--sc-navy-700);
  --bs-btn-active-bg: var(--sc-navy-800);
}
.btn-success {
  --bs-btn-bg: var(--sc-green-600); --bs-btn-border-color: var(--sc-green-600);
  --bs-btn-hover-bg: var(--sc-green-700); --bs-btn-hover-border-color: var(--sc-green-700);
  --bs-btn-active-bg: var(--sc-green-700); --bs-btn-active-border-color: var(--sc-green-700);
}
.btn-outline-light { --bs-btn-hover-color: var(--sc-navy-800); }
:focus-visible { outline: 3px solid var(--sc-green-300); outline-offset: 2px; }

/* --- Bandeau de démonstration ------------------------------------------- */
.demo-banner {
  background: #fff3cd; color: #664d03;
  border-bottom: 1px solid #ffe69c; font-size: .925rem;
}

/* --- Logo ---------------------------------------------------------------- */
.sc-logo { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; margin-right: 1rem; }
.sc-logo__icon { width: 44px; height: 44px; flex: none; }
.sc-logo__text { display: flex; flex-direction: column; line-height: 1; }
.sc-logo__name { font-size: 1.45rem; font-weight: 800; letter-spacing: -.01em; }
.sc-logo__sene { color: var(--sc-green-600); }
.sc-logo__change { color: var(--sc-navy-800); }
.sc-logo__tagline {
  margin-top: .3rem; font-size: .58rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--sc-navy-700);
}
.sc-logo--dark .sc-logo__sene { color: var(--sc-green-300); }
.sc-logo--dark .sc-logo__change, .sc-logo--dark .sc-logo__tagline { color: #fff; }
@media (max-width: 380px) { .sc-logo__tagline { display: none; } }

/* --- Navigation ---------------------------------------------------------- */
/* Minimaliste (logo, « Accueil », « Comment ça marche ») et collante : elle reste
   visible pendant le défilement ; les ancres s'arrêtent sous elle. */
.sc-navbar {
  position: sticky; top: 0; z-index: 1020;
  background: #fff; border-bottom: 1px solid #e6ebf2; padding-block: .75rem;
}
html { scroll-padding-top: 5.5rem; }
.sc-nav-links .nav-link { color: var(--sc-navy-800); font-weight: 500; padding-inline: .8rem; }
.sc-nav-links .nav-link:hover { color: var(--sc-green-600); }
.sc-nav-links .nav-link.active { color: var(--sc-navy-700); box-shadow: inset 0 -2px 0 var(--sc-navy-700); }
.sc-nav-links .nav-link.disabled { color: #8592a3; }
.sc-badge-soon { background: #eef2f7; color: var(--sc-text-muted); font-weight: 600; font-size: .65rem; vertical-align: middle; }
.sc-link-quiet { color: var(--sc-navy-800); text-decoration: none; }
/* Cibles tactiles d'au moins 44 × 44 px (boutons du menu, bouton du menu mobile). */
.sc-nav-actions .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.sc-navbar .navbar-toggler { min-width: 44px; min-height: 44px; }
.sc-nav-links .nav-link { min-height: 44px; display: flex; align-items: center; }
@media (min-width: 992px) {
  /* Une seule ligne : aucun libellé ne se coupe. */
  .sc-nav-links .nav-link, .sc-nav-actions .btn { white-space: nowrap; }
  .sc-nav-links { gap: .5rem; }
  .sc-nav-links .nav-link { padding-inline: .75rem; font-size: .95rem; }
  .sc-nav-actions .btn { padding: .4rem .9rem; font-size: .92rem; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .sc-navbar .sc-logo__tagline { display: none; }
}
.sc-nav-login { text-decoration: none; font-weight: 600; }
.sc-nav-login:hover { text-decoration: underline; }
/* « Transférer » : action principale, hors du menu replié ; cible de 44 px. */
.sc-nav-transfer {
  min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap;
  padding: .5rem 1.35rem; border-radius: .75rem; font-size: 1rem; font-weight: 700;
  color: #fff; box-shadow: 0 .4rem 1rem rgba(21, 128, 61, .28);
}
@media (max-width: 991.98px) { .sc-nav-transfer { margin-right: .5rem; } }
/* Ordinateur : Logo | Accueil | Comment ça marche ? | Transférer, puis à droite
   l'indication de démonstration et le compte. Le bouton reste hors du menu
   replié (mobile) : le conteneur du menu est « transparent » à partir de 992 px
   pour que ses éléments se rangent dans la même ligne que lui. */
@media (min-width: 992px) {
  .sc-navbar .navbar-collapse { display: contents !important; }
  .sc-navbar .sc-nav-links { order: 1; }
  .sc-navbar .sc-nav-transfer { order: 2; margin-left: 1rem !important; }
  .sc-navbar .sc-nav-actions { order: 3; }
}
@media (max-width: 419.98px) {
  /* Petit téléphone : logo, « Transférer » et menu tiennent sur une ligne. */
  .sc-navbar .sc-logo { gap: .45rem; margin-right: .25rem; }
  .sc-navbar .sc-logo__icon { width: 38px; height: 38px; }
  .sc-navbar .sc-logo__name { font-size: 1.15rem; }
  .sc-navbar .sc-logo__tagline { display: none; }
  .sc-nav-transfer { padding: .4rem .8rem; font-size: .9rem; }
  .sc-navbar .navbar-toggler { padding-inline: .55rem; }
}
@media (max-width: 359.98px) {
  /* 320 px : la ligne débordait (bouton du menu renvoyé sous le logo, contrôle
     Chrome du 2026-10-17). Logo, « Transférer » et menu restent sur une ligne. */
  .sc-navbar > .container { padding-inline: .75rem; }
  .sc-navbar .sc-logo { gap: .35rem; margin-right: 0; }
  .sc-navbar .sc-logo__icon { width: 34px; height: 34px; }
  .sc-navbar .sc-logo__name { font-size: 1.02rem; }
  .sc-nav-transfer { padding: .4rem .65rem; font-size: .875rem; margin-right: .35rem; }
  .sc-navbar .navbar-toggler { padding-inline: .45rem; }
}

/* Bouton « Support WhatsApp » du menu (remplace l'indication « Mode démonstration »,
   2026-10-16) : cible tactile de 44 px, texte blanc sur #0f7a40 (contraste 5,4:1). */
.sc-nav-whatsapp {
  display: inline-flex; align-items: center; gap: .45rem; align-self: flex-start; white-space: nowrap;
  min-height: 44px; padding: .4rem .9rem; border-radius: 999px; font-weight: 600;
  color: #fff; background: #0f7a40; border: 1px solid #0f7a40;
}
.sc-nav-whatsapp:hover, .sc-nav-whatsapp:focus-visible { color: #fff; background: #0e6f3a; border-color: #0e6f3a; }
.sc-nav-whatsapp:focus-visible { outline: 3px solid #86efac; outline-offset: 2px; }
.sc-nav-whatsapp svg { width: 1.1rem; height: 1.1rem; flex: none; }
.sc-nav-whatsapp.dropdown-toggle::after { margin-left: .15rem; }
.sc-nav-whatsapp.show { color: #fff; background: #0e6f3a; border-color: #0e6f3a; }
@media (min-width: 992px) { .sc-nav-whatsapp { align-self: center; } }
/* Deux contacts : liste déroulante (nom, numéro lisible, icône). Sur mobile, elle
   s'ouvre dans le menu replié, sous le bouton, en pleine largeur. */
.sc-support-menu { min-width: 17rem; padding: .5rem; border: 1px solid #e3e8ef; border-radius: .9rem; box-shadow: 0 1rem 2.25rem rgba(3, 25, 50, .18); }
.sc-support-menu__title { margin: .2rem .6rem .45rem; font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--sc-text-muted); }
.sc-support-menu__item { display: flex; align-items: center; gap: .75rem; min-height: 52px; padding: .5rem .6rem; border-radius: .65rem; white-space: normal; }
.sc-support-menu__item:hover, .sc-support-menu__item:focus { background: #ecf8f1; color: var(--sc-navy-800); }
.sc-support-menu__icon { flex: none; width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #0f7a40; }
.sc-support-menu__icon svg { width: 1.2rem; height: 1.2rem; }
.sc-support-menu__text { display: flex; flex-direction: column; line-height: 1.25; }
.sc-support-menu__text strong { color: var(--sc-navy-800); font-size: .95rem; }
.sc-support-menu__number { color: #334155; font-size: .95rem; font-variant-numeric: tabular-nums; }
.sc-support-menu__note { margin: .45rem .6rem .2rem; padding-top: .5rem; border-top: 1px solid #eef2f7; font-size: .8rem; color: var(--sc-text-muted); }
@media (max-width: 991.98px) {
  .sc-nav-support { width: 100%; }
  .sc-nav-support .sc-support-menu { width: 100%; min-width: 0; }
}

/* Variante sombre de la page d'accueil : même bleu nuit que le haut du héros,
   la barre se fond dans l'illustration et reste lisible une fois collée. */
.sc-navbar--hero {
  background: var(--sc-navy-900); border-bottom: 1px solid rgba(255, 255, 255, .06); padding-block: .85rem;
}
.sc-navbar--hero .sc-nav-links .nav-link { color: rgba(255, 255, 255, .84); }
.sc-navbar--hero .sc-nav-links .nav-link:hover { color: #fff; }
.sc-navbar--hero .sc-nav-links .nav-link.active { color: var(--sc-green-300); box-shadow: inset 0 -2px 0 var(--sc-green-300); }
.sc-navbar--hero .sc-link-quiet { color: #fff; }
.sc-navbar--hero .btn-outline-primary, .sc-navbar--hero .btn-outline-secondary {
  --bs-btn-color: #fff; --bs-btn-border-color: rgba(255, 255, 255, .45);
  --bs-btn-hover-color: var(--sc-navy-800); --bs-btn-hover-bg: #fff; --bs-btn-hover-border-color: #fff;
  --bs-btn-active-color: var(--sc-navy-800); --bs-btn-active-bg: #fff;
}
@media (max-width: 991.98px) {
  /* Menu replié : panneau opaque, lisible au-dessus du héros. */
  .sc-navbar--hero .navbar-collapse {
    margin-top: .75rem; padding: .5rem 1rem .75rem; border-radius: 1rem;
    background: var(--sc-navy-900); border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, .35);
  }
  .sc-nav-actions { align-items: flex-start; }
}

/* --- Composants communs (pages existantes) ------------------------------ */
.sc-card { border: 0; border-radius: 1rem; box-shadow: 0 .25rem 1.25rem rgba(11, 31, 58, .08); }
.sc-auth { max-width: 32rem; }
/* Connexion, inscription, profil : champs et boutons d'au moins 44 px (cibles tactiles). */
.sc-auth .form-control, .sc-auth .form-select, .sc-auth .btn:not(.btn-link) { min-height: 44px; }
/* Inscription : bouton Google en tête, puis séparateur vers le formulaire classique. */
.sc-signup-social { margin-bottom: .25rem; }
.sc-divider {
  display: flex; align-items: center; gap: .75rem; margin: 1.25rem 0 1rem;
  font-size: .85rem; color: var(--sc-text-muted); text-align: center;
}
.sc-divider::before, .sc-divider::after { content: ""; flex: 1; border-top: 1px solid #dfe5ee; }
ul.errorlist.nonfield {
  list-style: none; padding: .75rem 1rem; margin-bottom: 1rem;
  border-radius: .5rem; background: #f8d7da; color: #58151c;
}
.terms-text { max-height: 24rem; overflow-y: auto; overflow-wrap: anywhere; line-height: 1.55; }
.terms-text p { margin: 0 0 .6rem; }
.terms-section + .terms-section { margin-top: 1rem; }
.terms-section__title { font-size: 1rem; font-weight: 800; color: var(--sc-navy-800); margin: 0 0 .4rem; }
/* Page de consultation : texte complet sans ascenseur interne (lecture sur téléphone). */
.terms-page .terms-text { max-height: none; }

/* --- Page d'accueil ------------------------------------------------------ */
.sc-section { padding-block: 4.5rem; }
.sc-section--muted { background: var(--sc-surface); }
.sc-section--compact { padding-block: 3rem; }
.sc-eyebrow { color: var(--sc-green-600); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .8rem; }
.sc-section-title { color: var(--sc-navy-800); font-weight: 800; }
.sc-lead { color: var(--sc-text-muted); font-size: 1.1rem; }

/* --- 1. Héros Sénégal ⇄ Russie ------------------------------------------- */
/* Fond de secours : le dégradé seul reste élégant si l'illustration ne charge pas. */
.sc-hero {
  position: relative; overflow: hidden; isolation: isolate; color: #fff;
  padding-top: 2.75rem; padding-bottom: 8.5rem;
  background: linear-gradient(180deg, var(--sc-navy-900) 0%, #0a2650 48%, #133b6c 78%, #1a4475 100%);
  /* Bas du héros légèrement courbe, comme sur la maquette (sans image). */
  border-bottom-left-radius: 50% 2.5rem; border-bottom-right-radius: 50% 2.5rem;
}
/* Halos (bleu en haut à droite, vert à gauche, lueur chaude à l'horizon),
   légèrement décalés au défilement (data-parallax, static/js/senechange.js). */
.sc-hero__sky {
  position: absolute; inset: -10% -5% 0; z-index: -2; pointer-events: none; will-change: transform;
  background:
    radial-gradient(42rem 16rem at 50% 100%, rgba(251, 146, 60, .26), transparent 70%),
    radial-gradient(34rem 24rem at 0% 80%, rgba(16, 185, 129, .28), transparent 65%),
    radial-gradient(40rem 26rem at 100% 0%, rgba(37, 99, 235, .42), transparent 65%);
  transform: translate3d(0, var(--sc-parallax, 0px), 0);
}
/* Monuments (illustrations extraites de la maquette, images générées) :
   Renaissance africaine à gauche, Saint-Basile à droite. Panneaux latéraux de
   taille modérée (fichiers d'environ 340 px de large : jamais étirés plein
   écran), fondus vers le centre et vers le haut ; un voile sombre central
   garde le titre lisible. Sans les images, le dégradé du héros suffit. */
.sc-hero__monuments { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.sc-hero__monument {
  position: absolute; bottom: 0; width: min(32vw, 30rem); height: auto;
  opacity: .92; will-change: transform; transform: translate3d(0, var(--sc-parallax, 0px), 0);
  -webkit-mask-image: linear-gradient(var(--sc-fade-dir), #000 45%, transparent 98%), linear-gradient(to top, #000 62%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(var(--sc-fade-dir), #000 45%, transparent 98%), linear-gradient(to top, #000 62%, transparent 100%);
  mask-composite: intersect;
}
.sc-hero__monument--sn { left: 0; --sc-fade-dir: to right; }
.sc-hero__monument--ru { right: 0; --sc-fade-dir: to left; }
/* Voile : centre plus sombre (titre, trajectoires) et fondu bas vers la page. */
.sc-hero__monuments::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 46% 62% at 50% 42%, rgba(3, 25, 50, .78), rgba(3, 25, 50, .35) 70%, transparent 100%),
    linear-gradient(180deg, rgba(3, 25, 50, .55) 0%, transparent 22%, transparent 70%, rgba(19, 59, 108, .85) 100%);
}
@media (max-width: 991.98px) {
  .sc-hero__monument { width: min(44vw, 21rem); opacity: .7; }
}
@media (max-width: 575.98px) {
  .sc-hero__monument { width: 50vw; opacity: .5; }
}
.sc-hero__inner { position: relative; }
.sc-hero__content { display: grid; gap: 1.25rem; max-width: 52rem; margin-inline: auto; text-align: center; }
.sc-hero__content .sc-corridor { --sc-disc: clamp(5.25rem, 3.5rem + 6vw, 8rem); }
.sc-hero__title {
  font-size: clamp(2rem, 1rem + 2.9vw, 3.5rem); font-weight: 800; line-height: 1.1;
  letter-spacing: -.02em; margin: 0 auto .75rem; max-width: 46rem; text-wrap: balance;
  text-shadow: 0 .15rem 1.25rem rgba(3, 25, 50, .55);
}
.sc-hero__sn { color: var(--sc-green-300); }
.sc-hero__ru { color: #60a5fa; }
.sc-hero__subtitle { font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); font-weight: 500; color: #dbe6f5; margin-bottom: 1rem; }
.sc-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-bottom: 1rem; }
.sc-btn-hero, .sc-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .8rem 1.4rem; border-radius: .85rem; font-size: 1.05rem;
}
.sc-btn-hero {
  --bs-btn-bg: var(--sc-green-600); --bs-btn-hover-bg: var(--sc-green-700);
  background-image: linear-gradient(135deg, #16a34a, var(--sc-green-600));
  border: 0; box-shadow: 0 .6rem 1.4rem rgba(22, 163, 74, .35);
}
.sc-btn-ghost {
  --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
  --bs-btn-bg: rgba(255, 255, 255, .06); --bs-btn-hover-bg: rgba(255, 255, 255, .14); --bs-btn-active-bg: rgba(255, 255, 255, .18);
  --bs-btn-border-color: rgba(255, 255, 255, .45); --bs-btn-hover-border-color: #fff; --bs-btn-active-border-color: #fff;
}
.sc-btn-icon { width: 1.1em; height: 1.1em; flex: none; }
.sc-btn-icon--play { width: .9em; height: .9em; }
.sc-hero-demo {
  display: flex; gap: .6rem; align-items: baseline; max-width: 34rem; margin-inline: auto; padding: .65rem .95rem; text-align: left;
  background: rgba(3, 25, 50, .55); border: 1px solid rgba(255, 230, 156, .45); color: #ffe9a8; border-radius: .75rem;
}
.sc-dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; flex: none; }
.sc-hero-demo .sc-dot { background: #fcd34d; }
.sc-btn-lift { transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; }
.sc-btn-lift:hover { transform: translateY(-2px); box-shadow: 0 .6rem 1.4rem rgba(3, 25, 50, .28); }
.sc-btn-lift:active { transform: translateY(0); box-shadow: none; }

/* Drapeaux : Sénégal à gauche, Russie à droite, deux arcs fins au centre.
   Chaque drapeau garde ses proportions 3:2 (jamais rogné ni étiré), posé
   dans un médaillon circulaire de même diamètre pour les deux pays. */
.sc-corridor {
  --sc-disc: clamp(5.25rem, 3.5rem + 7vw, 9rem);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: start; gap: .5rem; max-width: 33rem; margin-inline: auto;
}
.sc-flag { display: flex; flex-direction: column; align-items: center; text-align: center; }
.sc-flag__disc {
  width: var(--sc-disc); aspect-ratio: 1; flex: none; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .24), rgba(255, 255, 255, .07) 70%);
  border: 3px solid rgba(255, 255, 255, .9);
  box-shadow: 0 .9rem 2rem rgba(0, 0, 0, .35), 0 0 0 7px rgba(255, 255, 255, .07);
}
.sc-flag__img {
  display: block; width: 74%; height: auto; aspect-ratio: 3 / 2; border-radius: .3rem;
  box-shadow: 0 .2rem .6rem rgba(0, 0, 0, .3);
}
.sc-flag figcaption { display: flex; flex-direction: column; gap: .15rem; margin-top: .8rem; line-height: 1.25; }
.sc-flag figcaption strong { font-size: 1.05rem; }
.sc-flag figcaption span { font-size: .85rem; color: var(--sc-on-dark-muted); }
/* Centré sur les médaillons (et non sur médaillon + légende). */
.sc-corridor__flows { display: flex; flex-direction: column; align-items: center; height: var(--sc-disc); justify-content: center; }
.sc-corridor__svg { display: block; width: 100%; height: auto; overflow: visible; }
.sc-corridor__label { font-size: .8rem; font-weight: 700; letter-spacing: .02em; text-align: center; white-space: nowrap; line-height: 1.2; }
.sc-corridor__label--top { color: var(--sc-green-300); }
.sc-corridor__label--bottom { color: #93c5fd; }
@media (prefers-reduced-motion: no-preference) {
  /* Tracé des arcs une seule fois au chargement, puis statique. */
  .sc-corridor__svg { animation: sc-fade-in .8s ease-out .2s both; }
  .sc-flow { stroke-dasharray: 100; animation: sc-draw 1.6s cubic-bezier(.4, 0, .2, 1) .3s both; }
  .sc-flow--ru-sn { animation-delay: .8s; }
}
@keyframes sc-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes sc-fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 991.98px) {
  .sc-hero { padding-top: 2.5rem; padding-bottom: 7rem; }
  .sc-corridor { margin-top: .5rem; }
}
@media (max-width: 575.98px) {
  .sc-hero { padding-top: 2rem; padding-bottom: 5.5rem; }
  .sc-hero__actions .btn { flex: 1 1 100%; }
  .sc-corridor { gap: .25rem; }
  .sc-corridor__label { font-size: .72rem; }
  .sc-flag figcaption strong { font-size: .95rem; }
  .sc-flag figcaption span { font-size: .8rem; }
}
.sc-flag-mini { border-radius: 3px; outline: 1px solid rgba(11, 31, 58, .15); outline-offset: -1px; }


.sc-feature-icon {
  width: 3.25rem; height: 3.25rem; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--sc-navy-700); color: #fff;
}
.sc-feature-icon svg { width: 1.4rem; height: 1.4rem; }
.sc-status { font-size: .8rem; font-weight: 700; }
.sc-status--ready { background: #dcfce7; color: #14532d; }
.sc-status--planned { background: #e8eef6; color: #2c3e57; }

.sc-status--stale { background: #fff3cd; color: #664d03; }
.sc-status--off { background: #e9ecef; color: #495057; }

/* --- 2. Calculateur (rates/templates/rates/converter.html) ---------------- */
/* Sur la page d'accueil, la carte chevauche le bas du héros (marge négative
   inférieure au rembourrage bas du héros : aucun contenu n'est recouvert). */
.sc-calc-band { position: relative; z-index: 2; margin-top: -5.5rem; scroll-margin-top: 1rem; }
@media (max-width: 991.98px) { .sc-calc-band { margin-top: -4.5rem; } }
@media (max-width: 575.98px) { .sc-calc-band { margin-top: -3rem; } }
.sc-panel { background: #fff; border-radius: 1.25rem; box-shadow: 0 .25rem 1.25rem rgba(11, 31, 58, .08); }
.sc-panel__note { padding: .6rem .8rem; border-radius: .6rem; background: #fff8e1; color: #664d03; }
.sc-calc-note {
  display: flex; align-items: flex-start; justify-content: center; gap: .5rem; margin-top: 1rem;
  color: #6b5200;
}
.sc-calc-note svg { margin-top: .2rem; }
.sc-calc-note svg { width: 1rem; height: 1rem; flex: none; }

.sc-converter {
  border: 0; border-radius: 1.5rem;
  box-shadow: 0 1.5rem 3.5rem rgba(3, 25, 50, .16), 0 .25rem .75rem rgba(3, 25, 50, .06);
}
.sc-converter__body { padding: 1.25rem; }
@media (min-width: 576px) { .sc-converter__body { padding: 1.75rem; } }
@media (min-width: 992px) { .sc-converter__body { padding: 2.25rem 2.5rem; } }
.sc-converter__grid { display: grid; gap: 1.5rem; }
@media (min-width: 1200px) { .sc-converter__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 2.5rem; } }
.sc-converter__head { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.5rem; }
.sc-converter__icon {
  width: 3rem; height: 3rem; flex: none; display: grid; place-items: center; border-radius: .9rem;
  color: var(--sc-green-600); background: #e8f7ee;
}
.sc-converter__icon svg { width: 1.6rem; height: 1.6rem; }
.sc-converter__title { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.6rem); font-weight: 800; color: var(--sc-navy-800); margin: 0 0 .25rem; }
.sc-converter__subtitle { color: var(--sc-text-muted); }
.sc-converter__label { display: block; float: none; width: auto; padding: 0; margin-bottom: .5rem; font-size: .9rem; font-weight: 700; color: var(--sc-navy-800); }

/* Sens du transfert : sélecteur segmenté, l'option choisie en bleu. */
.sc-converter__direction { min-width: 0; margin: 0 0 1.25rem; padding: 0; border: 0; }
.sc-direction {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem; padding: .3rem;
  border-radius: 1rem; background: #f1f4f9; border: 1px solid #e1e7f0;
}
.sc-direction__option {
  display: flex; align-items: center; justify-content: center; gap: .6rem; min-height: 3.5rem;
  padding: .5rem .75rem; border-radius: .75rem; cursor: pointer; text-align: center; color: var(--sc-navy-800);
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.sc-direction__option:hover { background: rgba(255, 255, 255, .8); }
.btn-check:checked + .sc-direction__option {
  color: #fff; background: linear-gradient(135deg, #1e40af, #1d4ed8); box-shadow: 0 .4rem 1rem rgba(29, 78, 216, .3);
}
.btn-check:checked + .sc-direction__option small { color: #dbeafe; }
.btn-check:focus-visible + .sc-direction__option { outline: 3px solid var(--sc-green-300); outline-offset: 2px; }
.sc-direction__flags { display: inline-flex; align-items: center; gap: .2rem; flex: none; }
.sc-direction__flags img { width: 1.35rem; height: auto; border-radius: 2px; outline: 1px solid rgba(11, 31, 58, .18); outline-offset: -1px; }
.sc-direction__text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.sc-direction__text strong { font-size: .92rem; }
.sc-direction__text small { color: var(--sc-text-muted); font-weight: 600; font-size: .8rem; }
@media (max-width: 419.98px) { .sc-direction__flags { display: none; } }

.sc-amount { --bs-border-radius-lg: .9rem; }
.sc-converter__amount { min-height: 3.5rem; font-size: 1.45rem; font-weight: 700; font-variant-numeric: tabular-nums; border-color: #d6dde8; }
.sc-converter__amount:focus { border-color: #1d4ed8; box-shadow: 0 0 0 .25rem rgba(29, 78, 216, .15); }
.sc-converter__badge { font-weight: 800; color: var(--sc-navy-800); background: var(--sc-surface); border-color: #d6dde8; min-width: 4.75rem; justify-content: center; }
.sc-converter__unit { color: var(--sc-text-muted); }
.sc-converter__error { color: #b02a37; font-weight: 600; }
.sc-converter__hint { color: #7a5b00; }

/* Taux indicatif : encadré clair, couleur selon le statut. */
.sc-converter__summary { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.sc-rate-card {
  display: flex; gap: .9rem; align-items: flex-start; padding: 1rem 1.15rem; border-radius: 1rem;
  color: var(--sc-navy-800); background: #effaf3; border: 1px solid #c6ecd4;
}
.sc-rate-card__icon {
  width: 2.5rem; height: 2.5rem; flex: none; display: grid; place-items: center; border-radius: .75rem;
  color: var(--sc-green-600); background: #fff; box-shadow: 0 .15rem .4rem rgba(21, 128, 61, .12);
}
.sc-rate-card__icon svg { width: 1.3rem; height: 1.3rem; }
.sc-rate-card__main { flex: 1; min-width: 0; }
.sc-rate-card__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .4rem .75rem; margin-bottom: .2rem; }
.sc-rate-card__label { font-size: .88rem; font-weight: 700; color: var(--sc-navy-800); }
.sc-rate-card__value {
  font-size: clamp(1.3rem, 1.1rem + .9vw, 1.65rem); font-weight: 800; line-height: 1.2; color: var(--sc-navy-900);
  font-variant-numeric: tabular-nums; overflow-wrap: break-word;
}
.sc-rate-card__inverse { font-size: .85rem; color: var(--sc-text-muted); font-variant-numeric: tabular-nums; }
.sc-rate-card .sc-status { display: inline-flex; align-items: center; gap: .35rem; }
.sc-rate-card--unavailable { background: #f3f5f8; border-color: #e1e6ee; }
.sc-rate-card--unavailable .sc-rate-card__icon { color: #64748b; }
.sc-rate-card__value--none { color: #475569; }

/* Récapitulatif : montants alignés, total et montant net mis en évidence. */
.sc-breakdown { border: 1px solid #e6ebf2; border-radius: 1rem; overflow: hidden; background: #fff; }
.sc-breakdown__row {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .7rem 1.1rem; border-top: 1px solid #eef2f6;
}
.sc-breakdown__row:first-child { border-top: 0; }
.sc-breakdown dt { font-weight: 500; color: #334155; display: flex; flex-direction: column; min-width: 0; }
.sc-breakdown dt small { font-weight: 400; color: var(--sc-text-muted); font-size: .8rem; }
.sc-breakdown dd { margin: 0; text-align: right; font-weight: 700; color: var(--sc-navy-800); font-variant-numeric: tabular-nums; overflow-wrap: break-word; }
/* Un montant ne se coupe jamais entre le nombre et sa devise : le libellé s'adapte. */
.sc-breakdown__row:not(.sc-breakdown__row--net) dd { flex: none; white-space: nowrap; }
.sc-breakdown__row--total { background: #f7f9fc; }
.sc-breakdown__row--total dt { font-weight: 800; color: var(--sc-navy-800); }
.sc-breakdown__row--total dd { font-size: 1.15rem; font-weight: 800; }
.sc-breakdown__row--net { background: #ecfdf3; border-top-color: #bbf7d0; padding-block: 1rem; }
.sc-breakdown__row--net dt { color: #14532d; font-weight: 600; }
.sc-breakdown__row--net dd { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.7rem); font-weight: 800; color: var(--sc-green-700); }
.sc-breakdown__row--net output { font-weight: inherit; }
/* Taux périmé ou absent (aucun data-rate) : « Indisponible » en gris neutre, jamais
   dans le vert d'un montant fiable. */
.sc-converter:not([data-rate]) .sc-breakdown__row--net { background: #f3f5f8; border-top-color: #e1e6ee; }
.sc-converter:not([data-rate]) .sc-breakdown__row--net dt { color: #475569; }
.sc-converter:not([data-rate]) .sc-breakdown__row--net dd { color: #475569; font-size: 1.15rem; }
/* Téléphone : libellé et montant restent sur la même ligne (lecture plus rapide) ;
   seul le montant net, plus long, passe sous son libellé. */
@media (max-width: 575.98px) {
  .sc-breakdown__row { padding: .65rem .9rem; gap: .75rem; }
  .sc-breakdown__row--net { flex-direction: column; align-items: flex-start; gap: .2rem; }
  .sc-breakdown__row--net dd { text-align: left; }
}
@media (max-width: 339.98px) {
  .sc-breakdown__row { flex-direction: column; align-items: flex-start; gap: .2rem; }
  .sc-breakdown dd { text-align: left; }
}
.sc-converter__notice { margin-top: 1.5rem; padding: .75rem 1rem; border-radius: .75rem; background: #eef3f9; color: #2c3e57; }

/* Retour visuel : valeur recalculée, changement de sens. */
.is-updated { animation: sc-updated .6s ease-out; border-radius: .3rem; }
@keyframes sc-updated { from { background-color: rgba(74, 222, 128, .35); } to { background-color: transparent; } }
.sc-converter.is-switching .sc-converter__badge,
.sc-converter.is-switching [data-cur] { animation: sc-swap .35s ease-out; }
@keyframes sc-swap { from { opacity: 0; transform: translateY(-.35rem); } to { opacity: 1; transform: none; } }

/* --- 3. Comment ça marche : frise en quatre étapes ---------------------- */
.sc-section--how { padding-top: 4rem; }
.sc-section-title--lg { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); }
.sc-steps { display: grid; gap: 1rem; }
.sc-step {
  --sc-step: var(--sc-green-600); --sc-step-soft: #e8f7ee;
  position: relative; display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: .85rem; align-items: start;
  padding: 1rem 1.1rem; border-radius: 1rem; background: #fff; border: 1px solid #e9eef4;
}
.sc-step--blue { --sc-step: #2563eb; --sc-step-soft: #e8effd; }
.sc-step--orange { --sc-step: #c2410c; --sc-step-soft: #fff1e7; }
.sc-step--violet { --sc-step: #7c3aed; --sc-step-soft: #f1ebfe; }
.sc-step__num {
  width: 2.1rem; height: 2.1rem; display: grid; place-items: center; border-radius: 50%;
  font-weight: 800; font-size: .95rem; color: #fff; background: var(--sc-step);
}
.sc-step__icon {
  width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border-radius: .8rem;
  color: var(--sc-step); background: var(--sc-step-soft);
}
.sc-step__icon svg { width: 1.4rem; height: 1.4rem; }
.sc-step__title { font-size: 1rem; font-weight: 800; color: var(--sc-navy-800); margin: 0 0 .25rem; }
.sc-step__text { font-size: .88rem; color: var(--sc-text-muted); margin: 0; }
/* Téléphone et tablette : frise verticale, reliée par un trait discret. */
.sc-step:not(:last-child)::after {
  content: ""; position: absolute; left: 2.15rem; bottom: -1rem; width: 2px; height: 1rem; background: #d6dde8;
}
@media (min-width: 992px) {
  .sc-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5rem; }
  .sc-step {
    grid-template-columns: 2.1rem minmax(0, 1fr); grid-template-areas: "num icon" "body body"; align-items: center; align-content: start;
    padding: 0; background: transparent; border: 0;
  }
  .sc-step__num { grid-area: num; }
  .sc-step__icon { grid-area: icon; justify-self: start; }
  .sc-step__body { grid-area: body; }
  /* Connecteur : petite flèche fine entre deux étapes. */
  .sc-step:not(:last-child)::after {
    left: auto; right: -2rem; top: .95rem; bottom: auto; width: 1.5rem; height: .75rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M1 6h20M16 1.5 21 6l-5 4.5' fill='none' stroke='%2394a3b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  }
}

/* Vidéo explicative sous la frise (core/video.py) : cadre 16:9, jamais de
   lecture automatique ; sans vidéo, un état d'attente de même taille. */
.sc-howto-video { max-width: 52rem; margin: 3rem auto 0; }
.sc-howto-video__caption { text-align: center; margin-bottom: 1rem; }
.sc-howto-video__title { font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); font-weight: 800; color: var(--sc-navy-800); margin: 0 0 .35rem; }
.sc-howto-video__text { font-size: .92rem; color: var(--sc-text-muted); margin: 0; }
.sc-howto-video__frame {
  position: relative; aspect-ratio: 16 / 9; width: 100%; overflow: hidden;
  border-radius: 1rem; background: var(--sc-navy-800); box-shadow: 0 .75rem 2rem rgba(3, 25, 50, .14);
}
.sc-howto-video__frame iframe, .sc-howto-video__frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.sc-howto-video__frame[data-howto-video="pending"] {
  background: linear-gradient(135deg, var(--sc-navy-800), var(--sc-navy-700)); box-shadow: none; border: 1px dashed #4b6a93;
}
.sc-howto-video__pending {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: .5rem;
  padding: 1rem; text-align: center; color: #fff; font-weight: 700; font-size: clamp(.95rem, .85rem + .4vw, 1.1rem);
}
.sc-howto-video__icon {
  width: clamp(2.75rem, 2rem + 3vw, 4rem); height: clamp(2.75rem, 2rem + 3vw, 4rem); display: grid; place-items: center;
  border-radius: 50%; color: var(--sc-navy-800); background: rgba(255, 255, 255, .85); margin-bottom: .25rem;
}
.sc-howto-video__icon svg { width: 55%; height: 55%; }
.sc-howto-video__hint { font-weight: 400; font-size: .85rem; color: var(--sc-on-dark-muted); max-width: 26rem; }
@media (max-width: 419.98px) { .sc-howto-video__hint { display: none; } }

/* Progression de la frise : le connecteur se dessine quand elle devient
   visible (une seule fois, uniquement si le script d'apparition est actif). */
.sc-js-reveal [data-timeline] .sc-step:not(:last-child)::after {
  transform: scaleY(0); transform-origin: top; transition: transform .5s ease-out;
  transition-delay: calc(var(--sc-delay, 0) * 160ms + .35s);
}
.sc-js-reveal [data-timeline].is-visible .sc-step:not(:last-child)::after { transform: none; }
@media (min-width: 992px) {
  .sc-js-reveal [data-timeline] .sc-step:not(:last-child)::after { transform: scaleX(0); transform-origin: left; }
  .sc-js-reveal [data-timeline].is-visible .sc-step:not(:last-child)::after { transform: none; }
}


/* --- 4. Frais et taux : une règle, un exemple (sens au choix) ----------- */
.sc-fee-facts li {
  position: relative; padding-left: 1.1rem; margin-bottom: .45rem; font-size: .9rem; color: #3b4a5e;
}
.sc-fee-facts li::before {
  content: ""; position: absolute; left: 0; top: .55rem; width: .4rem; height: .4rem; border-radius: 50%; background: var(--sc-green-600);
}

/* --- 5. Moyens de paiement et sécurité --------------------------------- */
.sc-methods-lead { max-width: 50rem; }
.sc-methods-demo {
  display: flex; align-items: flex-start; gap: .85rem; margin: 0 0 1.5rem; padding: 1rem 1.15rem;
  border: 1px solid #f2c873; border-radius: 1rem; background: #fff9ea; color: #6b4a00; font-size: .9rem;
}
.sc-methods-demo strong { display: block; margin-bottom: .1rem; color: #4a3200; font-size: .95rem; }
.sc-methods-demo__icon {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: 50%; background: #fdebc4; color: #7a5200;
}
.sc-methods-demo__icon svg { width: 1.35rem; height: 1.35rem; }

/* Panneaux pays : la ligne s'adapte à la largeur du panneau (requête de
   conteneur), pas à celle de l'écran — logo | nom et type | statuts empilés. */
.sc-methods-card {
  container-type: inline-size; padding: 1.1rem 1.15rem .4rem; border-radius: 1.15rem;
  background: #fff; border: 1px solid #e3e9f1; box-shadow: 0 .25rem 1rem rgba(11, 31, 58, .04);
}
.sc-methods-card__title { display: flex; align-items: center; gap: .65rem; margin: 0 0 .35rem; font-size: 1.15rem; font-weight: 800; color: var(--sc-navy-800); }
.sc-methods-card__title .sc-flag-mini { width: 1.875rem; height: 1.25rem; flex: none; }
.sc-method {
  display: grid; grid-template-columns: 6.75rem minmax(0, 1fr); grid-template-areas: "logo text" "status status";
  align-items: center; gap: .65rem .85rem; padding: .8rem 0; border-top: 1px solid #edf1f6;
}
.sc-method:first-child { border-top: 0; }
@container (min-width: 25rem) {
  .sc-method { grid-template-columns: 6.75rem minmax(0, 1fr) auto; grid-template-areas: "logo text status"; }
  .sc-method__status { flex-direction: column; align-items: stretch; }
}
/* Logo fourni : cadre de taille fixe, fond de sa propre identité, proportions
   conservées (object-fit: contain), jamais recadré ni déformé. */
.sc-method__logo {
  grid-area: logo; display: flex; align-items: center; justify-content: center;
  width: 100%; height: 3.25rem; padding: .45rem .6rem; border-radius: .7rem;
  background: #fff; border: 1px solid #e6ebf2; overflow: hidden;
}
.sc-method__logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.sc-method__logo--t-bank { background: #ffdd2d; border-color: #ffdd2d; }
.sc-method__logo--wave { background: #1dc8ff; border-color: #1dc8ff; padding: .2rem .45rem; }
.sc-method__logo--orange-money { background: #080a0b; border-color: #080a0b; padding: .2rem .3rem; }
.sc-method__logo--sberbank, .sc-method__logo--alfa-bank { padding-inline: .45rem; }
/* Icône neutre d'un moyen sans logo fourni. */
.sc-method__icon--bank, .sc-method__icon--mobile_money { background: var(--sc-surface); color: var(--sc-navy-700); }
.sc-method__icon--mobile_money { color: var(--sc-green-700); }
.sc-method__logo svg { width: 1.5rem; height: 1.5rem; }
/* Aucune coordonnée SeneChange utilisable pour ce moyen : logo (et son fond de marque) grisé. */
.sc-method__logo[data-available="false"] { filter: grayscale(1); opacity: .55; }
.sc-method__text { grid-area: text; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.sc-method__text strong { color: var(--sc-navy-800); font-size: .98rem; }
.sc-method__text small { color: var(--sc-text-muted); font-size: .85rem; }
.sc-method__status { grid-area: status; display: flex; flex-wrap: wrap; gap: .35rem; min-width: 0; }
.sc-method__status .badge {
  display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .7rem; border-radius: 999px;
  font-size: .8rem; font-weight: 600; line-height: 1.2; white-space: normal; text-align: left;
}
.sc-status--receive { background: #e7f6ed; color: #0f5c2e; }
.sc-status__check { flex: none; width: .95rem; height: .95rem; color: var(--sc-green-600); }
/* Panneau étroit (téléphone) : logo à gauche sur toute la hauteur, nom puis
   statuts empilés à droite ; une ligne par moyen, sans grand vide. */
@container (max-width: 24.99rem) {
  .sc-method { grid-template-columns: 5.25rem minmax(0, 1fr); grid-template-areas: "logo text" "logo status"; align-items: start; row-gap: .45rem; }
  .sc-method__logo { height: 2.75rem; padding: .35rem .45rem; }
  .sc-method__status { flex-direction: column; align-items: flex-start; gap: .3rem; }
}
@media (max-width: 359.98px) {
  .sc-methods-card { padding-inline: .9rem; }
  .sc-method { grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: .7rem; }
  .sc-method__logo { height: 2.5rem; }
}

.sc-methods-info { padding: 1rem 1.25rem; border-radius: 1rem; background: #eef4fb; border: 1px solid #dce6f3; color: #33465f; }
.sc-methods-legend { padding-left: 1.1rem; }
.sc-methods-legend li::marker { color: var(--sc-navy-700); }
.sc-methods-legend li + li { margin-top: .3rem; }
.sc-methods-legend strong { color: var(--sc-navy-800); }
.sc-methods-info__demo { margin-top: .6rem; padding-top: .6rem; border-top: 1px solid #dce6f3; }
@media (min-width: 992px) {
  .sc-safety__list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2rem; }
}
.sc-safety { height: 100%; padding: 1.5rem; border-radius: 1.25rem; background: var(--sc-surface); border: 1px solid #e6ebf2; }
.sc-safety__title { font-size: 1.05rem; font-weight: 800; color: var(--sc-navy-800); margin: 0 0 .9rem; }
.sc-safety__item {
  position: relative; padding-left: 1.75rem; margin-bottom: .7rem; font-size: .9rem; color: var(--sc-text-muted);
}
.sc-safety__item strong { color: var(--sc-navy-800); }
.sc-safety__item::before {
  content: ""; position: absolute; left: 0; top: .2rem; width: 1.1rem; height: 1.1rem; border-radius: 50%;
  background: var(--sc-green-600) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' d='M4 8.5l2.5 2.5L12 5.5'/%3E%3C/svg%3E") center / .8rem no-repeat;
}
.sc-safety__disclaimer { margin-top: 1rem; color: var(--sc-text-muted); }

/* --- 6. ASR : logo fourni à sa taille réelle au plus (354 × 200 px, affiché
   à 88 px de haut, net sur écran haute densité), jamais déformé ni recoloré. */
.sc-asr-panel {
  padding: 1.75rem 2rem; border-radius: 1.25rem; background: #fff;
  border: 1px solid #e6ebf2; box-shadow: 0 .25rem 1.25rem rgba(11, 31, 58, .06);
}
.sc-asr { display: flex; align-items: center; gap: 1.75rem; }
.sc-asr__logo { flex: none; display: block; padding: .35rem; border-radius: 1rem; background: #fff; border: 1px solid #eef2f7; }
.sc-asr__logo img { display: block; height: 5.5rem; width: auto; max-width: 100%; }
.sc-asr__body { min-width: 0; }
.sc-asr-panel .sc-section-title { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem); }
@media (max-width: 575.98px) {
  .sc-asr-panel { padding: 1.4rem; }
  .sc-asr { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .sc-asr__logo img { height: 4.5rem; }
}

/* --- 7. Besoin d'aide ? : canaux configurés seulement, dans le contenu. */
.sc-help { height: 100%; padding: 1.75rem; border-radius: 1.25rem; background: var(--sc-surface); border: 1px solid #e6ebf2; border-top: 4px solid var(--sc-green-600); }
.sc-help__channels { display: grid; gap: .65rem; }
.sc-channel {
  min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  border-radius: .85rem; color: #fff; border: 0;
}
.sc-channel svg { width: 1.3rem; height: 1.3rem; flex: none; }
.sc-channel--whatsapp { --bs-btn-color: #fff; --bs-btn-bg: #1f7a4d; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #155c39; --bs-btn-active-color: #fff; --bs-btn-active-bg: #155c39; }
.sc-channel--telegram { --bs-btn-color: #fff; --bs-btn-bg: #1b6fa8; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #155682; --bs-btn-active-color: #fff; --bs-btn-active-bg: #155682; }
.sc-channel--whatsapp { justify-content: flex-start; padding: .6rem 1rem; text-align: left; }
.sc-channel__text { display: flex; flex-direction: column; line-height: 1.25; }
.sc-channel__number { font-weight: 500; font-size: .95rem; font-variant-numeric: tabular-nums; opacity: .92; }
.sc-help__note { font-size: .9rem; color: var(--sc-text-muted); }
.sc-channel-off { display: flex; align-items: center; gap: .55rem; font-size: .9rem; color: var(--sc-text-muted); }
.sc-channel-off .sc-dot { background: #9aa6b5; }
.sc-faq__title { font-size: 1.15rem; font-weight: 800; color: var(--sc-navy-800); margin-bottom: 1rem; }

/* --- Apparition au défilement ------------------------------------------ */
/* Actif seulement si le script a pris la main (classe sur <html>) : sans
   JavaScript, tout reste visible. */
.sc-js-reveal .sc-reveal {
  opacity: 0; transform: translate3d(0, 1.5rem, 0);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(var(--sc-delay, 0) * 110ms);
}
.sc-js-reveal .sc-reveal.is-visible { opacity: 1; transform: none; }
.sc-js-reveal .sc-timeline { --sc-progress: 0; }
.sc-js-reveal .sc-timeline.is-visible { --sc-progress: 1; }

/* Version calme : aucune animation ni transition décorative. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sc-js-reveal .sc-reveal { opacity: 1; transform: none; transition: none; }
  .sc-js-reveal .sc-timeline { --sc-progress: 1; }
  .sc-flow, .sc-corridor__svg, .is-updated, .sc-converter.is-switching .sc-converter__badge,
  .sc-converter.is-switching [data-cur] { animation: none !important; }
  .sc-hero__sky, .sc-hero__monument { transform: none; }
  .sc-btn-lift, .sc-btn-lift:hover, .sc-direction__option, .sc-direction__option:hover,
  .sc-js-reveal [data-timeline] .sc-step:not(:last-child)::after { transform: none; transition: none; }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

.sc-faq .accordion-button { font-weight: 600; color: var(--sc-navy-800); }
.sc-faq .accordion-button:not(.collapsed) { background: #eef3f9; color: var(--sc-navy-800); box-shadow: none; }

.sc-cta { background: linear-gradient(135deg, var(--sc-navy-800), var(--sc-navy-700)); color: #fff; border-radius: 1.25rem; }
.sc-cta p { color: var(--sc-on-dark-muted); }

/* --- Pied de page -------------------------------------------------------- */
.sc-footer { background: var(--sc-navy-900); color: #fff; padding-bottom: 1.5rem; }
.sc-footer__text { color: var(--sc-on-dark-muted); }
.sc-footer__title { font-size: .85rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; margin-bottom: 1rem; }
.sc-footer__links li { margin-bottom: .5rem; }
.sc-footer a { color: var(--sc-on-dark-muted); text-decoration: none; }
.sc-footer a:hover, .sc-footer a:focus-visible { color: #fff; text-decoration: underline; }
.sc-footer__rule { border-color: rgba(255, 255, 255, .15); opacity: 1; margin-block: 2rem 1.25rem; }

/* --- Support WhatsApp ---------------------------------------------------- */
/* Plus de pastille flottante ni de bandeau sous le pied de page (2026-10-17) :
   le bouton du menu (templates/includes/whatsapp_button.html) est le seul accès
   commun ; la section « Besoin d'aide ? » de l'accueil détaille les contacts. */
@media (max-width: 991.98px) {
  /* Menu replié : bouton pleine largeur, en tête des actions. */
  .sc-nav-actions > .sc-nav-whatsapp, .sc-nav-support > .sc-nav-whatsapp { align-self: stretch; width: 100%; justify-content: center; }
}
@media (max-width: 575.98px) {
  .sc-section { padding-block: 3rem; }
}

/* Transferts : compte à rebours de vérification (affichage seul).
   --sc-progress (0 à 1) vient du serveur puis du script ; la couleur suit
   l'état : vert, orange (5 min), rouge (1 min), délai écoulé. */
.sc-countdown {
  --sc-cd: var(--sc-green-600); --sc-cd-soft: #e8f7ee; --sc-progress: 1;
  border: 1px solid #dfe7ef; border-top: 4px solid var(--sc-cd); transition: border-color .4s ease;
}
.sc-countdown--soon { --sc-cd: #c2410c; --sc-cd-soft: #fff1e7; }
.sc-countdown--critical { --sc-cd: #b91c1c; --sc-cd-soft: #fdecec; }
.sc-countdown--late { --sc-cd: #b02a37; --sc-cd-soft: #fdecec; --sc-progress: 0; }
.sc-countdown__body { display: flex; align-items: center; gap: 1.25rem; }
.sc-countdown__dial { position: relative; flex: 0 0 auto; width: 8.5rem; height: 8.5rem; display: grid; place-items: center; }
.sc-countdown__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.sc-countdown__track { fill: var(--sc-cd-soft); stroke: #e9eef4; stroke-width: 8; transition: fill .4s ease; }
.sc-countdown__bar {
  fill: none; stroke: var(--sc-cd); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 100;
  stroke-dashoffset: calc(100 - var(--sc-progress) * 100); transition: stroke-dashoffset 1s linear, stroke .4s ease;
}
.sc-countdown__time {
  position: relative; margin: 0; font-size: 1.9rem; font-weight: 800; letter-spacing: .02em;
  font-variant-numeric: tabular-nums; color: var(--sc-navy-800);
}
.sc-countdown--critical .sc-countdown__time, .sc-countdown--late .sc-countdown__time { color: var(--sc-cd); }
.sc-countdown__title { font-size: 1.05rem; font-weight: 800; color: var(--sc-navy-800); margin: 0 0 .25rem; }
.sc-countdown__due { font-size: .85rem; font-weight: 600; color: var(--sc-cd); margin: 0 0 .4rem; }
.sc-countdown__text { font-size: .88rem; color: var(--sc-text-muted); }
.sc-countdown__text--late { color: #842029; font-weight: 600; }
.sc-countdown__warning {
  margin: 0 0 .4rem; padding: .35rem .6rem; border-radius: .5rem; display: inline-block;
  font-size: .9rem; font-weight: 800; color: #7f1d1d; background: #fdecec; border: 1px solid #f5b5b5;
}
@media (prefers-reduced-motion: no-preference) {
  .sc-countdown--critical .sc-countdown__time { animation: sc-cd-pulse 1.6s ease-in-out infinite; }
}
@keyframes sc-cd-pulse { 50% { opacity: .72; } }
@media (max-width: 419.98px) {
  .sc-countdown__body { flex-direction: column; text-align: center; }
  .sc-countdown__dial { width: 7.5rem; height: 7.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sc-countdown, .sc-countdown__track, .sc-countdown__bar { transition: none; }
}
/* Instructions de paiement (2026-10-20) : coordonnée, montant et référence
   faciles à repérer ; boutons de copie larges (cible tactile). */
.sc-paybox { margin: 0; border: 1px solid #dfe7ef; border-radius: .9rem; overflow: hidden; }
.sc-paybox__row { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: .25rem 1rem; padding: .7rem 1rem; border-top: 1px solid #edf1f6; }
.sc-paybox__row:first-child { border-top: 0; }
.sc-paybox__row dt { font-weight: 600; color: var(--sc-text-muted); font-size: .9rem; }
.sc-paybox__row dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; overflow-wrap: anywhere; }
.sc-paybox__row--key { background: #f3f9f5; }
.sc-paybox__value { font-size: 1.3rem; font-weight: 800; color: var(--sc-navy-800); letter-spacing: .01em; }
.sc-paybox .sc-copy-status { flex-basis: 100%; margin-left: 0 !important; }
@media (max-width: 575.98px) {
  .sc-paybox__row { grid-template-columns: minmax(0, 1fr); }
  .sc-paybox__row dd .btn { width: 100%; }
}
.sc-paysteps { padding-left: 1.25rem; }
.sc-paysteps li { margin-bottom: .3rem; }
/* Remerciement après la création : code de suivi mis en évidence. */
.sc-thanks { border-top: 4px solid var(--sc-green-600); }
.sc-thanks__code { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: 1.5rem; font-weight: 800; letter-spacing: .04em; color: var(--sc-navy-800); }
.sc-thanks__code .btn { margin-left: 0 !important; }
/* Chronologie du suivi : étapes reliées par une ligne de progression. */
.sc-timeline__step { position: relative; display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: .75rem; padding-bottom: 1rem; }
.sc-timeline__step:last-child { padding-bottom: 0; }
.sc-timeline__step:not(:last-child)::before {
  content: ""; position: absolute; left: calc(.875rem - 1px); top: 1.75rem; bottom: 0; width: 2px; background: #dfe5ec;
}
.sc-timeline__step--done:not(:last-child)::before { background: var(--sc-green-600); }
.sc-timeline__dot {
  width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid #c9d3df; background: #fff; color: #fff;
}
.sc-timeline__dot svg { width: 1rem; height: 1rem; }
.sc-timeline__step--done .sc-timeline__dot { background: var(--sc-green-600); border-color: var(--sc-green-600); }
.sc-timeline__step--current .sc-timeline__dot { border-color: var(--sc-green-600); box-shadow: 0 0 0 4px #d9f2e2; background: radial-gradient(circle, var(--sc-green-600) 0 35%, #fff 38%); }
.sc-timeline__step--stopped .sc-timeline__dot { background: #b02a37; border-color: #b02a37; }
.sc-timeline__label { font-weight: 700; color: var(--sc-navy-800); line-height: 1.75rem; }
.sc-timeline__step--todo .sc-timeline__label { font-weight: 500; color: #8a96a5; }
.sc-timeline__step--current .sc-timeline__label { color: var(--sc-green-700); }
.sc-timeline__step--stopped .sc-timeline__label { color: #842029; }
.sc-timeline__when { font-size: .8rem; color: var(--sc-text-muted); }
.sc-timeline__help { font-size: .85rem; color: var(--sc-text-muted); margin-top: .15rem !important; }
.sc-timeline__step--stopped .sc-timeline__help { color: #842029; }
/* Démonstration : aucune coordonnée de paiement communiquée. */
.sc-pay-demo { padding: .75rem 1rem; border-radius: .75rem; background: #fff8e6; border: 1px solid #f3d27a; color: #5c4300; }

/* Cadre institutionnel ASR (texte neutre en attente de validation) */
.sc-asr--compact { border-left: 4px solid #198754; background: #f4f7fb; padding: .75rem 1rem; border-radius: .5rem; }

/* --- Page « Préparez votre transfert » (transfers/new.html) --------------- */
/* Refonte du 2026-10-14 d'après la maquette : fond bleuté très clair, carte du
   formulaire en quatre étapes et résumé à droite à dominante vert clair (une
   colonne sous 992 px, résumé sous le formulaire). Chaque état (sens choisi,
   moyen choisi, moyen indisponible, blocage) est indiqué par une forme ou un
   texte, jamais par la couleur seule. */
body:has(.sc-transfer) main { background: var(--sc-surface); }
.sc-transfer { max-width: 75rem; margin-inline: auto; }
.sc-transfer__intro { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; }
.sc-transfer__icon {
  flex: none; width: 3.25rem; height: 3.25rem; display: grid; place-items: center; border-radius: 1rem;
  color: var(--sc-navy-700); background: #fff; border: 1px solid #e3e8ef; box-shadow: 0 .35rem 1rem rgba(11, 31, 58, .06);
}
.sc-transfer__icon svg { width: 1.5rem; height: 1.5rem; }
@media (max-width: 575.98px) { .sc-transfer__icon { width: 2.6rem; height: 2.6rem; border-radius: .8rem; } }
.sc-transfer__title { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.1rem); font-weight: 800; color: var(--sc-navy-800); margin-bottom: .35rem; }
.sc-transfer__lead { color: var(--sc-text-muted); font-size: 1rem; max-width: 44rem; }
.sc-transfer__grid { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 992px) { .sc-transfer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); } }
.sc-transfer__card, .sc-transfer__summary {
  background: #fff; border: 1px solid #e6ebf2; border-radius: 1.25rem; box-shadow: 0 .5rem 1.5rem rgba(11, 31, 58, .06);
}
.sc-transfer__card { padding: 1.25rem 1rem; min-width: 0; }
@media (min-width: 576px) { .sc-transfer__card { padding: 1.75rem 2rem; } }

/* Étapes numérotées. */
.sc-tstep { border: 0; margin: 0; padding: 0 0 1.5rem; min-width: 0; }
.sc-tstep + .sc-tstep { border-top: 1px solid #eef2f7; padding-top: 1.5rem; }
.sc-tstep__title { display: flex; align-items: center; gap: .65rem; float: none; width: auto; font-size: 1.1rem; font-weight: 800; color: var(--sc-navy-800); margin-bottom: 1rem; }
.sc-tstep__num {
  width: 1.9rem; height: 1.9rem; flex: none; display: grid; place-items: center; border-radius: 50%;
  font-size: .9rem; color: #fff; background: var(--sc-navy-700);
}
.sc-tstep__label { font-weight: 600; color: var(--sc-navy-800); }
.sc-transfer .form-control { min-height: 48px; border-radius: .7rem; border-color: #d6dde8; }
.sc-transfer .input-group > .form-control { border-radius: 0; }
.sc-transfer .input-group > :first-child { border-top-left-radius: .7rem; border-bottom-left-radius: .7rem; }
.sc-transfer .input-group > :last-child { border-top-right-radius: .7rem; border-bottom-right-radius: .7rem; }

/* 1. Sens du transfert : deux grandes cartes, rond de sélection rempli + cadre. */
.sc-route-choice { display: grid; gap: .75rem; }
@media (min-width: 576px) { .sc-route-choice { grid-template-columns: 1fr 1fr; } }
.sc-route-option {
  position: relative; display: grid; align-content: start; gap: .3rem; min-height: 44px; padding: 1rem 1rem 1rem 3rem; border-radius: 1rem; cursor: pointer;
  border: 2px solid #e3e8ef; background: #fff; transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.sc-route-option:hover { border-color: #b9c6d8; }
.sc-route-option__radio {
  position: absolute; left: 1rem; top: 1.1rem; width: 1.25rem; height: 1.25rem; border-radius: 50%;
  border: 2px solid #a9b6c8; background: #fff;
}
.btn-check:checked + .sc-route-option { border-color: var(--sc-navy-700); background: #f1f6fd; box-shadow: 0 .35rem 1rem rgba(19, 49, 92, .1); }
.btn-check:checked + .sc-route-option .sc-route-option__radio { border-color: var(--sc-navy-700); box-shadow: inset 0 0 0 .22rem #fff; background: var(--sc-navy-700); }
.btn-check:focus-visible + .sc-route-option { outline: 3px solid var(--sc-green-300); outline-offset: 2px; }
.sc-route-option__flags { display: inline-flex; align-items: center; gap: .45rem; color: var(--sc-text-muted); }
.sc-route-option__flags img { border-radius: 3px; outline: 1px solid rgba(11, 31, 58, .15); outline-offset: -1px; }
.sc-route-option__name { font-weight: 800; font-size: 1.05rem; color: var(--sc-navy-800); }
.sc-route-option__cur { font-size: .85rem; font-weight: 700; color: var(--sc-navy-700); }
.sc-route-option__text { font-size: .85rem; color: var(--sc-text-muted); }

/* 2. Montant : devise intégrée au champ. */
.sc-amount .form-control { font-size: 1.2rem; font-weight: 700; color: var(--sc-navy-800); }
.sc-amount .input-group-text { min-width: 4.75rem; justify-content: center; font-weight: 800; color: var(--sc-navy-800); background: var(--sc-surface); border-color: #d6dde8; }
.sc-transfer__error { color: #b02a37; margin-top: .35rem; }
.sc-transfer__error::before { content: "⚠ "; }
.sc-transfer__empty { margin: .5rem 0 0; padding: .5rem .75rem; border-radius: .6rem; color: #664d03; background: #fff3cd; }
.sc-transfer__empty::before { content: "⚠ "; }

/* 3. Moyens : deux zones (paiement bleuté, réception verte) de cartes à choisir. */
.sc-pickgroups { display: grid; gap: 1rem; }
@media (min-width: 768px) { .sc-pickgroups { grid-template-columns: 1fr 1fr; } }
.sc-pickgroup {
  --sc-pick-accent: var(--sc-navy-700); --sc-pick-soft: #eef4fc;
  min-width: 0; margin: 0; padding: .85rem; border-radius: 1rem; border: 1px solid #dfe7f3; background: #f6f9fd;
}
.sc-pickgroup--receive { --sc-pick-accent: var(--sc-green-700); --sc-pick-soft: #e8f7ee; border-color: #cfeedb; background: #f2fbf5; }
/* Légende flottante : dans le cadre du groupe, jamais posée sur sa bordure. */
.sc-pickgroup__head { display: flex; align-items: flex-start; gap: .65rem; float: left; width: 100%; margin-bottom: .85rem; padding: 0; font-size: 1rem; }
.sc-pickgroup__head + * { clear: left; }
.sc-pickgroup__icon {
  flex: none; width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border-radius: .65rem;
  color: var(--sc-pick-accent); background: #fff; box-shadow: 0 .15rem .4rem rgba(11, 31, 58, .08);
}
.sc-pickgroup__icon svg { width: 1.2rem; height: 1.2rem; }
.sc-pickgroup__title { display: block; font-weight: 800; color: var(--sc-navy-800); }
.sc-pickgroup__hint { display: block; font-size: .875rem; color: var(--sc-text-muted); }
/* Pays et devise du panneau (mis à jour par le script au changement de sens). */
.sc-pickgroup__place {
  display: inline-flex; align-items: center; gap: .35rem; margin-top: .4rem; padding: .15rem .55rem; border-radius: 999px;
  font-size: .8rem; font-weight: 700; color: var(--sc-navy-800); background: #fff; border: 1px solid #dfe7f3;
}
.sc-pickgroup--receive .sc-pickgroup__place { border-color: #cfeedb; }
.sc-pickgroup__place img { width: 1.1rem; height: auto; border-radius: 2px; box-shadow: 0 0 0 1px rgba(11, 31, 58, .12); }
/* Moyens indisponibles : à part, sous les choix possibles. */
.sc-picks-off { margin-top: .85rem; padding-top: .75rem; border-top: 1px dashed #c9d2de; }
.sc-picks-off__title { margin: 0 0 .5rem; font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #4f5b6b; }
.sc-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 6.5rem), 1fr)); gap: .6rem; }
.sc-pick { position: relative; min-width: 0; }
.sc-pick[hidden] { display: none; }
.sc-pick__input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.sc-pick__card {
  position: relative; height: 100%; min-height: 5.25rem; display: grid; justify-items: center; align-content: center; gap: .35rem;
  padding: .75rem .6rem .7rem 2.1rem; margin: 0; border-radius: .85rem; cursor: pointer; text-align: center;
  border: 2px solid #e3e8ef; background: #fff; transition: border-color .2s ease, box-shadow .2s ease;
}
.sc-pick__card:hover { border-color: #b9c6d8; }
.sc-pick__radio {
  position: absolute; left: .65rem; top: 50%; translate: 0 -50%; width: 1.1rem; height: 1.1rem; border-radius: 50%;
  border: 2px solid #a9b6c8; background: #fff;
}
.sc-pick__logo { width: 100%; max-width: 6.5rem; height: 2.1rem; display: grid; place-items: center; }
.sc-pick__logo img { max-width: 100%; max-height: 2.1rem; object-fit: contain; }
.sc-pick__logo--icon { color: var(--sc-pick-accent); }
.sc-pick__logo--icon svg { width: 1.75rem; height: 1.75rem; }
.sc-pick__name { font-size: .875rem; font-weight: 700; color: var(--sc-navy-800); line-height: 1.2; overflow-wrap: anywhere; }
.sc-pick__input:checked + .sc-pick__card { border-color: var(--sc-pick-accent); background: var(--sc-pick-soft); box-shadow: 0 .3rem .9rem rgba(11, 31, 58, .1); }
.sc-pick__input:checked + .sc-pick__card .sc-pick__radio { border-color: var(--sc-pick-accent); background: var(--sc-pick-accent); box-shadow: inset 0 0 0 .2rem #fff; }
.sc-pick__input:focus-visible + .sc-pick__card { outline: 3px solid var(--sc-green-300); outline-offset: 2px; }
/* Sélectionné : en plus du rond rempli et du cadre, une coche dans l'angle
   (forme, pas seulement couleur). Le lecteur d'écran annonce le bouton radio coché. */
.sc-pick__input:checked + .sc-pick__card::after {
  content: ""; position: absolute; top: .4rem; right: .4rem; width: 1.15rem; height: 1.15rem; border-radius: 50%;
  background: var(--sc-pick-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M4 8.5l2.5 2.5L12 5.5'/%3E%3C/svg%3E") center / .8rem no-repeat;
}
.sc-pick--off .sc-pick__card { cursor: not-allowed; border-style: dashed; background: #f7f8fa; }
.sc-pick--off .sc-pick__card:hover { border-color: #e3e8ef; }
.sc-pick--off .sc-pick__logo { filter: grayscale(1); opacity: .5; }
.sc-pick--off .sc-pick__radio { background: #eef1f5; border-color: #c9d2de; }
.sc-pick__state { font-size: .8rem; font-weight: 700; color: #6b4a00; }
.sc-pick__state::before { content: "⊘ "; }
/* Détail du moyen choisi (paiement ou réception), mis à jour sans rechargement. */
.sc-pick-detail { margin: .65rem 0 0; padding: .55rem .75rem; border-radius: .6rem; color: #0c4a6e; background: #e0f2fe; }
.sc-pick-detail::before { content: "ⓘ "; }
.sc-picks-off__text { margin: -.25rem 0 .5rem; color: #4f5b6b; }
/* Filtre par sens avant JavaScript (le script fait de même avec « hidden »). */
.sc-transfer__grid:has([data-direction][data-from="RU"]:checked) [data-group="payment"] .sc-pick:not([data-country="RU"]),
.sc-transfer__grid:has([data-direction][data-from="RU"]:checked) [data-group="payout"] .sc-pick:not([data-country="SN"]),
.sc-transfer__grid:has([data-direction][data-from="SN"]:checked) [data-group="payment"] .sc-pick:not([data-country="SN"]),
.sc-transfer__grid:has([data-direction][data-from="SN"]:checked) [data-group="payout"] .sc-pick:not([data-country="RU"]) { display: none; }

/* 4. Bénéficiaire : indicatif du pays d'arrivée devant le numéro. */
.sc-phone__dial { gap: .4rem; font-weight: 700; color: var(--sc-navy-800); background: var(--sc-surface); border-color: #d6dde8; }
.sc-phone__dial img { border-radius: 2px; outline: 1px solid rgba(11, 31, 58, .15); outline-offset: -1px; }
.sc-ack { margin-top: 1.1rem; padding: .85rem 1rem; border-radius: .85rem; background: var(--sc-surface); border: 1px solid #e6ebf2; }
.sc-ack .mb-3 { margin-bottom: 0 !important; }
.sc-ack + p { margin-top: .85rem; }

.sc-transfer__submit { padding-top: 1.25rem; border-top: 1px solid #eef2f7; }
.sc-transfer__submit .btn { min-height: 52px; border-radius: .85rem; font-weight: 700; }
.sc-transfer__submit .btn:disabled { opacity: .55; }
.sc-transfer__blocked { margin: 0 0 .85rem; padding: .6rem .8rem; border: 1px solid #f3d9a4; border-radius: .7rem; background: #fff8e8; color: #6b4a00; }

/* Résumé : collant sur ordinateur, à dominante vert clair. */
.sc-transfer__summary { padding: 1.25rem; min-width: 0; border-color: #d3eedd; background: linear-gradient(180deg, #f1fbf5 0, #fff 9rem); }
@media (min-width: 576px) { .sc-transfer__summary { padding: 1.5rem; } }
@media (min-width: 992px) { .sc-transfer__summary { position: sticky; top: 6rem; } }
.sc-summary__head { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.1rem; }
.sc-summary__icon {
  flex: none; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: 50%;
  color: var(--sc-green-700); background: #dff4e7;
}
.sc-summary__icon svg { width: 1.3rem; height: 1.3rem; }
.sc-transfer__summary-title { font-size: 1.2rem; font-weight: 800; color: var(--sc-navy-800); margin: 0; }
.sc-summary__kind { font-size: .875rem; color: var(--sc-text-muted); }
.sc-route {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .9rem; margin-bottom: 1rem; border-radius: 1rem; background: #fff; border: 1px solid #e6ebf2;
}
.sc-route__end { display: grid; gap: .15rem; min-width: 0; flex: 1 1 0; }
.sc-route__end:last-child { text-align: right; justify-items: end; }
.sc-route__country { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; }
.sc-route__end:last-child .sc-route__country { flex-direction: row-reverse; }
.sc-route__country img { border-radius: 2px; outline: 1px solid rgba(11, 31, 58, .15); outline-offset: -1px; }
.sc-route__country strong { color: var(--sc-navy-800); }
.sc-route__label { font-size: .85rem; color: var(--sc-text-muted); }
.sc-route__amount { font-size: 1.05rem; font-weight: 800; color: var(--sc-navy-800); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sc-route__amount--net { color: var(--sc-green-700); }
.sc-route__arrow {
  flex: none; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%;
  color: var(--sc-navy-700); background: #eef4fc;
}
.sc-route__arrow svg { width: 1.1rem; height: 1.1rem; }
/* Très petits écrans : départ puis arrivée l'un sous l'autre, montants sur une ligne. */
@media (max-width: 429.98px) {
  .sc-route { flex-direction: column; align-items: stretch; }
  .sc-route__end:last-child { text-align: left; justify-items: start; }
  .sc-route__end:last-child .sc-route__country { flex-direction: row; }
  .sc-route__arrow { align-self: center; rotate: 90deg; }
}
.sc-summary__rows > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-block: .45rem; }
.sc-summary__rows dt { font-weight: 500; font-size: .92rem; color: var(--sc-text-muted); }
.sc-summary__rows dd { margin: 0; font-weight: 700; color: var(--sc-navy-800); text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sc-summary__rows > .sc-summary__total { border-top: 1px solid #e3e8ef; margin-top: .25rem; padding-top: .65rem; }
.sc-summary__total dt, .sc-summary__total dd { color: var(--sc-navy-800); font-weight: 800; font-size: 1rem; }
.sc-summary__rows > .sc-summary__rate { border-top: 1px dashed #d6dde8; margin-top: .35rem; padding-top: .65rem; }
.sc-summary__rows > .sc-summary__net { margin-top: .35rem; padding: .65rem .8rem; border-radius: .75rem; background: #e8f7ee; }
.sc-summary__net dt { color: var(--sc-green-700); font-weight: 700; }
.sc-summary__net dd { font-size: 1.15rem; font-weight: 800; color: var(--sc-green-700); }
.sc-summary__methods { margin-bottom: .5rem; padding: .5rem .75rem; border-radius: .6rem; background: #f4f7fb; }
.sc-summary__methods > div { display: flex; justify-content: space-between; gap: 1rem; padding-block: .2rem; font-size: .9rem; }
.sc-summary__methods dt { font-weight: 500; color: var(--sc-text-muted); }
.sc-summary__methods dd { margin: 0; font-weight: 700; color: var(--sc-navy-800); text-align: right; }
.sc-summary__rows dd.sc-summary__off { font-size: .92rem; font-weight: 600; color: var(--sc-text-muted); }
.sc-summary__source { margin-top: 1rem; padding: .85rem .9rem; border-radius: .85rem; background: var(--sc-surface); color: var(--sc-text-muted); }
.sc-summary__alert {
  display: flex; gap: .7rem; margin-top: .85rem; padding: .8rem .9rem; border-radius: .85rem;
  border: 1px solid #f3c98b; background: #fff6e6; color: #6b4a00; font-size: .875rem;
}
.sc-summary__alert-icon {
  flex: none; width: 1.6rem; height: 1.6rem; display: grid; place-items: center; border-radius: 50%;
  font-weight: 800; color: #fff; background: #c2410c;
}
.sc-summary__alert strong { display: block; color: #8a3b00; }
.sc-transfer__rules { margin-top: .85rem; padding: .85rem .9rem .85rem 2rem; border-radius: .85rem; background: #f6f9fd; color: var(--sc-text-muted); }
.sc-transfer__rules li + li { margin-top: .3rem; }
/* Cible tactile d'au moins 44 px pour un bouton isolé (récapitulatif, tableau de bord). */
.sc-touch { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
/* Récapitulatif : libellé à gauche, montant à droite ; un montant (chiffres, devise,
   taux « 1 RUB = … XOF ») ne se coupe jamais, il passe à la ligne d'un seul bloc. */
.sc-recap-rows > div { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .15rem 1rem; padding-block: .4rem; }
.sc-recap-rows dt { font-weight: 500; min-width: 0; }
.sc-recap-rows dd { margin: 0 0 0 auto; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sc-recap-rows > .sc-recap-rows__strong dt, .sc-recap-rows > .sc-recap-rows__strong dd { font-weight: 700; }
.sc-recap-rows > .sc-recap-rows__note { padding-top: 0; }
.sc-recap-rows > .sc-recap-rows__note dd { margin: 0; text-align: left; white-space: normal; }
/* Encart secondaire du récapitulatif (transfers/summary.html). */
.sc-card--secondary { background: var(--sc-surface); box-shadow: none; }
/* Indication de démonstration compacte du header (pages sans bandeau, sous 992 px) :
   seule indication visible ; celle du menu replié est alors masquée (pas de doublon). */
.sc-demo-compact {
  flex-basis: 100%; display: flex; align-items: center; gap: .45rem; margin: .5rem 0 0;
  font-size: .875rem; font-weight: 600; color: #7a5200;
}
.sc-demo-compact .sc-dot { width: .45rem; height: .45rem; background: #d29b00; }
@media (min-width: 992px) { .sc-demo-compact { display: none; } }
/* Variante en tête du contenu (page de transfert) : visible à toutes les largeurs. */
.sc-demo-compact--page {
  align-items: flex-start; margin: 0 0 1rem; padding: .6rem .85rem; border-radius: .75rem;
  background: #fff8e6; border: 1px solid #f3d9a4; color: #6b4a00; font-weight: 500;
}
.sc-demo-compact--page .sc-dot { margin-top: .5rem; }
@media (min-width: 992px) { .sc-demo-compact.sc-demo-compact--page { display: flex; } }
.sc-transfer__asr { margin-top: 1.5rem; }
@media (prefers-reduced-motion: reduce) { .sc-route-option, .sc-pick__card { transition: none; } }
/* Bouton « Copier » (transfers/detail.html) : résultat écrit en toutes lettres,
   avec un symbole ; la couleur ne fait que le renforcer. */
.sc-copy-status[data-state="ok"] { color: var(--sc-green-700); font-weight: 600; }
.sc-copy-status[data-state="error"] { color: #b02a37; font-weight: 600; }
.sc-copy-status[data-state="error"]::before { content: "⚠ "; }
/* Coordonnée de paiement du moyen choisi et récapitulatif du bénéficiaire
   (formulaire de transfert, 2026-10-18). Logos en couleur, proportions conservées. */
.sc-coords { margin-top: .75rem; }
.sc-coord { margin-top: .75rem; padding: .85rem 1rem; border: 1px solid #cfe3d6; border-radius: .75rem; background: #f6fbf8; }
.sc-coord[hidden] { display: none; }
.sc-coord__head { display: flex; align-items: center; gap: .65rem; margin: 0 0 .5rem; font-weight: 600; }
.sc-coord__head .sc-pick__logo { width: auto; max-width: 5.5rem; height: 1.75rem; flex: none; }
.sc-coord__head .sc-pick__logo img { max-height: 1.75rem; }
.sc-coord__head [hidden] { display: none; }
.sc-coord__rows { margin: 0 0 .6rem; }
.sc-coord__rows > div { display: flex; flex-wrap: wrap; gap: .1rem .75rem; padding: .2rem 0; }
.sc-coord__rows dt { min-width: 9.5rem; font-weight: 500; color: #475569; }
.sc-coord__rows dd { margin: 0; overflow-wrap: anywhere; }
.sc-coord__number { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sc-coord__note { margin-top: .5rem; color: #475569; }

/* Convertisseur : dernière mise à jour du taux appliqué ; lien Google juste dessous. */
.sc-rate-card__updated { color: #2c3e57; }
.sc-rate-google a { color: var(--sc-green-700); font-weight: 600; }

/* Bouton WhatsApp flottant du support (2026-10-18). Coin inférieur droit, au-dessus
   du contenu mais sous les menus ; zone de 52 px. Sur mobile, masqué pendant une
   saisie (clavier ouvert) pour ne couvrir ni champ ni bouton, et le pied de page
   réserve sa hauteur pour que la fin de page reste lisible. */
.sc-wa-float { position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 1030; }
.sc-wa-float__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-width: 52px; height: 52px; padding: 0 1.05rem 0 .9rem; border: 0; border-radius: 999px;
  color: #fff; background: #0f7a40; font-weight: 700; text-decoration: none;
  box-shadow: 0 .5rem 1.25rem rgba(3, 25, 50, .25);
}
.sc-wa-float__btn svg { width: 1.5rem; height: 1.5rem; flex: none; }
.sc-wa-float__btn:hover, .sc-wa-float__btn:focus-visible { color: #fff; background: #0e6f3a; }
.sc-wa-float__btn:focus-visible { outline: 3px solid #86efac; outline-offset: 3px; }
.sc-wa-float .sc-support-menu { margin-bottom: .5rem !important; }
/* Effacé tant qu'un bouton de validation passe dessous (static/js/senechange.js). */
.sc-wa-float--away { visibility: hidden; }
.sc-wa-float--missing {
  max-width: 18rem; padding: .5rem .75rem; border-radius: .6rem;
  border: 1px dashed #b45309; background: #fffbeb; color: #78350f;
}
@media (max-width: 575.98px) {
  .sc-wa-float__btn { padding: 0; width: 52px; }
  .sc-wa-float__text { display: none; }
  .sc-footer { padding-bottom: 4.5rem; }
}
@media (max-width: 991.98px) {
  body:has(:is(input:not([type="radio"]):not([type="checkbox"]), textarea, select):focus) .sc-wa-float { visibility: hidden; }
}
@media print { .sc-wa-float { display: none; } }

/* Total à payer : l'information principale de la demande (montants figés, serveur). */
.sc-total { border-top: 4px solid var(--sc-green-600); }
.sc-total__label { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sc-text-muted); }
.sc-total__amount {
  display: inline-block; font-size: clamp(2rem, 9vw, 2.75rem); font-weight: 800; line-height: 1.1;
  color: var(--sc-navy-800); font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
  padding-bottom: .25rem; border-bottom: 3px solid var(--sc-green-600);
}
.sc-total__rows > div { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-top: 1px solid #e8edf2; }
.sc-total__rows dt { font-weight: 500; color: var(--sc-text-muted); }
.sc-total__rows dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.sc-total__rows-total dt, .sc-total__rows-total dd { font-weight: 800; color: var(--sc-navy-800); }
/* Instructions saisies par l'équipe pour ce compte. */
.sc-paynote { padding: .65rem .85rem; border-left: 4px solid #0d6efd; background: #f1f6ff; border-radius: .5rem; }
.sc-timeline__code { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }