/* Traceur de fonctions : même vert que le reste du site */
#features.tf-section { padding-top: 1em; }
.tf-outil { max-width: 78em; margin: 0 auto; text-align: left; }
.tf-outil [hidden] { display: none !important; }
.tf-outil *:focus-visible { outline: 3px solid #f2b01e; outline-offset: 2px; }
.tf-outil:fullscreen { background: #fff; padding: 1em 1.5em; overflow: auto; max-width: none; }
.tf-outil:-webkit-full-screen { background: #fff; padding: 1em 1.5em; overflow: auto; max-width: none; }
.tf-haut { display: grid; grid-template-columns: minmax(17em, 21em) minmax(0, 1fr); gap: 1.2em; align-items: start; }
@media screen and (max-width: 900px) { .tf-haut { grid-template-columns: minmax(0, 1fr); } .tf-graphe-zone { order: -1; } }
.tf-panneau { display: grid; gap: 1em; }
.tf-boite { background: #fff; border: 2px solid #e5e5e5; border-radius: 1.2em; padding: .9em 1.1em 1em; }
.tf-boite h3 { margin: 0 0 .7em; font-size: .95em; color: #16855a; text-align: center; letter-spacing: .05em; }

/* Liste des fonctions */
.tf-fn { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: .4em; align-items: center; margin-bottom: .6em; padding: .35em .4em; border-radius: .8em; background: #fafafa; border-left: 5px solid var(--c); }
.tf-fn.cachee { opacity: .5; }
.tf-oeil, .tf-suppr { width: 1.9em; height: 1.9em; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--c); background: #fff; }
.tf-oeil .icon:before, .tf-suppr .icon:before { margin: 0; }
.tf-suppr { color: #bbb; } .tf-suppr:hover { color: #c0392b; }
.tf-nom { margin: 0; font: 700 1.05em/1 'Fredoka', 'Nunito', sans-serif; color: var(--c); white-space: nowrap; }
.tf-in { font: 600 1.05em/1.2 'Nunito', sans-serif !important; width: 100% !important; min-width: 0; padding: .4em .5em !important; border: 2px solid #e5e5e5 !important; border-radius: .5em !important; background: #fff !important; color: #333 !important; box-shadow: none !important; height: auto !important; }
.tf-in:focus { outline: none; border-color: var(--c) !important; }
.tf-in.erreur, .tf-fenetre input.erreur { border-color: #e0524d !important; background: #fff6f5 !important; }
.tf-err { grid-column: 1 / -1; font-size: .8em; color: #c0392b; line-height: 1.3; }
.tf-err:empty { display: none; }
.tf-lien { display: inline-flex; align-items: center; gap: .4em; color: #16855a; font-weight: 700; cursor: pointer; font-size: .92em; padding: .2em 0; }
.tf-aide { margin-top: .6em; font-size: .85em; color: #777; }
.tf-aide summary { cursor: pointer; color: #16855a; font-weight: 600; }
.tf-aide ul { margin: .5em 0 0 1.2em; padding: 0; line-height: 1.8; }
.tf-aide li { list-style: disc; }
.tf-aide code { background: #eaf7f1; color: #16855a; padding: .05em .35em; border-radius: .3em; font-size: 1em; }

/* Fenêtre */
.tf-fenetre { display: grid; grid-template-columns: 1fr 1fr; gap: .5em .8em; }
.tf-fenetre label { margin: 0; font-size: .8em; color: #888; }
.tf-fenetre label span { display: block; margin-bottom: .15em; }
.tf-fenetre input, .tf-x input { font: inherit; font-size: 1.1em; width: 100%; padding: .35em .5em; border: 2px solid #e5e5e5; border-radius: .5em; background: #fff; color: #333; box-sizing: border-box; height: auto; }
.tf-fenetre input:focus, .tf-x input:focus { outline: none; border-color: #16855a; }
.tf-boutons { display: flex; gap: .4em; justify-content: center; margin: .8em 0 .5em; }
.tf-bt { width: 2.5em; height: 2.5em; border-radius: .7em; border: 2px solid #e5e5e5; display: flex; align-items: center; justify-content: center; color: #16855a; cursor: pointer; background: #fff; }
.tf-bt:hover { border-color: #5cc79a; } .tf-bt .icon:before { margin: 0; }
.tf-case { display: flex; align-items: center; gap: .5em; margin: .35em 0 0; font-size: .85em; color: #666; cursor: pointer; }
.tf-case input { position: static !important; opacity: 1 !important; width: 1.1em; height: 1.1em; margin: 0; accent-color: #16855a; -webkit-appearance: checkbox; appearance: auto; }

/* Graphique */
.tf-graphe { position: relative; background: #fff; border: 2px solid #e5e5e5; border-radius: 1.2em; overflow: hidden; }
.tf-graphe canvas { display: block; width: 100%; touch-action: none; cursor: crosshair; }
.tf-graphe canvas.glisse { cursor: grabbing; }
.tf-bulle { position: absolute; padding: .3em .7em; border-radius: .6em; background: #fff; border: 2px solid #16855a; box-shadow: 0 3px 10px rgba(0, 0, 0, .12); font: 600 .95em/1.3 'Nunito', sans-serif; color: #333; white-space: nowrap; pointer-events: none; }
.tf-astuce { margin: .6em 0 0; text-align: center; font-size: .8em; color: #999; }
.tf-astuce .icon { color: #5cc79a; margin-right: .3em; }
.tf-actions { display: flex; flex-wrap: wrap; gap: .5em; justify-content: center; margin-top: .7em; }
.tf-act { display: inline-flex; align-items: center; gap: .55em; padding: .45em .9em; border: 2px solid #e5e5e5; border-radius: .8em; background: #fff; color: #555; cursor: pointer; font-size: .9em; -webkit-user-select: none; user-select: none; }
.tf-act:hover { border-color: #5cc79a; }
.tf-act .icon { width: 1.8em; height: 1.8em; border-radius: 50%; background: #eaf7f1; color: #16855a; display: flex; align-items: center; justify-content: center; }
.tf-act .icon:before { margin: 0; }

/* Images et tableau */
.tf-bas { display: grid; grid-template-columns: minmax(15em, 21em) minmax(0, 1fr); gap: 1.2em; margin-top: 1.2em; align-items: start; }
@media screen and (max-width: 900px) { .tf-bas { grid-template-columns: minmax(0, 1fr); } }
.tf-ligne { display: flex; flex-wrap: wrap; gap: .6em 1em; align-items: center; justify-content: center; margin-bottom: .8em; }
.tf-x { display: inline-flex; align-items: center; gap: .4em; margin: 0; font-weight: 700; color: #555; }
.tf-x input { width: 5.5em; }
.tf-img { padding: .45em .7em; margin-bottom: .4em; border-radius: .6em; background: #fafafa; border-left: 5px solid var(--c); font-size: 1.05em; color: #333; }
.tf-img b { color: var(--c); }
.tf-nd { color: #c0392b; font-style: italic; font-size: .9em; }
.tf-vide { text-align: center; color: #999; font-size: .9em; margin: .3em 0; }
.tf-defile { overflow-x: auto; }
.tf-table { width: auto; margin: 0 auto; border-collapse: collapse; font: 600 1em/1.4 'Nunito', sans-serif; }
.tf-table th, .tf-table td { border: 1px solid #e3e3e3; padding: .35em .7em; text-align: center; white-space: nowrap; background: none; }
.tf-table tr:first-child { background: #f3f8f5 !important; }
.tf-table tr:first-child th, .tf-table tr:first-child td { color: #16855a; }
.tf-table tr + tr th { color: var(--c); }
.tf-table tbody tr { background: none; }
.tf-rgpd { margin: 1.2em 0 0; text-align: center; font-size: .8em; color: #999; }

/* Arrière-plan, animation, export */
.tf-fond { margin-top: .7em; font-size: .85em; color: #666; }
.tf-fond > span { display: block; margin-bottom: .3em; }
.tf-seg { display: flex; border: 2px solid #e5e5e5; border-radius: .7em; overflow: hidden; }
.tf-seg-b { flex: 1; text-align: center; padding: .4em .5em; cursor: pointer; color: #666; background: #fff; -webkit-user-select: none; user-select: none; }
.tf-seg-b + .tf-seg-b { border-left: 2px solid #e5e5e5; }
.tf-seg-b.actif { background: #16855a; color: #fff; }
.tf-seg-b .icon { margin-right: .25em; }
.tf-act-p { border-color: #16855a; } .tf-act-p .icon { background: #16855a; color: #fff; }
.tf-act.actif { border-color: #16855a; }
.tf-vit { display: inline-flex; align-items: center; gap: .3em; margin: 0; padding: .25em .6em; border: 2px solid #e5e5e5; border-radius: .8em; color: #5cc79a; }
.tf-vit select { font: inherit; font-size: .9em; padding: .25em .4em; border: 0; background: #fff; color: #555; height: auto; width: auto; }
.tf-export { margin-top: .9em; padding: .9em 1.1em; border: 2px solid #16855a; border-radius: 1.1em; background: #f6fcf9; }
.tf-export h3 { margin: 0 0 .6em; font-size: .95em; color: #16855a; text-align: center; letter-spacing: .05em; }
.tf-export-opts { display: flex; flex-wrap: wrap; gap: .7em 1.2em; justify-content: center; align-items: flex-end; }
.tf-export-opts > label { margin: 0; font-size: .85em; color: #777; }
.tf-export-opts > label > span { display: block; margin-bottom: .2em; }
.tf-export-opts select { font: inherit; padding: .35em .5em; border: 2px solid #e5e5e5; border-radius: .5em; background: #fff; color: #444; height: auto; }
.tf-export-bts { display: flex; flex-wrap: wrap; gap: .5em; justify-content: center; margin-top: .8em; }