/* ═══════════════════════════════════════════════════════════
   WANILO EXPRESS+ : Services (socle v2)
   Spécifique à services/index.html. Charge APRÈS css/v2/tokens.css
   et css/v2/ui.css (variables --navy-900/--gold-500/--r-btn/...,
   composants .v2-nav/.v2-ann/.v2-btn/.v2-sec-title/.v2-chip/
   .v2-field/.v2-status/.v2-sheet). Toute valeur trace vers un
   token de css/v2/tokens.css, voir tableau de sourcing DESIGN.md.

   Ce fichier redéfinit aussi les classes consommées par
   services/js/*.js (chip/field/btn/badge/empty…) : ces classes
   NE SONT PLUS fournies par l'ancien css/ui.css (retiré de cette
   page), elles sont réimplémentées ici avec les tokens v2, sans
   renommer aucun sélecteur utilisé par le JS (deposit.js,
   withdraw.js, bills.js, tracking.js, pronos.js, account.js, ui.js).
   ═══════════════════════════════════════════════════════════ */

/* ═══ RESET / BASE ═══ */

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 25px;
  color: var(--ink-2);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  padding-bottom: calc(64px + var(--sp-6) + env(safe-area-inset-bottom, 0px));
}

img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
input, select, textarea { font-size: 16px; } /* empêche le zoom iOS au focus */
:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ═══ ICÔNES, mêmes proportions que .v2-ico (css/v2/ui.css) ═══ */

.ico { width: 22px; height: 22px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ico--sm { width: 18px; height: 18px; }
.ico--lg { width: 26px; height: 26px; }

/* ═══ BOUTONS : hauteur 52, rayon 12, jamais de pilule ═══ */

.btn {
  height: var(--h-btn);
  border-radius: var(--r-btn);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0 var(--sp-5);
  border: none;
  cursor: pointer;
  font: 500 17px/1 var(--font);
  white-space: nowrap;
}
.btn--primary { background: var(--brand-fill); color: #fff; }
.btn--primary:hover:not(:disabled) { background: var(--navy-700); }
.btn--secondary { background: var(--canvas); border: 1px solid var(--brand-ink); color: var(--brand-ink); }
.btn--secondary:hover:not(:disabled) { background: var(--canvas-2); }
/* L'or signale (DESIGN.md §1) : réservé à l'action qui débloque le parcours.
   Couleurs fixes, identiques en mode sombre, où le navy sur or garde son contraste. */
.btn--gold { background: var(--gold-500); color: var(--navy-900); font-weight: 600; }
.btn--gold:hover:not(:disabled) { background: var(--gold-600); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn--block { width: 100%; }

/* ═══ CHAMPS ═══ */

.field {
  width: 100%;
  height: var(--h-field);
  border-radius: var(--r-sm);
  border: 1px solid var(--hairline);
  padding: 0 var(--sp-3);
  font: 400 16px/1 var(--font);
  color: var(--ink);
  background: var(--canvas);
}
.field:focus { outline: none; border-color: var(--action); }
.field::placeholder { color: var(--ink-3); }
/* Champ refuse : posee par WaniloUI.revealError, retiree des la premiere
   frappe. Le contour seul ne suffit pas pour qui distingue mal le rouge,
   d'ou le halo qui epaissit visiblement la bordure. */
.field.is-invalid,
.chip.is-invalid,
.pay-method.is-invalid {
  border-color: var(--err);
  box-shadow: 0 0 0 3px rgba(215, 0, 21, .12);
}
.field-label { display: block; font: 400 14px/20px var(--font); color: var(--ink-2); margin-bottom: var(--sp-1); }
.field-group { display: flex; flex-direction: column; }

/* ═══ CHIPS ═══ */

.chips { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.chip {
  height: 40px;
  padding: 0 var(--sp-4);
  border-radius: var(--r-btn);
  border: 1px solid var(--hairline);
  background: var(--canvas);
  color: var(--ink-2);
  font: 500 15px/1 var(--font);
  display: inline-flex;
  align-items: center;
  position: relative;
  cursor: pointer;
}
.chip:hover { border-color: var(--brand-ink); }
/* Service coupé depuis l'admin. Affiché plutôt que masqué : un service qui
   disparaît sans explication fait croire à une panne du site. */
.chip:disabled {
  opacity: .45;
  cursor: not-allowed;
  text-decoration: line-through;
}
.chip:disabled:hover { border-color: var(--hairline); }
/* Sélection = navy plein, texte blanc (choix propriétaire 02/09/2026, plus de trait or). */
.chip.is-active {
  border-color: var(--brand-fill);
  background: var(--brand-fill);
  color: #fff;
  font-weight: 600;
}

/* ═══ PILULES DE STATUT (tracking.js/pronos.js : .badge/.badge--ok/--warn/--err) ═══
   Mêmes tokens que .v2-status (css/v2/ui.css §5), noms conservés (badge, pas
   v2-status) car imposés par le HTML généré côté JS. */
.badge {
  display: inline-flex; align-items: center;
  font: 700 12px/16px var(--font);
  padding: 4px 10px; border-radius: var(--r-pill);
  white-space: nowrap;
}
.badge--ok   { color: var(--ok);   background: #E8F7EE; }
.badge--warn { color: var(--warn); background: var(--warn-bg); }
.badge--err  { color: var(--err);  background: #FDECEC; }

/* ═══ ÉTAT VIDE ═══ */

.empty { text-align: center; padding: var(--sp-8) var(--sp-3); color: var(--ink-3); }
.empty__ico { display: flex; justify-content: center; margin-bottom: var(--sp-3); opacity: .5; }
.empty__t { font: 600 16px/20px var(--font); color: var(--ink-2); margin-bottom: 4px; }
.empty__s { font: 400 14px/20px var(--font); }

/* ═══ TIROIR (menu compte) + VOILE + TOAST ═══ */

.veil {
  position: fixed; inset: 0; z-index: 160;
  background: rgba(7, 29, 63, .45);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
.veil.is-open { opacity: 1; pointer-events: auto; }
.veil[hidden] { display: none; }

.drawer {
  position: fixed; z-index: 161;
  left: 0; right: 0; bottom: 0; height: 80dvh; max-height: 80dvh;
  background: var(--canvas);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: var(--shadow-sheet);
  display: flex; flex-direction: column;
  transform: translateY(100%);
  transition: transform .3s ease;
}
.drawer.is-open { transform: translateY(0); }
.drawer[hidden] { display: none; }
.drawer__hd { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-5); border-bottom: 1px solid var(--hairline); flex-shrink: 0; }
.drawer__title { font: 600 19px/24px var(--font); color: var(--ink); }
.drawer__x { width: 32px; height: 32px; display: grid; place-items: center; background: none; border: none; color: var(--ink-2); cursor: pointer; }
.drawer__x svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
.drawer__body { flex: 1; overflow-y: auto; padding: 0 var(--sp-5); }

@media (min-width: 768px) {
  .drawer { left: auto; top: 0; bottom: 0; right: 0; width: 400px; height: 100dvh; max-height: none; border-radius: 0; border-left: 1px solid var(--hairline); box-shadow: none; transform: translateX(100%); }
  .drawer.is-open { transform: translateX(0); }
}

.toast {
  position: fixed; left: 50%; bottom: 90px; z-index: 300;
  transform: translate(-50%, 12px);
  background: var(--navy-900); color: #fff;
  /* Liseré clair + ombre : le toast reste lisible sur le hero navy (copie du code promo). */
  border: 1px solid rgba(255, 255, 255, .28); box-shadow: var(--shadow-sheet);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-pill);
  font: 500 14px/1 var(--font);
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  white-space: nowrap;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ═══ BANDE D'ANNONCES ═══ */

.ann {
  background: var(--navy-900); color: #fff;
  height: 36px;
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 0 var(--container-pad);
  overflow: hidden;
}
.ann__pill {
  background: var(--gold-500); color: var(--navy-900);
  font: 700 12px/16px var(--font);
  padding: 2px 8px; border-radius: var(--r-xs);
  flex-shrink: 0; white-space: nowrap;
}
.ann__track { min-width: 0; overflow: hidden; }
.ann__inner { display: flex; align-items: center; gap: var(--sp-6); }
.ann__item { font: 400 13px/18px var(--font); white-space: nowrap; }
/* Mobile : les deux messages ne tiennent pas sur une ligne, la piste défile
   (bande défilante historique) au lieu d'être tronquée en deux morceaux. */
@media (max-width: 767px){
  .ann__inner { width: max-content; animation: ann-scroll 22s linear infinite; }
  .ann__track:hover .ann__inner, .ann__track:active .ann__inner { animation-play-state: paused; }
  @keyframes ann-scroll { from { transform: translateX(100%); } to { transform: translateX(-100%); } }
  @media (prefers-reduced-motion: reduce){
    .ann__inner { animation: none; }
    .ann__hint { display: none; }
  }
}
.v2-nav .v2-nav__name { white-space: nowrap; }

/* En dessous de 420 px, le nom de marque est retiré et le sigle WE+ reste seul.
   La barre d'en-tête mesure 385,9 px de contenu incompressible (24 de marge,
   180,2 de logo dont 140,2 pour ce nom, 17 d'espacement, 140,7 d'actions, 24 de
   marge) : sur un écran de 360 px, le plus répandu sur les Android d'entrée de
   gamme, elle débordait de 26 px et faisait apparaître une barre de défilement
   horizontale sur tout l'espace. Les trois blocs ont pourtant flex-shrink: 1,
   mais leur min-width: auto les empêche de rétrécir. Le nom reste annoncé aux
   lecteurs d'écran par l'aria-label du lien. */
@media (max-width: 420px) {
  .v2-nav .v2-nav__name { display: none; }
}
/* Code promo copiable : bouton nu, souligné pointillé pour signaler l'action (data-copy-target, ui.js). */
.ann__code {
  font: 700 13px/18px var(--font); color: var(--gold-500);
  background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline dotted; text-underline-offset: 3px;
}
/* Lien de parrainage : même or que le code, mais souligné plein pour le
   distinguer du bouton copier voisin, souligné pointillé. */
.ann__link {
  font: 700 13px/18px var(--font); color: var(--gold-500);
  text-decoration: underline; text-underline-offset: 3px;
  margin-left: 4px; white-space: nowrap;
}
.ann__hint { color: rgba(255, 255, 255, .7); }

/* ═══ NAVIGATION (v2-nav, marque + boutique + compte) ═══ */

.svc-hdr__bar { max-width: var(--container); margin: 0 auto; padding: 0 var(--container-pad); display: flex; align-items: center; gap: var(--sp-4); height: 100%; }
.svc-hdr__logo { display: flex; align-items: center; gap: var(--sp-2); flex-grow: 1; }
.svc-hdr__actions { display: flex; align-items: center; gap: var(--sp-4); }
.svc-hdr__btn {
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 14px/1 var(--font); color: var(--brand-ink);
}
.svc-hdr__account {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: none; border: none; color: var(--brand-ink); cursor: pointer;
}

.svc-hdr__nav { display: none; }

/* ═══ CONTENU PRINCIPAL ═══ */

.svc-main { max-width: var(--container); margin: 0 auto; padding: var(--sp-5) var(--container-pad) var(--sp-6); }
.view[hidden] { display: none; }

.svc-intro { margin-bottom: var(--sp-5); }
.svc-intro__q { font: 600 28px/32px var(--font); letter-spacing: -.2px; color: var(--ink); margin-bottom: 6px; }
.svc-intro__s { font: 400 15px/20px var(--font); color: var(--ink-3); }

/* ═══ HERO (accueil, navy) ═══ */

.svc-hero { background: var(--navy-900); color: #fff; padding: var(--sp-6) var(--container-pad); }
/* Trois blocs empiles sur telephone : titre, carte de depot rapide, puis
   boutons et garanties. La carte etait purement et simplement masquee sous
   1024 px, si bien que l'accueil mobile n'offrait aucun champ avant
   3 489 px de defilement, sur un site ou presque tout le trafic est mobile.
   L'ordre DOM place le pied avant la carte pour que la grille de bureau
   reste a deux colonnes : order retablit l'ordre visuel ici. */
.svc-hero__wrap { max-width: var(--container); margin: 0 auto; display: flex; flex-direction: column; }
.svc-hero__head { order: 1; }
.svc-hero__card { order: 2; }
.svc-hero__foot { order: 3; margin-top: var(--sp-5); }
.svc-hero__kicker { font: 600 15px/1 var(--font); color: rgba(255, 255, 255, .85); margin-bottom: var(--sp-2); }
.svc-hero__title { font: 600 28px/32px var(--font); letter-spacing: -.3px; margin-bottom: var(--sp-3); }
.svc-hero__lead { font: 400 17px/24px var(--font); color: rgba(255, 255, 255, .8); margin-bottom: var(--sp-5); max-width: 560px; }
.svc-hero__tag {
  display: inline-flex; align-items: center;
  background: var(--gold-500); color: var(--navy-900);
  font: 700 15px/1 var(--font);
  padding: 8px 14px; border-radius: var(--r-sm);
  margin-bottom: var(--sp-5);
}
.svc-hero__row { display: flex; flex-direction: column; gap: var(--sp-3); }
.svc-hero__row .btn--primary { background: #fff; color: var(--navy-900); }
.svc-hero__row .btn--primary:hover { background: var(--canvas-2); }
.svc-hero__row .btn--secondary { background: transparent; border-color: #fff; color: #fff; }
.svc-hero__assure { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-5); font: 400 14px/1 var(--font); color: rgba(255, 255, 255, .85); }
.svc-hero__assure div { display: flex; align-items: center; gap: var(--sp-2); }
.svc-hero__assure .ico { color: var(--gold-500); width: 20px; height: 20px; }

.svc-hero__card {
  display: flex; flex-direction: column;
  background: var(--canvas); border-radius: var(--r-lg);
  padding: var(--sp-5); color: var(--ink);
  box-shadow: var(--shadow-product);
}
.svc-hero__card-hd { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.svc-hero__card .chips { margin-bottom: var(--sp-3); }
.svc-hero__card .field-group { margin-bottom: var(--sp-3); }
.svc-hero__card .amount-field { margin-bottom: var(--sp-3); }
.svc-hero__card #hq-go { margin-top: var(--sp-2); }
.svc-hero__card #hq-err:not(:empty) { margin-bottom: var(--sp-3); }

/* ═══ GRILLE D'INTENTIONS (tuiles) ═══ */

.intent-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }

.intent {
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-2);
  min-height: 132px;
  text-align: left; cursor: pointer;
  position: relative;
  background: var(--canvas);
}
.intent:hover { border-color: var(--brand-ink); }
.intent.is-active { border-color: var(--gold-500); border-width: 2px; padding: 15px; }

.intent__badge {
  position: absolute; top: 12px; right: 12px;
  background: var(--navy-900); color: #fff;
  font: 700 11px/1 var(--font);
  padding: 3px 8px; border-radius: var(--r-xs);
}
.intent__ico {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--canvas-2); color: var(--brand-ink);
  display: grid; place-items: center;
}
.intent.is-active .intent__ico { background: var(--gold-500); }
.intent__t { font: 600 17px/20px var(--font); color: var(--ink); }
.intent__s { font: 400 13px/18px var(--font); color: var(--ink-3); margin-top: -4px; }

/* ═══ LISTES (factures et abonnements, comment ça marche) ═══ */

.svc-list { display: flex; flex-direction: column; border: 1px solid var(--hairline); border-radius: var(--r-lg); overflow: hidden; margin-bottom: var(--sp-6); }
.svc-row {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--divider);
  background: none; border-left: none; border-right: none; border-top: none;
  width: 100%; text-align: left; cursor: pointer;
}
.svc-row:last-child { border-bottom: none; }
.svc-row__ico {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: var(--r-sm);
  background: var(--canvas-2); color: var(--brand-ink);
  display: grid; place-items: center;
}
.svc-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.svc-row__t { font: 600 15px/1 var(--font); color: var(--ink); }
.svc-row__s { font: 400 13px/18px var(--font); color: var(--ink-3); margin-top: 2px; }
.svc-row__chev { width: 18px; height: 18px; color: var(--ink-3); flex-shrink: 0; }

.svc-row--step { cursor: default; }
.svc-row__n {
  width: 28px; height: 28px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--navy-900); color: #fff;
  font: 700 13px/1 var(--font);
  display: grid; place-items: center;
}

/* ═══ BANDE "POURQUOI WANILO" (navy) ═══ */

.svc-band { background: var(--navy-900); color: #fff; padding: var(--sp-7) var(--container-pad); }
.svc-band__wrap { max-width: var(--container); margin: 0 auto; }
.svc-band .v2-sec-sub { margin-bottom: var(--sp-5); }
.svc-why { display: flex; flex-direction: column; gap: var(--sp-5); }
.svc-why__item { display: flex; gap: var(--sp-3); align-items: flex-start; }
.svc-why__ico {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--navy-700); color: var(--gold-500);
  display: grid; place-items: center;
}
.svc-why__t { font: 600 17px/1 var(--font); margin-bottom: 4px; }
.svc-why__s { font: 400 14px/20px var(--font); color: rgba(255, 255, 255, .75); }

/* ═══ PIED (accueil uniquement) ═══ */

.svc-ft { background: var(--navy-900); color: #fff; padding: var(--sp-7) var(--container-pad) var(--sp-6); border-top: 1px solid rgba(255, 255, 255, .12); }
.svc-ft__wrap { max-width: var(--container); margin: 0 auto; }
.svc-ft__logo { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.svc-ft__logo .v2-nav__mark { background: #fff; color: var(--navy-900); width: 36px; height: 36px; }
.svc-ft__logo b { font: 600 17px/1 var(--font); }
.svc-ft__slogan { font: 400 15px/1 var(--font); color: rgba(255, 255, 255, .75); margin-bottom: var(--sp-5); }
.svc-ft__wa {
  display: flex; align-items: center; gap: var(--sp-3);
  background: var(--navy-700); border-radius: var(--r-lg);
  padding: var(--sp-4); margin-bottom: var(--sp-4);
}
.svc-ft__wa .ico { color: #25D366; width: 26px; height: 26px; }
.svc-ft__wa b { display: block; font: 600 16px/1 var(--font); }
.svc-ft__wa span { font: 400 14px/1 var(--font); color: rgba(255, 255, 255, .8); }
.svc-ft__row { display: flex; gap: var(--sp-3); font: 400 14px/20px var(--font); color: rgba(255, 255, 255, .85); margin-bottom: var(--sp-3); }
.svc-ft__row .ico { color: rgba(255, 255, 255, .7); width: 20px; height: 20px; flex-shrink: 0; }
.svc-ft__links { border-top: 1px solid rgba(255, 255, 255, .15); padding-top: var(--sp-4); margin-top: 4px; display: flex; flex-direction: column; gap: var(--sp-3); font: 400 15px/1 var(--font); }
.svc-ft__links a { color: rgba(255, 255, 255, .9); }
.svc-ft__copy { font: 400 13px/1 var(--font); color: rgba(255, 255, 255, .5); margin-top: var(--sp-5); }

/* ═══ FORMULAIRE : ÉTAPES ═══ */

.svc-steps { display: flex; flex-direction: column; gap: var(--sp-6); }

.step { display: flex; flex-direction: column; gap: var(--sp-4); }
.step__hd { display: flex; align-items: center; gap: var(--sp-3); }
.step__n {
  width: 28px; height: 28px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--brand-fill); color: #fff;
  font: 700 14px/1 var(--font);
  display: grid; place-items: center;
}
.step__t { font: 600 17px/1 var(--font); color: var(--ink); }
.step__body { display: flex; flex-direction: column; gap: var(--sp-4); }

/* Montant : champ mis en avant, chiffres tabulaires (DESIGN.md §3) */
.amount-field {
  height: 64px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  background: var(--canvas);
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 0 var(--sp-4);
}
.amount-field__input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  font: 700 32px/1 var(--font);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.amount-field__unit { font: 600 15px/1 var(--font); color: var(--ink-3); }

/* ═══ MOYENS DE PAIEMENT ═══ */

.pay-methods { display: flex; flex-direction: column; gap: var(--sp-2); }

.pay-method {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  cursor: pointer; text-align: left;
}
.pay-method.is-active { border: 2px solid var(--navy-900); padding: 13px 15px; }

.pay-method__badge {
  width: 44px; height: 28px; flex-shrink: 0;
  border-radius: 6px;
  font: 700 11px/1 var(--font);
  display: grid; place-items: center;
}
.pay-method__badge--mtn  { background: #FFCB05; color: #1D1D1F; }
.pay-method__badge--moov { background: #0072BC; color: #fff; }
/* Vert Celtiis assombri : blanc sur #00A651 ne donnait que 3,19 de
   contraste pour un texte de 11 px, sous les 4,5 exiges. Le badge reste vert
   Celtiis, il devient lisible. Defaut present aussi en mode clair. */
.pay-method__badge--cel  { background: #00803E; color: #fff; }

.pay-method__info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pay-method__name { font: 600 15px/1 var(--font); color: var(--ink); }
.pay-method__code { font: 400 13px/1 var(--font); color: var(--ink-3); margin-top: 2px; }

.pay-method__chk {
  width: 22px; height: 22px; flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid var(--hairline);
  display: grid; place-items: center;
}
.pay-method.is-active .pay-method__chk { border-color: var(--brand-fill); background: var(--brand-fill); color: #fff; }
.pay-method__chk .ico { width: 14px; height: 14px; stroke-width: 3; }

/* ═══ CODE USSD COMPOSÉ ═══ */

.ussd-block { background: var(--canvas-2); border-radius: var(--r-lg); padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); }
.ussd-block__label { font: 400 13px/1 var(--font); color: var(--ink-3); }
.ussd-block__row { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
/* Mobile : le code USSD complet (*880*41*622703*5000#) ne tient pas à côté du
   bouton Copier, il prend toute la largeur et les boutons passent dessous. */
@media (max-width: 767px){
  .ussd-block__row .ussd-block__code { flex: 1 1 100%; height: 44px; font-size: 18px; }
  .ussd-block__row .ussd-block__copy { flex: 1; }
  /* Au-dessus du pied collant (60px barre basse + ~90px CTA), sinon le toast le recouvre. */
  .toast { bottom: 168px; }
}
.ussd-block__code {
  flex: 1 1 0; min-width: 0;
  padding: 0 var(--sp-2);
  font: 700 20px/1 var(--font);
  letter-spacing: .02em;
  color: var(--brand-ink);
  font-variant-numeric: tabular-nums;
  background: var(--canvas);
}
.ussd-block__copy { flex-shrink: 0; height: 44px; font-size: 15px; padding: 0 var(--sp-3); }
/* Composer : l'étape qui fait réellement payer, donc le bouton le plus visible
   du bloc (Copier n'est qu'un repli). Tant qu'il n'a pas été touché, un halo or
   pulse autour de lui ; il s'arrête au premier appui (.is-compose, deposit.js)
   et disparaît avec prefers-reduced-motion (règle globale en tête de fichier). */
.ussd-block__dial { position: relative; display: flex; align-items: center; justify-content: center; gap: var(--sp-2); height: var(--h-btn); font-size: 17px; }
.ussd-block__dial::after {
  content: ''; position: absolute; inset: -4px;
  border: 2px solid var(--gold-500); border-radius: var(--r-btn);
  opacity: 0; pointer-events: none;
}
.ussd-block__dial:not(.is-compose)::after { animation: dial-halo 2.4s ease-out infinite; }
@keyframes dial-halo {
  0%   { opacity: .9; transform: scale(1); }
  70%  { opacity: 0;  transform: scale(1.04); }
  100% { opacity: 0;  transform: scale(1.04); }
}
/* La règle globale raccourcit les animations sans arrêter une boucle infinie. */
@media (prefers-reduced-motion: reduce) { .ussd-block__dial::after { animation: none !important; } }
.ussd-block__hint { font: 400 13px/18px var(--font); color: var(--ink-3); margin-top: 2px; }

.payer-fields { display: flex; flex-direction: column; gap: var(--sp-4); }

/* ═══ RETRAIT : ADRESSE FIXE + PROCÉDURE DÉPLIABLE ═══ */

.addr-card { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-lg); }
.addr-card__ico { color: var(--brand-ink); flex-shrink: 0; }
.addr-card__city, .addr-card__street { display: block; font: 600 15px/1 var(--font); text-transform: uppercase; color: var(--ink); }
.addr-card__street { font-weight: 500; color: var(--ink-3); text-transform: none; margin-top: 2px; }

.proc { border: 1px solid var(--hairline); border-radius: var(--r-lg); overflow: hidden; }
.proc__hd {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding: var(--sp-4);
  background: none; border: none; text-align: left; cursor: pointer;
}
.proc__hd-t { font: 600 15px/1 var(--font); color: var(--ink); }
.proc__chevron { color: var(--ink-3); flex-shrink: 0; transition: transform .2s ease; }
.proc.collapsed .proc__chevron { transform: rotate(-90deg); }
.proc__body { max-height: 1000px; overflow: hidden; transition: max-height .3s ease, padding .3s ease; padding: 0 var(--sp-4) var(--sp-4); }
.proc.collapsed .proc__body { max-height: 0; padding: 0 var(--sp-4); }
.proc__steps { list-style: none; padding-left: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.proc__step { display: flex; align-items: flex-start; gap: var(--sp-3); }
.proc__num {
  flex-shrink: 0; width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--canvas-2); color: var(--brand-ink);
  font: 700 12px/1 var(--font);
  display: flex; align-items: center; justify-content: center;
}
.proc__text { font: 400 14px/20px var(--font); color: var(--ink-2); }

.svc-notice {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: var(--canvas-2);
  border-radius: var(--r-sm);
  font: 400 14px/20px var(--font);
  color: var(--ink-2);
}
.svc-notice .ico { color: var(--brand-ink); flex-shrink: 0; margin-top: 1px; }
.svc-notice--err { background: var(--notice-bg); color: var(--ink-2); }
.svc-notice--err .ico { color: var(--notice-ink); }

.svc-legal { font: 400 13px/18px var(--font); color: var(--ink-3); margin-top: var(--sp-5); }

/* ═══ COMPTE : CONNEXION / INSCRIPTION ═══ */

.acct-form { display: flex; flex-direction: column; gap: var(--sp-4); margin-top: var(--sp-5); }
.acct-form[hidden] { display: none; }
.acct-actions { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-5); }
.acct-profile { padding-top: var(--sp-5); }

/* ═══ BONUS ET PARRAINAGE (vues bonus/referral, services/js/bonus.js) ═══
   Presque tout est repris de composants existants : .svc-list/.svc-row--step
   pour les règles, .ussd-block pour le lien copiable, .badge pour l'état d'un
   filleul, .empty pour l'écran déconnecté. Seuls la carte de solde, la barre
   de progression et le formulaire de conversion demandent du CSS propre.
   La v1 (index.html:190) peignait la carte en dégradé --t500 → --t300 : ces
   jetons n'existent pas en v2 et le dégradé n'appartient à aucun style de la
   charte. Le fond navy plein est celui de .svc-hero et de .bottom-nav. */

.bonus-card {
  display: flex; flex-direction: column;
  background: var(--navy-900); color: #fff;
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  margin-bottom: var(--sp-5);
}
.bonus-card__label { font: 400 13px/1 var(--font); color: rgba(255, 255, 255, .7); }
/* Prix principal de DESIGN.md §3 (26/30, 700, -0.5px) : le solde est le
   chiffre que le client vient chercher, il tranche sur le reste de l'écran. */
.bonus-card__pts {
  font: 700 26px/30px var(--font); letter-spacing: -.5px;
  font-variant-numeric: tabular-nums;
  margin-top: var(--sp-1);
}
.bonus-card__pts small { font: 600 17px/22px var(--font); color: rgba(255, 255, 255, .7); }
.bonus-card__sub { font: 400 14px/20px var(--font); color: rgba(255, 255, 255, .8); }
.bonus-card__total {
  font: 400 13px/18px var(--font); color: var(--gold-500);
  margin-top: var(--sp-3); padding-top: var(--sp-3);
  border-top: 1px solid rgba(255, 255, 255, .15);
}

/* Même code couleur que la timeline du suivi : piste --hairline, avancement
   en or Wanilo. Pas de barre bleue, l'or est le seul accent de progression. */
.bonus-progress { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.bonus-progress__bar { height: 8px; border-radius: var(--r-pill); background: var(--hairline); overflow: hidden; }
.bonus-progress__fill { display: block; height: 100%; border-radius: var(--r-pill); background: var(--gold-500); transition: width .4s ease; }
.bonus-progress__label { font: 400 14px/20px var(--font); color: var(--ink-3); text-align: center; font-variant-numeric: tabular-nums; }

.bonus-form {
  display: flex; flex-direction: column; gap: var(--sp-4);
  border: 1px solid var(--hairline); border-radius: var(--r-lg);
  padding: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.bonus-form__t { font: 600 17px/22px var(--font); color: var(--ink); }
.bonus-form #bonusFormErr:empty { display: none; }
/* Le montant est imposé par le solde : afficher un champ modifiable ferait
   croire à un choix qui n'existe pas. Même traitement que .ussd-block__code. */
.bonus-amount {
  display: flex; align-items: center;
  height: var(--h-field); padding: 0 var(--sp-3);
  border-radius: var(--r-sm); background: var(--canvas-2);
  font: 700 20px/1 var(--font); color: var(--brand-ink);
  font-variant-numeric: tabular-nums;
}
/* .chip fait 40 px : sous la cible de 44 px au pouce. Le choix du service
   engage un dépôt réel, il monte à la hauteur d'un bouton secondaire. */
.chip--tap { height: var(--h-btn-sm); }

.bonus-sec-t { display: block; font: 600 17px/22px var(--font); color: var(--ink); margin-bottom: var(--sp-3); }
.bonus-signin { margin-top: var(--sp-5); }
.bonus-retry { margin: var(--sp-4) 0 var(--sp-5); }

/* Le lien complet ne tient jamais sur une ligne de téléphone : il passe sur
   sa propre ligne et se coupe, sinon il déborderait de l'écran. */
.ref-link { margin-bottom: var(--sp-5); }
.ref-link__url {
  padding: var(--sp-3);
  border-radius: var(--r-sm); background: var(--canvas);
  font: 400 15px/21px var(--font); color: var(--brand-ink);
  word-break: break-all;
}
.ref-link .ussd-block__copy { flex: 1 1 0; min-width: 0; }

.ref-list { margin-bottom: var(--sp-5); }
.ref-list__count { display: block; font: 400 14px/20px var(--font); color: var(--ink-3); margin: -8px 0 var(--sp-2); }
.ref-list__empty { display: block; font: 400 14px/20px var(--font); color: var(--ink-3); }
.ref-list__items { display: flex; flex-direction: column; }
.ref-item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--divider);
}
.ref-item:last-child { border-bottom: none; }
.ref-item__name { font: 600 15px/20px var(--font); color: var(--ink); min-width: 0; word-break: break-word; }

/* ═══ PIED COLLANT : TOTAL + CTA ═══ */

.svc-cta {
  position: fixed; left: 0; right: 0; bottom: 60px; z-index: 150;
  background: var(--canvas);
  box-shadow: var(--shadow-sheet);
  border-top: 1px solid var(--divider);
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-3) var(--container-pad);
  padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
}
.svc-cta[hidden] { display: none; }
.svc-cta__amt { display: flex; flex-direction: column; }
.svc-cta__label { font: 400 13px/1 var(--font); color: var(--ink-3); white-space: nowrap; }
.svc-cta__val { font: 700 20px/1 var(--font); color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Le montant garde sa largeur, le bouton absorbe le reste et peut rétrécir
   (min-width 0) : plus de débordement avec « 100 000 FCFA » sur 360px. */
.svc-cta__amt { flex: 0 0 auto; }
.svc-cta__btn { flex: 1 1 0; min-width: 0; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 767px){
  .svc-cta__btn { font-size: 14px; padding-left: var(--sp-3); padding-right: var(--sp-3); }
  .svc-cta__val { font-size: 18px; }
}
@media (max-width: 420px){
  .svc-cta__btn .ico { display: none; }
  .svc-cta__val { font-size: 16px; }
}

/* ═══ BARRE BASSE MOBILE ═══ */

.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
  height: 64px;
  background: var(--bar-bg);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-top: 1px solid var(--hairline);
  /* Six colonnes depuis l'ajout d'Accueil : sans lui, quitter l'accueil
     etait sans retour. gap ramene a 2 px, le libelle « Factures » ne tenant
     plus sur 360 px de large. */
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px;
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
}
.bottom-nav__item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: none; border: none; border-radius: var(--r-btn);
  color: var(--ink-3);
  font: 500 11px/1 var(--font);
  cursor: pointer; position: relative; min-width: 0;
  transition: background-color .15s, color .15s;
}
/* Onglet actif : tuile navy pleine, icône et libellé blancs (choix propriétaire, 02/09/2026). */
.bottom-nav__item.is-active { background: var(--navy-900); color: #fff; font-weight: 600; }

/* ═══ TICKET DE SUIVI + TIMELINE ═══ */

.svc-search { margin-bottom: var(--sp-6); }
.svc-search__row { display: flex; gap: var(--sp-2); }
.svc-search__row .field { flex: 1; min-width: 0; }

.ticket { border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: var(--sp-5); margin-bottom: var(--sp-6); }
.ticket__hd { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.ticket__ref { font: 400 13px/1 var(--font); color: var(--ink-3); }
.ticket__date { font: 400 13px/1 var(--font); color: var(--ink-3); }

.timeline { list-style: none; display: flex; flex-direction: column; }
.timeline__step { display: flex; gap: var(--sp-3); position: relative; padding-bottom: var(--sp-4); }
.timeline__step:last-child { padding-bottom: 0; }
.timeline__step::before { content: ''; position: absolute; left: 5px; top: 16px; bottom: 0; width: 2px; background: var(--hairline); }
.timeline__step:last-child::before { display: none; }
.timeline__step.is-done::before { background: var(--gold-500); }
.timeline__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--hairline); flex-shrink: 0; margin-top: 4px; }
.timeline__step.is-done .timeline__dot { background: var(--gold-500); }
.timeline__body { display: flex; flex-direction: column; }
.timeline__t { font: 600 15px/1 var(--font); color: var(--ink); }
.timeline__step:not(.is-done) .timeline__t { color: var(--ink-3); font-weight: 500; }
.timeline__s { font: 400 13px/18px var(--font); color: var(--ink-3); margin-top: 2px; margin-bottom: var(--sp-4); }

.ticket__ft { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding-top: var(--sp-4); border-top: 1px solid var(--divider); margin-top: var(--sp-2); }
.ticket__amt { font: 700 17px/1 var(--font); color: var(--ink); font-variant-numeric: tabular-nums; }
.ticket__reason { font: 400 13px/18px var(--font); color: var(--ink-2); margin-top: var(--sp-3); }
/* Articles et lieu de livraison d'une commande. Même registre que le motif de
   refus juste au-dessus : une information de contexte, pas un titre. */
.ticket__detail { display: flex; flex-direction: column; gap: 4px; font: 400 13px/18px var(--font); color: var(--ink-2); margin-top: var(--sp-3); }

/* ═══ LISTE "VOS DEMANDES" ═══ */

.tx-list { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-6); }
.tx-list[hidden] { display: none; }
.tx-list__title { font: 600 17px/1 var(--font); color: var(--ink); margin: 4px 0 var(--sp-2); }
.tx-list__items { display: flex; flex-direction: column; }

.tx-item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--divider);
  background: none; border-left: none; border-right: none; border-top: none;
  text-align: left; cursor: pointer;
}
.tx-item:last-child { border-bottom: none; }
.tx-item__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tx-item__info--end { align-items: flex-end; }
.tx-item__ref { font: 400 13px/1 var(--font); color: var(--ink-3); }
.tx-item__date { font: 400 13px/1 var(--font); color: var(--ink-3); }
.tx-item__amt { font: 600 15px/1 var(--font); color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ═══ PRONOSTICS ═══ */

.prono-list { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.prono-day { font: 700 13px/1 var(--font); color: var(--ink-3); text-transform: uppercase; letter-spacing: .3px; margin-top: var(--sp-3); }
.prono-day:first-child { margin-top: 0; }

.prono-card { border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); }
.prono-card__head { display: flex; align-items: center; justify-content: space-between; }
.prono-card__sport { font: 600 13px/1 var(--font); color: var(--action); }
.prono-card__date { font: 400 13px/1 var(--font); color: var(--ink-3); }
.prono-card__match { font: 600 15px/1 var(--font); color: var(--ink); }
.prono-card__tip { font: 400 15px/20px var(--font); color: var(--ink-2); }
.prono-card__cote { font: 400 13px/1 var(--font); color: var(--ink-3); }
.prono-card__result { align-self: flex-start; }

/* ═══ TIROIR : LIENS DE MENU ═══ */

.drawer__link {
  display: flex; align-items: center; gap: var(--sp-3);
  width: 100%; height: 52px;
  background: none; border: none; border-bottom: 1px solid var(--divider);
  color: var(--ink-2);
  font: 500 15px/1 var(--font);
  text-align: left; cursor: pointer;
}
.drawer__link .ico { color: var(--brand-ink); }
.drawer__link:last-child { border-bottom: none; }

/* ═══ CHAT SUPPORT (tiroir data-drawer="chat", services/js/chat.js) ═══ */

/* Le tiroir menu tient en 80dvh parce qu'il liste cinq liens. Une conversation
   a besoin de toute la hauteur utile : sans cela l'historique se réduit à trois
   bulles entre l'en-tête et la zone de saisie. Borné au mobile : à partir de
   768px le tiroir devient un panneau latéral pleine hauteur (règle .drawer du
   palier 768, déclarée AVANT celle-ci donc perdante à égalité de spécificité),
   et une hauteur en dvh l'amputait de 64px par le bas. */
@media (max-width: 767.98px) {
  .drawer--chat { height: 92dvh; max-height: 92dvh; }
}

.chat__id { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.chat__ico {
  width: 40px; height: 40px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--navy-900); color: #fff;
}
.chat__id-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.chat__st { font: 400 13px/1 var(--font); color: var(--ink-3); }

.chat__body {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-5);
  /* La conversation défile DANS le panneau : sans overscroll-behavior, arriver
     en butée propage le geste à la page derrière le tiroir. */
  overscroll-behavior: contain;
}
.chat__empty { padding: var(--sp-7) 0; margin: auto 0; }
.chat__signin { margin-top: var(--sp-5); }

.cmsg {
  max-width: 80%;
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  /* Un lien collé par un agent n'a aucune césure naturelle : sans
     overflow-wrap, la bulle déborde en largeur et fait défiler la page. */
  overflow-wrap: anywhere;
}
.cmsg--me { align-self: flex-end; background: var(--navy-900); color: #fff; border-bottom-right-radius: var(--r-xs); }
.cmsg--agent { align-self: flex-start; background: var(--canvas-2); color: var(--ink); border-bottom-left-radius: var(--r-xs); }
.cmsg__name { font: 600 12px/16px var(--font); color: var(--navy-700); }
/* pre-wrap : un message saisi sur plusieurs lignes garde ses retours. */
.cmsg__txt { font: 400 15px/21px var(--font); white-space: pre-wrap; }
.cmsg__time { align-self: flex-end; font: 400 12px/16px var(--font); opacity: .55; }

.chat__ft {
  flex-shrink: 0;
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5) calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--hairline);
  background: var(--canvas);
}
.chat__in { flex: 1 1 0; min-width: 0; }
/* Aligné sur la hauteur du champ (48px), au-dessus des 44px de cible tactile. */
.chat__send { width: var(--h-field); height: var(--h-field); padding: 0; flex-shrink: 0; }

/* Pastille de message non lu sur les points d'entrée du chat. */
[data-chat-open].is-unread::after {
  content: "";
  width: 8px; height: 8px; flex-shrink: 0;
  border-radius: var(--r-pill);
  background: var(--gold-500);
  display: inline-block; vertical-align: middle; margin-left: 6px;
}
.drawer__link[data-chat-open].is-unread::after { margin-left: auto; }

/* ═══════════════════════════════════════════════════════════
   PALIER DESKTOP : 1024 px (Desktop.dc.html)
   ═══════════════════════════════════════════════════════════ */

@media (min-width: 1024px) {
  body { padding-bottom: 0; }

  /* Nav horizontale, l'accueil devient un lien sans effet supplémentaire ici,
     les liens de la maquette Desktop restent décoratifs (pas de sous-navigation
     dédiée par vue : ce serait une 2e implémentation de navigation en plus de
     .bottom-nav/.intent-grid, hors périmètre du lot S1). */
  .svc-hdr__bar { height: 64px; }
  .svc-hdr__nav {
    display: flex; align-items: center; gap: var(--sp-6);
    font: 500 15px/1 var(--font); color: var(--ink-2);
  }
  .svc-hdr__nav button { background: none; border: none; color: inherit; cursor: pointer; font: inherit; }
  .svc-hdr__nav button.is-active { color: var(--brand-ink); font-weight: 600; }

  .ann { justify-content: center; }
  .ann__track { max-width: var(--container); }

  .svc-hero { padding: 0; }
  /* grid-template-areas plutot que deux colonnes implicites : le hero porte
     trois enfants depuis que la carte s'intercale sur telephone, et une
     grille implicite les aurait ranges en 2x2. */
  .svc-hero__wrap {
    display: grid; grid-template-columns: 1.1fr .9fr;
    grid-template-areas: 'head card' 'foot card';
    gap: 0 var(--sp-7); align-items: center; padding: var(--sp-8) var(--container-pad);
  }
  .svc-hero__head { grid-area: head; align-self: end; }
  .svc-hero__foot { grid-area: foot; align-self: start; margin-top: var(--sp-5); }
  .svc-hero__card { grid-area: card; align-self: center; }
  .svc-hero__row { flex-direction: row; }
  .svc-hero__row .btn { width: auto; padding: 0 var(--sp-6); }
  .svc-hero__assure { flex-direction: row; gap: var(--sp-6); }

  .svc-main { padding: var(--sp-8) var(--container-pad) var(--sp-8); }
  .svc-intro__q { font-size: 28px; line-height: 32px; }

  .intent-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* Parcours (dépôt/retrait/factures) : colonne principale + récapitulatif
     collant, comme Desktop.dc.html .d-two/.d-side. .svc-cta redevient
     statique et se place dans la 2e colonne, sans dupliquer l'état du
     formulaire (aucune nouvelle logique JS : mêmes noeuds, seule la
     position change). */
  .view[data-view="form"]:not([hidden]),
  .view[data-view="withdraw"]:not([hidden]),
  .view[data-view="bills"]:not([hidden]) {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--sp-7);
    align-items: start;
  }
  .view[data-view="form"] .svc-intro,
  .view[data-view="withdraw"] .svc-intro,
  .view[data-view="bills"] .svc-intro,
  .view[data-view="bills"] #b-cat-tabs,
  .view[data-view="form"] .svc-legal,
  .view[data-view="withdraw"] .svc-legal,
  .view[data-view="bills"] .svc-legal {
    grid-column: 1 / -1;
  }
  .view[data-view="bills"] #billsRoot { display: contents; }

  /* .svc-cta est maintenant un enfant direct de la vue (dépôt/retrait/bills) :
     l'auto-placement de la grille le range dans la 2e colonne, à côté de
     .svc-steps (ou #billsRoot en display:contents), sans grid-row explicite. */
  .view[data-view="form"] .svc-cta,
  .view[data-view="withdraw"] .svc-cta,
  .view[data-view="bills"] .svc-cta {
    position: sticky; top: var(--sp-5);
    left: auto; right: auto; bottom: auto;
    flex-direction: column; align-items: stretch; gap: var(--sp-3);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    box-shadow: none;
    padding: var(--sp-5);
  }
  .svc-cta__amt { flex-direction: row; justify-content: space-between; align-items: baseline; }
  .svc-cta__val { font-size: 24px; }
  /* En colonne, flex:1 (flex-basis 0) écrasait la hauteur du bouton à 14px. */
  .view[data-view="form"] .svc-cta__btn,
  .view[data-view="withdraw"] .svc-cta__btn,
  .view[data-view="bills"] .svc-cta__btn { flex: none; height: var(--h-btn); width: 100%; }

  .svc-band__wrap, .svc-ft__wrap { padding: 0; }
  .svc-why { flex-direction: row; gap: var(--sp-6); }
  .svc-why__item { flex: 1; }

  .svc-ft__wrap { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: var(--sp-7); }
  .svc-ft__copy { grid-column: 1 / -1; }

  .bottom-nav { display: none; }
}

/* ═══ PALIER INTERMÉDIAIRE : 768 px (grilles avant le 2 colonnes desktop) ═══ */

@media (min-width: 768px) and (max-width: 1023.98px) {
  .svc-main { padding: var(--sp-6) var(--container-pad) var(--sp-7); }
  .intent-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pay-methods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
  .svc-hero__row { flex-direction: row; }
  .svc-hero__row .btn { width: auto; padding: 0 var(--sp-6); }
  .svc-why { flex-direction: row; gap: var(--sp-6); }
  .svc-why__item { flex: 1; }
}

@media (min-width: 1024px) {
  .pay-methods { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: var(--sp-2); }
}

/* ═══ ATTENTE APRÈS ENVOI (tiroir data-drawer="attente", services/js/attente.js) ═══
   Feuille basse à la hauteur du contenu sur mobile ; sur grand écran, le
   panneau latéral de .drawer, contenu centré verticalement. */
.drawer--attente { height: auto; max-height: 92dvh; overflow-y: auto; }
.attente {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--sp-2);
  padding: var(--sp-6) var(--sp-5) calc(var(--sp-5) + env(safe-area-inset-bottom, 0px));
}
.attente[hidden], .attente [hidden] { display: none; } /* .btn impose inline-flex */
@media (min-width: 768px) {
  .drawer--attente { height: 100dvh; max-height: none; justify-content: center; }
}
.attente .btn--block { margin-top: var(--sp-2); }
.attente__anneau { position: relative; width: 140px; height: 140px; margin-bottom: var(--sp-3); }
.attente__anneau svg { width: 140px; height: 140px; transform: rotate(-90deg); }
.attente__fond { fill: none; stroke: var(--hairline); stroke-width: 6; }
.attente__arc {
  fill: none; stroke: var(--brand-ink); stroke-width: 6; stroke-linecap: round;
  transition: stroke-dashoffset 1s linear;
}
.attente__temps {
  position: absolute; inset: 0; display: grid; place-items: center;
  font: 700 32px/1 var(--font); color: var(--ink); font-variant-numeric: tabular-nums;
}
/* Délai écoulé sans verdict : l'anneau devient un indicateur qui tourne,
   plus un compte à rebours arrivé à zéro. */
.attente.is-depasse .attente__arc { stroke-dasharray: 90 300 !important; stroke-dashoffset: 0 !important; transition: none; }
.attente.is-depasse .attente__anneau svg { animation: attente-tour 1.4s linear infinite; }
@keyframes attente-tour { from { transform: rotate(-90deg); } to { transform: rotate(270deg); } }
@media (prefers-reduced-motion: reduce) { .attente.is-depasse .attente__anneau svg { animation: none !important; } }

.attente__titre { margin: 0; font: 600 21px/26px var(--font); color: var(--ink); }
.attente__sous { margin: 0; font: 400 15px/21px var(--font); color: var(--ink-2); }
.attente__ref {
  margin: var(--sp-1) 0 0; padding: 6px var(--sp-3);
  background: var(--navy-900); color: var(--gold-500); border-radius: var(--r-sm);
  font: 600 14px/1 var(--font); letter-spacing: .02em; font-variant-numeric: tabular-nums;
}
.attente__etat { margin: var(--sp-1) 0 var(--sp-2); font: 400 13px/18px var(--font); color: var(--ink-3); min-height: 18px; }

.attente__ico { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; margin-bottom: var(--sp-3); }
.attente__ico .ico { width: 34px; height: 34px; stroke-width: 2.5; }
.attente__ico--ok { background: var(--brand-fill); color: var(--gold-500); }
.attente__ico--nok { background: var(--err); color: #fff; }