/* Tableau blanc : même vert que le reste du site */
#features.tb-section { padding-top: .6em; }
.tb-outil { max-width: 100%; margin: 0 auto; text-align: left; position: relative; }
.tb-outil [hidden] { display: none !important; }
.tb-outil *:focus-visible { outline: 3px solid #f2b01e; outline-offset: 2px; }

/* Barres d'outils */
.tb-barre, .tb-barre2 { display: flex; flex-wrap: wrap; gap: .45em .9em; justify-content: center; align-items: center; padding: .5em .6em; background: #fff; border: 2px solid #e5e5e5; border-radius: 1em; }
.tb-barre2 { margin-top: .45em; border-style: dashed; }
.tb-groupe { display: flex; flex-wrap: wrap; gap: .3em; align-items: center; }
.tb-bt { width: 2.6em; height: 2.6em; border-radius: .7em; display: flex; align-items: center; justify-content: center; color: #555; background: #f5f7f6; cursor: pointer; font-size: 1em; -webkit-user-select: none; user-select: none; touch-action: manipulation; transition: background .15s, color .15s; }
.tb-bt:hover { background: #e3f3eb; color: #16855a; }
.tb-bt.actif { background: #16855a; color: #fff; }
.tb-bt.off { opacity: .35; pointer-events: none; }
.tb-bt .icon:before { margin: 0; }
.tb-ic-svg { width: 1.3em; height: 1.3em; }
.tb-num { min-width: 3.4em; text-align: center; font-weight: 700; color: #555; font-size: .95em; }
.tb-coul { width: 2em; height: 2em; border-radius: 50%; background: var(--c); border: 3px solid #fff; box-shadow: 0 0 0 2px #ccc; cursor: pointer; touch-action: manipulation; }
.tb-coul.actif { box-shadow: 0 0 0 3px #16855a; transform: scale(1.1); }
.tb-ep { width: 2.3em; height: 2.3em; border-radius: .6em; background: #f5f7f6; display: flex; align-items: center; justify-content: center; cursor: pointer; touch-action: manipulation; }
.tb-ep span { display: block; border-radius: 50%; background: #444; }
.tb-ep.actif { background: #16855a; } .tb-ep.actif span { background: #fff; }
.tb-puce { padding: .45em .9em; border-radius: 2em; border: 2px solid #e5e5e5; background: #fff; color: #555; cursor: pointer; font-size: .9em; white-space: nowrap; touch-action: manipulation; }
.tb-puce:hover { border-color: #5cc79a; }
.tb-puce.actif { background: #16855a; border-color: #16855a; color: #fff; }
.tb-puce .icon { margin-right: .3em; color: #16855a; }
.tb-danger .icon { color: #c0392b; }

/* Le tableau */
.tb-zone { margin-top: .6em; display: flex; justify-content: center; align-items: center; }
.tb-zone.depot .tb-page { box-shadow: 0 0 0 4px #5cc79a; }
.tb-page { position: relative; background: #fff; border-radius: .6em; box-shadow: 0 2px 14px rgba(0, 0, 0, .12); overflow: hidden; touch-action: none; -webkit-user-select: none; user-select: none; }
.tb-toile { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.tb-page[data-mode=main] .tb-toile { cursor: default; }
.tb-page[data-mode=vue] .tb-toile { cursor: grab; }
.tb-page[data-mode=texte] .tb-toile { cursor: text; }
.tb-page[data-mode=gomme] .tb-toile { cursor: cell; }
.tb-video-fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.tb-instruments { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.tb-instr { pointer-events: auto; cursor: move; touch-action: none; }
.tb-corps { fill: rgba(225, 240, 250, .55); stroke: #6d8fb0; stroke-width: 2; }
.tb-trou { fill: rgba(255, 255, 255, .55); stroke: #6d8fb0; stroke-width: 1.5; }
.tb-grad line { stroke: #2c3e50; stroke-width: 1.4; }
.tb-grad text, .tb-unite { font: 700 15px Nunito, sans-serif; fill: #2c3e50; }
.tb-grad text.tb-int { font-size: 11px; fill: #c0392b; }
.tb-base { stroke: #c0392b; stroke-width: 2; fill: none; }
.tb-centre { fill: #c0392b; }
.tb-droit { fill: none; stroke: #2c3e50; stroke-width: 1.5; }
.tb-tourne { cursor: grab; }
.tb-tourne circle { fill: #16855a; stroke: #fff; stroke-width: 3; }
.tb-tourne path { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.tb-angle { font: 700 16px Nunito, sans-serif; fill: #16855a; pointer-events: none; }
.tb-compas .tb-jambe { stroke: #5b6b7a; stroke-width: 9; stroke-linecap: round; pointer-events: none; }
.tb-compas .tb-rayon { stroke: #16855a; stroke-width: 1.5; stroke-dasharray: 6 5; pointer-events: none; }
.tb-pointe { fill: #2c3e50; stroke: #fff; stroke-width: 3; cursor: move; }
.tb-mine { fill: #ef8a17; stroke: #fff; stroke-width: 3; cursor: crosshair; }
.tb-aide-c { font: 700 14px Nunito, sans-serif; fill: #16855a; pointer-events: none; }
.tb-saisie { position: absolute; min-width: 8em; padding: 0 .1em; margin: 0; border: 2px dashed #16855a !important; background: rgba(255, 255, 255, .7) !important; font-family: Nunito, sans-serif !important; font-weight: 600; line-height: 1.25; resize: none; overflow: hidden; box-shadow: none !important; z-index: 3; height: auto; }
.tb-sel { position: absolute; border: 2px dashed #16855a; border-radius: 6px; pointer-events: none; z-index: 2; }
.tb-sel-suppr { position: absolute; top: -16px; right: -16px; width: 32px; height: 32px; border-radius: 50%; background: #c0392b; color: #fff; display: flex; align-items: center; justify-content: center; pointer-events: auto; cursor: pointer; font-size: 14px; }
.tb-sel-suppr .icon:before { margin: 0; }
.tb-sel-poignee { position: absolute; right: -12px; bottom: -12px; width: 24px; height: 24px; border-radius: 50%; background: #16855a; border: 3px solid #fff; pointer-events: auto; cursor: nwse-resize; touch-action: none; }

/* Appareil photo */
.tb-camera { position: fixed; right: 1em; bottom: 1em; width: min(30em, 92vw); background: #fff; border: 2px solid #16855a; border-radius: 1em; box-shadow: 0 8px 30px rgba(0, 0, 0, .25); padding: .6em; z-index: 50; }
.tb-camera.reduit { width: min(17em, 60vw); }
.tb-camera.reduit video { display: none; }
.tb-camera-tete { display: flex; align-items: center; gap: .4em; font-weight: 700; color: #16855a; margin-bottom: .4em; }
.tb-x { margin-left: auto; width: 2em; height: 2em; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #888; background: #f3f3f3; }
.tb-x .icon:before { margin: 0; }
.tb-camera video { width: 100%; border-radius: .6em; background: #111; display: block; max-height: 50vh; }
.tb-camera-msg { margin: .3em 0; font-size: .85em; color: #777; text-align: center; }
.tb-camera-msg:empty { display: none; }
.tb-camera-bts { display: flex; flex-wrap: wrap; gap: .4em; justify-content: center; margin-top: .5em; }
.tb-bt2 { padding: .45em .8em; border-radius: .7em; border: 2px solid #e5e5e5; background: #fff; color: #444; cursor: pointer; font-size: .88em; font-weight: 600; touch-action: manipulation; }
.tb-bt2 .icon { color: #16855a; margin-right: .2em; }
.tb-bt2-p { background: #16855a; border-color: #16855a; color: #fff; } .tb-bt2-p .icon { color: #fff; }
.tb-bt2.actif { border-color: #c0392b; color: #c0392b; } .tb-bt2.actif .icon { color: #c0392b; }
.tb-alerte { position: fixed; left: 50%; bottom: 1.5em; transform: translateX(-50%); max-width: 90vw; padding: .7em 1.1em; border-radius: .8em; background: #333; color: #fff; z-index: 60; font-size: .9em; }
.tb-astuce { margin: .8em auto 0; max-width: 60em; text-align: center; font-size: .82em; color: #888; line-height: 1.6; }
.tb-astuce .icon { color: #f2b01e; margin-right: .3em; }
.tb-rgpd { margin: .5em 0 0; text-align: center; font-size: .8em; color: #999; }

/* Plein écran : barre d'outils sur le côté, grands boutons, tableau maximal */
.tb-outil.plein { background: #eef1ef; width: 100vw; height: 100vh; padding: .5em; box-sizing: border-box; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: .5em; }
.tb-outil.plein .tb-barre { grid-row: 1 / 3; display: grid; grid-template-columns: repeat(2, 3.1em); grid-auto-rows: 3.1em; gap: .35em; align-content: start; justify-content: center; padding: .45em; overflow-y: auto; border-radius: .9em; }
.tb-outil.plein .tb-groupe { display: contents; }
.tb-outil.plein .tb-bt { width: 3.1em; height: 3.1em; font-size: 1.05em; }
.tb-outil.plein .tb-num { grid-column: span 2; display: flex; align-items: center; justify-content: center; }
.tb-outil.plein .tb-plein { grid-column: span 2; width: auto; background: #16855a; color: #fff; }
.tb-outil.plein .tb-barre2 { margin: 0; padding: .35em .5em; }
.tb-outil.plein .tb-zone { margin: 0; min-height: 0; }
.tb-outil.plein .tb-astuce, .tb-outil.plein .tb-rgpd { display: none; }
.tb-outil.plein .tb-page { border-radius: .4em; }
@media (pointer: coarse) { .tb-bt { width: 2.9em; height: 2.9em; } .tb-coul { width: 2.3em; height: 2.3em; } .tb-ep { width: 2.6em; height: 2.6em; } }
@media screen and (max-width: 736px) { .tb-barre, .tb-barre2 { gap: .3em .5em; padding: .4em; } }
@media (max-height: 880px) {
	.tb-outil.plein .tb-barre { grid-template-columns: repeat(3, 2.85em); grid-auto-rows: 2.85em; gap: .3em; }
	.tb-outil.plein .tb-bt { width: 2.85em; height: 2.85em; }
	.tb-outil.plein .tb-num { grid-column: span 3; }
	.tb-outil.plein .tb-plein { grid-column: span 3; width: auto; }
}
@media (max-height: 560px) {
	.tb-outil.plein .tb-barre { grid-template-columns: repeat(4, 2.6em); grid-auto-rows: 2.6em; }
	.tb-outil.plein .tb-bt { width: 2.6em; height: 2.6em; }
	.tb-outil.plein .tb-num, .tb-outil.plein .tb-plein { grid-column: span 4; width: auto; }
}
.tb-zoom { position: absolute; top: .6em; right: .6em; z-index: 4; padding: .35em .8em; border-radius: 2em; background: rgba(22, 133, 90, .92); color: #fff; font-size: .85em; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, .2); touch-action: manipulation; }
.tb-zoom .icon { margin-right: .2em; }
.tb-zoom b { color: #fff; }