/* Clé en classe · mode tableau (tableau.html) */
body.tb{margin:0;min-height:100dvh;overflow:hidden;--tb-ink:#2b2541;--tb-card:rgba(255,255,255,.86);--tb-hl:#c9f2df}
.tb [hidden]{display:none !important}

/* ---------- Fonds d'écran (dessinés en CSS, aucune image à charger) ---------- */
.tb-bg{position:fixed;inset:0;z-index:0;transition:background .4s}
[data-tbfond=aurore] .tb-bg,[data-fond-sw=aurore]{background:radial-gradient(ellipse at 15% 20%,#ffd1ec 0,transparent 55%),radial-gradient(ellipse at 85% 15%,#c9b8ff 0,transparent 55%),radial-gradient(ellipse at 70% 90%,#9fe8ff 0,transparent 60%),radial-gradient(ellipse at 10% 95%,#b5f3d4 0,transparent 55%),#efe9ff}
[data-tbfond=lagon] .tb-bg,[data-fond-sw=lagon]{background:radial-gradient(circle at 20% 80%,#7ee0d2 0,transparent 50%),radial-gradient(circle at 80% 20%,#8ec5ff 0,transparent 55%),linear-gradient(160deg,#d5f6ff,#bdeee6)}
[data-tbfond=prairie] .tb-bg,[data-fond-sw=prairie]{background:radial-gradient(circle at 12% 18%,#fff6c2 0 7%,transparent 7.5%),radial-gradient(ellipse at 50% 120%,#9ee08f 0,#c8f0b8 45%,transparent 46%),linear-gradient(#cdeeff,#eefbe6)}
[data-tbfond=papier] .tb-bg,[data-fond-sw=papier]{background:radial-gradient(#d9d4e8 1.4px,transparent 1.6px) 0 0/26px 26px,#fbfaf6}
[data-tbfond=coucher] .tb-bg,[data-fond-sw=coucher]{background:linear-gradient(170deg,#ffcf8a 0%,#ff9fa8 45%,#b493ff 100%)}
[data-tbfond=craie] .tb-bg,[data-fond-sw=craie]{background:radial-gradient(ellipse at 30% 20%,rgba(255,255,255,.08),transparent 60%),#2f5148}
[data-tbfond=nuit] .tb-bg,[data-fond-sw=nuit]{background:radial-gradient(1.5px 1.5px at 20% 30%,#fff 50%,transparent),radial-gradient(1px 1px at 70% 20%,#fff 50%,transparent),radial-gradient(1.5px 1.5px at 85% 60%,#fff 50%,transparent),radial-gradient(1px 1px at 40% 75%,#fff 50%,transparent),radial-gradient(1px 1px at 10% 85%,#fff 50%,transparent),radial-gradient(1.2px 1.2px at 55% 45%,#fff 50%,transparent),radial-gradient(ellipse at 80% 100%,#3b2f7a,transparent 60%),#16143a}
[data-tbfond=ocean] .tb-bg,[data-fond-sw=ocean]{background:radial-gradient(ellipse at 50% -10%,#3fb6d9,transparent 60%),linear-gradient(#0f4c75,#0a2e4a)}

/* ---------- Dock à gauche ---------- */
.tb-dock{position:fixed;left:16px;top:50%;transform:translateY(-50%);z-index:20;display:flex;flex-direction:column;gap:6px;padding:12px 8px;background:#fff;border-radius:30px;box-shadow:0 0 0 4px rgba(255,255,255,.55),0 18px 40px -16px rgba(43,37,65,.45)}
.tb-dock button,.tb-dock a{all:unset;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;width:76px;padding:6px 0;border-radius:18px;font:600 .74rem/1.1 var(--f-body);color:var(--tb-ink);text-align:center}
.tb-dock button:hover,.tb-dock a:hover{background:#f3f1fa}
.tb-dock button:focus-visible,.tb-dock a:focus-visible{outline:3px solid var(--violet)}
.tb-di{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;transition:transform .15s}
.tb-dock button:hover .tb-di,.tb-dock a:hover .tb-di{transform:scale(1.08) rotate(-4deg)}
.tb-di .ic{width:24px;height:24px}
.tb-di-outils{background:#ffd3ef}.tb-di-chercher{background:#c9f2df}.tb-di-fond{background:#ddd3ff}.tb-di-plein{background:#ffe7a0}.tb-di-quit{background:#ffdcc7}
.tb-on .tb-dock{display:none}

/* ---------- Accueil ---------- */
.tb-home{position:relative;z-index:1;height:100dvh;box-sizing:border-box;padding:4vh 40px 4vh 130px;display:flex;flex-direction:column;justify-content:center;gap:3vh;overflow:auto}
.tb-hello{text-align:center;color:var(--tb-ink)}
.tb-day{margin:0;font:400 clamp(2.4rem,5.6vw,4.8rem)/1 var(--f-display);letter-spacing:-.03em}
.tb-count{margin:.5rem 0 0;font:600 clamp(1.2rem,2.4vw,2rem)/1 var(--f-mono);opacity:.75}
.tb-dark .tb-hello{color:#fff}
.tb-favs{align-self:center;width:min(1040px,100%);box-sizing:border-box;background:var(--tb-card);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:32px;padding:22px 26px 26px;box-shadow:0 0 0 4px rgba(255,255,255,.5),0 24px 50px -24px rgba(43,37,65,.4)}
.tb-favs h2,.tb-sec h3{display:inline-block;margin:0 0 14px;font:400 1.35rem/1.2 var(--f-display);color:var(--tb-ink);background:linear-gradient(transparent 62%,var(--tb-hl) 62%,var(--tb-hl) 92%,transparent 92%);padding:0 4px}
.tb-all{all:unset;cursor:pointer;display:flex;align-items:center;gap:10px;width:max-content;margin:18px auto 0;padding:12px 22px;border-radius:999px;background:var(--tb-ink);color:#fff;font:700 1.05rem var(--f-body);box-shadow:0 4px 0 #120f1f}
.tb-all .ic{width:22px;height:22px}
.tb-all:hover{transform:translateY(-1px)}
.tb-all:focus-visible{outline:3px solid var(--violet);outline-offset:3px}
.tb-empty{margin:4px 0;color:#666379}

/* ---------- Tuiles illustrées ---------- */
.tb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:14px 12px}
.tb-tile{position:relative}
.tb-open{all:unset;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;text-align:center;border-radius:20px;padding:4px 0}
.tb-open:focus-visible{outline:3px solid var(--violet);outline-offset:2px}
.tb-art{--tc:#efeaff;display:grid;place-items:center;width:96px;height:96px;border-radius:24px 24px 24px 24px;background:var(--tc);box-shadow:inset 0 -5px 0 rgba(43,37,65,.08),0 6px 14px -8px rgba(43,37,65,.4);transition:transform .15s}
.tb-art::after{content:"";position:absolute}
.tb-art svg{width:68px;height:68px;overflow:visible}
.tb-open:hover .tb-art{transform:translateY(-3px) rotate(-2deg)}
.tb-open:active .tb-art{transform:scale(.96)}
[data-c=nombres] .tb-art{--tc:#ffdbe8}[data-c=grandeurs] .tb-art{--tc:#fff0bf}[data-c=temps] .tb-art{--tc:#e4dcff}
[data-c=geo] .tb-art{--tc:#d3f3e4}[data-c=sciences] .tb-art{--tc:#d6eaff}[data-c=classe] .tb-art{--tc:#ffe1cc}[data-c=emc] .tb-art{--tc:#ffd9d6}[data-c=jeux] .tb-art{--tc:#e6dcff}
.tb-art.tb-art-dark{--tc:#2d2a63}
.tb-name{font:700 .92rem/1.2 var(--f-body);color:var(--tb-ink);max-width:13ch}
.tb-heart{all:unset;cursor:pointer;position:absolute;top:-2px;left:calc(50% + 34px);width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(43,37,65,.18)}
.tb-heart svg{width:17px;height:17px;fill:none;stroke:#2b2541;stroke-width:2}
.tb-heart[aria-pressed=true] svg{fill:#ff5d7a;stroke:#ff5d7a}
.tb-heart:focus-visible{outline:3px solid var(--violet)}

/* ---------- Fenêtres : catalogue et fonds ---------- */
.tb-modal{position:fixed;inset:0;z-index:40;display:grid;place-items:center;background:rgba(30,24,60,.28);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:3vh 3vw;animation:tb-in .18s ease-out}
@keyframes tb-in{from{opacity:0}to{opacity:1}}
.tb-sheet{width:min(1060px,100%);max-height:92dvh;display:flex;flex-direction:column;background:#f2f1f7;border-radius:34px;box-shadow:0 0 0 5px rgba(255,255,255,.6),0 40px 80px -30px rgba(30,24,60,.55);overflow:hidden;animation:tb-up .22s ease-out}
.tb-sheet-s{width:min(720px,100%)}
@keyframes tb-up{from{transform:translateY(14px) scale(.98)}to{transform:none}}
.tb-sheet-h{display:flex;align-items:center;gap:12px;padding:18px 20px 14px}
.tb-pill{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;background:#bcdcff;font:700 1.05rem var(--f-body);color:var(--tb-ink);white-space:nowrap}
.tb-pill .ic{width:22px;height:22px}
.tb-search{flex:1;display:flex;align-items:center;gap:8px;background:#fff;border-radius:999px;padding:4px 6px 4px 16px;box-shadow:inset 0 0 0 1px #e3e0ee}
.tb-search .ic{width:20px;height:20px;opacity:.6}
.tb-search input{flex:1;border:0;outline:0;background:none;font:500 1.05rem var(--f-body);padding:9px 4px;min-width:0}
.tb-search:focus-within{box-shadow:inset 0 0 0 2px var(--violet)}
.tb-x{all:unset;cursor:pointer;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;margin-left:auto}
.tb-x:hover{background:#e4e2ee}.tb-x .ic{width:26px;height:26px}
.tb-x:focus-visible{outline:3px solid var(--violet)}
.tb-sheet-b{overflow:auto;padding:0 20px 20px;display:grid;gap:14px}
.tb-sec{background:#fff;border-radius:24px;padding:18px 20px 20px}
.tb-fonds{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px;background:#fff;border-radius:24px;padding:18px}
.tb-fonds button{all:unset;cursor:pointer;display:grid;gap:6px;font:600 .9rem var(--f-body);color:var(--tb-ink);text-align:center}
.tb-sw{display:block;height:82px;border-radius:16px;box-shadow:inset 0 0 0 1px rgba(43,37,65,.12)}
.tb-fonds button[aria-pressed=true] .tb-sw{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--violet)}
.tb-fonds button:focus-visible .tb-sw{outline:3px solid var(--violet);outline-offset:4px}

/* ---------- Outil ouvert : tout l'écran ---------- */
.tb-tools{position:fixed;inset:0;z-index:10}
.tb-tools .ot-tabs{display:none}
.tb .tb-tools .ot-panel{position:absolute;inset:0;border:0;border-radius:0;margin:0;box-sizing:border-box;padding:84px clamp(16px,3vw,40px) 24px;overflow:auto;align-content:start}
.tb .tb-tools .ot-panel > .ot-full{display:none}
.tb .tb-tools .ot-panel > .ot-full + *{padding-right:0}
.tb-top{position:fixed;top:14px;right:18px;z-index:30;display:flex;gap:10px}
.tb-top button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 18px;border-radius:999px;background:#fff;font:700 1rem var(--f-body);color:var(--tb-ink);box-shadow:0 0 0 4px rgba(255,255,255,.6),0 8px 20px -10px rgba(43,37,65,.45)}
.tb-top button:hover{background:#f3f1fa}
.tb-top button:focus-visible{outline:3px solid var(--violet)}
.tb-top .ic{width:22px;height:22px}
.tb-top [data-tb=retour] .ic{transform:scaleX(-1)}
.tb-top [data-tb=plein]{padding:0;width:48px;justify-content:center}
.tb-top [data-tb=plein].is-on{background:#ff8a3d;color:#fff}
.tb-top button[aria-expanded=true],.tb-top button[aria-expanded=true]:hover{background:var(--tb-ink);color:#fff}

/* ---------- Tiroir des réglages ---------- */
.tb-set{display:none}
.tb .tb-tools .tb-set{display:flex;flex-direction:column;position:fixed;top:76px;right:18px;max-height:calc(100dvh - 94px);z-index:25;width:min(340px,calc(100vw - 36px));background:#fff;border-radius:26px;box-shadow:0 0 0 4px rgba(255,255,255,.7),0 24px 50px -20px rgba(43,37,65,.5);transform:translateX(calc(100% + 40px));transition:transform .22s ease-out;visibility:hidden}
.tb .tb-tools .tb-set-open .tb-set{transform:none;visibility:visible}
.tb-set-h{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 10px 20px;border-bottom:1px solid #eeecf4}
.tb-set-h b{font:400 1.15rem var(--f-display);color:var(--tb-ink)}
.tb-set-x{all:unset;cursor:pointer;width:36px;height:36px;display:grid;place-items:center;border-radius:50%;font-size:1rem}
.tb-set-x:hover{background:#f0eef6}
.tb-set-b{overflow:auto;padding:12px 18px;display:grid;gap:14px;align-content:start}
.tb-set-b .ot-bar{flex-direction:column;align-items:stretch;gap:10px;padding:0 0 14px;border-bottom:1px solid #f0eef6}
.tb-set-b .ot-bar:last-child{border-bottom:0}
.tb-set-b .ot-bar > *{margin:0}
.tb-set-b label{display:flex !important;justify-content:space-between;align-items:center;gap:10px;font-weight:600;font-size:.95rem}
.tb-set-b label.ot-chk{justify-content:flex-start}
.tb-set-b .seg{display:flex;flex-wrap:wrap;gap:6px}
.tb-set-b .seg label{justify-content:flex-start}
.tb-set-b{overflow-x:hidden;flex:1}
.tb-set-b select,.tb-set-b input[type=number],.tb-set-b input[type=text]{width:56%;max-width:56%;min-width:0;box-sizing:border-box}
.tb-set-b input[type=range]{flex:1;accent-color:#36c98a}
/* Les cases à cocher deviennent des interrupteurs */
.tb-set-b input[type=checkbox]{appearance:none;-webkit-appearance:none;flex:none;width:42px;height:24px;margin:0;border-radius:999px;background:#d9d6e4;position:relative;cursor:pointer;transition:background .15s}
.tb-set-b input[type=checkbox]::before{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s}
.tb-set-b input[type=checkbox]:checked{background:#36c98a}
.tb-set-b input[type=checkbox]:checked::before{transform:translateX(18px)}
.tb-set-b input[type=checkbox]:focus-visible{outline:3px solid var(--violet);outline-offset:2px}
.tb-set-help{margin:0 12px 12px;padding:0 6px;border-radius:14px;background:#f6f5fa;overflow:auto;max-height:40%;flex:none}
.tb-set-help summary{cursor:pointer;padding:10px 6px;font-weight:700;color:var(--tb-ink)}
.tb-set-help .ot-help{margin:0 0 8px;font-size:.85rem;color:#666379}

@media (max-width:760px){
  .tb-home{padding:16px 16px 120px}
  .tb-dock{top:auto;bottom:12px;left:50%;transform:translateX(-50%);flex-direction:row;padding:6px}
  .tb-dock button,.tb-dock a{width:62px}
  .tb-di{width:40px;height:40px}
  .tb-top button span{display:none}
  .tb-top button{padding:0;width:48px;justify-content:center}
}
@media (prefers-reduced-motion:reduce){.tb *{transition:none !important;animation:none !important}}

/* ---------- Outils en mode tableau : le style ludique commun est dans app.css ; ici, la mise à l'échelle de l'écran ---------- */
.tb .tb-tools .ot-panel{display:flex;flex-direction:column;gap:16px;box-shadow:none}
.tb .tb-tools .ot-panel > *{flex:none}
.tb .tb-tools .ot-stage{flex:1 0 auto;align-content:center;border-radius:30px;padding:clamp(14px,2.5vw,28px)}
.tb .tb-tools .ot-panel > .ot-stage{min-height:min(52dvh,560px)}
.tb .tb-tools .ot-bar{justify-content:center;gap:10px 12px}
.tb .tb-tools .ot-panel .btn{min-height:52px;padding:0 24px;font-size:1.05rem}
.tb .tb-tools .ot-panel .btn-sm{min-height:46px;padding:0 18px;font-size:.98rem}

/* Horloge et minuteur : le cadran prend toute la hauteur disponible */
.tb .hz-svg{width:min(78vw,calc(100dvh - 330px))}
.tb .mv-svg{width:min(78vw,calc(100dvh - 300px))}
.tb .hz-dig,.tb .mv-dig{font-size:clamp(2.2rem,5vw,4rem)}
/* Droite graduée : posée au milieu de la scène, plus épaisse */
.tb #ot-droite .ot-stage{align-content:center}
.tb .dg-svg{max-height:60dvh}
.tb .dg-help{text-align:center;font-size:1.05rem}
/* Numération : grandes colonnes colorées, gros boutons + et − */
.tb .nu-grid{max-width:none;gap:12px}
.tb .nu-col{border-width:3px;border-radius:22px;padding:14px 6px}
.tb .nu-col b{font-size:clamp(3rem,9vw,7rem)}
.tb .nu-col button{width:64px;height:52px;border-radius:16px;font-size:1.7rem}
.tb .nu-num{font-size:clamp(2.4rem,6vw,4.4rem)}
/* Tirage au sort : le prénom en très grand */
.tb .ti-wrap{flex:1 1 auto;grid-template-columns:minmax(220px,.6fr) minmax(0,1.4fr)}
.tb .ti-wrap textarea{border-radius:20px;border:0;box-shadow:0 0 0 2px #ebe8f3 inset;padding:14px;font-size:1.1rem;min-height:40dvh}
.tb .ti-out{font-size:clamp(3rem,10vw,8rem)}

/* Droite graduée : traits plus épais et nombres plus gros (le CSS l'emporte sur les attributs du dessin) */
.tb .dg-svg > line,.tb .dg-svg > path{stroke-width:6}
.tb .dg-svg > text{font-size:42px}
.tb .dg-pt text{font-size:40px}

/* Onglets internes : un peu plus gros sur le TBI */
.tb .tb-tools .seg{align-self:center}
.tb .tb-tools .seg button,.tb .tb-tools .seg label{min-height:44px;padding:0 18px;font-size:1rem}

/* Outils avec une fiche à droite (cartes, 3D, ciel, corps) : la scène occupe toute la hauteur */
.tb .tb-tools .ss-wrap{flex:1 0 auto;grid-template-columns:minmax(0,1fr) 320px;gap:16px}
.tb .tb-tools .ss-wrap > .ot-stage{min-height:0}
.tb .tb-tools .ss-stage,.tb .tb-tools .so-stage,.tb .tb-tools .gl-stage{aspect-ratio:auto;padding:0;overflow:hidden;height:calc(100dvh - 240px);min-height:320px}
.tb .tb-tools .ss-info{padding:20px}
.tb .tb-tools .ss-info b{font-size:1.8rem}
.tb .tb-tools .ss-info,.tb .tb-tools .ss-info dl{font-size:1rem}
.tb .ca-svg{max-height:calc(100dvh - 200px)}

/* Monnaie : pièces et billets plus gros, faciles à toucher */
.tb #ot-monnaie .mn-stage{min-height:calc(100dvh - 250px)}
.tb .mn-q{font-size:1.6rem}.tb .mn-q b{font-size:2rem}

@media (max-width:900px){.tb .tb-tools .ss-wrap{grid-template-columns:minmax(0,1fr)}.tb .tb-tools .ss-stage,.tb .tb-tools .so-stage,.tb .tb-tools .gl-stage{height:55dvh}}
/* Rituel météo : le bloc prend toute la hauteur libre et se centre dedans, dans les deux sens */
.tb #ot-meteo .mr{flex:1 0 auto;align-content:center;justify-items:center}
.tb .mr-card{min-height:min(300px,calc(100dvh - 420px))}
.tb .mr-skyic .mt-svg{width:170px;height:170px}
.tb .mr-eol{width:170px}
.tb .mr-thermo{width:110px}
.tb .mr-season{width:210px}

/* Ranger « Mes outils » au glisser-déposer */
.tb-tip{margin:-6px 0 12px;color:#6f6b85;font-size:.9rem}
#tb-favs .tb-tile{cursor:grab;touch-action:none}
.tb-sorting,.tb-sorting *{cursor:grabbing!important;user-select:none}
.tb-hole{opacity:.25}
.tb-hole .tb-art{box-shadow:inset 0 0 0 3px #2b2541;outline:3px dashed #9a94b8;outline-offset:4px}
.tb-ghost{position:fixed;z-index:60;pointer-events:none;transform:rotate(-4deg) scale(1.08);filter:drop-shadow(0 16px 20px rgba(43,37,65,.35));transition:none}
.tb #ot-monde .ss-wrap{align-items:start}
.tb #ot-monde .ss-wrap > .mo-stage{min-height:0}
.tb #ot-solides .so-wrap{grid-template-columns:280px minmax(0,1fr) 290px}
.tb .so-list{max-height:calc(100dvh - 240px)}
.tb .so-list button{padding:7px 12px;font-size:.98rem}
.tb #ot-solides .so-stage{height:calc(100dvh - 240px);min-height:320px}
/* Mode tableau : les noms des solides sur deux colonnes par famille, pour que les 16 tiennent sans défiler */
.tb .so-list{gap:8px;padding:10px 8px}
.tb .so-fam{grid-template-columns:1fr 1fr;gap:2px 4px}
.tb .so-fam b{grid-column:1/-1}
.tb .so-list button{padding:6px 8px;font-size:.9rem;line-height:1.2}
.tb #ot-carte .ss-wrap{align-items:start}
.tb #ot-corps .co-view{height:calc(100dvh - 310px)}
.tb [data-c=francais] .tb-art{--tc:#cdf0f2}
.tb #ot-conjugaison .cj-stage{min-height:calc(100dvh - 260px)}
.tb [data-c=maternelle] .tb-art{--tc:#ffdbe8}
.tb #ot-homophones .cj-stage,.tb #ot-flash .fl-stage,.tb #ot-invisibles .iv-stage,.tb #ot-phrase .ph-stage,.tb #ot-syllabes .sy-stage,.tb #ot-prenoms .pn-stage{min-height:calc(100dvh - 240px)}
.tb #ot-des .de-stage{min-height:calc(100dvh - 200px)}
.tb #ot-cahier .ch-stage{min-height:calc(100dvh - 200px)}
/* ---------- Pages du tableau ---------- */
.tb-pages{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:31;display:flex;align-items:center;gap:4px;height:48px;padding:0 6px;border-radius:999px;background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.6),0 8px 20px -10px rgba(43,37,65,.45);font:700 1rem var(--f-body);color:var(--tb-ink)}
.tb-pages > button{all:unset;cursor:pointer;display:grid;place-items:center;min-width:36px;height:36px;border-radius:999px;font:700 1.3rem var(--f-body)}
.tb-pages > button:hover:not([disabled]){background:#f3f1fa}
.tb-pages > button[disabled]{opacity:.3;cursor:default}
.tb-pages > button:focus-visible{outline:3px solid var(--violet)}
.tb-pages .tb-pg-name{font-size:1rem;padding:0 12px;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;line-height:36px}
.tb-pages .tb-pg-name[aria-expanded=true]{background:var(--tb-ink);color:#fff}
.tb-pg-n{font-weight:600;font-size:.9rem;color:#8a86a0;padding:0 4px}
.tb-pg-flash{animation:tb-pg-flash .45s ease-out}
@keyframes tb-pg-flash{0%{transform:translateX(-50%) scale(1)}40%{transform:translateX(-50%) scale(1.08)}100%{transform:translateX(-50%) scale(1)}}
.tb-pg-menu{position:absolute;top:56px;left:50%;transform:translateX(-50%);width:min(340px,92vw);max-height:70vh;overflow:auto;background:#fff;border-radius:22px;padding:8px;box-shadow:0 20px 50px -14px rgba(43,37,65,.45);display:grid;gap:2px}
.tb-pg-menu > button{all:unset;cursor:pointer;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:8px 10px;border-radius:14px}
.tb-pg-menu > button:hover{background:#f3f1fa}
.tb-pg-menu > button[aria-current=true]{background:#ece3ff}
.tb-pg-menu .tb-sw{grid-row:span 2;width:34px;height:34px;border-radius:10px}
.tb-pg-menu b{font:700 .98rem var(--f-body)}
.tb-pg-menu small{font:500 .8rem var(--f-body);color:#8a86a0}
.tb-pg-acts{display:flex;flex-wrap:wrap;gap:6px;border-top:2px solid #f3f1fa;padding-top:8px;margin-top:4px}
.tb-pg-acts button,.tb-pg-ren button{all:unset;cursor:pointer;padding:7px 12px;border-radius:999px;background:#f3f1fa;font:600 .88rem var(--f-body)}
.tb-pg-acts button[disabled]{opacity:.35;cursor:default}
.tb-pg-ren{display:flex;gap:6px;border-top:2px solid #f3f1fa;padding-top:8px;margin-top:4px}
.tb-pg-ren input{flex:1;min-width:0;border:2px solid #ebe8f3;border-radius:12px;padding:7px 10px;font:600 1rem var(--f-body)}
.tb-home{padding-top:max(4vh,80px)}
@media (max-width:760px){.tb-pages{top:10px;left:12px;transform:none}.tb-pg-flash{animation:none}.tb-pages .tb-pg-name{max-width:120px}}
/* ---------- Dessiner sur le tableau (assets/tableau-dessin.js) ---------- */
.tb-ink{position:fixed;inset:0;width:100vw;height:100dvh;z-index:26;pointer-events:none;touch-action:none}
.tb-drawing .tb-ink{pointer-events:auto;cursor:crosshair}
.tb-drawing.tb-gomme .tb-ink{cursor:cell}
.tb-pg-pen{margin-left:2px;border-left:2px solid #f3f1fa!important;border-radius:0 999px 999px 0!important;font-size:1.1rem!important}
.tb-pg-pen[aria-pressed=true]{background:var(--tb-ink)!important;color:#fff}
.tb-pen{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:32;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;max-width:calc(100vw - 24px);padding:8px 10px;border-radius:26px;background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.6),0 14px 30px -12px rgba(43,37,65,.5);animation:tb-in .18s ease-out}
.tb-pen[hidden]{display:none}
.tb-pen button{all:unset;cursor:pointer;display:grid;place-items:center;min-width:40px;height:40px;border-radius:14px;font:700 .95rem var(--f-body);color:var(--tb-ink)}
.tb-pen button:hover{background:#f3f1fa}
.tb-pen button:focus-visible{outline:3px solid var(--violet)}
.tb-pen button[aria-pressed=true]{background:#ece3ff;box-shadow:0 0 0 2px #8e5bd8 inset}
.tb-pen .tb-pc{min-width:34px;width:34px;height:34px;border-radius:50%}
.tb-pen .tb-pc i{width:24px;height:24px;border-radius:50%;background:var(--c);box-shadow:0 0 0 2px rgba(43,37,65,.25)}
.tb-pen .tb-pc[aria-pressed=true]{box-shadow:0 0 0 3px var(--tb-ink);background:#fff}
.tb-pen .tb-pz i{display:block;border-radius:50%;background:var(--tb-ink)}
.tb-pen .tb-sep{width:2px;height:28px;background:#f3f1fa;margin:0 2px}
.tb-pen .tb-pok{background:var(--tb-ink);color:#fff;padding:0 14px}
.tb-pen .tb-pok:hover{background:#3d3657}
/* ---------- « Mes outils » repliable ---------- */
.tb-favs-h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.tb-fold{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;background:#f3f1fa;font:700 .9rem var(--f-body);color:var(--tb-ink)}
.tb-fold:hover{background:#e9e5f6}
.tb-fold:focus-visible{outline:3px solid var(--violet)}
.tb-fold-i{display:inline-block;transition:transform .2s}
.tb-folded .tb-fold-i{transform:rotate(180deg)}
.tb-favs.tb-folded{width:auto;padding:10px 12px 10px 22px;border-radius:999px}
.tb-folded .tb-favs-h{align-items:center}
.tb-folded h2{margin:0}
.tb-favs-body{animation:tb-in .2s ease-out}
/* Replié : la date et l'heure se rangent en haut à gauche, le reste de l'écran est libre pour dessiner */
.tb-home-folded .tb-home{justify-content:flex-start}
.tb-home-folded .tb-hello{position:fixed;top:14px;left:18px;z-index:21;text-align:left;padding:8px 18px 9px;border-radius:22px;background:var(--tb-card);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 0 0 4px rgba(255,255,255,.5),0 8px 20px -10px rgba(43,37,65,.4)}
.tb-home-folded .tb-day{font-size:1.6rem}
.tb-home-folded .tb-count{font-size:1rem;margin-top:.2rem}
.tb-dark.tb-home-folded .tb-hello{color:var(--tb-ink)}

/* Replié : la pastille « Mes outils » se range en haut à droite */
.tb-favs.tb-folded{position:fixed;top:14px;right:18px;z-index:21;margin:0;height:48px;box-sizing:border-box;display:flex;align-items:center;padding:0 6px 0 20px}
.tb-folded .tb-favs-h{gap:14px}
.tb-folded h2{font-size:1.1rem}

@media (max-width:760px){.tb-favs.tb-folded{top:66px;right:12px}}
@media (max-width:760px){.tb-home-folded .tb-hello{top:66px;left:12px;padding:6px 12px}.tb-home-folded .tb-day{font-size:1.2rem}}
/* Sur l'accueil, le dessin passe derrière la date et « Mes outils » */
body:not(.tb-on) .tb-ink{z-index:1}
body:not(.tb-on) .tb-home{z-index:2;pointer-events:none}
body:not(.tb-on) .tb-home > *{pointer-events:auto}
/* Palette complète du dessin */
.tb-pen{position:fixed}
.tb-pal-btn[aria-expanded=true]{background:#ece3ff;box-shadow:0 0 0 2px #8e5bd8 inset}
.tb-pal{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);display:grid;grid-template-columns:repeat(4,38px);grid-auto-flow:row;gap:6px;padding:12px;border-radius:22px;background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.6),0 14px 30px -12px rgba(43,37,65,.5);animation:tb-in .15s ease-out}
@media (min-width:700px){.tb-pal{grid-template-columns:repeat(10,38px);grid-template-rows:repeat(4,38px);grid-auto-flow:column}}
.tb-pal .tb-pc{width:38px;height:38px;min-width:38px}
.tb-pal .tb-pc i{width:28px;height:28px}
.tb-pal-libre{grid-column:1 / -1;display:flex;align-items:center;justify-content:center;gap:8px;padding:6px;border-radius:14px;background:#f3f1fa;font:700 .9rem var(--f-body);color:var(--tb-ink);cursor:pointer}
.tb-pal-libre input{width:34px;height:28px;border:0;padding:0;background:none;cursor:pointer}
.tb-drawing.tb-main .tb-ink{cursor:grab}
.tb-drawing.tb-main.tb-glisse .tb-ink{cursor:grabbing}
/* Le dessin appartient à l'accueil du tableau : il ne se voit pas sur un outil ouvert */
.tb-on .tb-ink,.tb-on .tb-pen,.tb-on .tb-pg-pen{display:none!important}
.tb [data-c=langues] .tb-art{--tc:#dbe6ff}.tb [data-c=arts] .tb-art{--tc:#ffd9f0}
.tb #ot-bruit .br-stage,.tb #ot-journee .jo-stage,.tb #ot-tables .t2-stage,.tb #ot-anglais .an-stage,.tb #ot-geometrie .ge-stage,.tb #ot-seyes .sy2-stage,.tb #ot-couleurs .co2-stage,.tb #ot-eau .eau-stage,.tb #ot-circuits .cx-stage{min-height:calc(100dvh - 200px)}
/* Monnaie au TBI : une caisse plus large, des billets à toute la largeur du casier et des pièces agrandies (en gardant leurs tailles réelles relatives) */
.tb #ot-monnaie .mn-stage,.ot-panel:fullscreen #ot-monnaie .mn-stage,#ot-monnaie.ot-panel:fullscreen .mn-stage{min-height:calc(100dvh - 200px);align-content:stretch}
.tb .mn-pal{width:clamp(212px,15vw,290px);gap:12px;--pk:clamp(2.45px,.21vw,4.2px)}
@media (max-width:640px){.tb .mn-pal{width:auto}}
.tb #ot-ecoute .ec-stage,.tb #ot-instruments .in-stage,.tb #ot-rythmes .ry-stage,.tb #ot-kaleido .ka-stage,.tb #ot-pixel .px-stage,.tb #ot-simon .si-stage,.tb #ot-memory .me2-stage{min-height:calc(100dvh - 220px)}
/* ---------- Visite guidée de l'accueil (assets/tableau-visite.js) ---------- */
.tb-di-aide{background:#fff3b0;color:#8a6a00}
.tb-visite-q{position:fixed;right:22px;bottom:22px;z-index:70;width:min(380px,calc(100vw - 32px));display:grid;gap:8px;padding:18px 20px;border-radius:24px;background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.6),0 24px 50px -16px rgba(43,37,65,.5);animation:tb-in .3s ease-out;color:var(--tb-ink)}
.tb-visite-q b{font:400 1.35rem var(--f-display)}
.tb-visite-q p{margin:0;color:#5c5873}
.tb-visite-b{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:4px}
.tb-visite-jamais{all:unset;cursor:pointer;margin-left:auto;font:600 .88rem var(--f-body);color:#8a86a0;text-decoration:underline;text-underline-offset:3px}
.tb-visite-jamais:hover{color:var(--tb-ink)}
.tb-visite-voile{position:fixed;z-index:68;border-radius:20px;box-shadow:0 0 0 4px #ffd23f,0 0 0 9999px rgba(20,16,40,.55);pointer-events:none;transition:all .3s cubic-bezier(.22,1,.36,1)}
.tb-visite-bulle{position:fixed;z-index:69;display:grid;gap:6px;padding:16px 18px;border-radius:20px;background:#fff;color:var(--tb-ink);box-shadow:0 20px 40px -14px rgba(20,16,40,.6);transition:left .3s cubic-bezier(.22,1,.36,1),top .3s cubic-bezier(.22,1,.36,1)}
.tb-visite-bulle::before{content:"";position:absolute;width:16px;height:16px;background:#fff;transform:rotate(45deg)}
.tb-visite-bulle[data-cote=h]::before{top:-7px;left:calc(var(--fx) - 8px)}
.tb-visite-bulle[data-cote=b]::before{bottom:-7px;left:calc(var(--fx) - 8px)}
.tb-visite-bulle[data-cote=g]::before{left:-7px;top:calc(var(--fy) - 8px)}
.tb-visite-bulle b{font:400 1.3rem var(--f-display)}
.tb-visite-bulle p{margin:0;font:500 1rem/1.45 var(--f-body);color:#3d3657}
.tb-visite-n{font:700 .8rem var(--f-body);color:#8a86a0}
/* Outil ouvert, écran large : la barre des tableaux part en haut à gauche, et la première barre de l'outil
   remonte sur la même ligne, entre elle et les boutons Retour / Réglages de droite */
@media (min-width:1180px){
  .tb-on .tb-pages{left:18px;transform:none}
  .tb-on .tb-pg-flash{animation:none}
  .tb .tb-tools .ot-panel:has(> .ot-full + .ot-bar){padding-top:12px} /* la barre (52 px) a le même milieu que les boutons du haut (48 px, à 14 px du bord) */
  .tb .tb-tools .ot-panel > .ot-full + .ot-bar{margin:0 var(--tb-droite,350px) 0 var(--tb-gauche,330px);min-height:52px;align-content:center}
}
#tb-top{padding:0;align-items:center;font-weight:inherit;color:inherit} /* une autre barre du site s'appelle aussi .tb-top (app.css) : on annule sa marge intérieure */

/* ---------- Calage au pixel : 18 px depuis les bords partout, 48 px de haut pour tout ce qui est en haut ---------- */
/* La barre des tableaux se centre sans translate (une largeur impaire tombait sur un demi-pixel, donc un peu floue) */
.tb-pages{left:0;right:0;margin:0 auto;width:max-content;transform:none}
@keyframes tb-pg-flash{0%{transform:scale(1)}40%{transform:scale(1.06)}100%{transform:scale(1)}}
@media (min-width:1180px){.tb-on .tb-pages{right:auto;margin:0}}
@media (max-width:760px){.tb-pages{left:12px;right:auto;margin:0}}
@media (min-width:761px){
  /* Le dock à 18 px du bord, comme les barres du haut */
  .tb-dock{left:18px}
  /* L'accueil centré sur l'écran (et donc sous la barre des tableaux) : la même marge à droite qu'à gauche, où est le dock */
  .tb-home{padding-left:130px;padding-right:130px}
  /* Outil ouvert : le contenu s'aligne sur les barres du haut, à 18 px des bords, et 18 px sous la ligne du haut */
  .tb .tb-tools .ot-panel{padding:80px 18px 18px}
}
/* Accueil replié : la date et l'heure sur une seule ligne, dans une pastille de 48 px comme les autres */
.tb-home-folded .tb-hello{display:flex;align-items:baseline;gap:12px;height:48px;box-sizing:border-box;padding:0 20px;border-radius:999px;align-items:center}
.tb-home-folded .tb-day{font-size:1.3rem;line-height:1}
.tb-home-folded .tb-count{margin:0;font-size:1rem;line-height:1}
@media (max-width:760px){.tb-home-folded .tb-hello{padding:0 14px}.tb-home-folded .tb-day{font-size:1.05rem}}
/* La proposition de visite : à 18 px des bords */
.tb-visite-q{right:18px;bottom:18px}
/* Le dock centré en hauteur sans translate (sa hauteur n'est pas un nombre entier de pixels) */
@media (min-width:761px){.tb-dock{top:0;bottom:0;margin:auto 0;height:max-content;transform:none}}

/* ---------- Mesures au TBI : chaque onglet tient dans l'écran, sans défilement ---------- */
/* L'onglet ouvert prend la hauteur qui reste ; son dessin s'y loge en largeur comme en hauteur, sans se déformer
   (unités cq : la scène est un conteneur de taille, le SVG garde exactement les proportions de son viewBox) */
.tb .tb-tools #ot-mesures > [data-me-pane]:not([hidden]){flex:1 1 0;min-height:0;display:flex;flex-direction:column;gap:12px}
.tb .tb-tools #ot-mesures > [data-me-pane] > *{flex:none;margin:0}
.tb .tb-tools #ot-mesures > [data-me-pane] > .ot-stage{flex:1 1 0;min-height:220px;container-type:size;display:grid;place-items:center;align-content:center;padding:clamp(10px,1.6vw,22px)}
.tb .tb-tools #ot-mesures > [data-me-pane] > .me-cv{container-type:normal;overflow:auto}
.tb #ot-mesures .me-regle{width:min(100cqw,calc(100cqh * 1000 / 300));height:auto}
.tb #ot-mesures .me-balance{width:min(100cqw,calc(100cqh * 1000 / 410));height:auto}
.tb #ot-mesures .me-eau{width:min(100cqw,calc(100cqh * 1000 / 440));height:auto}
.tb #ot-mesures .me-out{min-height:1.5em}
.tb #ot-mesures .me-tabs{align-self:center;margin:0}
/* Écran large : les onglets montent sur la ligne du haut, entre la barre des tableaux et Retour / Réglages */
@media (min-width:1440px){
  .tb .tb-tools #ot-mesures{padding-top:12px}
  .tb .tb-tools #ot-mesures > .ot-full + .me-tabs{min-height:52px;box-sizing:border-box;align-items:center}
}
/* Conversions : le tableau de numération en grand, au milieu de la scène */
.tb #ot-mesures .me-cv{justify-content:center;gap:clamp(8px,1.6vh,18px)}
.tb #ot-mesures .me-tab{font-size:clamp(1.6rem,3.2vw,3.2rem)}
.tb #ot-mesures .me-tab th,.tb #ot-mesures .me-tab td{min-width:clamp(64px,7.5vw,150px);height:clamp(56px,10vh,120px)}
.tb #ot-mesures .me-tab th{font-size:clamp(1.05rem,1.6vw,1.7rem)}
.tb #ot-mesures .me-comma{font-size:1.3em;right:-.32em}
.tb #ot-mesures .me-cv-out{font-size:clamp(1.15rem,2vw,1.8rem)}

/* Code de la route : la scène prend toute la hauteur libre */
.tb #ot-route .ro-stage{min-height:calc(100dvh - 200px)}

/* Jardin potager : le potager prend toute la hauteur libre */
.tb #ot-jardin .jd-stage{min-height:calc(100dvh - 200px)}

/* Drôle de course : la scène prend toute la hauteur libre */
.tb #ot-course .dc-stage{min-height:calc(100dvh - 200px)}
/* Même contour fin et même ombre pour les favoris, la barre des tableaux et le dock */
.tb-favs,.tb-pages,.tb-dock,.tb-home-folded .tb-hello{box-shadow:0 0 0 2px #2b254126,0 24px 50px -24px rgba(43,37,65,.4)}
/* Les illustrations des outils (assets/img/outils) dans les tuiles du mode tableau */
.tb-art img{width:70px;height:70px;object-fit:contain;display:block}