gf

Bootstrap_new/css/theme-modern.css

@@ -1582,4 +1582,153 @@ select[class*="selectpicker"],
     overflow: hidden;
     text-overflow: ellipsis;
     display: block !important;
-}
+}
+
+/* ===== WRAPPER & BORDURE ANIMÉE ===== */
+.scan-wrapper {
+    position: relative;
+    width: 100%;
+    max-width: 720px;
+    margin: 40px auto;
+}
+
+.scan-wrapper::before {
+    content: '';
+    position: absolute;
+    inset: -3px;
+    border-radius: 20px;
+    background: linear-gradient(135deg, #00c9ff, #0055a5, #00e5ff, #0055a5, #00c9ff);
+    background-size: 300% 300%;
+    animation: borderGlow 3s linear infinite;
+    z-index: 0;
+}
+
+.scan-wrapper.has-value::before {
+    background: linear-gradient(135deg, #00c853, #1b5e20, #69f0ae, #1b5e20, #00c853);
+    background-size: 300% 300%;
+}
+
+.scan-wrapper.has-error::before {
+    background: linear-gradient(135deg, #ff1744, #b71c1c, #ff6e6e, #b71c1c, #ff1744);
+    background-size: 300% 300%;
+}
+
+@keyframes borderGlow {
+    0%   { background-position: 0% 50%; }
+    50%  { background-position: 100% 50%; }
+    100% { background-position: 0% 50%; }
+}
+
+/* ===== INNER CONTAINER ===== */
+.scan-inner {
+    position: relative;
+    z-index: 1;
+    background: #050f20;
+    border-radius: 18px;
+    padding: 16px 20px 20px;
+    overflow: hidden;
+}
+
+/* Ligne de scan animée */
+.scan-inner::after {
+    content: '';
+    position: absolute;
+    left: 0; right: 0;
+    height: 2px;
+    background: linear-gradient(90deg, transparent 0%, #00e5ff 30%, #ffffff 50%, #00e5ff 70%, transparent 100%);
+    animation: scanLine 2.5s ease-in-out infinite;
+    pointer-events: none;
+    z-index: 2;
+    opacity: 0.7;
+}
+
+@keyframes scanLine {
+    0%   { top: 0%;   opacity: 0; }
+    5%   { opacity: 0.8; }
+    95%  { opacity: 0.8; }
+    100% { top: 100%; opacity: 0; }
+}
+
+/* ===== COINS DÉCORATIFS ===== */
+.scan-corner {
+    position: absolute;
+    width: 20px; height: 20px;
+    border-color: #00c9ff;
+    border-style: solid;
+    z-index: 4;
+    transition: border-color 0.3s;
+}
+.scan-corner.tl { top: 10px;  left: 10px;  border-width: 2px 0 0 2px; border-radius: 4px 0 0 0; }
+.scan-corner.tr { top: 10px;  right: 10px; border-width: 2px 2px 0 0; border-radius: 0 4px 0 0; }
+.scan-corner.bl { bottom: 10px; left: 10px;  border-width: 0 0 2px 2px; border-radius: 0 0 0 4px; }
+.scan-corner.br { bottom: 10px; right: 10px; border-width: 0 2px 2px 0; border-radius: 0 0 4px 0; }
+
+.scan-wrapper.has-value .scan-corner { border-color: #00c853; }
+.scan-wrapper.has-error  .scan-corner { border-color: #ff1744; }
+
+/* ===== LABEL EN-TÊTE ===== */
+.scan-label {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    font-family: 'Exo 2', sans-serif;
+    font-size: 9.5pt;
+    font-weight: 600;
+    letter-spacing: 3px;
+    text-transform: uppercase;
+    color: rgba(0, 180, 230, 0.6);
+    margin-bottom: 6px;
+}
+
+.nfc-icon-pulse {
+    animation: pulse 2.2s ease-in-out infinite;
+}
+@keyframes pulse {
+    0%, 100% { opacity: 0.35; transform: scale(1); }
+    50%       { opacity: 1;   transform: scale(1.2); }
+}
+
+/* ===== CHAMP INPUT ===== */
+#donneesCarte {
+    font-family: 'Rajdhani', monospace !important;
+    font-size: 24pt !important;
+    font-weight: 700;
+    height: 130px !important;
+    width: 100% !important;
+    text-align: center;
+    /* Données masquées (sécurité) */
+    color: transparent !important;
+    text-shadow: 0 0 10px rgba(0, 229, 255, 0.8) !important;
+    caret-color: #00e5ff;
+    /* Fond & bordure */
+    background: transparent !important;
+    border: none !important;
+    outline: none !important;
+    box-shadow: none !important;
+    letter-spacing: 4px;
+    position: relative;
+    z-index: 3;
+    transition: text-shadow 0.3s;
+}
+
+#donneesCarte::placeholder {
+    font-family: 'Exo 2', sans-serif !important;
+    font-size: 20pt !important;
+    font-weight: 600;
+    color: rgba(0, 210, 255, 0.85) !important;
+    text-shadow: 0 0 12px rgba(0, 210, 255, 0.5) !important;
+    letter-spacing: 1px;
+}
+
+#donneesCarte:focus::placeholder {
+    color: rgba(0, 210, 255, 0.55) !important;
+    text-shadow: 0 0 8px rgba(0, 210, 255, 0.3) !important;
+}
+
+/* État : données détectées */
+#donneesCarte.reading {
+    text-shadow: 0 0 14px rgba(0, 200, 83, 0.9) !important;
+    animation: none !important;
+}
+