/* Site SecretarIA · les personnages des métiers : le professionnel pris par son travail, son téléphone qui sonne,
   Léa qui décroche à sa place, puis le soulagement. Dessins et articulation : recit-personnages.js.
   Utilisé par la page /pilotes (fin de chapitre du récit, dans .recit) et par l'accueil (cartes des métiers).
   Tout est préfixé sl- ; l'état vient de recit-personnages.js : data-etape (a, b, c) et classes sl-sonne, sl-apaise, sl-dit. */
.soulage{margin:0}
.soulage[data-i="0"]{--teinte:#FFC857}
.soulage[data-i="1"]{--teinte:#D9E021}
.soulage[data-i="2"]{--teinte:#3BE3A0}
.soulage[data-i="3"]{--teinte:#22D3FB}
.sl-haut{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 12px;font:500 .64rem/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--texte-2)}
.sl-lieu b{font-weight:500;color:var(--teinte,var(--cyan))}
.sl-charge{--charge:.86;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.sl-charge i{position:relative;width:48px;height:4px;border-radius:2px;background:rgba(255,255,255,.1);overflow:hidden}
.sl-charge i::after{content:"";position:absolute;inset:0 auto 0 0;width:calc(var(--charge) * 100%);border-radius:2px;
  background:hsl(calc(8deg + (1 - var(--charge)) * 150deg) 90% 62%);box-shadow:0 0 8px hsl(calc(8deg + (1 - var(--charge)) * 150deg) 90% 62% / .7)}
.sl-charge em{font-style:normal;min-width:4ch;text-align:right;color:var(--texte)}
.sl-cadre{position:relative;aspect-ratio:400/250;border-radius:16px;overflow:hidden;background:linear-gradient(170deg,#0B1736,#060B1C);border:1px solid rgba(86,128,230,.18)}
.sl-dessin{position:absolute;inset:0;width:100%;height:100%;display:block}
.sl-notif{position:absolute;top:5%;right:4%;width:48%;display:grid;padding:7px 9px;border-radius:12px;background:rgba(5,10,26,.9);border:1px solid rgba(34,211,251,.35);box-shadow:0 10px 30px -12px rgba(34,211,251,.55)}
.sl-notif > span{grid-area:1/1;display:flex;align-items:center;gap:8px;min-width:0;opacity:0;transform:translateY(5px);transition:opacity .3s,transform .3s}
.soulage[data-etape="a"] .sl-n-a,.soulage[data-etape="b"] .sl-n-b,.soulage[data-etape="c"] .sl-n-c{opacity:1;transform:none}
.sl-notif .ic{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font:700 .6rem/1 var(--f-titre);font-style:normal;color:#04121F}
.sl-notif .ic svg{width:11px;height:11px}
.sl-n-a .ic{background:var(--ok);animation:sl-pouls 1s ease-in-out infinite}
.sl-n-b .ic{background:var(--cyan)}
.sl-n-c .ic{background:var(--ok)}
.sl-notif span span{display:grid;gap:1px;min-width:0}
.sl-notif b{font:600 .74rem/1.2 var(--f-corps);color:var(--texte);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sl-notif small{font:500 .6rem/1.2 var(--f-mono);letter-spacing:.03em;color:var(--texte-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sl-bulle{position:absolute;left:3%;top:5%;max-width:28%;margin:0;padding:7px 10px;border-radius:12px 12px 12px 4px;background:#F4F7FF;color:#0B1430;font:600 .7rem/1.3 var(--f-corps);
  box-shadow:0 10px 24px -10px rgba(0,0,0,.6);opacity:0;transform:translateY(6px) scale(.9);transform-origin:20% 100%;transition:opacity .35s,transform .45s cubic-bezier(.3,1.5,.5,1)}
.soulage.sl-dit .sl-bulle{opacity:1;transform:none}
.sl-legende{display:grid;font-size:.88rem;line-height:1.45;color:var(--texte-2)}
.sl-legende > span{grid-area:1/1;transition:opacity .35s,transform .35s}
.sl-legende b{color:var(--ok);font-weight:600}
.sl-apres{opacity:0;transform:translateY(6px)}
.soulage.sl-apaise .sl-avant{opacity:0;transform:translateY(-6px)}
.soulage.sl-apaise .sl-apres{opacity:1;transform:none}
/* Les éléments animés du dessin */
.sl-ecran{fill:#141D3A;transition:fill .3s}
.soulage[data-etape="a"] .sl-ecran{fill:#0E2A26}
.soulage[data-etape="b"] .sl-ecran{fill:#0A2443}
.soulage[data-etape="c"] .sl-ecran{fill:#0C2B24}
.sl-e{opacity:0;transition:opacity .25s}
.soulage[data-etape="a"] .sl-e-a,.soulage[data-etape="b"] .sl-e-b,.soulage[data-etape="c"] .sl-e-c{opacity:1}
.sl-pouls{transform-box:fill-box;transform-origin:center;animation:sl-pouls 1s ease-in-out infinite}
@keyframes sl-pouls{50%{transform:scale(1.2)}}
.sl-ondelette rect{transform-box:fill-box;transform-origin:center;animation:sl-eq .42s ease-in-out infinite alternate}
.sl-ondelette rect:nth-child(2){animation-delay:.12s}
.sl-ondelette rect:nth-child(3){animation-delay:.24s}
.sl-ondelette rect:nth-child(4){animation-delay:.08s}
.sl-ondelette rect:nth-child(5){animation-delay:.2s}
@keyframes sl-eq{from{transform:scaleY(.35)}to{transform:scaleY(1)}}
.sl-ondes{opacity:0}
.soulage.sl-sonne .sl-ondes{animation:sl-ondes .9s ease-out infinite}
@keyframes sl-ondes{0%{opacity:.95}100%{opacity:0}}
.sl-vibre{transform-box:fill-box;transform-origin:50% 85%}
.soulage.sl-sonne .sl-vibre{animation:sl-vibre .3s linear infinite}
@keyframes sl-vibre{25%{transform:rotate(-3.5deg)}75%{transform:rotate(3.5deg)}}
.sl-yeux{transform-box:fill-box;transform-origin:center;animation:sl-cligne 4.8s infinite}
@keyframes sl-cligne{0%,93%,100%{transform:scaleY(1)}95.5%{transform:scaleY(.12)}}
.sl-souffle{transform-box:fill-box;transform-origin:50% 100%;animation:sl-souffle 3.8s ease-in-out infinite}
@keyframes sl-souffle{50%{transform:translateY(-1px)}}
.sl-vapeur{animation:sl-vapeur 2.4s ease-in-out infinite}
@keyframes sl-vapeur{50%{transform:translateY(-3px);opacity:.5}}
.sl-led-b{fill:#33405F;transition:fill .25s}
.sl-led-h{fill:#22D3FB;opacity:0;transition:opacity .25s}
.soulage:not([data-etape="c"]) .sl-led:not(.sl-prise) .sl-led-b{fill:#FFB347;animation:sl-led .5s steps(1) infinite}
@keyframes sl-led{50%{fill:#5A4630}}
.sl-led.sl-prise .sl-led-b{fill:#22D3FB}
.sl-led.sl-prise .sl-led-h{opacity:.32}