/* Geometric optical illusions: static figures, no artificial rotation. */
.optical{display:none}
@media(min-width:1200px){
 main>section{padding-left:190px;padding-right:190px}
 .optical{display:block;position:absolute;top:160px;width:150px;margin:0;padding:0;border:0;background:none;color:#dfc69e;text-align:center;font:400 .875rem/1.4 "EB Garamond",serif;z-index:2;filter:none;animation:none}
 .optical-g{left:20px}.optical-d{right:20px;top:330px}
 .optical svg{display:block;width:100%;height:auto;overflow:visible}
 button.optical{cursor:pointer;touch-action:manipulation}
 .opt-caption,.optical figcaption{display:block;margin-top:14px;font-size:.875rem}
 .opt-number{color:#c19a58;margin-right:5px;font-size:.75rem;font-family:Arial,sans-serif}
 .opt-hint{display:block;margin-top:7px;font:400 .75rem/1.4 Arial,sans-serif;color:#c2ad8d}
 button.optical:hover .opt-hint{color:#f3e6ca}
 .optical:focus-visible{outline:2px solid #e3bd78;outline-offset:8px}
 .optical .opt-context{transition:opacity .3s ease}
 .optical.is-revealed .opt-context{opacity:0}
 .optical .opt-row{transition:transform .5s ease}
 .optical.is-revealed .opt-row{transform:translateX(var(--shift))}
 /* Short sections keep their pair aligned with the section content. */
 .fin>.optical,.paliers>.optical,.partenaires>.optical{top:150px}
}
@media(min-width:1600px){.optical{width:170px}.optical-g{left:max(26px,calc((100% - 1550px)/2))}.optical-d{right:max(26px,calc((100% - 1550px)/2))}}
@media(prefers-reduced-motion:reduce){.optical *{transition:none!important}}