/* doc-project | projet/assets/css/admin-tracking.css | styles dedies a la section admin Tracking configurateur V2 harmonisee avec l esthetique de la page admin principale, avec KPI visiteurs uniques sessions clics captures sans temps actif, filtres en carte, tableau sessions, zone replay scrollable redimensionnee selon la resolution client, rendu iframe readonly du vrai configurateur V2 avec surface mise a l echelle, controles Play Pause Reset, simulation graphique fallback sans capture cadree mobile avec media illustratif, marqueur de clic, scroll programme stable vers la zone cliquee, etats sans capture, timeline lisible et bloc purge. */
.admin-tracking {
    padding: 30px 0 56px;
    background:
        radial-gradient(circle at top left, rgba(255, 241, 204, 0.72), transparent 34rem),
        linear-gradient(180deg, rgba(247, 241, 232, 0.42), rgba(255, 255, 255, 0));
}

.admin-tracking__stats {
    margin: 0 0 22px;
}

.admin-tracking__stats .admin-kpi strong {
    white-space: nowrap;
}

.admin-tracking__filters {
    margin-bottom: 22px;
    padding: 20px;
    border: 1px solid rgba(95, 60, 27, 0.12);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 18px 44px rgba(63, 42, 28, 0.08);
}

.admin-tracking__filter-form {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    gap: 14px;
    align-items: end;
}

.admin-tracking__filter-form label {
    display: grid;
    gap: 6px;
    color: var(--muted);
    font-size: 13px;
}

.admin-tracking__filter-form input,
.admin-tracking__filter-form select {
    min-height: 42px;
    border: 1px solid rgba(95, 60, 27, 0.16);
    border-radius: 14px;
    background: #fffaf1;
    color: #3f2a1c;
}

.admin-tracking__filter-form input:focus,
.admin-tracking__filter-form select:focus {
    border-color: rgba(138, 90, 43, 0.55);
    box-shadow: 0 0 0 4px rgba(255, 193, 7, 0.14);
    outline: none;
}

.admin-tracking__layout {
    display: grid;
    grid-template-columns: minmax(360px, 0.9fr) minmax(430px, 1.1fr);
    gap: 22px;
    align-items: start;
}

.admin-tracking__sessions,
.admin-tracking__replay,
.admin-tracking__danger {
    padding: 20px;
    border: 1px solid rgba(95, 60, 27, 0.12);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 44px rgba(63, 42, 28, 0.08);
}

.admin-tracking__sessions {
    overflow: hidden;
}

.admin-tracking__sessions table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px;
}

.admin-tracking__sessions th {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.admin-tracking__sessions td {
    border-top: 1px solid rgba(95, 60, 27, 0.08);
    border-bottom: 1px solid rgba(95, 60, 27, 0.08);
    background: #fffaf1;
}

.admin-tracking__sessions td:first-child {
    border-left: 1px solid rgba(95, 60, 27, 0.08);
    border-radius: 16px 0 0 16px;
}

.admin-tracking__sessions td:last-child {
    border-right: 1px solid rgba(95, 60, 27, 0.08);
    border-radius: 0 16px 16px 0;
}

.admin-tracking__danger {
    margin-top: 22px;
}

.admin-tracking__danger form {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
}

.admin-tracking-replay__controls {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 0 16px;
    padding: 10px;
    border-radius: 18px;
    background: #fffaf1;
}

.admin-tracking-replay__controls button {
    border: 1px solid rgba(95, 60, 27, 0.16);
    border-radius: 999px;
    padding: 10px 15px;
    background: #ffffff;
    color: inherit;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(63, 42, 28, 0.06);
}

.admin-tracking-replay__controls button:hover,
.admin-tracking-replay__controls button:focus-visible {
    border-color: rgba(138, 90, 43, 0.5);
    background: #fff1cc;
    outline: none;
}

.admin-tracking-replay__controls button:disabled {
    opacity: 0.52;
    cursor: not-allowed;
}

.admin-tracking-replay__status {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.admin-tracking-replay__stage {
    position: relative;
    width: min(100%, 390px);
    height: min(720px, 78vh);
    min-height: 520px;
    margin: 0 auto 16px;
    border: 10px solid #3f2a1c;
    border-radius: 34px;
    background: #f7f1e8;
    overflow: auto;
    overscroll-behavior: contain;
    scroll-behavior: auto;
    scrollbar-gutter: stable;
    box-shadow:
        0 22px 48px rgba(63, 42, 28, 0.18),
        inset 0 0 0 1px rgba(255, 255, 255, 0.24);
}

.admin-tracking-replay__stage.is-empty {
    display: grid;
    place-items: center;
    border-style: dashed;
}

.admin-tracking-replay__placeholder {
    color: var(--muted);
    margin: 0;
    padding: 18px;
    text-align: center;
}

.admin-tracking-replay__capture {
    position: relative;
    width: 100%;
    min-height: 100%;
    background: #ffffff;
    transform-origin: 0 0;
}

.admin-tracking-replay__capture img {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
}

.admin-tracking-readonly {
    position: relative;
    width: var(--tracking-replay-render-width, 100%);
    height: var(--tracking-replay-render-height, 100%);
    min-height: var(--tracking-replay-render-height, 100%);
    overflow: hidden;
    background: #ffffff;
}

.admin-tracking-readonly__surface {
    width: var(--tracking-replay-viewport-width, 100%);
    height: var(--tracking-replay-viewport-height, 100%);
    min-height: var(--tracking-replay-viewport-height, calc(min(720px, 78vh) - 20px));
    transform: scale(var(--tracking-replay-scale, 1));
    transform-origin: 0 0;
}

.admin-tracking-readonly__frame {
    display: block;
    width: var(--tracking-replay-viewport-width, 100%);
    height: var(--tracking-replay-viewport-height, 100%);
    min-height: var(--tracking-replay-viewport-height, calc(min(720px, 78vh) - 20px));
    border: 0;
    background: #ffffff;
}

.admin-tracking-replay__marker {
    position: absolute;
    width: 26px;
    height: 26px;
    border: 3px solid #c73a3a;
    border-radius: 999px;
    transform: translate(-50%, -50%);
    box-shadow:
        0 0 0 6px rgba(199, 58, 58, 0.18),
        0 8px 20px rgba(199, 58, 58, 0.24);
    pointer-events: none;
}

.admin-tracking-simulator {
    position: relative;
    width: 100%;
    min-height: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 18px;
    border-radius: 22px;
    background: linear-gradient(180deg, #fffaf1 0%, #ffffff 100%);
    box-shadow: inset 0 0 0 1px rgba(95, 60, 27, 0.12);
}

.admin-tracking-simulator__header {
    display: grid;
    gap: 4px;
    margin-bottom: 14px;
}

.admin-tracking-simulator__eyebrow {
    color: #8a5a2b;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.admin-tracking-simulator__title {
    margin: 0;
    color: #3f2a1c;
    font-size: clamp(1.15rem, 2vw, 1.55rem);
}

.admin-tracking-simulator__meta {
    color: var(--muted);
    font-size: 13px;
}

.admin-tracking-simulator__stepper {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    margin: 0 0 16px;
    padding: 0 0 4px;
    list-style: none;
}

.admin-tracking-simulator__step {
    flex: 0 0 auto;
    padding: 7px 10px;
    border-radius: 999px;
    background: #f4eadb;
    color: #6a4a2f;
    font-size: 12px;
    font-weight: 800;
}

.admin-tracking-simulator__step.is-active {
    background: #3f2a1c;
    color: #ffffff;
}

.admin-tracking-simulator__panel {
    display: grid;
    gap: 14px;
}

.admin-tracking-simulator__visual {
    margin: 0 0 14px;
    overflow: hidden;
    border: 1px solid rgba(95, 60, 27, 0.12);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(63, 42, 28, 0.08);
}

.admin-tracking-simulator__image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.admin-tracking-simulator__question {
    margin: 0;
    color: #3f2a1c;
    font-size: 1rem;
    font-weight: 900;
}

.admin-tracking-simulator__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.admin-tracking-simulator__card {
    position: relative;
    min-height: 92px;
    display: grid;
    gap: 6px;
    align-content: center;
    padding: 14px;
    border: 2px solid rgba(95, 60, 27, 0.16);
    border-radius: 18px;
    background: #ffffff;
    color: #3f2a1c;
    box-shadow: 0 10px 24px rgba(63, 42, 28, 0.08);
}

.admin-tracking-simulator__card-title {
    font-weight: 900;
}

.admin-tracking-simulator__card-text {
    color: var(--muted);
    font-size: 13px;
}

.admin-tracking-simulator__card.is-selected {
    border-color: #c73a3a;
    background: #fff1cc;
}

.admin-tracking-simulator__card.is-selected::before {
    content: "✓";
    position: absolute;
    top: 10px;
    right: 10px;
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border-radius: 999px;
    background: #c73a3a;
    color: #ffffff;
    font-weight: 900;
}

.admin-tracking-simulator__summary {
    padding: 12px 14px;
    border-radius: 16px;
    background: #f7f1e8;
    color: #6a4a2f;
    font-size: 13px;
}

.admin-tracking-simulator__click {
    position: absolute;
    z-index: 4;
    width: 30px;
    height: 30px;
    border: 3px solid #c73a3a;
    border-radius: 999px;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 8px rgba(199, 58, 58, 0.18);
    pointer-events: none;
}

.admin-tracking-replay__timeline {
    display: grid;
    gap: 10px;
    max-height: 520px;
    overflow: auto;
    margin: 0;
    padding: 0;
    list-style: none;
}

.admin-tracking-replay__event {
    display: grid;
    gap: 6px;
    width: 100%;
    padding: 13px 14px;
    border: 1px solid rgba(95, 60, 27, 0.12);
    border-radius: 16px;
    background: #ffffff;
    color: inherit;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(63, 42, 28, 0.05);
}

.admin-tracking-replay__event:hover,
.admin-tracking-replay__event:focus-visible,
.admin-tracking-replay__event.is-active {
    border-color: rgba(138, 90, 43, 0.45);
    background: #fff1cc;
    outline: none;
    transform: translateY(-1px);
}

.admin-tracking-replay__event span,
.admin-tracking-replay__event small {
    color: var(--muted);
}

.admin-tracking-replay__event strong {
    color: #3f2a1c;
    font-size: 0.98rem;
}

@media (max-width: 1080px) {
    .admin-tracking__filter-form,
    .admin-tracking__layout {
        grid-template-columns: 1fr;
    }

    .admin-tracking__filter-form {
        align-items: stretch;
    }
}

@media (max-height: 720px) {
    .admin-tracking-replay__stage {
        height: 72vh;
        min-height: 420px;
    }
}

@media (max-width: 640px) {
    .admin-tracking {
        padding-top: 22px;
    }

    .admin-tracking__filters,
    .admin-tracking__sessions,
    .admin-tracking__replay,
    .admin-tracking__danger {
        border-radius: 20px;
        padding: 16px;
    }

    .admin-tracking-replay__stage {
        border-width: 7px;
        border-radius: 28px;
        min-height: 440px;
    }
}