/* Compléments du site ONKA (pictogrammes et démonstration animée). Les couleurs reprennent la charte :
   bleu nuit #081D2D, bleu profond #132B3F, or / bronze #C8A36A. */

/* Pictogrammes : trait principal + accent (variable --ic-a) */
.ic { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.size-9 > .ic, .size-10 > .ic { width: 21px; height: 21px; }
.ic-humain .ic { width: 22px; height: 22px; }

/* ------------------------------------------------------------- Démonstration : une demande suit les étapes, du besoin au résultat */
.demo { display: grid; gap: 28px; }
.demo-tabs { display: flex; flex-wrap: wrap; gap: 10px; }
.demo-tabs button { padding: 10px 20px; border-radius: 999px; border: 1px solid rgb(255 255 255 / .25); background: transparent; color: rgb(255 255 255 / .85); font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .3s, color .3s, border-color .3s; }
.demo-tabs button:hover { border-color: rgb(255 255 255 / .6); color: #fff; }
.demo-tabs button[aria-selected="true"] { background: #fff; border-color: #fff; color: #081D2D; }
.demo-tabs button:focus-visible, .demo-pause:focus-visible { outline: 2px solid #C8A36A; outline-offset: 3px; }
.demo-flow { display: grid; gap: 16px; }
@media (min-width: 1024px) { .demo-flow { grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 20px; } }
.demo-step { position: relative; display: grid; gap: 12px; align-content: start; padding: 22px 20px 26px; border-radius: 18px; background: rgb(255 255 255 / .05); border: 1px solid rgb(255 255 255 / .14);
  transition: background .5s, border-color .5s, transform .6s cubic-bezier(.22, 1, .36, 1); }
.demo-step:not(:last-child)::after { content: ""; position: absolute; left: 43px; top: 100%; width: 1px; height: 16px; background: rgb(255 255 255 / .2); transition: background .5s; }
@media (min-width: 1024px) { .demo-step:not(:last-child)::after { left: 100%; top: 45px; width: 20px; height: 1px; } }
.demo-step::before { content: ""; position: absolute; left: 20px; right: 20px; bottom: 12px; height: 2px; border-radius: 2px; background: #C8A36A; transform: scaleX(0); transform-origin: left; }
.demo-ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; border: 1px solid rgb(255 255 255 / .22); color: #fff; --ic-a: #C8A36A; transition: background .5s, color .5s, border-color .5s, opacity .5s; }
.demo-k { display: flex; align-items: center; gap: 10px; font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif; font-size: 11.5px; font-weight: 700; line-height: 1.25; letter-spacing: .1em; text-transform: uppercase; color: #C8A36A; }
.demo-n { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid currentColor; font-size: 11px; letter-spacing: 0; }
.demo-step p { font-size: 15.5px; line-height: 1.55; color: rgb(255 255 255 / .86); }
.demo-etat { justify-self: start; padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; line-height: 1.2; background: rgb(200 163 106 / .16); color: #C8A36A; transition: background .4s, color .4s; }
/* États posés par le script quand l'animation tourne : les étapes à venir gardent un texte lisible, seul le pictogramme s'estompe */
.demo.anime .demo-step:not(.is-active):not(.is-done) .demo-ic { opacity: .45; }
.demo.anime .demo-step:not(.is-active):not(.is-done) p { color: rgb(255 255 255 / .7); }
.demo-step.is-active { background: rgb(255 255 255 / .1); border-color: #C8A36A; transform: translateY(-6px); }
.demo-step.is-active .demo-ic { background: #C8A36A; border-color: #C8A36A; color: #081D2D; --ic-a: #081D2D; }
.demo-step.is-done .demo-ic { background: rgb(200 163 106 / .18); border-color: rgb(200 163 106 / .55); }
.demo-step.is-done:not(:last-child)::after { background: #C8A36A; }
.demo.anime .demo-step.is-active::before { animation: demo-progres var(--demo-duree, 2.4s) linear forwards; }
.demo.en-pause .demo-step.is-active::before { animation-play-state: paused; }
.demo-step.is-valide .demo-etat { background: #C8A36A; color: #081D2D; }
@keyframes demo-progres { to { transform: scaleX(1); } }
.demo-pied { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 28px; }
.demo-note { max-width: 72ch; font-size: 14px; color: rgb(255 255 255 / .68); }
.demo-pause { padding: 9px 18px; border-radius: 999px; border: 1px solid rgb(255 255 255 / .3); background: transparent; color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; }
.demo-pause:hover { border-color: #fff; }
.demo:not(.anime) .demo-pause { display: none; }
@media (prefers-reduced-motion: reduce) { .demo-step { transition: none; } }