/* PC (large écrans) */ @media (hover: hover) and (pointer: fine) { #ex7-content .draggable { touch-action: auto; pointer-events: auto; } } /* MOBILE (petits écrans tactiles) */ @media (hover: none) and (pointer: coarse) and (max-width: 768px) { #ex7-content .draggable { touch-action: auto; pointer-events: auto; } } /* TABLETTE : désactiver le drag HTML5 */ @media (hover: none) and (pointer: coarse) and (min-width: 769px) { #ex7-content .draggable { touch-action: none !important; pointer-events: none !important; } } .tablet-item { padding: 10px 15px; background: white; border: 2px solid #333; border-radius: 8px; margin: 5px; display: inline-block; font-size: 1.2em; touch-action: none; user-select: none; } #ex7-tablet-container { margin-bottom: 10px; } /* Boutons vert pomme */ .reload-btn, .validate-btn { background:#f0efc5; color: black; border: none; padding: 10px 14px; margin-top: 10px; border-radius: 8px; font-size: 1rem; cursor: pointer; } .reload-btn:hover, .validate-btn:hover { background: #f0efc5; } /* Inputs */ .input-ex { padding: 6px; margin-left: 10px; margin-right: 10px; border-radius: 6px; font-size: 1rem; } /*il y a un scroll vertical sur tablette qui empêche que les étiquettes soient draggables alors j'ajoute la prop suivante*/ /* 🔧 Empêche le scroll de capturer le drag sur tablette */ .draggable { touch-action: none; -webkit-user-drag: element; user-select: none; cursor: grab; } .draggable:active { cursor: grabbing; } /* Empêche le scroll de s'emballer pendant un drag */ .dropzone { overscroll-behavior: contain; } /* Feedback */ .feedback { font-weight: bold; margin-top: 6px; } .feedback.ok { color: green; } .feedback.no { color: red; } /* Chiffre rouge exercice 2 */ .red { color: red; font-weight: bold; } /* Pour les tableaux décomposition */ .decomp-line { margin-bottom: 8px; } /* Zone exercice 7 */ #ex7-content .draggable { padding: 10px; background: #eee; margin: 5px; border-radius: 6px; cursor: grab; } #ex7-content .dropzone { padding: 10px; border: 2px dashed #999; min-height: 40px; margin-top: 10px; } /* ---- DRAG TACTILE POUR TABLETTE ---- */ .tactile-item { padding: 10px 15px; background: white; border: 2px solid #333; border-radius: 8px; margin: 5px; display: inline-block; font-size: 1.2em; touch-action: none; pointer-events: auto; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; position: relative; z-index: 20; } .tactile-drop { min-height: 120px; border: 3px dashed #444; padding: 10px; margin-top: 12px; border-radius: 10px; } /* Renforcement iPad/tablette pour que pointer/touch arrivent bien */ .tablet-item{ pointer-events: auto !important; touch-action: none !important; -webkit-user-select: none !important; -webkit-touch-callout: none !important; -webkit-tap-highlight-color: transparent; /* évite certains conflits de drag natif */ -webkit-user-drag: none; } /* Optionnel: feedback visuel quand on “attrape” */ .tablet-item.dragging{ opacity: 0.85; } #ex7-content, #ex7-drop{ pointer-events: auto; }