:root {
    --ui-btn-padding-y: 12px;
    --ui-btn-padding-x: clamp(18px, 1.6vw, 28px);
    --ui-btn-min-height: 48px;
    --ui-btn-radius: 10px;
}

.bouton,
.bouton-action,
.courriel {
    min-height: var(--ui-btn-min-height);
    padding: var(--ui-btn-padding-y) var(--ui-btn-padding-x);
    border-radius: var(--ui-btn-radius);
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.05;
}

.floating-video {
    --vf-radius: 8px;
    --vf-border: 3px;
    --vf-blur-pad: 0px;
    --vf-surface-bg: rgba(255, 255, 255, 0.35);
    position: relative;
    /*isolation: isolate;*/
    overflow: visible;
    border-radius: var(--vf-radius);
    border: none;
    background: transparent;
    background-clip: padding-box;
    clip-path: none;
    box-shadow: none;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform;
    width: var(--rs-card-width, clamp(300px, 32vw, 540px));
    height: var(--rs-card-height, clamp(280px, 38vh, 420px));
    min-width: var(--rs-card-min-width, 260px);
    min-height: var(--rs-card-min-height, 260px);
    max-width: var(--rs-card-max-width, 540px);
    max-height: var(--rs-card-max-height, 420px);
    margin-right: var(--rs-card-margin-right, 0);
}

.video-verticale {
    width: var(--rs-card-vertical-width, clamp(240px, 22vw, 360px));
    height: var(--rs-card-vertical-height, clamp(320px, 50vh, 560px));
    min-width: var(--rs-card-vertical-min-width, 220px);
    min-height: var(--rs-card-vertical-min-height, 320px);
    max-width: var(--rs-card-vertical-max-width, 380px);
    max-height: var(--rs-card-vertical-max-height, 560px);
}

.floating-video.blur-shell .floating-video-blur {
    position: absolute;
    inset: calc(-1 * var(--vf-blur-pad));
    border-radius: calc(var(--vf-radius) + var(--vf-blur-pad));
    overflow: visible;
    background: none;
    border: 0;
    box-shadow: none;
    -webkit-clip-path: none;
    clip-path: none;
    transform-origin: center center;
    transition: transform 220ms cubic-bezier(0.22, 0.86, 0.32, 1);
}

html.index-touch-layout .floating-video.blur-shell .floating-video-blur {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.floating-video.blur-shell .floating-video-inner {
    position: absolute;
    inset: var(--vf-blur-pad);
    z-index: 0;
    border-radius: var(--vf-radius);
    border: var(--vf-border) solid white;
    background: var(--vf-surface-bg);
    background-clip: padding-box;
    box-shadow: none;
    overflow: hidden;
    transform-origin: center center;
    transition: transform 220ms cubic-bezier(0.22, 0.86, 0.32, 1);
}

.floating-video.depth-blur {
    --vf-blur-pad: 0px;
}

.floating-video.depth-blur .video-block {
    border-radius: var(--vf-radius);
    overflow: hidden;
}

#content > section[id^="plan"]:not(#plan0) .gauche-haut,
#content > section[id^="plan"]:not(#plan0) .gauche-bas,
#content > section[id^="plan"]:not(#plan0) .droite-haut,
#content > section[id^="plan"]:not(#plan0) .droite-bas {
    transition-property: transform, opacity, filter;
}

.top-bar {
    font-family: monospace;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    background: transparent;
    border-radius: var(--vf-radius) var(--vf-radius) 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1;
}

.top-bar-title {
    display: flex;
    margin: initial;
}

.video-block {
    position: absolute;
    border-radius: 8px;
    left: 0;
    right: 0;
    top: var(--rs-card-head-height, 40px);
    bottom: 0;
    margin: var(--rs-card-inner-gap, 3%);
    transition: 500ms ease-in-out;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    overflow: hidden;
    z-index: 1;
}

.top-bar p {
    color: black;
    margin-left: var(--rs-card-topbar-padding-x, 18px);
    margin-top: var(--rs-card-topbar-padding-y, 19px);
    margin-bottom: var(--rs-card-topbar-padding-y, 19px);
    font-size: var(--rs-card-topbar-font-size, var(--type-body-sm));
    font-weight: var(--weight-semibold);
}

.top-bar p:nth-child(2) {
    margin-left: 0;
}

.drag-resize {
    cursor: grab;
}

.drag-resize:active {
    cursor: grabbing;
}

.drag-resize:active .floating-video-blur,
.drag-resize.is-being-grabbed .floating-video-blur {
    transform: scale(1.018);
}

html.index-touch-layout .drag-resize:active .floating-video-blur,
html.index-touch-layout .drag-resize.is-being-grabbed .floating-video-blur {
    transform: none;
}

html.index-touch-layout .drag-resize,
html.index-touch-layout .drag-resize .top-bar {
    cursor: default;
}

.no-select {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.horizontal {
    background-size: auto 101% !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

.vertical {
    background-size: 101% auto !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Low performance fallback: keep index behavior as reference */
html.low-perf *,
html.low-perf *::before,
html.low-perf *::after {
    animation: none !important;
    transition: none !important;
}

html.low-perf .floating-video,
html.low-perf .top-bar,
html.low-perf .haut a img,
html.low-perf .arriere-flou {
    -webkit-filter: none !important;
    filter: none !important;
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.08) !important;
}