/* ============================================================ Pages produit (/produits/*.html, servies via rewrites /renoboost…) Feuille dédiée et légère : ces pages ne chargent PAS style.css (72 Ko pensés pour l'accueil) — uniquement design.css (tokens) + ce fichier. Tokens sémantiques partout : dark-ready d'office. La teinte par produit suit la même convention que le catalogue (data-produit sur → --brique / --brique-texte). ============================================================ */ body.pp { margin: 0; font-family: var(--font-body); background: var(--color-bg); color: var(--color-text); line-height: var(--leading-normal); } .pp * { box-sizing: border-box; } body.pp[data-produit="renoboost"] { --brique: var(--sky-500); --brique-texte: var(--sky-700); } body.pp[data-produit="renorelance"] { --brique: var(--amber-500); --brique-texte: var(--amber-700); } body.pp[data-produit="renopredict"] { --brique: var(--violet-500); --brique-texte: var(--violet-700); } :root[data-theme="dark"] body.pp[data-produit="renoboost"] { --brique-texte: var(--sky-400); } :root[data-theme="dark"] body.pp[data-produit="renorelance"] { --brique-texte: var(--amber-500); } :root[data-theme="dark"] body.pp[data-produit="renopredict"] { --brique-texte: var(--violet-400); } /* ── Navigation compacte (pas de burger : 3 actions, pas un menu) ── */ .pp-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem clamp(1rem, 4vw, 2.5rem); border-bottom: 1px solid var(--color-border); background: var(--color-surface); position: sticky; top: 0; z-index: var(--z-sticky); } .pp-logo { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-display); font-weight: var(--font-bold); font-size: 1.05rem; color: var(--color-text); text-decoration: none; } .pp-logo strong { color: var(--color-primary); } .pp-logo-icon { display: inline-flex; color: var(--amber-500); } .pp-nav-right { display: flex; align-items: center; gap: 1rem; } .pp-nav-retour { font-size: var(--text-sm); color: var(--color-text-muted); text-decoration: none; } .pp-nav-retour:hover { color: var(--color-text); text-decoration: underline; } /* ── Boutons ── */ .pp-btn { display: inline-flex; align-items: center; gap: .5rem; border: none; border-radius: var(--radius-full); font-family: var(--font-body); font-weight: var(--font-semibold); font-size: var(--text-sm); padding: .55rem 1.1rem; cursor: pointer; transition: background var(--transition-fast), transform var(--transition-fast); } .pp-btn-primary { background: var(--color-primary); color: var(--color-primary-contrast, var(--white)); } .pp-btn-primary:hover { background: var(--color-primary-hover); transform: translateY(-1px); } .pp-btn-lg { font-size: var(--text-base); padding: .8rem 1.6rem; } .js-rdv[aria-busy="true"] { cursor: progress; opacity: .75; } /* ── En-tête produit ── */ .pp-hero { max-width: 780px; margin: 0 auto; padding: clamp(2.5rem, 7vw, 4.5rem) 1.25rem 2.5rem; text-align: center; border-bottom: 3px solid var(--brique, var(--color-primary)); } .pp-etape { display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 1rem; font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--font-bold); color: var(--color-text); } .pp-num { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--radius-full); background: var(--brique-texte, var(--color-primary)); color: var(--color-text-invert); font-size: var(--text-xs); } .pp-titre { margin: 0 0 .5rem; font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--font-bold); line-height: var(--leading-tight); } .pp-marque { display: flex; align-items: center; justify-content: center; gap: .6rem; margin: 0 0 1.25rem; font-weight: var(--font-semibold); color: var(--brique-texte, var(--color-primary)); } .pp-promesse { margin: 0 auto 1.75rem; max-width: 560px; font-size: var(--text-lg); color: var(--color-text-muted); } .pp-hero-cta { display: flex; flex-direction: column; align-items: center; gap: .6rem; } .pp-cta-note { margin: 0; font-size: var(--text-sm); color: var(--color-text-subtle); } /* Badges d'état — mêmes classes que le catalogue de l'accueil, redéclarées ici car ces pages ne chargent pas style.css. Contrastes AA vérifiés (≥ 4,5:1). */ .catalogue-badge { font-size: var(--text-xs); font-weight: var(--font-semibold); letter-spacing: .02em; padding: .2rem .55rem; border-radius: var(--radius-full); white-space: nowrap; } .catalogue-badge--operationnel { color: var(--emerald-700); background: var(--color-success-soft); } .catalogue-badge--beta { color: var(--violet-700); background: var(--color-info-soft); } :root[data-theme="dark"] .catalogue-badge--operationnel { color: var(--emerald-500); } :root[data-theme="dark"] .catalogue-badge--beta { color: var(--violet-400); } /* ── Corps ── */ .pp-main { max-width: 780px; margin: 0 auto; padding: 0 1.25rem 3rem; } .pp-section { padding: 2.25rem 0 0; } .pp-section h2 { margin: 0 0 .9rem; font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--font-bold); } .pp-section p { margin: 0 0 .75rem; color: var(--color-text-muted); } .pp-besoin { font-style: italic; color: var(--color-text) !important; border-left: 3px solid var(--brique, var(--color-primary)); padding-left: .9rem; } .pp-note { font-size: var(--text-sm); color: var(--color-text-subtle); } .pp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 1.1rem; } .pp-carte { padding: 1.2rem 1.1rem; background: var(--color-surface); border: 1px solid var(--color-border); border-top: 3px solid var(--brique, var(--color-primary)); border-radius: var(--radius-md); } .pp-carte h3 { margin: 0 0 .45rem; font-family: var(--font-display); font-size: var(--text-base); font-weight: var(--font-bold); } .pp-carte p { margin: 0; font-size: var(--text-sm); } .pp-section-liens { border-top: 1px solid var(--color-border); margin-top: 2.25rem; } .pp-lien-catalogue { font-weight: var(--font-semibold); color: var(--color-text-link); text-decoration: none; } .pp-lien-catalogue:hover { text-decoration: underline; } .pp-cta-finale { margin-top: 2.75rem; padding: 2.25rem 1.5rem; text-align: center; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); } .pp-cta-finale h2 { margin: 0 0 .5rem; font-family: var(--font-display); font-size: var(--text-2xl); } .pp-cta-finale p { margin: 0 0 1.25rem; color: var(--color-text-muted); } /* ── Pied de page ── */ .pp-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; max-width: 780px; margin: 0 auto; padding: 1.5rem 1.25rem 2.5rem; border-top: 1px solid var(--color-border); font-size: var(--text-sm); color: var(--color-text-subtle); } .pp-footer p { margin: 0; } .pp-footer-liens { display: flex; gap: 1rem; } .pp-footer-liens a { color: var(--color-text-muted); text-decoration: none; } .pp-footer-liens a:hover { text-decoration: underline; } @media (max-width: 640px) { .pp-grid { grid-template-columns: 1fr; } .pp-nav-retour { display: none; } /* le logo ramène déjà à l'accueil */ } /* ── Aperçu du dashboard (maquette déplacée depuis l'accueil, décision 2C) ── Fenêtre sombre par design (elle imite l'app) : identique en clair et sombre. Données fictives → légende obligatoire, cf. générateur. */ .pp-apercu { max-width: 620px; margin: 1rem auto 0; } .pp-apercu-legende { margin: .6rem 0 0; text-align: center; font-size: var(--text-xs); color: var(--color-text-subtle); } .preview-window { background: #1e293b; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.5); } .preview-bar { display: flex; align-items: center; gap: .5rem; padding: .8rem 1rem; background: rgba(0,0,0,.3); border-bottom: 1px solid rgba(255,255,255,.06); } .pw-dot { width: 10px; height: 10px; border-radius: 50%; } .pw-dot.r { background: #ef4444; } .pw-dot.y { background: var(--orange); } .pw-dot.g { background: var(--accent); } .preview-bar span { margin-left: .5rem; font-size: .72rem; color: rgba(255,255,255,.3); } .preview-body { padding: 1rem; } .preview-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin-bottom: 1rem; } .pk { background: rgba(255,255,255,.05); border-radius: 10px; padding: .8rem; text-align: center; } .pk-num { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 1.2rem; font-weight: 700; } .pk-num.green { color: var(--accent); } .pk-num.blue { color: var(--primary); } .pk-num.orange { color: var(--orange); } .pk-lbl { font-size: .65rem; color: rgba(255,255,255,.4); margin-top: .2rem; display: block; } .preview-table { background: rgba(0,0,0,.2); border-radius: 10px; overflow: hidden; font-size: .75rem; } .pt-head { display: grid; grid-template-columns: 2fr 1.5fr 1.5fr 1.5fr; padding: .5rem .8rem; background: rgba(255,255,255,.05); color: rgba(255,255,255,.35); font-size: .65rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; gap: .5rem; } .pt-row { display: grid; grid-template-columns: 2fr 1.5fr 1.5fr 1.5fr; padding: .55rem .8rem; border-top: 1px solid rgba(255,255,255,.04); color: rgba(255,255,255,.7); align-items: center; gap: .5rem; } .pt-badge { display: inline-block; padding: .18rem .55rem; border-radius: 100px; font-size: .65rem; font-weight: 700; } .pt-badge.green { background: rgba(16,185,129,.2); color: #34d399; } .pt-badge.blue { background: rgba(14,165,233,.2); color: #38bdf8; } .pt-badge.orange { background: rgba(245,158,11,.2); color: #fbbf24; } .pt-badge.purple { background: rgba(139,92,246,.2); color: #a78bfa; }