/* ReflexPrinting — Module "pages pro" : humanisation + modules interactifs. Branché sur les pages métiers, packs, FAQ, guide, assistant IA. Objectif : pleine largeur desktop, accents colorés maîtrisés, modules vivants. Une couleur d'accent par page via [data-pp-accent] sur (défaut bleu/violet). */ :root{ --pp-accent:#1d4ed8; --pp-accent2:#7c3aed; --pp-ink:#0b1f3a; --pp-soft:#64748b; --pp-line:#e7ecf4; } body[data-pp-accent="orange"]{--pp-accent:#ea580c;--pp-accent2:#f59e0b} body[data-pp-accent="bleu"]{--pp-accent:#1d4ed8;--pp-accent2:#0ea5e9} body[data-pp-accent="violet"]{--pp-accent:#7c3aed;--pp-accent2:#d946ef} body[data-pp-accent="ardoise"]{--pp-accent:#0f766e;--pp-accent2:#f59e0b} body[data-pp-accent="vert"]{--pp-accent:#0f9d58;--pp-accent2:#1d4ed8} /* ----- Pleine largeur : on élargit le conteneur historique ----- */ .pp-wide .wrap, .wrap.pp-wide{max-width:1240px} .pp-full{width:100%} /* ===== 1) Bandeau chiffres clés animés (pleine largeur) ===== */ .pp-stats{background:linear-gradient(120deg,var(--pp-accent),var(--pp-accent2));color:#fff;padding:34px 24px} .pp-stats-in{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .pp-stat{text-align:center} .pp-stat .n{font-size:clamp(26px,4vw,40px);font-weight:800;letter-spacing:-.02em;line-height:1} .pp-stat .l{font-size:13.5px;opacity:.92;margin-top:6px;font-weight:600} @media(max-width:760px){.pp-stats-in{grid-template-columns:repeat(2,1fr);gap:22px 14px}} /* ===== 2) Sélecteur de besoin (configurateur express) ===== */ .pp-need{max-width:1240px;margin:0 auto;padding:8px 24px} .pp-need-chips{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0 18px} .pp-chip{border:1.5px solid var(--pp-line);background:#fff;border-radius:999px;padding:10px 18px;font-weight:700;font-size:14px;color:#33425e;cursor:pointer;transition:.15s} .pp-chip:hover{border-color:var(--pp-accent);color:var(--pp-accent)} .pp-chip.on{background:linear-gradient(120deg,var(--pp-accent),var(--pp-accent2));color:#fff;border-color:transparent;box-shadow:0 6px 18px rgba(13,30,70,.18)} .pp-need-out{background:#f6f8fc;border:1px solid var(--pp-line);border-radius:18px;padding:20px 22px;min-height:96px} .pp-need-out h4{font-size:16px;margin:0 0 6px;color:var(--pp-ink)} .pp-need-out p{margin:0 0 12px;color:var(--pp-soft);font-size:14.5px} .pp-need-out .recs{display:flex;flex-wrap:wrap;gap:8px} .pp-need-out .recs a{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--pp-line);border-radius:10px;padding:9px 13px;font-size:13.5px;font-weight:700;color:var(--pp-accent);transition:.15s} .pp-need-out .recs a:hover{border-color:var(--pp-accent);transform:translateY(-1px)} /* ===== 3) Comparatif supports + avis ===== */ .pp-cmp{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px} .pp-cmp .c{border:1px solid var(--pp-line);border-radius:16px;padding:18px;background:#fff;transition:.16s;position:relative;overflow:hidden} .pp-cmp .c::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(var(--pp-accent),var(--pp-accent2))} .pp-cmp .c:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(13,30,70,.1)} .pp-cmp .c h4{font-size:16px;margin:0 0 4px} .pp-cmp .c .u{font-size:13px;color:var(--pp-soft);margin:0 0 10px;min-height:34px} .pp-cmp .c .px{font-size:13px;font-weight:800;color:var(--pp-accent)} .pp-cmp .c .go{margin-top:8px;font-size:13px;font-weight:800;color:var(--pp-accent2)} .pp-avis{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-top:18px} .pp-av{border:1px solid var(--pp-line);border-radius:16px;padding:18px;background:#fff} .pp-av .stars{color:#f59e0b;font-size:15px;letter-spacing:2px} .pp-av p{margin:8px 0 12px;font-size:14.5px;color:#33425e;line-height:1.55} .pp-av .who{display:flex;align-items:center;gap:10px} .pp-av .who img{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid #fff;box-shadow:0 2px 8px rgba(8,15,35,.16)} .pp-av .who b{font-size:13.5px}.pp-av .who span{display:block;font-size:12px;color:var(--pp-soft)} /* ===== 4) Galerie photos réalisations (pleine largeur) ===== */ .pp-gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;max-width:1240px;margin:0 auto;padding:0 24px} .pp-gal a, .pp-gal figure{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:4/3;margin:0;display:block;background:#eef3fb} .pp-gal img{width:100%;height:100%;object-fit:cover;display:block;transition:.4s} .pp-gal a:hover img, .pp-gal figure:hover img{transform:scale(1.06)} .pp-gal figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 12px 10px;color:#fff;font-weight:700;font-size:13px;background:linear-gradient(transparent,rgba(8,15,35,.8))} /* ===== Titres de section communs ===== */ .pp-sec{padding:46px 0} .pp-sec .wrap{max-width:1240px} .pp-h{max-width:1240px;margin:0 auto 18px;padding:0 24px} .pp-h .eyebrow{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--pp-accent);background:color-mix(in srgb,var(--pp-accent) 12%,#fff);border:1px solid color-mix(in srgb,var(--pp-accent) 22%,#fff);padding:5px 12px;border-radius:999px;margin-bottom:10px} .pp-h h2{font-size:clamp(22px,3vw,28px);letter-spacing:-.02em;margin:0 0 6px;color:var(--pp-ink)} .pp-h p{color:var(--pp-soft);font-size:15.5px;max-width:680px;margin:0} .pp-band{background:#f6f8fc}