/* ===== widget Identité : Lenny monte NOTRE charte (L&L website). Il colle le logo LL, pose nos stickers,
   prélève à la pipette les couleurs sur le logo et les stickers, choisit Luckiest Guy dans une liste et
   « website » s'écrit avec. Carte .wz, unités cqw (1cqw ≈ 3,4 px dans la vignette). ===== */
.idn{position:absolute;inset:0;container-type:inline-size;font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;color:#221726}
.idn *{box-sizing:border-box}.idn p,.idn h6,.idn ul{margin:0;padding:0;letter-spacing:normal}
.idn-fen{position:absolute;left:5cqw;top:5cqw;width:90cqw;height:101cqw;border-radius:2.4cqw;overflow:hidden;background:#FBF8F4;border:.25cqw solid #221726;box-shadow:0 3cqw 6cqw -2cqw rgba(34,23,38,.45)}
.idn-barre{position:relative;height:9cqw;display:flex;align-items:center;gap:1.6cqw;padding:0 3cqw;background:#fff;border-bottom:.15cqw solid #EDE6DF;font:700 3.4cqw/1 Inter,system-ui}
.idn-pts{display:flex;gap:.9cqw;margin-right:.6cqw}.idn-pts i{width:1.8cqw;height:1.8cqw;border-radius:50%;background:#E6DDE9}
.idn-barre em{margin-left:auto;font:500 2.7cqw/1 Inter,system-ui;font-style:normal;color:#8C8497;transition:opacity .3s}
.idn-ok{position:absolute;right:2.4cqw;top:50%;margin-top:-2.3cqw;padding:1.1cqw 1.9cqw;border-radius:99px;background:#E4F6EC;color:#2E9E6A;border:.2cqw solid #2E9E6A;font:700 2.5cqw/1 Inter,system-ui;opacity:0;transform:scale(.8);transition:opacity .3s,transform .45s cubic-bezier(.34,1.56,.64,1)}
.idn.valide .idn-ok{opacity:1;transform:none}.idn.valide .idn-barre em{opacity:0}
.idn-grille{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:36cqw 14cqw 1fr;gap:2.6cqw;padding:3.2cqw;height:calc(100% - 9cqw);transition:opacity .6s}
.idn.efface .idn-grille{opacity:0}
/* cases : pointillés vides, remplies quand leur tour arrive */
.idn-t{position:relative;border-radius:2cqw;border:.2cqw dashed #CFC6D8;transition:background .5s,border-color .5s}
.idn-t>*{opacity:0;transition:opacity .45s}
.idn-t.on{border-style:solid;border-color:#E6DDD2}.idn-t.on>*{opacity:1}
.idn .idn-t h6{position:absolute;left:2.2cqw;top:2cqw;z-index:1;font:700 2.5cqw/1 Inter,system-ui;text-transform:uppercase;letter-spacing:.05em;color:#8C8497}
/* nos stickers, posés un par un */
.idn-stick{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(2,minmax(0,1fr));gap:.6cqw;padding:5.4cqw 2cqw 1.4cqw}
.idn-stick.on{background:#F1ECFA;border-color:#E3DAF5}
.idn-stick>h6{opacity:1 !important}
.idn-stick img{display:block;width:100%;height:100%;min-height:0;object-fit:contain;opacity:0;transform:scale(.4) rotate(var(--r,0deg));transition:opacity .25s,transform .5s cubic-bezier(.34,1.56,.64,1)}
.idn-stick img:nth-of-type(1){--r:-6deg}.idn-stick img:nth-of-type(2){--r:5deg}.idn-stick img:nth-of-type(3){--r:4deg}.idn-stick img:nth-of-type(4){--r:-5deg}
.idn-stick img:not(.pose){opacity:0 !important}
.idn-stick img.pose{opacity:1;transform:rotate(var(--r))}
/* logo : le LL se colle comme un autocollant, « website » s'écrit dessous */
.idn-logo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2cqw;padding-top:4cqw}
.idn-logo.on{background:#F1ECFA;border-color:#E3DAF5}
.idn-logo>h6{opacity:1 !important}
.idn .idn-ll{display:block;width:24cqw;height:auto;opacity:0;transform:scale(1.6) rotate(-14deg);filter:drop-shadow(0 1.4cqw 1.6cqw rgba(34,23,38,.35));transition:opacity .2s,transform .55s cubic-bezier(.34,1.56,.64,1),filter .55s}
.idn.colle .idn-ll{opacity:1;transform:rotate(-3deg);filter:drop-shadow(0 .5cqw .6cqw rgba(34,23,38,.25))}
.idn .idn-nom{min-height:6cqw;font:400 6cqw/1 'Luckiest Guy','Arial Black',sans-serif;color:#221726;letter-spacing:.02em}
/* palette */
.idn-pal{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:2cqw}
.idn-pal span{display:flex;flex-direction:column;gap:1.2cqw}
.idn-pal i{display:block;height:8cqw;border-radius:1.6cqw;background:transparent;border:.2cqw dashed #CFC6D8;transform:scale(.92);transition:background .25s,transform .5s cubic-bezier(.34,1.56,.64,1)}
.idn-pal span.on i{background:var(--c);border:.2cqw solid rgba(34,23,38,.12);transform:none}
.idn-pal em{min-height:2.6cqw;font:600 2.6cqw/1 Inter,system-ui;font-style:normal;color:#6B5E72;text-align:center}
/* typo : l'aperçu à gauche, la liste de polices à droite */
.idn-typo{grid-column:1/-1;display:flex;align-items:flex-end;gap:4cqw;padding:2cqw 2.4cqw 2.4cqw;min-height:0;overflow:hidden}
.idn-typo.on{background:#F1ECFA;border-color:#E3DAF5}
.idn-aa-bloc{flex:none;width:32cqw;display:flex;flex-direction:column;gap:1.2cqw}
.idn .idn-aa{font:700 12cqw/.9 Montserrat,sans-serif;color:#221726;transition:opacity .12s}
.idn-aa.flip{opacity:.2}
.idn .idn-polices{flex:0 0 42cqw;list-style:none;display:flex;flex-direction:column;gap:.4cqw;margin-left:auto}
.idn-polices li{position:relative;padding:.8cqw 2cqw;border-radius:1.2cqw;font-size:3.1cqw;line-height:1.05;color:#1A1410;border:.2cqw solid transparent;transition:background .2s,border-color .2s}
.idn-polices li.survol{background:#fff;border-color:#E6DDD2}
.idn-polices li.choisi{background:#fff;border-color:#6E58BE}
.idn-polices li i{position:absolute;right:2cqw;top:50%;margin-top:-1.7cqw;font:700 2.8cqw/1 Inter,system-ui;font-style:normal;color:#6E58BE;opacity:0;transition:opacity .25s}
.idn-polices li.choisi i{opacity:1}
/* curseur de Lenny, loupe de la pipette, goutte qui part vers la palette */
.idn-cur{position:absolute;left:0;top:0;width:3.6cqw;z-index:6;opacity:0;transform:translate(var(--x,80cqw),var(--y,100cqw));transition:transform .7s cubic-bezier(.65,0,.35,1),opacity .3s;--c:#8FD9FF}
.idn.lenny .idn-cur{opacity:1}
.idn-cur svg{display:block;width:100%;height:auto;filter:drop-shadow(0 .25cqw .5cqw rgba(0,0,0,.35));transition:transform .1s}
.idn-cur .cf{fill:var(--c);stroke:rgba(20,20,20,.55);stroke-width:.9px;stroke-linejoin:round}.idn-cur .ch{fill:none;stroke:rgba(255,255,255,.55);stroke-width:1.1px;stroke-linecap:round}
.idn-cur b{position:absolute;left:70%;top:95%;padding:.7cqw 1.2cqw;border-radius:.8cqw;white-space:nowrap;font:700 2.2cqw/1 Inter,system-ui;color:#141414;background:var(--c);box-shadow:0 .25cqw .7cqw rgba(0,0,0,.3)}
.idn-cur.clic svg{transform:scale(.8)}
.idn-loupe{position:absolute;left:0;top:0;z-index:5;display:flex;align-items:center;gap:1cqw;padding:.8cqw 1.6cqw .8cqw .8cqw;border-radius:99px;background:#fff;border:.2cqw solid #221726;box-shadow:0 1cqw 2cqw -.6cqw rgba(34,23,38,.45);opacity:0;transform:translate(var(--x),var(--y)) scale(.7);transform-origin:0 50%;transition:opacity .2s,transform .3s cubic-bezier(.34,1.56,.64,1)}
.idn-loupe.on{opacity:1;transform:translate(var(--x),var(--y))}
.idn-loupe i{width:4.4cqw;height:4.4cqw;border-radius:50%;background:var(--c);border:.2cqw solid rgba(34,23,38,.2)}
.idn-loupe b{font:700 2.6cqw/1 Inter,system-ui;color:#221726}
.idn-goutte{position:absolute;left:0;top:0;z-index:5;width:3.4cqw;height:3.4cqw;margin:-1.7cqw 0 0 -1.7cqw;border-radius:50%;background:var(--c);border:.2cqw solid #fff;box-shadow:0 .6cqw 1.2cqw rgba(34,23,38,.35);opacity:0;transform:translate(var(--x),var(--y))}
.idn-goutte.vole{opacity:1;transition:transform .6s cubic-bezier(.65,0,.35,1)}
.idn .idn-texte{font:500 2.6cqw/1.2 Figtree,Inter,system-ui;color:#6B5E72;opacity:0;transition:opacity .4s}
.idn.typo-ok .idn-texte{opacity:1}