/* =====================================================================
   Save the Event · styles du groupe « prestations »
   Pages : /prestations/ et ses 5 sous-pages (numerique, papeterie,
   decor-imprime, animations, coordination).
   Chargé après /assets/site.css. Ne redéfinit aucun composant commun :
   uniquement des blocs préfixés .px-
   ===================================================================== */

/* ---------- Héros : scène en arche avec illustration ---------- */
.px-stage{position:relative;aspect-ratio:4/4.3;border-radius:999px 999px var(--r-l) var(--r-l);transform:rotate(1.5deg);overflow:hidden;display:grid;place-items:center;background:var(--mint)}
.px-stage::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(19,35,28,.05) 0 2px,transparent 2px 16px)}
.px-stage.px-sun{background:var(--sun-soft)}
.px-stage.px-coral{background:var(--coral-soft)}
.px-stage.px-lilac{background:var(--lilac)}
.px-stage.px-green{background:var(--green)}
.px-stage.px-green::before{background:repeating-linear-gradient(135deg,rgba(247,246,242,.06) 0 2px,transparent 2px 16px)}
.px-ill{position:relative;width:88%;height:auto;transform:rotate(-1.5deg);overflow:visible}
.px-ill text{font-family:var(--f-mono)}
.px-ill .sf{font-family:var(--f-serif);font-style:italic}
.px-ill .ds{font-family:var(--f-display);font-weight:780}
.px-float{animation:pxFloat 6s ease-in-out infinite}
.px-float.d2{animation-delay:-2s}
.px-float.d3{animation-delay:-4s}
.px-blink{animation:pxBlink 2.4s steps(1) infinite}
@keyframes pxFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes pxBlink{0%,70%{opacity:1}71%,100%{opacity:.25}}

/* ---------- Listes cochées (tuiles, cartes) ---------- */
.px-list{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.px-list li{display:grid;grid-template-columns:20px 1fr;gap:10px;line-height:1.4;font-size:.98rem}
.px-list svg{width:20px;height:20px;margin-top:1px;color:var(--green-2)}
.t-ink .px-list svg,.t-green .px-list svg,.card.is-dark .px-list svg{color:var(--sun)}
.t-ink .px-list li,.t-green .px-list li{color:rgba(247,246,242,.9)}

/* Prix dans une tuile ou une carte */
.px-price{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.t-ink .ptag,.t-green .ptag{background:rgba(247,246,242,.12);color:var(--paper)}
.t-ink .ptag.sun,.t-green .ptag.sun{background:var(--sun);color:var(--ink)}
.tile .px-ico{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--card);color:var(--green)}
.tile .px-ico svg{width:26px;height:26px}
.t-ink .px-ico,.t-green .px-ico{background:rgba(247,246,242,.12);color:var(--sun)}
.tile .link-arrow{min-height:44px;display:inline-flex;align-items:center}
.t-ink .link-arrow,.t-green .link-arrow{color:var(--paper)}
.px-tile-link{position:static}
.px-tile-link::after{content:"";position:absolute;inset:0;border-radius:inherit}
.tile:has(.px-tile-link){transition:transform .4s var(--spring)}
.tile:has(.px-tile-link):hover{transform:translateY(-4px) rotate(-.3deg)}

/* ---------- Mini-illustration en tête de tuile ---------- */
.px-mini{height:140px;border-radius:var(--r-m);display:grid;place-items:center;background:rgba(19,35,28,.06)}
.t-ink .px-mini,.t-green .px-mini{background:rgba(0,0,0,.16)}
.px-mini svg{height:124px;width:auto;max-width:100%;filter:drop-shadow(0 6px 10px rgba(19,35,28,.14))}

/* ---------- Démo numérique : navigateur + téléphone ---------- */
.px-demo{position:relative;display:grid;gap:18px}
.px-demo-tabs{display:flex;flex-wrap:wrap;gap:8px}
.px-demo-tabs button{min-height:44px;padding:0 16px;border:0;border-radius:999px;background:var(--card);box-shadow:inset 0 0 0 1.5px var(--line);font-weight:650;font-size:.95rem;cursor:pointer;transition:background-color .2s,color .2s,transform .3s var(--spring)}
.px-demo-tabs button:hover{transform:translateY(-2px)}
.px-demo-tabs button[aria-selected="true"]{background:var(--ink);color:var(--paper);box-shadow:none}
.px-demo-stage{position:relative;display:grid;gap:18px;align-items:end}
.px-br{position:relative;border-radius:22px;background:var(--card);box-shadow:var(--shadow-lg),inset 0 0 0 1px var(--line);overflow:hidden;min-width:0}
.px-bar{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--paper-2);border-bottom:1px solid var(--line)}
.px-bar i{width:10px;height:10px;border-radius:50%;background:var(--line);flex:none}
.px-bar i:nth-child(1){background:var(--coral)}
.px-bar i:nth-child(2){background:var(--sun)}
.px-bar i:nth-child(3){background:var(--green-2)}
.px-url{flex:1;min-width:0;margin-left:6px;padding:6px 12px;border-radius:999px;background:var(--card);font-family:var(--f-mono);font-size:.74rem;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.px-screen{position:relative;min-height:420px;--u:#0E4A37;--u2:#E8553A}
.px-panel{padding:clamp(18px,3vw,36px);display:grid;gap:18px;align-content:start}
.px-panel[hidden]{display:none}
.px-panel.is-in{animation:pxIn .45s var(--ease) both}
@keyframes pxIn{from{opacity:0;transform:translateY(10px)}}
.px-site-nav{display:flex;flex-wrap:wrap;gap:4px 16px;justify-content:center;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);padding-bottom:12px;border-bottom:1px solid var(--line)}
.px-site-nav b{color:var(--u);font-weight:500;border-bottom:1.5px solid var(--u2)}
.px-site-hero{text-align:center;display:grid;justify-items:center;gap:10px;padding:10px 0 4px}
.px-site-hero svg{width:min(260px,70%);height:auto}
.px-site-hero .k{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.px-site-hero .n{font-family:var(--f-serif);font-style:italic;font-size:clamp(2.2rem,5vw,3.6rem);line-height:1;color:var(--u)}
.px-site-hero .d{font-family:var(--f-mono);font-size:.8rem;letter-spacing:.1em;color:var(--u)}
.px-count{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.px-count span{display:grid;justify-items:center;min-width:64px;padding:8px 10px;border-radius:14px;background:var(--mint);font-family:var(--f-mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.px-count b{font-family:var(--f-display);font-size:1.5rem;letter-spacing:-.03em;color:var(--u);font-weight:750}
.px-site-cta{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.px-site-cta span{display:inline-flex;align-items:center;min-height:36px;padding:0 16px;border-radius:999px;font-weight:650;font-size:.88rem;background:var(--u);color:var(--paper)}
.px-site-cta span+span{background:transparent;color:var(--u);box-shadow:inset 0 0 0 1.5px var(--u)}
.px-site-blocks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.px-site-blocks div{border-radius:14px;background:var(--paper);padding:12px;font-size:.82rem;line-height:1.3;color:var(--ink-2)}
.px-site-blocks b{display:block;color:var(--ink);font-size:.9rem}
.px-h{font-family:var(--f-display);font-weight:750;font-size:1.35rem;letter-spacing:-.03em}
.px-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.px-kpis div{border-radius:14px;padding:12px;background:var(--paper);font-family:var(--f-mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.px-kpis b{display:block;font-family:var(--f-display);font-size:1.7rem;letter-spacing:-.04em;color:var(--ink);font-weight:750;text-transform:none}
.px-kpis div:nth-child(2){background:var(--mint)}
.px-kpis div:nth-child(4){background:var(--sun-soft)}
.px-bars{display:grid;gap:10px}
.px-bars div{display:grid;grid-template-columns:96px 1fr 36px;gap:10px;align-items:center;font-size:.86rem}
.px-bars i{height:12px;border-radius:99px;background:var(--paper-2);position:relative;overflow:hidden}
.px-bars i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:inherit;background:var(--c,var(--green-2))}
.px-bars b{font-family:var(--f-mono);font-weight:500;font-size:.8rem;text-align:right}
.px-tags{display:flex;flex-wrap:wrap;gap:6px}
.px-tags span{font-size:.8rem;padding:5px 10px;border-radius:99px;background:var(--coral-soft);color:var(--ink)}
.px-export{justify-self:start;display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 14px;border-radius:999px;background:var(--ink);color:var(--paper);font-weight:650;font-size:.85rem}
.px-tables{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.px-t{aspect-ratio:1;border-radius:50%;display:grid;place-items:center;text-align:center;background:var(--paper);box-shadow:inset 0 0 0 2px var(--line);font-size:.72rem;line-height:1.2;color:var(--ink-2);position:relative}
.px-t b{display:block;font-family:var(--f-display);font-size:1.05rem;color:var(--ink)}
.px-t.on{background:var(--mint);box-shadow:inset 0 0 0 2px var(--green-2)}
.px-t.warn{background:var(--sun-soft);box-shadow:inset 0 0 0 2px #E2BE5C}
.px-gal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.px-gal i{aspect-ratio:1;border-radius:10px;background:var(--mint)}
.px-gal i:nth-child(3n+2){background:var(--sun-soft)}
.px-gal i:nth-child(4n+3){background:var(--coral-soft)}
.px-gal i:nth-child(5n+4){background:var(--lilac)}
.px-gal i:first-child{grid-column:span 2;grid-row:span 2}
.px-qr{display:flex;align-items:center;gap:12px;font-size:.86rem;color:var(--ink-2)}
.px-qr svg{width:44px;height:44px;color:var(--ink);flex:none}
/* Téléphone */
.px-phone{position:relative;justify-self:center;width:min(280px,82%);border-radius:40px;background:var(--ink);padding:10px;box-shadow:var(--shadow-lg);z-index:2}
.px-phone::before{content:"";position:absolute;top:16px;left:50%;translate:-50% 0;width:70px;height:18px;border-radius:99px;background:#000;z-index:2}
.px-ph-screen{border-radius:31px;background:var(--card);padding:44px 18px 22px;display:grid;gap:12px;--u:#0E4A37;--u2:#E8553A;min-height:480px;align-content:start}
.px-ph-screen .t{font-family:var(--f-serif);font-style:italic;font-size:1.7rem;line-height:1;color:var(--u);text-align:center}
.px-ph-screen .s{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;text-align:center;color:var(--ink-2)}
.px-q{font-size:.8rem;font-weight:650;margin-top:4px}
.px-opts{display:flex;flex-wrap:wrap;gap:6px}
.px-opts span{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border-radius:999px;font-size:.8rem;font-weight:600;box-shadow:inset 0 0 0 1.5px var(--line)}
.px-opts span.on{background:var(--mint);box-shadow:inset 0 0 0 2px var(--green)}
.px-field{border-radius:12px;box-shadow:inset 0 0 0 1.5px var(--line);padding:9px 12px;font-size:.8rem;color:var(--ink)}
.px-field::after{content:"";display:inline-block;width:1.5px;height:1em;background:var(--coral);vertical-align:-2px;margin-left:2px;animation:pxBlink 1s steps(1) infinite}
.px-send{display:grid;place-items:center;min-height:40px;border-radius:999px;background:var(--u);color:var(--paper);font-weight:650;font-size:.86rem;margin-top:4px}
.px-demo-note{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;font-size:.92rem;color:var(--ink-2)}
.px-demo-sticker{position:absolute;z-index:3;right:-6px;top:-18px;width:96px;height:96px;display:grid;place-items:center;text-align:center;border-radius:50%;background:var(--sun);color:var(--ink);font-family:var(--f-display);font-weight:800;font-size:.8rem;line-height:.95;text-transform:uppercase;transform:rotate(10deg);clip-path:polygon(50% 0,59% 9%,71% 4%,75% 16%,88% 15%,86% 28%,97% 33%,91% 45%,100% 54%,90% 62%,94% 75%,82% 78%,79% 91%,67% 88%,59% 100%,50% 92%,41% 100%,33% 88%,21% 91%,18% 78%,6% 75%,10% 62%,0 54%,9% 45%,3% 33%,14% 28%,12% 15%,25% 16%,29% 4%,41% 9%)}
@media (max-width:699.98px){
  .px-screen{min-height:0}
  .px-site-blocks{grid-template-columns:1fr}
  .px-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .px-tables{grid-template-columns:repeat(3,minmax(0,1fr))}
  .px-bars div{grid-template-columns:78px 1fr 30px}
  .px-demo-sticker{width:78px;height:78px;font-size:.68rem;right:-4px;top:-14px}
}
@media (min-width:1080px){
  .px-demo-stage{grid-template-columns:minmax(0,1fr) 300px;gap:0}
  .px-phone{width:300px;margin-left:-60px;margin-bottom:-28px;transform:rotate(3deg)}
  .px-screen{min-height:470px}
}

/* ---------- Matrice « quand c'est inclus » ---------- */
.px-matrix-w{border-radius:var(--r-l);overflow:hidden;background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.px-matrix{width:100%;border-collapse:collapse}
.px-matrix th,.px-matrix td{padding:16px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);font-size:.97rem}
.px-matrix thead th{font-family:var(--f-mono);font-weight:500;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);background:var(--paper-2)}
.px-matrix tbody th{font-family:var(--f-display);font-weight:700;font-size:1.15rem;letter-spacing:-.02em}
.px-matrix tbody th small{display:block;font-family:var(--f-body);font-weight:500;font-size:.88rem;color:var(--ink-2);letter-spacing:0;margin-top:4px}
.px-matrix tbody tr:last-child > *{border-bottom:0}
.px-yes,.px-opt,.px-no{display:inline-flex;align-items:center;gap:6px;font-weight:650;font-size:.92rem}
.px-yes svg{width:20px;height:20px;color:var(--green-2)}
.px-opt{font-family:var(--f-mono);font-weight:500;font-size:.85rem;background:var(--sun-soft);padding:4px 10px;border-radius:99px}
.px-no{color:var(--ink-2);font-weight:500}
@media (max-width:859.98px){
  .px-matrix,.px-matrix tbody,.px-matrix tr,.px-matrix th,.px-matrix td{display:block}
  .px-matrix-w{background:transparent;box-shadow:none;border-radius:0;overflow:visible}
  .px-matrix thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .px-matrix tbody tr{background:var(--card);border-radius:var(--r-m);box-shadow:inset 0 0 0 1px var(--line);margin-bottom:12px;padding:6px 0}
  .px-matrix tbody th{border-bottom:1px dashed var(--line)}
  .px-matrix td{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:10px 18px;border-bottom:1px dashed var(--line)}
  .px-matrix td::before{content:attr(data-l);font-family:var(--f-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);flex:1}
  .px-matrix tbody tr > *:last-child{border-bottom:0}
}

/* ---------- Tableau comparatif (animations) ---------- */
.px-compare{display:grid;gap:14px}
@media (min-width:860px){.px-compare{grid-template-columns:repeat(3,minmax(0,1fr))}}
.px-cmp{border-radius:var(--r-l);background:var(--card);box-shadow:inset 0 0 0 1px var(--line);padding:26px;display:grid;gap:14px;align-content:start}
.px-cmp h3{font-size:1.5rem;letter-spacing:-.03em}
.px-cmp dl{margin:0;display:grid;gap:0}
.px-cmp dl div{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:12px;padding:10px 0;border-bottom:1px dashed var(--line)}
.px-cmp dl div:last-child{border-bottom:0}
.px-cmp dt{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);padding-top:3px}
.px-cmp dd{margin:0;font-size:.97rem}
.px-cmp .best{display:inline-flex;align-self:start;justify-self:start;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;background:var(--coral-soft);color:var(--coral-ink);padding:5px 10px;border-radius:99px}
.px-cmp:nth-child(2){background:var(--mint);box-shadow:none}
.px-cmp:nth-child(3){background:var(--sun-soft);box-shadow:none}

/* ---------- Exemple de calcul (papeterie) ---------- */
.px-calc{border-radius:var(--r-l);background:var(--ink);color:var(--paper);padding:clamp(22px,3vw,36px);display:grid;gap:16px}
.px-calc .label{color:var(--sun)}
.px-calc h3{font-size:clamp(1.5rem,2.4vw,2rem);letter-spacing:-.035em}
.px-calc dl{margin:0;display:grid}
.px-calc dl div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px dashed rgba(247,246,242,.25);align-items:baseline}
.px-calc dt{min-width:0}
.px-calc dd{margin:0;font-family:var(--f-mono);font-size:.95rem;white-space:nowrap}
.px-calc dl div.tot{border-bottom:0;padding-top:16px}
.px-calc .tot dt{font-weight:700}
.px-calc .tot dd{font-family:var(--f-display);font-weight:780;font-size:1.8rem;letter-spacing:-.03em;color:var(--sun)}
.px-calc p{font-size:.9rem;color:rgba(247,246,242,.78)}

/* ---------- Collections (papeterie) ---------- */
.px-colls{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.px-coll{display:grid;gap:14px;align-content:start}
.px-coll-v{position:relative;aspect-ratio:5/3.6;border-radius:var(--r-l);display:grid;place-items:center;overflow:hidden}
.px-coll-v .card-p{height:84%;width:auto;aspect-ratio:5/7;background:var(--card);border-radius:4px;box-shadow:var(--shadow-lg);display:grid;align-content:center;justify-items:center;gap:8px;padding:10px;text-align:center;transform:rotate(-4deg);transition:transform .5s var(--spring);container-type:inline-size}
.px-coll-v .card-p svg{width:84%;height:auto}
.px-coll-v .card-p .n{font-family:var(--f-serif);font-style:italic;font-size:max(15px,13cqw);line-height:1;color:var(--u)}
.px-coll-v .card-p .k{font-family:var(--f-mono);font-size:max(8px,5cqw);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.px-coll:hover .card-p{transform:rotate(2deg) translateY(-6px)}
.px-coll h3{font-size:1.35rem;letter-spacing:-.03em}
.px-coll p{color:var(--ink-2);font-size:.97rem}

/* ---------- Bloc « pour quel événement » ---------- */
.px-events{display:grid;gap:24px}
.px-events .chips{gap:8px}
.px-ev-h{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin:0 0 10px}
@media (min-width:960px){.px-events{grid-template-columns:.8fr 1.2fr;gap:64px;align-items:start}.px-events .sec-head{margin-bottom:0}}

/* ---------- Divers ---------- */
.px-split-vis{position:relative;border-radius:var(--r-xl);padding:clamp(20px,4vw,48px);display:grid;place-items:center;background:var(--paper-2);overflow:hidden}
.px-split-vis svg{width:100%;max-width:520px;height:auto}
.px-split-vis.mint{background:var(--mint)}
.px-split-vis.sun{background:var(--sun-soft)}
.px-split-vis.coral{background:var(--coral-soft)}
.px-split-copy{display:grid;gap:18px;align-content:start}
.px-split-copy h2{font-size:clamp(2rem,4.4vw,3.4rem);letter-spacing:-.04em;line-height:.98;font-variation-settings:"wdth" 86}
.px-split-copy p{color:var(--ink-2);max-width:56ch}
.px-note{font-size:.92rem;color:var(--ink-2);max-width:72ch}
.px-two{display:grid;gap:14px}
@media (min-width:860px){.px-two{grid-template-columns:repeat(2,minmax(0,1fr))}}
.px-coord-more{margin-top:14px}
.band.green .px-list svg{color:var(--sun)}

@media (prefers-reduced-motion:reduce){
  .px-float,.px-blink,.px-field::after,.px-panel.is-in{animation:none!important}
  .px-coll-v .card-p,.tile:has(.px-tile-link),.px-demo-tabs button{transition:none}
}

/* ---------- Tuile large : texte + niveaux ---------- */
.px-wide{display:grid;gap:16px}
.px-lv{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.px-lv li{display:grid;gap:4px;padding:14px 16px;border-radius:var(--r-m);background:rgba(247,246,242,.08)}
.px-lv li:last-child{background:var(--sun);color:var(--ink)}
.px-lv li:last-child .label{color:var(--green)}
.px-lv b{font-family:var(--f-display);font-size:1.15rem;letter-spacing:-.02em}
@media (min-width:1080px){.px-wide{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:40px;align-items:start}.px-lv{grid-template-columns:repeat(3,minmax(0,1fr))}}
.cards.px-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,264px),1fr))}
.phero-vis .px-stage ~ .stamp{background:var(--paper)}
.px-tables{max-width:620px}
.px-gal{max-width:640px}
@media (min-width:1080px){.px-panel{padding-right:96px}}