/* Page d'accueil d'afiasys.app : direction « La ligne » des maquettes (indigo, safran, raphia, frise Kuba). */
body{margin:0;font-family:'Atkinson Hyperlegible Next',system-ui,sans-serif;background:#F3EEE4;color:#1D1B18;-webkit-font-smoothing:antialiased}
a{color:#2B2F77}a:hover{color:#1C1F55}
.disp{font-family:'Bricolage Grotesque',sans-serif}
.mono{font-family:'Atkinson Hyperlegible Mono',ui-monospace,monospace}
.wrap{box-sizing:border-box;width:100%;max-width:1200px;margin:0 auto;padding:0 24px}
.eyebrow{font-size:14px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;color:#8A5A00}
.h2{margin:0;font-size:clamp(34px,4.4vw,56px);line-height:1.02;font-weight:800;letter-spacing:-0.03em}
.lead{margin:0;font-size:19px;line-height:1.55;color:#4A443B;max-width:640px}
.btn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 26px;border-radius:27px;font-weight:700;font-size:17px;text-decoration:none;font-family:inherit}
.btn-or{background:#E0A526;color:#1D1B18}.btn-or:hover{background:#F2C14E;color:#1D1B18}
.btn-in{background:#2B2F77;color:#fff}.btn-in:hover{background:#1C1F55;color:#fff}
.btn-gh{border:2px solid #C9CCEB;color:#fff}.btn-gh:hover{border-color:#fff;color:#fff}
.nav a{color:#3B362F;text-decoration:none;font-weight:600;font-size:16px}.nav a:hover{color:#2B2F77}
.nav a.btn-in,.nav a.btn-in:hover{color:#fff}
.card{box-sizing:border-box;background:#FFFDF8;border:1px solid #E2D9C8;border-radius:24px;padding:28px}
.dt{display:block;width:18px;height:18px;box-sizing:border-box;border-radius:9px;border:4px solid #E0A526;background:#2B2F77;flex-shrink:0}
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;flex:1 1 220px;max-width:280px;min-width:0}
.step{box-sizing:border-box;width:100%;display:flex;align-items:center;gap:12px;min-height:48px;padding:0 16px;border-radius:24px;border:0;font:inherit;font-size:16px;font-weight:700;text-align:left;cursor:pointer}
.lbl{display:block;font-size:14px;font-weight:700;color:#3B362F;margin:0 0 6px}
.inp{box-sizing:border-box;width:100%;height:48px;padding:0 14px;border:1.5px solid #D8CDB9;border-radius:12px;background:#fff;font:inherit;font-size:16px;color:#1D1B18}
.opt{box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:52px;padding:10px 16px;border-radius:14px;border:2px solid #E2D9C8;background:#fff;font:inherit;font-size:16px;font-weight:700;color:#1D1B18;text-align:left;cursor:pointer}
.pill{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;border-radius:22px;border:2px solid #2B2F77;font:inherit;font-size:15px;font-weight:700;cursor:pointer}
.go{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 24px;border-radius:25px;border:0;background:#2B2F77;color:#fff;font:inherit;font-size:16px;font-weight:700;cursor:pointer}
.go:hover{background:#1C1F55}

@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes ticketIn{from{opacity:0;transform:translateY(40px) rotate(-3deg)}to{opacity:1;transform:rotate(0)}}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(224,165,38,.65)}70%{box-shadow:0 0 0 14px rgba(224,165,38,0)}100%{box-shadow:0 0 0 0 rgba(224,165,38,0)}}
@keyframes ringG{0%{box-shadow:0 0 0 0 rgba(46,139,74,.55)}70%{box-shadow:0 0 0 9px rgba(46,139,74,0)}100%{box-shadow:0 0 0 0 rgba(46,139,74,0)}}
@keyframes travel{0%{top:0;opacity:0}10%{opacity:1}85%{opacity:1}100%{top:calc(100% - 10px);opacity:0}}
@keyframes sheen{0%{transform:translateX(-110%)}55%,100%{transform:translateX(110%)}}
@keyframes flow{0%{left:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:calc(100% - 10px);opacity:0}}
@keyframes drift{from{transform:translate(0,0)}to{transform:translate(-56px,-56px)}}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-28px)}}
@keyframes scrIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes pop{0%{opacity:0;transform:scale(.95)}60%{opacity:1;transform:scale(1.01)}100%{opacity:1;transform:none}}
.in{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.d1{animation-delay:.08s}.d2{animation-delay:.22s}.d3{animation-delay:.36s}.d4{animation-delay:.5s}.d5{animation-delay:.64s}
.ticket{animation:ticketIn 1.1s .45s cubic-bezier(.2,.7,.2,1) both}
.ring{animation:ring 2.2s ease-out infinite}
.ringG{animation:ringG 2.2s ease-out infinite}
.track{position:relative}
.rider{position:absolute;left:4px;top:0;width:10px;height:10px;border-radius:5px;background:#E0A526;box-shadow:0 0 0 4px rgba(224,165,38,.25);animation:travel 5.5s 1.6s ease-in-out infinite both}
.kuba{animation:drift 30s linear infinite}
.frise{animation:slide 4s linear infinite}
.bar{position:relative;overflow:hidden}
.bar::after{content:"";position:absolute;top:0;bottom:0;left:0;width:60%;background:linear-gradient(90deg,transparent,#FFF4D6,transparent);transform:translateX(-110%);animation:sheen 4.8s ease-in-out infinite}
.stations li:nth-child(2) .bar::after{animation-delay:.6s}.stations li:nth-child(3) .bar::after{animation-delay:1.2s}.stations li:nth-child(4) .bar::after{animation-delay:1.8s}.stations li:nth-child(5) .bar::after{animation-delay:2.4s}.stations li:nth-child(6) .bar::after{animation-delay:3s}
.wire{position:relative}
.pkt{position:absolute;top:-3px;width:10px;height:10px;border-radius:5px;animation:flow 2.6s linear infinite}
.back{animation-direction:reverse;animation-delay:1.3s}
.scr{animation:scrIn .45s cubic-bezier(.2,.7,.2,1) both}
.pop{animation:pop .5s cubic-bezier(.2,.7,.2,1) both}
.step,.opt,.pill,.go,.btn{transition:background-color .25s,color .25s,border-color .25s,transform .15s}
.opt:active,.go:active,.pill:active,.btn:active{transform:scale(.98)}
.card{transition:translate .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.card:hover{translate:0 -4px;box-shadow:0 14px 30px -18px rgba(43,47,119,.45)}
@supports (animation-timeline: view()){
.reveal{animation:rise linear both;animation-timeline:view();animation-range:entry 5% cover 30%}
}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none !important;transition:none !important}.rider,.pkt{display:none}}
/* Démonstration : états portés par les attributs, que demo.js tient à jour. */
[hidden]{display:none !important}
.pill{background:#FFFDF8;color:#2B2F77}
.pill[aria-pressed="true"]{background:#2B2F77;color:#fff}
.opt[aria-pressed="true"]{border-color:#2B2F77;background:#EEEFFA}
.radio{width:18px;height:18px;box-sizing:border-box;border-radius:9px;border:5px solid #E2D9C8;background:#fff;flex-shrink:0}
.opt[aria-pressed="true"] .radio{border-color:#2B2F77}
.step{background:transparent;color:#5E574C}
.step.passed{background:#F3EEE4;color:#1D1B18}
.step[aria-current="step"]{background:#2B2F77;color:#fff}
.sdot{display:block;width:14px;height:14px;border-radius:7px;background:#D8CDB9;flex-shrink:0}
.step.passed .sdot,.step[aria-current="step"] .sdot{background:#E0A526}
.ln{display:flex;align-items:center;flex:1 1 0;min-width:0}
.ln-dot{display:block;width:12px;height:12px;box-sizing:border-box;border-radius:6px;border:3px solid #D8CDB9;background:#FFFDF8;flex-shrink:0}
.ln-dot.on{border-color:#E0A526;background:#2B2F77}
.ln-bar{flex-grow:1;height:3px;background:#E2D9C8}
.ln-bar.on{background:#E0A526}
.badge{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:16px;font-size:13px;font-weight:700}
.badge-dot{width:8px;height:8px;border-radius:4px}
.badge.place{background:#E7F3EA;color:#245732}.badge.place .badge-dot{background:#2E8B4A}
.badge.extra{background:#EEEFFA;color:#23276A}.badge.extra .badge-dot{background:#2B2F77}


/* Espacements : ceux du bureau, resserrés sur tablette et téléphone. */
:root{--sec:104px;--hero-top:88px;--card-pad:32px;--cta-pad:56px 48px;--win-pad:28px}
@media (max-width:1023px){:root{--sec:80px;--hero-top:64px}}
@media (max-width:640px){:root{--sec:60px;--hero-top:44px;--card-pad:22px;--cta-pad:32px 22px;--win-pad:14px}}

/* En-tête : les sections dans la barre sur grand écran, dans un menu sur tablette et téléphone. */
.site-header{background:#FFFDF8;border-bottom:1px solid #E2D9C8;position:relative;z-index:10}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:16px 28px;padding-top:14px;padding-bottom:14px}
.logo{display:flex;align-items:baseline;gap:2px;font-size:30px;letter-spacing:-0.03em;text-decoration:none;color:#2B2F77;flex-shrink:0}
.logo:hover{color:#2B2F77}
.logo-dot{width:8px;height:8px;border-radius:4px;background:#E0A526;margin-left:4px}
.nav-links{display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px}
.header-actions{display:flex;align-items:center;gap:10px}
.btn-sm{min-height:46px;font-size:16px;padding:0 22px;white-space:nowrap}
.menu{position:relative;display:none}
.menu summary{list-style:none;display:grid;place-items:center;width:46px;height:46px;box-sizing:border-box;border-radius:23px;border:1.5px solid #D8CDB9;color:#2B2F77;cursor:pointer}
.menu summary::-webkit-details-marker{display:none}
.menu[open] summary{background:#2B2F77;border-color:#2B2F77;color:#fff}
.menu-panel{position:absolute;right:0;top:54px;display:flex;flex-direction:column;min-width:240px;padding:8px;background:#FFFDF8;border:1px solid #E2D9C8;border-radius:20px;box-shadow:0 18px 40px -20px rgba(43,47,119,.45)}
.menu-panel a{padding:13px 16px;border-radius:14px;color:#1D1B18;text-decoration:none;font-weight:700;font-size:17px}
.menu-panel a:hover{background:#F3EEE4;color:#2B2F77}
@media (max-width:1023px){.nav-links{display:none}.menu{display:block}}
@media (max-width:420px){.logo{font-size:26px}.btn-sm{min-height:44px;font-size:14px;padding:0 16px}.header-actions{gap:8px}}

/* Démonstration : l'interrupteur et les étapes s'adaptent ; sur tablette et téléphone, les étapes défilent en ligne
   au-dessus de la fenêtre. */
.modes{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.win-body{padding:var(--win-pad);min-height:520px;box-sizing:border-box}
@media (max-width:1023px){
.steps{flex:1 1 100%;max-width:none;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding-bottom:2px}
.steps::-webkit-scrollbar{display:none}
.step{width:auto;white-space:nowrap;scroll-snap-align:start}
}
@media (max-width:640px){
#haut .btn{width:100%}
.modes{width:100%}
.modes > span{flex-basis:100%}
.modes .pill{flex:1}
.win-body{min-height:0}
}

/* Schéma « sur place et en extra » : à la verticale sur tablette et téléphone, les données circulant de haut en bas. */
@keyframes flowY{0%{top:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{top:calc(100% - 10px);opacity:0}}
@media (max-width:1023px){
.flow{flex-direction:column;align-items:stretch !important;flex-wrap:nowrap;max-width:440px;margin:0 auto;width:100%}
.flow > div:not(.link){flex:0 0 auto !important}
.flow > .wire{flex:0 0 32px !important;width:4px !important;min-width:0 !important;height:32px !important;align-self:center}
.flow > .link{position:relative;flex:0 0 48px !important;min-width:0 !important;flex-direction:column !important;align-self:center;gap:0 !important}
.flow > .link .mono{position:absolute;left:18px;top:50%;transform:translateY(-50%)}
.flow > .link .wire{flex:1;width:0 !important;height:auto !important;border-top:0 !important;border-left:4px dashed #E0A526}
.flow .pkt{left:-3px !important;top:0;animation-name:flowY}
.flow > .link .pkt{left:-7px !important;top:0 !important}
}
@media (min-width:1024px){.flow > div:not(.link){flex-basis:160px !important}}