/* ══════════════════════════════════════════════════════════════════════════
   feuille-telephone.css — L'APPARENCE DU PORTEFEUILLE, DANS L'ADMIN
   ADMIN-EXTERIEUR-v3
   ══════════════════════════════════════════════════════════════════════════

   D'OU ELLE VIENT : c'est le bloc <style> de
   A-DEPOSER-WALLET-v162/SITE-WALLET-A-DEPOSER/wallet.html, RECOPIE.
   Pas un lien, pas un import : une COPIE, comme les logos. C'est la regle
   du projet — les deux mondes ne partagent aucun fichier.

   ⚠ CE QUI A ETE CHANGE, ET RIEN D'AUTRE : chaque selecteur a recu le
     prefixe « .cadre-telephone ». Aucune declaration n'a ete touchee :
     ni une couleur, ni une taille, ni une ombre. La transformation est
     mecanique et reproductible, et elle a un seul but :

       LA FEUILLE DU TELEPHONE NE DOIT RIEN POUVOIR REPEINDRE DANS L'ADMIN.

     Sans elle, « :root{--bg:…} », « body{…} » et « *{box-sizing} » du
     portefeuille redefiniraient les variables de l'admin — les deux
     feuilles emploient LES MEMES NOMS (--bg, --text, --text-2, --text-3,
     --accent). L'admin garderait ses couleurs par chance, pas par
     construction. Ici, tout ce que porte cette feuille s'arrete au bord
     du cadre.

   ⚠ « :root » et « body » sont devenus « .cadre-telephone » : c'est LUI
     qui porte desormais les variables du portefeuille. « html[data-theme=
     "clair"] » est devenu « .cadre-telephone[data-theme="clair"] » :
     l'admin ne pose jamais cet attribut, ces regles sont donc recopiees
     mais dormantes. On ne les a pas supprimees pour que la comparaison
     avec wallet.html reste possible ligne a ligne.

   ⚠ CE QUE CETTE FEUILLE NE FAIT PAS : elle ne charge aucune police
     distante, aucune image distante, aucun @import. Elle ne parle a
     personne.
   ══════════════════════════════════════════════════════════════════════ */

/* Ce que « *{box-sizing:border-box} » faisait pour la page entiere du
   portefeuille, et qui doit valoir pour le cadre lui-meme. */
.cadre-telephone{box-sizing:border-box}

/* =============================================================================
   SUPER SENIOR — IDENTITE VISUELLE
   ============================================================================= */

.cadre-telephone{
  /* Palette Super Senior : bleu nuit et or, reprise du robot et du site.
     Les noms de variables du prototype sont conserves tels quels, pour ne pas
     avoir a reecrire les 900 lignes de CSS qui s'appuient dessus. */
  --bg:#060d1a;
  --page:#060d1a;
  --surface:#0d1829;
  --surface-2:#111f35;
  --surface-3:#1a2d4a;
  --line:rgba(59,130,246,.20);
  --line-2:rgba(229,161,0,.30);
  --text:#e8f0fe;
  --text-2:#94a3b8;
  --text-3:#475569;
  --accent:#e5a100;
  --accent-2:#f0c040;
  --bleu:#1d4ed8;
  --bleu-2:#3b82f6;
  --grad:linear-gradient(135deg,#f0c040 0%,#e5a100 55%,#c98600 100%);
  --grad-soft:linear-gradient(135deg,rgba(229,161,0,.16),rgba(59,130,246,.10));
  --pos:#22c55e;
  --neg:#ef4444;
  --barre:rgba(11,13,17,.86);      /* barre d'onglets, fond translucide */
  --chassis:#0e1015;               /* cadre du telephone, sur ordinateur */
  --contour:rgba(255,255,255,.09);
  --tabbar-h:78px;
  --r-s:10px; --r-m:14px; --r-l:20px; --r-xl:26px;
  --font:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --titre:"Orbitron","DM Sans",sans-serif;
  --mono:"JetBrains Mono","SF Mono",ui-monospace,"Roboto Mono",Menlo,Consolas,monospace;
}/* Theme clair. Le portefeuille s'utilise aussi en plein jour, ou un fond
   sombre devient illisible au soleil. Les memes variables sont redefinies :
   aucune regle du reste de la feuille n'a besoin d'etre touchee. */

.cadre-telephone[data-theme="clair"]{
  --bg:#f4f6fb;
  --page:#ffffff;
  --surface:#ffffff;
  --surface-2:#f1f4f9;
  --surface-3:#e4e9f2;
  --line:rgba(29,78,216,.14);
  --line-2:rgba(229,161,0,.35);
  --text:#0f1b2d;
  --text-2:#3f4a5c;
  /* Le gris secondaire du theme sombre donnait 3,6:1 sur blanc : sous la
     norme de 4,5:1, et nos clients ne sont pas des vingtenaires. Assombri
     jusqu'a 5,9:1. */
  --text-3:#5a6678;
  /* L'or de la marque tombe a 2,2:1 sur blanc : l'onglet actif devenait
     illisible en plein jour. Sur fond clair, on descend l'or ; les fonds
     dores (--accent-2, --grad) restent inchanges, eux portent du texte
     sombre. */
  --accent:#8a6200;
  --barre:rgba(255,255,255,.90);
  --chassis:#c9d2e0;
  --contour:rgba(29,78,216,.16);
}
.cadre-telephone[data-theme="clair"] body{
  background:
    radial-gradient(900px 600px at 15% -10%,rgba(229,161,0,.10),transparent 60%),
    radial-gradient(800px 600px at 90% 110%,rgba(59,130,246,.10),transparent 60%),
    var(--bg);
}
.cadre-telephone *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.cadre-telephone, .cadre-telephone{margin:0;padding:0}
.cadre-telephone{
  background:
    radial-gradient(900px 600px at 15% -10%,rgba(229,161,0,.10),transparent 60%),
    radial-gradient(800px 600px at 90% 110%,rgba(59,130,246,.10),transparent 60%),
    var(--bg);
  color:var(--text);font-family:var(--font);min-height:100vh;
  display:flex;align-items:flex-start;justify-content:center;gap:44px;
  padding:40px 24px 60px;flex-wrap:wrap;
}
.cadre-telephone button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
.cadre-telephone input, .cadre-telephone textarea, .cadre-telephone select{font-family:inherit}/* ---------- Cadre du telephone ---------- */


.cadre-telephone .device{position:relative;flex:0 0 auto}
.cadre-telephone .phone{
  width:392px;height:840px;background:var(--page);border-radius:52px;
  border:1px solid var(--contour);position:relative;overflow:hidden;
  box-shadow:0 0 0 10px var(--chassis),0 0 0 11px rgba(255,255,255,.06),
             0 50px 90px -20px rgba(0,0,0,.45),0 0 130px -40px rgba(255,140,60,.25);
}
.cadre-telephone .notch{
  position:absolute;top:12px;left:50%;transform:translateX(-50%);
  width:112px;height:28px;background:#000;border-radius:20px;z-index:60;
}


.cadre-telephone .statusbar{
  position:absolute;top:0;left:0;right:0;height:52px;z-index:55;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 30px 0;font-size:13px;font-weight:600;letter-spacing:.2px;pointer-events:none;
}
.cadre-telephone .statusbar .icons{display:flex;gap:5px;align-items:center;opacity:.9}/* ---------- Bandeau de demonstration ---------- */


.cadre-telephone .demo-strip{
  position:absolute;top:52px;left:0;right:0;height:22px;z-index:54;
  background:rgba(255,176,32,.10);border-bottom:1px solid rgba(255,176,32,.18);
  display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#FFC24B;
}
.cadre-telephone .demo-strip svg{width:10px;height:10px}/* ---------- Pile d'ecrans ---------- *//* La zone d'affichage descendait jusqu'en bas du telephone, et la barre
   d'onglets se posait par-dessus : tout ce qui collait au bas de l'ecran
   passait dessous. C'est ce qui rendait le bouton "Echanger" inatteignable,
   cache derriere Accueil / Echanger / Recherche / Reglages.
   Quand la barre est affichee, la zone s'arrete maintenant juste au-dessus. */



.cadre-telephone .viewport{position:absolute;top:74px;left:0;right:0;bottom:0;overflow:hidden}
.cadre-telephone .viewport.avec-tabbar{bottom:var(--tabbar-h)}/* Le bas de liste n'a plus a reserver la place de la barre : elle est deja
   hors de la zone. On garde une marge de confort, pas un trou. */

.cadre-telephone .viewport.avec-tabbar .scroll-pad{padding-bottom:18px}
.cadre-telephone .view{
  position:absolute;inset:0;display:none;flex-direction:column;
  overflow-y:auto;overflow-x:hidden;scrollbar-width:none;
}
.cadre-telephone .view::-webkit-scrollbar{display:none}
.cadre-telephone .view.active{display:flex;animation:viewIn .26s cubic-bezier(.22,.8,.3,1)}
@keyframes viewIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.cadre-telephone .view.back.active{animation:viewBack .26s cubic-bezier(.22,.8,.3,1)}
@keyframes viewBack{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}/* ---------- Redessin pendant la frappe ----------
   L'ANIMATION D'ENTREE NE DOIT PAS REJOUER A CHAQUE TOUCHE.

   Le portefeuille redessine l'ecran entier a chaque caractere tape, pour
   recalculer ce que le montant implique. L'ecran redessine est un element
   neuf, donc son animation d'entree repart : l'ecran se decale de 14 px et
   repasse par la transparence a CHAQUE chiffre. Sur la feuille de vente,
   c'est pire encore — elle remonte du bas de l'ecran a chaque frappe.

   On coupe donc l'animation quand le redessin vient d'une saisie. Elle
   reste entiere quand on change reellement d'ecran, ce qui est le seul
   moment ou elle a un sens. */


.cadre-telephone .view.active.sans-anim{animation:none}
.cadre-telephone .sheet.sans-anim{animation:none}
.cadre-telephone .pad{padding:0 20px}
.cadre-telephone .grow{flex:1}
.cadre-telephone .scroll-pad{padding-bottom:96px}/* ---------- Marque ---------- *//* Bouclier bleu au S dore : le meme embleme que le robot et le site. Le
   fond est dessine en CSS plutot qu'en image pour rester net a toute taille. *//* Le logo etait dessine de deux facons differentes dans l'application :
   ici, un carre decoupe au clip-path avec la lettre en Orbitron — d'ou un S
   epais et une pointe anguleuse ; et ailleurs, le vrai bouclier vectoriel du
   site, au trace arrondi et a la lettre plus fine. Les deux se cotoyaient a
   l'ecran. C'est le second qui fait foi : il est desormais seul, produit par
   la fonction logoSS(). */




.cadre-telephone .logo{
  width:var(--s,52px);height:var(--s,52px);flex:0 0 auto;
  display:grid;place-items:center;position:relative;
  filter:drop-shadow(0 8px 24px rgba(29,78,216,.45));
}
.cadre-telephone .logo svg{width:100%;height:100%;display:block}
.cadre-telephone .wordmark{font-size:19px;font-weight:750;letter-spacing:-.03em}
.cadre-telephone .wordmark span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}/* ---------- Barre de navigation superieure ---------- */


.cadre-telephone .topbar{display:flex;align-items:center;gap:12px;padding:14px 20px 10px;flex:0 0 auto}
.cadre-telephone .topbar h2{font-size:17px;font-weight:650;margin:0;letter-spacing:-.02em;flex:1;text-align:center}
.cadre-telephone .iconbtn{
  width:36px;height:36px;border-radius:50%;background:var(--surface);
  display:grid;place-items:center;color:var(--text-2);flex:0 0 auto;
  transition:background .16s,color .16s;
}
.cadre-telephone .iconbtn:hover{background:var(--surface-2);color:var(--text)}
.cadre-telephone .iconbtn.ghost{background:transparent}
.cadre-telephone .iconbtn svg{width:18px;height:18px}/* ---------- Typographie ---------- */


.cadre-telephone h1{font-size:26px;font-weight:750;letter-spacing:-.035em;margin:0 0 10px}
.cadre-telephone h3{font-size:15px;font-weight:650;margin:0 0 12px;letter-spacing:-.01em}
.cadre-telephone p.lead{color:var(--text-2);font-size:14px;line-height:1.55;margin:0 0 22px}
.cadre-telephone .label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin-bottom:9px}
.cadre-telephone .mono{font-family:var(--mono);font-size:12.5px;letter-spacing:-.01em}/* ---------- Boutons ---------- */


.cadre-telephone .btn{
  width:100%;height:52px;border-radius:var(--r-m);font-size:15px;font-weight:650;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:transform .1s,opacity .16s,background .16s;letter-spacing:-.01em;
}
.cadre-telephone .btn:active{transform:scale(.985)}
.cadre-telephone .btn-primary{background:var(--grad);color:#1A1206;box-shadow:0 10px 26px -10px rgba(255,140,60,.7)}
.cadre-telephone .btn-secondary{background:var(--surface-2);color:var(--text)}
.cadre-telephone .btn-secondary:hover{background:var(--surface-3)}
.cadre-telephone .btn-ghost{background:transparent;color:var(--text-2)}
.cadre-telephone .btn:disabled{opacity:.32;pointer-events:none;box-shadow:none}
.cadre-telephone .btn-row{display:flex;gap:10px}
.cadre-telephone .btn-row .btn{flex:1 1 0;min-width:0}/* ---------------------------------------------------------------------------
   TAILLE DES ICONES — la cause des chevauchements
   ---------------------------------------------------------------------------
   La fonction icon() produit un <svg viewBox="0 0 24 24"> sans attribut de
   taille : sans regle CSS, le navigateur lui donne sa taille par defaut
   (souvent 300x150 px) et l'icone devient enorme, deborde du bouton et mange
   le texte voisin. Les bulles de l'accueil avaient bien leur regle, pas les
   boutons — d'ou des fleches gigantesques qui se chevauchaient.
   Cette regle generale fixe une taille partout ou rien n'est precise. */


.cadre-telephone svg:not([width]):not([style*="width"]){width:20px;height:20px;flex:0 0 auto}
.cadre-telephone .btn svg{width:18px;height:18px;flex:0 0 auto}
.cadre-telephone .btn{padding:0 14px}
.cadre-telephone .btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}/* Le texte des boutons doit pouvoir retrecir plutot que deborder. */


.cadre-telephone .token-pick{max-width:52%;overflow:hidden}
.cadre-telephone .token-pick svg{width:16px;height:16px;flex:0 0 auto}/* ---------------------------------------------------------------------------
   ADAPTATION A LA TAILLE DE L'APPAREIL
   ---------------------------------------------------------------------------
   Un Galaxy S24 et un iPhone SE n'ont pas la meme largeur utile. Plutot que
   des tailles fixes, on reduit progressivement les elements les plus larges
   en dessous de 400 px, puis de 360 px. *//* Les regles de reduction pour petits ecrans sont en toute fin de feuille :
   placees ici, elles etaient annulees par .action .bubble redefini plus bas.
   Voir le bloc "ADAPTATION AUX PETITS ECRANS", tout en bas de la feuille.
   (Ne jamais ecrire la balise de fermeture d'un style dans un commentaire :
   le navigateur la lit et ferme la feuille a cet endroit.) *//* Colle en bas de l'ecran. Sans cela, un ecran plus long que la fenetre
   pousse le bouton d'action hors de vue : c'est ce qui rendait l'echange
   impossible a valider, le bouton existait mais restait invisible. */





.cadre-telephone .footer-actions{
  padding:14px 20px calc(20px + env(safe-area-inset-bottom));
  flex:0 0 auto;position:sticky;bottom:0;z-index:6;
  background:linear-gradient(to top,var(--page) 72%,transparent);
}/* ---------- Cartes ---------- */


.cadre-telephone .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:16px}
.cadre-telephone .card+.card{margin-top:10px}/* ---------- Accueil : solde ---------- */


.cadre-telephone .balance-wrap{padding:16px 20px 4px;text-align:center}
.cadre-telephone .balance-label{font-size:12.5px;color:var(--text-3);font-weight:550;margin-bottom:6px}
.cadre-telephone .balance{font-size:40px;font-weight:750;letter-spacing:-.045em;line-height:1.1}
.cadre-telephone .balance small{font-size:24px;color:var(--text-2);font-weight:650}
.cadre-telephone .balance-delta{
  display:inline-flex;align-items:center;gap:5px;margin-top:9px;
  font-size:13px;font-weight:600;padding:4px 11px;border-radius:20px;
}
.cadre-telephone .balance-delta.up{color:var(--pos);background:rgba(49,213,131,.11)}
.cadre-telephone .balance-delta.down{color:var(--neg);background:rgba(255,90,110,.11)}/* ---------- Actualiser ----------
   Le bouton se tient a cote du solde, la ou le doute nait. Un contrepoids
   invisible de meme largeur lui fait face : sans lui, le montant cesserait
   d'etre centre le jour ou l'on ajoute le bouton. */


.cadre-telephone .balance-ligne{display:flex;align-items:center;justify-content:center;gap:8px}/* Le montant ne se coupe jamais en deux lignes : un solde ecrit sur deux
   etages se lit mal et se confond avec le detail qui suit. */

.cadre-telephone .balance-ligne .balance{flex:0 1 auto;min-width:0;white-space:nowrap}
.cadre-telephone .btn-actualiser{width:38px;height:38px;flex:0 0 38px}
.cadre-telephone .btn-actualiser svg{width:20px;height:20px}
.cadre-telephone .balance-contrepoids{width:38px;flex:0 0 38px}
.cadre-telephone .btn-actualiser:active{background:var(--surface-2)}/* Le tour complet dure une seconde : assez lent pour etre suivi de l'oeil,
   assez rapide pour ne pas donner l'impression que l'application peine. */

.cadre-telephone .btn-actualiser.tourne svg{animation:spin 1s linear infinite}/* Le rond qui tourne pendant le contrôle d'une photo de vérification. */

.cadre-telephone .kyc-spin{border:5px solid var(--surface-2);border-top-color:#e5a100;border-radius:50%;animation:spin .9s linear infinite}/* La boîte aux lettres et sa pastille. Le halo est une ombre qui respire :
   aucun mouvement de l'icône elle-même, donc rien qui saute aux yeux de
   façon désagréable — seulement une présence. */


.cadre-telephone .boite{position:relative}
.cadre-telephone .pastille{
  position:absolute;top:1px;right:1px;min-width:16px;height:16px;padding:0 4px;
  border-radius:9px;background:#ef4444;color:#fff;font-size:10px;font-weight:700;
  line-height:16px;text-align:center;border:2px solid var(--page);
  box-sizing:content-box;
}
.cadre-telephone .boite.bat{animation:boiteBat 2.4s ease-in-out infinite}
@keyframes boiteBat{
  0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.42)}
  50%    {box-shadow:0 0 0 7px rgba(239,68,68,0)}
}
@media (prefers-reduced-motion:reduce){ .cadre-telephone .boite.bat{animation:none} }
.cadre-telephone .btn-actualiser.tourne{color:var(--accent)}
.cadre-telephone .balance-vu{font-size:11.5px;color:var(--text-3);margin:2px 0 0}/* ---------- Coche de reussite ----------
   Elle apparait en s'agrandissant, une fois, sans clignoter : une operation
   d'argent se conclut par un signe calme, pas par une fete. */


.cadre-telephone .coche-ok{
  width:84px;height:84px;border-radius:50%;
  background:rgba(49,213,131,.13);color:var(--pos);
  display:grid;place-items:center;
  animation:pop .42s cubic-bezier(.2,.9,.3,1.3) both;
}
.cadre-telephone .coche-ok svg{width:42px;height:42px;stroke-width:2.4}/* ---------- Machine en attente d'activation ----------
   Un point qui respire, pas qui clignote : le clignotement signale une
   alerte, ici il ne se passe rien d'inquietant, on attend simplement. */


.cadre-telephone .pastille-attente{
  width:8px;height:8px;border-radius:50%;background:var(--accent);
  flex:0 0 auto;animation:respire 1.9s ease-in-out infinite;
}
@keyframes respire{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.82)}}/* ---------- Actions rapides ---------- */


.cadre-telephone .actions{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:22px 20px 20px}
.cadre-telephone .action{display:flex;flex-direction:column;align-items:center;gap:8px}
.cadre-telephone .action .bubble{
  width:50px;height:50px;border-radius:50%;background:var(--surface-2);
  display:grid;place-items:center;color:var(--accent);
  border:1px solid var(--line);transition:background .16s,transform .1s;
}
.cadre-telephone .action:active .bubble{transform:scale(.93)}
.cadre-telephone .action:hover .bubble{background:var(--surface-3)}
.cadre-telephone .action .bubble svg{width:20px;height:20px}
.cadre-telephone .action span{font-size:11.5px;color:var(--text-2);font-weight:550}/* ---------- Filtres de reseau ---------- */


.cadre-telephone .chips{display:flex;gap:7px;padding:0 20px 14px;overflow-x:auto;scrollbar-width:none}
.cadre-telephone .chips::-webkit-scrollbar{display:none}
.cadre-telephone .chip{
  padding:7px 14px;border-radius:20px;background:var(--surface);border:1px solid var(--line);
  font-size:12.5px;font-weight:600;color:var(--text-2);white-space:nowrap;transition:all .16s;
}
.cadre-telephone .chip.on{background:rgba(255,176,32,.12);border-color:rgba(255,176,32,.35);color:var(--accent)}/* ---------- Liste de jetons ---------- */


.cadre-telephone .list{padding:0 12px}
.cadre-telephone .row{
  display:flex;align-items:center;gap:13px;padding:11px 8px;border-radius:var(--r-m);
  transition:background .14s;width:100%;text-align:left;
}
.cadre-telephone .row:hover{background:var(--surface)}
.cadre-telephone .row:active{background:var(--surface-2)}
.cadre-telephone .coin{position:relative;flex:0 0 auto}
.cadre-telephone .coin .disc{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  font-size:13.5px;font-weight:750;color:#fff;letter-spacing:-.02em;
}
.cadre-telephone .coin .net{
  position:absolute;right:-3px;bottom:-3px;width:17px;height:17px;border-radius:50%;
  border:2.5px solid var(--page);display:grid;place-items:center;font-size:7.5px;font-weight:800;color:#fff;
}
.cadre-telephone .row-main{flex:1;min-width:0}
.cadre-telephone .row-title{font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.cadre-telephone .row-sub{font-size:12.5px;color:var(--text-3);margin-top:2px}
.cadre-telephone .row-end{text-align:right;flex:0 0 auto}
.cadre-telephone .row-value{font-size:14.5px;font-weight:600}
.cadre-telephone .row-change{font-size:12.5px;margin-top:2px;font-weight:550}
.cadre-telephone .up{color:var(--pos)} .cadre-telephone .down{color:var(--neg)}/* ---------- Barre de navigation inferieure ---------- *//* La hauteur passe par une variable : la zone d'affichage s'arrete dessus,
   et les ecrans courts la reduisent sans que rien d'autre ne bouge. */



.cadre-telephone .tabbar{
  position:absolute;left:0;right:0;bottom:0;height:var(--tabbar-h);z-index:50;
  background:var(--barre);backdrop-filter:blur(24px);
  border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(4,1fr);
  padding-bottom:10px;
}
.cadre-telephone .tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:var(--text-3);transition:color .16s}
.cadre-telephone .tab.on{color:var(--accent)}
.cadre-telephone .tab svg{width:21px;height:21px}
.cadre-telephone .tab span{font-size:10px;font-weight:600;letter-spacing:.01em}/* ---------- Champs de saisie ---------- */


.cadre-telephone .field{
  width:100%;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);
  padding:14px 15px;color:var(--text);font-size:14.5px;outline:none;transition:border-color .16s;
}
.cadre-telephone .field:focus{border-color:rgba(255,176,32,.5)}
.cadre-telephone .field::placeholder{color:var(--text-3)}
.cadre-telephone textarea.field{resize:none;line-height:1.7;font-family:var(--mono);font-size:13.5px}
.cadre-telephone .field-note{font-size:12px;margin-top:7px;color:var(--text-3);line-height:1.5}
.cadre-telephone .field-note.err{color:var(--neg)}
.cadre-telephone .field-note.ok{color:var(--pos)}
.cadre-telephone .input-group{margin-bottom:16px}/* Champs de connexion. Volontairement hauts (52 px) et en 16 px de police :
   en dessous, iOS zoome automatiquement a la mise au point, ce qui deforme
   l'ecran — genant pour un public senior. */

.cadre-telephone .input{
  width:100%;height:52px;padding:0 16px;
  background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-m);color:var(--text);
  font-family:var(--font);font-size:16px;outline:none;
  transition:border-color .15s,background .15s;
}
.cadre-telephone .input::placeholder{color:var(--text-3)}
.cadre-telephone .input:focus{border-color:var(--accent);background:var(--surface-3)}/* ---------- Phrase de recuperation ---------- */


.cadre-telephone .seed-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px}
.cadre-telephone .seed-word{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-s);
  padding:11px 12px;display:flex;align-items:center;gap:9px;
}
.cadre-telephone .seed-word i{font-style:normal;font-size:11px;color:var(--text-3);font-weight:650;min-width:15px}
.cadre-telephone .seed-word b{font-weight:600;font-size:13.5px;letter-spacing:-.01em}
.cadre-telephone .blurred{filter:blur(7px);user-select:none}
.cadre-telephone .reveal-overlay{
  position:absolute;inset:0;display:grid;place-items:center;gap:10px;
  background:rgba(11,13,17,.35);border-radius:var(--r-m);cursor:pointer;
}
.cadre-telephone .reveal-overlay div{text-align:center}
.cadre-telephone .reveal-overlay svg{width:26px;height:26px;color:var(--accent);margin-bottom:6px}
.cadre-telephone .reveal-overlay p{margin:0;font-size:13px;font-weight:600}
.cadre-telephone .reveal-overlay small{color:var(--text-3);font-size:11.5px}/* ---------- Avertissement ---------- */


.cadre-telephone .warn{
  display:flex;gap:12px;padding:14px;border-radius:var(--r-m);
  background:rgba(255,176,32,.07);border:1px solid rgba(255,176,32,.2);margin-bottom:10px;
}
.cadre-telephone .warn svg{width:18px;height:18px;color:var(--accent);flex:0 0 auto;margin-top:1px}
.cadre-telephone .warn p{margin:0;font-size:13px;line-height:1.55;color:var(--text-2)}
.cadre-telephone .warn b{color:var(--text);font-weight:600}
.cadre-telephone .warn.danger{background:rgba(255,90,110,.07);border-color:rgba(255,90,110,.22)}
.cadre-telephone .warn.danger svg{color:var(--neg)}/* ---------- Cases a cocher ---------- */


.cadre-telephone .check{display:flex;gap:12px;align-items:flex-start;padding:13px 0;cursor:pointer}
.cadre-telephone .check .box{
  width:21px;height:21px;border-radius:6px;border:1.8px solid var(--line-2);
  flex:0 0 auto;display:grid;place-items:center;transition:all .16s;margin-top:1px;
}
.cadre-telephone .check.on .box{background:var(--accent);border-color:var(--accent)}
.cadre-telephone .check .box svg{width:12px;height:12px;color:#1A1206;opacity:0;transition:opacity .16s}
.cadre-telephone .check.on .box svg{opacity:1}
.cadre-telephone .check p{margin:0;font-size:13.5px;line-height:1.5;color:var(--text-2)}/* ---------- Verification de la phrase ---------- */


.cadre-telephone .verify-slot{
  height:48px;border-radius:var(--r-m);border:1.5px dashed var(--line-2);
  display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:13.5px;font-weight:600;margin-bottom:9px;color:var(--text-3);
}
.cadre-telephone .verify-slot.filled{border-style:solid;border-color:rgba(255,176,32,.45);background:rgba(255,176,32,.07);color:var(--text)}
.cadre-telephone .verify-slot i{font-style:normal;font-size:11px;color:var(--text-3)}
.cadre-telephone .word-bank{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.cadre-telephone .word-pick{
  padding:9px 15px;border-radius:20px;background:var(--surface-2);border:1px solid var(--line);
  font-size:13px;font-weight:600;transition:all .14s;
}
.cadre-telephone .word-pick:hover{background:var(--surface-3)}
.cadre-telephone .word-pick.used{opacity:.28;pointer-events:none}/* ---------- Code secret ---------- */


.cadre-telephone .pin-dots{display:flex;justify-content:center;gap:16px;margin:34px 0 auto}
.cadre-telephone .pin-dot{width:13px;height:13px;border-radius:50%;background:var(--surface-3);transition:all .18s}
.cadre-telephone .pin-dot.on{background:var(--accent);transform:scale(1.15)}
.cadre-telephone .pin-dots.shake{animation:shake .38s}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-9px)}40%{transform:translateX(9px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
.cadre-telephone .keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:0 34px 26px}
.cadre-telephone .key{
  height:62px;border-radius:50%;font-size:24px;font-weight:500;
  display:grid;place-items:center;transition:background .14s;color:var(--text);
}
.cadre-telephone .key:hover{background:var(--surface)}
.cadre-telephone .key:active{background:var(--surface-2)}
.cadre-telephone .key svg{width:22px;height:22px}/* ---------- Reception ---------- *//* 232 = 200 pour le QR + 16 de blanc de chaque cote. Le blanc n'est pas
   decoratif : un code QR ne se lit pas sans marge claire autour. */



.cadre-telephone .qr-card{
  background:#fff;border-radius:var(--r-l);padding:16px;width:232px;margin:0 auto;
  box-shadow:0 20px 50px -18px rgba(0,0,0,.75);
}/* Repli seulement : le QR porte desormais ses dimensions en propre, en style
   en ligne, qui l'emporte sur cette regle. Voir Views.receive. */

.cadre-telephone .qr-card svg{width:100%;height:auto;display:block}
.cadre-telephone .addr-box{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);
  padding:14px;margin-top:20px;
}
.cadre-telephone .addr-box .mono{word-break:break-all;line-height:1.7;color:var(--text-2);text-align:center}/* ---------- Envoi et echange ---------- */


.cadre-telephone .amount-input{
  width:100%;background:transparent;border:none;outline:none;color:var(--text);
  font-size:38px;font-weight:700;letter-spacing:-.04em;text-align:center;padding:8px 0;
}
.cadre-telephone .amount-input::placeholder{color:var(--surface-3)}
.cadre-telephone .swap-box{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:15px}
.cadre-telephone .swap-head{display:flex;justify-content:space-between;font-size:12px;color:var(--text-3);margin-bottom:10px}
.cadre-telephone .swap-body{display:flex;align-items:center;gap:12px}
.cadre-telephone .token-pick{
  display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:20px;padding:6px 12px 6px 6px;font-size:14px;font-weight:650;flex:0 0 auto;
}
.cadre-telephone .token-pick .disc{width:26px;height:26px;font-size:9.5px}
.cadre-telephone .token-pick svg{width:14px;height:14px;color:var(--text-3)}
.cadre-telephone .swap-amount{
  flex:1;background:transparent;border:none;outline:none;color:var(--text);
  font-size:26px;font-weight:700;text-align:right;letter-spacing:-.03em;min-width:0;
}
.cadre-telephone .swap-amount::placeholder{color:var(--surface-3)}
.cadre-telephone .swap-arrow{
  width:38px;height:38px;border-radius:12px;background:var(--surface-2);border:3px solid var(--page);
  display:grid;place-items:center;margin:-13px auto;position:relative;z-index:2;color:var(--accent);
}
.cadre-telephone .swap-arrow svg{width:17px;height:17px}/* ---------- Recapitulatif ---------- */


.cadre-telephone .summary{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:4px 15px}
.cadre-telephone .sum-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;gap:14px;font-size:13.5px}
.cadre-telephone .sum-row+.sum-row{border-top:1px solid var(--line)}
.cadre-telephone .sum-row .k{color:var(--text-3);flex:0 0 auto}
.cadre-telephone .sum-row .v{font-weight:600;text-align:right;word-break:break-all}
.cadre-telephone .sum-row.total .v{font-size:16px}/* ---------- Etats ---------- */


.cadre-telephone .center-state{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 30px;text-align:center}
.cadre-telephone .spinner{
  width:46px;height:46px;border-radius:50%;border:3px solid var(--surface-3);
  border-top-color:var(--accent);animation:spin .8s linear infinite;margin-bottom:22px;
}
@keyframes spin{to{transform:rotate(360deg)}}
.cadre-telephone .success-mark{
  width:78px;height:78px;border-radius:50%;background:var(--grad);
  display:grid;place-items:center;margin-bottom:22px;animation:pop .45s cubic-bezier(.2,1.5,.5,1);
  box-shadow:0 14px 40px -10px rgba(255,140,60,.6);
}
.cadre-telephone .success-mark svg{width:36px;height:36px;color:#1A1206}
@keyframes pop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
.cadre-telephone .empty{text-align:center;padding:56px 30px;color:var(--text-3)}
.cadre-telephone .empty svg{width:38px;height:38px;margin-bottom:14px;opacity:.4}
.cadre-telephone .empty p{font-size:13.5px;margin:0;line-height:1.6}/* ---------- Reglages ---------- */


.cadre-telephone .settings-group{margin-bottom:22px}
.cadre-telephone .settings-group>.label{padding:0 20px}
.cadre-telephone .setting{
  display:flex;align-items:center;gap:13px;padding:14px 20px;width:100%;text-align:left;
  transition:background .14s;
}
.cadre-telephone .setting:hover{background:var(--surface)}
.cadre-telephone .setting .ico{
  width:34px;height:34px;border-radius:10px;background:var(--surface-2);
  display:grid;place-items:center;color:var(--accent);flex:0 0 auto;
}
.cadre-telephone .setting .ico svg{width:16px;height:16px}
.cadre-telephone .setting-main{flex:1;min-width:0}
.cadre-telephone .setting-title{font-size:14px;font-weight:550}
.cadre-telephone .setting-sub{font-size:12px;color:var(--text-3);margin-top:2px}
.cadre-telephone .setting .chev{width:15px;height:15px;color:var(--text-3);flex:0 0 auto}
.cadre-telephone .setting.danger .ico{color:var(--neg);background:rgba(255,90,110,.1)}
.cadre-telephone .setting.danger .setting-title{color:var(--neg)}
.cadre-telephone .setting.kyc-afaire .ico{color:#e5a100;background:rgba(229,161,0,.14)}
.cadre-telephone .setting.kyc-afaire .setting-title{color:#e5a100}/* ---------- Feuille modale ---------- *//* ── LA PUBLICITE EN POP-UP ───────────────────────────────────────────────
   Elle ne remplit PAS l'ecran : une marge tout autour laisse voir le
   portefeuille derriere, pour que le client comprenne d'ou vient cette
   fenetre et qu'il puisse la fermer d'un doigt en touchant a cote.
   La marge tient compte de l'encoche et de la barre de geste. */



.cadre-telephone .pub-fond{
  position:absolute;inset:0;z-index:78;display:none;
  align-items:center;justify-content:center;
  padding:34px 26px;
  background:rgba(3,6,12,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  animation:fade .25s;
}
.cadre-telephone .pub-fond.on{display:flex}
@media (max-width:900px){
  .cadre-telephone .pub-fond{
    padding:calc(28px + env(safe-area-inset-top)) 24px calc(28px + env(safe-area-inset-bottom));
  }
}
@media (max-height:660px){ .cadre-telephone .pub-fond{padding-top:18px;padding-bottom:18px} }
@media (max-width:340px){ .cadre-telephone .pub-fond{padding-left:14px;padding-right:14px} }

.cadre-telephone .sheet-backdrop{
  position:absolute;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(3px);
  z-index:70;display:none;align-items:flex-end;
}
.cadre-telephone .sheet-backdrop.on{display:flex;animation:fade .2s}
@keyframes fade{from{opacity:0}to{opacity:1}}
.cadre-telephone .sheet{
  width:100%;background:var(--page);border-radius:var(--r-xl) var(--r-xl) 0 0;
  border-top:1px solid var(--line-2);max-height:82%;display:flex;flex-direction:column;
  animation:slideUp .3s cubic-bezier(.22,.9,.3,1);
}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:none}}
.cadre-telephone .sheet-grab{width:38px;height:4px;border-radius:3px;background:var(--surface-3);margin:11px auto 4px;flex:0 0 auto}
.cadre-telephone .sheet-head{display:flex;align-items:center;padding:8px 20px 12px;flex:0 0 auto}
.cadre-telephone .sheet-head h3{margin:0;flex:1;font-size:16px}
.cadre-telephone .sheet-body{overflow-y:auto;padding:0 12px 26px;scrollbar-width:none}
.cadre-telephone .sheet-body::-webkit-scrollbar{display:none}/* ---------- Notification ---------- */


.cadre-telephone .toast{
  position:absolute;bottom:96px;left:20px;right:20px;z-index:90;
  background:var(--surface-3);border:1px solid var(--line-2);border-radius:var(--r-m);
  padding:13px 15px;font-size:13.5px;font-weight:550;display:none;align-items:center;gap:10px;
  box-shadow:0 16px 40px -12px rgba(0,0,0,.8);
}
.cadre-telephone .toast.on{display:flex;animation:toastIn .28s cubic-bezier(.2,1.3,.4,1)}
@keyframes toastIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.cadre-telephone .toast svg{width:17px;height:17px;color:var(--pos);flex:0 0 auto}/* ---------- Interrupteur ---------- */


.cadre-telephone .switch{width:44px;height:26px;border-radius:14px;background:var(--surface-3);position:relative;transition:background .2s;flex:0 0 auto}
.cadre-telephone .switch.on{background:var(--accent)}/* ⚠ CELUI DE L'ECRAN DES JETONS EST VERT, PAS OR.
   « Ce petit bouton qui doit passer au vert, il ne passe pas au vert. »
   Ailleurs — les reglages — l'or reste : c'est la couleur de la maison. Ici
   le vert dit « c'est pris », et c'est ce qu'attend l'oeil. */

.cadre-telephone .switch.vert.on{background:var(--pos)}
.cadre-telephone button.switch{border:0;padding:0;cursor:pointer}
.cadre-telephone button.switch[disabled]{cursor:default;opacity:.75}/* Les pastilles rondes de filtre par reseau. Une ligne qui defile sur le
   cote quand les cinq ne tiennent pas — jamais de retour a la ligne, qui
   ferait sauter la liste d'en dessous. *//* Collante en haut : on change de reseau sans jamais remonter la liste.
   Fond OPAQUE — sinon les lignes defileraient visiblement dessous — et un
   filet en bas pour qu'elle se lise comme une barre et non comme un
   morceau d'ecran qui flotte. */



.cadre-telephone .resfil{display:flex;gap:10px;overflow-x:auto;padding:10px 16px 8px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  position:sticky;top:0;z-index:6;flex:0 0 auto;
  background:var(--bg);border-bottom:1px solid var(--line)}
.cadre-telephone .resfil::-webkit-scrollbar{display:none}
.cadre-telephone .resfil button{flex:0 0 auto;background:none;border:0;padding:0;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;font:inherit}
.cadre-telephone .resfil .rond{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;overflow:hidden;
  background:var(--surface-2);border:2px solid transparent;font-weight:700;font-size:15px;color:var(--text)}
.cadre-telephone .resfil button.on .rond{border-color:var(--accent)}
.cadre-telephone .resfil img{width:100%;height:100%;object-fit:cover;border-radius:50%;background:#fff}
.cadre-telephone .resfil .nom{font-size:10.5px;color:var(--text-3);max-width:52px;text-align:center}
.cadre-telephone .resfil button.on .nom{color:var(--text);font-weight:600}
.cadre-telephone .switch b{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .2s}
.cadre-telephone .switch.on b{transform:translateX(18px)}/* ---------- Onglets internes ---------- */


.cadre-telephone .segment{display:flex;background:var(--surface);border-radius:12px;padding:3px;margin:0 20px 18px}
.cadre-telephone .segment button{flex:1;height:36px;border-radius:9px;font-size:13px;font-weight:600;color:var(--text-3);transition:all .18s}
.cadre-telephone .segment button.on{background:var(--surface-3);color:var(--text)}/* ---------- Graphique ---------- */


.cadre-telephone .spark{width:100%;height:56px;display:block}/* ---------- Panneau lateral (hors telephone) ---------- */


.cadre-telephone .side{flex:0 1 380px;max-width:420px;padding-top:12px;min-width:300px}
.cadre-telephone .side h1{font-size:29px;margin-bottom:6px}
.cadre-telephone .side .sub{color:var(--text-2);font-size:14.5px;line-height:1.6;margin:0 0 26px}/* Un blanc translucide s'efface sur fond clair : on passe par la variable de
   surface, qui suit le theme. */

.cadre-telephone .panel{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-l);padding:18px;margin-bottom:12px}
.cadre-telephone .panel h4{margin:0 0 12px;font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--text-3);font-weight:700}
.cadre-telephone .panel ul{margin:0;padding-left:0;list-style:none}
.cadre-telephone .panel li{font-size:13.5px;color:var(--text-2);line-height:1.6;padding-left:22px;position:relative;margin-bottom:9px}
.cadre-telephone .panel li:last-child{margin-bottom:0}
.cadre-telephone .panel li::before{content:'';position:absolute;left:6px;top:8px;width:5px;height:5px;border-radius:50%;background:var(--accent)}
.cadre-telephone .panel li.no::before{background:var(--text-3)}
.cadre-telephone .panel li b{color:var(--text);font-weight:600}
.cadre-telephone .panel code{font-family:var(--mono);font-size:12px;background:var(--surface);padding:2px 6px;border-radius:5px;color:var(--accent)}
.cadre-telephone .brandline{display:flex;align-items:center;gap:12px;margin-bottom:20px}

@media (max-width:900px){
  .cadre-telephone{padding:22px 14px 40px;gap:28px}
  .cadre-telephone .side{flex:1 1 100%;order:2;max-width:none}
  .cadre-telephone .phone{width:min(392px,100%);height:min(840px,86vh)}
}/* ---------------------------------------------------------------------------
   SUR UN VRAI TELEPHONE
   ---------------------------------------------------------------------------
   Le prototype dessinait une maquette d'iPhone de 392x840 px posee au centre
   d'une page de bureau. Ouvert depuis un telephone, ce cadre etait reduit a
   une bande verticale etroite, avec l'encoche au milieu : un long ovale noir
   sur fond noir, et rien d'autre.

   En dessous de 900 px de large, on efface donc la maquette : l'application
   prend tout l'ecran, comme n'importe quelle application installee. Le cadre
   n'a d'interet que sur un ordinateur, pour la previsualisation.

   - 100dvh, et non 100vh : sur mobile, la barre d'adresse se retracte au
     defilement et 100vh laisse une bande vide en bas.
   - env(safe-area-inset-*) : evite que le contenu passe sous l'encoche et
     sous la barre de geste des iPhone recents.
   --------------------------------------------------------------------------- */


@media (max-width:900px){
  .cadre-telephone{
    display:block;padding:0;gap:0;min-height:100dvh;
    background:var(--bg);
  }
  .cadre-telephone .device{width:100%}
  .cadre-telephone .phone{
    width:100%;height:100dvh;min-height:100dvh;
    border-radius:0;border:none;box-shadow:none;
  }/* L'encoche dessinee et la fausse barre d'etat n'ont plus lieu d'etre :
     le telephone affiche deja les siennes. Les 52 px qu'occupait la barre
     d'etat sont rendus au contenu, et le bandeau de marque remonte en haut,
     sous la zone reservee a l'encoche reelle. */
  
  .cadre-telephone .notch{display:none}
  .cadre-telephone .statusbar{display:none}
  .cadre-telephone .demo-strip{top:env(safe-area-inset-top)}
  .cadre-telephone .viewport{top:calc(22px + env(safe-area-inset-top))}
  .cadre-telephone .tabbar{padding-bottom:calc(8px + env(safe-area-inset-bottom))}
}/* ================= APPLICATION INSTALLEE =================
   Posee sur l'ecran d'accueil, l'application n'a plus AUCUNE barre de
   navigateur — ni adresse en haut, ni boutons en bas. Les 22 px du bandeau
   de marque et les marges du faux chassis n'ont plus lieu d'etre : tout
   l'ecran revient au contenu.

   Ces regles s'appliquent quelle que soit la largeur, y compris sur une
   tablette, la ou le bloc « max-width:900px » ne passait pas. */


@media (display-mode:standalone),(display-mode:fullscreen),(display-mode:minimal-ui){
  .cadre-telephone{display:block;padding:0;gap:0;min-height:100dvh;background:var(--bg)}
  .cadre-telephone .device{width:100%}
  .cadre-telephone .phone{
    width:100%;height:100dvh;min-height:100dvh;
    border-radius:0;border:none;box-shadow:none;
  }
  .cadre-telephone .notch{display:none}
  .cadre-telephone .statusbar{display:none}/* La zone reservee a l'encoche reelle du telephone est rendue par le
     systeme : on la respecte avec safe-area, sinon l'en-tete passe dessous. */
  
  .cadre-telephone .demo-strip{top:env(safe-area-inset-top)}
  .cadre-telephone .viewport{top:calc(22px + env(safe-area-inset-top))}
  .cadre-telephone .tabbar{padding-bottom:calc(8px + env(safe-area-inset-bottom))}
}/* ================= ADAPTATION AUX PETITS ECRANS =================
   Un Galaxy S24 (360 px utiles) et un iPhone SE n'ont pas la meme largeur
   qu'un iPhone Pro Max. Plutot que des tailles fixes, on reduit
   progressivement les elements les plus larges sous 400 px puis sous 360 px.
   Ce bloc DOIT rester le dernier de la feuille : a specificite egale, c'est
   la derniere regle ecrite qui gagne, et .action .bubble est redefini plus
   haut dans le fichier. *//* ══════════════════════════════════════════════════════════════════
   POOL DE MINAGE
   ══════════════════════════════════════════════════════════════════
   Ces regles restent AVANT les media queries de fin de feuille : a
   specificite egale, c'est la derniere regle ecrite qui gagne, et les
   reductions pour petits ecrans doivent pouvoir corriger celles-ci. */




.cadre-telephone .mine-hero{padding:14px 16px 4px}
.cadre-telephone .mine-puissance{font-family:'JetBrains Mono',monospace;font-size:31px;font-weight:700;
  line-height:1.1;letter-spacing:-.5px}
.cadre-telephone .mine-puissance small{font-size:15px;font-weight:600;color:var(--text-2);margin-left:4px}
.cadre-telephone .mine-sous{font-size:11.5px;color:var(--text-3);margin-top:3px}

.cadre-telephone .mine-fenetres{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:12px}
.cadre-telephone .mine-fen{background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:8px 9px;text-align:center}
.cadre-telephone .mine-fen b{display:block;font-family:'JetBrains Mono',monospace;font-size:13.5px;
  font-weight:700;margin-top:2px}
.cadre-telephone .mine-fen span{font-size:9.5px;color:var(--text-3);text-transform:uppercase;letter-spacing:.05em}/* La ferme animee, reprise du calculateur du site.
   Fond sombre dans les deux themes : c'est un local technique, il ne
   s'eclaire pas parce que le telephone est en mode jour. */


.cadre-telephone .mine-ferme{background:#0a0e14;border:1px solid #1c2838;border-radius:14px;
  overflow:hidden;margin-top:12px}
.cadre-telephone .mine-ferme-rangees{display:flex;flex-direction:column;gap:5px;padding:12px 12px 10px;
  align-items:center}
.cadre-telephone .mine-rangee{display:flex;gap:5px}
.cadre-telephone .mine-unite{width:30px;height:30px;border-radius:5px;flex:0 0 auto;
  background:linear-gradient(160deg,#1e2d42,#152035);border:1px solid #2a3a52;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}
.cadre-telephone .mine-unite.eteinte{opacity:.42}
.cadre-telephone .mu-vent{width:15px;height:15px;border-radius:50%;border:1.5px solid #2a4a7a;
  display:grid;place-items:center;font-size:8px;color:#5b7fb0;line-height:1;
  animation:mineVent 1s linear infinite}
.cadre-telephone .mine-unite.eteinte .mu-vent{animation:none;color:#33465f;border-color:#26374d}
@keyframes mineVent{to{transform:rotate(360deg)}}
.cadre-telephone .mu-leds{display:flex;gap:2px}
.cadre-telephone .mu-leds i{width:3.5px;height:3.5px;border-radius:50%;display:block}
@keyframes mineLed{0%,100%{opacity:1}50%{opacity:.15}}
.cadre-telephone .mine-ferme-reste{font-size:10.5px;color:#5b7fb0;padding-top:4px}
.cadre-telephone .mine-ferme-stats{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;
  padding:0 10px 10px}
.cadre-telephone .mine-fs{display:flex;align-items:center;gap:5px;font-size:10.5px;color:#9fb3cc;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);
  border-radius:7px;padding:4px 9px;font-family:'JetBrains Mono',monospace}
.cadre-telephone .mine-fs-dot{width:6px;height:6px;border-radius:50%;flex:0 0 auto}

.cadre-telephone .mine-graph{margin:12px 0 2px;background:var(--surface);border:1px solid var(--line);
  border-radius:14px;padding:10px 8px 6px}
.cadre-telephone .mine-graph svg{display:block;width:100%;height:96px}
.cadre-telephone .mine-graph-legende{display:flex;justify-content:space-between;font-size:10px;
  color:var(--text-3);padding:2px 4px 0}

.cadre-telephone .mine-solde{background:var(--surface);border:1px solid var(--line-2);border-radius:16px;
  padding:15px 16px;margin:12px 0}
.cadre-telephone .mine-solde-btc{font-family:'JetBrains Mono',monospace;font-size:23px;font-weight:700;
  letter-spacing:-.4px}
.cadre-telephone .mine-solde-eur{font-size:14px;color:var(--accent);font-weight:600;margin-top:2px}/* Les lignes de compte : libelle a gauche, valeur a droite, alignees. */


.cadre-telephone .mine-lignes{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.cadre-telephone .mine-ligne{display:flex;justify-content:space-between;align-items:baseline;
  font-size:12.5px;padding:3px 0}
.cadre-telephone .mine-ligne span{color:var(--text-3)}
.cadre-telephone .mine-ligne b{font-family:'JetBrains Mono',monospace;font-weight:600}
.cadre-telephone .mine-ligne b.dn{color:var(--neg)}
.cadre-telephone .mine-ligne b.up{color:var(--pos)}

.cadre-telephone .mine-mac{display:flex;align-items:center;gap:11px;background:var(--surface);
  border:1px solid var(--line);border-radius:14px;padding:11px 13px;margin-bottom:8px}
.cadre-telephone .mine-mac-ico{width:38px;height:38px;border-radius:11px;flex:0 0 auto;display:grid;
  place-items:center;font-size:17px;background:var(--surface-2)}
.cadre-telephone .mine-mac-nom{font-size:13.5px;font-weight:600;line-height:1.25}
.cadre-telephone .mine-mac-spec{font-size:11px;color:var(--text-3);margin-top:2px}
.cadre-telephone .mine-etat{font-size:10px;font-weight:600;padding:3px 8px;border-radius:99px;
  white-space:nowrap;flex:0 0 auto}
.cadre-telephone .mine-etat.on{background:rgba(34,197,94,.13);color:var(--pos)}
.cadre-telephone .mine-etat.att{background:rgba(229,161,0,.15);color:#b47f00}
.cadre-telephone .mine-etat.off{background:var(--surface-2);color:var(--text-3)}/* Le point vert qui bat : la seule chose animee en permanence a l'ecran.
   Deux secondes de cycle, assez lent pour ne pas fatiguer. */


.cadre-telephone .mine-pouls{width:7px;height:7px;border-radius:99px;background:var(--pos);
  display:inline-block;margin-right:6px;animation:minePouls 2s ease-in-out infinite}
@keyframes minePouls{0%,100%{opacity:1}50%{opacity:.25}}

.cadre-telephone .mine-parts{font-family:'JetBrains Mono',monospace;font-size:10.5px;line-height:1.9;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:9px 11px;max-height:132px;overflow:hidden}
.cadre-telephone .mine-part{display:flex;justify-content:space-between;gap:10px;color:var(--text-3)}
.cadre-telephone .mine-part b{color:var(--pos);font-weight:600}
.cadre-telephone .mine-part b.rej{color:var(--neg)}

@media (max-width:400px){
  .cadre-telephone .actions{gap:4px;padding:18px 14px 16px}
  .cadre-telephone .action .bubble{width:46px;height:46px}
  .cadre-telephone .action span{font-size:10.5px}
  .cadre-telephone .btn{height:50px;font-size:14.5px;gap:6px}
  .cadre-telephone .balance{font-size:34px}
  .cadre-telephone .pad{padding:0 14px}
  .cadre-telephone .row{padding:11px 14px}/* Le bouton d'actualisation et son contrepoids prennent de la largeur au
     montant. Sur un ecran etroit, un solde a six chiffres n'entrerait plus.
     On les retrecit avec le reste. */
  
  .cadre-telephone .btn-actualiser{width:34px;height:34px;flex:0 0 34px}
  .cadre-telephone .btn-actualiser svg{width:19px;height:19px}
  .cadre-telephone .balance-contrepoids{width:34px;flex:0 0 34px}
}
@media (max-width:360px){
  .cadre-telephone .actions{gap:3px;padding:16px 10px 14px}
  .cadre-telephone .action .bubble{width:42px;height:42px}
  .cadre-telephone .action .bubble svg{width:18px;height:18px}
  .cadre-telephone .action span{font-size:10px}
  .cadre-telephone .btn{height:48px;font-size:14px}
  .cadre-telephone .balance{font-size:30px}
  .cadre-telephone .btn-row{gap:7px}
  .cadre-telephone .pad{padding:0 12px}
  .cadre-telephone .balance-ligne{gap:6px}
  .cadre-telephone .btn-actualiser{width:32px;height:32px;flex:0 0 32px}
  .cadre-telephone .btn-actualiser svg{width:18px;height:18px}
  .cadre-telephone .balance-contrepoids{width:32px;flex:0 0 32px}
}/* ================= ECRANS COURTS =================
   La largeur ne fait pas tout. Le navigateur Samsung Internet garde une
   barre d'adresse en haut ET une barre de navigation en bas, qui ne se
   retractent pas au defilement : sur le meme telephone, il reste environ
   150 px de moins qu'avec Chrome. Sur l'accueil, les quatre actions et les
   pastilles de reseau se retrouvaient poussees hors de l'ecran.

   On ne peut pas mesurer le navigateur de facon fiable — chacun ment sur son
   identite. On mesure donc ce qui compte vraiment : la hauteur disponible.
   Le resultat est juste sur Samsung Internet, sur Chrome avec la barre
   d'onglets ouverte, sur un iPhone SE, et en mode paysage. */


@media (max-height:760px){
  .cadre-telephone .balance{font-size:32px}
  .cadre-telephone .balance-wrap{padding:10px 20px 2px}
  .cadre-telephone .balance-label{margin-bottom:3px}
  .cadre-telephone .actions{padding:14px 20px 12px}
  .cadre-telephone .action .bubble{width:44px;height:44px}
  .cadre-telephone .chips{padding:0 20px 10px}
  .cadre-telephone .tabbar{height:70px;padding-bottom:6px}
  .cadre-telephone .topbar{padding:10px 20px 6px}
  .cadre-telephone .swap-box{padding:12px 14px}
  .cadre-telephone .footer-actions{padding-top:10px}
}
@media (max-height:680px){
  .cadre-telephone .balance{font-size:27px}
  .cadre-telephone .balance-wrap{padding:6px 20px 0}
  .cadre-telephone .actions{padding:10px 16px 8px;gap:4px}
  .cadre-telephone .action .bubble{width:40px;height:40px}
  .cadre-telephone .action span{font-size:10px}
  .cadre-telephone .chips{padding:0 16px 8px}
  .cadre-telephone .tabbar{height:62px;padding-bottom:4px}
  .cadre-telephone .tab svg{width:19px;height:19px}
  .cadre-telephone .tab span{font-size:9.5px}
  .cadre-telephone .btn{height:48px}/* Le bandeau de marque cede sa place au contenu : l'identite est deja
     portee par le reste de l'ecran. */
  
  .cadre-telephone .demo-strip{display:none}
  .cadre-telephone .viewport{top:env(safe-area-inset-top)}
  .cadre-telephone .swap-arrow{margin:4px auto}
}
@media (max-height:760px){ .cadre-telephone{--tabbar-h:70px} }
@media (max-height:680px){ .cadre-telephone{--tabbar-h:62px} }/* =============================================================================
   LES GRANDS PORTEFEUILLES
   -----------------------------------------------------------------------------
   Un bandeau sur l'accueil, une page de fiches, et la lecture en mode vision
   du portefeuille de quelqu'un d'autre.

   ⚠ LE MOUVEMENT SURVIT AU REDESSIN. L'accueil se redessine a chaque fois
     qu'un cours bouge : une animation CSS repartirait de zero a chaque fois,
     et le ruban sauterait. On lui donne donc un `animation-delay` NEGATIF
     calcule a l'affichage, egal au temps deja ecoule dans le cycle. Le
     navigateur reprend l'animation la ou elle en etait.
   ============================================================================= */

.cadre-telephone .grands{
  display:flex;align-items:center;gap:11px;
  margin:0 20px 18px;width:calc(100% - 40px);
  padding:8px 13px;border-radius:var(--r-l);
  background:var(--surface);border:1px solid var(--line);
  font:inherit;color:inherit;text-align:left;cursor:pointer;
  transition:background .16s,border-color .16s;
}
.cadre-telephone .grands:hover{background:var(--surface-2);border-color:var(--line-2)}
.cadre-telephone .grands:active{background:var(--surface-2)}/* Le hublot : une fenetre de 86 px dans laquelle le train de visages passe.
   Les bords sont fondus, sinon un visage apparait et disparait d'un coup,
   coupe net par la bordure. */


.cadre-telephone .gr-hublot{
  flex:0 0 86px;height:30px;overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10px,#000 calc(100% - 10px),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 10px,#000 calc(100% - 10px),transparent 100%);
}
.cadre-telephone .gr-train{position:absolute;top:0;height:100%;display:flex;align-items:center;width:max-content}
.cadre-telephone .gr-tete{
  width:28px;height:28px;margin:0 4px 0 0;flex:0 0 auto;border-radius:50%;
  border:1.5px solid var(--page);background:var(--surface-2);
  /* ⚠ background-origin : la bordure decalerait la decoupe dans la grande
     image, et chaque visage montrerait un bout de son voisin. */
  background-repeat:no-repeat;background-origin:border-box;
}
.cadre-telephone .gr-titre{font-size:13.5px;font-weight:600;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cadre-telephone .gr-fleche{flex:0 0 auto;color:var(--text-3);display:grid;place-items:center}
@keyframes grDefile{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
.cadre-telephone .gr-train{animation:grDefile 24s linear infinite}
@media (prefers-reduced-motion:reduce){ .cadre-telephone .gr-train{animation:none} }/* ---------- La page des fiches ---------- */


.cadre-telephone .gr-fiche{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);
  padding:13px;margin:0 12px 10px;
}
.cadre-telephone .gr-haut{display:flex;align-items:center;gap:12px}
.cadre-telephone .gr-portrait{
  width:46px;height:46px;border-radius:50%;flex:0 0 auto;
  border:1px solid var(--line);background:var(--surface-2);
  background-repeat:no-repeat;background-origin:border-box;
}
.cadre-telephone .gr-nom{flex:1;min-width:0}
.cadre-telephone .gr-nom .n{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cadre-telephone .gr-nom .h{display:block;font-size:12.5px;color:var(--text-3);margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}/* L'etiquette des personnes et societes identifiees. Elle ne s'affiche que
   pour les dix qui en ont une : mise sur tout le monde, elle ne voudrait
   plus rien dire. */

.cadre-telephone .gr-multi{
  display:inline-block;margin-top:5px;margin-left:6px;padding:2px 7px;border-radius:6px;
  font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--text-2);background:var(--surface-2);border:1px solid var(--line);
}
.cadre-telephone .gr-etiq{
  display:inline-block;margin-top:5px;padding:2px 7px;border-radius:6px;
  font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--accent);background:rgba(229,161,0,.12);border:1px solid var(--line-2);
}/* Trois reseaux au plus : la colonne reste etroite, les pastilles
   s'empilent plutot que de pousser le nom. */

.cadre-telephone .gr-reseaux{display:flex;flex-direction:column;gap:4px;align-items:flex-end;flex:0 0 auto}
.cadre-telephone .gr-res{font-size:9.5px;font-weight:800;color:#fff;padding:3px 7px;border-radius:6px;
  flex:0 0 auto;letter-spacing:.04em}
.cadre-telephone .gr-chiffres{display:flex;gap:10px;margin-top:11px}
.cadre-telephone .gr-mesure{flex:1;background:var(--surface-2);border-radius:var(--r-s);padding:8px 10px}
.cadre-telephone .gr-mesure .l{display:block;font-size:10px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--text-3)}
.cadre-telephone .gr-mesure .v{display:block;font-size:15px;font-weight:700;margin-top:3px;
  font-variant-numeric:tabular-nums}
.cadre-telephone .gr-boutons{display:flex;gap:8px;margin-top:11px}
.cadre-telephone .gr-boutons>*{
  flex:1;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;
  padding:9px 10px;border-radius:var(--r-s);border:1px solid var(--line);
  background:var(--surface-2);color:var(--text);text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
}
.cadre-telephone .gr-boutons .principal{background:var(--grad);border-color:transparent;color:#1a1206;font-weight:700}/* ---------- Le mode vision ---------- */


.cadre-telephone .vis-bandeau{
  display:flex;align-items:center;gap:11px;margin:0 20px 14px;
  padding:10px 12px;border-radius:10px;
  background:rgba(59,130,246,.10);border:1px solid var(--line);
}
.cadre-telephone .vis-bandeau .gr-portrait{width:34px;height:34px}
.cadre-telephone .vis-bandeau .t{flex:1;min-width:0}
.cadre-telephone .vis-bandeau .t b{display:block;font-size:13px;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cadre-telephone .vis-bandeau .t span{font-size:11px;color:var(--text-3)}
.cadre-telephone .vis-part{height:3px;border-radius:2px;background:var(--surface-3);margin-top:5px;overflow:hidden}
.cadre-telephone .vis-part i{display:block;height:100%;background:var(--accent);border-radius:2px}/* =============================================================================
   LE ROBOT SUPER SENIOR — CE QU'IL AJOUTE A L'ECRAN

   Classes et textes repris tels quels de ROBOT-SS/MAQUETTE-PORTEFEUILLE.html,
   elle-meme batie sur CHARTE-WALLET.md. Les hex de la maquette sont rendus
   aux variables de la charte partout ou ils s'y retrouvent : la maquette est
   dessinee en theme sombre, le portefeuille a aussi un theme clair.

   RIEN ICI NE TOUCHE UNE REGLE EXISTANTE. Tout est ajoute a la fin de la
   feuille, et aucun de ces noms de classe n'existait avant (verifie).
   ============================================================================= *//* ── LE FEU : une pastille de 9 px, rien de plus. C'est tout ce que le
      robot ajoute a la liste. ── */




.cadre-telephone .feu{width:9px;height:9px;border-radius:50%;flex:0 0 9px;display:inline-block;
  vertical-align:middle}
.cadre-telephone .feu.pulse{box-shadow:0 0 0 3px rgba(239,68,68,.16)}/* ── LE BANDEAU D'AVERTISSEMENT, EN HAUT DE LA FICHE ── */


.cadre-telephone .avert{display:flex;gap:10px;padding:12px 13px;border-radius:var(--r-m);margin:0 0 12px;
  font-size:12.8px;line-height:1.62}
.cadre-telephone .avert .ic{flex:0 0 18px;font-size:14px;line-height:1.25}
.cadre-telephone .avert.j{background:rgba(229,161,0,.10);border:1px solid rgba(229,161,0,.34);color:var(--accent-2)}
.cadre-telephone .avert.r{background:rgba(239,68,68,.10);border:1px solid rgba(239,68,68,.36);color:#fca5a5}
.cadre-telephone .avert b{display:block;font-weight:700;margin-bottom:3px;font-size:13.2px}
.cadre-telephone .avert .txt{color:inherit;opacity:.94}
.cadre-telephone[data-theme="clair"] .avert.j{color:#8a6200}
.cadre-telephone[data-theme="clair"] .avert.r{color:#b91c1c}/* ── LE RAPPORT ── */


.cadre-telephone .rap{margin-top:12px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-l);padding:15px 14px}
.cadre-telephone .rap .cha{font-size:10.5px;letter-spacing:1.1px;text-transform:uppercase;color:var(--text-3);
  margin-bottom:9px}
.cadre-telephone .rap h3{font-size:15.5px;font-weight:700;line-height:1.38;margin:0 0 7px}
.cadre-telephone .rap p{font-size:13px;line-height:1.68;color:var(--text-2);margin:0}
.cadre-telephone .rap .sec{margin-top:15px;padding-top:14px;border-top:1px solid rgba(59,130,246,.14)}
.cadre-telephone .rap ol{list-style:none;counter-reset:c;margin:9px 0 0;padding:0}
.cadre-telephone .rap ol li{counter-increment:c;position:relative;padding-left:27px;margin-top:11px}
.cadre-telephone .rap ol li::before{content:counter(c);position:absolute;left:0;top:1px;width:19px;height:19px;
  border-radius:50%;background:rgba(59,130,246,.16);color:#93c5fd;font-size:10.5px;
  font-weight:700;display:flex;align-items:center;justify-content:center}
.cadre-telephone .rap ol .ct{font-size:12.8px;font-weight:700;margin-bottom:3px}
.cadre-telephone .rap ol .cx{font-size:12.6px;line-height:1.62;color:var(--text-2)}
.cadre-telephone .rap .verif{margin:9px 0 0;padding:0}
.cadre-telephone .rap .verif li{display:flex;gap:9px;padding:8px 0;border-bottom:1px solid rgba(59,130,246,.10);
  list-style:none;font-size:12.4px;line-height:1.55}
.cadre-telephone .rap .verif li:last-child{border-bottom:0}
.cadre-telephone .rap .verif .p{flex:0 0 8px;width:8px;height:8px;border-radius:50%;margin-top:5px}
.cadre-telephone .rap .verif .p.bon{background:var(--pos)}
.cadre-telephone .rap .verif .p.attention{background:var(--neg)}
.cadre-telephone .rap .verif .p.inconnu{background:var(--text-3)}
.cadre-telephone .rap .verif .f{color:var(--text)}
.cadre-telephone .rap .verif .r{color:var(--text-2);margin-top:2px}
.cadre-telephone .rap .concl{margin-top:14px;padding:12px 13px;border-radius:var(--r-m);
  background:rgba(59,130,246,.07);border:1px solid rgba(59,130,246,.18)}
.cadre-telephone .rap .concl .kt{font-size:13px;font-weight:700;margin-bottom:5px}
.cadre-telephone .rap .concl .kx{font-size:12.8px;line-height:1.66;color:var(--text-2)}
.cadre-telephone .rap .sign{margin-top:11px;font-size:11.2px;color:var(--text-3);line-height:1.55}/* ── LES LIENS, SOUS LE RAPPORT, ET JAMAIS AU-DESSUS ── */


.cadre-telephone .liens{margin-top:12px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-l);padding:15px 14px}
.cadre-telephone .liens .cha{font-size:10.5px;letter-spacing:1.1px;text-transform:uppercase;color:var(--text-3);
  margin-bottom:9px}
.cadre-telephone .liens .desc{font-size:12.8px;line-height:1.66;color:var(--text-2)}
.cadre-telephone .liens .lang{margin-top:6px;font-size:11.2px;color:var(--text-3);font-style:italic}
.cadre-telephone .liens ul{margin:12px 0 0;list-style:none;padding:0}
.cadre-telephone .liens li{margin-top:2px}
.cadre-telephone .liens a{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:12px;
  background:rgba(59,130,246,.07);color:#93c5fd;text-decoration:none;font-size:12.8px;
  font-weight:600}
.cadre-telephone .liens a .fl{margin-left:auto;color:var(--text-3);font-weight:400}
.cadre-telephone .liens .note{margin-top:11px;font-size:11.4px;line-height:1.6;color:var(--text-3)}
.cadre-telephone .liens .note.rouge{color:#fca5a5}
.cadre-telephone .liens .note b{color:inherit}/* ⚠⚠ LES NUMEROS DU RAPPORT, EN THEME CLAIR. LA REPRISE AVAIT ETE
     OUBLIEE, ET ILS ETAIENT ILLISIBLES.

   `.rap ol li::before` porte `color:#93c5fd` — un bleu pale pense pour le
   fond sombre, ou il donne 8,05:1. En theme clair, la meme pastille se
   compose sur du blanc (`--surface:#ffffff`) et donne #e0ebfe : le chiffre
   tombe alors a **1,50:1**. La norme demande 4,5:1, et nos clients ne sont
   pas des vingtenaires — c'est la raison meme pour laquelle `--text-3` a
   deja ete assombri plus haut dans ce fichier.

   On reprend le bleu de la charte (`--bleu`, #1d4ed8, CHARTE-WALLET.md
   l. 40) : **5,58:1** sur le meme fond. Le theme sombre n'est pas touche,
   il etait deja bon. */

.cadre-telephone[data-theme="clair"] .rap ol li::before{color:#1d4ed8}
.cadre-telephone[data-theme="clair"] .liens a{color:#1d4ed8}
.cadre-telephone[data-theme="clair"] .liens .note.rouge{color:#b91c1c}