@font-face{font-family:'Bitter';src:url('/fonts/bitter-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Bitter';src:url('/fonts/bitter-latin-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Bitter';src:url('/fonts/bitter-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Bitter';src:url('/fonts/bitter-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Bitter';src:url('/fonts/bitter-latin-700-italic.woff2') format('woff2');font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:'Caveat';src:url('/fonts/caveat-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Caveat';src:url('/fonts/caveat-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Caveat';src:url('/fonts/caveat-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
  :root{
    --papier:#FDFDFB; --encre:#2B3540; --mute:#7B8590; --rouge:#D25C4C; --vert:#3E7D5C;
    --grille:rgba(70,110,180,.12); --marge:rgba(210,92,76,.45); --filet:#C9CDC2; --creme:#F4F2EA;
  }
  *{box-sizing:border-box; margin:0; padding:0}
  html,body{height:100%}
  body{
    font-family:'Bitter',Georgia,serif; background:var(--papier); color:var(--encre);
    font-variant-numeric:tabular-nums; -webkit-tap-highlight-color:transparent;
  }
  .screen{position:relative; width:100%; height:100%; overflow:hidden; padding-top:env(safe-area-inset-top);
    background:var(--papier); display:flex; flex-direction:column; margin:0 auto}
  @media (min-width:520px){ /* sur grand écran : colonne centrée, le papier continue derrière */
    body{background:#EFEEE9}
    .screen{max-width:480px; height:100vh; box-shadow:0 0 0 1px var(--filet), 0 20px 60px rgba(43,53,64,.12)}
  }
  .screen::before{content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
    background:
      linear-gradient(to right, transparent 0 26px, var(--marge) 26px 27.6px, transparent 27.6px),
      repeating-linear-gradient(to bottom, transparent 0 23px, var(--grille) 23px 24.6px)}
  .appbody{flex:1; overflow-y:auto; padding:2px 20px 12px 40px; position:relative; z-index:1;
    scrollbar-width:none} .appbody::-webkit-scrollbar{display:none}
  .tabbar{flex:none; display:grid; grid-template-columns:1fr 1fr 64px 1fr 1fr; align-items:end; z-index:2;
    padding:0 8px; position:relative}
  .tabbar::before{content:""; position:absolute; left:0; right:0; bottom:0; height:32px;
    background:var(--creme); border-top:1px dashed var(--filet)}
  .tab{position:relative; z-index:1; display:flex; justify-content:center; align-items:flex-end; cursor:pointer}
  .tabo{width:100%; max-width:96px; height:36px; border-radius:9px 9px 0 0; display:flex; align-items:center;
    justify-content:center; font-family:'Caveat',cursive; font-size:15px; font-weight:600; letter-spacing:.3px;
    color:#4A5563; background:var(--pastel); transition:height .16s ease, background-color .16s ease}
  .tab.active .tabo{height:46px; color:var(--papier); background:var(--c);
    box-shadow:0 -4px 10px rgba(43,53,64,.22)}
  .plus{position:relative; z-index:1; display:flex; justify-content:center; align-items:flex-end; padding-bottom:1px}
  .pil{width:56px; height:30px; border-radius:16px; background:var(--encre); cursor:pointer;
    display:flex; align-items:center; justify-content:center; box-shadow:0 3px 8px rgba(43,53,64,.32)}
  .pil svg{width:16px; height:16px; stroke:var(--papier); stroke-width:2.6; stroke-linecap:round; fill:none}
  .pil:active{transform:scale(.94)}

  .jour{font-family:'Caveat'; font-size:34px; font-weight:600; line-height:1; margin-top:6px}
  .sous-jour{font-size:12px; font-style:italic; color:var(--mute)}
  .hand{font-family:'Caveat'; font-weight:600}
  .lbl{font-size:12px; color:var(--mute)}

  .solde-label{font-size:12.5px; color:var(--mute); margin-top:16px}
  .solde{font-size:46px; font-weight:700; color:var(--rouge); line-height:1.08; letter-spacing:-.5px}
  .solde.positive{color:var(--vert)}
  .solde svg{display:block; margin-top:0px}
  .auvert{font-family:'Caveat'; font-size:22px; font-weight:600; color:var(--vert); margin-top:4px}

  .reste{font-family:'Caveat'; font-size:25px; font-weight:600; color:var(--vert); margin-top:16px}
  .reste small{font-family:'Bitter'; font-size:12px; font-style:italic; color:var(--mute); font-weight:400}
  .crayon{position:relative; height:10px; margin-top:6px}
  .crayon svg{position:absolute; inset:0; width:100%; height:100%}

  .auj-total{margin-top:16px; font-size:13.5px}
  .auj-total b{font-size:16px}

  .tickets{margin-top:10px; display:flex; flex-direction:column; gap:7px}
  .ticket{background:#fff; border:1px solid #E5E3DA; padding:8px 12px 9px; display:flex;
    justify-content:space-between; align-items:baseline; font-size:14px; position:relative;
    box-shadow:0 1px 2px rgba(43,53,64,.08)}
  .ticket::before,.ticket::after{content:""; position:absolute; width:10px; height:10px; border-radius:50%;
    background:var(--papier); top:50%; transform:translateY(-50%); box-shadow:inset 0 0 2px rgba(0,0,0,.18)}
  .ticket::before{left:-6px} .ticket::after{right:-6px}
  .ticket:nth-child(odd){transform:rotate(-.45deg)}
  .ticket:nth-child(even){transform:rotate(.4deg)}
  .ticket .nom{font-weight:600}
  .ticket .montant{font-weight:700}
  .ticket .cible{color:var(--mute); font-size:12px}
  .ticket.over .montant{color:var(--rouge)}
  .ticket .mini{width:64px; height:5px; background:#ECEAE2; border-radius:3px; position:relative; overflow:hidden; align-self:center}
  .ticket .mini i{position:absolute; left:0; top:0; bottom:0; background:var(--vert); border-radius:3px}
  .ticket.over .mini i{background:var(--rouge)}
  .ticket .col{display:flex; align-items:center; gap:10px}

  /* ---- Dépenses ---- */
  .cycle-switch{display:flex; gap:8px; margin-top:10px}
  .cycle-switch button{font-family:'Bitter'; font-size:12.5px; padding:6px 12px; border-radius:999px;
    border:1px solid var(--filet); background:#fff; color:var(--mute); cursor:pointer}
  .cycle-switch button.on{border-color:var(--encre); color:var(--encre); font-weight:700}
  .jour-head{font-family:'Caveat'; font-size:22px; font-weight:600; color:var(--encre); margin:16px 0 2px}
  .ecriture{display:flex; justify-content:space-between; align-items:baseline; padding:7px 2px;
    border-bottom:1px dotted var(--filet); font-size:14.5px; cursor:pointer}
  .ecriture .que{color:var(--encre)} .ecriture .que small{color:var(--mute); font-style:italic; margin-left:6px; font-size:12px}
  .ecriture .combien{font-weight:700}
  .ecriture .combien.neg{color:var(--rouge)}
  .vide{margin-top:22px; font-style:italic; color:var(--mute); font-size:13.5px; line-height:1.6}
  .total-cycle{margin-top:14px; font-size:13.5px; display:flex; justify-content:space-between; border-top:2.5px double var(--encre); padding-top:8px; font-weight:700}

  /* ---- Projection ---- */
  .proj-note{font-family:'Caveat'; font-size:21px; font-weight:600; color:var(--vert); margin-top:2px}
  table.projection{width:100%; border-collapse:collapse; margin-top:10px; font-size:12.5px}
  table.projection th{font-size:10.5px; color:var(--mute); font-weight:600; text-align:right; padding:4px 4px;
    border-bottom:1.5px solid var(--encre)}
  table.projection th:first-child{text-align:left}
  table.projection td{padding:5.5px 4px; text-align:right; border-bottom:1px solid #D8DCE2}
  table.projection td:first-child{text-align:left; color:var(--encre); font-weight:600}
  table.projection td.mv{color:var(--mute)}
  table.projection td.pos{color:var(--vert); font-weight:700}
  table.projection td.neg{color:var(--rouge)}
  table.projection tr.vert td{background:#E9F2EC}
  table.projection tr.vert td:first-child{color:var(--vert)}
  table.projection tr:last-child td{border-bottom:2.5px double var(--encre)}

  /* ---- Réglages (sections pliables) ---- */
  .acc{margin-top:4px}
  .acc-h{width:100%; display:flex; align-items:baseline; gap:8px; background:none; border:none;
    border-bottom:1px solid var(--filet); padding:9px 0 6px; cursor:pointer; text-align:left;
    font-family:'Caveat'; font-size:21px; font-weight:600; color:var(--encre)}
  .acc-h .n{margin-left:auto; font-family:'Bitter'; font-size:10px; font-style:italic; color:var(--mute)}
  .acc-h .chev{font-size:12px; color:var(--mute); transition:transform .15s}
  .acc.open .chev{transform:rotate(180deg)}
  .acc-b{display:none; padding:2px 0 8px}
  .acc.open .acc-b{display:block}
  .regle{display:flex; justify-content:space-between; align-items:center; padding:7px 0; font-size:13.5px;
    border-bottom:1px dotted var(--filet); gap:10px}
  .regle label{color:var(--encre)}
  .regle input[type=number], .charge input[type=number], .addline input[type=number]{
    font-family:'Bitter'; font-weight:700; text-align:right; border:none; border-bottom:1.5px solid var(--encre);
    background:transparent; padding:2px 2px; color:var(--encre); appearance:textfield; -moz-appearance:textfield}
  input::-webkit-outer-spin-button, input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
  .regle input:focus, .charge input:focus, .addline input:focus{outline:none; border-bottom-color:var(--vert)}
  .regles2{display:grid; grid-template-columns:1fr 1fr; column-gap:16px}
  .regles2 .regle{flex-direction:column; align-items:stretch; gap:1px}
  .regles2 .regle label{font-size:11px; color:var(--mute)}
  .regles2 .regle input{width:100%; font-size:15px}
  .charges2{display:grid; grid-template-columns:repeat(3, 1fr); column-gap:9px}
  .charge{display:flex; align-items:center; gap:3px; padding:4px 0; border-bottom:1px dotted var(--filet); font-size:11px}
  .charge .l{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--encre)}
  .charge input{width:50px; font-size:11.5px; padding:1px 1px}
  .del{border:none; background:none; color:var(--mute); cursor:pointer; font-size:11px; padding:0 1px}
  .del:hover{color:var(--rouge)}
  .addline{display:flex; gap:7px; align-items:center; margin-top:8px; padding:7px 10px;
    border:1.5px dashed var(--filet); border-radius:10px; background:#fff}
  .addline input[type=text]{flex:1; min-width:0; font-family:'Bitter'; font-size:12.5px; padding:4px 2px;
    border:none; border-bottom:1.5px solid var(--filet); background:transparent; color:var(--encre)}
  .addline input[type=number]{width:64px; font-size:12.5px}
  .btn{font-family:'Bitter'; font-size:13px; font-weight:600; padding:8px 14px; border-radius:8px; cursor:pointer;
    border:1.5px solid var(--encre); background:var(--encre); color:var(--papier)}
  .btn.mini{padding:6px 11px; font-size:12px; border-radius:999px; flex:none}
  .btn.ghost{background:transparent; color:var(--encre)}
  .btn.danger{border-color:var(--rouge); background:transparent; color:var(--rouge)}
  .btn:disabled{opacity:.4; cursor:default}
  .totalfixe{font-size:12px; color:var(--mute); font-style:italic; margin-top:8px}

  /* ---- Saisie (overlay) ---- */
  .overlay{position:absolute; inset:0; z-index:20; background:var(--papier); display:none; flex-direction:column;
    border-radius:40px; overflow:hidden}
  .overlay.open{display:flex}
  .overlay .screen::before{display:none}
  .ov-head{display:flex; justify-content:space-between; align-items:center; padding:52px 24px 0}
  .ov-title{font-family:'Caveat'; font-size:30px; font-weight:600}
  .ov-close{font-size:15px; color:var(--mute); cursor:pointer; font-family:'Bitter'}
  .ov-body{flex:1; overflow-y:auto; padding:8px 24px 8px; scrollbar-width:none}
  .montant-aff{font-size:52px; font-weight:700; text-align:center; margin:8px 0 2px; letter-spacing:-1px}
  .montant-aff.zero{color:var(--mute)}
  .chips{display:flex; flex-wrap:wrap; gap:7px; justify-content:center; margin:10px 0 4px}
  .chip{font-family:'Bitter'; font-size:13px; padding:7px 12px; border-radius:999px; border:1px solid var(--filet);
    background:#fff; cursor:pointer; display:flex; align-items:center; gap:6px}
  .chip .pastille{width:9px; height:9px; border-radius:50%; display:inline-block}
  .chip.on{border:2px solid var(--encre); font-weight:700; background:var(--creme)}
  .datepick{display:flex; gap:8px; justify-content:center; margin:8px 0 2px}
  .datepick button{font-family:'Bitter'; font-size:12.5px; padding:5px 11px; border-radius:999px;
    border:1px solid var(--filet); background:#fff; color:var(--mute); cursor:pointer}
  .datepick button.on{border-color:var(--encre); color:var(--encre); font-weight:700}
  .noteinput{width:100%; font-family:'Caveat'; font-size:21px; color:var(--encre); text-align:center;
    border:none; border-bottom:1.5px dashed var(--filet); background:transparent; padding:5px 4px; margin-top:4px}
  .noteinput:focus{outline:none; border-bottom-color:var(--vert)}
  .pave{display:grid; grid-template-columns:repeat(3,1fr); gap:9px; padding:12px 26px 6px}
  .touche{font-family:'Bitter'; font-size:25px; font-weight:600; text-align:center; padding:13px 0; border-radius:12px;
    background:#fff; border:1px solid #E5E3DA; cursor:pointer; user-select:none}
  .touche:active{background:var(--creme)}
  .touche.small{font-size:20px}
  .ov-actions{display:flex; gap:10px; padding:8px 24px 30px}
  .ov-actions .btn{flex:1; padding:13px; font-size:15px}
  .ov-actions .btn.suppr{flex:.7}

  /* ---- Toast ---- */
  .toast{position:absolute; left:50%; bottom:96px; transform:translateX(-50%) rotate(-1.2deg); z-index:30;
    background:#fff; border:1px solid #E5E3DA; box-shadow:0 6px 18px rgba(0,0,0,.18); padding:10px 18px;
    font-family:'Caveat'; font-size:22px; font-weight:600; color:var(--vert); opacity:0; pointer-events:none;
    transition:opacity .25s}
  .toast.show{opacity:1}

  /* ---- Verrouillage (calculette) ---- */
  .lock{position:absolute; inset:0; z-index:40; background:var(--papier); display:none; flex-direction:column;
    align-items:center; justify-content:center; border-radius:40px}
  .lock::before{content:""; position:absolute; inset:0; pointer-events:none;
    background:
      linear-gradient(to right, transparent 0 26px, var(--marge) 26px 27.6px, transparent 27.6px),
      repeating-linear-gradient(to bottom, transparent 0 23px, var(--grille) 23px 24.6px)}
  .lock.open{display:flex}
  .calc{position:relative; width:252px; background:#fff; border:1.5px solid var(--encre); border-radius:20px;
    padding:18px 16px 14px; box-shadow:0 14px 30px rgba(43,53,64,.20); transform:rotate(-.7deg); z-index:1}
  .trombone{position:absolute; top:-13px; right:22px; width:26px; height:26px; stroke:var(--encre);
    fill:none; stroke-width:1.7; stroke-linecap:round; transform:rotate(14deg); opacity:.85}
  .calc h2{font-family:'Caveat'; font-size:29px; font-weight:600; text-align:center; line-height:1}
  .calc .sous{font-size:11px; font-style:italic; color:var(--mute); text-align:center; margin-top:2px}
  .lcd{margin-top:12px; height:46px; background:var(--creme); border:1px solid var(--filet); border-radius:10px;
    display:flex; align-items:center; justify-content:center; font-size:20px; letter-spacing:9px;
    color:var(--encre); text-indent:9px}
  .lock-pave{padding:12px 0 0}
  .lock-pave .touche{font-size:21px; padding:14px 0; border-radius:11px}
  .lock-pave .touche.fn{font-size:17px; color:var(--mute); font-weight:600}
  .lock-pave .touche.fn.eff{color:var(--rouge)}
  .lock-hint{font-size:11px; font-style:italic; color:var(--mute); text-align:center; margin-top:12px}

  @media (max-width:519px){
    input[type=number], input[type=text]{font-size:16px !important} /* empêche le zoom iOS */
  }

  .synchro{display:none; position:absolute; top:10px; right:14px; width:7px; height:7px; border-radius:50%; background:#C4C8BF}
  .synchro.vue{display:block}
  .synchro.vue.ok{background:#0FA36B}

  /* Règle reprise de la maquette elle-même (son @media max-width:760px aplatie déjà ces rayons) :
     l'app est plein écran, les overlays ne doivent pas avoir d'angles arrondis sur un viewport carré. */
  .overlay,.lock{border-radius:0} /* app plein écran : pas d'angles arrondis (la maquette aplatie déjà ces rayons sur mobile) */

  /* Bandeau hors-ligne (spec §9) : « hors-ligne — dernière synchro il y a X ». */
  .bandeau-hl{position:absolute; top:8px; left:50%; transform:translateX(-50%); z-index:40;
    background:var(--creme); color:var(--mute); font-size:12px; line-height:1.2; white-space:nowrap;
    padding:5px 12px; border-radius:999px; border:1px solid var(--filet); box-shadow:0 1px 4px rgba(43,53,64,.08)}
  .bandeau-hl[hidden]{display:none}

  /* Accessibilité (spec §6.1) : motion réduite demandée, focus visible au clavier. */
  @media (prefers-reduced-motion: reduce){
    *, *::before, *::after{animation:none !important; transition:none !important}
  }
  :focus-visible{outline:2px solid var(--vert); outline-offset:2px}

  /* Vue Projection v2 : sécurité découvert, épargne en grand, budget mensuel éditable. */
  .securite{margin-top:14px; padding:10px 14px 8px; border:1.5px solid rgba(62,125,92,.5);
    border-radius:10px; transform:rotate(-.4deg); background:rgba(253,253,251,.6)}
  .securite.alerte{border-color:rgba(210,92,76,.65)}
  .sec-ligne{font-family:'Caveat'; font-size:21px; font-weight:600; line-height:1.25}
  .sec-chiffre{font-size:24px}
  .securite .sec-marge{color:var(--vert)}
  .securite.alerte .sec-marge{color:var(--rouge)}
  .sec-note{font-size:11px; font-style:italic; color:var(--mute); margin-top:2px}
  .epargne-grand{font-family:'Caveat'; font-size:34px; font-weight:600; line-height:1.05; margin-top:14px}
  table.projection input.bud{font-family:'Caveat'; font-size:18px; font-weight:600; color:var(--encre);
    width:72px; text-align:right; background:transparent; border:none;
    border-bottom:1.5px dotted var(--mute); border-radius:0; padding:0 2px}
  table.projection input.bud:focus{outline:none; border-bottom-color:var(--encre)}
  table.projection .depense{font-size:10px; color:var(--mute)}
  table.projection .depense.vert{color:var(--vert)}
  table.projection .depense.rouge{color:var(--rouge); font-weight:700}