/* Rose 3D Viewer - front — charte espinosa.fr (marine #093143 / #0d435b, jaune #ffd814, Roboto) */
.rose3d-root, .rose3d-viewer-wrapper, .rose3d-thumb {
    --r3d-css-version: 1.4.3; /* lu par viewer.js pour détecter une feuille périmée (CCC / cache) */
    --r3d-navy: #093143;
    --r3d-navy-2: #0d435b;
    --r3d-yellow: #ffd814;
    --r3d-yellow-dark: #e3cb00;
    --r3d-ink: #222;
    --r3d-muted: #6b7a85;
    --r3d-line: #e3e6e9;
    --r3d-font: Roboto, "Noto Sans", Arial, sans-serif;
    --r3d-font-cond: "Roboto Condensed", Roboto, Arial, sans-serif;
    --r3d-radius: 3px;
    font-family: var(--r3d-font);
}

.rose3d-section-title { margin: 30px 0 15px; padding-bottom: 10px; border-bottom: 2px solid var(--r3d-yellow); font-family: var(--r3d-font-cond); text-transform: uppercase; letter-spacing: .04em; color: var(--r3d-navy); }

/* Mode slider : caché tant que la vignette n'est pas active */
.rose3d-mode-slider #rose3d-viewer-container,
#rose3d-viewer-container.rose3d-slider { display: none; }
#rose3d-viewer-container.rose3d-inline { display: block; }
/* Prêt : le viewer se superpose à la photo de couverture, qui reste dans la page (visibility:hidden,
   jamais retirée du DOM ni passée en display:none) : balises, srcset et métriques de mise en page intacts. */
#rose3d-viewer-container.rose3d-slider.rose3d-ready { display: flex; flex-direction: column; position: absolute; top: var(--r3d-top, 0); left: var(--r3d-left, 0); width: var(--r3d-width, 100%); height: var(--r3d-height, auto); z-index: 4; }
#rose3d-viewer-container.rose3d-slider.rose3d-ready .rose3d-viewer { flex: 1; min-height: 0; height: auto !important; }
/* apparition : fondu + léger zoom arrière du cadre, barre d'outils qui remonte, pendant que la pièce se pose (playIntro) */
@keyframes rose3d-enter { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes rose3d-enter-tools { 0% { opacity: 0; transform: translate(-50%, 14px); } 100% { opacity: 1; transform: translate(-50%, 0); } }
.rose3d-viewer-wrapper.rose3d-enter { animation: rose3d-enter var(--r3d-photo-ms, .6s) ease both; }
.rose3d-viewer-wrapper.rose3d-enter .rose3d-toolbar { animation: rose3d-enter-tools .6s var(--r3d-photo-ms, .6s) cubic-bezier(.22,.8,.3,1) both; }
.rose3d-viewer-wrapper.rose3d-enter .rose3d-footer { animation: rose3d-enter .5s var(--r3d-photo-ms, .6s) ease both; }

/* ------------------------------------------------------------------ */
/* Scène                                                                */
/* ------------------------------------------------------------------ */
.rose3d-viewer-wrapper { position: relative; width: 100%; background: #fff; border: 1px solid var(--r3d-line); border-radius: var(--r3d-radius); overflow: hidden; box-sizing: border-box; }
.rose3d-viewer-wrapper.rose3d-inline { margin: 20px 0; }
.rose3d-viewer {
    position: relative; width: 100%; height: 520px; touch-action: none; overflow: hidden;
    background: var(--r3d-bg, #fff); /* couleur réglable (ROSE3D_BG_COLOR), blanc par défaut : intégré à la page */
}
.rose3d-viewer-wrapper { border-color: transparent; } /* aucun cadre, même au survol : intégré à la page */
.rose3d-canvas { display: block; width: 100% !important; height: 100% !important; outline: none; position: relative; z-index: 1; }
.rose3d-viewer.rose3d-measuring .rose3d-canvas { cursor: crosshair; }

/* calques HTML */
.rose3d-overlay { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.rose3d-hover {
    position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none;
    width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--r3d-navy-2);
    box-shadow: 0 0 0 3px rgba(255,255,255,.85), 0 0 0 4px rgba(13,67,91,.25);
    transition: width .12s, height .12s, border-color .12s;
}
.rose3d-hover::before { content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: var(--r3d-navy-2); }
.rose3d-hover.is-snapped { width: 24px; height: 24px; border-color: var(--r3d-yellow-dark); box-shadow: 0 0 0 3px rgba(255,255,255,.9), 0 0 0 5px rgba(255,216,20,.45); }
.rose3d-hover.is-snapped::before { background: var(--r3d-yellow-dark); }
.rose3d-hover[hidden] { display: none; }

/* étiquettes de cotes */
.rose3d-dim-label {
    position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 9px 4px 4px; border-radius: 999px; white-space: nowrap;
    background: var(--r3d-navy); color: #fff; font: 600 13px/1 var(--r3d-font-cond); letter-spacing: .02em;
    box-shadow: 0 4px 14px rgba(9,49,67,.28), 0 0 0 2px rgba(255,255,255,.9);
    transition: box-shadow .15s, transform .05s;
}
.rose3d-dim-label.is-temp { background: rgba(13,67,91,.85); }
.rose3d-dim-label.is-dims { background: var(--r3d-navy-2); }
.rose3d-dim-label.is-active { box-shadow: 0 6px 18px rgba(9,49,67,.4), 0 0 0 2px var(--r3d-yellow); }
.rose3d-dim-index {
    display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px;
    border-radius: 999px; background: var(--r3d-yellow); color: var(--r3d-navy); font: 700 11px/1 var(--r3d-font-cond);
}
.rose3d-dim-value { font-variant-numeric: tabular-nums; font-size: 14px; }

/* chargement */
.rose3d-loader { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: rgba(255,255,255,.72); backdrop-filter: blur(2px); color: var(--r3d-navy); transition: opacity .25s; }
.rose3d-loader.is-hidden { opacity: 0; pointer-events: none; }
.rose3d-ring { width: 60px; height: 60px; transform: rotate(-90deg); }
.rose3d-ring-bg { fill: none; stroke: rgba(9,49,67,.12); stroke-width: 5; }
.rose3d-ring-fg { fill: none; stroke: var(--r3d-yellow); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 163.4; stroke-dashoffset: 163.4; transition: stroke-dashoffset .2s; animation: rose3d-idle 1.4s ease-in-out infinite; }
@keyframes rose3d-idle { 0% { opacity: .55 } 50% { opacity: 1 } 100% { opacity: .55 } }
.rose3d-loader-text { margin: 4px 0 0; font: 600 13px/1.2 var(--r3d-font-cond); text-transform: uppercase; letter-spacing: .08em; }
.rose3d-loader-pct { margin: 0; font: 400 12px/1 var(--r3d-font); color: var(--r3d-muted); font-variant-numeric: tabular-nums; }
.rose3d-error { padding: 30px 20px; text-align: center; color: var(--r3d-navy); }
.rose3d-error p { margin: 8px 0 0; font-size: 14px; }
.rose3d-progress-track { position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 7; pointer-events: none; }
.rose3d-progress { height: 100%; width: 0; background: var(--r3d-yellow); transition: width .2s; box-shadow: 0 0 8px rgba(255,216,20,.8); }
.rose3d-progress.is-done { transition: width .2s, opacity .4s .1s; opacity: 0; }

/* en-tête */
.rose3d-topbar { position: absolute; top: 12px; left: 12px; z-index: 5; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; pointer-events: none; max-width: calc(100% - 230px); }
.rose3d-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--r3d-radius); background: var(--r3d-navy); color: #fff; font: 700 11px/1 var(--r3d-font-cond); text-transform: uppercase; letter-spacing: .1em; }
.rose3d-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--r3d-yellow); box-shadow: 0 0 0 2px rgba(255,216,20,.3); }
.rose3d-badge.is-hd::before { animation: rose3d-pulse 1.8s ease-out 2; }
@keyframes rose3d-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,216,20,.6) } 100% { box-shadow: 0 0 0 10px rgba(255,216,20,0) } }
.rose3d-badge[hidden] { display: none; }
.rose3d-sheet { display: flex; flex-direction: column; gap: 2px; padding: 6px 10px; border-radius: var(--r3d-radius); background: rgba(255,255,255,.94); border: 1px solid var(--r3d-line); border-left: 3px solid var(--r3d-yellow); box-shadow: 0 4px 14px rgba(9,49,67,.1); backdrop-filter: blur(6px); animation: rose3d-in .2s ease-out; }
.rose3d-sheet[hidden], .rose3d-sheet-row[hidden] { display: none; }
@keyframes rose3d-in { from { opacity: 0; transform: translateY(-4px) } to { opacity: 1; transform: none } }
.rose3d-sheet-row { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.rose3d-sheet-k { font: 700 10px/1.4 var(--r3d-font-cond); text-transform: uppercase; letter-spacing: .1em; color: var(--r3d-muted); min-width: 78px; }
.rose3d-sheet-v { font: 600 13px/1.4 var(--r3d-font-cond); color: var(--r3d-navy); font-variant-numeric: tabular-nums; }
.rose3d-sheet-w { font: 500 11px/1.4 var(--r3d-font); color: var(--r3d-muted); }

/* liste des mesures */
.rose3d-list { position: absolute; top: 12px; right: 12px; z-index: 5; width: 190px; max-height: calc(100% - 90px); overflow: auto; background: rgba(255,255,255,.94); border: 1px solid var(--r3d-line); border-radius: var(--r3d-radius); box-shadow: 0 6px 20px rgba(9,49,67,.12); backdrop-filter: blur(6px); }
.rose3d-list[hidden] { display: none; }
.rose3d-list-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; border-bottom: 1px solid var(--r3d-line); font: 700 11px/1 var(--r3d-font-cond); text-transform: uppercase; letter-spacing: .08em; color: var(--r3d-navy); }
.rose3d-list-count { display: inline-block; min-width: 16px; padding: 2px 5px; margin-left: 4px; border-radius: 999px; background: var(--r3d-yellow); color: var(--r3d-navy); text-align: center; }
.rose3d-list-clear { border: 0; background: none; color: var(--r3d-muted); font: 500 11px/1 var(--r3d-font); cursor: pointer; text-decoration: underline; }
.rose3d-list-clear:hover { color: var(--r3d-navy); }
.rose3d-list-row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; font: 500 13px/1 var(--r3d-font); color: var(--r3d-ink); border-bottom: 1px solid #f0f2f4; cursor: default; }
.rose3d-list-row:last-child { border-bottom: 0; }
.rose3d-list-row:hover { background: #fffbe0; }
.rose3d-list-value { flex: 1; font-variant-numeric: tabular-nums; }
.rose3d-list-del { border: 0; background: none; color: var(--r3d-muted); font-size: 16px; line-height: 1; cursor: pointer; padding: 0 2px; }
.rose3d-list-del:hover { color: #c62828; }

/* consigne de mesure */
.rose3d-measure-info { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); z-index: 5; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; background: var(--r3d-navy); color: #fff; font: 500 13px/1 var(--r3d-font); box-shadow: 0 6px 18px rgba(9,49,67,.3); white-space: nowrap; max-width: calc(100% - 24px); }
.rose3d-measure-info[hidden] { display: none; }
.rose3d-measure-info svg { width: 16px; height: 16px; color: var(--r3d-yellow); flex: none; }
.rose3d-measure-info kbd { font: 600 10px/1 var(--r3d-font); padding: 3px 5px; border-radius: 3px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.25); }

/* barre d'outils */
.rose3d-toolbar { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 5; display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 999px; background: rgba(9,49,67,.94); box-shadow: 0 8px 24px rgba(9,49,67,.3), inset 0 0 0 1px rgba(255,255,255,.06); backdrop-filter: blur(8px); }
.rose3d-tool { position: relative; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: #fff; font: 600 12px/1 var(--r3d-font-cond); text-transform: uppercase; letter-spacing: .06em; cursor: pointer; transition: background .15s, color .15s, transform .1s; }
.rose3d-tool svg { width: 18px; height: 18px; flex: none; }
.rose3d-tool:hover { background: rgba(255,255,255,.1); }
.rose3d-tool:active { transform: scale(.97); }
.rose3d-tool:focus-visible { outline: 2px solid var(--r3d-yellow); outline-offset: 2px; }
.rose3d-tool.is-active { background: var(--r3d-yellow); color: var(--r3d-navy); }
.rose3d-tool-sep { width: 1px; height: 22px; margin: 0 4px; background: rgba(255,255,255,.18); }
.rose3d-tool[data-tip]::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%) translateY(4px); padding: 6px 9px; border-radius: var(--r3d-radius); background: #fff; color: var(--r3d-navy); font: 500 11px/1.2 var(--r3d-font); text-transform: none; letter-spacing: 0; white-space: nowrap; box-shadow: 0 4px 14px rgba(9,49,67,.2); opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; }
.rose3d-tool:hover::after, .rose3d-tool:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.rose3d-ic-fsx { display: none; }
.rose3d-viewer-wrapper:fullscreen .rose3d-ic-fs { display: none; }
.rose3d-viewer-wrapper:fullscreen .rose3d-ic-fsx { display: inline; }

/* pied */
.rose3d-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 7px 12px; border-top: 1px solid var(--r3d-line); background: #fff; }
.rose3d-hint { font: 400 11.5px/1.3 var(--r3d-font); color: var(--r3d-muted); }
.rose3d-disclaimer { flex-basis: 100%; font: 400 10.5px/1.3 var(--r3d-font); color: var(--r3d-muted); opacity: .85; }
#rose3d-viewer-container.rose3d-in-slide .rose3d-disclaimer { display: block; }
.rose3d-login-notice { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--r3d-radius); background: #fff8d6; border: 1px solid #f1dc6b; color: #5d4a00; font: 500 12px/1.2 var(--r3d-font); }
.rose3d-login-notice[hidden] { display: none; }
.rose3d-login-notice a { padding: 4px 9px; border-radius: var(--r3d-radius); background: var(--r3d-navy); color: #fff !important; font: 700 11px/1 var(--r3d-font-cond); text-transform: uppercase; letter-spacing: .06em; text-decoration: none; }
.rose3d-login-notice a:hover { background: var(--r3d-navy-2); }

/* vignette "3D" dans le slider */
.rose3d-thumb { cursor: pointer; }
.rose3d-thumb-inner { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 100%; aspect-ratio: 1 / 1; min-height: 64px; box-sizing: border-box; border: 1px solid var(--r3d-line); border-radius: var(--r3d-radius); background: #fff; color: var(--r3d-navy); overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.rose3d-thumb-cube { width: 46px; height: 46px; color: var(--r3d-navy); opacity: .9; }
.rose3d-thumb-orbit { color: var(--r3d-yellow-dark); }
.rose3d-thumb-label { font: 700 12px/1 var(--r3d-font-cond); letter-spacing: .18em; color: var(--r3d-navy); opacity: .85; }
.rose3d-thumb:hover .rose3d-thumb-inner, .rose3d-thumb:focus-visible .rose3d-thumb-inner { border-color: var(--r3d-navy); }
/* vignette large (mobile : le slider de vignettes est le carrousel principal) : icône plus grande + libellé */
.rose3d-thumb-large .rose3d-thumb-cube { width: 96px; height: 96px; opacity: .9; }
.rose3d-thumb-large .rose3d-thumb-inner::after { content: attr(data-hint); margin-top: 10px; font: 500 12px/1.3 var(--r3d-font); color: var(--r3d-muted); }
.rose3d-thumb-large .rose3d-thumb-label { font-size: 15px; letter-spacing: .22em; margin-top: 6px; }
.rose3d-thumb-large .rose3d-thumb-label::after { content: " · 360°"; opacity: .7; }
/* le viewer monté dans la slide 3D : remplit la slide, l'icône de la vignette reste pour la hauteur mais invisible */
.rose3d-thumb-host { position: relative; }
.rose3d-thumb-host .rose3d-thumb-inner { visibility: hidden; }
#rose3d-viewer-container.rose3d-in-slide.rose3d-ready { position: absolute; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; display: flex; flex-direction: column; z-index: 2; }
#rose3d-viewer-container.rose3d-in-slide .rose3d-footer { display: block; padding: 3px 8px; border: 0; background: rgba(255,255,255,.7); position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; text-align: center; }
#rose3d-viewer-container.rose3d-in-slide .rose3d-hint, #rose3d-viewer-container.rose3d-in-slide .rose3d-login-notice { display: none; }
#rose3d-viewer-container.rose3d-in-slide .rose3d-toolbar { bottom: 26px; }
.rose3d-thumb.selected .rose3d-thumb-inner { border-color: var(--r3d-navy); box-shadow: inset 0 0 0 1px var(--r3d-navy); }

/* plein écran (natif : :fullscreen ; repli iOS : .rose3d-fs-fallback en position fixe) */
/* #id dans le sélecteur : doit l'emporter sur #rose3d-viewer-container.rose3d-inline { display:block } */
#rose3d-viewer-container.rose3d-viewer-wrapper:fullscreen, #rose3d-viewer-container.rose3d-viewer-wrapper.rose3d-fs-fallback, .rose3d-viewer-wrapper:fullscreen, .rose3d-viewer-wrapper.rose3d-fs-fallback { top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; margin: 0; border: 0 !important; border-radius: 0; display: flex !important; flex-direction: column; background: var(--r3d-bg, #fff); }
.rose3d-viewer-wrapper.rose3d-fs-fallback { position: fixed; inset: 0; z-index: 2147483000; height: 100dvh; }
.rose3d-viewer-wrapper:fullscreen .rose3d-viewer, .rose3d-viewer-wrapper.rose3d-fs-fallback .rose3d-viewer { flex: 1; height: auto !important; min-height: 0; }
.rose3d-viewer-wrapper:fullscreen .rose3d-toolbar, .rose3d-viewer-wrapper.rose3d-fs-fallback .rose3d-toolbar { bottom: max(18px, env(safe-area-inset-bottom)); z-index: 7; }
.rose3d-viewer-wrapper:fullscreen .rose3d-topbar, .rose3d-viewer-wrapper.rose3d-fs-fallback .rose3d-topbar { top: 70px; left: 18px; }
.rose3d-viewer-wrapper:fullscreen .rose3d-list, .rose3d-viewer-wrapper.rose3d-fs-fallback .rose3d-list { top: 70px; right: 18px; }
.rose3d-viewer-wrapper:fullscreen .rose3d-footer, .rose3d-viewer-wrapper.rose3d-fs-fallback .rose3d-footer { flex: none; }
body.rose3d-fs-lock { overflow: hidden; }
.rose3d-fsbar { position: absolute; top: 0; left: 0; right: 0; z-index: 8; display: flex; align-items: center; gap: 16px; height: 56px; padding: 0 14px 0 18px; background: #fff; border-bottom: 1px solid var(--r3d-line); box-shadow: 0 2px 10px rgba(9,49,67,.06); box-sizing: border-box; }
.rose3d-fsbar[hidden] { display: none; }
.rose3d-fsbar-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--r3d-navy); font: 800 16px/1 var(--r3d-font-cond); letter-spacing: .04em; text-transform: uppercase; flex: none; }
.rose3d-fsbar-brand img { height: 34px; width: auto; max-width: 180px; display: block; }
.rose3d-fsbar-brand img[hidden] { display: none; }
.rose3d-fsbar-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--r3d-ink); font: 500 14px/1.2 var(--r3d-font); }
.rose3d-fsbar-title::before { content: "·"; margin-right: 10px; color: var(--r3d-muted); }
.rose3d-fsbar-back { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px 0 12px; border: 0; border-radius: var(--r3d-radius); background: var(--r3d-yellow); color: var(--r3d-navy); font: 700 12px/1 var(--r3d-font-cond); text-transform: uppercase; letter-spacing: .1em; cursor: pointer; box-shadow: 0 2px 8px rgba(9,49,67,.15); }
.rose3d-fsbar-back:hover { background: var(--r3d-yellow-dark); }
.rose3d-fsbar-back svg { width: 18px; height: 18px; }

@media (max-width: 768px) {
    .rose3d-viewer { height: 380px; }
    .rose3d-tool { height: 42px; }
    .rose3d-measure-info kbd { display: none; }
    .rose3d-dim-label { font-size: 12px; }
    .rose3d-tool span { display: none; }
    .rose3d-tool { padding: 0 11px; }
    .rose3d-tool[data-tip]::after { display: none; }
    .rose3d-list { width: 150px; }
    .rose3d-hint { display: none; }
    .rose3d-fsbar { height: 50px; padding: 0 10px 0 12px; gap: 10px; }
    .rose3d-fsbar-title { display: none; }
    .rose3d-fsbar-brand img { height: 28px; }
    .rose3d-viewer-wrapper:fullscreen .rose3d-topbar, .rose3d-viewer-wrapper.rose3d-fs-fallback .rose3d-topbar { top: 60px; left: 10px; }
}
@media (prefers-reduced-motion: reduce) {
    .rose3d-badge.is-hd::before, .rose3d-ring-fg, .rose3d-viewer-wrapper.rose3d-enter, .rose3d-viewer-wrapper.rose3d-enter .rose3d-toolbar, .rose3d-viewer-wrapper.rose3d-enter .rose3d-footer { animation: none; }
}