/* Outil « tableau des tâches à imprimer », /quelles-taches-menageres-pour-quel-age/ */

.taches-outil {
  background: var(--ivory); border: 1px solid var(--border); border-radius: var(--r-md);
  border-left: 5px solid var(--sage); box-shadow: var(--shadow-sm); padding: 22px; margin: 18px 0 34px;
}
.taches-reglages { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; margin-bottom: 18px; }
.taches-reglages label { display: block; font-weight: 800; color: var(--dark); font-size: .92rem; margin-bottom: 5px; }
.taches-reglages input[type=text], .taches-reglages select, .taches-ajout input {
  width: 100%; font: inherit; font-size: 1rem; padding: 9px 12px; border: 1px solid #B9CBD5;
  border-radius: var(--r-sm); background: #fff; color: var(--dark);
}
.taches-options { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.taches-options label { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; margin: 0; }
.taches-options input { width: 18px; height: 18px; accent-color: var(--primary-dark); }

.taches-bande { border: 0; padding: 0; margin: 0 0 14px; }
.taches-bande legend { font-weight: 800; color: var(--primary-dark); font-size: .95rem; padding: 0; margin-bottom: 6px; }
.taches-ligne {
  display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--r-sm);
  border: 1px solid transparent;
}
.taches-ligne.on { background: var(--sage-pale); border-color: rgba(124,171,138,.35); }
.taches-coche { display: flex; align-items: center; gap: 10px; flex: 1; cursor: pointer; margin: 0; min-width: 0; }
.taches-coche input { width: 20px; height: 20px; flex: none; accent-color: var(--primary-dark); }
.taches-mini { width: 56px; flex: none; }
.taches-mini svg { width: 56px; height: 42px; display: block; }
.taches-txt { color: var(--dark); font-weight: 600; line-height: 1.3; }
.taches-txt small { display: block; font-weight: 400; color: var(--text-light); font-size: .84rem; margin-top: 2px; }
.taches-ligne select { flex: none; width: 190px; font: inherit; font-size: .88rem; padding: 6px 8px; border: 1px solid #B9CBD5; border-radius: var(--r-sm); background: #fff; color: var(--dark); }
.taches-ligne select:disabled { opacity: .45; }
.taches-coche input:disabled + .taches-mini { opacity: .45; }

.taches-ajout { display: flex; gap: 8px; margin: 4px 0 16px; }
.taches-ajout input { flex: 1; }
.taches-ajout button, .taches-imprimer {
  font: inherit; font-weight: 800; border-radius: var(--r-full); cursor: pointer; border: 2px solid var(--primary-dark);
}
.taches-ajout button { background: transparent; color: var(--primary-dark); padding: 8px 18px; }
.taches-ajout button:hover { background: var(--primary-pale); }
.taches-pied { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.taches-imprimer { display: inline-flex; align-items: center; gap: 9px; background: var(--primary-dark); color: #fff; padding: 11px 22px; font-size: 1rem; }
.taches-imprimer svg { width: 18px; height: 18px; }
.taches-imprimer:hover { background: var(--primary); border-color: var(--primary); }
.taches-imprimer:disabled { opacity: .5; cursor: default; }
.taches-compte { font-weight: 700; color: var(--text); margin: 0; }
.taches-compte.trop { color: #A8552E; }
.taches-conseil { font-size: .92rem; background: var(--terra-pale); border-radius: var(--r-sm); padding: 10px 14px; margin: 0 0 14px; }
.taches-astuce { font-size: .88rem; color: var(--text-light); margin: 12px 0 0; }

/* Aperçu : la feuille réduite, à la largeur de la colonne */
.taches-apercu-titre { font-weight: 800; color: var(--dark); margin: 22px 0 8px; }
.taches-apercu { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.taches-apercu .tf-page {
  width: 210mm; height: 297mm; transform-origin: top left; zoom: .4;
  box-shadow: var(--shadow-md); border: 1px solid #D5DEE4;
}
@supports not (zoom: 1) { .taches-apercu .tf-page { transform: scale(.4); margin: 0 -60% -150% 0; } }

/* ------------------------------------------------------------ la feuille */
.tf-page {
  box-sizing: border-box; width: 210mm; height: 297mm; padding: 12mm 12mm 10mm; background: #fff;
  font-family: 'Nunito', sans-serif; color: #2D3F4E; display: flex; flex-direction: column; overflow: hidden;
  --tf-h: 40mm;
}
.tf-titre { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 25pt; text-align: center; color: #1B4460; margin-bottom: 7mm; line-height: 1.15; }
.tf-groupe { display: grid; grid-template-columns: 33mm 1fr; gap: 3mm; margin-bottom: 3.5mm; }
.tf-moment {
  background: var(--tf-fond); border-radius: 4mm; display: flex; align-items: center; justify-content: center;
  text-align: center; font-weight: 800; font-size: 13pt; padding: 2mm; line-height: 1.15;
}
.tf-cartes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3mm; }
.tf-carte { border: .5mm solid #2D3F4E; border-radius: 3mm; padding: 1.5mm 1.5mm 2mm; display: flex; flex-direction: column; align-items: center; height: var(--tf-h); }
.tf-carte .tf-pic { flex: 1; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; }
.tf-carte .tf-pic svg { width: 100%; height: 100%; }
.tf-leg { text-align: center; font-weight: 700; font-size: 10.5pt; line-height: 1.15; }
.tf-serre { --tf-h: 33mm; }
.tf-serre .tf-titre { font-size: 21pt; margin-bottom: 4mm; }
.tf-serre .tf-groupe { margin-bottom: 2.5mm; }
.tf-tres-serre { --tf-h: 27mm; }
.tf-tres-serre .tf-leg { font-size: 9pt; }
.tf-grand .tf-leg { font-size: 12.5pt; }
.tf-cursive .tf-grand .tf-leg { font-size: 11pt; }
.tf-pied { margin-top: auto; text-align: right; font-size: 8pt; color: #8A9BA8; }
.tf-vide { text-align: center; color: #8A9BA8; font-size: 14pt; margin-top: 30mm; }

.tf-titre-p { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 18pt; color: #1B4460; }
.tf-aide { font-size: 10pt; margin: 1mm 0 5mm; color: #3E5260; }
.tf-grille { display: grid; grid-template-columns: repeat(3, 60mm); grid-auto-rows: 58mm; gap: 0; justify-content: center; }
.tf-c { border: .3mm dashed #8A9BA8; display: flex; flex-direction: column; align-items: center; padding: 4mm 3mm; }
.tf-c .tf-pic { flex: 1; min-height: 0; width: 100%; }
.tf-c .tf-pic svg { width: 100%; height: 100%; }
.tf-c .tf-leg { font-size: 11pt; }

.tf-cursive .tf-leg { font-family: 'Playwrite FR', cursive; font-weight: 400; font-size: 9.5pt; line-height: 1.6; }
.tf-cursive .tf-c .tf-leg { font-size: 10pt; }
.tf-cursive .tf-tres-serre .tf-leg { font-size: 8pt; }

#taches-impression { display: none; }

@media (max-width: 640px) {
  .taches-outil { padding: 16px 14px; }
  .taches-reglages { grid-template-columns: 1fr; }
  .taches-ligne { flex-wrap: wrap; }
  .taches-ligne select { width: 100%; margin-left: 30px; }
  .taches-mini, .taches-mini svg { width: 44px; height: 33px; }
  .taches-apercu .tf-page { zoom: .36; }
}

@media print {
  @page { size: A4; margin: 0; }
  body.taches-imprime > *:not(#taches-impression) { display: none !important; }
  body.taches-imprime { background: #fff !important; margin: 0; }
  body.taches-imprime #taches-impression { display: block; }
  #taches-impression .tf-page { break-after: page; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #taches-impression .tf-page:last-child { break-after: auto; }
}