/* La formule du Labo des idées : le problème + ta solution = ton idée-mère.
   Signature visuelle reconnaissable (site, vidéos, visuels). */
.formula{--d:150px;display:flex;align-items:center;justify-content:center;gap:12px;margin:26px auto 6px}
.fx{width:var(--d);height:var(--d);border-radius:50%;display:grid;place-content:center;text-align:center;padding:14px;position:relative;overflow:hidden;flex:none}
.fx small{display:block;font-family:'Open Sans',sans-serif;font-size:calc(var(--d) * .062);font-weight:700;letter-spacing:.18em;text-transform:uppercase;margin-bottom:6px;position:relative}
.fx b{display:block;font-family:'Playfair Display',serif;font-style:italic;font-weight:400;font-size:calc(var(--d) * .13);line-height:1.15;position:relative}
.fx.pb{background:#4F1922;color:#F7F6F2}
.fx.pb small{color:#E6C9AE}
.fx.so{background:#E6C9AE;color:#1A191A}
.fx.so small{color:#4F1922}
.fx.id{background:#1A191A;color:#F7F6F2;box-shadow:inset 0 0 0 2px #C9A27E}
.fx.id small{color:#C9A27E}
.fx.id::before{content:"";position:absolute;left:0;right:0;bottom:0;height:28%;background:linear-gradient(180deg,rgba(201,162,126,.55),rgba(201,162,126,.85));border-top:2px solid rgba(230,201,174,.9)}
.fx.id .rx{position:absolute;top:13%;left:0;right:0;font-family:'Playfair Display',serif;font-style:italic;font-size:calc(var(--d) * .11);color:#C9A27E}
.op{font-family:'Playfair Display',serif;font-style:italic;font-size:calc(var(--d) * .3);color:#4F1922;line-height:1;flex:none}
.formula.on-dark .op{color:#E6C9AE}
/* animation : chaque élément apparaît, puis l'idée « se remplit » */
.formula.anim > *{opacity:0;transform:scale(.85);animation:fxin .5s cubic-bezier(.2,.8,.2,1) forwards}
.formula.anim > :nth-child(2){animation-delay:.25s}
.formula.anim > :nth-child(3){animation-delay:.45s}
.formula.anim > :nth-child(4){animation-delay:.7s}
.formula.anim > :nth-child(5){animation-delay:.9s}
.formula.anim .fx.id::before{transform:translateY(100%);animation:fxfill 1s 1.2s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes fxin{to{opacity:1;transform:none}}
@keyframes fxfill{to{transform:none}}
@media (max-width:560px){.formula{--d:96px;gap:6px}.fx{padding:8px}.fx small{letter-spacing:.1em}}
@media (prefers-reduced-motion:reduce){.formula.anim > *,.formula.anim .fx.id::before{animation:none;opacity:1;transform:none}}