/* Extrait de teacher-dashboard.html. Ordre historique : 15. */
/* ═══════════════════════════════════════════════════════════════
                   🎨 SYSTÈME DE RUBAN TYPE OFFICE
                   ═══════════════════════════════════════════════════════════════ */
                .tp-ribbon-system {
                    /* ✅ FIX EMOJI — stack complète avec fallback emoji */
                    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Twemoji Mozilla', sans-serif;
                }
                
                .ribbon-tabs {
                    display: flex;
                    gap: 2px;
                }
                
                .ribbon-tab {
                    padding: 0.75rem 1.5rem;
                    border: none;
                    background: white;
                    cursor: pointer;
                    font-weight: 700;
                    font-size: 0.9rem;
                    transition: all 0.2s;
                    border-bottom: 3px solid transparent;
                    color: #1e293b !important;
                    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
                    /* ✅ FIX EMOJI — fallback polices emoji système */
                    font-family: 'Inter', 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Twemoji Mozilla', sans-serif !important;
                }
                
                .ribbon-tab:hover {
                    background: #f8fafc;
                    color: #0f172a !important;
                    border-bottom: 3px solid #94a3b8;
                }
                
                .ribbon-tab.active {
                    background: linear-gradient(to bottom, #ffffff, #f1f5f9);
                    border-bottom: 3px solid #3b82f6;
                    color: #1e40af !important;
                    font-weight: 800;
                    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3);
                }
                
                .ribbon-tab.contextual {
                    background: #fef3c7;
                    border-bottom: 3px solid #f59e0b;
                    color: #92400e !important;
                    font-weight: 700;
                }
                
                .ribbon-tab.contextual.active {
                    background: linear-gradient(to bottom, #fef3c7, #fde68a);
                    border-bottom: 3px solid #f59e0b;
                    color: #78350f !important;
                    font-weight: 800;
                }
                
                .ribbon-content {
                    min-height: 90px;
                    display: flex;
                    gap: 1rem;
                    flex-wrap: wrap;
                    padding: 0.75rem;
                }
                
                .ribbon-group {
                    display: flex;
                    flex-direction: column;
                    border-right: 2px solid #cbd5e1;
                    padding-right: 1rem;
                    min-width: fit-content;
                }
                
                .ribbon-group:last-child {
                    border-right: none;
                }
                
                .ribbon-group-label {
                    font-size: 0.7rem;
                    color: #64748b;
                    text-align: center;
                    margin-top: 0.4rem;
                    font-weight: 600;
                    text-transform: uppercase;
                    letter-spacing: 0.5px;
                }
                
                .ribbon-tools {
                    display: flex;
                    gap: 0.3rem;
                    align-items: center;
                    flex-wrap: wrap;
                }
                
                .ribbon-tool {
                    padding: 0.5rem 0.75rem;
                    border: 2px solid #cbd5e1;
                    background: white;
                    cursor: pointer;
                    border-radius: 0.375rem;
                    font-size: 0.9rem;
                    transition: all 0.15s;
                    font-weight: 700;
                    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
                    min-width: 2.5rem;
                    min-height: 2.5rem;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: #0f172a !important;
                    white-space: nowrap;
                    line-height: 1.2;
                    /* ✅ FIX EMOJI — fallback polices emoji système */
                    font-family: 'Inter', 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Twemoji Mozilla', sans-serif !important;
                }
                
                .ribbon-tool:hover {
                    background: #f1f5f9;
                    border-color: #3b82f6;
                    transform: translateY(-2px);
                    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
                    color: #1e293b !important;
                }
                
                .ribbon-tool:active {
                    transform: translateY(0);
                }
                
                .ribbon-tool.special {
                    background: linear-gradient(135deg, #3b82f6, #2563eb);
                    color: white !important;
                    border: none;
                    padding: 0.6rem 1rem;
                    font-size: 0.85rem;
                }
                
                .ribbon-tool.special:hover {
                    background: linear-gradient(135deg, #2563eb, #1d4ed8);
                    color: white !important;
                }
                
                /* Outils de gestion d'images contextuels */
                .image-selected {
                    outline: 3px solid #3b82f6 !important;
                    outline-offset: 2px;
                    cursor: move;
                }
                
                /* image sélectionnée — outline géré par l'overlay #img-resize-ov */
                .image-selected {
                    outline: none !important;
                }
                
                .image-toolbar {
                    position: absolute;
                    background: white;
                    border: 2px solid #3b82f6;
                    border-radius: 8px;
                    padding: 0.5rem;
                    display: flex;
                    gap: 0.5rem;
                    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
                    z-index: 1000;
                }
                
                .image-toolbar button {
                    padding: 0.4rem 0.6rem;
                    border: 1px solid #cbd5e1;
                    background: white;
                    border-radius: 4px;
                    cursor: pointer;
                    transition: all 0.15s;
                }
                
                .image-toolbar button:hover {
                    background: #f1f5f9;
                    border-color: #3b82f6;
                }
                /* ═══ ANNOTATION TOOL ═══ */
                .tp-annot-wrapper { position: relative; display: inline-block; line-height: 0; }
                /* ══════════════════════════════════════════════════
                   ZONES DE TEXTE — Style Word/Publisher
                   ══════════════════════════════════════════════════ */

                /* Éditeur TP : position:relative pour ancrer les textboxes */
                #tpProEditorContent1,#tpProEditorContent2,
                #tpProEditorContent3,#tpProEditorContent4 { position:relative; color: #1e293b; }

                /* ── Hiérarchie visible dans les zones d'édition ── 13/09/2026
                   Le reset de Tailwind (preflight) ramène h2 et h3 à la taille du
                   texte courant et retire list-style sur ul et ol. Conséquence dans
                   les guides des quatre volets : les titres de section ne se
                   distinguaient plus des paragraphes, et le « Travail demandé »
                   perdait sa numérotation — une suite d'étapes redevenait une suite
                   de lignes. On rétablit l'un et l'autre pour ces zones seulement,
                   sans toucher au reste du tableau de bord.                       */
                #tpProEditorContent1 h2,#tpProEditorContent2 h2,
                #tpProEditorContent3 h2,#tpProEditorContent4 h2 {
                    font-size: 17px; font-weight: 700; color: #0f172a;
                    margin: 0 0 8px 0; padding-bottom: 6px; border-bottom: 2px solid #e2e8f0;
                }
                #tpProEditorContent1 h3,#tpProEditorContent2 h3,
                #tpProEditorContent3 h3,#tpProEditorContent4 h3 {
                    font-size: 14px; font-weight: 700; color: #1d4ed8; margin: 14px 0 2px 0;
                }
                #tpProEditorContent1 ul,#tpProEditorContent2 ul,
                #tpProEditorContent3 ul,#tpProEditorContent4 ul {
                    list-style: disc outside; margin: 4px 0 8px 0; padding-left: 26px;
                }
                #tpProEditorContent1 ol,#tpProEditorContent2 ol,
                #tpProEditorContent3 ol,#tpProEditorContent4 ol {
                    list-style: decimal outside; margin: 4px 0 8px 0; padding-left: 26px;
                }
                #tpProEditorContent1 li,#tpProEditorContent2 li,
                #tpProEditorContent3 li,#tpProEditorContent4 li { margin: 2px 0; }
                /* ✅ FIX LISIBILITÉ — Blocs dark-theme dans l'éditeur prof */
                #tpProEditorContent3 [style*="background:#0d1a2e"],
                #tpProEditorContent3 [style*="background:linear-gradient(135deg,#0d1a2e"],
                #tpProEditorContent4 [style*="background:#0d1a2e"],
                #tpProEditorContent4 [style*="background:linear-gradient(135deg,#0d1a2e"] { color: #e2e8f0; }
                #tpProEditorContent3 [style*="background:#0a0f1a"],
                #tpProEditorContent3 [style*="background:#1e293b"],
                #tpProEditorContent4 [style*="background:#0a0f1a"],
                #tpProEditorContent4 [style*="background:#1e293b"] { color: #e2e8f0; }

                /* Curseur viseur en mode création */
                .tp-editor-text-active {
                    cursor: crosshair !important;
                    box-shadow: inset 0 0 0 3px rgba(124,58,237,.45) !important;
                }

                /* ── Conteneur textbox ── */
                .tp-textbox {
                    position: absolute;
                    min-width: 100px; min-height: 44px;
                    box-sizing: border-box; z-index: 30;
                    /* Empêche le contenteditable parent de le supprimer */
                }

                /* ── Zone de texte éditable ── */
                .tp-textbox-inner {
                    position: absolute;
                    /* Inset 10px = zone de clic pour la bordure/drag */
                    inset: 10px;
                    background: rgba(255,255,255,0.97);
                    border: 2px solid #e74c3c;
                    border-radius: 5px;
                    padding: 6px 10px;
                    font-size: 13px; line-height: 1.6;
                    font-weight: 600; font-family: Arial, sans-serif;
                    cursor: text; outline: none;
                    overflow: auto;
                    word-break: break-word; white-space: pre-wrap;
                    box-shadow: 0 2px 10px rgba(0,0,0,.12);
                    box-sizing: border-box;
                    min-height: 24px;
                    /* ✅ Au-dessus du frame : clic texte prioritaire */
                    z-index: 2;
                    pointer-events: all;
                }

                /* ── Anneau de drag (10px de bordure autour de l'inner) ── */
                .tp-textbox-frame {
                    position: absolute; inset: 0;
                    border: 2px solid transparent;
                    border-radius: 7px; cursor: move;
                    box-sizing: border-box;
                    transition: border-color .12s;
                    /* ✅ Derrière l'inner : ne capte que les clics sur la bordure */
                    z-index: 1;
                    pointer-events: all;
                }
                .tp-textbox.tp-selected .tp-textbox-frame {
                    border-color: #3b82f6;
                    box-shadow: 0 0 0 1px #93c5fd;
                }

                /* ── 8 poignées de redimensionnement ── */
                .tp-textbox-handle {
                    position: absolute;
                    width: 10px; height: 10px;
                    background: #fff; border: 2px solid #3b82f6;
                    border-radius: 2px; z-index: 5;
                    pointer-events: all;
                    display: none; /* cachées sauf si sélectionné */
                }
                .tp-textbox.tp-selected .tp-textbox-handle { display: block; }
                .tp-textbox-handle[data-h="nw"]{ top:-5px;  left:-5px;  cursor:nw-resize; }
                .tp-textbox-handle[data-h="n"] { top:-5px;  left:calc(50% - 5px); cursor:n-resize; }
                .tp-textbox-handle[data-h="ne"]{ top:-5px;  right:-5px; cursor:ne-resize; }
                .tp-textbox-handle[data-h="e"] { top:calc(50% - 5px); right:-5px; cursor:e-resize; }
                .tp-textbox-handle[data-h="se"]{ bottom:-5px; right:-5px; cursor:se-resize; }
                .tp-textbox-handle[data-h="s"] { bottom:-5px; left:calc(50% - 5px); cursor:s-resize; }
                .tp-textbox-handle[data-h="sw"]{ bottom:-5px; left:-5px; cursor:sw-resize; }
                .tp-textbox-handle[data-h="w"] { top:calc(50% - 5px); left:-5px; cursor:w-resize; }

                /* ── Toolbar flottante (au-dessus ou en-dessous de la boîte) ── */
                .tp-textbox-toolbar {
                    position: absolute;
                    bottom: calc(100% + 6px); left: 0;
                    display: none;
                    align-items: center; gap: 2px; flex-wrap: nowrap;
                    background: #1e293b;
                    border-radius: 8px; padding: 4px 6px;
                    box-shadow: 0 6px 24px rgba(0,0,0,.5);
                    white-space: nowrap; z-index: 200;
                    pointer-events: all;
                }
                .tp-textbox.tp-selected .tp-textbox-toolbar { display: flex; }
                .tp-textbox-toolbar.tb-below { bottom:auto; top:calc(100% + 6px); }

                /* Boutons de la toolbar */
                .tp-tb2-btn {
                    background: none; border: none; border-radius: 4px;
                    color: #e2e8f0; font-size: 12px; font-weight: 700;
                    cursor: pointer; padding: 3px 7px; min-width: 24px;
                    transition: background .1s; font-family: Arial, sans-serif;
                    line-height: 1.4;
                }
                .tp-tb2-btn:hover  { background: #334155; color: #fff; }
                .tp-tb2-btn.active { background: #3b82f6; color: #fff; }
                .tp-tb2-btn.danger { color: #fca5a5; }
                .tp-tb2-btn.danger:hover { background: #dc2626; color:#fff; }
                .tp-tb2-sep { width:1px; height:18px; background:#475569; margin:0 2px; flex-shrink:0; }
                .tp-tb2-fsize {
                    background:#0f172a; border:1px solid #334155; border-radius:4px;
                    color:#e2e8f0; font-size:11px; width:34px; text-align:center; padding:1px 2px;
                }
                .tp-tb2-swatch {
                    width:18px; height:18px; border-radius:50%;
                    border:2px solid rgba(255,255,255,.35);
                    cursor:pointer; flex-shrink:0;
                    position:relative; overflow:hidden;
                }
                .tp-tb2-swatch input[type=color] {
                    position:absolute; inset:-4px;
                    width:calc(100% + 8px); height:calc(100% + 8px);
                    opacity:0; cursor:pointer;
                }
                .tp-tb-toolbar {
                    position: fixed; z-index: 99999; display: flex; align-items: center;
                    gap: 2px; background: #1e293b; border-radius: 10px; padding: 5px 7px;
                    box-shadow: 0 8px 28px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.3);
                    pointer-events: all; user-select: none;
                    animation: tp-tb-in .14s ease-out;
                }
                @keyframes tp-tb-in {
                    from { opacity:0; transform:translateY(5px) scale(.96); }
                    to   { opacity:1; transform:translateY(0) scale(1); }
                }
                .tp-tb-sep { width:1px; height:20px; background:#475569; margin:0 3px; flex-shrink:0; }
                .tp-tb-btn {
                    background:none; border:none; border-radius:6px; color:#e2e8f0;
                    font-size:12px; font-weight:700; cursor:pointer; padding:3px 7px;
                    min-width:26px; transition:background .12s,color .12s;
                    white-space:nowrap; line-height:1.5; font-family:Arial,sans-serif;
                }
                .tp-tb-btn:hover { background:#334155; color:#fff; }
                .tp-tb-btn.tp-active { background:#3b82f6; color:#fff; }
                .tp-tb-btn.tp-danger { color:#fca5a5; }
                .tp-tb-btn.tp-danger:hover { background:#dc2626; color:#fff; }
                .tp-tb-swatch {
                    width:20px; height:20px; border-radius:50%;
                    border:2px solid rgba(255,255,255,.3); cursor:pointer;
                    flex-shrink:0; position:relative; overflow:hidden;
                }
                .tp-tb-swatch input[type=color] {
                    position:absolute; inset:-4px; width:calc(100% + 8px);
                    height:calc(100% + 8px); opacity:0; cursor:pointer;
                }
                .tp-tb-fsize {
                    background:#0f172a; border:1px solid #334155; border-radius:4px;
                    color:#e2e8f0; font-size:11px; width:34px; text-align:center;
                    padding:1px 2px; -moz-appearance:textfield;
                }
                .tp-tb-fsize::-webkit-inner-spin-button { display:none; }
                .tp-annot-active-tool { background: #dbeafe !important; border-color: #3b82f6 !important; }

                /* ══════════════════════════════════════════════════════
                   SYSTÈME DE LÉGENDE TECHNIQUE — style plan coté
                   ══════════════════════════════════════════════════════ */
                .tp-legend-container {
                    display: flex; align-items: flex-start; gap: 0;
                    position: relative; width: fit-content; max-width: 100%;
                    background: #f8fafc; border: 1px solid #e2e8f0;
                    border-radius: 8px; overflow: visible;
                }
                .tp-legend-image-zone {
                    position: relative; flex-shrink: 0; line-height: 0;
                }
                .tp-legend-panel {
                    min-width: 200px; max-width: 260px;
                    background: #f8fafc; border-left: 2px solid #cbd5e1;
                    padding: 10px 10px 10px 14px;
                    display: flex; flex-direction: column; gap: 0;
                    position: relative;
                }
                .tp-legend-panel-title {
                    font-size: 10px; font-weight: 700; color: #64748b;
                    text-transform: uppercase; letter-spacing: .06em;
                    margin-bottom: 8px; padding-bottom: 4px;
                    border-bottom: 1px solid #e2e8f0;
                    font-family: Arial, sans-serif;
                }
                /* Entrée de légende = ligne numérotée dans le panel */
                .tp-leg-entry {
                    display: flex; align-items: flex-start; gap: 7px;
                    padding: 4px 6px; margin-bottom: 3px;
                    border-radius: 5px; cursor: move;
                    transition: background .1s;
                    user-select: none; position: relative;
                }
                .tp-leg-entry:hover  { background: #e8f0fe; }
                .tp-leg-entry.tp-leg-selected { background: #dbeafe; outline: 2px solid #3b82f6; }
                .tp-leg-badge {
                    flex-shrink: 0; width: 20px; height: 20px;
                    border-radius: 50%; display: flex; align-items: center;
                    justify-content: center; font-size: 10px; font-weight: 800;
                    color: #fff; font-family: Arial, sans-serif; margin-top: 1px;
                    box-shadow: 0 1px 4px rgba(0,0,0,.25);
                }
                .tp-leg-text {
                    flex: 1; font-size: 12px; font-family: Arial, sans-serif;
                    font-weight: 600; color: #1e293b; line-height: 1.4;
                    outline: none; min-height: 18px; cursor: text;
                    border-bottom: 1px dashed transparent;
                    word-break: break-word;
                }
                .tp-leg-text:focus { border-bottom-color: #3b82f6; }
                .tp-leg-del {
                    flex-shrink: 0; width: 16px; height: 16px; opacity: 0;
                    background: #fee2e2; border: none; border-radius: 3px;
                    color: #dc2626; font-size: 11px; cursor: pointer;
                    display: flex; align-items: center; justify-content: center;
                    transition: opacity .15s; margin-top: 2px; font-family: Arial;
                    font-weight: 700; padding: 0;
                }
                .tp-leg-entry:hover .tp-leg-del { opacity: 1; }
                /* Point d'ancrage sur l'image (draggable) */
                .tp-leg-anchor {
                    position: absolute; width: 16px; height: 16px;
                    border-radius: 50%; border: 2.5px solid #fff;
                    box-shadow: 0 2px 8px rgba(0,0,0,.5);
                    cursor: crosshair; z-index: 40;
                    transform: translate(-50%, -50%);
                    transition: transform .1s;
                }
                .tp-leg-anchor:hover { transform: translate(-50%,-50%) scale(1.3); }
                /* SVG overlay couvrant image + panel */
                .tp-legend-svg {
                    position: absolute; top: 0; left: 0;
                    width: 100%; height: 100%;
                    pointer-events: none; overflow: visible; z-index: 10;
                }
                /* Mode activation : curseur crosshair sur l'image */
                .tp-legend-image-zone.tp-legend-active { cursor: crosshair; }
                /* Hint instruction */
                .tp-legend-hint {
                    position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
                    background: rgba(30,58,95,.85); color: #e0f2fe;
                    font-size: 10px; font-family: Arial,sans-serif; font-weight: 600;
                    padding: 3px 10px; border-radius: 20px; white-space: nowrap;
                    pointer-events: none; z-index: 50;
                    animation: tp-tb-in .2s ease-out;
                }