/* Passa — vert profond et or. */
:root {
  --vert: #0b5d3b;
  --vert-fonce: #063d26;
  --vert-clair: #e3f1e9;
  --or: #d9a521;
  --or-clair: #fbf0d0;
  --fond: #f3f5f2;
  --carte: #ffffff;
  --texte: #142019;
  --doux: #5d6b63;
  --trait: #dfe5e0;
  --rouge: #c0392b;
  --rouge-clair: #fbe7e4;
  --orange: #b9700a;
  --orange-clair: #fdf1dc;
  --ombre: 0 1px 2px rgba(9, 40, 25, .06), 0 6px 20px rgba(9, 40, 25, .07);
  --rayon: 18px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #0c1410;
    --carte: #15211b;
    --texte: #e8efe9;
    --doux: #9aaba1;
    --trait: #26362d;
    --vert-clair: #163626;
    --or-clair: #3a2f12;
    --rouge-clair: #3b1915;
    --orange-clair: #3a2a10;
    --ombre: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .25);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--texte);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 560px) {
  body { background: radial-gradient(circle at 20% 10%, #12704a 0, #063d26 55%, #031f14 100%); min-height: 100vh; }
  #cadre { margin: 24px auto; border-radius: 28px; overflow: hidden; min-height: calc(100vh - 48px); box-shadow: 0 30px 80px rgba(0, 0, 0, .35); }
}
#cadre { position: relative; max-width: 460px; margin: 0 auto; min-height: 100vh; background: var(--fond); display: flex; flex-direction: column; }
#ecran { flex: 1; padding: 0 16px 104px; outline: none; }
#ecran.sans-menu { padding-bottom: 32px; }

h1, h2, h3 { margin: 0; line-height: 1.2; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p { margin: .4rem 0; }
a { color: var(--vert); }
.doux { color: var(--doux); }
.petit { font-size: .85rem; }
.centre { text-align: center; }
.chiffres { font-variant-numeric: tabular-nums; }

#bandeau-simulation {
  background: var(--or); color: #2b1f00; font-size: .8rem; font-weight: 600; text-align: center; padding: 6px 12px;
  position: sticky; top: 0; z-index: 30;
}

/* En-têtes d'écran */
.entete { display: flex; align-items: center; gap: 10px; padding: 18px 0 14px; }
.entete h1 { font-size: 1.25rem; flex: 1; }
.retour { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--trait); background: var(--carte); color: var(--texte); display: grid; place-items: center; cursor: pointer; text-decoration: none; }
.retour::before { content: ""; width: 10px; height: 10px; border-left: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(45deg); margin-left: 4px; }

.hero {
  margin: 0 -16px 18px; padding: 22px 20px 26px; color: #fff;
  background: linear-gradient(150deg, var(--vert) 0%, var(--vert-fonce) 100%);
  border-radius: 0 0 28px 28px; position: relative; overflow: hidden;
}
.hero::after { content: ""; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(233, 185, 73, .35), transparent 70%); }
.hero .ligne { display: flex; align-items: center; justify-content: space-between; }
.hero .salut { opacity: .85; font-size: .95rem; }
.hero h1 { font-size: 1.45rem; margin-top: 2px; }
.hero .avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--or); color: #2b1f00; font-weight: 700; display: grid; place-items: center; text-decoration: none; }

.logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.6rem; letter-spacing: -.02em; }
.logo img { width: 44px; height: 44px; border-radius: 12px; }

/* Cartes et listes */
.carte { background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 16px; margin-bottom: 14px; }
.carte.plate { box-shadow: none; border: 1px solid var(--trait); }
.titre-section { display: flex; justify-content: space-between; align-items: baseline; margin: 20px 2px 10px; }
.titre-section a { font-size: .9rem; font-weight: 600; text-decoration: none; }
.liste { list-style: none; margin: 0; padding: 0; }
.liste > li + li { border-top: 1px solid var(--trait); }
.ligne-tx { display: flex; align-items: center; gap: 12px; padding: 12px 2px; text-decoration: none; color: inherit; }
.ligne-tx .milieu { flex: 1; min-width: 0; }
.ligne-tx .nom { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ligne-tx .sous { font-size: .82rem; color: var(--doux); }
.ligne-tx .droite { text-align: right; }
.ligne-tx .montant { font-weight: 700; font-variant-numeric: tabular-nums; }
.vide { text-align: center; color: var(--doux); padding: 28px 12px; }

/* Pastilles de réseau (pas de logos de marques) */
.pastille { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; font-size: .78rem; letter-spacing: -.02em; color: #fff; }
.pastille.petite { width: 28px; height: 28px; border-radius: 8px; font-size: .62rem; }
img.pastille { display: block; object-fit: cover; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06); }
.solde-test { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; padding: 8px 12px; border-radius: 12px; background: var(--or-clair); font-size: .88rem; }
.solde-test strong { font-variant-numeric: tabular-nums; }
.solde-test.insuffisant { background: var(--rouge-clair); color: var(--rouge); }
.compte-test .montant { font-size: 1.05rem; }
.trajet { display: flex; align-items: center; gap: 6px; }
.trajet .fleche { color: var(--doux); font-weight: 700; }

/* Badges de statut */
.badge { display: inline-block; font-size: .74rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.badge.ok { background: var(--vert-clair); color: var(--vert); }
.badge.attente { background: var(--orange-clair); color: var(--orange); }
.badge.ko { background: var(--rouge-clair); color: var(--rouge); }
@media (prefers-color-scheme: dark) { .badge.ok { color: #6fd39f; } .badge.attente { color: #f2b45a; } .badge.ko { color: #f08a7f; } }

/* Boutons */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  border: 0; border-radius: 14px; padding: 15px 18px; font: inherit; font-weight: 700; cursor: pointer; text-decoration: none;
  background: var(--vert); color: #fff; transition: transform .05s, filter .15s;
}
.btn:active { transform: scale(.985); }
.btn:hover { filter: brightness(1.07); }
.btn[disabled] { opacity: .5; cursor: not-allowed; filter: none; }
.btn.or { background: var(--or); color: #2b1f00; }
.btn.clair { background: var(--carte); color: var(--texte); border: 1px solid var(--trait); }
.btn.danger { background: var(--rouge-clair); color: var(--rouge); }
.btn.lien { background: none; color: var(--vert); padding: 10px; }
.boutons { display: grid; gap: 10px; margin-top: 16px; }
.boutons.deux { grid-template-columns: 1fr 1fr; }

/* Formulaires */
label.champ { display: block; margin-bottom: 14px; }
label.champ > span { display: block; font-size: .85rem; font-weight: 600; color: var(--doux); margin-bottom: 6px; }
input, select, textarea {
  width: 100%; font: inherit; color: var(--texte); background: var(--carte);
  border: 1.5px solid var(--trait); border-radius: 12px; padding: 13px 14px; outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--vert); box-shadow: 0 0 0 3px rgba(11, 93, 59, .15); }
textarea { min-height: 100px; resize: vertical; }
.tel { display: flex; gap: 8px; }
.tel .indicatif { flex: none; min-width: 74px; display: grid; place-items: center; border: 1.5px solid var(--trait); border-radius: 12px; background: var(--fond); font-weight: 600; }
.erreur { background: var(--rouge-clair); color: var(--rouge); border-radius: 12px; padding: 10px 12px; font-size: .9rem; margin: 0 0 12px; }
.info { background: var(--or-clair); border-radius: 12px; padding: 10px 12px; font-size: .88rem; margin: 0 0 12px; }

/* Sélecteur de réseau */
.choix-reseau { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; font: inherit; color: inherit; background: var(--carte); border: 1.5px solid var(--trait); border-radius: 14px; padding: 10px 12px; cursor: pointer; margin-bottom: 8px; }
.choix-reseau .milieu { flex: 1; }
.choix-reseau .chevron { width: 9px; height: 9px; border-right: 2px solid var(--doux); border-bottom: 2px solid var(--doux); transform: rotate(45deg); margin-right: 6px; }
.grille-reseaux { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.grille-reseaux button { display: flex; align-items: center; gap: 10px; font: inherit; font-size: .9rem; text-align: left; color: inherit; background: var(--carte); border: 1.5px solid var(--trait); border-radius: 14px; padding: 10px; cursor: pointer; }
.grille-reseaux button.actif { border-color: var(--vert); background: var(--vert-clair); }
.grille-reseaux button[disabled] { opacity: .45; cursor: not-allowed; }
.bloc-envoi { position: relative; }
.inverser { position: absolute; left: 50%; margin-left: -20px; top: -27px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--fond); background: var(--or); color: #2b1f00; font-weight: 800; cursor: pointer; }

.montant-saisie { font-size: 2rem; font-weight: 800; text-align: center; border: 0; background: transparent; padding: 6px; box-shadow: none !important; font-variant-numeric: tabular-nums; }
.puces { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 6px 0 4px; }
.puce { border: 1.5px solid var(--trait); background: var(--carte); color: var(--texte); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; }
.puce.actif { background: var(--vert); border-color: var(--vert); color: #fff; }

.recap { width: 100%; border-collapse: collapse; }
.recap td { padding: 8px 0; }
.recap td:last-child { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.recap tr.total td { border-top: 1.5px dashed var(--trait); font-size: 1.05rem; font-weight: 800; padding-top: 12px; }
.recap tr.recu td { color: var(--vert); font-weight: 700; }

/* Pavé du code PIN */
.pin-ecran { display: flex; flex-direction: column; align-items: center; padding-top: 12px; }
.pin-points { display: flex; gap: 16px; margin: 22px 0 10px; }
.pin-points i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--vert); }
.pin-points i.plein { background: var(--vert); }
.pin-points.secoue { animation: secoue .35s; }
@keyframes secoue { 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
.pave { display: grid; grid-template-columns: repeat(3, 76px); gap: 14px; margin-top: 14px; }
.pave button { height: 64px; border-radius: 50%; border: 0; background: var(--carte); box-shadow: var(--ombre); font: inherit; font-size: 1.5rem; font-weight: 600; color: var(--texte); cursor: pointer; }
.pave button:active { background: var(--vert-clair); }
.pave button.vide-touche { visibility: hidden; }
.pave button.effacer { background: none; box-shadow: none; font-size: 1rem; color: var(--doux); }

/* Suivi d'un transfert */
.etat-grand { text-align: center; padding: 10px 0 4px; }
.etat-grand .rond { width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 12px; display: grid; place-items: center; font-size: 2.2rem; font-weight: 800; }
.etat-grand .rond.ok { background: var(--vert-clair); color: var(--vert); }
.etat-grand .rond.attente { background: var(--orange-clair); color: var(--orange); }
.etat-grand .rond.ko { background: var(--rouge-clair); color: var(--rouge); }
.etat-grand .rond.attente::before { content: ""; width: 34px; height: 34px; border-radius: 50%; border: 4px solid currentColor; border-right-color: transparent; animation: tourne 1s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }
.etat-grand .somme { font-size: 1.8rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.frise { list-style: none; margin: 0; padding: 0; }
.frise li { position: relative; padding: 0 0 18px 34px; }
.frise li::before { content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--trait); background: var(--carte); }
.frise li::after { content: ""; position: absolute; left: 10px; top: 22px; bottom: 0; width: 2px; background: var(--trait); }
.frise li:last-child::after { display: none; }
.frise li.fait::before { background: var(--vert); border-color: var(--vert); }
.frise li.fait::after { background: var(--vert); }
.frise li.encours::before { border-color: var(--orange); border-right-color: transparent; animation: tourne 1s linear infinite; }
.frise li.echec::before { background: var(--rouge); border-color: var(--rouge); }
.frise .t { font-weight: 600; }
.frise .d { font-size: .8rem; color: var(--doux); }

/* Reçu */
.recu-papier { background: #fff; color: #142019; border-radius: var(--rayon); padding: 22px 20px; box-shadow: var(--ombre); position: relative; overflow: hidden; }
.recu-papier .tete { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #0b5d3b; padding-bottom: 12px; margin-bottom: 12px; }
.recu-papier .tete .logo { font-size: 1.3rem; color: #0b5d3b; }
.recu-papier .tete .logo img { width: 34px; height: 34px; border-radius: 9px; }
.recu-papier dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; margin: 0; font-size: .92rem; }
.recu-papier dt { color: #5d6b63; }
.recu-papier dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; word-break: break-word; }
.recu-papier .gros { text-align: center; margin: 6px 0 14px; }
.recu-papier .gros .somme { font-size: 2rem; font-weight: 800; color: #0b5d3b; }
.recu-papier .pied { margin-top: 16px; padding-top: 12px; border-top: 1.5px dashed #dfe5e0; font-size: .78rem; color: #5d6b63; text-align: center; }
.filigrane { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; font-size: 3.2rem; font-weight: 900; color: rgba(217, 165, 33, .13); transform: rotate(-24deg); }

/* Accueil */
.raccourcis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 16px; position: relative; z-index: 1; }
.raccourcis a { display: flex; flex-direction: column; align-items: center; gap: 6px; color: #fff; text-decoration: none; font-size: .78rem; font-weight: 600; }
.raccourcis .ic { width: 48px; height: 48px; border-radius: 16px; background: rgba(255, 255, 255, .14); }
.raccourcis .ic::before { width: 22px; height: 22px; background: #fff; }
.favoris { display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 8px; scrollbar-width: none; }
.favoris a { flex: none; width: 72px; text-align: center; text-decoration: none; color: inherit; font-size: .78rem; }
.favoris .rond { width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 6px; display: grid; place-items: center; background: var(--vert-clair); color: var(--vert); font-weight: 800; position: relative; }
.favoris .rond .pastille { position: absolute; right: -4px; bottom: -4px; border: 2px solid var(--fond); }
.favoris .ajout .rond { background: var(--carte); border: 2px dashed var(--trait); color: var(--doux); font-size: 1.5rem; }
.jauge { height: 8px; border-radius: 99px; background: var(--trait); overflow: hidden; margin: 6px 0 4px; }
.jauge i { display: block; height: 100%; background: linear-gradient(90deg, var(--vert), var(--or)); border-radius: 99px; }

.filtres { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 8px; scrollbar-width: none; }
.filtres .puce { flex: none; white-space: nowrap; }
.jour { font-size: .78rem; font-weight: 700; color: var(--doux); text-transform: uppercase; letter-spacing: .04em; margin: 16px 2px 2px; }
.etoile { border: 0; background: none; font-size: 1.3rem; cursor: pointer; color: var(--trait); padding: 4px; }
.etoile.on { color: var(--or); }
.mini-btn { border: 1px solid var(--trait); background: var(--carte); color: var(--vert); border-radius: 10px; padding: 6px 10px; font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; }

.menu-profil a, .menu-profil button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 4px; color: inherit; text-decoration: none; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.menu-profil .ic { width: 36px; height: 36px; border-radius: 10px; background: var(--vert-clair); }
.menu-profil .ic::before { width: 18px; height: 18px; background: var(--vert); }
.menu-profil .milieu { flex: 1; }
details.faq { border-top: 1px solid var(--trait); padding: 12px 2px; }
details.faq:first-child { border-top: 0; }
details.faq summary { font-weight: 600; cursor: pointer; }

/* Barre de menu du bas */
#menu {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 460px; z-index: 20;
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: end;
  background: var(--carte); border-top: 1px solid var(--trait); padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
}
@media (min-width: 560px) { #menu { bottom: 24px; border-radius: 0 0 28px 28px; } }
#menu a { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: .7rem; font-weight: 600; color: var(--doux); text-decoration: none; }
#menu a .ic::before { width: 22px; height: 22px; background: currentColor; }
#menu a.actif { color: var(--vert); }
#menu a.central .ic { width: 52px; height: 52px; border-radius: 18px; background: var(--or); margin-top: -26px; box-shadow: 0 6px 16px rgba(217, 165, 33, .45); }
#menu a.central .ic::before { background: #2b1f00; width: 24px; height: 24px; }

/* Icônes (tracés SVG en masque) */
.ic { display: grid; place-items: center; flex: none; }
.ic::before { content: ""; display: block; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.ic-maison { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E"); }
.ic-liste { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M8 6h13M8 12h13M8 18h13M3.5 6h.01M3.5 12h.01M3.5 18h.01'/%3E%3C/svg%3E"); }
.ic-fleches { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h14l-4-4M20 16H6l4 4'/%3E%3C/svg%3E"); }
.ic-contacts { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20c.8-3.5 3.4-5.5 6.5-5.5s5.7 2 6.5 5.5M16 4.5a3.5 3.5 0 0 1 0 7M18.5 14.8c1.6.8 2.6 2.6 3 5.2'/%3E%3C/svg%3E"); }
.ic-profil { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1-4.2 4-6.5 8-6.5s7 2.3 8 6.5'/%3E%3C/svg%3E"); }
.ic-bouclier { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 4 6v6c0 4.5 3.4 8 8 9 4.6-1 8-4.5 8-9V6z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }
.ic-cle { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); }
.ic-aide { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.5 9.5a2.5 2.5 0 1 1 3.5 2.3c-.6.3-1 .9-1 1.6v.6M12 17h.01'/%3E%3C/svg%3E"); }
.ic-message { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4z'/%3E%3C/svg%3E"); }
.ic-sortie { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 4h4v16h-4M10 8l-4 4 4 4M6 12h10'/%3E%3C/svg%3E"); }
.ic-recu { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18l-3-2-3 2-3-2-3 2zM9 8h6M9 12h6'/%3E%3C/svg%3E"); }

.ic-cloche { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9a6 6 0 0 1 12 0c0 5 2 6.5 2 6.5H4S6 14 6 9M10 19.5a2 2 0 0 0 4 0'/%3E%3C/svg%3E"); }
.ic-telephone { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='6' y='2.5' width='12' height='19' rx='2.5'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E"); }
.cloche { position: relative; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .14); display: grid; place-items: center; }
.cloche .ic::before { width: 22px; height: 22px; background: #fff; }
.pastille-notif { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--rouge); color: #fff; font-size: .72rem; font-weight: 800; display: grid; place-items: center; }
.cloche .pastille-notif { position: absolute; top: -4px; right: -4px; border: 2px solid var(--vert); }
.qr { background: #fff; padding: 12px; border-radius: 16px; width: 240px; max-width: 100%; margin: 6px auto 12px; display: block; }
.adresse { font-size: 1.15rem; font-weight: 800; text-align: center; word-break: break-all; color: var(--vert); }
ol.etapes-tel { padding-left: 20px; margin: 8px 0; }
ol.etapes-tel li { margin-bottom: 6px; }

/* Réclamations : fil de discussion */
.fil { display: grid; gap: 8px; }
.bulle { padding: 10px 12px; border-radius: 14px; font-size: .92rem; max-width: 92%; }
.bulle .qui { font-size: .74rem; color: var(--doux); margin-bottom: 2px; }
.bulle.moi { background: var(--fond); border: 1px solid var(--trait); justify-self: end; }
.bulle.equipe { background: var(--vert-clair); justify-self: start; }

/* Carte « Argent reçu » */
#alerte-recu { position: fixed; inset: 0; z-index: 70; background: rgba(4, 20, 12, .55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.carte-recu { width: 100%; max-width: 400px; background: var(--carte); border-radius: 24px; padding: 22px 20px 18px; text-align: center; box-shadow: 0 20px 60px rgba(0, 0, 0, .35); border-top: 6px solid var(--or); animation: arrive .35s cubic-bezier(.2, 1.4, .4, 1); }
.carte-recu .tete-recu { display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 800; font-size: 1.15rem; color: var(--vert); }
.carte-recu .somme-recu { font-size: 2.4rem; font-weight: 900; color: var(--vert); margin: 10px 0 4px; font-variant-numeric: tabular-nums; }
@media (prefers-color-scheme: dark) { .carte-recu .tete-recu, .carte-recu .somme-recu { color: #6fd39f; } }
@keyframes arrive { from { transform: scale(.85); opacity: 0; } }

/* Modale (feuille du bas) */
#modale { position: fixed; inset: 0; z-index: 50; background: rgba(4, 20, 12, .5); display: flex; align-items: flex-end; justify-content: center; }
#modale .feuille { background: var(--fond); width: 100%; max-width: 460px; max-height: 88vh; overflow: auto; border-radius: 24px 24px 0 0; padding: 18px 16px 24px; animation: monte .2s ease-out; }
#modale .feuille .poignee { width: 44px; height: 5px; border-radius: 9px; background: var(--trait); margin: 0 auto 14px; }
@keyframes monte { from { transform: translateY(40px); opacity: 0; } }

#toast { position: fixed; left: 50%; bottom: 100px; transform: translateX(-50%); z-index: 60; background: #142019; color: #fff; padding: 10px 16px; border-radius: 12px; font-size: .9rem; max-width: 90vw; box-shadow: var(--ombre); }

/* Accueil (bienvenue) */
.bienvenue { min-height: 100vh; display: flex; flex-direction: column; justify-content: space-between; margin: 0 -16px -32px; padding: 48px 24px 32px; color: #fff; background: radial-gradient(circle at 80% 0%, rgba(233, 185, 73, .35), transparent 45%), linear-gradient(160deg, var(--vert) 0%, var(--vert-fonce) 100%); }
.bienvenue h1 { font-size: 2rem; margin: 28px 0 10px; }
.bienvenue .reseaux-ligne { display: flex; gap: 8px; margin-top: 22px; flex-wrap: wrap; }
.bienvenue .atouts { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; }
.bienvenue .atouts li { display: flex; gap: 10px; align-items: flex-start; opacity: .95; }
.bienvenue .atouts li::before { content: "✓"; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--or); color: #2b1f00; display: grid; place-items: center; font-size: .75rem; font-weight: 800; }
.bienvenue .btn.clair { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); }

@media print {
  body { background: #fff !important; }
  #cadre { box-shadow: none !important; margin: 0 !important; max-width: none; }
  #menu, #bandeau-simulation, .entete, .boutons, #toast, .pas-imprimer { display: none !important; }
  .recu-papier { box-shadow: none; border: 1px solid #ccc; max-width: 420px; margin: 0 auto; }
}