/* ============================================
   UNITBASSE — Démo en mode compact (téléphone, ≤ 700 px)
   L'interface de l'app est recréée en vrais boutons (js/ipad-demo.js, renderCompact) ;
   l'écran de l'iPad, zoomé sur la zone utile, reste au centre.
   Tablette et ordinateur : la démo classique, sans barre de menus.
   Créé le 04/10/2026.
   ============================================ */

.ipad-demo__nav,
.ipad-demo__full {
    display: none !important;
}

.ipad-demo__compact {
    display: none;
}

@media (max-width: 700px) {
    .ipad-demo__compact {
        display: flex;
    }
    .ipad-demo__hotspots,
    .ipad-demo__audio,
    .ipad-demo__hint {
        display: none !important;
    }

    /* écran sans cadre d'iPad, pleine largeur */
    .ipad-demo .ipad-device {
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
    }
    .ipad-demo .ipad-device::before,
    .ipad-demo .ipad-device::after {
        display: none;
    }
    .ipad-demo .ipad-device__screen {
        border-radius: 12px;
        border: 1px solid var(--c-line, rgba(237, 227, 207, 0.12));
    }

    /* --- barre du haut : onglets de l'app + métronome --- */
    .ipad-demo__compact[data-slot="top"] {
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin-bottom: 12px;
    }
    .cpt-tabs {
        display: inline-flex;
        padding: 4px;
        border-radius: 999px;
        background: var(--c-surf, #1C1614);
        border: 1px solid #333;
    }
    .cpt-tab {
        padding: 9px 16px;
        border: 0;
        border-radius: 999px;
        background: transparent;
        color: var(--c-text, #EDE3CF);
        font: 600 15px/1 var(--font-sans);
        cursor: pointer;
    }
    .cpt-tab[aria-pressed="true"] {
        background: var(--c-raised, #29201C);
        color: var(--gold);
    }
    .cpt-metro {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        border: 1px solid var(--gold-dark);
        background: var(--c-surf, #1C1614) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23E8962E'%3E%3Cpath d='M12 2 7 21h10L12 2zm-.9 4.5h1.8l2.6 11h-7zm.9 2.2-3 6.8h1.6l2.4-5.3'/%3E%3C/svg%3E") no-repeat center / 20px;
        cursor: pointer;
    }
    .cpt-metro[aria-pressed="true"] {
        background-color: var(--gold);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231F140A'%3E%3Cpath d='M12 2 7 21h10L12 2zm-.9 4.5h1.8l2.6 11h-7zm.9 2.2-3 6.8h1.6l2.4-5.3'/%3E%3C/svg%3E");
    }

    /* --- commandes sous l'écran --- */
    .ipad-demo__compact[data-slot="bottom"] {
        flex-direction: column;
        align-items: center;
        gap: 10px;
        margin-top: 14px;
    }
    .cpt-seg {
        display: flex;
        width: 100%;
        padding: 3px;
        border-radius: 999px;
        background: var(--c-surf, #1C1614);
        border: 1px solid var(--c-line, rgba(237, 227, 207, 0.12));
    }
    .cpt-seg__btn {
        flex: 1;
        padding: 11px 6px;
        border: 0;
        border-radius: 999px;
        background: transparent;
        color: var(--c-text2, #B3A38C);
        font: 600 14px/1 var(--font-sans);
        cursor: pointer;
    }
    .cpt-seg__btn[aria-pressed="true"] {
        background: var(--c-raised, #29201C);
        color: var(--gold);
    }
    .cpt-row {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        width: 100%;
    }
    .cpt-chip {
        padding: 10px 14px;
        border: 1px solid var(--c-line, rgba(237, 227, 207, 0.12));
        border-radius: 999px;
        background: var(--c-surf, #1C1614);
        color: var(--c-text, #EDE3CF);
        font: 700 12px/1 var(--font-sans);
        letter-spacing: 0.06em;
        text-transform: uppercase;
        cursor: pointer;
    }
    .cpt-chip[aria-pressed="true"] {
        border-color: var(--gold);
        background: rgba(232, 150, 46, 0.16);
        color: var(--gold);
    }
    .cpt-chip--demo {
        flex: 1;
        padding: 13px 10px;
        font-size: 13px;
    }
    .cpt-power {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 16px 10px 12px;
        border: 1px solid var(--c-line, rgba(237, 227, 207, 0.12));
        border-radius: 999px;
        background: var(--c-surf, #1C1614);
        color: var(--c-text, #EDE3CF);
        font: 800 13px/1 var(--font-sans);
        letter-spacing: 0.08em;
        cursor: pointer;
    }
    .cpt-power::before {
        content: '';
        width: 14px;
        height: 14px;
        border-radius: 50%;
        border: 2px solid #777;
    }
    .cpt-power[aria-pressed="true"] {
        border-color: var(--c-acc, #E8962E);
        color: var(--c-acc, #E8962E);
    }
    .cpt-power[aria-pressed="true"]::before {
        border-color: var(--c-acc, #E8962E);
        background: var(--c-acc, #E8962E);
    }
    .cpt-select {
        width: 100%;
        padding: 13px 18px;
        border: 1px solid var(--gold-dark);
        border-radius: 12px;
        background: var(--c-surf, #1C1614);
        color: var(--cream);
        font: 800 16px/1 var(--font-sans);
        letter-spacing: 0.12em;
        text-transform: uppercase;
        text-align: left;
        cursor: pointer;
    }
    .cpt-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        width: 100%;
    }
    .cpt-list .cpt-chip {
        padding: 13px 10px;
        font-size: 13px;
    }

    .ipad-demo__caption {
        min-height: 0;
        margin: 14px auto 0;
    }
}

/* ---------- Visionneuse plein écran (téléphone) ---------- */
@media (max-width: 700px) {
    .ipad-demo__screen {
        cursor: zoom-in;
    }
    .ipad-demo__screen::before {
        content: '⤢';
        position: absolute;
        right: 8px;
        bottom: 8px;
        z-index: 5;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: rgba(18, 14, 13, 0.85);
        border: 1px solid var(--gold-dark);
        color: var(--gold);
        font: 700 16px/28px var(--font-sans);
        text-align: center;
        pointer-events: none;
    }
}

.cpt-viewer {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    flex-direction: column;
    background: var(--c-bg, #120E0D);
}

.cpt-viewer.is-open {
    display: flex;
}

.cpt-viewer__close {
    position: absolute;
    top: max(12px, env(safe-area-inset-top));
    right: 12px;
    z-index: 2;
    width: 44px;
    height: 44px;
    border: 1px solid var(--gold-dark);
    border-radius: 50%;
    background: var(--c-surf, #1C1614);
    color: var(--cream);
    font-size: 18px;
    cursor: pointer;
}

.cpt-viewer__scroll {
    flex: 1;
    display: flex;
    align-items: center;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y pinch-zoom;
}

.cpt-viewer__img {
    display: block;
    width: 100%;
    height: auto;
    margin: auto;
}

.cpt-viewer.is-zoomed .cpt-viewer__scroll {
    align-items: flex-start;
}

.cpt-viewer.is-zoomed .cpt-viewer__img {
    width: 250%;
    max-width: none;
}

.cpt-viewer__hint {
    padding: 12px 16px max(16px, env(safe-area-inset-bottom));
    text-align: center;
    font-size: 13px;
    color: var(--cream-muted);
}

/* bouton lecture de la vidéo (téléphone) */
@media (max-width: 700px) {
    .cpt-chip--play {
        min-width: 140px;
        border-color: var(--gold-dark);
        color: var(--gold);
    }
    .cpt-chip--play[aria-pressed="true"] {
        background: #CC5C4D;
        border-color: #CC5C4D;
        color: #fff;
    }
}

/* bouton Réglages (roue dentée) dans la barre du haut (téléphone) */
@media (max-width: 700px) {
    .cpt-gear {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        border: 1px solid var(--c-line, rgba(237, 227, 207, 0.12));
        background: var(--c-surf, #1C1614) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EDE3CF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z'/%3E%3C/svg%3E") no-repeat center / 20px;
        cursor: pointer;
    }
}


/* Thème clair (11/10/2026) : icônes redessinées dans les couleurs claires */
[data-theme="light"] .cpt-gear { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B2019' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z'/%3E%3C/svg%3E"); }
[data-theme="light"] .cpt-metro { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2398510A'%3E%3Cpath d='M12 2 7 21h10L12 2zm-.9 4.5h1.8l2.6 11h-7zm.9 2.2-3 6.8h1.6l2.4-5.3'/%3E%3C/svg%3E"); }
[data-theme="light"] .cpt-metro[aria-pressed="true"] { background-color: var(--c-acc); }