/* ============================================================
   CUMDECI SKIN — APPLE (OPAQUE, COMPATIBLE EXISTANT)
   ============================================================ */

/* ------------------------------------------------------------
   TOKENS iOS Light – OPAQUE
------------------------------------------------------------ */
body[data-skin="apple"][data-theme="light"] {
    --cd-bg: #ffffff;
    --cd-bg-surface: #ffffff;
    --cd-text: #1c1c1e;
    --cd-text-muted: #6e6e73;
    --cd-border: rgba(60, 60, 67, 0.36);

    --cd-btn-bg: #ffffff;
    --cd-btn-bg-hover: #f2f2f7;
    --cd-btn-fg: #1c1c1e;
    --cd-btn-border: rgba(60,60,67,0.36);

    --cd-control-bg: #ffffff;
    --cd-control-border: rgba(60,60,67,0.36);
    --cd-control-fg: #1c1c1e;
}

/* ------------------------------------------------------------
   TOKENS iOS Dark – OPAQUE (Compatible Apple Dark)
------------------------------------------------------------ */
body[data-skin="apple"][data-theme="dark"] {
    --cd-bg: #000000;
    --cd-bg-surface: #1c1c1e;
    --cd-text: #ffffff;
    --cd-text-muted: #b0b0b4;
    --cd-border: rgba(255,255,255,0.22);

    --cd-btn-bg: #1c1c1e;
    --cd-btn-bg-hover: #2c2c2e;
    --cd-btn-fg: #ffffff;
    --cd-btn-border: rgba(255,255,255,0.22);

    --cd-control-bg: #2c2c2e;
    --cd-control-border: rgba(255,255,255,0.22);
    --cd-control-fg: #ffffff;
}

/* AUTO MODE (si ton moteur utilise data-theme="auto") */
@media (prefers-color-scheme: dark) {
    body[data-skin="apple"][data-theme="auto"] {
        --cd-bg: #000000;
        --cd-bg-surface: #1c1c1e;
        --cd-text: #ffffff;
        --cd-text-muted: #b0b0b4;
        --cd-border: rgba(255,255,255,0.22);

        --cd-btn-bg: #1c1c1e;
        --cd-btn-bg-hover: #2c2c2e;
        --cd-btn-fg: #ffffff;
        --cd-btn-border: rgba(255,255,255,0.22);

        --cd-control-bg: #2c2c2e;
        --cd-control-border: rgba(255,255,255,0.22);
        --cd-control-fg: #ffffff;
    }
}

/* ------------------------------------------------------------
   SURFACES (ZH, ZS, ZF, ZMH) – 100% opaques
------------------------------------------------------------ */
body[data-skin="apple"] #ZH,
body[data-skin="apple"] #ZF,
body[data-skin="apple"] #ZS,
body[data-skin="apple"] #ZMH {
    background: var(--cd-bg-surface);
    border-radius: 18px;
    box-shadow:
        0 6px 16px rgba(0,0,0,0.08),
        0 2px 4px rgba(0,0,0,0.05);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Zone centrale */
body[data-skin="apple"] #ZC {
    background: var(--cd-bg);
}

/* ------------------------------------------------------------
   BOUTONS
------------------------------------------------------------ */
body[data-skin="apple"] .font-btn {
    background: var(--cd-btn-bg);
    color: var(--cd-btn-fg);
    border: 1px solid var(--cd-btn-border);
    border-radius: 12px;
    padding: 10px 18px;
    font-weight: 500;
    transition: background .20s, border-color .20s;
}

body[data-skin="apple"] .font-btn:hover {
    background: var(--cd-btn-bg-hover);
}

/* Danger */
body[data-skin="apple"] .font-btn.btn--danger {
    background: #ff3b30;
    border-color: #d32d24;
    color: white;
}

/* Ghost */
body[data-skin="apple"] .font-btn.btn--ghost {
    background: var(--cd-bg);
    border-color: var(--cd-border);
}

/* ------------------------------------------------------------
   INPUTS & SELECT
------------------------------------------------------------ */
body[data-skin="apple"] input,
body[data-skin="apple"] select,
body[data-skin="apple"] textarea {
    background: var(--cd-control-bg);
    border: 1px solid var(--cd-control-border);
    color: var(--cd-control-fg);
    border-radius: 12px;
    padding: 10px 14px;
}

/* ------------------------------------------------------------
   CHECKBOX — SKIN APPLE
------------------------------------------------------------ */
body[data-skin="apple"] .cd-checkbox .cb-box {
    background: var(--cd-bg-surface);
    border-color: var(--cd-border);
    border-radius: 7px;
}

body[data-skin="apple"] .cd-checkbox input[type="checkbox"]:checked ~ .cb-box {
    background: #0a84ff;
    border-color: #0a84ff;
}

/* ------------------------------------------------------------
   TEXTES
------------------------------------------------------------ */
body[data-skin="apple"] h1,
body[data-skin="apple"] h2,
body[data-skin="apple"] h3 {
    color: var(--cd-text);
    letter-spacing: -0.3px;
    font-weight: 700;
}

/* ------------------------------------------------------------
   SCROLLBAR
------------------------------------------------------------ */
body[data-skin="apple"] ::-webkit-scrollbar {
    width: 6px;
}

body[data-skin="apple"] ::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.18);
    border-radius: 3px;
}