/* Un volume d’affiche, six faces et des aplats. La perspective crée la
   profondeur; les caractères restent du vrai texte, jamais une texture. */
.dimension{position:relative;background:var(--ink);color:var(--paper);--dimension-size:min(clamp(260px,36vw,480px),48svh);--dimension-depth:calc(var(--dimension-size) / 2)}
.dimension-stage{position:relative;height:100svh;min-height:580px;overflow:clip;isolation:isolate}
.dimension-fill{display:none;position:absolute;inset:0;pointer-events:none}
.dimension[data-dimension-armed] .dimension-fill{display:block}
.dimension-fill-paper{background:var(--paper)}
.dimension-fill-orange{background:var(--orange);clip-path:circle(0px at 50% 50%)}
.dimension-fill-blue{background:var(--explore);clip-path:circle(0px at 50% 50%)}
.dimension-fill-ink{background:var(--ink);clip-path:circle(0px at 50% 50%)}
.dimension-intro{position:absolute;z-index:2;left:var(--gutter);right:var(--gutter);top:max(98px,9svh);pointer-events:none}
.dimension-intro h2{font:700 clamp(48px,5.7vw,92px)/.98 var(--display);letter-spacing:-.065em;margin:0;max-width:11ch;color:inherit}
.dimension-intro h2>span{display:block}
.dimension-intro h2 em{display:block;font:italic 400 1.24em/.96 var(--serif);letter-spacing:-.045em;color:inherit;white-space:nowrap}
.dimension[data-theme=paper],.dimension[data-theme=orange]{color:var(--ink)}
.dimension-world{position:absolute;z-index:1;left:calc(50% + 10vw);top:61%;width:var(--dimension-size);height:var(--dimension-size);transform:translate(-50%,-50%);perspective:1600px;perspective-origin:50% 42%}
.dimension-cube{position:relative;width:100%;height:100%;transform-style:preserve-3d;transform:rotateX(-10deg) rotateY(-150deg) rotateZ(3deg)}
.dimension-face{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:8%;backface-visibility:hidden;border:1px solid #11111177;box-shadow:inset 0 0 0 1px #ffffff22}
.dimension-face::after{content:'';position:absolute;left:8%;right:8%;bottom:9%;height:1px;background:currentColor;opacity:.45}
.dimension-face>small{position:absolute;left:8%;top:8%;font:600 calc(var(--dimension-size) * .034)/1 var(--body);letter-spacing:.02em}
.dimension-face>span{display:block;font:700 calc(var(--dimension-size) * .25)/1 var(--display);letter-spacing:-.075em;white-space:nowrap}
.dimension-face-front{background:var(--ink);color:var(--paper);transform:translateZ(var(--dimension-depth))}
.dimension-face-front>span{font:italic 400 calc(var(--dimension-size) * .37)/1 var(--serif);letter-spacing:-.035em}
.dimension-face-right{background:var(--orange);color:var(--ink);transform:rotateY(90deg) translateZ(var(--dimension-depth))}
.dimension-face-back{background:var(--explore);color:var(--ink);transform:rotateY(180deg) translateZ(var(--dimension-depth))}
.dimension-face-back>span{font:italic 400 calc(var(--dimension-size) * .5)/1 var(--serif);letter-spacing:-.045em}
.dimension-face-left{background:var(--paper);color:var(--ink);transform:rotateY(-90deg) translateZ(var(--dimension-depth))}
.dimension-face-left>span{font-size:calc(var(--dimension-size) * .22)}
.dimension-face-top{background:var(--paper);color:var(--ink);transform:rotateX(90deg) translateZ(var(--dimension-depth))}
.dimension-face-bottom{background:var(--orange);color:var(--ink);transform:rotateX(-90deg) translateZ(var(--dimension-depth))}
.dimension-face-top::before,.dimension-face-bottom::before{content:'';position:absolute;width:32%;aspect-ratio:1;border-radius:50%;background:var(--orange);left:34%;top:34%}
.dimension-face-bottom::before{background:var(--ink)}
.dimension-footer{position:absolute;z-index:2;left:var(--gutter);right:var(--gutter);bottom:clamp(24px,4svh,48px);display:flex;align-items:end;justify-content:space-between;gap:24px;color:inherit}
.dimension-steps{display:flex;gap:24px;list-style:none;margin:0;padding:0}
.dimension-steps li{display:flex;align-items:baseline;gap:12px;font:600 17px/1.1 var(--body);letter-spacing:-.02em}
.dimension-steps li>span:first-child{font:500 11px/1 var(--body);letter-spacing:.04em}
.dimension[data-dimension-armed] .dimension-steps{position:relative;width:40%;height:60px;display:block}
.dimension[data-dimension-armed] .dimension-steps li{position:absolute;inset:0;align-items:center;font:700 clamp(28px,3.3vw,60px)/1 var(--display);letter-spacing:-.055em;opacity:0;pointer-events:none}
.dimension[data-dimension-armed][data-dimension-phase=idee] [data-dimension-step=idee],
.dimension[data-dimension-armed][data-dimension-phase=forme] [data-dimension-step=forme],
.dimension[data-dimension-armed][data-dimension-phase=vie] [data-dimension-step=vie]{opacity:1}
.dimension-readout{display:flex;align-items:center;gap:24px;font-size:12px}
.dimension-track{position:relative;width:110px;height:2px;background:currentColor}
.dimension-track>i{position:absolute;inset:0;background:var(--orange);transform:scaleX(0);transform-origin:left}
.dimension-readout a{display:inline-flex;align-items:center;gap:12px;min-height:44px;border-bottom:1px solid currentColor}
.dimension-readout a>span{font-size:22px;transition:transform .2s var(--ease-out)}
@media(hover:hover) and (pointer:fine){.dimension-readout a:hover>span{transform:translate(3px,3px)}}
.dimension-readout a:focus-visible{outline:2px solid currentColor;outline-offset:5px}
@media(max-width:760px){
 .dimension{--dimension-size:min(64vw,34svh)}
 .dimension-stage{min-height:560px}
 .dimension-intro{top:104px}
 .dimension-intro h2{font-size:clamp(38px,10.7vw,58px)}
 .dimension-world{left:50%;top:56%;perspective:1100px}
 .dimension-footer{align-items:start;gap:16px;flex-direction:column;bottom:24px}
 .dimension[data-dimension-armed] .dimension-steps{width:100%;height:40px}
 .dimension[data-dimension-armed] .dimension-steps li{font-size:32px}
 .dimension-readout{width:100%;justify-content:space-between;font-size:11px;gap:16px}
 .dimension-track{width:80px}
 .dimension-steps{gap:14px}
 .dimension-steps li{font-size:14px;gap:6px}
}
@media(min-width:761px) and (max-height:760px){
 .dimension{--dimension-size:42svh}
 .dimension-intro h2{font-size:clamp(40px,4.7vw,68px)}
 .dimension-intro{top:96px}
 .dimension-world{top:59%;left:calc(50% + 13vw)}
}
@media(max-width:760px) and (max-height:700px){
 .dimension{--dimension-size:min(60vw,29svh)}
 .dimension-world{top:56%}
 .dimension-intro h2{font-size:36px}
 .dimension-footer{bottom:16px;gap:8px}
 .dimension[data-dimension-armed] .dimension-steps li{font-size:28px}
}
@media(prefers-reduced-motion:reduce){.dimension-readout a>span{transition:none}}