/* Freebie « La Formule Tout-en-Un » : composants propres */

.te-h1 { margin-top: 26px; }

/* Qui fait quoi : deux colonnes */
.te-cols { display: grid; gap: 12px; }
@media (min-width: 640px) { .te-cols { grid-template-columns: 1fr 1fr; align-items: start; } }
.te-col { border-radius: var(--radius-tile); padding: 20px; }
.te-col--toi { border: 1.5px dashed var(--line); }
.te-col--nous { border: 1.5px solid var(--green); background: rgba(75, 109, 20, .1); }
.te-col-title {
  display: flex; align-items: center; gap: 9px; margin: 0 0 12px;
  font: 700 11px/1.4 var(--font-text); letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted);
}
.te-col--nous .te-col-title { color: var(--accent); }
.te-col-list { display: flex; flex-wrap: wrap; gap: 8px; }
.te-col-list:empty::after { content: "Rien pour l'instant."; font-size: 14px; color: var(--muted); }
.te-task {
  display: inline-flex; align-items: center; gap: 8px; text-align: left;
  min-height: 44px; padding: 10px 16px; border-radius: var(--radius-pill);
  border: 1.5px solid var(--chip-line); background: transparent;
  font-weight: 700; font-size: 15px; color: var(--fg);
  transition: transform .15s var(--ease), opacity .17s;
}
button.te-task:active { transform: scale(.96); }
.te-task.is-nous { background: var(--green); border-color: var(--green); color: #fff; }
.te-task--fixe { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.te-task-ico svg { width: 14px; height: 14px; }
.te-task.is-leaving { transform: scale(.85); opacity: 0; }
.te-task.is-arriving { animation: te-pop .4s var(--ease); }
@keyframes te-pop { 0% { transform: scale(.7); opacity: 0; } 70% { transform: scale(1.05); opacity: 1; } 100% { transform: none; } }

/* Paiement */
.te-pay-tile { margin-top: 18px; }
.te-pay-k { margin-bottom: 4px; }
.te-pay-big { margin: 0 0 18px; font: 400 48px/1.05 var(--font-title); color: var(--green-l); }
.te-pay-bars { display: flex; gap: 8px; align-items: flex-end; height: 150px; }
.te-bar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; text-align: center; }
.te-bar-fill {
  display: block; height: var(--h); min-height: 18px; border-radius: 12px 12px 4px 4px; background: var(--green);
  transform-origin: bottom; animation: te-grow .6s var(--ease) both; animation-delay: var(--d);
}
.te-bar b { display: block; margin-top: 8px; font-size: 13px; white-space: nowrap; }
.te-bar small { display: block; color: var(--muted-dark); font-size: 12px; white-space: nowrap; }
@keyframes te-grow { from { transform: scaleY(0); } to { transform: none; } }
.te-pay-note { margin: 18px 0 0; }

/* Fin */
.te-renew { margin: 18px 0 0; }
.te-cta-price { margin: 12px 0; font-size: 28px; }
.te-cta-desc { color: rgba(255, 255, 255, .85); margin: 0; }
.te-restart { margin-top: 30px; }

.te-all { margin-top: 22px; }
.te-all[hidden] { display: none; }

/* Qui fait quoi : deux blocs séparés */
.te-score { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 24px; }
.te-score-item { border-radius: var(--radius-tile); padding: 18px 20px; border: 1.5px solid var(--line); }
.te-score-item b { display: block; font: 400 48px/1 var(--font-title); }
.te-score-item span { display: block; margin-top: 4px; font-weight: 700; color: var(--muted); }
.te-score-item--nous { background: var(--green); border-color: var(--green); color: #fff; }
.te-score-item--nous span { color: rgba(255, 255, 255, .85); }
.te-box { margin-top: 12px; }
.te-box--nous { border: 1.5px solid var(--green); }
.te-toi { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.te-toi li { display: flex; align-items: center; gap: 12px; font-weight: 700; }
.te-toi li span { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--dark); color: var(--beige); font: 400 15px var(--font-title); }