.al-page{--ink:var(--text);--ink-soft:var(--muted);--accent:var(--blue);--accent-deep:var(--iris);--good:var(--ok);--crit:#e8756f;--font-display:var(--display);--font-body:var(--body);--font-mono:var(--mono);--maxw:1080px;color-scheme:dark}
.al-page .al-hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
main.al-page .al-hero{padding-top:calc(var(--nav-h,56px) + 40px)}
.al-page .dial>*{z-index:1}
.al-page *{box-sizing: border-box;}
.al-page{background: var(--bg); color: var(--ink); font-family: var(--font-body); line-height: 1.6; -webkit-font-smoothing: antialiased; margin: 0;}
.al-page h1,.al-page h2,.al-page h3{font-family: var(--font-display); font-weight: 600; text-wrap: balance; line-height: 1.14; margin: 0;}
.al-page p{margin: 0;}
.al-page a{color: var(--accent-deep);}
.al-page .al-wrap{max-width: var(--maxw); margin-inline: auto; padding-inline: max(16px, env(safe-area-inset-left,0px));}
.al-page .al-eyebrow{font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent);}
.al-page .al-hero{padding-block: clamp(2.5rem,6vw,5rem) clamp(2rem,4vw,3rem);}
.al-page .al-hero h1{font-size: clamp(2.1rem,5.5vw,3.6rem); letter-spacing: -.01em; margin-block: .6rem 1rem;}
.al-page .al-hero .al-lede{font-size: clamp(1.05rem,2.2vw,1.3rem); color: var(--ink-soft); max-width: 42ch;}
.al-page .al-hero-grid{display: grid; grid-template-columns: 1.3fr .9fr; gap: clamp(1.5rem,4vw,3rem); align-items: center;}
@media (max-width: 760px){.al-page .al-hero-grid{grid-template-columns: 1fr;}}
.al-page .al-cta-row{display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem;}
.al-page .al-btn{font-family: var(--font-body); font-weight: 800; font-size: 1rem; border: 0; border-radius: 10px; padding: .85rem 1.4rem; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: .5rem;}
.al-page .al-btn-primary{background: var(--accent); color: #fff; box-shadow: var(--shadow);}
.al-page .al-btn-primary:hover{background: var(--accent-deep);}
.al-page .al-btn-ghost{background: transparent; color: var(--ink); border: 1.5px solid var(--line);}
.al-page .al-btn-ghost:hover{border-color: var(--accent); color: var(--accent-deep);}
.al-page .dial-card{background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 1.5rem; box-shadow: var(--shadow); text-align: center;}
.al-page .dial{--val: 0; width: 170px; height: 170px; margin: .25rem auto .5rem; border-radius: 50%;
  background: conic-gradient(var(--accent) calc(var(--val)*1%), var(--surface-2) 0); display: grid; place-items: center; position: relative;}
.al-page .dial::after{content:""; position: absolute; inset: 14px; border-radius: 50%; background: var(--surface);}
.al-page .dial .al-num{position: relative; font-family: var(--font-display); font-size: 2.6rem; font-weight: 600; font-variant-numeric: tabular-nums;}
.al-page .dial .al-num small{font-size: .9rem; color: var(--ink-soft);}
.al-page .dial-label{font-size: .9rem; color: var(--ink-soft);}
.al-page section{padding-block: clamp(2.2rem,5vw,3.6rem);}
.al-page .band{background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);}
.al-page .sec-head{max-width: 60ch; margin-bottom: 1.75rem;}
.al-page .sec-head h2{font-size: clamp(1.6rem,3.5vw,2.4rem); margin-bottom: .6rem;}
.al-page .sec-head p{color: var(--ink-soft);}
.al-page .phase{margin-bottom: 1.6rem;}
.al-page .phase-h{display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; margin-bottom: .8rem;}
.al-page .phase-h .tag{font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; background: var(--accent); color: #fff; padding: .25rem .6rem; border-radius: 6px;}
.al-page .phase-h h3{font-family: var(--font-body); font-weight: 800; font-size: 1.05rem;}
.al-page .checklist{display: grid; gap: .6rem;}
.al-page .obl{display: grid; grid-template-columns: auto 1fr auto; gap: .9rem; align-items: start;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.1rem; cursor: pointer; transition: border-color .15s;}
.al-page .obl:hover{border-color: var(--accent);}
.al-page .obl input{appearance: none; width: 22px; height: 22px; border: 2px solid var(--line); border-radius: 6px; margin: 2px 0 0; cursor: pointer; display: grid; place-items: center; flex: none;}
.al-page .obl input:checked{background: var(--good); border-color: var(--good);}
.al-page .obl input:checked::after{content: "✓"; color: #fff; font-size: .85rem; font-weight: 900;}
.al-page .obl input:focus-visible{outline: 2px solid var(--accent); outline-offset: 2px;}
.al-page .obl .t{font-weight: 700; min-width: 0;}
.al-page .obl .d{font-size: .88rem; color: var(--ink-soft); margin-top: .15rem;}
.al-page .art{font-family: var(--font-mono); font-size: .7rem; color: var(--accent); white-space: nowrap; background: var(--surface-2); padding: .25rem .5rem; border-radius: 6px; flex: none;}
.al-page .meter-live{position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: .8rem 1.1rem; margin-bottom: 1.5rem;}
.al-page .bar{flex: 1; min-width: 160px; height: 10px; border-radius: 6px; background: var(--bg); overflow: hidden;}
.al-page .bar > i{display: block; height: 100%; width: 0; background: var(--accent); transition: width .3s ease;}
.al-page .meter-live b{font-variant-numeric: tabular-nums; font-size: 1.1rem;}
.al-page .verdict{font-weight: 800; font-size: .95rem;}
.al-page .offer-grid{display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(1.5rem,3vw,2.5rem); align-items: start;}
@media (max-width: 820px){.al-page .offer-grid{grid-template-columns: 1fr;}}
.al-page .scan-list{display: grid; gap: .9rem; margin-top: 1.25rem;}
.al-page .scan-item{display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: start;}
.al-page .scan-item .ic{width: 34px; height: 34px; border-radius: 9px; background: var(--surface-2); color: var(--accent); display: grid; place-items: center; font-weight: 900; flex: none; font-family: var(--font-mono);}
.al-page .scan-item h3{font-size: 1.05rem; font-family: var(--font-body); font-weight: 800;}
.al-page .scan-item p{font-size: .92rem; color: var(--ink-soft);}
.al-page form.al-card{background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: clamp(1.25rem,3vw,1.9rem); box-shadow: var(--shadow); display: grid; gap: .9rem;}
.al-page .al-field{display: grid; gap: .35rem;}
.al-page label{font-size: .82rem; font-weight: 700;}
.al-page .req{color: var(--crit);}
.al-page input[type=text],.al-page input[type=email],.al-page input[type=url]{font: inherit; padding: .7rem .8rem; border: 1.5px solid var(--line); border-radius: 9px; background: var(--bg); color: var(--ink); width: 100%;}
.al-page input:focus{outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);}
.al-page .consent{display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: start; font-size: .82rem; color: var(--ink-soft);}
.al-page .consent input{margin-top: 3px;}
.al-page .form-note{font-size: .76rem; color: var(--ink-soft);}
.al-page .ok-msg{background: color-mix(in srgb, var(--good) 14%, transparent); border: 1px solid var(--good); color: var(--ink); border-radius: 12px; padding: 1.1rem 1.2rem;}
.al-page .ok-msg b{color: var(--good);}
.al-page .err{color: var(--crit); font-size: .78rem;}
.al-page [hidden]{display: none !important;}
.al-page .al-trust{display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; align-items: start; color: var(--ink-soft); font-size: .86rem;}
.al-page .al-trust .al-k{font-family: var(--font-mono); font-size: 1.5rem; color: var(--ink); font-variant-numeric: tabular-nums;}
.al-page .al-trust > div{min-width: 150px; flex: 1;}
.al-page .foot{padding-block: 2rem 2.5rem; color: var(--ink-soft); font-size: .82rem; border-top: 1px solid var(--line);}
.al-page .foot a{color: var(--accent-deep);}
@media (prefers-reduced-motion: reduce){.al-page *{transition: none !important;}}
/* Section diagrams (src_scan/art.py). Static styles only; their motion is in motion.css.
   Colours are the site's tokens (MOTION.md): no new colours, no new fonts. */
.al-page .al-sec-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center; margin-bottom: 1.75rem; }
.al-page .al-sec-top .sec-head { margin-bottom: 0; }
@media (max-width: 860px) { .al-page .al-sec-top { grid-template-columns: 1fr; } }
.al-page .al-art { margin: 0; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r);
  padding: clamp(.75rem, 2vw, 1.25rem); box-shadow: 0 24px 60px -36px rgba(0, 0, 0, .8); }
.al-page section.al-wrap .al-art { background: var(--surface); }
.al-page .scan-list + .al-art { margin-top: 1.5rem; }
.al-page .al-art svg { display: block; width: 100%; height: auto; overflow: visible; }
.al-page .al-art text { font-family: var(--body); fill: var(--muted); font-size: 12px; }
.al-page .al-art .al-art-t { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; fill: var(--cyan); }
.al-page .al-art .al-art-v { font-family: var(--display); font-weight: 700; font-size: 17px; fill: var(--text); }
.al-page .al-art .al-art-y { font-weight: 600; font-size: 13px; fill: var(--text); }
.al-page .al-art .al-art-g { font-family: var(--display); font-weight: 700; font-size: 16px; fill: var(--iris); }
.al-page .al-art .al-art-g.is-ok { fill: var(--ok); }
.al-page .al-art-line { stroke: var(--line-2); stroke-width: 2; fill: none; }
.al-page .al-art-draw { stroke: var(--blue); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.al-page .al-art-track { fill: var(--surface); stroke: var(--line-2); stroke-width: 4; }
.al-page .al-art-prog { fill: none; stroke: var(--ok); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 0 100; opacity: 0; }
.al-page .al-art-node { fill: var(--surface-2); stroke: var(--line-2); stroke-width: 1.5; }
.al-page .al-art-node.is-ok { stroke: var(--ok); }
.al-page .al-art-bar { fill: var(--blue); }
.al-page .al-art-bar.is-warn { fill: var(--warn); }
.al-page .al-art-dash { fill: none; stroke: var(--line-2); stroke-width: 1.5; stroke-dasharray: 5 5; }
.al-page .al-art-layer { fill: var(--surface-2); stroke: var(--line); }
.al-page .al-art-fill { fill: color-mix(in srgb, var(--ok) 32%, transparent); transform-box: fill-box; transform-origin: left center;
  transform: scaleX(var(--f, 0)); }
.al-page [data-al-layer].is-done .al-art-layer { stroke: var(--ok); }
.al-page [data-al-layer].is-done .al-art-count { fill: var(--ok); }
/* Motion for /fr/loi-25/ and /fr/securite/ (2026-10-28). Follows MOTION.md: transform and opacity only,
   --ease-out for entrances, --ease for state, 120 ms stagger capped at 4, nothing under reduced motion.
   Content is fully visible without JS: scroll reveals only hide what JS marked (.al-motion). */
@property --val { syntax: "<number>"; inherits: true; initial-value: 0; }

@media (prefers-reduced-motion: no-preference) {
  /* Hero enters on load, CSS only, so the headline never waits for a script. */
  @keyframes al-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  .al-page .al-hero .al-eyebrow,
  .al-page .al-hero h1,
  .al-page .al-hero .al-lede,
  .al-page .al-hero .al-cta-row,
  .al-page .al-hero .dial-card { animation: al-rise .5s var(--ease-out) both; }
  .al-page .al-hero h1 { animation-delay: .12s; }
  .al-page .al-hero .al-lede { animation-delay: .24s; }
  .al-page .al-hero .al-cta-row,
  .al-page .al-hero .dial-card { animation-delay: .36s; }

  /* Scroll reveal: only elements below the fold at load get .al-rv (set by allotech-alpage-motion.js). */
  .al-page.al-motion .al-rv { opacity: 0; transform: translateY(18px); }
  .al-page.al-motion .al-rv.is-in { opacity: 1; transform: none;
    transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
    transition-delay: calc(var(--al-i, 0) * 120ms); }

  /* Readiness dial: the ring follows the score instead of jumping; the number pulses once per change. */
  .al-page .dial { transition: --val .35s var(--ease); }
  @keyframes al-tick { 40% { transform: scale(1.08); } }
  .al-page .dial .al-num.al-tick { animation: al-tick .3s var(--ease); }
  .al-page .bar > i { transition: width .35s var(--ease), background-color .25s var(--ease); }
  @keyframes al-fade { from { opacity: 0; transform: translateY(4px); } }
  .al-page .verdict.al-tick { animation: al-fade .3s var(--ease-out); }

  /* Checklist: ticking an obligation confirms itself. */
  .al-page .obl { transition: border-color .25s var(--ease), transform .2s var(--ease), background-color .25s var(--ease); }
  .al-page .obl:hover { transform: translateY(-1px); }
  .al-page .obl:active { transform: scale(.99); }
  @keyframes al-check { from { opacity: 0; transform: scale(.5); } }
  .al-page .obl input:checked::after { animation: al-check .25s var(--ease-out); }

  /* Section diagrams: progress follows the checklist; each diagram draws itself once when it
     scrolls in (only diagrams below the fold at load are marked .al-rv, so nothing above it waits). */
  .al-page .al-art-prog { transition: stroke-dasharray .45s var(--ease); }
  .al-page .al-art-fill { transition: transform .45s var(--ease); }
  .al-page.al-motion .al-art.al-rv .al-art-draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .al-page.al-motion .al-art.al-rv.is-in .al-art-draw { stroke-dashoffset: 0;
    transition: stroke-dashoffset .5s var(--ease-out) .15s; }
  .al-page.al-motion .al-art.al-rv .al-art-step { opacity: 0; transform: translateY(8px); }
  .al-page.al-motion .al-art.al-rv.is-in .al-art-step { opacity: 1; transform: none;
    transition: opacity .45s var(--ease-out), transform .45s var(--ease-out);
    transition-delay: calc(var(--d, 0) * 120ms + 200ms); }
  .al-page.al-motion .al-art.al-rv .al-art-grow { transform: scaleX(0); transform-box: fill-box; transform-origin: left center; }
  .al-page.al-motion .al-art.al-rv.is-in .al-art-grow { transform: scaleX(1);
    transition: transform .6s var(--ease-out); transition-delay: calc(var(--d, 0) * 120ms + 300ms); }

  /* Buttons and feedback. */
  .al-page .al-btn { transition: transform .15s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease); }
  .al-page .al-btn:hover { transform: translateY(-1px); }
  .al-page .al-btn:active { transform: scale(.97); }
  .al-page .scan-item .ic { transition: transform .25s var(--ease); }
  .al-page .scan-item:hover .ic { transform: translateY(-2px); }
  .al-page .err:not([hidden]) { animation: al-fade .25s var(--ease-out); }
  .al-page .ok-msg { animation: al-rise .45s var(--ease-out) both; }
}

/* State, not motion: a ticked obligation reads as done at a glance. */
.al-page .obl:has(input:checked) { border-color: color-mix(in srgb, var(--good) 55%, var(--line)); }