/* Gabarits des pages : visuels, animes, interactifs. S'appuie sur tokens.css, base.css, components.css.
   Principe : sans JavaScript, tout le contenu reste visible. Les etats caches ne s'appliquent que sous .pg-js,
   et .pg-force (filet de securite) remet tout visible si pages.js ne charge pas. */

:root{
  --pg-band:#10243A; --pg-band-2:#1B3A5C; --pg-band-ink:#F4F1E8; --pg-band-soft:rgba(244,241,232,.74);
  --pg-s1:#C9A961; --pg-s2:#C46A7B; --pg-s3:#3F7CC4; --pg-s4:#2F9A78; --pg-s5:#7A68C4;
  --pg-bar:#1B3A5C; --pg-range:color-mix(in srgb,#C9A961 55%,transparent);
  --pg-ease:cubic-bezier(.2,.8,.2,1); --pg-spring:cubic-bezier(.3,1.5,.5,1);
  --pg-nav:5.5rem;
}
:root[data-theme="dark"]{--pg-bar:#8FB4E3;--pg-range:color-mix(in srgb,#D8B978 50%,transparent);--pg-band:#0B1826}

/* ---------- utilitaires ---------- */
.pg-skip{position:absolute;left:-999px}
.pg-skip:focus{left:1rem;top:1rem;z-index:var(--z-nav);background:var(--bg-elevated);padding:.5rem 1rem}
.pg-sec{position:relative;overflow-x:clip;padding-block:clamp(3rem,7vw,5.5rem);scroll-margin-top:calc(var(--pg-nav) + 3.6rem)}
.pg-sec--alt{background:var(--bg-subtle)}
.pg-sec .container,.pg-hero .container,.pg-toc .container{max-width:72rem}
.pg-sec h2{font-size:clamp(1.7rem,3.4vw,2.6rem);line-height:1.1;letter-spacing:var(--tracking-tight);color:var(--ink-deep);margin:0 0 var(--space-4);max-width:24ch}
.pg-intro{color:var(--ink-soft);font-size:var(--fs-lead);line-height:var(--lh-relaxed);max-width:60ch;margin:0 0 clamp(2rem,4vw,3rem)}
.pg-kick{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:var(--space-4)}
.pg-kick b{display:inline-grid;place-items:center;min-width:1.9rem;height:1.9rem;padding-inline:.4rem;border-radius:var(--radius-pill);background:var(--highlight-soft);color:var(--highlight-ink);font-weight:600}
.pg-card a,.pg-panel a,.pg-tl a,.pg-faq a,.pg-use a,.pg-intro a{color:var(--ink-deep);text-decoration:underline;text-decoration-color:var(--highlight);text-underline-offset:.18em;text-decoration-thickness:2px}
.pg-todo{background:var(--highlight-soft);border:1px dashed var(--highlight);border-radius:var(--radius-sm);padding:.05rem .4rem;font-size:.9em}

/* ---------- apparitions au scroll ---------- */
.pg-js .pg-r{opacity:0;transform:translateY(26px);transition:opacity .8s var(--pg-ease),transform .8s var(--pg-ease);transition-delay:calc(var(--i,0)*70ms)}
.pg-js .pg-r.is-in,.pg-force .pg-r{opacity:1;transform:none}

/* ---------- hero ---------- */
.pg-hero{position:relative;isolation:isolate;overflow:hidden;color:var(--pg-band-ink);
  background:radial-gradient(120% 90% at 85% -10%,#24507F 0%,transparent 55%),linear-gradient(160deg,var(--pg-band-2),var(--pg-band) 70%);
  border-radius:clamp(1.25rem,3vw,2.5rem);margin:.5rem clamp(.5rem,2vw,1.5rem) 0;padding-block:clamp(1.5rem,3vw,2.25rem) clamp(2rem,4vw,3.25rem)}
.pg-hero__bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.pg-hero__bg::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(70% 80% at 70% 30%,#000,transparent 75%);mask-image:radial-gradient(70% 80% at 70% 30%,#000,transparent 75%)}
.pg-orb{position:absolute;border-radius:50%;filter:blur(60px);animation:pgFloat 14s ease-in-out infinite alternate;will-change:transform}
.pg-orb--a{width:26rem;height:26rem;right:-6rem;top:-8rem;background:var(--pg-s1);opacity:.28}
.pg-orb--b{width:22rem;height:22rem;left:-8rem;bottom:-10rem;background:var(--pg-s3);opacity:.35;animation-duration:18s;animation-delay:-4s}
.pg-orb--c{width:14rem;height:14rem;right:30%;bottom:-6rem;background:var(--pg-s5);opacity:.22;animation-duration:22s;animation-delay:-8s}
@keyframes pgFloat{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-40px,30px,0) scale(1.15)}}
.pg-hero__in{display:grid;gap:clamp(2rem,5vw,4rem);grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr);align-items:center;padding-top:clamp(.5rem,2vw,1.5rem)}
.pg-crumbs{font-size:var(--fs-sm);color:var(--pg-band-soft);margin-bottom:var(--space-5)}
.pg-crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.35rem;margin:0;padding:0}
.pg-crumbs li+li::before{content:"/";margin-right:.35rem;opacity:.5}
.pg-crumbs a{color:inherit;text-decoration:none}
.pg-crumbs a:hover,.pg-crumbs a:focus-visible{color:#fff;text-decoration:underline}
.pg-pill{display:inline-flex;align-items:center;gap:.6rem;padding:.4rem .95rem;border:1px solid rgba(255,255,255,.22);border-radius:var(--radius-pill);background:rgba(255,255,255,.06);font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;margin-bottom:var(--space-5);backdrop-filter:blur(6px)}
.pg-pill i{width:.5rem;height:.5rem;border-radius:50%;background:var(--pg-s1);animation:pgPing 2.4s ease-out infinite}
@keyframes pgPing{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--pg-s1) 70%,transparent)}100%{box-shadow:0 0 0 .7rem transparent}}
.pg-hero h1{font-size:clamp(2.1rem,4.4vw,3.5rem);line-height:1.06;letter-spacing:var(--tracking-tight);color:#fff;margin:0 0 var(--space-5);max-width:22ch;text-wrap:balance}
.pg-hero h1 .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.pg-hero h1 .w>span{display:inline-block;animation:pgWord .9s var(--pg-ease) both;animation-delay:calc(var(--k)*55ms + 120ms)}
@keyframes pgWord{from{transform:translateY(110%)}to{transform:none}}
.pg-lead{font-size:1.12rem;color:var(--pg-band-soft);line-height:var(--lh-relaxed);max-width:60ch;margin:0 0 var(--space-5);animation:pgUp .9s var(--pg-ease) .5s both}
.pg-lead a{color:#fff}
.pg-cta{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center}
.pg-hero .pg-cta{animation:pgUp .9s var(--pg-ease) .65s both}
@keyframes pgUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.pg-hero .btn--primary,.pg-final .btn--primary{background:var(--pg-s1);color:#10243A}
.pg-hero .btn--ghost{color:#fff;border-color:rgba(255,255,255,.35);background:transparent}
.pg-hero .btn--ghost:hover{background:rgba(255,255,255,.1)}

/* carte du parcours client */
.pg-map{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:var(--radius-xl);padding:clamp(1.2rem,2.5vw,1.8rem);backdrop-filter:blur(14px);box-shadow:0 30px 80px -30px rgba(0,0,0,.6);animation:pgUp 1s var(--pg-ease) .35s both}
.pg-map__t{font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--pg-band-soft);margin:0 0 1.1rem;display:flex;justify-content:space-between;gap:1rem}
.pg-map ol{list-style:none;margin:0;padding:0;position:relative;display:grid;gap:.55rem}
.pg-map ol::before{content:"";position:absolute;left:1.05rem;top:1rem;bottom:1rem;width:2px;background:linear-gradient(var(--pg-s1),var(--pg-s2),var(--pg-s3),var(--pg-s4),var(--pg-s5));opacity:.4;border-radius:2px}
.pg-map ol::after{content:"";position:absolute;left:.78rem;top:.6rem;width:.56rem;height:.56rem;border-radius:50%;background:#fff;box-shadow:0 0 14px 3px rgba(255,255,255,.7);animation:pgDot 6s var(--pg-ease) infinite;z-index:2}
@keyframes pgDot{0%{top:.6rem;opacity:0}8%{opacity:1}80%{top:calc(100% - 1.2rem);opacity:1}92%,100%{top:calc(100% - 1.2rem);opacity:0}}
.pg-map li{position:relative;display:grid;grid-template-columns:2.1rem 1fr;gap:.8rem;align-items:center;padding:.55rem .8rem .55rem .1rem;border-radius:var(--radius-md);color:var(--pg-band-soft);animation:pgUp .7s var(--pg-ease) both;animation-delay:calc(.55s + var(--k)*110ms)}
.pg-map li i{width:2.1rem;height:2.1rem;border-radius:50%;display:grid;place-items:center;font-style:normal;font-family:var(--font-mono);font-size:.78rem;border:1.5px dashed rgba(255,255,255,.3);background:var(--pg-band);position:relative;z-index:1}
.pg-map li b{font-weight:600;font-size:1.02rem}
.pg-map__f{margin:1rem 0 0;font-size:var(--fs-sm);color:var(--pg-band-soft);opacity:.85}
.pg-map li.is-on{background:color-mix(in srgb,var(--c) 18%,transparent);color:#fff;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 55%,transparent)}
.pg-map li.is-on i{background:var(--c);border:0;color:#10243A;font-weight:700;animation:pgGlow 3s ease-in-out infinite;animation-delay:calc(var(--k)*.4s)}
@keyframes pgGlow{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--c) 60%,transparent)}50%{box-shadow:0 0 0 .5rem transparent}}

/* chiffres du hero */
.pg-facts{list-style:none;margin:clamp(2rem,4vw,3.25rem) 0 0;padding:0;display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}
.pg-facts li{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius-lg);padding:1.1rem 1.3rem;animation:pgUp .8s var(--pg-ease) both;animation-delay:calc(.8s + var(--k)*100ms)}
.pg-fact__v{display:flex;align-items:baseline;gap:.15rem;font-family:var(--font-display);font-weight:600;font-size:clamp(2rem,4vw,2.9rem);line-height:1;letter-spacing:-.04em;color:#fff}
.pg-fact__v i{font-style:normal;font-size:.5em;color:var(--pg-s1);font-weight:500;letter-spacing:0}
.pg-facts span.l{display:block;margin-top:.45rem;color:var(--pg-band-soft);font-size:var(--fs-sm);line-height:1.4}

/* ---------- sommaire collant ---------- */
.pg-toc{position:sticky;top:var(--pg-navh,0px);z-index:calc(var(--z-nav) - 1);background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.pg-toc ul{list-style:none;display:flex;gap:.35rem;margin:0;padding:.65rem 0;overflow-x:auto;scrollbar-width:none}
.pg-toc ul::-webkit-scrollbar{display:none}
.pg-toc a{display:block;white-space:nowrap;padding:.45rem .95rem;border-radius:var(--radius-pill);font-size:var(--fs-sm);font-weight:500;color:var(--ink-soft);text-decoration:none;transition:background .25s,color .25s}
.pg-toc a:hover{color:var(--ink-deep);background:var(--bg-subtle)}
.pg-toc a.is-on{background:var(--pg-band-2);color:#fff}
:root[data-theme="dark"] .pg-toc a.is-on{background:var(--highlight);color:#10243A}

/* ---------- cartes (constats, contexte) ---------- */
.pg-signs{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr))}
.pg-card{--c:var(--pg-s1);position:relative;overflow:hidden;background:var(--bg-elevated);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(1.3rem,2.4vw,1.8rem);min-width:0;transition:transform .45s var(--pg-spring),box-shadow .45s,border-color .3s}
.pg-card::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--c);transform-origin:left;transform:scaleX(.18);transition:transform .7s var(--pg-ease)}
.pg-card::after{content:"";position:absolute;inset:0;background:radial-gradient(360px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--c) 14%,transparent),transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none}
.pg-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:color-mix(in srgb,var(--c) 45%,var(--line))}
.pg-card:hover::before,.pg-r.is-in .pg-card::before,.pg-r.is-in.pg-card::before,.pg-force .pg-card::before{transform:scaleX(1)}
.pg-card:hover::after{opacity:1}
.pg-card .n{display:block;font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.14em;color:var(--c);margin-bottom:1.1rem;filter:brightness(.82)}
.pg-card h3{font-size:1.18rem;line-height:1.28;color:var(--ink-deep);margin:0 0 .6rem}
.pg-card p{margin:0;color:var(--ink-soft);line-height:1.65}
.pg-card .pg-more{display:inline-flex;align-items:center;gap:.4rem;margin-top:1rem;font-weight:600;color:var(--ink-deep);text-decoration:none}
.pg-card .pg-more::after{content:"\2192";transition:transform .3s var(--pg-spring)}
.pg-card:hover .pg-more::after{transform:translateX(5px)}
.pg-card:nth-child(5n+1){--c:var(--pg-s1)}.pg-card:nth-child(5n+2){--c:var(--pg-s2)}.pg-card:nth-child(5n+3){--c:var(--pg-s3)}.pg-card:nth-child(5n+4){--c:var(--pg-s4)}.pg-card:nth-child(5n+5){--c:var(--pg-s5)}
.pg-tag,.pg-dur{display:inline-block;font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase}
.pg-tag{color:var(--ink-muted)}
.pg-dur{color:var(--ink-soft);background:var(--bg-subtle);border-radius:var(--radius-pill);padding:.25rem .75rem;max-width:100%;overflow-wrap:anywhere;text-transform:none;letter-spacing:.02em}
.pg-meta{display:flex;justify-content:space-between;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:.9rem}

/* ---------- explorateur ---------- */
.pg-explorer{display:grid;gap:var(--space-5);grid-template-columns:minmax(0,17rem) minmax(0,1fr);align-items:start}
.pg-tabs{display:none;gap:.4rem}
.pg-js .pg-tabs{display:grid;position:sticky;top:calc(var(--pg-nav) + 3.5rem)}
.pg-tab{--c:var(--pg-s1);position:relative;overflow:hidden;text-align:left;display:grid;grid-template-columns:1.9rem 1fr;gap:.7rem;align-items:center;padding:.85rem 1rem;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--bg-elevated);color:var(--ink-soft);font:inherit;font-weight:500;cursor:pointer;transition:transform .35s var(--pg-spring),background .25s,border-color .25s,color .25s}
.pg-tab i{font-style:normal;font-family:var(--font-mono);font-size:.78rem;display:grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:50%;background:color-mix(in srgb,var(--c) 18%,transparent);color:var(--ink-deep)}
.pg-tab:hover{transform:translateX(4px);border-color:color-mix(in srgb,var(--c) 50%,var(--line))}
.pg-tab[aria-selected="true"]{background:color-mix(in srgb,var(--c) 14%,var(--bg-elevated));border-color:var(--c);color:var(--ink-deep);font-weight:600;transform:translateX(8px)}
.pg-tab[aria-selected="true"] i{background:var(--c);color:#10243A}
.pg-tab::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--c);transform:scaleX(0);transform-origin:left}
.pg-tab.is-timing::after{animation:pgTime var(--t,6s) linear forwards}
@keyframes pgTime{to{transform:scaleX(1)}}
.pg-tab:focus-visible{outline:2px solid var(--ink-deep);outline-offset:2px}
.pg-panels{display:grid;gap:var(--space-4)}
.pg-panel{--c:var(--pg-s1);background:var(--bg-elevated);border:1px solid var(--line);border-radius:var(--radius-xl);padding:clamp(1.4rem,3vw,2.4rem);position:relative;overflow:hidden;contain:paint;min-width:0}
.pg-panel::before{content:attr(data-n);position:absolute;right:.6rem;top:-.6rem;font-family:var(--font-display);font-weight:700;font-size:clamp(4rem,11vw,8rem);line-height:1;color:color-mix(in srgb,var(--c) 14%,transparent);pointer-events:none}
.pg-panel h3{font-size:clamp(1.3rem,2.4vw,1.8rem);line-height:1.2;color:var(--ink-deep);margin:0 0 .8rem;max-width:22ch;position:relative}
.pg-panel p{margin:0;color:var(--ink-soft);line-height:1.75;max-width:56ch;position:relative;font-size:1.04rem}
.pg-panel .pg-more{position:relative;display:inline-flex;gap:.4rem;margin-top:1.2rem;font-weight:600;color:var(--ink-deep);text-decoration:none;border-bottom:2px solid var(--c)}
.pg-panel .pg-meta{position:relative}
.pg-js .pg-panel.is-active{animation:pgPanel .55s var(--pg-ease)}
@keyframes pgPanel{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
.pg-panel:nth-child(5n+1),.pg-tab:nth-child(5n+1){--c:var(--pg-s1)}.pg-panel:nth-child(5n+2),.pg-tab:nth-child(5n+2){--c:var(--pg-s2)}.pg-panel:nth-child(5n+3),.pg-tab:nth-child(5n+3){--c:var(--pg-s3)}.pg-panel:nth-child(5n+4),.pg-tab:nth-child(5n+4){--c:var(--pg-s4)}.pg-panel:nth-child(5n+5),.pg-tab:nth-child(5n+5){--c:var(--pg-s5)}

/* ---------- chronologie ---------- */
.pg-tl{list-style:none;margin:0;padding:0;position:relative;display:grid;gap:clamp(1rem,2vw,1.5rem);--p:0}
.pg-tl::before{content:"";position:absolute;left:1.35rem;top:1rem;bottom:1rem;width:3px;border-radius:3px;background:var(--line-strong)}
.pg-tl::after{content:"";position:absolute;left:1.35rem;top:1rem;width:3px;border-radius:3px;height:calc((100% - 2rem) * var(--p));background:linear-gradient(var(--pg-s1),var(--pg-s3),var(--pg-s4));transition:height .15s linear}
.pg-tl li{position:relative;display:grid;grid-template-columns:2.8rem minmax(0,1fr);gap:clamp(.9rem,2vw,1.6rem);align-items:start}
.pg-tl .b{position:relative;z-index:1;width:2.8rem;height:2.8rem;border-radius:50%;display:grid;place-items:center;font-family:var(--font-mono);font-weight:600;background:var(--bg);border:2px solid var(--line-strong);color:var(--ink-muted);transition:background .4s,border-color .4s,color .4s,transform .5s var(--pg-spring)}
.pg-sec--alt .pg-tl .b{background:var(--bg-subtle)}
.pg-tl li.is-done .b{background:var(--ink-deep);border-color:var(--ink-deep);color:var(--bg);transform:scale(1.08)}
:root[data-theme="dark"] .pg-tl li.is-done .b{background:var(--highlight);border-color:var(--highlight);color:#10243A}
.pg-tl .c{background:var(--bg-elevated);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(1.1rem,2.2vw,1.6rem);transition:transform .45s var(--pg-spring),box-shadow .4s,border-color .3s}
.pg-tl .c:hover{transform:translateX(6px);box-shadow:var(--shadow-md);border-color:var(--highlight)}
.pg-tl h3{margin:0 0 .4rem;font-size:1.15rem;line-height:1.3;color:var(--ink-deep)}
.pg-tl p{margin:0;color:var(--ink-soft);line-height:1.7;max-width:62ch}

/* ---------- diagramme des durees ---------- */
.pg-gantt{margin:0 0 clamp(2rem,4vw,3rem);background:var(--bg-elevated);border:1px solid var(--line);border-radius:var(--radius-xl);padding:clamp(1.2rem,3vw,2rem);box-shadow:var(--shadow-sm)}
.pg-gantt figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 1.5rem;margin-bottom:1.2rem;font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted)}
.pg-key{display:flex;gap:1rem;flex-wrap:wrap;text-transform:none;letter-spacing:.02em}
.pg-key span::before{content:"";display:inline-block;width:.9rem;height:.5rem;border-radius:3px;margin-right:.4rem;vertical-align:middle;background:var(--pg-bar)}
.pg-key span+span::before{background:var(--pg-range)}
.pg-key span+span+span::before{background:repeating-linear-gradient(135deg,var(--pg-bar) 0 4px,transparent 4px 8px)}
.pg-g{display:grid;gap:.35rem}
.pg-g__row,.pg-g__axis{display:grid;grid-template-columns:5rem minmax(7rem,13rem) minmax(0,1fr) minmax(7rem,9.5rem);gap:1rem;align-items:center}
.pg-g__row{padding:.45rem .4rem;border-radius:var(--radius-md);transition:background .25s}
.pg-g__row:hover{background:var(--bg-subtle)}
.pg-g__row .code{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--ink-muted);overflow-wrap:anywhere}
.pg-g__row .name{font-weight:600;color:var(--ink-deep);line-height:1.25}
.pg-g__row .val{font-size:var(--fs-sm);color:var(--ink-soft);text-align:right}
.pg-g__track{position:relative;height:1.1rem;border-radius:var(--radius-pill);background:repeating-linear-gradient(90deg,transparent 0 calc(100% / var(--tk,4) - 1px),var(--line) calc(100% / var(--tk,4) - 1px) calc(100% / var(--tk,4)))}
.pg-g__track i{position:absolute;top:0;bottom:0;border-radius:var(--radius-pill);transform-origin:left}
.pg-g__track .s{left:0;width:var(--a);background:var(--pg-bar)}
.pg-g__track .r{left:var(--a);width:calc(var(--b) - var(--a));background:var(--pg-range);border-radius:0 var(--radius-pill) var(--radius-pill) 0}
.pg-g__track .m{left:0;width:var(--a);background:var(--pg-bar);border-radius:var(--radius-pill) 0 0 var(--radius-pill)}
.pg-g__track .o{left:var(--a);right:0;background:repeating-linear-gradient(135deg,var(--pg-bar) 0 6px,transparent 6px 12px);opacity:.6;border-radius:0 var(--radius-pill) var(--radius-pill) 0;-webkit-mask-image:linear-gradient(90deg,#000,transparent);mask-image:linear-gradient(90deg,#000,transparent)}
.pg-g__track .o.f{left:0;border-radius:var(--radius-pill)}
.pg-js .pg-g__track i{transform:scaleX(0);transition:transform 1.1s var(--pg-ease);transition-delay:calc(var(--k)*110ms)}
.pg-js .pg-g.is-in .pg-g__track i,.pg-force .pg-g__track i{transform:scaleX(1)}
.pg-g__axis{padding:0 .4rem;margin-top:.2rem;font-family:var(--font-mono);font-size:.7rem;color:var(--ink-muted)}
.pg-g--nc .pg-g__row,.pg-g--nc .pg-g__axis{grid-template-columns:minmax(7rem,14rem) minmax(0,1fr) minmax(7rem,9.5rem)}
.pg-g--nc .pg-g__row [hidden]{display:none}
.pg-g--nc .pg-g__axis div{grid-column:2}
.pg-g__axis div{grid-column:3;display:flex;justify-content:space-between}
@media (max-width:760px){
  .pg-g__row,.pg-g__axis{grid-template-columns:3.4rem minmax(0,1fr) auto;gap:.3rem .8rem}
  .pg-g__row .pg-g__track{grid-column:1/-1;order:5}
  .pg-g__axis div{grid-column:1/-1}
  .pg-g--nc .pg-g__row,.pg-g--nc .pg-g__axis{grid-template-columns:minmax(0,1fr) auto}
  .pg-g--nc .pg-g__axis div{grid-column:1/-1}
}

/* ---------- offres ---------- */
.pg-offers{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr))}
.pg-card .pg-bar{margin-top:1.2rem;height:.5rem;border-radius:var(--radius-pill);background:var(--bg-subtle);overflow:hidden}
.pg-card .pg-bar i{display:block;height:100%;width:var(--w);background:var(--c);border-radius:inherit;transform-origin:left}
.pg-js .pg-card .pg-bar i{transform:scaleX(0);transition:transform 1.2s var(--pg-ease) .2s}
.pg-js .pg-r.is-in .pg-bar i,.pg-js .pg-r.is-in.pg-card .pg-bar i,.pg-force .pg-bar i{transform:scaleX(1)}

/* ---------- pour qui ---------- */
.pg-two{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr))}
.pg-who{background:var(--bg-elevated);border:1px solid var(--line);border-radius:var(--radius-xl);padding:clamp(1.4rem,3vw,2.2rem)}
.pg-who--no{background:transparent;border-style:dashed}
.pg-who .pg-tag{margin-bottom:1.1rem;display:block}
.pg-list{list-style:none;margin:0;padding:0;display:grid;gap:.85rem}
.pg-list li{position:relative;padding-left:2rem;color:var(--ink-soft);line-height:1.55}
.pg-list li::before{content:"";position:absolute;left:0;top:.1rem;width:1.3rem;height:1.3rem;border-radius:50%;background:color-mix(in srgb,var(--pg-s4) 20%,transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 6.8' fill='none' stroke='%232F9A78' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat}
.pg-list--no li::before{background:var(--bg-subtle) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 6l8 8M14 6l-8 8' fill='none' stroke='%238A8F98' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/70% no-repeat}

/* ---------- usages ---------- */
.pg-uses{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.pg-use{--c:var(--pg-s3);position:relative;display:flex;flex-direction:column;background:color-mix(in srgb,var(--c) 9%,var(--bg-elevated));border:1px solid color-mix(in srgb,var(--c) 28%,var(--line));border-radius:var(--radius-lg);padding:clamp(1.3rem,2.4vw,1.8rem);transition:transform .45s var(--pg-spring),box-shadow .4s}
.pg-use:hover{transform:translateY(-6px) rotate(-.4deg);box-shadow:var(--shadow-md)}
.pg-use:nth-child(4n+1){--c:var(--pg-s3)}.pg-use:nth-child(4n+2){--c:var(--pg-s4)}.pg-use:nth-child(4n+3){--c:var(--pg-s5)}.pg-use:nth-child(4n+4){--c:var(--pg-s2)}
.pg-use .ico{width:2.6rem;height:2.6rem;border-radius:.9rem;background:var(--c);color:#fff;display:grid;place-items:center;font-family:var(--font-mono);font-weight:600;margin-bottom:1.1rem}
.pg-use h3{font-size:1.1rem;line-height:1.3;color:var(--ink-deep);margin:0 0 .55rem}
.pg-use p{margin:0;color:var(--ink-soft);line-height:1.65}
.pg-use .pg-more{margin-top:auto;padding-top:1rem;font-weight:600;color:var(--ink-deep);text-decoration:none}
.pg-use .pg-more::after{content:" \2192"}

/* ---------- preuve / resultat ---------- */
.pg-result{position:relative;overflow:hidden;color:var(--pg-band-ink);border-radius:var(--radius-xl);padding:clamp(1.6rem,4vw,3rem);background:radial-gradient(90% 120% at 100% 0%,#24507F,transparent 60%),linear-gradient(160deg,var(--pg-band-2),var(--pg-band));display:grid;gap:clamp(1.5rem,4vw,3rem);grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;margin-bottom:var(--space-4)}
.pg-result h3{margin:0 0 .6rem;color:var(--pg-band-soft);font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;font-weight:500}
.pg-result__big{font-family:var(--font-display);font-weight:700;font-size:clamp(4rem,12vw,8.5rem);line-height:.9;letter-spacing:-.05em;color:var(--pg-s1);text-shadow:0 0 50px color-mix(in srgb,var(--pg-s1) 45%,transparent);display:flex;align-items:baseline;gap:.1em}
.pg-result__big i{font-style:normal;color:#fff;font-size:.5em;letter-spacing:0}
.pg-result .lab{margin:.8rem 0 0;color:var(--pg-band-soft);font-size:var(--fs-lead)}
.pg-result .txt{margin:1rem 0 0;color:var(--pg-band-soft);line-height:1.7;max-width:46ch}
.pg-result .txt a{color:#fff}
.pg-result .pg-more{display:inline-block;margin-top:1rem;color:#fff;font-weight:600;border-bottom:2px solid var(--pg-s1);text-decoration:none}
.pg-bars{display:flex;align-items:flex-end;justify-content:center;gap:clamp(1.5rem,5vw,3.5rem);padding:0 .5rem}
.pg-bars>div{flex:0 1 9rem;display:flex;flex-direction:column;align-items:stretch;gap:.6rem;text-align:center;font-size:var(--fs-sm);color:var(--pg-band-soft)}
.pg-bars b{font-family:var(--font-display);font-size:1.7rem;color:#fff}
.pg-bars .bar{display:flex;align-items:flex-end;height:14rem;border-bottom:1px solid rgba(255,255,255,.3)}
.pg-bars i{position:relative;display:block;width:100%;height:var(--h);border-radius:var(--radius-md) var(--radius-md) 0 0;background:rgba(255,255,255,.3);transform-origin:bottom}
.pg-bars u{position:absolute;left:0;right:0;top:0;height:var(--g);text-decoration:none;display:grid;place-items:center;border-radius:var(--radius-md) var(--radius-md) 0 0;background:linear-gradient(var(--pg-s1),#E6CF93);box-shadow:0 0 40px 4px color-mix(in srgb,var(--pg-s1) 55%,transparent)}
.pg-bars u::before{content:"";position:absolute;right:100%;bottom:0;width:clamp(1.5rem,5vw,3.5rem);border-top:2px dashed rgba(255,255,255,.6)}
.pg-bars em{font-style:normal;font-family:var(--font-display);font-weight:700;font-size:clamp(1.1rem,2.4vw,1.6rem);color:#10243A;letter-spacing:-.02em}
.pg-js .pg-bars i{transform:scaleY(0);transition:transform 1.1s var(--pg-ease) .3s}
.pg-js .pg-bars>div:last-child i{transition-delay:.7s}
.pg-js .pg-bars u{opacity:0;transition:opacity .6s ease 1.5s}
.pg-js .pg-result.is-in .pg-bars i,.pg-force .pg-bars i{transform:scaleY(1)}
.pg-js .pg-result.is-in .pg-bars u,.pg-force .pg-bars u{opacity:1}
.pg-cap{grid-column:1/-1;margin:0;font-size:var(--fs-xs);color:var(--pg-band-soft);opacity:.85}
@media (max-width:820px){.pg-result{grid-template-columns:1fr}}

/* ---------- FAQ ---------- */
.pg-faq{display:grid;gap:.7rem;max-width:52rem}
.pg-faq details{background:var(--bg-elevated);border:1px solid var(--line);border-radius:var(--radius-lg);transition:border-color .3s,box-shadow .3s}
.pg-faq details:hover{border-color:var(--line-strong)}
.pg-faq details[open]{border-color:var(--highlight);box-shadow:var(--shadow-sm)}
.pg-faq summary{cursor:pointer;list-style:none;display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:center;padding:1.15rem 1.4rem;font-weight:600;color:var(--ink-deep);line-height:1.35}
.pg-faq summary::-webkit-details-marker{display:none}
.pg-faq summary::after{content:"+";display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:var(--bg-subtle);font-weight:400;font-size:1.3rem;line-height:1;transition:transform .4s var(--pg-spring),background .3s}
.pg-faq details[open] summary::after{transform:rotate(135deg);background:var(--highlight-soft)}
.pg-faq summary:focus-visible{outline:2px solid var(--ink-deep);outline-offset:2px;border-radius:var(--radius-lg)}
.pg-faq .a{padding:0 1.4rem 1.3rem;color:var(--ink-soft);line-height:1.75;overflow:hidden}
.pg-faq .a p{margin:0;max-width:62ch}

/* ---------- pages liees ---------- */
.pg-links{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr))}
.pg-links a{--c:var(--pg-s1);position:relative;display:flex;flex-direction:column;gap:.35rem;background:var(--bg-elevated);border:1px solid var(--line);border-left:4px solid var(--c);border-radius:var(--radius-lg);padding:1.2rem 1.4rem 1.2rem 1.3rem;text-decoration:none;color:var(--ink-deep);transition:transform .45s var(--pg-spring),box-shadow .35s}
.pg-links a:nth-child(5n+2){--c:var(--pg-s2)}.pg-links a:nth-child(5n+3){--c:var(--pg-s3)}.pg-links a:nth-child(5n+4){--c:var(--pg-s4)}.pg-links a:nth-child(5n+5){--c:var(--pg-s5)}
.pg-links a:hover,.pg-links a:focus-visible{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.pg-links b{display:flex;justify-content:space-between;gap:.5rem}
.pg-links b::after{content:"\2192";transition:transform .35s var(--pg-spring)}
.pg-links a:hover b::after{transform:translateX(6px)}
.pg-links span{color:var(--ink-soft);font-size:var(--fs-sm);line-height:1.5}

/* ---------- appel final ---------- */
.pg-final{position:relative;overflow:hidden;color:var(--pg-band-ink);text-align:center;margin:clamp(1rem,3vw,2rem) clamp(.5rem,2vw,1.5rem);border-radius:clamp(1.5rem,4vw,3rem);padding-block:clamp(3.5rem,8vw,6rem);background:linear-gradient(160deg,var(--pg-band-2),var(--pg-band));isolation:isolate}
.pg-final h2{color:#fff;margin-inline:auto;max-width:20ch}
.pg-final .pg-intro{margin-inline:auto;color:var(--pg-band-soft)}
.pg-final .pg-intro a{color:#fff}
.pg-final .pg-cta{justify-content:center}
.pg-final .btn--primary{position:relative}
.pg-final .btn--primary::after{content:"";position:absolute;inset:-4px;border-radius:inherit;border:2px solid var(--pg-s1);opacity:0;animation:pgRing 2.8s ease-out infinite;pointer-events:none}
@keyframes pgRing{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(1.18,1.5)}}
.pg-note{font-size:var(--fs-sm);color:var(--pg-band-soft);margin-top:var(--space-5);opacity:.85}

/* ---------- petits ecrans, mouvement reduit ---------- */
@media (max-width:900px){
  .pg-hero__in{grid-template-columns:1fr}
  .pg-explorer{grid-template-columns:minmax(0,1fr)}
  .pg-tabs{min-width:0}
  .pg-js .pg-tabs{position:static;display:flex;overflow-x:auto;scrollbar-width:none;padding-bottom:.3rem}
  .pg-tab{flex:0 0 auto;grid-template-columns:1.9rem auto}
  .pg-tab[aria-selected="true"],.pg-tab:hover{transform:none}
}
@media (max-width:520px){.pg-tl li{grid-template-columns:2.3rem minmax(0,1fr)}.pg-tl .b{width:2.3rem;height:2.3rem}.pg-tl::before,.pg-tl::after{left:1.1rem}}
@media (prefers-reduced-motion:reduce){
  .pg-js .pg-r,.pg-js .pg-g__track i,.pg-js .pg-bars i,.pg-js .pg-bars u,.pg-js .pg-card .pg-bar i{opacity:1!important;transform:none!important;transition:none!important}
  .pg-orb,.pg-map ol::after,.pg-pill i,.pg-final .btn--primary::after,.pg-map li.is-on i,.pg-hero h1 .w>span,.pg-lead,.pg-hero .pg-cta,.pg-map,.pg-map li,.pg-facts li{animation:none!important}
  .pg-card::before{transform:scaleX(1)}
}