/* =====================================================================
   client.css — application cliente, pensée pour le téléphone d'abord.

   Feuille autonome : le back-office garde sa charte or, l'espace client
   a la sienne (vert profond). Aucune variable n'est partagée, on peut
   donc faire évoluer l'un sans casser l'autre.
   ===================================================================== */

:root{
  /* Or de la plateforme — mêmes valeurs que le back-office.
     Attention : l'or est trop clair pour porter du texte blanc
     (2,4:1). D'où deux jetons distincts : --v-ink pour écrire SUR
     l'aplat, --v-t pour écrire EN or sur fond clair. */
  --v:#BCA80B;          /* aplats, onglet actif, boutons        */
  --v-d:#8F8107;        /* pressé, dégradé bas                  */
  --v-c:#CDB81C;        /* dégradé haut, éclaircissement        */
  --v-l:#FAF7E2;        /* fonds teintés, pastilles             */
  --v-t:#6B5F07;        /* or lisible en texte (6,4:1 sur blanc)*/
  --v-ink:#0F172A;      /* encre posée sur un aplat or (7,4:1)  */
  --v-rgb:188,168,11;

  /* Neutres */
  --n-900:#101828;      /* titres          */
  --n-700:#344054;      /* texte courant   */
  --n-500:#667085;      /* texte secondaire*/
  --n-300:#D0D5DD;      /* bordures        */
  --n-100:#F2F4F7;      /* séparateurs     */
  --n-50:#F9FAFB;       /* fonds           */
  --blanc:#FFFFFF;

  /* Sémantique */
  --ok:#1E7A45;   --ok-l:#E4F2EA;
  --ko:#B03A24;   --ko-l:#FCEAE6;
  --att:#8A6D0B;  --att-l:#FFF8E1;

  --r:14px;  --r-l:20px;  --r-xl:26px;
  --barre:68px;                 /* hauteur de la barre d'onglets */
  --ombre:0 1px 2px rgba(16,24,40,.05);
  --ombre-h:0 4px 16px rgba(16,24,40,.08);
}

*{margin:0;padding:0;box-sizing:border-box}

html{-webkit-text-size-adjust:100%}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:var(--blanc);color:var(--n-700);
  font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
  /* Marge basse : la barre d'onglets est fixe et recouvrirait le contenu. */
  padding-bottom:calc(var(--barre) + env(safe-area-inset-bottom));
}
h1,h2,h3,h4{color:var(--n-900);font-weight:700;line-height:1.25}
a{color:inherit;text-decoration:none}
button,input,select{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer;border:none;background:none}

/* Anneau de focus clavier, visible seulement pour qui navigue au clavier
   (:focus-visible), pour ne pas faire réapparaître le halo au simple tap. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--v-t);outline-offset:2px;border-radius:8px;
}
.onglets a:focus-visible{outline-offset:-3px}
.bascule-i input:focus-visible + span{outline:2px solid var(--v-t);outline-offset:2px}

/* L'application reste centrée et lisible sur grand écran plutôt que de
   s'étirer sur toute la largeur. */
.app{max-width:480px;margin:0 auto;min-height:100vh;background:var(--blanc);
     position:relative;box-shadow:0 0 40px rgba(16,24,40,.06)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
         clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ============ En-têtes ============ */

.tete{display:flex;align-items:center;gap:14px;padding:18px 20px 14px}
.tete h1{font-size:19px}
.tete .retour{width:38px;height:38px;border-radius:50%;background:var(--n-50);
              display:flex;align-items:center;justify-content:center;color:var(--n-700);flex:none}
.tete .retour:active{background:var(--n-100)}
.tete .droite{margin-left:auto;display:flex;gap:8px}
.tete .rond{width:38px;height:38px;border-radius:50%;background:var(--n-50);
            display:flex;align-items:center;justify-content:center;color:var(--n-700)}
.tete.avec-ligne{border-bottom:1px solid var(--n-100)}

.salut{padding:20px 20px 6px;display:flex;align-items:flex-start}
.salut .bonjour{font-size:13px;color:var(--n-500)}
.salut .nom{font-size:21px;font-weight:700;color:var(--n-900);line-height:1.2}
.salut .rond{margin-left:auto}

/* ============ Carte de solde ============ */

.carte-solde{
  margin:14px 16px 0;border-radius:var(--r-xl);
  background:linear-gradient(160deg,var(--v-c),var(--v-d));
  color:var(--v-ink);padding:22px 22px 18px;position:relative;overflow:hidden;
  box-shadow:var(--ombre-h);
}
/* Reflet discret en haut à droite : donne du relief sans nuire au
   contraste du texte, qui reste sur la partie sombre du dégradé. */
.carte-solde::before{
  content:"";position:absolute;top:-60%;right:-30%;width:70%;height:140%;
  background:radial-gradient(closest-side,rgba(255,255,255,.16),transparent 70%);
  pointer-events:none;
}
.soldes{display:flex;align-items:center;gap:0}
.soldes .sol{flex:1;text-align:center}
.soldes .sol:first-child{border-right:1px solid rgba(15,23,42,.18)}
.soldes .sol .n{font-size:26px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.soldes .sol .d{font-size:11px;text-transform:uppercase;letter-spacing:.08em;opacity:.7;margin-top:2px}
.carte-solde .oeil{position:absolute;right:16px;top:50%;transform:translateY(-50%);
                   width:38px;height:38px;border-radius:50%;background:rgba(15,23,42,.12);
                   display:flex;align-items:center;justify-content:center;color:var(--v-ink)}
/* Un solde masqué garde sa place : la carte ne doit pas sauter. */
.masque{filter:blur(9px);user-select:none}

/* ============ Carte QR, sur le motif ============ */

/* Le motif est laissé tel quel : or sur fond clair, sans aplat de
   couleur ni voile par-dessus. */
.carte-qr{
  margin:14px 16px 0;border-radius:var(--r-xl);overflow:hidden;position:relative;
  background:var(--blanc);border:1px solid var(--n-100);
  min-height:172px;display:flex;align-items:center;justify-content:center;padding:22px;
}
.carte-qr .motif{
  position:absolute;inset:0;
  background-image:url('../img/motif.png');
  background-size:300px;background-repeat:repeat;
}
.carte-qr .boite{position:relative;background:#fff;border-radius:var(--r);padding:12px 12px 6px;
                 box-shadow:0 4px 18px rgba(16,24,40,.16);text-align:center}
.qr-repli{width:132px;height:132px;display:flex;align-items:center;justify-content:center;
          font-size:12px;font-weight:700;color:var(--n-700);text-align:center}

/* ============ Bandeau d'information ============ */

.info-bandeau{
  margin:16px;padding:13px 15px;border-radius:var(--r);
  background:var(--v-l);color:var(--v-t);font-size:12.5px;line-height:1.55;
  display:flex;gap:10px;align-items:flex-start;
}
.info-bandeau i{margin-top:2px;flex:none;opacity:.75}

/* ============ Listes et sections ============ */

.sec-tete{display:flex;align-items:baseline;padding:22px 20px 10px}
.sec-tete h2{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--n-500)}
.sec-tete a{margin-left:auto;font-size:13px;font-weight:600;color:var(--v-t)}

.liste{border-top:1px solid var(--n-100)}
.ligne{display:flex;align-items:center;gap:13px;padding:13px 20px;border-bottom:1px solid var(--n-100);width:100%;text-align:left}
.ligne .av{width:38px;height:38px;border-radius:50%;flex:none;display:flex;align-items:center;
           justify-content:center;font-weight:700;font-size:14px;background:var(--v-l);color:var(--v-t)}
.ligne .av.gris{background:var(--n-100);color:var(--n-500);font-size:13px}
.ligne .txt{flex:1;min-width:0}
.ligne .txt b{display:block;color:var(--n-900);font-weight:600;font-size:14.5px;
              overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ligne .txt small{color:var(--n-500);font-size:12.5px}
.ligne .val{text-align:right;flex:none}
.ligne .val .m{font-weight:700;font-size:14.5px;font-variant-numeric:tabular-nums;color:var(--n-900)}
.ligne .val .m.plus{color:var(--ok)}
/* Le montant reçu est l'information principale de la ligne. */
.ligne .val .m.plus{font-weight:700}
.ligne .val .s{font-size:11.5px;color:var(--n-500);display:block}
.ligne .chev{color:var(--n-300);flex:none}

.puce{display:inline-block;font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:100px;margin-top:3px}
.puce.ok{background:var(--ok-l);color:var(--ok)}
.puce.ko{background:var(--ko-l);color:var(--ko)}
.puce.att{background:var(--att-l);color:var(--att)}
.puce.neutre{background:var(--n-100);color:var(--n-500)}

/* ============ Filtres à pastilles ============ */

.chips{display:flex;gap:9px;padding:4px 20px 16px;overflow-x:auto;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips button{padding:8px 16px;border-radius:100px;background:var(--n-50);border:1px solid var(--n-100);
              font-size:13px;font-weight:600;color:var(--n-700);white-space:nowrap;flex:none}
.chips button.actif{background:var(--v);border-color:var(--v);color:var(--v-ink)}

/* ============ Deux cartes de solde côte à côte ============ */

.duo{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:4px 16px 16px}
.duo.une{grid-template-columns:1fr}
.duo .c{border:1px solid var(--n-100);border-radius:var(--r);padding:14px 16px;background:var(--blanc);box-shadow:var(--ombre)}
.duo .c .t{font-size:11.5px;color:var(--n-500)}
.duo .c .n{font-size:19px;font-weight:700;color:var(--n-900);margin-top:3px;font-variant-numeric:tabular-nums}

/* ============ Segmenté National / International ============ */

.segmente{display:flex;gap:4px;margin:6px 16px 18px;padding:4px;background:var(--n-50);
          border:1px solid var(--n-100);border-radius:100px}
.segmente button{flex:1;padding:10px;border-radius:100px;font-size:14px;font-weight:600;color:var(--n-500)}
.segmente button.actif{background:var(--blanc);color:var(--v-t);box-shadow:var(--ombre)}

/* ============ Champs de montant ============ */

.montant-boite{margin:0 16px 4px;padding:16px 18px;border-radius:var(--r-l);
               background:var(--n-50);border:1px solid var(--n-100);
               display:flex;align-items:center;gap:12px}
.montant-boite.recoit{background:var(--v-l);border-color:transparent}
.montant-boite .col{flex:1;min-width:0}
.montant-boite .lb{font-size:12.5px;color:var(--n-500);margin-bottom:2px}
.montant-boite .lb b{color:var(--n-900)}
.montant-boite input{width:100%;border:none;background:none;font-size:26px;font-weight:700;
                     color:var(--n-900);padding:0;outline:none;font-variant-numeric:tabular-nums}
.montant-boite input::placeholder{color:var(--n-300)}
.montant-boite .fige{font-size:26px;font-weight:700;color:var(--n-900);font-variant-numeric:tabular-nums}
.pastille-devise{display:flex;align-items:center;gap:6px;padding:8px 12px;border-radius:100px;
                 background:var(--blanc);border:1px solid var(--n-100);font-weight:700;font-size:14px;
                 color:var(--n-900);white-space:nowrap;flex:none;box-shadow:var(--ombre)}
.pastille-devise .dr{font-size:16px;line-height:1}

/* Séparateur avec la flèche de conversion */
.echange{display:flex;align-items:center;justify-content:center;height:22px;position:relative}
.echange span{width:30px;height:30px;border-radius:50%;background:var(--blanc);border:1px solid var(--n-100);
              display:flex;align-items:center;justify-content:center;color:var(--n-500);font-size:12px;
              position:relative;z-index:1}

.note{padding:6px 20px 0;font-size:12.5px;color:var(--n-500)}
.note.centre{text-align:center;padding-top:12px}
.note .point{color:var(--v-t);margin-right:5px}

/* ============ Formulaire ============ */

.champ{padding:0 16px 14px}
.champ > label{display:block;font-size:12px;font-weight:700;text-transform:uppercase;
               letter-spacing:.06em;color:var(--n-500);margin:18px 4px 8px}
.saisie{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:var(--r);
        background:var(--blanc);border:1px solid var(--n-300)}
.saisie:focus-within{border-color:var(--v);box-shadow:0 0 0 3px rgba(var(--v-rgb),.18)}
.saisie input,.saisie select{flex:1;min-width:0;border:none;outline:none;background:none;font-size:15px}
.saisie .prefixe{display:flex;align-items:center;gap:5px;font-weight:600;color:var(--n-700);
                 padding-right:10px;border-right:1px solid var(--n-100);white-space:nowrap}
.saisie .act{color:var(--n-500);padding:0 2px}
.aide{font-size:12.5px;color:var(--n-500);margin:7px 4px 0}
.err{font-size:12.5px;color:var(--ko);margin:6px 4px 0;display:none}
.champ.ko .saisie{border-color:var(--ko)}
.champ.ko .err{display:block}

/* ============ Récapitulatif de frais ============ */

.recap{margin:20px 16px 0;border:1px solid var(--n-100);border-radius:var(--r);overflow:hidden}
.recap .l{display:flex;justify-content:space-between;padding:13px 16px;font-size:14px;
          border-bottom:1px solid var(--n-100)}
.recap .l:last-child{border-bottom:none}
.recap .l b{font-weight:700;color:var(--n-900);font-variant-numeric:tabular-nums}
.recap .l.fort{background:var(--n-50)}
.recap .l.ko b{color:var(--ko)}

/* ============ Boutons ============ */

.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
     padding:15px;border-radius:var(--r);font-size:15px;font-weight:700;transition:background .15s}
.btn-v{background:var(--v);color:var(--v-ink)}
.btn-v:active{background:var(--v-d)}
.btn-v:disabled{background:#E5DFB4;color:#8A8464;cursor:not-allowed}
.btn-c{background:var(--n-50);color:var(--n-700);border:1px solid var(--n-100)}
.btn-bloc{margin:20px 16px}
.btn-sm{padding:11px;font-size:14px}

/* ============ Profil ============ */

.profil-tete{text-align:center;padding:14px 20px 4px}
.profil-tete .av{width:76px;height:76px;border-radius:22px;margin:0 auto 14px;
                 background:var(--v);color:var(--v-ink);display:flex;align-items:center;
                 justify-content:center;font-size:30px;font-weight:700}
.profil-tete .nom{font-size:21px;font-weight:700;color:var(--n-900)}
.profil-tete .tel{font-size:14px;color:var(--n-500);margin-top:2px}

.stats-3{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;padding:20px 16px 4px}
.stats-3 .c{border:1px solid var(--n-100);border-radius:var(--r);padding:15px 8px;text-align:center;box-shadow:var(--ombre)}
.stats-3 .c .n{font-size:21px;font-weight:700;color:var(--n-900)}
.stats-3 .c .t{font-size:11.5px;color:var(--n-500);margin-top:2px}

.groupe{margin:10px 16px 0;border:1px solid var(--n-100);border-radius:var(--r-l);overflow:hidden;box-shadow:var(--ombre)}
.groupe .ligne{padding:15px 16px}
.groupe .ligne:last-child{border-bottom:none}
.groupe .ligne .av{border-radius:12px;width:36px;height:36px;font-size:14px}

/* Interrupteur */
.bascule-i{position:relative;width:44px;height:26px;flex:none}
.bascule-i input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1}
.bascule-i span{position:absolute;inset:0;background:var(--n-300);border-radius:100px;transition:background .2s}
.bascule-i span::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;
                       border-radius:50%;background:#fff;transition:transform .2s;box-shadow:var(--ombre)}
.bascule-i input:checked + span{background:var(--v)}
.bascule-i input:checked + span::after{transform:translateX(18px)}

/* ============ Barre d'onglets ============ */

.onglets{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:480px;z-index:40;
  background:rgba(255,255,255,.96);backdrop-filter:blur(10px);
  border-top:1px solid var(--n-100);
  display:grid;grid-template-columns:repeat(4,1fr);
  padding-bottom:env(safe-area-inset-bottom);
}
.onglets a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
           height:var(--barre);font-size:11px;font-weight:600;color:var(--n-500);position:relative}
.onglets a i{font-size:17px}
.onglets a.actif{color:var(--v-t)}
/* Pastille verte derrière l'onglet actif, comme sur les maquettes. */
.onglets a.actif::before{content:"";position:absolute;top:8px;width:56px;height:34px;
                         border-radius:12px;background:var(--v-l);z-index:-1}
.onglets a .pastille-nb{position:absolute;top:8px;right:calc(50% - 22px);min-width:16px;height:16px;
                   padding:0 4px;border-radius:100px;background:var(--ko);color:#fff;
                   font-size:9.5px;font-weight:700;display:flex;align-items:center;justify-content:center}

/* ============ Vues ============ */

.vue-c{display:none}
.vue-c.actif{display:block;animation:apparait .18s ease}
@keyframes apparait{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ============ États vides et chargement ============ */

.vide{text-align:center;padding:44px 24px;color:var(--n-500)}
.vide i{font-size:30px;color:var(--n-300);display:block;margin-bottom:12px}
.vide b{display:block;color:var(--n-900);margin-bottom:4px}
.squelette{height:14px;border-radius:6px;background:linear-gradient(90deg,var(--n-100),var(--n-50),var(--n-100));
           background-size:200% 100%;animation:brille 1.2s infinite}
@keyframes brille{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ============ Feuille modale (bas d'écran) ============ */

.feuille{position:fixed;inset:0;z-index:60;display:none}
.feuille.ouverte{display:block}
.feuille .fond{position:absolute;inset:0;background:rgba(16,24,40,.45)}
.feuille .corps{position:absolute;left:50%;bottom:0;transform:translateX(-50%);
                width:100%;max-width:480px;background:var(--blanc);
                border-radius:var(--r-xl) var(--r-xl) 0 0;padding:8px 0 calc(20px + env(safe-area-inset-bottom));
                max-height:86vh;overflow-y:auto;animation:monte .22s cubic-bezier(.2,.7,.2,1)}
@keyframes monte{from{transform:translate(-50%,100%)}to{transform:translate(-50%,0)}}
.feuille .poignee{width:38px;height:4px;border-radius:100px;background:var(--n-300);margin:6px auto 14px}
.feuille h3{padding:0 20px 12px;font-size:17px}

/* ============ Notification ============ */

.toast{position:fixed;left:50%;bottom:calc(var(--barre) + 18px);transform:translateX(-50%) translateY(20px);
       background:var(--n-900);color:#fff;padding:12px 20px;border-radius:100px;font-size:14px;
       font-weight:600;opacity:0;pointer-events:none;transition:all .25s;z-index:80;max-width:88%;
       display:flex;align-items:center;gap:9px;box-shadow:var(--ombre-h)}
.toast i{font-size:15px;flex:none}
.toast span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.ko{background:var(--ko)}

/* ============ Alerte en ligne ============ */

.alerte{margin:0 16px 14px;padding:12px 15px;border-radius:var(--r);font-size:13px;display:none}
.alerte.on{display:block}
.alerte.err{background:var(--ko-l);color:var(--ko)}
.alerte.att{background:var(--att-l);color:var(--att)}
.alerte.ok{background:var(--ok-l);color:var(--ok)}

/* ============ Écran de connexion ============ */

.auth{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:28px 20px}
.auth .marque{text-align:center;margin-bottom:26px}
.auth .marque .logo{width:58px;height:58px;border-radius:18px;background:var(--v);color:var(--v-ink);
                    display:flex;align-items:center;justify-content:center;font-size:23px;margin:0 auto 14px}
.auth .marque h1{font-size:23px}
.auth .marque p{font-size:14px;color:var(--n-500);margin-top:5px}
.auth .segmente{margin:0 0 20px}
.auth .champ{padding:0 0 14px}
.auth .btn-bloc{margin:22px 0 0}
.auth .bas{text-align:center;font-size:13px;color:var(--n-500);margin-top:22px}
.auth .bas a{color:var(--v-t);font-weight:600}


/* =====================================================================
   Comportements d'application installée
   ===================================================================== */

/* Sur un téléphone, la sélection de texte au appui long et le
   surlignage bleu au tap trahissent immédiatement une page web.
   On les retire partout sauf là où l'on saisit vraiment du texte. */
body{
  -webkit-tap-highlight-color:transparent;
  /* Supprime le zoom par double tape sans interdire le pincement :
     l'agrandissement reste possible pour qui en a besoin. */
  touch-action:manipulation;
  -webkit-touch-callout:none;
  user-select:none;
  /* Coupe le rebond élastique de la page, remplacé par notre propre
     geste de rafraîchissement. */
  overscroll-behavior-y:contain;
}
input,textarea,select,[contenteditable]{user-select:text;-webkit-user-select:text}
/* Une référence ou un code de retrait doivent rester copiables. */
.ref,.recap .l b,#qrRef,.carte-qr .boite{user-select:text;-webkit-user-select:text}

/* iOS zoome sur un champ dont la police fait moins de 16 px. */
input,select,textarea{font-size:16px}

/* En mode installé, la barre d'état empiète : on lui laisse la place. */
.salut,.tete{padding-top:calc(18px + env(safe-area-inset-top))}
.bandeau-etat{padding-top:calc(9px + env(safe-area-inset-top))}

/* ---- Bandeaux d'état ---- */
.bandeau-etat{
  position:fixed;top:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:480px;z-index:70;
  background:var(--n-900);color:#fff;font-size:12.5px;font-weight:600;
  padding:9px 16px;display:flex;align-items:center;gap:9px;justify-content:center;
}
/* Le contenu descend quand un bandeau est affiché. */
body.avec-bandeau .app{padding-top:34px}

/* ---- Tirer pour rafraîchir ---- */
.tirer{
  position:absolute;top:0;left:50%;transform:translateX(-50%) translateY(-46px);
  width:36px;height:36px;border-radius:50%;background:var(--blanc);
  border:1px solid var(--n-100);box-shadow:var(--ombre-h);
  display:flex;align-items:center;justify-content:center;color:var(--v-t);
  font-size:14px;z-index:30;transition:transform .18s,opacity .18s;opacity:0;
}
.tirer.visible{opacity:1}
.tirer.pret i{transform:rotate(180deg);transition:transform .2s}
.tirer.tourne i{animation:tourne .8s linear infinite}
@keyframes tourne{to{transform:rotate(360deg)}}

/* ---- Retour tactile ---- */
/* Un élément tapé doit répondre tout de suite : sans cela l'interface
   paraît en retard, ce qui est le premier signe d'un site déguisé. */
.ligne:active,.chips button:active,.groupe .ligne:active{background:var(--n-50)}
.btn:active,.pastille-devise:active{transform:scale(.985)}
.btn,.ligne,.chips button,.pastille-devise{transition:transform .08s,background .12s}

/* ---- Respect des préférences système ---- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
                       transition-duration:.01ms !important}
}

/* ---- Carte QR dynamique ---- */
.carte-qr .boite{display:block;border:none;font:inherit;text-align:center}
.carte-qr .zone-qr{width:132px;height:132px;position:relative}
.carte-qr .zone-qr svg{display:block;width:132px;height:132px}
/* Le code expiré reste visible mais s'efface : on montre qu'il ne vaut
   plus rien sans faire disparaître la carte. */
.carte-qr .zone-qr.expire svg{opacity:.18}
.carte-qr .zone-qr .refaire{
  position:absolute;inset:0;display:none;flex-direction:column;align-items:center;
  justify-content:center;gap:6px;font-size:12px;font-weight:600;color:var(--v-t)
}
.carte-qr .zone-qr.expire .refaire{display:flex}
.carte-qr .zone-qr .refaire i{font-size:19px}
.carte-qr .boite .lg{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;
                     color:var(--n-500);padding:8px 2px 2px;font-weight:600}
/* Anneau de compte à rebours : la part restante se vide dans le sens horaire. */
.minuteur{width:13px;height:13px;border-radius:50%;flex:none;
          background:conic-gradient(var(--v) calc(var(--part,1) * 360deg), var(--n-100) 0)}

/* Compte à zéro : la carte s'assourdit sans disparaître. */
.carte-solde.vide{background:linear-gradient(160deg,#D8D2A8,#B5AE7E)}
.carte-solde.vide .soldes .sol .n{opacity:.75}

/* =====================================================================
   Adaptation aux téléphones

   Le parc va d'écrans de 320 px de large à des tablettes, avec des
   hauteurs très variables en paysage. Les valeurs par défaut ci-dessus
   visent un téléphone courant (environ 390 px) ; les paliers suivants
   corrigent les extrêmes.
   ===================================================================== */

/* La hauteur de la fenêtre change quand la barre d'adresse du navigateur
   se rétracte. 100vh ne suit pas ce mouvement et laisse un trou en bas ;
   dvh oui. On garde vh en repli pour les navigateurs plus anciens. */
.app{min-height:100vh}
@supports (height: 100dvh) {
  .app{min-height:100dvh}
  .auth{min-height:100dvh}
  .feuille .corps{max-height:86dvh}
}

/* Aucun élément ne doit provoquer de défilement horizontal : sur mobile
   c'est le défaut le plus visible et le plus difficile à diagnostiquer. */
html,body{max-width:100%;overflow-x:hidden}
img,svg,canvas{max-width:100%}
.ligne .txt b,.ligne .txt small,.profil-tete .nom{overflow-wrap:anywhere}

/* Toute cible tactile atteint 44 px, la taille d'un doigt. */
.rond,.tete .retour,.carte-solde .oeil{min-width:44px;min-height:44px}
.chips button{min-height:40px}
.onglets a{min-height:56px}

/* ---------------------------------------------------------------
   Très petits écrans (320 à 359 px) : iPhone SE première génération,
   Android d'entrée de gamme. Tout doit encore tenir sans rogner.
   --------------------------------------------------------------- */
@media (max-width: 359px) {
  body{font-size:14px}
  .salut{padding:16px 14px 4px}
  .salut .nom{font-size:19px}
  .tete{padding:14px 14px 10px}
  .tete h1{font-size:17px}

  .carte-solde{margin:12px 12px 0;padding:18px 16px 15px;border-radius:20px}
  .soldes .sol .n{font-size:22px}
  /* L'œil chevaucherait le montant : on le remonte dans un coin. */
  .carte-solde .oeil{top:12px;right:10px;transform:none;width:36px;height:36px;min-width:36px;min-height:36px}

  .carte-qr{margin:12px 12px 0;min-height:150px;padding:16px}
  .carte-qr .zone-qr,.carte-qr .zone-qr svg,.qr-repli{width:112px;height:112px}

  .info-bandeau{margin:12px;padding:11px 13px;font-size:12px}
  .ligne{padding:12px 14px;gap:11px}
  .ligne .av{width:34px;height:34px;font-size:13px}
  .ligne .txt b{font-size:13.5px}
  .ligne .val .m{font-size:13.5px}

  .montant-boite{margin:0 12px 4px;padding:14px 14px}
  .montant-boite input,.montant-boite .fige{font-size:22px}
  .pastille-devise{padding:7px 10px;font-size:13px}
  .champ{padding:0 12px 12px}
  .recap{margin:16px 12px 0}
  .recap .l{padding:11px 13px;font-size:13px}
  .btn-bloc{margin:16px 12px}
  .duo{grid-template-columns:1fr;padding:4px 12px 12px}

  .stats-3{gap:8px;padding:16px 12px 4px}
  .stats-3 .c{padding:12px 4px}
  .stats-3 .c .n{font-size:18px}
  .stats-3 .c .t{font-size:10.5px}
  .groupe{margin:8px 12px 0}

  .onglets a{font-size:10px;gap:3px}
  .onglets a i{font-size:16px}
  .onglets a.actif::before{width:48px}
}

/* ---------------------------------------------------------------
   Grands téléphones (430 px et plus) : on desserre légèrement plutôt
   que de laisser des marges qui paraissent étriquées.
   --------------------------------------------------------------- */
@media (min-width: 430px) {
  .soldes .sol .n{font-size:28px}
  .carte-qr .zone-qr,.carte-qr .zone-qr svg,.qr-repli{width:148px;height:148px}
  .ligne{padding:14px 22px}
  .sec-tete{padding:24px 22px 10px}
}

/* ---------------------------------------------------------------
   Paysage et écrans bas : la barre d'onglets et les feuilles modales
   mangent une hauteur qui devient rare.
   --------------------------------------------------------------- */
@media (orientation: landscape) and (max-height: 520px) {
  :root{--barre:52px}
  .onglets a{height:52px;min-height:52px;font-size:10px}
  .onglets a i{font-size:15px}
  .onglets a.actif::before{height:28px;top:6px}

  .carte-solde{padding:14px 20px 12px}
  .soldes .sol .n{font-size:22px}
  /* Le QR n'a plus sa place : il reste accessible depuis le profil. */
  .carte-qr{min-height:0;padding:14px}
  .carte-qr .zone-qr,.carte-qr .zone-qr svg,.qr-repli{width:100px;height:100px}

  .feuille .corps{max-height:94vh}
  .auth{padding:16px 20px;justify-content:flex-start}
  .auth .marque{margin-bottom:16px}
  .auth .marque .logo{width:44px;height:44px;font-size:18px;margin-bottom:8px}
}

/* ---------------------------------------------------------------
   Tablettes et ordinateurs : l'application reste une colonne, posée
   sur un fond neutre, plutôt que de s'étirer sur toute la largeur.
   --------------------------------------------------------------- */
@media (min-width: 520px) {
  body{background:var(--n-50)}
  .app{box-shadow:0 0 0 1px var(--n-100), 0 10px 40px rgba(16,24,40,.07)}
  /* Sans cela, un survol à la souris ne produit aucun retour. */
  .ligne:hover,.chips button:hover{background:var(--n-50)}
  .btn-v:hover:not(:disabled){background:var(--v-d)}
}

/* ---------------------------------------------------------------
   Replis pour les navigateurs plus anciens
   --------------------------------------------------------------- */

/* conic-gradient manque sur les WebView Android antérieures à 2020 :
   le minuteur devient une pastille pleine, sans anneau. */
@supports not (background: conic-gradient(#000 0deg, #fff 0)) {
  .minuteur{background:var(--v)}
}

/* Sans backdrop-filter, la barre d'onglets doit rester opaque, sinon le
   contenu qui défile dessous la rend illisible. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .onglets{background:var(--blanc)}
}
.onglets{-webkit-backdrop-filter:blur(10px)}

/* Certains Android n'appliquent pas gap dans les grilles anciennes. */
@supports not (gap: 1px) {
  .stats-3 .c,.duo .c{margin:0 4px}
}