@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

html, body { margin: 0px; padding: 0px; font-family: Inter,sans-serif; background: #fff;}

table.ctop { margin:0px;background: #fff; background-image:url('/images/retour_bg-52.gif');background-repeat:repeat-x;height:52; }
td.ctop { padding: 0px; font-size: 20px; }

td.ccopy { padding:5px;font-size:11px;color:white;background:#333;height:24px;text-align:right; }

h3{color: #fff; text-align: center; font-weight:600;margin: 0;}

        :root {
            --page-bg: #ffffff;
            --calc-body: #ECE9E0;    
            --display-bg: #121212;
            --vfd-green: #2ecc71;
            --btn-num: #ffffff;
            --btn-op: #f39c12;       
            --btn-tax: #27ae60;      
            --btn-fn: #6794D7;       
            --text-dark: #2d3436;
        }

        .calc {
            background: var(--calc-body);
            padding: 20px;
            border-radius: 20px;
            box-shadow: 0 40px 80px rgba(0,0,0,0.08);
            width: 340px;
            border: 1px solid rgba(0,0,0,0.05);
        }

        .brand {
            font-size: 9px; font-weight: 800; color: #d5d5ca;
            margin-top: 12px; margin-bottom: -16px; letter-spacing: 1.1px;
            display: flex; justify-content: space-between;
        }

        .display {
            background: var(--display-bg);
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 15px; /* EN BAS DE SCREEN */
            text-align: right;
        }

        .eq { 
            font-family: 'JetBrains Mono', monospace;
            font-size: 11px; color: var(--vfd-green);
            min-height: 16px; margin-bottom: 6px;
        }

        .res { 
            font-size: 42px; font-weight: 700; 
            color: var(--vfd-green);
            letter-spacing: -1px;
        }
        
        .top-bar {
            display: flex; justify-content: space-between; align-items: center;
            margin-bottom: 15px;  /* EN BAS DU TOGGLES SLIDES */
        }
        
        .toggles { display: flex; gap: 10px; }
        .switch { position: relative; width: 54px; height: 26px; cursor: pointer; }
        .switch input { opacity: 0; width: 0; height: 0; }
        .slider {
            position: absolute; inset: 0;
            background-color: #c9c9bc; transition: .3s; 
            border-radius: 4px;
        }
        .slider:before {
            position: absolute; content: ""; height: 20px; width: 24px; left: 3px; bottom: 3px;
            background-color: #fff; transition: .3s; border-radius: 2px;
            display: flex; align-items: center; justify-content: center;
            font-size: 8px; font-weight: 800;
        }
        .mode-slider:before { content: "DEC"; color: var(--btn-tax); }
        input:checked + .mode-slider:before { transform: translateX(24px); content: "NOR"; color: #7f8c8d; }
        .curr-slider:before { content: "CAD"; color: var(--text-dark); }
        input:checked + .curr-slider:before { transform: translateX(24px); content: "USD"; color: #2980b9; }

        .info-right { font-size: 9px; font-weight: 600; color: #8e8e82; text-align: right; line-height: 1.4; }
        .status { display: none; flex-direction: column; color: #27ae60; }
        .status.visible { display: flex; color:#2980b9; text-transform: uppercase; }
        .qc-label { color: gray; font-weight: 700; text-transform: uppercase; }

        .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
        button {
            border: none; padding: 12px 0; border-radius: 8px;
            font-family: 'Inter', sans-serif; font-weight: 700; font-size: 21px;
            cursor: pointer; transition: all 0.1s ease;
            background: var(--btn-num); color: var(--text-dark);
            box-shadow: 0 4px 0 rgba(0,0,0,0.10);
        }
        button:active, button.active { transform: translateY(2px); box-shadow: 0 0 0 transparent; }
        .op { background: var(--btn-op); color: white; }
        .tax { background: var(--btn-tax); color: white; font-size: 13px; }
        .ac { background: #e74c3c; color: white; }
        .fn { background: var(--btn-fn); color: white; }
        .eq-btn { background: #fff; color: var(--btn-op); border: 1px solid rgba(243, 156, 18, 0.2); }