/* ===== Apparence iOS native (reproduction fidèle de l'app SwiftUI) ===== */
  :root{
    /* Couleurs système iOS (mode clair) */
    --vert:#34C759;            /* .green système iOS */
    --vert-fonce:#248A3D;
    --bleu:#007AFF;            /* .blue système */
    --orange:#FF9500;          /* .orange système */
    --rouge:#FF3B30;           /* .red système */
    --vert-ok:#34C759;
    --fond:#070b14;            /* fond accueil (bleu nuit) */
    --carte:rgba(255,255,255,.045);   /* carte verre */
    --texte:#eef2f7;
    --doux:#9aa7b8;
    --gris5:rgba(255,255,255,.08);
    --separateur:rgba(255,255,255,.10);
    --bord:rgba(255,255,255,.10);
    --tab-bg:rgba(8,12,22,.62); --tab-text:#eef2f7; --tab-sheen:rgba(255,255,255,.12);
    --display:"Fraunces", Georgia, serif;
    --carte-plein:#101626;
    --bulle-bg:rgba(255,255,255,.05); --bulle-border:rgba(255,255,255,.30);
    --champ:#1C1C1E;
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
  html,body{margin:0;padding:0;}
  body{
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",sans-serif;
    color:var(--texte);
    background:
      radial-gradient(900px 600px at 12% -5%, rgba(52,199,89,.16), transparent 60%),
      radial-gradient(900px 700px at 100% 0%, rgba(0,122,255,.16), transparent 55%),
      radial-gradient(800px 800px at 50% 120%, rgba(0,122,255,.10), transparent 60%),
      linear-gradient(180deg,#070b14,#0a0f1c 60%,#070b14);
    background-attachment:fixed;
    padding-bottom:calc(88px + env(safe-area-inset-bottom));
    -webkit-font-smoothing:antialiased;
    font-size:17px; line-height:1.35;   /* corps iOS = 17pt */
  }
  h1,h2,h3{margin:0; font-weight:600;}
  button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit;}
  input,select{font-family:inherit; font-size:17px;}

  /* ===== Grande barre de titre + navigation mois ===== */
  .topbar{
    background:transparent;
    padding:8px 16px 4px;
  }
  .topbar h1{font-family:var(--display); font-size:34px; font-weight:600; letter-spacing:-.02em;}   /* largeTitle */
  .mois-nav{display:flex; align-items:center; justify-content:space-between; margin-top:8px; background:var(--carte); border-radius:12px; padding:8px 10px; box-shadow:0 0 0 1px var(--separateur);}
  .mois-nav span{font-size:17px; font-weight:600; text-transform:capitalize;}
  .mois-nav button{
    width:32px; height:32px; border-radius:50%; color:var(--vert); font-size:22px;
    display:flex; align-items:center; justify-content:center;
  }
  .mois-nav button:active{opacity:.4;}

  /* ===== Pages ===== */
  .page{padding:8px 16px 16px; max-width:680px; margin:0 auto; display:none;}
  .page.actif{display:block;}

  /* ===== Cartes (style Liste iOS « inset grouped ») ===== */
  .carte{background:var(--carte); border-radius:12px; padding:16px; margin-bottom:18px; box-shadow:0 0 0 1px var(--separateur);}
  .carte h2{font-size:13px; font-weight:400; letter-spacing:.02em; text-transform:uppercase; color:var(--doux); margin-bottom:10px;}
  .duo{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
  .stat{background:var(--carte); border-radius:12px; padding:16px; box-shadow:0 0 0 1px var(--separateur);}
  .stat .lbl{font-size:13px; color:var(--doux);}
  .stat .val{font-size:24px; font-weight:700; margin-top:6px; letter-spacing:-.01em;}

  /* ===== Barre de progression ===== */
  .barre{height:8px; background:var(--gris5); border-radius:99px; overflow:hidden; margin:9px 0;}
  .barre > span{display:block; height:100%; border-radius:99px; transition:width .35s ease;}
  .ligne-info{display:flex; justify-content:space-between; font-size:14px; color:var(--doux);}

  /* ===== Listes (lignes iOS) ===== */
  .item{display:flex; align-items:center; gap:12px; padding:12px 2px; border-bottom:.5px solid var(--separateur);}
  .item:last-child{border-bottom:none;}
  .item:active{background:var(--gris5);}
  .pastille{width:12px; height:12px; border-radius:50%; flex-shrink:0;}
  .item .corps{flex:1; min-width:0;}
  .item .corps .t{font-size:17px;}
  .item .corps .s{font-size:13px; color:var(--doux); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .item .montant{font-weight:600; font-size:17px;}

  .vide{text-align:center; color:var(--doux); padding:48px 16px;}
  .vide .ic{font-size:40px; opacity:.35;}
  .vide .t{font-weight:600; margin-top:10px; color:var(--texte); font-size:17px;}
  .vide .s{font-size:15px; margin-top:4px;}

  /* ===== Barre d'onglets iOS (Tab Bar) ===== */
  /* Barre d'onglets : verre flottant translucide (style Liquid Glass) */
  .tabs{
    position:fixed; left:12px; right:12px; bottom:calc(10px + env(safe-area-inset-bottom));
    display:flex; justify-content:space-around;
    background:var(--tab-bg);
    -webkit-backdrop-filter:saturate(190%) blur(34px); backdrop-filter:saturate(190%) blur(34px);
    border:.5px solid rgba(255,255,255,.22);
    border-radius:32px;
    padding:9px 6px;
    box-shadow:
      inset 0 1px 1px rgba(255,255,255,.32),
      inset 0 -1px 1px rgba(0,0,0,.18),
      0 10px 36px rgba(0,0,0,.45);
    z-index:50; max-width:560px; margin:0 auto;
  }
  .tabs::before{
    content:""; position:absolute; top:0; left:0; right:0; height:55%;
    background:linear-gradient(180deg, var(--tab-sheen), transparent);
    border-radius:32px 32px 0 0; pointer-events:none; z-index:2;
  }
  /* Bulle « Liquid Glass » transparente */
  .bulle{
    position:absolute; z-index:1; left:0; top:0; pointer-events:none;
    background:var(--bulle-bg);
    -webkit-backdrop-filter:blur(12px) saturate(200%); backdrop-filter:blur(12px) saturate(200%);
    border:.5px solid var(--bulle-border);
    box-shadow:
      inset 0 1px 1px rgba(255,255,255,.55),
      inset 0 -1px 1px rgba(0,0,0,.20),
      0 4px 14px rgba(0,0,0,.22),
      0 0 22px rgba(52,199,89,.22);
    will-change:transform;
  }
  .tabs button{flex:1; position:relative; z-index:3; display:flex; flex-direction:column; align-items:center; gap:3px; color:var(--tab-text); font-size:10px; padding:3px 0; transition:color .25s, transform .15s;}
  .tabs button .ic svg{ width:23px; height:23px; display:block; }
  .tabs button .ic{font-size:23px; line-height:1;}
  .tabs button.actif{color:var(--vert);}
  .tabs button.actif .ic{text-shadow:0 0 12px rgba(52,199,89,.7);}
  .tabs button:active{transform:scale(.9);}
  .tab-logo{ display:none; }   /* logo dans la barre : visible seulement sur ordi/tablette */

  /* ===== Boutons ===== */
  .btn{background:var(--vert); color:#fff; border-radius:12px; padding:14px 16px; font-size:17px; font-weight:600; width:100%; text-align:center;}
  .btn:active{opacity:.8;}
  .btn-sec{background:var(--carte); color:var(--vert); box-shadow:0 0 0 .5px rgba(255,255,255,.08);}
  .btn-rouge{background:var(--rouge); color:#fff;}
  .btn-min{font-size:15px; padding:9px 14px; width:auto; border-radius:10px;}
  .barre-actions{display:flex; gap:10px; margin-bottom:14px; flex-wrap:wrap;}
  .barre-actions .btn{width:auto; flex:1; min-width:120px;}

  /* ===== Bouton + (style iOS : simple, dans la barre) ===== */
  .fab{position:fixed; right:18px; bottom:calc(20px + env(safe-area-inset-bottom)); width:56px; height:56px; border-radius:50%; background:var(--vert); color:#fff; font-size:30px; box-shadow:0 4px 16px rgba(52,199,89,.45); z-index:40; display:flex; align-items:center; justify-content:center;}
  .fab:active{opacity:.85;}

  /* ===== Champs (style Form iOS) ===== */
  .champ{margin-bottom:16px;}
  .champ label{display:block; font-size:13px; color:var(--doux); margin-bottom:6px;}
  .champ input,.champ select,.champ textarea{width:100%; padding:12px; border:none; border-radius:10px; background:var(--carte); color:var(--texte); box-shadow:0 0 0 .5px rgba(255,255,255,.1);}
  .champ input:focus,.champ select:focus,.champ textarea:focus{outline:2px solid var(--vert);}
  .champ textarea{font-family:inherit; font-size:17px; resize:vertical; min-height:96px; line-height:1.45;}

  /* ===== Messages reçus ===== */
  .msg{border:.5px solid var(--separateur); border-radius:12px; padding:13px 14px; margin-bottom:11px; background:var(--carte);}
  .msg-nonlu{border-color:var(--vert); box-shadow:0 0 0 1px rgba(52,199,89,.28);}
  .msg-tete{display:flex; align-items:center; gap:8px;}
  .msg-pastille{width:9px; height:9px; border-radius:50%; background:var(--vert); flex:0 0 auto; box-shadow:0 0 8px rgba(52,199,89,.7);}
  .msg-sujet{font-weight:650; font-size:16px;}
  .msg-meta{font-size:12.5px; color:var(--doux); margin:4px 0 9px;}
  .msg-corps{font-size:15px; line-height:1.5; word-break:break-word;}
  .msg-actions{display:flex; gap:8px; margin-top:13px;}
  .btn-mini{font-size:13px; font-weight:600; padding:7px 12px; border-radius:9px; background:var(--gris5); color:var(--texte);}
  .btn-mini.rouge{color:var(--rouge);}
  .btn-mini:active{opacity:.55;}
  .recherche{width:100%; padding:11px 14px; border:none; border-radius:10px; background:var(--carte); color:var(--texte); margin-bottom:14px; box-shadow:0 0 0 .5px var(--bord);}
  .recherche::placeholder{color:var(--doux);}

  /* ===== Sélecteur de couleur ===== */
  .couleurs{display:flex; flex-wrap:wrap; gap:12px;}
  .couleurs .c{width:34px; height:34px; border-radius:50%; cursor:pointer; border:3px solid transparent;}
  .couleurs .c.sel{border-color:var(--texte);}

  /* ===== Modale (feuille iOS « sheet ») ===== */
  .overlay{position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:100; display:none; align-items:flex-end; justify-content:center;}
  .overlay.actif{display:flex;}
  .modale{background:var(--fond); width:100%; max-width:560px; border-radius:14px 14px 0 0; padding:20px 16px calc(24px + env(safe-area-inset-bottom)); max-height:92vh; overflow-y:auto; animation:monte .3s cubic-bezier(.2,.8,.2,1);}
  @keyframes monte{from{transform:translateY(50px);}to{transform:none;}}
  .modale h2{font-size:18px; font-weight:600;}
  .modale .entete{display:flex; justify-content:space-between; align-items:center; margin-bottom:18px;}
  .modale .entete button{font-size:17px; color:var(--vert);}
  .err{color:var(--rouge); font-size:14px; margin-bottom:10px;}

  .seg{display:flex; gap:2px; background:var(--gris5); padding:2px; border-radius:9px; margin-bottom:14px;}
  .seg button{flex:1; padding:7px; border-radius:7px; font-size:13px; color:var(--texte);}
  .seg button.actif{background:var(--carte); font-weight:600; box-shadow:0 1px 3px rgba(0,0,0,.12);}

  canvas{max-width:100%;}
  .legende{margin-top:12px;}
  .legende .l{display:flex; align-items:center; gap:8px; font-size:15px; padding:3px 0;}
  .legende .l .montant{margin-left:auto; color:var(--doux);}
  .pos{color:var(--vert-fonce);} .neg{color:var(--rouge);}

  /* ===== Écran de verrouillage ===== */
  #verrou{position:fixed; inset:0; z-index:9999; background:var(--fond); display:flex; align-items:center; justify-content:center; padding:24px;}
  #verrou .verrou-carte{ width:100%; max-width:340px; background:var(--carte); border-radius:18px; padding:28px 22px; text-align:center; box-shadow:0 0 0 1px var(--separateur), 0 12px 40px rgba(0,0,0,.5);}
  #verrou .verrou-ic{ font-size:40px; }
  #verrou h2{ font-size:22px; font-weight:700; margin-top:10px; }
  #verrou p{ color:var(--doux); font-size:14px; margin:8px 0 18px; }
  #verrou input{ width:100%; padding:14px; border:none; border-radius:12px; background:#1C1C1E; color:var(--texte); text-align:center; font-size:22px; letter-spacing:6px; box-shadow:0 0 0 .5px rgba(255,255,255,.1); margin-bottom:14px;}
  #verrou input:focus{ outline:2px solid var(--vert); }

  /* ===== Pages connexion / inscription / profil ===== */
  /* ===== En-tête de site (même style « verre » que la page d'accueil) ===== */
  /* ===== Barre de navigation — STRICTEMENT identique à la page d'accueil ===== */
  .site-header{ position:sticky; top:0; z-index:100; display:flex; align-items:center; gap:18px; min-height:66px; padding:env(safe-area-inset-top) 20px 0; background:rgba(8,12,22,.62); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid rgba(255,255,255,.10); }
  .site-header .sh-brand{ display:flex; align-items:center; gap:10px; font-weight:700; font-size:19px; letter-spacing:-.02em; color:#eef2f7; text-decoration:none; }
  .site-header .sh-brand img{ height:30px; width:30px; border-radius:8px; }
  .site-header .sh-links{ display:flex; gap:6px; margin-left:14px; }
  .site-header .sh-links a{ color:#9aa7b8; font-size:15px; font-weight:500; padding:8px 12px; border-radius:10px; text-decoration:none; transition:color .2s, background .2s; }
  .site-header .sh-links a:hover{ color:#eef2f7; background:rgba(255,255,255,.045); }
  .site-header .sh-cta{ margin-left:auto; display:flex; align-items:center; gap:10px; }
  .site-header .sh-cta a, .site-header .sh-cta button{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-size:15px; font-weight:600; padding:10px 16px; border-radius:14px; text-decoration:none; font-family:inherit; cursor:pointer; border:none; white-space:nowrap; transition:transform .18s, box-shadow .25s, background .25s; }
  .site-header .sh-cta a:active, .site-header .sh-cta button:active{ transform:scale(.96); }
  .site-header .sh-ghost{ color:#eef2f7; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.10); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
  .site-header .sh-ghost:hover{ background:rgba(255,255,255,.07); }
  .site-header .sh-primary{ color:#04130a; background:linear-gradient(180deg,#46d76a,#34C759); box-shadow:0 8px 24px rgba(52,199,89,.38), inset 0 1px 0 rgba(255,255,255,.45); }
  .site-header .sh-primary:hover{ box-shadow:0 12px 34px rgba(52,199,89,.5), inset 0 1px 0 rgba(255,255,255,.5); }
  @media (max-width:640px){ .site-header:not(.app-header) .sh-links{ display:none; } }

  .auth-wrap{ min-height:calc(100vh - 60px); display:flex; align-items:center; justify-content:center; padding:24px; }
  .auth-carte{ width:100%; max-width:380px; background:var(--carte); border-radius:18px; padding:30px 22px; box-shadow:0 0 0 1px var(--separateur), 0 12px 40px rgba(0,0,0,.5); }
  .auth-carte h1{ font-size:27px; font-weight:700; margin-bottom:4px; }
  .auth-carte .sous{ color:var(--doux); font-size:14px; margin-bottom:22px; }
  .auth-carte .lien{ display:block; text-align:center; margin-top:18px; color:var(--vert); text-decoration:none; font-size:15px; }
  .msg-ok{ color:var(--vert); font-size:14px; margin-bottom:10px; }
  .page-simple{ max-width:560px; margin:0 auto; padding:8px 16px 40px; }

  /* ===== Adaptation tablette / ordinateur (écrans larges) ===== */
  @media (min-width: 768px){
    .topbar{ max-width:920px; margin:0 auto; }
    .page{ max-width:920px; }
    /* listes sur 2 colonnes pour profiter de la largeur */
    #listeDepenses, #bCategories, #aTop{ display:grid; grid-template-columns:1fr 1fr; column-gap:26px; align-content:start; }
    #listeDepenses .vide{ grid-column:1 / -1; }
    .tabs{ max-width:600px; }
  }
  @media (min-width: 1180px){
    .topbar{ max-width:1080px; }
    .page{ max-width:1080px; }
    #listeDepenses{ grid-template-columns:1fr 1fr 1fr; }
  }

  /* ===== Barre d'onglets EN HAUT sur tablette / ordinateur ===== */
  @media (min-width: 768px){
    .tabs{
      top: calc(12px + env(safe-area-inset-top)); bottom: auto;
      max-width: 840px; align-items:center; gap:2px;
      padding: 8px 12px 8px 14px;
      -webkit-backdrop-filter:saturate(200%) blur(42px); backdrop-filter:saturate(200%) blur(42px);
      box-shadow:
        inset 0 1px 1px rgba(255,255,255,.42),
        inset 0 -1px 1px rgba(0,0,0,.22),
        0 12px 44px rgba(0,0,0,.50);
    }
    .tab-logo{ display:block; height:24px; width:auto; flex:0 0 auto; margin:0 10px 0 2px; position:relative; z-index:3; }
    .tabs button .ic{ display:none; }                 /* pas d'icônes en haut */
    .tabs button{ font-size:15px; padding:11px 10px; } /* libellés seuls, plus grands */
    .topbar-tete{ display:none; }                      /* on retire l'autre logo en haut */
    /* (plus de barre fixe : l'en-tête est en flux normal) */
    .fab{ bottom: 28px; }
  }

  /* ===== Thèmes clair / sombre / auto ===== */
  html[data-theme="dark"]{ color-scheme: dark; }
  html[data-theme="light"]{
    color-scheme: light;
    --fond:#f4f6fa; --carte:#ffffff; --texte:#0e1422; --doux:#5c6b7e;
    --gris5:rgba(13,19,32,.06); --separateur:rgba(13,19,32,.12); --bord:rgba(13,19,32,.12);
    --tab-bg:rgba(8,12,22,.62); --tab-text:#eef2f7; --tab-sheen:rgba(255,255,255,.12);
    --bulle-bg:rgba(13,19,32,.05); --bulle-border:rgba(13,19,32,.14); --champ:#ffffff; --carte-plein:#ffffff;
  }
  html[data-theme="light"] body{
    background:
      radial-gradient(900px 600px at 12% -5%, rgba(52,199,89,.14), transparent 60%),
      radial-gradient(900px 700px at 100% 0%, rgba(0,122,255,.12), transparent 55%),
      linear-gradient(180deg,#f4f6fa,#eef1f7 60%,#f4f6fa);
    background-attachment:fixed;
  }
  html[data-theme="light"] .carte{ box-shadow:0 1px 2px rgba(13,19,32,.06), 0 0 0 1px var(--separateur); }
  @media (prefers-color-scheme: light){
    html[data-theme="auto"]{
      color-scheme: light;
      --fond:#f4f6fa; --carte:#ffffff; --texte:#0e1422; --doux:#5c6b7e;
      --gris5:rgba(13,19,32,.06); --separateur:rgba(13,19,32,.12); --bord:rgba(13,19,32,.12);
      --tab-bg:rgba(8,12,22,.62); --tab-text:#eef2f7; --tab-sheen:rgba(255,255,255,.12);
      --bulle-bg:rgba(13,19,32,.05); --bulle-border:rgba(13,19,32,.14); --champ:#ffffff; --carte-plein:#ffffff;
    }
    html[data-theme="auto"] body{
      background:
        radial-gradient(900px 600px at 12% -5%, rgba(52,199,89,.14), transparent 60%),
        radial-gradient(900px 700px at 100% 0%, rgba(0,122,255,.12), transparent 55%),
        linear-gradient(180deg,#f4f6fa,#eef1f7 60%,#f4f6fa);
      background-attachment:fixed;
    }
    html[data-theme="auto"] .carte{ box-shadow:0 1px 2px rgba(13,19,32,.06), 0 0 0 1px var(--separateur); }
  }

  /* ===== Notification interne (toast) ===== */
  .toast{ position:fixed; left:50%; transform:translateX(-50%) translateY(8px); bottom:calc(96px + env(safe-area-inset-bottom)); background:var(--rouge); color:#fff; padding:12px 18px; border-radius:14px; font-size:14px; font-weight:600; z-index:9998; box-shadow:0 8px 24px rgba(0,0,0,.4); max-width:90%; text-align:center; opacity:0; pointer-events:none; transition:opacity .3s, transform .3s; }
  .toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
  @media (min-width:768px){ .toast{ bottom:28px; } }

  /* ===== Connexion / inscription : confort grand écran ===== */
  @media (min-width: 768px){
    .auth-carte{ max-width:420px; padding:34px 28px; }
    .auth-carte h1{ font-size:30px; }
  }

  /* ===== Tableau de bord 2 colonnes sur ordinateur ===== */
  @media (min-width: 1024px){
    .page{ max-width: 1060px; }
    #page-accueil.actif, #page-budget.actif, #page-graph.actif, #page-reglages.actif{
      column-count: 2; column-gap: 18px;
    }
    #page-accueil.actif > .carte, #page-accueil.actif > .duo,
    #page-budget.actif  > .carte,
    #page-graph.actif    > .carte,
    #page-reglages.actif > .carte, #page-reglages.actif > p{
      break-inside: avoid; -webkit-column-break-inside: avoid;
    }
  }

  /* ===== Profil + Admin : mise en page bureau ===== */
  @media (min-width: 1024px){
    .page-simple{ max-width:960px; }
    .profil-grille{ column-count:2; column-gap:18px; }
    .profil-grille .carte, .profil-grille .err, .profil-grille .msg-ok{ break-inside:avoid; -webkit-column-break-inside:avoid; }
    .profil-grille .err, .profil-grille .msg-ok{ column-span:all; }
    #liste{ display:grid; grid-template-columns:1fr 1fr; gap:0 24px; }
  }

  /* ===== Logo mybuydget ===== */
  .logo-marque{ display:flex; justify-content:center; margin-bottom:22px; }
  .logo-img{ width:75%; max-width:240px; height:auto; display:block; }
  .topbar-entete{ display:flex; align-items:center; gap:10px; }
  .logo-topbar{ width:30px; height:30px; border-radius:7px; flex-shrink:0; }

  /* ===== Logo image dans la barre du haut de l'app ===== */
  .logo-app{ height:30px; width:auto; display:block; }
  @media (min-width:768px){ .logo-app{ height:34px; } }
  .topbar-tete{ display:flex; align-items:center; gap:9px; min-height:34px; }
  .logo-icone{ height:30px; width:30px; display:block; flex:0 0 auto; }
  @media (min-width:768px){ .logo-icone{ height:34px; width:34px; } }
  .page-titre{ font-family:var(--display); font-size:26px; font-weight:600; letter-spacing:-.02em; color:var(--texte); }

  /* ===== Page Réglages : disposition « ordinateur » (panneau sur 2 colonnes en grand écran) ===== */
  @media (min-width:768px){
    #page-reglages.actif{ display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; }
    #page-reglages > .carte{ margin-bottom:0; }
    #page-reglages > p{ grid-column:1 / -1; margin-top:6px; }
  }

/* ===== Barre de navigation de l'app (page budget) ===== */
.app-header .sh-links a{ cursor:pointer; }
.app-header .sh-links a.actif{ color:#eef2f7; background:rgba(52,199,89,.20); }
.app-header .sh-cta .sh-ghost{ white-space:nowrap; }
/* Bouton hamburger (mobile uniquement) */
.sh-burger{ display:none; align-items:center; justify-content:center; width:38px; height:38px; border:none; background:transparent; cursor:pointer; flex:0 0 auto; padding:0; }
.sh-burger span{ display:block; width:20px; height:2px; background:#eef2f7; border-radius:2px; position:relative; transition:background .2s; }
.sh-burger span::before, .sh-burger span::after{ content:""; position:absolute; left:0; width:20px; height:2px; background:#eef2f7; border-radius:2px; transition:transform .25s; }
.sh-burger span::before{ top:-6px; }
.sh-burger span::after{ top:6px; }
.app-header.menu-ouvert .sh-burger span{ background:transparent; }
.app-header.menu-ouvert .sh-burger span::before{ transform:translateY(6px) rotate(45deg); }
.app-header.menu-ouvert .sh-burger span::after{ transform:translateY(-6px) rotate(-45deg); }
.sh-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:95; opacity:0; pointer-events:none; transition:opacity .28s; }
.sh-overlay.actif{ opacity:1; pointer-events:auto; }
@media (min-width:761px){ .sh-overlay{ display:none !important; } }
@media (max-width:760px){
  /* Sur mobile l'effet "verre" du header est désactivé : il emprisonnerait le
     tiroir (position:fixed) à l'intérieur du header. Fond opaque à la place. */
  .app-header{ -webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(8,12,22,.97); }
  .app-header{ gap:10px; padding-left:12px; padding-right:12px; }
  .app-header .sh-burger{ display:flex; order:0; }
  .app-header .sh-brand{ order:1; }
  .app-header .sh-cta{ order:2; margin-left:auto; }
  .app-header .sh-links{
    position:fixed; top:0; left:0; bottom:0; width:80%; max-width:300px; margin:0;
    flex-direction:column; align-items:stretch; gap:4px;
    background:rgba(8,12,22,.98); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
    border-right:1px solid rgba(255,255,255,.10);
    padding:calc(env(safe-area-inset-top) + 74px) 14px 24px;
    transform:translateX(-100%); transition:transform .28s cubic-bezier(.2,.8,.2,1);
    overflow-y:auto; z-index:300; display:flex !important;
  }
  .app-header.menu-ouvert .sh-links{ transform:translateX(0); }
  .app-header .sh-links a{ font-size:16px; padding:14px; width:100%; border-radius:12px; }
}
/* ===== Swipe iOS : glisser à gauche révèle « Supprimer » ===== */
.swipe-row{ position:relative; overflow:hidden; }
.swipe-row .swipe-del{ position:absolute; top:0; right:0; bottom:0; width:92px; border:none; background:#FF3B30; color:#fff; font-size:14px; font-weight:600; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.swipe-row > .item{ position:relative; transition:transform .2s ease; }
@media (max-width:760px){ .swipe-row > .item{ background:var(--carte-plein); } }

/* ===== Sélecteur d'icônes de catégorie ===== */
.emojis{ display:flex; flex-wrap:wrap; gap:8px; }
.emojis .e{ width:42px; height:42px; border-radius:12px; font-size:21px; display:flex; align-items:center; justify-content:center; background:var(--gris5); border:2px solid transparent; color:var(--doux); }
.emojis .e.sel{ border-color:var(--vert); background:rgba(52,199,89,.15); }
/* Swipe sur les dépenses */
#listeDepenses .item{ touch-action:pan-y; will-change:transform; }

/* ===== Visite guidée (bulles) ===== */
.tour-voile{ position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:300; }
.tour-bulle{ position:fixed; z-index:301; max-width:320px; width:calc(100% - 40px); background:var(--carte); color:var(--texte); border:1px solid var(--separateur); border-radius:18px; padding:18px; box-shadow:0 20px 60px rgba(0,0,0,.5); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); animation:bulleIn .25s ease; }
@keyframes bulleIn{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }
.tour-bulle h3{ font-size:17px; margin:0 0 6px; }
.tour-bulle p{ font-size:14px; color:var(--doux); margin:0 0 14px; line-height:1.5; }
.tour-bulle .tour-pied{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.tour-bulle .tour-pts{ color:var(--doux); font-size:12.5px; }
.tour-bulle .tour-btns{ display:flex; gap:8px; }
.tour-bulle button{ font-size:14px; font-weight:600; padding:9px 14px; border-radius:11px; border:none; cursor:pointer; font-family:inherit; }
.tour-bulle .tour-suiv{ background:var(--vert); color:#fff; }
.tour-bulle .tour-passer{ background:var(--gris5); color:var(--doux); }
.tour-cible{ position:relative; z-index:302 !important; border-radius:14px; box-shadow:0 0 0 3px var(--vert), 0 0 0 9999px rgba(0,0,0,.55) !important; }

/* ===== Accents Premium ===== */
html[data-accent="violet"]{ --vert:#A78BFA; }
html[data-accent="violet"] .fab{ background:#A78BFA; box-shadow:0 4px 16px rgba(167,139,250,.45); }
html[data-accent="ambre"]{ --vert:#F59E0B; }
html[data-accent="ambre"] .fab{ background:#F59E0B; box-shadow:0 4px 16px rgba(245,158,11,.45); }