/* CAISSES DE FAMILLE · encres propres posées sur le socle commun.
   Signature : l'étagère de bocaux qui se remplissent d'or. Le reste reste sobre et stable. */
:root{
  --fond:#EDF0E8;          /* vert-gris pâle */
  --accent:#4A6B2A;        /* olive profond */
  --accent-fonce:#34501C;
  --accent2:#FFB224;       /* or de la charte, remplissage des jauges */
  --or-fonce:#E59A00;
  --planche:#2E3A22;
  --verre:#FAFCF6;
  --alerte:#B3261E;
  --sur-accent:#fff;
  --bord-bocal:color-mix(in srgb,var(--accent) 42%,var(--fond));
}
main{max-width:1200px;margin:0 auto;padding:0 var(--gouttiere)}
h1{font-size:clamp(1.6rem,1.3rem + 1.2vw,2.1rem)}
.chiffre{font-family:var(--mono);font-variant-numeric:tabular-nums}
.doux{color:var(--doux)}
.saut-visuel{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
[hidden]{display:none!important}

/* En-tête */
.tete{flex-wrap:wrap;background:var(--fond)}
.marque span{font-family:var(--titre);font-weight:600;font-size:1.12rem}
.tete-actions{display:flex;gap:8px;flex-wrap:wrap}
.bouton.petit{min-height:42px;padding:0 16px;font-size:.92rem}
.bouton.danger{border-color:var(--alerte);color:var(--alerte)}
.rangee-boutons{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.rangee-boutons.fin{margin-top:20px}
.espace{flex:1}

.bandeau-exemple{background:color-mix(in srgb,var(--accent2) 26%,var(--fond));padding:12px var(--gouttiere);display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;justify-content:space-between;font-size:.94rem}

/* Bandeau des trois chiffres */
.bilan{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:22px 0 8px}
.bilan-case{background:#fff;border:1px solid var(--filet);border-radius:var(--rayon);padding:14px 16px;display:grid;gap:2px;align-content:start}
.bilan-titre{font-size:.8rem;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.06em}
.bilan-chiffre{font-family:var(--mono);font-size:clamp(1.25rem,1rem + 1vw,1.75rem);line-height:1.2;overflow-wrap:anywhere}
.bilan-note{font-size:.84rem;color:var(--doux)}
.bilan-mot{font-family:var(--texte);font-weight:700;letter-spacing:-.01em}
.bilan-case.negatif{border-color:var(--alerte);background:color-mix(in srgb,var(--alerte) 6%,#fff)}
.bilan-case.negatif .bilan-chiffre,.bilan-case.negatif .bilan-titre{color:var(--alerte)}

/* Blocs */
.bloc{margin-top:30px}
.bloc-tete{display:grid;gap:4px;margin-bottom:16px}
.deux-colonnes{display:grid;gap:20px}
.deux-colonnes>.bloc{background:#fff;border:1px solid var(--filet);border-radius:var(--rayon);padding:20px}
@media (min-width:980px){.deux-colonnes{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}}

/* L'étagère */
.vide{background:#fff;border:1.5px dashed var(--bord-bocal);border-radius:var(--rayon);padding:22px;display:grid;gap:14px;max-width:640px}
.etagere{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));row-gap:26px}
.case{padding:0 12px;min-width:0}
.caisse{all:unset;box-sizing:border-box;display:flex;flex-direction:column;width:100%;cursor:pointer;border-radius:8px}
.caisse:focus-visible{outline:3px solid var(--accent2);outline-offset:4px}
.caisse:hover .fiche-nom{text-decoration:underline;text-underline-offset:3px}
.caisse:hover .bocal{transform:translateY(-3px)}

.bocal{display:flex;flex-direction:column;align-items:center;width:96px;height:138px;margin:0 auto;transition:transform .2s ease}
.bocal-couvercle{width:64%;height:13px;background:var(--accent);border-radius:4px 4px 2px 2px;flex:none}
.bocal-corps{position:relative;flex:1;width:100%;margin-top:3px;background:var(--verre);border:2px solid var(--bord-bocal);border-radius:20px 20px 14px 14px/16px 16px 12px 12px;overflow:hidden}
.bocal-or{position:absolute;left:0;right:0;bottom:0;height:calc(var(--niveau,0) * 1%);background:linear-gradient(to top,var(--or-fonce),var(--accent2));box-shadow:inset 0 2px 0 #FFD47E;transition:height .6s ease}
.bocal-traits{position:absolute;left:0;top:0;bottom:0;width:26%;background:repeating-linear-gradient(to top,transparent 0 calc(25% - 1.5px),color-mix(in srgb,var(--accent) 38%,transparent) calc(25% - 1.5px) 25%)}
.bocal-etiquette{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--papier);color:var(--encre);border:1px solid var(--filet);border-radius:4px;padding:1px 7px;font:400 .8rem var(--mono);white-space:nowrap}
.statut-atteint .bocal-couvercle{background:var(--or-fonce)}
.statut-atteint .bocal-etiquette{background:var(--accent);color:#fff;border-color:var(--accent)}
.statut-depassee .bocal-corps{border-color:var(--alerte);border-style:dashed}
.statut-a-completer .bocal-corps{border-style:dashed}
.vide-bocal .bocal-corps{border-style:dashed;background:transparent;display:grid;place-items:center}
.vide-bocal .bocal-couvercle{background:var(--bord-bocal)}
.bocal-plus{font:300 2.4rem/1 var(--texte);color:var(--accent)}

.planche{display:block;height:10px;margin:0 -12px;background:var(--planche);box-shadow:0 4px 0 color-mix(in srgb,var(--planche) 22%,transparent)}
.fiche{display:grid;gap:1px;margin-top:12px;font-size:.92rem;line-height:1.4}
.fiche-type{font:400 .7rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.fiche-nom{font-weight:700;font-size:1.02rem;overflow-wrap:anywhere}
.fiche-montants{font-size:.9rem}
.fiche-date{color:var(--doux);font-size:.86rem}
.fiche-versement{margin-top:4px}
.fiche-versement strong{font-weight:400;font-size:1rem;color:var(--accent-fonce);background:color-mix(in srgb,var(--accent) 11%,#fff);padding:1px 6px;border-radius:4px}
.fiche-mois{display:block;color:var(--doux);font-size:.84rem;margin-top:2px}
.fiche-etat{margin-top:4px;font-weight:700;font-size:.88rem;color:var(--doux)}
.fiche-etat.atteint{color:var(--accent)}
.fiche-etat.depassee{color:var(--alerte)}
.nouvelle .fiche-nom{color:var(--accent)}

/* Listes éditables */
fieldset.lignes{border:0;padding:0;margin:0 0 18px;min-width:0}
legend{font-weight:700;padding:0;margin-bottom:8px}
.liste-lignes{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:8px}
.ligne{display:grid;grid-template-columns:minmax(0,1fr) 132px auto;gap:8px;align-items:end}
.ligne-credits{grid-template-columns:repeat(3,minmax(0,1fr)) auto;grid-template-areas:"nom nom nom retirer" "cap men int int";padding-bottom:10px;border-bottom:1px solid var(--voile)}
.ligne-credits .mini-nom{grid-area:nom}
.ligne-credits .mini-capital{grid-area:cap}
.ligne-credits .mini-mensualite{grid-area:men}
.ligne-credits .mini-interetsRestants{grid-area:int}
.ligne-credits .retirer{grid-area:retirer}
.mini{gap:3px;font-weight:400;min-width:0}
.mini-titre{font-size:.76rem;color:var(--doux)}
.champ-euro{position:relative;display:block;min-width:0}
.champ-euro input{font-family:var(--mono);text-align:right;padding-right:30px}
.champ-euro>span{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--doux);pointer-events:none}
.retirer{font:600 .86rem var(--texte);color:var(--doux);background:none;border:0;min-height:46px;padding:0 6px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.retirer:hover{color:var(--alerte)}
.ajout{font:600 .92rem var(--texte);color:var(--accent);background:transparent;border:1.5px dashed var(--bord-bocal);border-radius:8px;min-height:44px;width:100%;cursor:pointer}
.ajout::before{content:"+ "}
.ajout:hover{background:var(--teinte)}
.effort{margin:6px 0 18px;max-width:420px}
.effort .champ-euro{max-width:200px}

/* Tableau du mois */
.tableau-mois{border-top:2px solid var(--encre);padding-top:12px;margin-top:8px}
.titre-impression{display:none}
table{width:100%;border-collapse:collapse;font-size:.95rem}
th{text-align:left;font-weight:600;padding:7px 0}
td{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;padding:7px 0 7px 12px;white-space:nowrap}
tbody tr{border-bottom:1px solid var(--voile)}
tr.detail th,tr.detail td{font-weight:400;font-size:.86rem;color:var(--doux);padding:3px 0 3px 12px}
tr.detail th{padding-left:16px}
tr.plus td{color:var(--accent-fonce)}
tr.total th,tr.total td{font-size:1.15rem;padding-top:12px;border-top:2px solid var(--encre)}
tr.total th{font-family:var(--titre);font-weight:600}
tr.total.negatif th,tr.total.negatif td{color:var(--alerte)}
.alerte{margin-top:14px;background:color-mix(in srgb,var(--alerte) 8%,#fff);border-left:4px solid var(--alerte);padding:12px 14px;border-radius:0 8px 8px 0;font-weight:600}
.note{margin-top:12px;font-size:.88rem;color:var(--doux)}
.note:empty{display:none}
.note.honnete{background:var(--voile);padding:10px 12px;border-radius:8px;color:var(--encre)}

/* Ordre de remboursement */
.titre-ordre{font-family:var(--texte);font-weight:700;font-size:1rem;letter-spacing:0;margin:4px 0 10px}
.ordre{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.etape{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 12px;background:var(--voile);border-radius:8px}
.rang{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--accent);color:#fff;font-size:.95rem}
.etape-texte{display:grid;gap:3px;min-width:0}
.etape-nom{font-weight:700;overflow-wrap:anywhere}
.etape-detail{font-size:.84rem;color:var(--doux)}
.frise{display:block;height:6px;border-radius:3px;background:color-mix(in srgb,var(--accent) 14%,#fff);overflow:hidden;margin-top:3px}
.frise-plein{display:block;height:100%;width:calc(var(--part,0) * 1%);background:var(--accent2)}
.etape-sortie{display:grid;text-align:right;font-size:.9rem;line-height:1.3}
.etape-sortie strong{font-size:1rem}
.alerte-texte{color:var(--alerte)}
.resume-credit{margin-top:12px;font-weight:600}

/* Ordre et savants */
.choix-ordre{border:0;padding:0;margin:0 0 18px;display:grid;gap:6px;min-width:0}
.radio{display:flex;align-items:center;gap:10px;font-weight:500;min-height:40px;cursor:pointer}
.radio input{width:20px;height:20px;min-height:0;margin:0;padding:0;accent-color:var(--accent);flex:none}
.invitation{margin-top:2px;background:color-mix(in srgb,var(--accent2) 20%,#fff);color:var(--encre);padding:10px 12px;border-radius:8px}
.savants{margin-top:18px;padding:16px;border:1.5px solid color-mix(in srgb,var(--accent) 30%,#fff);border-radius:var(--rayon);display:grid;gap:10px;font-size:.92rem}
.savants h3{font-family:var(--texte);font-weight:700;font-size:1rem;letter-spacing:0;color:var(--accent-fonce)}
.savants blockquote{margin:0;padding:2px 0 2px 12px;border-left:3px solid var(--accent2);display:grid;gap:4px}
.savants blockquote p:first-child{font-family:var(--titre);font-style:italic;font-size:1rem;line-height:1.45}
.savants .source{font-size:.82rem;color:var(--doux)}
.savants a{color:var(--accent-fonce)}

/* Données */
.donnees{display:grid;gap:12px;max-width:760px}

/* Fenêtre */
.fenetre{border:0;border-radius:14px;padding:24px;width:min(560px,calc(100% - 32px));max-height:calc(100dvh - 32px);color:var(--encre);background:#fff;box-shadow:0 20px 60px rgba(20,22,43,.25)}
.fenetre::backdrop{background:rgba(20,22,43,.5)}
.fenetre h2{margin-bottom:16px}
.grille-form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grille-form .large{grid-column:1/-1}
.ajout-versement{margin-top:16px;padding-top:14px;border-top:1px solid var(--filet)}
.rangee-champ{display:flex;gap:8px;align-items:center}
.rangee-champ .champ-euro{flex:1}
.zakat{background:color-mix(in srgb,var(--accent2) 20%,#fff);color:var(--encre);padding:10px 12px;border-radius:8px}
.erreur{margin-top:12px;color:var(--alerte);font-weight:700}

/* Téléphone */
@media (max-width:640px){
  #imprimer{display:none}
  .bilan{grid-template-columns:1fr 1fr}
  .bilan-case:first-child{grid-column:1/-1}
  .etagere{grid-template-columns:repeat(2,minmax(0,1fr))}
  .case{padding:0 8px}
  .planche{margin:0 -8px}
  .bocal{width:84px;height:122px}
  .deux-colonnes>.bloc{padding:16px}
  .ligne{grid-template-columns:minmax(0,1fr) 96px 40px;gap:6px}
  .ligne input{padding-left:10px;padding-right:10px}
  .ligne .champ-euro input{padding-right:26px}
  .champ-euro>span{right:10px}
  .retirer{position:relative;width:40px;padding:0;font-size:0;text-decoration:none}
  .retirer::before,.retirer::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:2px;background:currentColor;border-radius:1px}
  .retirer::before{transform:translate(-50%,-50%) rotate(45deg)}
  .retirer::after{transform:translate(-50%,-50%) rotate(-45deg)}
  .ligne-credits{grid-template-columns:repeat(3,minmax(0,1fr)) 40px}
  .ligne-credits .mini-titre{min-height:2.5em;display:flex;align-items:flex-end;line-height:1.25}
  .grille-form{grid-template-columns:1fr}
  .etape{grid-template-columns:28px minmax(0,1fr);gap:10px}
  .rang{width:28px;height:28px}
  .etape-sortie{grid-column:2;text-align:left;display:flex;gap:8px;flex-wrap:wrap;align-items:baseline}
}

/* Impression : le tableau du mois seul */
@media print{
  body{background:#fff;font-size:11pt}
  main{max-width:none;padding:0}
  .bandeau-exemple,.edition,#mois .bloc-tete{display:none!important}
  .deux-colonnes{display:block}
  .deux-colonnes>.bloc{border:0;padding:0}
  .bloc{margin:0}
  .titre-impression{display:block;font-size:16pt;margin-bottom:10pt}
  .tableau-mois{border-top:0}
  .alerte{border:1px solid var(--alerte)}
}