/* ══ PAYENCASH — LE STYLE DU CHOIX « COMMENT VEUX-TU PAYER ? » (20/09, soir) ═══════════════════════════════
   Écrit une fois, pour toute page qui monte le choix (la page d'un bon proposé, la fenêtre du widget) et pour la
   carte du réseau de l'espace d'une marque (.mk-pt). Le composant qu'il habille est dans payencash-comment-payer.js. ══ */
  /* (20/09 — « révérifie les formulaires : aide à la saisie, champs obligatoires ») UN CHAMP DIT TROIS CHOSES :
     ce qu'il attend (son intitulé), s'il est obligatoire (.req) ou non (.opt), et comment le remplir (.aide).
     Un champ en faute porte .ko : le bord rougit, et le message nomme le champ — jamais « formulaire invalide ». */
  .req{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--color-primary-dark)}
  .opt{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-muted)}
  .aide{margin:5px 2px 0;font-size:10.5px;line-height:1.5;color:var(--color-muted)}
  .pec-input.ko{border-color:#C0463A;box-shadow:0 0 0 2px rgba(192,70,58,.13)}
  /* (20/09, soir — « ça doit être TOUJOURS la même animation ») LE VOLET DU CHEMIN CHOISI S'OUVRE comme
     celui de la page d'un lien PayEnCash Solution, et comme la modale du widget : socle, pecVolet. */
  /* (21/09 ; 24/09, nuit — « supprime en ligne ») LES DEUX CHEMINS S'OUVRENT PAREIL : le même geste, la même animation. */
  #ach-carte-commerce:not([hidden]), #ach-carte-agent:not([hidden]){animation:pecVolet .24s cubic-bezier(.22,.8,.3,1) both}
  /* (24/09, nuit — « ma position, domicile, etc. ») LE CARNET DANS LE FORMULAIRE : les adresses du compte, en pastilles */
  .df-lieux{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;margin:0 0 10px;padding-bottom:2px}
  .df-lieux::-webkit-scrollbar{display:none}
  .df-lieux button{flex:none;display:flex;align-items:center;gap:7px;max-width:230px;border:1.5px solid var(--color-sep);border-radius:12px;background:var(--color-surface);padding:7px 11px 7px 8px;font:inherit;text-align:left;cursor:pointer;color:var(--color-ink)}
  .df-lieux button[aria-checked="true"]{border-color:var(--color-primary);background:var(--color-mint)}
  .df-lieux .pec-ico{flex:none;font-size:15px;color:var(--color-primary-dark)}
  .df-lieux b{display:block;font-size:12px;line-height:1.2}
  .df-lieux small{display:block;font-size:10.5px;line-height:1.3;color:var(--color-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px}
  .df-carnet{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:9px;font-size:11.5px;color:var(--color-muted)}
  .df-carnet button{border:1.5px solid var(--color-sep);border-radius:99px;background:var(--color-surface);padding:4px 10px;font:inherit;font-size:11.5px;font-weight:800;color:var(--color-ink);cursor:pointer}
  button:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
  /* (20/09, soir) LE RÉCAP DU VOLET AGENT — même idiome que les règles du bas de page : une icône, une
     ligne, un filet. Trois paragraphes de tailles différentes ne se lisaient pas comme un tout. */
  .agt-lig{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--color-sep);font-size:12.5px;line-height:1.55;color:var(--color-muted)}
  .agt-lig:last-child{border-bottom:none}
  .agt-lig .pec-ico{flex:none;font-size:16px;color:var(--color-primary-dark);margin-top:1px}
  .agt-lig b{color:var(--color-ink)}
  /* LES MARQUEURS DE CARTE : .mk-user (la position du client), .mk-pt (un commerce, ou le point de rendez-vous). */
  .mk-user{width:20px;height:20px;border-radius:50%;background:var(--color-primary);box-shadow:0 0 0 5px rgba(16,160,106,.25),0 2px 6px rgba(15,42,36,.3)}
  .mk-pt{display:flex;align-items:center;gap:5px;background:var(--color-ink);color:#fff;font-size:10.5px;font-weight:700;border-radius:999px;padding:5px 10px;box-shadow:0 4px 10px rgba(15,42,36,.3);white-space:nowrap;cursor:pointer}
  /* (24/09, nuit) le distributeur nomade en route, à sa position partagée : son scooter */
  .mk-nomade{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:#E7A64A;color:#fff;box-shadow:0 0 0 5px rgba(231,166,74,.28),0 3px 8px rgba(15,42,36,.3)}
  .mk-nomade .pec-ico{font-size:17px}
  .mk-pt .pec-ico{font-size:12px;color:var(--color-bright)}
  .voie{display:none}.voie.on{display:block}
  .mapwrap{position:relative;height:180px;border-radius:18px;overflow:hidden;box-shadow:0 8px 22px rgba(15,42,36,.12);margin-top:12px}
  .navb{display:flex;align-items:flex-start;gap:11px;margin-top:10px;border-radius:16px;padding:11px 12px;background:var(--color-card);box-shadow:var(--shadow-card)}
  .navb .dt{flex:none;width:34px;height:34px;border-radius:12px;background:var(--color-mint);color:var(--color-primary-dark);display:flex;align-items:center;justify-content:center}
  .navb .tt{font-size:13.5px;font-weight:800;color:var(--color-ink);letter-spacing:-0.01em}
  .navb .ss{font-size:11.5px;line-height:1.5;color:var(--color-muted);margin-top:2px}
  .navb .st{flex:none;align-self:center;border-radius:999px;background:var(--color-sep);color:var(--color-muted);font-size:10.5px;font-weight:800;padding:7px 10px}
  .navb.arrive{background:var(--color-mint)}
  .navb.arrive .dt{background:var(--color-primary);color:#fff}
  .navb.arrive .tt{color:var(--color-mint-ink)}
  .navb.arrive .ss{color:var(--color-mint-ink)}
  /* le point qui AVANCE : pastille qui respire, pour distinguer un relevé vivant d'un relevé figé */
  .mk-user.live{animation:pecpulse 1.8s ease-out infinite}
  @keyframes pecpulse{0%{box-shadow:0 0 0 5px rgba(16,160,106,.28),0 2px 6px rgba(15,42,36,.3)}70%{box-shadow:0 0 0 16px rgba(16,160,106,0),0 2px 6px rgba(15,42,36,.3)}100%{box-shadow:0 0 0 5px rgba(16,160,106,0),0 2px 6px rgba(15,42,36,.3)}}
  @media (prefers-reduced-motion:reduce){.mk-user.live{animation:none}}
  /* ══ (19/09, nuit — « où est la modale pour accepter le partage de position ») LA DEMANDE D'ACCORD ═════
     Reprise telle quelle de l'écran d'avant le changement de modèle : on ne déclenche JAMAIS la popup native
     du téléphone sans avoir dit d'abord à quoi la position sert, et ce qu'on en fait. Deux sorties, et la
     seconde n'est pas un cul-de-sac : « je saisis une adresse » mène quelque part. ══ */
  /* (20/09, soir — « toujours la même animation ») LES DEUX MODALES S'OUVRENT COMME PARTOUT AILLEURS :
     le fond se voile, la feuille monte. Les images d'animation vivent dans le socle (pecVoile/pecModale). */
  .scrim{position:absolute;inset:0;background:rgba(15,42,36,.48);display:flex;align-items:center;justify-content:center;z-index:60;padding:26px;animation:pecVoile .18s ease-out both}
  .popup{background:var(--color-card);border-radius:22px;padding:22px 20px 16px;max-width:290px;text-align:center;box-shadow:0 24px 60px rgba(15,42,36,.35);animation:pecModale .24s cubic-bezier(.22,.8,.3,1) both}
  .popup .pic{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:999px;background:var(--color-mint);color:var(--color-primary-dark);margin-bottom:10px}
  .popup h3{margin:0 0 6px;font-size:15.5px;font-weight:800;line-height:1.3;color:var(--color-ink)}
  .popup p{margin:0 0 16px;font-size:12px;color:var(--color-muted);line-height:1.5}
  .popup .allow{display:block;width:100%;background:var(--color-primary);color:#fff;font-weight:800;font-size:13.5px;border-radius:13px;padding:12px;border:none;cursor:pointer}
  .popup .deny{display:block;width:100%;margin-top:6px;padding:10px;font-weight:700;font-size:12.5px;color:var(--color-muted);background:none;border:none;cursor:pointer}
  .popup .err{margin:9px 0 0;font-size:11.5px;font-weight:700;line-height:1.45;color:#8E2A1E}
  /* ══ (19/09, nuit — « ça doit mettre en relation et un appel pour confirmer ») LA MISE EN RELATION ═════
     Reprise de l'écran de recherche d'agent d'avant le changement de modèle : on ne lance personne sans avoir
     dit ce qui va se passer, montré le numéro qu'on va appeler, et obtenu un accord. ══ */
  .popup.lg{max-width:330px;text-align:left;max-height:88%;overflow-y:auto}
  .popup.lg h3{text-align:left}
  .popup .tel{margin-top:12px;border-radius:14px;background:var(--color-bg);padding:11px 13px}
  .popup .tel .k{font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--color-muted)}
  .canaux{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px;margin-top:8px}
  .canaux button{display:flex;flex-direction:column;align-items:center;gap:4px;border:none;border-radius:12px;background:var(--color-bg);padding:10px 4px;cursor:pointer;font:inherit}
  .canaux button[aria-pressed="true"]{background:var(--color-mint);box-shadow:0 0 0 2px var(--color-primary)}
  .canaux button .pec-ico{font-size:17px;color:var(--color-primary-dark)}
  .canaux button span{font-size:11px;font-weight:700;color:var(--color-ink)}
  /* (20/09, soir — fondatrice : « je vois mal la case à cocher ») ELLE DOIT SE VOIR AVANT D'ÊTRE COCHÉE.
     Son bord était `--color-sep`, la même ligne grise que le cadre autour : une case vide dans un cadre
     vide, sur un fond gris. Elle est plus grande, son bord est celui de la marque, et une coche blanche
     apparaît quand elle est cochée. Le texte passe de 10,5 à 11,5 px : c'est un consentement, il se lit. */
  .rgpdrow{display:flex;align-items:flex-start;gap:11px;margin-top:12px;border-radius:12px;border:1.5px solid var(--color-sep);background:var(--color-card);padding:12px 13px;cursor:pointer}
  .rgpdrow:has(input:checked){border-color:var(--color-primary);background:var(--color-mint)}
  .rgpdrow input{appearance:none;-webkit-appearance:none;position:relative;flex:none;width:23px;height:23px;margin:0;border:2.5px solid var(--color-primary);border-radius:7px;background:var(--color-card);cursor:pointer}
  .rgpdrow input:checked{background:var(--color-primary)}
  /* la coche est dessinée, pas une image : elle suit la taille et reste nette partout */
  .rgpdrow input:checked::after{content:'';position:absolute;left:6px;top:2px;width:6px;height:11px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
  .rgpdrow input:focus-visible{outline:2px solid var(--color-primary-dark);outline-offset:2px}
  .rgpdrow span{font-size:11.5px;line-height:1.55;color:var(--color-ink)}
  .popup .recap{margin-top:11px;border-radius:14px;background:var(--color-mint);padding:11px 13px;font-size:12px;line-height:1.55;color:var(--color-mint-ink)}
  /* L'ATTENTE QUI RESPIRE — trois points, comme avant : un écran qui cherche doit avoir l'air de chercher. */
  .dots i{display:inline-block;width:5px;height:5px;margin-left:3px;border-radius:50%;background:currentColor;opacity:.3;animation:pecdot 1.2s infinite}
  .dots i:nth-child(2){animation-delay:.2s} .dots i:nth-child(3){animation-delay:.4s}
  @keyframes pecdot{0%,60%,100%{opacity:.3}30%{opacity:1}}
  @media (prefers-reduced-motion:reduce){.dots i{animation:none;opacity:.6}}
  /* le petit mot (19/09, soir — « faites-vous plaisir à vous ou à vos proches, un délire du genre, très petit ») */
  .plaisir{font-size:10.5px;line-height:1.5;color:var(--color-muted);text-align:center;margin:9px 6px 0;font-style:italic}
  .geoask{border-radius:14px;background:var(--color-mint);padding:12px 13px;margin-top:10px;font-size:11.5px;line-height:1.55;color:var(--color-mint-ink)}
  .geoask b{color:var(--color-primary-dark)}
  .vide{border-radius:14px;background:var(--color-amber-well);padding:12px 13px;margin-top:10px;font-size:12px;line-height:1.55;color:var(--color-amber-text)}
  /* LE CHOIX — des cartes de même poids ; le duo (.duo2, plus bas) les pose côte à côte. */
  .choix2{display:flex;flex-direction:column;gap:10px;margin-top:14px}
  .choix2 [role="tab"],.choix2 > a{display:flex;align-items:flex-start;gap:11px;width:100%;border-radius:16px;background:var(--color-surface);box-shadow:var(--shadow-card);padding:13px 14px;text-align:left;text-decoration:none;color:inherit}
  .choix2 > a .ic2,.choix2 [role="tab"] .ic2{flex:none;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:11px;background:var(--color-mint);color:var(--color-primary-dark)}
  .choix2 [role="tab"] .txt2,.choix2 > a .txt2{min-width:0;flex:1}
  .choix2 [role="tab"] b,.choix2 > a b{display:block;font-size:14px;color:var(--color-ink)}
  .choix2 > a small,.choix2 [role="tab"] small{display:block;font-size:10.5px;font-weight:600;color:var(--color-muted);line-height:1.4;margin-top:2px}
  .choix2 [role="tab"][aria-selected="true"]{box-shadow:0 0 0 2px var(--color-primary), var(--shadow-card);background:var(--color-mint)}
  .choix2 [role="tab"][aria-selected="true"] .ic2{background:var(--color-primary);color:#fff}


/* ══ (24/09, nuit — fondatrice : « aligne les cartes : dans un point de vente / un distributeur se déplace, partout ; prends le meilleur de
   chaque version ») LE DUO ET LA LISTE DES DISTRIBUTEURS NOMADES — un seul dessin pour la carte de Mes bons et la page d'un bon proposé
   (donc la fenêtre du site de la marque) : les deux cartes du choix, les tris, une ligne par distributeur avec SON tarif. ══ */
  .choix2.duo2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:0}
  .choix2.duo2 [role="tab"],.choix2.duo2 > a{flex-direction:column;align-items:flex-start;gap:8px;padding:13px 12px;height:100%;cursor:pointer;border:0;font:inherit}
  .choix2.duo2 [role="tab"] b,.choix2.duo2 > a b{font-size:13px;line-height:1.25}
  .choix2.duo2 [role="tab"] small,.choix2.duo2 > a small{font-size:10.5px;line-height:1.4}
  .nm-tris{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
  .nm-tris::-webkit-scrollbar{display:none}
  .nm-tris button{flex:none;border:1.5px solid var(--color-sep);border-radius:99px;background:var(--color-surface);padding:7px 12px;font:inherit;font-size:12px;font-weight:800;color:var(--color-ink);cursor:pointer;white-space:nowrap}
  .nm-tris button[aria-checked="true"]{border-color:var(--color-primary);background:var(--color-mint)}
  .nm-liste{display:flex;flex-direction:column;border-radius:16px;background:var(--color-surface);box-shadow:var(--shadow-card);overflow:hidden}
  .nm-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 11px;align-items:start;padding:13px 14px}
  .nm-row + .nm-row{box-shadow:inset 0 1px 0 var(--color-sep)}
  .nm-row .ic{grid-row:span 2;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:12px;background:#FFF1DC;color:#9A5B00}
  .nm-row .ic .pec-ico{font-size:17px}
  .nm-row .t b{display:block;font-size:14px;color:var(--color-ink)}
  .nm-row .t small{display:block;margin-top:2px;font-size:11px;line-height:1.45;color:var(--color-muted)}
  .nm-row .t .m{color:var(--color-ink);font-style:italic}
  .nm-row .px{text-align:right}
  .nm-row .px b{display:block;font-size:17px;font-weight:800;color:var(--color-ink);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
  .nm-row .px small{display:block;font-size:10.5px;color:var(--color-muted);white-space:normal;max-width:150px;margin-left:auto;line-height:1.35}
  .nm-row .px small .eu{white-space:nowrap}   /* « 3 € » ne se coupe jamais entre le nombre et l'euro */   /* « bon 40 € + déplacement 3 € » peut tenir sur deux lignes */
  .nm-row .go{grid-column:2 / -1;justify-self:stretch;margin-top:6px;border:0;border-radius:11px;background:var(--color-primary);color:#fff;padding:10px 12px;font:inherit;font-size:12.5px;font-weight:800;cursor:pointer}
  .nm-row .go[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
  @media (max-width:340px){ .choix2.duo2{grid-template-columns:1fr} }
  @media (min-width:1024px){
    .choix2.duo2 [role="tab"]{padding:15px 14px} .choix2.duo2 [role="tab"] b{font-size:14.5px} .choix2.duo2 [role="tab"] small{font-size:12px}
    .nm-tris button{font-size:13.5px;padding:9px 15px}
    .nm-row{padding:15px 16px} .nm-row .t b{font-size:15.5px} .nm-row .t small{font-size:12.5px} .nm-row .px b{font-size:19px} .nm-row .px small{font-size:12px}
    .nm-row .go{justify-self:start;padding:10px 18px;font-size:13.5px}
  }

/* ══ (24/09, nuit — fondatrice : « reprends le design quand je clique dans un point de vente, zéro frais de déplacement ; une belle section
   pour la liste des commerces, avec un filtre en mètres ») LE VOLET « POINT DE VENTE » AU DESSIN DU VOLET NOMADE — son nom, son titre, la
   section de la liste (combien, jusqu'où), une ligne par commerce avec son prix à droite. Vert pour le comptoir, ambre pour le nomade :
   la pastille dit d'un coup d'œil qui se déplace. ══ */
  /* (24/09, nuit — « affiche le nombre dans la tab, pas sur la carte ») LA PASTILLE DU NOMBRE, dans chaque carte du duo */
  .choix2.duo2 [role="tab"]{position:relative}
  .choix2.duo2 .nb2{position:absolute;top:11px;right:11px;display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 7px;border-radius:99px;background:var(--color-bg);color:var(--color-ink);font-size:12px;font-weight:800;font-variant-numeric:tabular-nums}
  .choix2.duo2 [role="tab"][aria-selected="true"] .nb2{background:var(--color-primary);color:#fff}
  .ach-sec{display:flex;flex-direction:column;gap:9px;margin-top:14px}
  .ach-sec-h b{display:block;font-size:13.5px;font-weight:800;color:var(--color-ink)}
  .ach-sec-h small{display:block;margin-top:2px;font-size:11px;line-height:1.45;color:var(--color-muted)}
  .nm-tris button[aria-pressed="true"]{border-color:var(--color-primary);background:var(--color-mint)}
  .nm-tris button:disabled{opacity:.45;cursor:not-allowed}
  .nm-row.pt .ic{background:var(--color-mint);color:var(--color-primary-dark)}
  .nm-row.pt.vu{background:var(--color-mint)}
  .nm-row button.t{border:0;background:none;padding:0;font:inherit;text-align:left;color:inherit;cursor:pointer;min-width:0}
  .nm-row .t small.d{font-weight:800;color:var(--color-primary-dark);font-variant-numeric:tabular-nums}
  .nm-row .t small.m{color:var(--color-ink);font-style:normal;font-weight:700}
  .nm-row a.go{display:block;text-align:center;text-decoration:none}
  .nm-row .go[aria-pressed="true"]{background:var(--color-ink)}
  .ach-plus{border:0;background:none;padding:2px 2px 0;font:inherit;font-size:12px;font-weight:800;color:var(--color-primary-dark);text-align:left;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
  .ach-note{margin:0;font-size:10.5px;line-height:1.5;color:var(--color-muted)}
  /* LES RÈGLES D'ACHAT, SOUS LES VOLETS — une icône, une ligne, un filet ; la ligne du chemin ouvert ressort */
  .ach-regles{margin-top:14px;border-radius:16px;background:var(--color-surface);box-shadow:var(--shadow-card);padding:12px 15px 4px}
  .ach-regles-t{font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--color-muted);margin-bottom:2px}
  .ach-regles .agt-lig.on{margin:0 -8px;padding-left:8px;padding-right:8px;border-radius:10px;background:var(--color-mint);color:var(--color-mint-ink);border-bottom-color:transparent}
  /* LA DEMANDE PARTIE, EN UN BANDEAU — le suivi se fait dans Mes bons */
  .ach-suivi{margin-top:12px;border-radius:14px;background:var(--color-surface);box-shadow:0 0 0 2px var(--color-primary),var(--shadow-card);padding:13px 14px}
  .ach-suivi .h{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
  .ach-suivi .h b{font-size:13.5px;color:var(--color-ink)}
  .ach-suivi .h .pec-pill{flex:none;font-size:10px}
  .ach-suivi p{margin:6px 0 0;font-size:12.5px;line-height:1.5;color:var(--color-ink)}
  .ach-suivi p.s{font-size:11.5px;color:var(--color-muted)}
  .ach-suivi .pec-cta{display:flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;margin-top:11px}
  @media (min-width:1024px){
    .ach-sec-h b{font-size:15px} .choix2.duo2 .nb2{font-size:13px;min-width:26px;height:26px} .ach-sec-h small,.ach-note{font-size:12.5px} .ach-plus{font-size:13.5px}
    .ach-regles{padding:16px 20px 6px} .ach-regles-t{font-size:11.5px} .ach-regles .agt-lig{font-size:13.5px}
    .ach-suivi .h b{font-size:15px} .ach-suivi p{font-size:13.5px}
  }
/* ══ (24/09, nuit — fondatrice : « la recherche des distributeurs qui tourne… revérifie, on avait ça avant pour la recherche d'un agent »)
   LA RECHERCHE QUI TOURNE — le radar et les trois points de l'ancienne recherche d'agent (Fly 05, 17/09 ; Mode 25-rencontre), entre le
   bouton « Être mis en relation » et la liste. L'ADRESSE CONNUE, résumée en une ligne ; « Modifier » rouvre ses champs. ══ */
  .agt-cherche{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;margin-top:14px;padding:18px 14px 16px;border-radius:16px;background:var(--color-mint)}
  .agt-cherche b{font-size:13.5px;line-height:1.4;color:var(--color-ink)}
  .agt-cherche small{font-size:11.5px;line-height:1.5;color:var(--color-mint-ink);max-width:40ch}
  .agt-cherche .radar{position:relative;display:inline-flex;align-items:center;justify-content:center;width:84px;height:84px}
  .agt-cherche .radar .dot{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--color-primary);color:#fff;box-shadow:0 2px 8px rgba(15,42,36,.3)}
  .agt-cherche .radar .dot .pec-ico{font-size:17px}
  .agt-cherche .radar .ring{position:absolute;left:50%;top:50%;width:34px;height:34px;border-radius:50%;background:rgba(16,160,106,.28);transform:translate(-50%,-50%);animation:pecRadar 2.2s ease-out infinite}
  .agt-cherche .radar .ring.r2{animation-delay:.7s}
  .agt-cherche .radar .ring.r3{animation-delay:1.4s}
  @keyframes pecRadar{0%{width:34px;height:34px;opacity:.85}100%{width:84px;height:84px;opacity:0}}
  @media (prefers-reduced-motion:reduce){.agt-cherche .radar .ring{animation:none;opacity:.3}}
  .adr-resume{display:flex;align-items:center;gap:10px;margin-top:10px;padding:11px 12px;border-radius:14px;background:var(--color-mint)}
  .adr-resume > .pec-ico{flex:none;font-size:17px;color:var(--color-primary-dark)}
  .adr-resume .t{flex:1;min-width:0}
  .adr-resume .t b{display:block;font-size:13px;line-height:1.35;color:var(--color-ink)}
  .adr-resume .t small{display:block;margin-top:2px;font-size:11px;line-height:1.4;color:var(--color-mint-ink)}
  .adr-resume button{flex:none;border:0;border-radius:99px;background:var(--color-surface);padding:7px 12px;font:inherit;font-size:12px;font-weight:800;color:var(--color-primary-dark);cursor:pointer;box-shadow:var(--shadow-card)}
  @media (min-width:1024px){ .agt-cherche b{font-size:15px} .agt-cherche small{font-size:13px} .adr-resume .t b{font-size:14.5px} .adr-resume .t small{font-size:12.5px} }
  /* (24/09, nuit — « une zone de recherche qui filtre sur toutes les marques » ; « l'étape comment tu paies ») TON BON, PUIS COMMENT TU
     LE PAIES : l'intitulé d'étape, la recherche et sa liste, la marque choisie résumée en une ligne, les deux moyens côte à côte. */
  .agt-k{font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--color-muted);margin-bottom:7px}
  .agt-marque-z{position:relative}
  .agt-marque-l{position:absolute;left:0;right:0;top:calc(100% + 5px);z-index:30;max-height:300px;overflow-y:auto;border:1px solid var(--color-sep);border-radius:14px;background:var(--color-surface);box-shadow:0 14px 34px rgba(16,40,28,.16);padding:5px}
  .agt-marque-l button{display:flex;align-items:center;gap:10px;width:100%;border:0;border-radius:10px;background:transparent;padding:8px 9px;font:inherit;text-align:left;color:var(--color-ink);cursor:pointer}
  .agt-marque-l button:hover,.agt-marque-l button[aria-selected="true"]{background:var(--color-mint)}
  .agt-marque-l .t,.agt-marque-ch .t{flex:1;min-width:0}
  .agt-marque-l b,.agt-marque-ch b{display:block;font-size:13px;line-height:1.3}
  .agt-marque-l small,.agt-marque-ch small{display:block;font-size:11px;line-height:1.35;color:var(--color-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .agt-marque-l .vide,.agt-marque-l .plus{margin:0;padding:9px 10px;font-size:11.5px;line-height:1.45;color:var(--color-muted)}
  .agt-marque-l .plus{border-top:1px solid var(--color-sep);font-weight:700}
  .pastille{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--color-primary-dark);color:#fff;font-size:13px;font-weight:900}
  .agt-marque-ch{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:var(--color-mint)}
  .agt-marque-ch small{color:var(--color-mint-ink)}
  .agt-marque-ch button{flex:none;border:0;border-radius:99px;background:var(--color-surface);padding:7px 12px;font:inherit;font-size:12px;font-weight:800;color:var(--color-primary-dark);cursor:pointer;box-shadow:var(--shadow-card)}
  .agt-moyens{display:grid;grid-template-columns:1fr 1fr;gap:8px;border-radius:14px}
  .agt-moyens button{display:flex;align-items:center;justify-content:center;gap:6px;min-height:48px;min-width:0;border:1.5px solid var(--color-sep);border-radius:13px;background:var(--color-surface);padding:10px 6px;font:inherit;font-size:13px;font-weight:800;white-space:nowrap;color:var(--color-ink);cursor:pointer}
  .agt-moyens button .pec-ico{font-size:17px;color:var(--color-primary-dark)}
  .agt-moyens button[aria-checked="true"]{border-color:var(--color-primary);background:var(--color-mint)}
  .agt-moyens.ko{box-shadow:0 0 0 2px rgba(192,70,58,.35)}
  .agt-montant-champ{position:relative}
  .agt-montant-champ input{padding-right:30px}
  .agt-montant-champ span{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-weight:800;color:var(--color-muted);pointer-events:none}
  .agt-fixe{margin:10px 0 0;padding:10px 12px;border-radius:12px;background:var(--color-bg);font-size:12.5px;line-height:1.5;color:var(--color-ink)}
  .agt-identite{margin:8px 0 0;padding:9px 11px;border-radius:12px;background:var(--color-amber-well);color:var(--color-amber-text);font-size:11.5px;line-height:1.5}
  @media (min-width:1024px){ .agt-moyens button{font-size:14.5px} .agt-marque-l b,.agt-marque-ch b{font-size:14px} }
  /* (24/09, nuit — « modal comment tu règles ») le règlement dit dans la fenêtre, résumé au-dessus de la liste ; « Modifier » la rouvre */
  .agt-paie-res{display:flex;align-items:center;gap:9px;margin:0 0 10px;padding:9px 11px;border-radius:12px;background:var(--color-mint);font-size:12px;line-height:1.4;color:var(--color-mint-ink)}
  .agt-paie-res > .pec-ico{flex:none;font-size:16px;color:var(--color-primary-dark)}
  .agt-paie-res span{flex:1;min-width:0}
  .agt-paie-res b{color:var(--color-ink)}
  .agt-paie-res button{flex:none;border:0;border-radius:99px;background:var(--color-surface);padding:6px 11px;font:inherit;font-size:11.5px;font-weight:800;color:var(--color-primary-dark);cursor:pointer;box-shadow:var(--shadow-card)}
  .popup .agt-moyens{margin-top:12px}
  .popup .agt-identite,.popup .agt-fixe{text-align:left}
  /* (24/09, nuit — « filtré par prix ») le filtre du prix de déplacement, sous le tri */
  .agt-prix{margin-top:7px}