/* Ravensfell : illustrations animées (la mission en six scènes, la loupe, l'avion de papier).
   Chargée par la page d'accueil seulement. Les dessins sont des SVG en ligne générés par
   src/illus.py ; ici, leurs couleurs de thème et leur mouvement. Les animations d'une scène ne
   tournent que lorsqu'elle est à l'écran (.is-on), et tout s'arrête hors de la vue (.is-off),
   en pause (.is-paused) ou en mouvement réduit. */

:root {
  --il-blob: #262c6b;
  --il-ground: rgba(38, 44, 107, .12);
  --il-desk: #cfd5f5;
  --il-desk-leg: #aab3e6;
  --il-card: #ffffff;
  --il-shadow: rgba(20, 26, 60, .12);
  --il-phone: #1b2050;
}
:root[data-theme="dark"] {
  --il-blob: #232a66;
  --il-ground: rgba(0, 0, 0, .35);
  --il-desk: #3a4180;
  --il-desk-leg: #2b3170;
  --il-card: #f3f5fc;
  --il-shadow: rgba(0, 0, 0, .35);
  --il-phone: #0d1130;
}

.il { display: block; width: 100%; height: auto; overflow: visible; }
.il text { font-family: var(--font); }
.il-blob { fill: var(--il-blob); }
.il-ground { fill: var(--il-ground); }
.il-desk { fill: var(--il-desk); }
.il-desk-leg { fill: var(--il-desk-leg); }
.il-card { fill: var(--il-card); }
.il-shadow-card { fill: var(--il-shadow); }
.il-phone { fill: var(--il-phone); }
.il-doc-title { font-size: 15px; font-weight: 650; fill: #1b1f2b; letter-spacing: -.01em; }
.il-stamp-tx { font-size: 11px; font-weight: 800; letter-spacing: .1em; fill: #1c7a39; }
.il-screen-tx { font: 600 11px/1 var(--mono); fill: #8e9ad6; }
.il-badge-tx { font-size: 15px; font-weight: 700; fill: #fff; }
.il-rep-title { font-size: 19px; font-weight: 700; fill: #fff; letter-spacing: -.01em; }
.il-rep-sub { font: 600 12px/1 var(--mono); fill: #51566a; }
.il-tag-tx { font: 650 11.5px/1 var(--mono); fill: #156b2d; }

/* Constats : la gravité est tirée au hasard à chaque boucle par story.js. */
.chip-tx { font-size: 12.5px; font-weight: 650; }
.chip[data-sev="crit"] .chip-bg { fill: #ffe1df; } .chip[data-sev="crit"] .chip-dot { fill: #ff3b30; } .chip[data-sev="crit"] .chip-tx { fill: #b3160d; }
.chip[data-sev="high"] .chip-bg { fill: #ffe9cc; } .chip[data-sev="high"] .chip-dot { fill: #ff9500; } .chip[data-sev="high"] .chip-tx { fill: #8f4200; }
.chip[data-sev="med"] .chip-bg { fill: #fff3bf; } .chip[data-sev="med"] .chip-dot { fill: #f5b800; } .chip[data-sev="med"] .chip-tx { fill: #6e5400; }
.chip[data-sev="low"] .chip-bg { fill: #dcefff; } .chip[data-sev="low"] .chip-dot { fill: #32a4f0; } .chip[data-sev="low"] .chip-tx { fill: #0057c2; }
.s5-bar[data-sev="crit"] { fill: #ff3b30; } .s5-bar[data-sev="high"] { fill: #ff9500; }
.s5-bar[data-sev="med"] { fill: #f5b800; } .s5-bar[data-sev="low"] { fill: #32a4f0; }

/* ------------------------------------------------------------------ le lecteur de la mission */
/* Le cadre reste plus bas qu'un écran de 800 px : largeur plafonnée, aligné sur le titre. */
.story { max-width: 1020px; margin: 48px 0 0; padding: clamp(14px, 2vw, 24px); border-radius: 40px; }
.story__stage { position: relative; border-radius: 28px; overflow: hidden; }
.story__foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 20px; align-items: start; padding: 18px clamp(4px, 1vw, 12px) 6px; }
.story__steps { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.story__steps li:nth-child(1) { --d: 6s; }
.story__steps li:nth-child(2) { --d: 6s; }
.story__steps li:nth-child(3) { --d: 7s; }
.story__steps li:nth-child(4) { --d: 6.5s; }
.story__steps li:nth-child(5) { --d: 6s; }
.story__steps li:nth-child(6) { --d: 8s; }
.story__steps button {
  width: 100%; display: grid; gap: 9px; padding: 6px 2px; border: 0; background: none; cursor: pointer; text-align: left;
  font: 560 13.5px/1.25 var(--font); color: var(--text-3); letter-spacing: -.005em; transition: color .3s;
}
.story__steps button:hover, .story__steps button.is-on { color: var(--text); }
.story__seg { display: block; height: 4px; border-radius: 4px; background: var(--fill-3); overflow: hidden; }
.story__seg i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cobalt), var(--violet)); transform: scaleX(0); transform-origin: 0 50%; }
.story__steps .is-done .story__seg i { transform: scaleX(1); }
.story__steps .is-on .story__seg i { animation: story-fill var(--d, 6s) linear forwards; }
.story.is-manual .story__steps .is-on .story__seg i { animation: none; transform: scaleX(1); }
@keyframes story-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.story__caps h3 { font-size: clamp(20px, 2vw, 26px); }
.story__caps p { margin-top: 6px; color: var(--text-2); font-size: 16px; max-width: 62ch; }
.story__caps > div { animation: rise-in .6s var(--ease); }
.story__pause {
  width: 44px; height: 44px; border: 0; border-radius: 999px; display: grid; place-items: center; cursor: pointer;
  background: var(--fill-2); color: var(--text); box-shadow: inset 0 0 0 .5px var(--hair-2); transition: background-color .25s, transform .45s var(--spring);
}
.story__pause:hover { background: var(--fill-3); }
.story__pause:active { transform: scale(.9); }
.story__pause svg { width: 18px; height: 18px; fill: currentColor; }
.story__pause .ic-play { display: none; }
.story__pause[aria-pressed="true"] .ic-play { display: inline; }
.story__pause[aria-pressed="true"] .ic-pause { display: none; }

/* Pause (bouton), hors de l'écran, onglet caché : tout s'arrête, barre de progression comprise. */
.story.is-paused *, .story.is-off *, .il-side:not(.is-live) * { animation-play-state: paused !important; }

/* Côté page : la loupe dans la méthode, l'avion dans le contact. */
.il-side { max-width: 460px; margin-top: 34px; }
.contact__text .il-side { margin-top: 40px; }

/* ------------------------------------------------------------------ scènes */
.sc { opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility 0s .5s; }
.sc.is-on { opacity: 1; visibility: visible; transition: opacity .6s var(--ease); }

/* Pivots : les bras tournent autour de l'épaule (origine locale), les objets autour de leur centre. */
.type-f, .type-b, .s2-pen, .s2-thumb, .s4-point, .s5-point, .s6-throw, .s6-cheer-f, .s6-cheer-b, .m-point, .sway { transform-box: view-box; transform-origin: 0 0; }
.s1-bubble, .s1-badge, .s2-stamp, .chip, .s4-ok, .s4-shield, .s4-badge, .s5-seal, .s6-rip, .twinkle, .m-tag, .s1-inbox, .s4-win, .s5-rep, .s2-doc { transform-box: fill-box; transform-origin: center; }
.s1-line { transform-box: fill-box; transform-origin: 0 50%; }
.s5-bar { transform-box: fill-box; transform-origin: 50% 100%; }

/* Toujours en mouvement dans la scène visible : les mains qui tapent, la plante, la vapeur, la lampe. */
.is-on .type-f, .is-live .type-f { animation: type .24s ease-in-out infinite alternate; }
.is-on .type-b, .is-live .type-b { animation: type .24s ease-in-out .12s infinite alternate; }
.sc-3.is-on .type-f, .sc-3.is-on .type-b { animation-duration: .15s; }
.is-on .sway, .is-live .sway { animation: sway 4.6s ease-in-out infinite alternate; }
.is-on .steam, .is-live .steam { animation: steam 2.6s ease-out infinite; }
.is-on .steam + .steam, .is-live .steam + .steam { animation-delay: 1.3s; }
.is-on .beam, .is-live .beam { animation: beam 3.4s ease-in-out infinite alternate; }
.is-on .twinkle, .is-live .twinkle { animation: twinkle 1.8s ease-in-out infinite; }
@keyframes type { from { transform: rotate(0); } to { transform: rotate(-5deg) translateY(-1px); } }
@keyframes sway { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
@keyframes steam { 0% { opacity: 0; transform: translateY(4px); } 30% { opacity: .9; } 100% { opacity: 0; transform: translateY(-12px); } }
@keyframes beam { from { opacity: .7; } to { opacity: 1; } }
@keyframes twinkle { 0%, 100% { opacity: .35; transform: scale(.7) rotate(0); } 50% { opacity: 1; transform: scale(1.1) rotate(20deg); } }
@keyframes pop { 0% { opacity: 0; transform: scale(.3); } 65% { opacity: 1; transform: scale(1.08); } 100% { opacity: 1; transform: scale(1); } }
@keyframes rise { from { opacity: 0; transform: translateY(24px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes nod { from { transform: rotate(0); } to { transform: rotate(-7deg); } }

/* 1. Vous nous écrivez */
.sc-1.is-on .s1-inbox { animation: rise .9s var(--ease) .15s both; }
.sc-1.is-on .s1-bubble { animation: pop .65s var(--spring-2) .45s both; }
.sc-1.is-on .s1-line { animation: grow-x .5s var(--ease) both; }
/* Dans la bulle, le premier rect est la bulle elle-même : les lignes sont les rect 2 à 4. */
.sc-1.is-on .s1-line:nth-of-type(2) { animation-delay: .95s; }
.sc-1.is-on .s1-line:nth-of-type(3) { animation-delay: 1.25s; }
.sc-1.is-on .s1-line:nth-of-type(4) { animation-delay: 1.55s; }
.sc-1.is-on .s1-plane { animation: plane-fly 1.7s var(--ease-io) 2.1s both; }
.sc-1.is-on .s1-new { animation: new-mail .7s var(--spring) 3.5s both; }
.sc-1.is-on .s1-badge { animation: pop .5s var(--spring-2) 3.7s both; }
@keyframes plane-fly {
  0% { opacity: 0; transform: translate(-150px, 20px) scale(.5) rotate(10deg); }
  12% { opacity: 1; }
  55% { transform: translate(-10px, -58px) scale(.95) rotate(-10deg); }
  88% { opacity: 1; }
  100% { opacity: 0; transform: translate(130px, 60px) scale(.6) rotate(12deg); }
}
@keyframes new-mail { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }

/* 2. Le périmètre, signé */
.s2-check, .s2-sign, .s4-tick { stroke-dasharray: 1; stroke-dashoffset: 1; }
.sc-2.is-on .s2-doc { animation: rise .8s var(--ease) .1s both; }
.sc-2.is-on .s2-check { animation: draw .35s var(--ease) both; }
.sc-2.is-on .s2-c1 { animation-delay: 1s; }
.sc-2.is-on .s2-c2 { animation-delay: 1.4s; }
.sc-2.is-on .s2-c3 { animation-delay: 1.8s; }
.sc-2.is-on .s2-sign { animation: draw 1.3s ease-in-out 2.3s both; }
.sc-2.is-on .s2-pen { animation: nod .2s ease-in-out 2.3s 6 alternate; }
.sc-2.is-on .s2-stamp { animation: stamp .6s var(--spring-2) 3.8s both; }
.sc-2.is-on .s2-thumb { animation: nod .5s ease-in-out 4.4s 4 alternate; }
@keyframes stamp { 0% { opacity: 0; transform: scale(1.9) rotate(-28deg); } 70% { opacity: 1; transform: scale(.94) rotate(-12deg); } 100% { opacity: 1; transform: scale(1) rotate(-12deg); } }
.s2-stamp { transform: rotate(-12deg); }

/* 3. L'analyse : défilement à toute vitesse, balayage, trois constats */
.sc-3.is-on .code-roll { animation: code-roll 1.25s linear infinite; }
.sc-3.is-on .scanline { animation: scan 1.7s ease-in-out infinite; }
.sc-3.is-on .s3-chip { animation: pop .55s var(--spring-2) both; }
.sc-3.is-on .s3-k1 { animation-delay: 1.6s; }
.sc-3.is-on .s3-k2 { animation-delay: 2.8s; }
.sc-3.is-on .s3-k3 { animation-delay: 4s; }
@keyframes code-roll { from { transform: translateY(0); } to { transform: translateY(-286px); } }
@keyframes scan { 0% { transform: translateY(-26px); } 100% { transform: translateY(150px); } }

/* 4. Corrigé, puis re-testé */
.sc-4.is-on .s4-win { animation: rise .8s var(--ease) .1s both; }
.sc-4.is-on .s4-ok { animation: pop .5s var(--spring-2) both; }
.sc-4.is-on .s4-row .chip { animation: fixed .4s var(--ease) both; }
.sc-4.is-on .s4-o1, .sc-4.is-on .s4-r1 .chip { animation-delay: 1s; }
.sc-4.is-on .s4-o2, .sc-4.is-on .s4-r2 .chip { animation-delay: 1.7s; }
.sc-4.is-on .s4-o3, .sc-4.is-on .s4-r3 .chip { animation-delay: 2.4s; }
.sc-4.is-on .s4-shield { animation: pop .7s var(--spring-2) 3.1s both; }
.sc-4.is-on .s4-tick { animation: draw .5s var(--ease) 3.55s both; }
.sc-4.is-on .s4-badge { animation: pop .55s var(--spring-2) 3.85s both; }
.sc-4.is-on .s4-spark { animation: fade-in .4s var(--ease) 4s both; }
.sc-4.is-on .s4-point { animation: nod 1.1s ease-in-out infinite alternate; }
@keyframes fixed { from { opacity: 1; } to { opacity: .42; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* 5. Le rapport */
.sc-5.is-on .s5-rep { animation: report-fly 1.6s var(--ease) .4s both; }
.sc-5.is-on .s5-bar { animation: grow-y .6s var(--spring) both; }
.sc-5.is-on .s5-b1 { animation-delay: 2.2s; }
.sc-5.is-on .s5-b2 { animation-delay: 2.4s; }
.sc-5.is-on .s5-b3 { animation-delay: 2.6s; }
.sc-5.is-on .s5-seal { animation: pop .55s var(--spring-2) 3s both; }
.sc-5.is-on .s5-point { animation: nod 1s ease-in-out 2s infinite alternate; }
@keyframes report-fly {
  0% { opacity: 0; transform: translate(-150px, 110px) scale(.2) rotate(-14deg); }
  20% { opacity: 1; }
  55% { transform: translate(-60px, -30px) scale(.55) rotate(-6deg); }
  100% { opacity: 1; transform: none; }
}

/* 6. Plus solide : les tentatives rebondissent sur la coupole */
.sc-6.is-on .s6-dome { animation: dome 2.4s ease-in-out infinite; }
.sc-6.is-on .s6-shot { animation: shot 2.4s var(--ease-io) infinite both; }
.sc-6.is-on .s6-rip { animation: ripple 2.4s var(--ease) infinite both; }
.s6-s1 { --tx: -112px; --ty: 16px; } .s6-s2 { --tx: -91px; --ty: 18px; } .s6-s3 { --tx: -150px; --ty: 10px; }
.sc-6.is-on .s6-s2, .sc-6.is-on .s6-r2 { animation-delay: .8s; }
.sc-6.is-on .s6-s3, .sc-6.is-on .s6-r3 { animation-delay: 1.6s; }
.sc-6.is-on .s6-throw { animation: throw .8s ease-in-out infinite; }
.sc-6.is-on .s6-cheer-f { animation: cheer-f .5s ease-in-out infinite alternate; }
.sc-6.is-on .s6-cheer-b { animation: cheer-b .5s ease-in-out infinite alternate; }
.sc-6.is-on .s6-hop { animation: hop .5s ease-in-out infinite alternate; }
.sc-6.is-on .win { animation: win 3s ease-in-out infinite alternate; }
@keyframes dome { 0%, 100% { opacity: .82; } 50% { opacity: 1; } }
@keyframes shot {
  0% { opacity: 0; transform: translate(0, 0); }
  8% { opacity: 1; }
  54% { opacity: 1; transform: translate(var(--tx), var(--ty)); }
  70% { opacity: 0; transform: translate(calc(var(--tx) * .82), calc(var(--ty) - 26px)) rotate(38deg); }
  100% { opacity: 0; transform: translate(calc(var(--tx) * .82), calc(var(--ty) - 26px)) rotate(38deg); }
}
@keyframes ripple { 0%, 53% { opacity: 0; transform: scale(.2); } 56% { opacity: .95; transform: scale(.45); } 88%, 100% { opacity: 0; transform: scale(2.3); } }
@keyframes throw { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-22deg); } 55% { transform: rotate(8deg); } }
@keyframes cheer-f { from { transform: rotate(0); } to { transform: rotate(-14deg); } }
@keyframes cheer-b { from { transform: rotate(0); } to { transform: rotate(14deg); } }
@keyframes hop { from { transform: translateY(0); } to { transform: translateY(-6px); } }
@keyframes win { from { opacity: .45; } to { opacity: 1; } }

/* Loupe (méthode) et avion de papier (contact) */
.is-live .m-lens { animation: lens 7s ease-in-out infinite; }
.is-live .m-tag { animation: tag 7s var(--spring-2) infinite both; }
.is-live .m-t2 { animation-delay: .9s; }
.is-live .m-t3 { animation-delay: 1.8s; }
.is-live .m-point { animation: nod 1.4s ease-in-out infinite alternate; }
@keyframes lens { 0%, 100% { transform: translate(0, 0); } 30% { transform: translate(92px, 16px); } 55% { transform: translate(150px, 8px); } 80% { transform: translate(40px, 34px); } }
@keyframes tag { 0%, 12% { opacity: 0; transform: scale(.4); } 20%, 85% { opacity: 1; transform: scale(1); } 95%, 100% { opacity: 0; transform: scale(.9); } }
.is-live .c-plane { animation: c-plane 3.6s var(--ease-io) infinite; }
.is-live .c-trail { animation: trail 3.6s linear infinite; }
@keyframes c-plane {
  0% { opacity: 0; transform: translate(0, 0) scale(.4) rotate(0); }
  15% { opacity: 1; }
  70% { opacity: 1; transform: translate(118px, -74px) scale(1) rotate(-22deg); }
  100% { opacity: 0; transform: translate(150px, -96px) scale(.8) rotate(-24deg); }
}
@keyframes trail { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -48; } }

@media (max-width: 720px) {
  .story { border-radius: 30px; padding: 10px; }
  .story__stage { border-radius: 22px; }
  .story__steps { gap: 6px; }
  .story__steps button { font-size: 0; gap: 0; padding: 8px 0; }
  .il-side { max-width: 380px; }
}
@media (prefers-reduced-motion: reduce) {
  .sc { transition: none; }
}