/* ══ 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) LES RAYONS DU RÉFÉRENTIEL — une rangée qui défile sous son libellé, comme sur la carte de Mes bons */
  .ach-rayons::-webkit-scrollbar{display:none}
  .ach-rayons .pec-pill{flex:none}
  /* (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)}
  .seclbl{display:flex;justify-content:space-between;align-items:center;margin:18px 0 10px}
  .seclbl b{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--color-muted)}
  /* 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}
  .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}
  .cmz{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid var(--color-sep);width:100%;text-align:left;background:none}
  .cmz:last-child{border-bottom:none}
  .cmz .rg{flex:none;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:999px;background:var(--color-mint);color:var(--color-primary-dark);font-size:11px;font-weight:800}
  .cmz .nm{font-size:13.5px;font-weight:800;color:var(--color-ink)}
  .cmz .ad{font-size:11px;line-height:1.45;color:var(--color-muted);margin-top:1px}
  .cmz .di{display:block;font-size:11px;font-weight:800;color:var(--color-primary-dark);margin-top:2px}
  /* la fiche MISE EN AVANT par un clic sur l'épingle (et l'inverse) — sans ce style, la classe ne faisait rien */
  .cmz.vu{background:var(--color-mint);border-radius:12px;padding-left:9px;padding-right:9px}
  /* (19/09, soir — « la carte comme Uber où on avance en direction du partenaire ») LE GUIDAGE.
     Un bouton par commerce ouvre le suivi ; le bandeau au-dessus de la carte dit où on en est. */
  /* (19/09, nuit) DEUX RÉSEAUX SUR LA MÊME CARTE : la pastille dit lequel, et elle n'est pas décorative —
     ce qu'on y obtient est dit par la donnée (`achete`), jamais par l'écran. */
  .cmz .qo{font-size:11px;line-height:1.45;font-weight:700;color:var(--color-ink);margin-top:4px}
  .cmz .go{flex:none;align-self:center;border-radius:999px;background:var(--color-mint);color:var(--color-primary-dark);font-size:10.5px;font-weight:800;padding:7px 11px;white-space:nowrap}
  .cmz .go[aria-pressed="true"]{background:var(--color-primary);color:#fff}
  .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)}
  /* ══ (23/09, fondatrice : « pour la modale de paiement, ajoute pour API et lien envoyé … notre réseau accepte
     espèces, pièces et CB ; ses bons d'achat sont utilisés sur le site de l'émetteur ; une fois utilisé, non
     remboursable ; pas de possibilité d'utiliser un bon sur un autre site ; réseau limité ») LE RAPPEL DU RÉSEAU
     D'UNE MARQUE — sous le titre de « Acheter un bon d'achat », avant la carte. Petit et lisible, sur le fond menthe
     des encarts d'information (.geoask) : ce n'est ni un refus ni un état, c'est ce qu'on lit avant d'aller au
     comptoir. Ses mots viennent du réseau (PEC_TECH.reseauOu → rappel). ══ */
  .pec-rappel{border-radius:14px;background:var(--color-mint);padding:11px 13px;margin-top:10px;font-size:11.5px;line-height:1.55;color:var(--color-mint-ink)}
  .pec-rappel .t{display:block;font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--color-primary-dark);margin-bottom:5px}
  .pec-rappel b{color:var(--color-ink)}
  .pec-rappel ul{margin:0;padding-left:16px}
  .pec-rappel li{margin:0 0 4px}
  .pec-rappel li:last-child{margin-bottom:0}
  .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:nowrap}
  .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}
  }