:root{--nuit:#0F1C36;--nuit2:#17284B;--ambre:#FDAE05;--ivoire:#F3ECE4;--doux:#56627A;--douxn:#B8C2D5;--trait:#E4DACB;
  box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0A1426}}
:root[data-theme="dark"]{--bg:#0A1426}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--bg,#D9D2C7);font-family:'Poppins',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;color:var(--nuit);-webkit-font-smoothing:antialiased;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.i{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* barre écran */
.bar{position:sticky;top:0;z-index:10;display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap;padding:calc(env(safe-area-inset-top,0px) + 10px) 12px 10px;background:rgba(15,28,54,.94);backdrop-filter:blur(8px)}
.bar button{font:inherit;font-weight:700;font-size:14px;border:0;border-radius:99px;padding:9px 18px;cursor:pointer;background:rgba(243,236,228,.12);color:var(--ivoire)}
.bar button[aria-pressed="true"]{background:var(--ambre);color:var(--nuit)}
.bar button.pr{background:transparent;border:1.5px solid var(--ambre);color:var(--ambre)}
.bar button:focus-visible{outline:2px solid var(--ivoire);outline-offset:2px}
.stage{padding:18px 0 40px;display:flex;justify-content:center}
.fit{transform-origin:top left}

/* page A4 */
.page{width:210mm;height:297mm;background:var(--ivoire);position:relative;overflow:hidden;display:none;flex-direction:column;box-shadow:0 30px 70px -30px rgba(0,0,0,.5)}
.page.on{display:flex}
.top{flex:none;position:relative;background:var(--nuit);color:var(--ivoire);padding:10mm 14mm 8mm;overflow:hidden}
.orb{position:absolute;width:150mm;right:-52mm;top:-46mm;pointer-events:none}
.orb circle{fill:none}
.orb .a{stroke:var(--ambre);stroke-opacity:.6;stroke-width:1.6;stroke-dasharray:1760;stroke-dashoffset:1760;animation:draw 2.2s .2s ease-out forwards}
.orb .b{stroke:var(--ivoire);stroke-opacity:.1}
.orb .d{fill:var(--ambre);transform-origin:300px 300px;animation:spin 16s 2s linear infinite;opacity:0;animation-fill-mode:both}
.orb .dg{transform-origin:300px 300px;animation:fade .5s 1.8s both,spin 16s 1.8s linear infinite}
.hd{position:relative;display:flex;justify-content:space-between;align-items:center}
.logo{width:46mm;height:auto;display:block}
.pill{font-size:9.5pt;font-weight:600;color:var(--ambre);border:1.4px solid var(--ambre);border-radius:99px;padding:1.2mm 4mm}
.tg{position:relative;display:grid;grid-template-columns:1.25fr 1fr;gap:8mm;align-items:center;margin-top:7mm}
h1{margin:0;font-size:24pt;line-height:1.06;font-weight:800;letter-spacing:-.02em}
h1 span{display:block}
.amb{color:var(--ambre)}
.lead{margin:3mm 0 0;font-size:10pt;line-height:1.5;color:var(--douxn)}
.lead b{color:var(--ivoire);font-weight:600}

/* convergence (directeur) */
.conv{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:2.5mm}
.cv{position:relative;display:flex;align-items:center;gap:2mm;background:var(--nuit2);border:1px solid rgba(243,236,228,.14);border-radius:3mm;padding:2.6mm 3mm;font-size:9pt;font-weight:600;white-space:nowrap}
.cv .i{color:var(--ambre);width:4.2mm;height:4.2mm}
.cv em{position:relative;font-style:normal}
.cv em::after{content:"";position:absolute;left:-.5mm;right:-.5mm;top:55%;height:1.6px;background:var(--ambre);transform:scaleX(0);transform-origin:left;animation:grow .4s var(--x) both}
.cvl{grid-column:1/-1;font-size:8.5pt;color:var(--douxn);font-weight:500;margin-bottom:.5mm}
.arrow{grid-column:1/-1;display:flex;justify-content:center;color:var(--ambre);margin:.5mm 0}
.arrow .i{width:5mm;height:5mm;transform:rotate(90deg)}
.one{grid-column:1/-1;justify-self:center;background:var(--ambre);color:var(--nuit);font-weight:800;font-size:11pt;padding:2.6mm 6mm;border-radius:99px;white-space:nowrap;animation:pop .6s 2.2s both,halo 2s 2.9s infinite}
/* entrées (agent) */
.ins{display:grid;grid-template-columns:1fr 1fr;gap:2.5mm}
.in{display:flex;align-items:center;gap:2.5mm;background:var(--nuit2);border:1px solid rgba(243,236,228,.14);border-radius:3mm;padding:2.6mm 3mm;font-size:9pt;font-weight:600;line-height:1.25}
.in .i{color:var(--ambre);width:5mm;height:5mm}
.inl{grid-column:1/-1;font-size:8.5pt;color:var(--douxn);font-weight:500;margin-bottom:.5mm}

/* corps */
.body{flex:1;min-height:0;display:flex;flex-direction:column;gap:4.2mm;padding:6mm 14mm 0}
.sec h2{margin:0 0 2.4mm;font-size:12.5pt;font-weight:800;letter-spacing:-.01em;display:flex;align-items:center;gap:3mm}
.sec h2::after{content:"";flex:1;height:1.5px;background:var(--trait)}
.packs{display:grid;grid-template-columns:repeat(4,1fr);gap:3mm}
.pk{background:#fff;border-radius:3.5mm;padding:2.8mm 3mm;box-shadow:0 8px 20px -14px rgba(15,28,54,.45)}
.pk .pi{width:8mm;height:8mm;border-radius:2.2mm;background:var(--nuit);color:var(--ambre);display:grid;place-items:center;margin-bottom:2mm}
.pk .pi .i{width:4.6mm;height:4.6mm}
.pk b{display:block;font-size:9.5pt;line-height:1.2}
.pk span{display:block;font-size:8pt;line-height:1.35;color:var(--doux);margin-top:1mm}
.args{display:grid;grid-template-columns:repeat(3,1fr);gap:3mm}
.packs.mini .pk{display:flex;align-items:center;gap:2mm;padding:2.2mm 2.6mm}
.packs.mini .pi{margin:0;width:7mm;height:7mm;flex:none}
.packs.mini b{font-size:8.8pt}
.args.a4{grid-template-columns:1fr 1fr;gap:3mm 6mm}
.ar{border-top:3px solid var(--ambre);padding-top:2.6mm}
.ar b{display:block;font-size:10pt;line-height:1.25}
.ar p{margin:1.2mm 0 0;font-size:8.6pt;line-height:1.45;color:var(--doux)}
.valid{display:flex;align-items:center;gap:3mm;background:#fff;border-radius:3.5mm;padding:3mm 4mm;font-size:9.4pt;font-weight:600;box-shadow:0 8px 20px -14px rgba(15,28,54,.45)}
.valid .ck{flex:none;width:7mm;height:7mm;border-radius:50%;background:#1F8A5B;color:#fff;display:grid;place-items:center}
.valid .ck .i{width:4mm;height:4mm;stroke-width:3}
.valid small{display:block;font-weight:400;color:var(--doux);font-size:8.4pt}
.price{display:grid;grid-template-columns:auto 1fr 1fr;gap:3mm;align-items:stretch}
.trial{background:var(--ambre);color:var(--nuit);border-radius:3.5mm;padding:3mm 4.5mm;display:flex;flex-direction:column;justify-content:center}
.trial b{font-size:13pt;font-weight:800;line-height:1.1}
.trial span{font-size:8.3pt;font-weight:600}
.of{background:#fff;border-radius:3.5mm;padding:3mm 4mm;box-shadow:0 8px 20px -14px rgba(15,28,54,.45)}
.of b{display:block;font-size:10pt}
.of .p{font-size:15pt;font-weight:800;letter-spacing:-.01em;line-height:1.15}
.of .p small{font-size:8pt;font-weight:600;color:var(--doux);letter-spacing:0}
.of span{display:block;font-size:8pt;color:var(--doux);line-height:1.35}
.of.hi{outline:2px solid var(--ambre)}
.note{font-size:8pt;color:var(--doux);margin-top:2mm}

/* pied */
.foot{flex:none;margin-top:auto;background:var(--nuit);color:var(--ivoire);padding:6mm 14mm 7mm;display:grid;grid-template-columns:1fr auto auto;gap:7mm;align-items:center}
.foot .sig b{display:block;font-size:13pt;font-weight:800;line-height:1.2}
.foot .sig span{display:block;font-size:9pt;color:var(--douxn);margin-top:1mm}
.foot .sig .url{display:inline-block;margin-top:2.5mm;font-weight:800;font-size:12pt;color:var(--ambre)}
.qr{display:flex;flex-direction:column;align-items:center;gap:2mm;text-align:center;width:31mm}
.qr .box{width:27mm;height:27mm;background:#fff;border-radius:2.5mm;padding:2mm;display:grid;place-items:center}
.qr .box img,.qr .box canvas{width:100%!important;height:100%!important;display:block}
.qr .box.ph{background:transparent;border:1.5px dashed var(--ambre);color:var(--ambre);font-size:7.5pt;font-weight:600;line-height:1.3;padding:2mm}
.qr b{font-size:8.8pt;line-height:1.2}
.qr span{font-size:7.6pt;color:var(--douxn);line-height:1.2}
.qr .play{display:inline-flex;align-items:center;gap:1mm}
.qr .play .i{width:3.6mm;height:3.6mm;color:var(--ambre)}

/* animation écran */
[data-a]{animation:up .7s var(--d,0s) cubic-bezier(.2,.7,.2,1) both}
@keyframes up{from{opacity:0;transform:translateY(5mm)}to{opacity:1;transform:none}}
@keyframes pop{0%{opacity:0;transform:scale(.6)}70%{opacity:1;transform:scale(1.06)}100%{opacity:1;transform:scale(1)}}
@keyframes halo{0%{box-shadow:0 0 0 0 rgba(253,174,5,.5)}100%{box-shadow:0 0 0 5mm rgba(253,174,5,0)}}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.cv{animation:up .5s var(--d) both,cvx .5s 2s forwards}
@keyframes cvx{to{opacity:.55}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important}}
@page{size:A4;margin:0}
@media print{
  body{background:none}
  .bar{display:none}
  .stage{padding:0;display:block}
  .fit{transform:none!important;height:auto!important;width:auto!important}
  .page{box-shadow:none;margin:0}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .orb .a{stroke-dashoffset:0}.orb .dg{opacity:1}
  .cv{opacity:.55}.cv em::after{transform:none}
}