/* === base & formulaires (inchangé + quelques ajouts) === */
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;max-width:900px;margin:30px auto;padding:0 20px;background:#e6ecf0;color:#222;transition:background-color .4s ease,color .4s ease}
h1,h2{text-align:center;color:#007acc;margin-bottom:20px}
h2{white-space:nowrap} @media (max-width:640px){h2{white-space:normal}}
.input-section,.target-section,.buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:15px 30px;margin-bottom:20px;padding:20px;border-radius:16px;background:rgba(255,255,255,.5);box-shadow:0 4px 16px rgba(0,0,0,.1);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.3)}
.input-section.form-grid{display:grid;gap:14px}
.form-row{display:grid;grid-auto-flow:column;align-items:center;justify-content:start;gap:12px 14px;grid-auto-columns:max-content;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.55);border:1px solid rgba(0,0,0,.05)}
.row-title{font-weight:700;color:#005f99;margin-right:8px;padding:4px 10px;border-radius:999px;background:rgba(0,122,204,.10)}
label{min-width:160px;align-self:center;font-weight:500;color:inherit}
.form-row label{min-width:auto;margin:0 2px 0 0}
input[type=time],input[type=number],input[type=date],select{padding:10px 12px;font-size:16px;width:150px;border:1px solid #ccc;border-radius:8px;box-sizing:border-box;background:rgba(255,255,255,.7);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);color:#222;transition:background .3s,box-shadow .2s ease}
input:focus,select:focus{outline:none;border-color:#007acc;background:rgba(255,255,255,.9);box-shadow:0 0 0 4px rgba(0,122,204,.15)}
.input-invalid{border-color:#e53935!important;animation:shake 320ms ease}
@keyframes shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-6px)}40%,60%{transform:translateX(6px)}}

/* buttons */
.buttons{gap:15px;flex-wrap:wrap}
button{padding:10px 18px;font-size:16px;border:none;border-radius:8px;background-color:#007acc;color:#fff;cursor:pointer;transition:background-color .25s ease,transform .08s ease;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);position:relative;overflow:hidden}
button:hover{background-color:#005f99;transform:translateY(-1px)}
button:active{transform:translateY(1px) scale(.98)}
button::after{content:"";position:absolute;inset:0;opacity:0;transform:scale(.5);background:radial-gradient(circle at var(--x,50%) var(--y,50%),rgba(255,255,255,.6),transparent 40%);transition:opacity 450ms ease,transform 450ms ease}
button.rippling::after{opacity:1;transform:scale(1)}
button.ghost{background:transparent;border:1px dashed rgba(0,0,0,.25);color:#005f99}
button.ghost:hover{background:rgba(0,122,204,.08)}

/* result */
.result{background:rgba(255,255,255,.5);border:1px solid #ccc;padding:18px;margin-bottom:30px;white-space:pre-wrap;font-family:monospace;min-height:80px;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.08);backdrop-filter:blur(10px);opacity:0;transform:translateY(6px);transition:opacity .25s ease,transform .25s ease}
.result.show{opacity:1;transform:translateY(0)}

/* filters */
.filters{margin:10px 0 16px;display:flex;justify-content:center}
.filter-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.filters input,.filters select{width:auto}

/* table */
table{border-collapse:collapse;width:100%;background:rgba(255,255,255,.6);box-shadow:0 4px 16px rgba(0,0,0,.1);border-radius:12px;overflow:hidden;backdrop-filter:blur(10px);color:#222}
th,td{border:1px solid rgba(0,0,0,.05);padding:10px;text-align:center}
th{background-color:#007acc;color:#fff;font-weight:600}
tfoot th{background-color:#f0f0f0;color:#333}
tfoot tr#targetRow th{background-color:#d0e8ff;color:#005f99;font-weight:700;text-align:left;padding-left:10px}
tr.row-enter{animation:rowIn 380ms ease forwards}
@keyframes rowIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* badges */
.badge{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border-radius:999px;font-size:12px;background:rgba(0,0,0,.06)}
.badge.gold{background:linear-gradient(90deg,#ffecb3,#ffe082)} .badge.gold::before{content:"🏆"}
.badge.blue{background:linear-gradient(90deg,#e3f2fd,#bbdefb)} .badge.blue::before{content:"💤"}

/* actions column */
.actions{display:flex;justify-content:center;gap:6px}
.actions button{padding:6px 10px;font-size:14px}

/* toast (déjà dans ton projet, conservé) */
#toastContainer{position:fixed;top:20px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;z-index:9999;pointer-events:none;width:min(92vw,560px)}
.toast{pointer-events:auto;width:100%;padding:12px 14px;border-radius:12px;color:#111;background:#fff;border:1px solid rgba(0,0,0,.08);box-shadow:0 10px 28px rgba(0,0,0,.18);display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:10px;opacity:0;transform:translateY(-8px) scale(.98);animation:toastIn 240ms ease forwards;cursor:pointer;position:relative}
.toast .toast-close{background:transparent;border:none;font-size:18px;cursor:pointer;opacity:.6}
.toast .toast-close:hover{opacity:1}
.toast.success{border-left:5px solid #2e7d32}.toast.error{border-left:5px solid #e53935}.toast.warn{border-left:5px solid #f9a825}.toast.info{border-left:5px solid #1976d2}
@keyframes toastIn{to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes toastOut{to{opacity:0;transform:translateY(-8px) scale(.98)}} .toast.hide{animation:toastOut 180ms ease forwards}
.toast-life{position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,#007acc,#00bcd4);transform-origin:left;animation:life var(--life,3500ms) linear forwards}
@keyframes life{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.toast:hover .toast-life,.toast:focus-within .toast-life{animation-play-state:paused}

/* progress */
.progress-wrap{margin-top:10px;height:12px;border-radius:999px;background:rgba(0,0,0,.08);overflow:hidden;position:relative}
.progress-bar{height:100%;width:0%;background:linear-gradient(90deg,#4caf50,#81c784);transition:width 420ms ease}
.progress-wrap.over .progress-bar{background:linear-gradient(90deg,#007acc,#00bcd4)}

/* collapsible café */
.form-row.collapsible{padding:0}
.form-row.collapsible summary{list-style:none;display:grid;grid-auto-flow:column;align-items:center;justify-content:start;gap:12px 14px;grid-auto-columns:max-content;padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.55);border:1px solid rgba(0,0,0,.05);cursor:pointer;user-select:none}
.form-row.collapsible summary::-webkit-details-marker{display:none}
.form-row.collapsible .caret{margin-left:auto;transition:transform .2s ease;font-size:18px;line-height:1;opacity:.75}
.form-row.collapsible[open] .caret{transform:rotate(180deg)}
.form-row.collapsible .collapsible-content{overflow:hidden;max-height:0;transition:max-height 280ms ease;padding:0 12px}
.form-row.collapsible[open] .collapsible-content{max-height:220px;padding-bottom:10px}

/* dark */
body.dark-theme{background:#0d1117;color:#e6edf3}
body.dark-theme h1,body.dark-theme h2{color:#88c0d0}
body.dark-theme .input-section,body.dark-theme .target-section,body.dark-theme .buttons,body.dark-theme .result,body.dark-theme table{background:rgba(30,30,30,.6);color:#e6edf3;border:1px solid rgba(255,255,255,.1);box-shadow:0 4px 16px rgba(0,0,0,.4)}
body.dark-theme input,body.dark-theme select{background-color:rgba(60,60,60,.7);color:#e6edf3;border:1px solid #555}
body.dark-theme label{color:#ccc}
body.dark-theme button{background-color:#3b4252;color:#eee}
body.dark-theme button:hover{background-color:#5e81ac}
body.dark-theme th{background-color:#4c566a;color:#eceff4}
body.dark-theme tfoot th{background-color:#2e3440;color:#d8dee9}
body.dark-theme .form-row,body.dark-theme .form-row.collapsible summary{background:rgba(30,30,30,.55);border-color:rgba(255,255,255,.10)}

/* responsive */
@media (max-width:900px){.input-section,.target-section{padding:16px}.buttons{gap:12px}}
@media (max-width:700px){
  .form-row{grid-auto-flow:row;grid-template-columns:1fr 1fr}
  .row-title{grid-column:1/-1;margin-bottom:6px}
  .form-row input,.form-row select{width:100%!important}
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  thead,tbody,tfoot{display:table;width:100%}
  th,td{white-space:nowrap}
}
@media (max-width:560px){
  .buttons{flex-direction:column;align-items:stretch}
  .buttons button{width:100%}
  label{min-width:auto}
  input[type=time],input[type=number],input[type=date],select{font-size:15px}
  .row-title{padding:3px 8px;font-size:.92rem}
}
@media (max-width:420px){body{margin:20px auto;padding:0 14px}.input-section,.target-section,.buttons{padding:14px}th,td{padding:8px}}

/* dialog (édition) */
dialog{border:none;border-radius:12px;padding:16px 18px;box-shadow:0 10px 30px rgba(0,0,0,.28);max-width:520px;width:92%}
dialog::backdrop{background:rgba(0,0,0,.4)}
.edit-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;margin:12px 0}
.edit-grid label{display:flex;flex-direction:column;gap:6px;font-weight:600}
.edit-grid input{width:100%}
.dialog-actions{display:flex;justify-content:flex-end;gap:10px}


/* --- Mise en page impression --- */
@media print {
  body { background: #fff; color: #000; max-width: 100%; margin: 0; padding: 0 20px; }
  #toggleThemeBtn, .buttons, .filters, #toastContainer { display: none !important; }
  h1 { margin: 16px 0 8px; }
  .input-section, .target-section, .result { display: none !important; }
  table { box-shadow: none; background: #fff; }
  th { background: #000; color: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .badge { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  @page { size: A4; margin: 12mm; }
}

/* optionnel : spécificités quand on est en "print-mode" à l'écran */
.print-mode .buttons, .print-mode .filters, .print-mode #toastContainer { display: none !important; }
.print-mode .input-section, .print-mode .target-section, .print-mode .result { display: none !important; }