/* Ludique sobre — micro-interactions à l'essai, chacune activée par un jeton de html[data-juice]. */
html[data-juice] .clarte-case{transition:border-color 240ms var(--ease-ui),background-color 240ms var(--ease-ui),transform 90ms var(--ease-ui)}
/* 1. Voile de couleur parti depuis le liseré */
html[data-juice~="edge"] .clarte-case__edge::after{content:"";position:absolute;top:var(--stroke-hairline);bottom:var(--stroke-hairline);left:100%;width:180px;background:inherit;opacity:0;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,#000,transparent);mask-image:linear-gradient(90deg,#000,transparent);transition:opacity 240ms var(--ease-ui)}
html[data-juice~="edge"] .clarte-case:hover .clarte-case__edge::after{opacity:.08}
html[data-juice~="edge"] [data-theme="dark"] .clarte-case:hover .clarte-case__edge::after,html[data-theme="dark"][data-juice~="edge"] .clarte-case:hover .clarte-case__edge::after{opacity:.12}
/* 3. Portrait qui se révèle : le gris lavé gagne en contraste et la teinte parti se densifie */
html[data-juice~="portrait"] .clarte-case__photo{transition:filter 320ms var(--ease-focus)}
html[data-juice~="portrait"] .clarte-case__tint{transition:filter 320ms var(--ease-focus)}
html[data-juice~="portrait"] .clarte-case:hover .clarte-case__photo{filter:grayscale(1) contrast(1.12) brightness(1.04)}
html[data-juice~="portrait"] .clarte-case:hover .clarte-case__tint{filter:saturate(1.25)}
html[data-juice~="portrait"][data-portrait="tile"] .clarte-case:hover .clarte-case__photo,html[data-juice~="portrait"][data-portrait="mono"] .clarte-case:hover .clarte-case__photo{filter:grayscale(1) contrast(1.2)}
/* 4. Appui */
html[data-juice~="press"] .clarte-case:active{transform:translateY(1px);border-color:var(--border-strong)}
/* 5. Apparition au défilement — état « out » posé par DatabaseScreen, « in » transitionne vers le repos puis s'efface */
.results__grid[data-reveal]>[data-rv]{transition:opacity 620ms var(--ease-focus,cubic-bezier(.2,.7,.2,1)) var(--rv-d,0ms),filter 900ms cubic-bezier(.2,.7,.2,1) var(--rv-d,0ms),transform 900ms cubic-bezier(.2,.7,.2,1) var(--rv-d,0ms),clip-path 900ms cubic-bezier(.65,0,.25,1) var(--rv-d,0ms)}
.results__grid[data-reveal]>[data-rv="out"]{opacity:0;transition:none}
.results__grid[data-reveal="mise au point"]>[data-rv="out"]{filter:blur(10px);transform:scale(.985)}
.results__grid[data-reveal="montée"]>[data-rv="out"]{transform:translateY(28px)}
/* tracé : le filet haut et le liseré gauche se tirent depuis le coin, puis le cadre et le contenu apparaissent */
.results__grid[data-reveal="tracé"]>[data-rv]{transition:border-color 420ms ease calc(var(--rv-d,0ms) + 480ms),background-color 420ms ease calc(var(--rv-d,0ms) + 380ms)}
.results__grid[data-reveal="tracé"]>[data-rv]::before,.results__grid[data-reveal="tracé"]>[data-rv]::after{content:"";position:absolute;top:calc(-1 * var(--stroke-hairline));left:calc(-1 * var(--stroke-hairline));background:var(--border-hairline);pointer-events:none;z-index:2;transition:transform 700ms cubic-bezier(.65,0,.25,1) var(--rv-d,0ms)}
.results__grid[data-reveal="tracé"]>[data-rv]::before{right:calc(-1 * var(--stroke-hairline));height:var(--stroke-hairline);transform-origin:left center}
.results__grid[data-reveal="tracé"]>[data-rv]::after{bottom:calc(-1 * var(--stroke-hairline));width:var(--stroke-hairline);transform-origin:center top}
.results__grid[data-reveal="tracé"]>[data-rv]>*{transition:opacity 520ms ease calc(var(--rv-d,0ms) + 320ms)}
.results__grid[data-reveal="tracé"]>[data-rv]>.clarte-case__edge{transform-origin:center top;transition:transform 700ms cubic-bezier(.65,0,.25,1) calc(var(--rv-d,0ms) + 60ms)}
.results__grid[data-reveal="tracé"]>[data-rv="out"]{opacity:1;border-color:transparent;background-color:transparent}
.results__grid[data-reveal="tracé"]>[data-rv="out"]::before{transform:scaleX(0);transition:none}
.results__grid[data-reveal="tracé"]>[data-rv="out"]::after{transform:scaleY(0);transition:none}
.results__grid[data-reveal="tracé"]>[data-rv="out"]>*{opacity:0;transition:none}
.results__grid[data-reveal="tracé"]>[data-rv="out"]>.clarte-case__edge{opacity:1;transform:scaleY(0)}
@media (prefers-reduced-motion:reduce){.results__grid[data-reveal]>[data-rv]{opacity:1!important;filter:none!important;transform:none!important;clip-path:none!important}.results__grid[data-reveal]>[data-rv]>*{opacity:1!important;transform:none!important}.results__grid[data-reveal]>[data-rv]::before,.results__grid[data-reveal]>[data-rv]::after{display:none}}
@media (prefers-reduced-motion:reduce){html[data-juice] *,html[data-juice] *::before,html[data-juice] *::after{transition-duration:1ms!important}}