/* ============================================================================
Pay4All — feuille de style des pages marketing
----------------------------------------------------------------------------
Design moderne SaaS (inspiration rendez-vous.ai, linear.app, vercel.com) :
- Contenu encadré dans 1100 px max, centré
- Chaque section est un BLOC rounded distinct (pas du full-bleed)
- Hero glassy avec gradient + halo derrière le titre
- Bento-grid pour features / audience
- Cards avec hover lift + accent gradient sur la bordure
- Animations à l'apparition (scale + fade)
- Dark mode auto
Charger ce fichier en tête de page :
========================================================================== */
/* --------------------------------------------------------------------------
Wrapper global — TOUT le contenu marketing est contenu dans 1100px max,
centré, avec une respiration verticale entre chaque section.
-------------------------------------------------------------------------- */
.p4all-marketing {
/* Design tokens */
--p4-max: 1100px;
--p4-pad-x: clamp(1.25rem, 4vw, 2.5rem);
--p4-pad-y: clamp(3rem, 6vw, 5rem);
--p4-radius-sm: 0.75rem;
--p4-radius: 1.25rem;
--p4-radius-lg: 1.75rem;
--p4-radius-xl: 2.25rem;
/* Light palette (default) */
--p4-bg: #ffffff;
--p4-surface: #ffffff;
--p4-soft: #f8fafc;
--p4-text: #0f172a;
--p4-text-soft: #475569;
--p4-text-mute: #64748b;
--p4-border: #e2e8f0;
--p4-accent: #2563eb;
--p4-accent-hover: #1d4ed8;
--p4-accent-soft: #dbeafe;
--p4-accent-glow: rgba(37, 99, 235, 0.3);
--p4-accent-text: #ffffff;
--p4-success: #16a34a;
--p4-success-soft: #dcfce7;
--p4-shadow-sm: 0 1px 2px rgba(15,23,42,0.04), 0 1px 3px rgba(15,23,42,0.06);
--p4-shadow: 0 4px 12px rgba(15,23,42,0.06), 0 2px 4px rgba(15,23,42,0.04);
--p4-shadow-lg: 0 16px 40px rgba(15,23,42,0.08), 0 6px 12px rgba(15,23,42,0.05);
--p4-shadow-xl: 0 24px 60px rgba(15,23,42,0.12), 0 8px 20px rgba(15,23,42,0.08);
/* Layout : container 1100px centré + respiration */
max-width: var(--p4-max);
margin: 0 auto;
padding: clamp(1.5rem, 3vw, 3rem) var(--p4-pad-x);
display: flex;
flex-direction: column;
gap: clamp(2rem, 4vw, 3.5rem);
color: var(--p4-text);
font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
font-feature-settings: "cv11", "ss03";
-webkit-font-smoothing: antialiased;
}
/* Variantes par produit — accent personnalisé */
/* Toutes les variantes utilisent la même teinte violette Pay4All ; le
* suffixe `-twint`, `-shop`, `-stripe`, `-age`, `-pro` est conservé pour
* permettre une éventuelle divergence future sans repasser sur tout le HTML. */
.p4all-marketing-twint { --p4-accent: #7c3aed; --p4-accent-hover: #6d28d9; --p4-accent-soft: #ede9fe; --p4-accent-glow: rgba(124,58,237,0.3); }
.p4all-marketing-shop { --p4-accent: #7c3aed; --p4-accent-hover: #6d28d9; --p4-accent-soft: #ede9fe; --p4-accent-glow: rgba(124,58,237,0.3); }
.p4all-marketing-stripe { --p4-accent: #7c3aed; --p4-accent-hover: #6d28d9; --p4-accent-soft: #ede9fe; --p4-accent-glow: rgba(124,58,237,0.3); }
.p4all-marketing-age { --p4-accent: #7c3aed; --p4-accent-hover: #6d28d9; --p4-accent-soft: #ede9fe; --p4-accent-glow: rgba(124,58,237,0.3); }
.p4all-marketing-pro { --p4-accent: #7c3aed; --p4-accent-hover: #6d28d9; --p4-accent-soft: #ede9fe; --p4-accent-glow: rgba(124,58,237,0.3); }
/* Dark mode — aligné sur app.css :
* - → toujours sombre
* - → auto + JS a détecté dark
* - + OS prefers-dark → fallback sans JS
* Le pattern écarte le cas data-theme="light" même si l'OS est en dark.
* -------------------------------------------------------------------------- */
html[data-theme="dark"] .p4all-marketing,
html[data-theme="auto"][data-prefers="dark"] .p4all-marketing {
--p4-bg: #0b1120;
--p4-surface: #131c30;
--p4-soft: #0f172a;
--p4-text: #e2e8f0;
--p4-text-soft: #cbd5e1;
--p4-text-mute: #94a3b8;
--p4-border: rgba(148,163,184,0.18);
--p4-accent-soft: rgba(37,99,235,0.18);
--p4-success-soft: rgba(22,163,74,0.18);
--p4-shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
--p4-shadow: 0 8px 24px rgba(0,0,0,0.35), 0 2px 4px rgba(0,0,0,0.25);
--p4-shadow-lg: 0 20px 50px rgba(0,0,0,0.5), 0 8px 16px rgba(0,0,0,0.3);
--p4-shadow-xl: 0 30px 70px rgba(0,0,0,0.6);
color-scheme: dark;
}
html[data-theme="dark"] .p4all-marketing-twint,
html[data-theme="dark"] .p4all-marketing-shop,
html[data-theme="dark"] .p4all-marketing-stripe,
html[data-theme="dark"] .p4all-marketing-age,
html[data-theme="dark"] .p4all-marketing-pro,
html[data-theme="auto"][data-prefers="dark"] .p4all-marketing-twint,
html[data-theme="auto"][data-prefers="dark"] .p4all-marketing-shop,
html[data-theme="auto"][data-prefers="dark"] .p4all-marketing-stripe,
html[data-theme="auto"][data-prefers="dark"] .p4all-marketing-age,
html[data-theme="auto"][data-prefers="dark"] .p4all-marketing-pro { --p4-accent-soft: rgba(124,58,237,0.18); }
@media (prefers-color-scheme: dark) {
html[data-theme="auto"] .p4all-marketing {
--p4-bg: #0b1120;
--p4-surface: #131c30;
--p4-soft: #0f172a;
--p4-text: #e2e8f0;
--p4-text-soft: #cbd5e1;
--p4-text-mute: #94a3b8;
--p4-border: rgba(148,163,184,0.18);
--p4-accent-soft: rgba(37,99,235,0.18);
--p4-success-soft: rgba(22,163,74,0.18);
--p4-shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
--p4-shadow: 0 8px 24px rgba(0,0,0,0.35), 0 2px 4px rgba(0,0,0,0.25);
--p4-shadow-lg: 0 20px 50px rgba(0,0,0,0.5), 0 8px 16px rgba(0,0,0,0.3);
--p4-shadow-xl: 0 30px 70px rgba(0,0,0,0.6);
color-scheme: dark;
}
html[data-theme="auto"] .p4all-marketing-twint,
html[data-theme="auto"] .p4all-marketing-shop,
html[data-theme="auto"] .p4all-marketing-stripe,
html[data-theme="auto"] .p4all-marketing-age,
html[data-theme="auto"] .p4all-marketing-pro { --p4-accent-soft: rgba(124,58,237,0.18); }
}
/* --------------------------------------------------------------------------
Reset minimal scopé + typo de base
-------------------------------------------------------------------------- */
.p4all-marketing *,
.p4all-marketing *::before,
.p4all-marketing *::after { box-sizing: border-box; }
.p4all-marketing img, .p4all-marketing svg { max-width: 100%; height: auto; display: block; }
.p4all-marketing h1,
.p4all-marketing h2,
.p4all-marketing h3,
.p4all-marketing h4 {
margin: 0 0 0.75rem;
line-height: 1.15;
letter-spacing: -0.025em;
font-weight: 700;
color: var(--p4-text);
}
.p4all-marketing h1 { font-size: clamp(2.25rem, 5.5vw, 3.75rem); letter-spacing: -0.035em; font-weight: 800; line-height: 1.05; }
.p4all-marketing h2 { font-size: clamp(1.65rem, 3.2vw, 2.5rem); }
.p4all-marketing h3 { font-size: clamp(1.05rem, 1.6vw, 1.2rem); }
.p4all-marketing p { margin: 0 0 1rem; color: var(--p4-text-soft); }
.p4all-marketing a { color: var(--p4-accent); text-decoration: none; font-weight: 500; transition: color .15s; }
.p4all-marketing a:hover { color: var(--p4-accent-hover); }
.p4all-marketing ul { margin: 0 0 1rem; padding-left: 1.25rem; }
.p4all-marketing li { margin-bottom: 0.35rem; color: var(--p4-text-soft); }
.p4all-marketing code { font: 0.88em / 1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--p4-soft); padding: 0.1em 0.45em; border-radius: 0.35em; color: var(--p4-text); }
.p4all-marketing em { font-style: normal; color: var(--p4-text); font-weight: 500; }
.p4all-marketing strong { color: var(--p4-text); }
/* --------------------------------------------------------------------------
Sections génériques = blocs ronds avec leur propre fond
-------------------------------------------------------------------------- */
.p4all-marketing > section {
background: var(--p4-surface);
border: 1px solid var(--p4-border);
border-radius: var(--p4-radius-lg);
padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3rem);
box-shadow: var(--p4-shadow-sm);
position: relative;
}
.p4all-marketing > section > h2 { text-align: center; }
.p4all-marketing .section-lead {
text-align: center;
color: var(--p4-text-soft);
max-width: 680px;
margin: 0 auto 2.5rem;
font-size: 1.05rem;
line-height: 1.6;
}
/* Petits badges/tags inline — utilisés pour afficher un prix ou un statut
* à côté d'un nom de produit. Variante `.tag-free` en vert pour les offres
* gratuites. */
.p4all-marketing .tag {
display: inline-block;
background: var(--p4-accent-soft);
color: var(--p4-accent);
font-size: 0.78rem;
font-weight: 600;
padding: 0.18rem 0.6rem;
border-radius: 999px;
vertical-align: middle;
letter-spacing: 0.02em;
white-space: nowrap;
}
.p4all-marketing .tag-free {
background: var(--p4-success-soft);
color: var(--p4-success);
}
/* Petite pilule violette Pay4All qui décore les fonctionnalités débloquées
* par l'extension Pay4All Pro. Utilisée à côté des de features ou dans
* l'eyebrow d'une section pour signaler que le contenu est payant.
* Compact (font-size 10px) pour tenir sur une seule ligne sur mobile même
* accolée à un titre long. */
.p4all-marketing .pro-badge {
display: inline-block;
background: #7531E3;
color: #fff;
font-weight: 700;
font-size: 10px;
line-height: 1;
padding: 3px 8px;
border-radius: 999px;
margin-left: 6px;
vertical-align: middle;
letter-spacing: 0.03em;
text-transform: uppercase;
white-space: nowrap;
}
/* --------------------------------------------------------------------------
HERO — bloc le plus impactant : gradient, halo derrière le titre,
typo XL, double CTA
-------------------------------------------------------------------------- */
.p4all-marketing .hero {
text-align: center;
background:
radial-gradient(ellipse at top, var(--p4-accent-soft) 0%, transparent 70%),
linear-gradient(180deg, var(--p4-surface) 0%, var(--p4-soft) 100%);
border-radius: var(--p4-radius-xl);
padding: clamp(3.5rem, 7vw, 6rem) clamp(1.5rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem);
overflow: hidden;
isolation: isolate;
}
.p4all-marketing .hero::before {
content: '';
position: absolute;
top: -50%;
left: 50%;
transform: translateX(-50%);
width: 80%;
height: 100%;
background: radial-gradient(ellipse at center, var(--p4-accent-glow) 0%, transparent 60%);
filter: blur(60px);
z-index: -1;
opacity: 0.5;
pointer-events: none;
}
.p4all-marketing .hero .eyebrow {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--p4-accent);
background: var(--p4-surface);
padding: 0.5rem 1rem;
border-radius: 999px;
border: 1px solid var(--p4-border);
box-shadow: var(--p4-shadow-sm);
margin: 0 0 2rem;
}
.p4all-marketing .hero h1 {
max-width: 880px;
margin: 0 auto 1.5rem;
background: linear-gradient(135deg, var(--p4-text) 0%, var(--p4-accent) 60%, var(--p4-text) 100%);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.p4all-marketing .hero .lead {
max-width: 680px;
margin: 0 auto 2rem;
font-size: clamp(1.05rem, 1.6vw, 1.2rem);
line-height: 1.55;
color: var(--p4-text-soft);
}
.p4all-marketing .hero-meta {
font-size: 0.9rem;
color: var(--p4-text-mute);
margin-top: 1.5rem;
margin-bottom: 0;
}
/* --------------------------------------------------------------------------
Buttons
-------------------------------------------------------------------------- */
.p4all-marketing .cta-group {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
justify-content: center;
margin: 1.5rem 0 0;
}
.p4all-marketing .btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.9rem 1.85rem;
border-radius: 0.7rem;
font-weight: 600;
font-size: 0.98rem;
text-decoration: none;
transition: transform .18s cubic-bezier(.4,0,.2,1), box-shadow .18s, background .15s, color .15s;
cursor: pointer;
border: 1px solid transparent;
white-space: nowrap;
font-family: inherit;
}
.p4all-marketing .btn-primary {
background: var(--p4-accent);
color: var(--p4-accent-text);
box-shadow: 0 6px 16px var(--p4-accent-glow), 0 2px 4px rgba(0,0,0,0.06);
}
.p4all-marketing .btn-primary:hover {
background: var(--p4-accent-hover);
color: var(--p4-accent-text);
transform: translateY(-2px);
box-shadow: 0 12px 28px var(--p4-accent-glow), 0 4px 8px rgba(0,0,0,0.08);
}
.p4all-marketing .btn-secondary {
background: var(--p4-surface);
color: var(--p4-text);
border-color: var(--p4-border);
box-shadow: var(--p4-shadow-sm);
}
.p4all-marketing .btn-secondary:hover {
background: var(--p4-soft);
color: var(--p4-text);
border-color: var(--p4-accent);
transform: translateY(-2px);
box-shadow: var(--p4-shadow);
}
/* --------------------------------------------------------------------------
Stats : 5 chiffres XL en ligne (5 colonnes forcées), chacun dans son
encadré avec ombre. Le chiffre domine visuellement (police XXL en
dégradé accent), la description sous le chiffre est volontairement
discrète (police plus petite, couleur soft) pour ne pas concurrencer.
-------------------------------------------------------------------------- */
/* Le bloc .stats est transparent : pas de fond, pas de bordure, pas
* d'ombre. Chaque
est déjà un encadré à part entière (voir plus
* bas), donc l'enveloppe globale ne fait que doubler visuellement. */
.p4all-marketing .stats {
background: transparent;
border: 0;
box-shadow: none;
padding: clamp(1rem, 2vw, 1.75rem) 0;
}
.p4all-marketing .stats-list {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 0.75rem;
list-style: none;
padding: 0;
margin: 0;
text-align: center;
}
/* Variant Age : n'a que 4 compteurs (pas 5 comme Stripe / Shop) —
* on force la grille à 4 colonnes pour éviter la case vide en fin de ligne. */
.p4all-marketing-age .stats-list {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.p4all-marketing .stats-list li {
background: var(--p4-surface);
border: 1px solid var(--p4-border);
border-radius: var(--p4-radius);
padding: 1.5rem 0.85rem 1.25rem;
box-shadow: var(--p4-shadow-sm);
font-size: 0.78rem;
color: var(--p4-text-soft);
line-height: 1.35;
margin: 0;
transition: transform .2s, box-shadow .2s, border-color .2s;
/* Style "small caps" sur la description sous le chiffre — donne un
* rythme typographique fort façon SaaS premium (Linear, Vercel…). */
text-transform: uppercase;
letter-spacing: 0.03em;
font-weight: 500;
}
.p4all-marketing .stats-list li:hover {
transform: translateY(-3px);
box-shadow: var(--p4-shadow);
border-color: var(--p4-accent);
}
.p4all-marketing .stats-list strong {
display: block;
font-size: clamp(3rem, 6.5vw, 4.75rem);
background: linear-gradient(135deg, var(--p4-accent) 0%, var(--p4-accent-hover) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
line-height: 1;
margin-bottom: 0.35rem;
font-weight: 800;
letter-spacing: -0.05em;
}
/* --------------------------------------------------------------------------
Screenshots slider : carrousel d'images contrôlable au clavier ou avec
les flèches gauche / droite. Le JS pose la classe .is-active sur le
slide visible et sur le dot correspondant.
-------------------------------------------------------------------------- */
.p4all-marketing .screenshots { background: var(--p4-soft); }
.p4all-marketing .slider { position: relative; max-width: 600px; margin: 0 auto; }
.p4all-marketing .slider-viewport {
overflow: hidden;
border-radius: var(--p4-radius);
box-shadow: var(--p4-shadow-lg);
background: var(--p4-surface);
}
.p4all-marketing .slider-track {
display: flex;
transition: transform .55s cubic-bezier(.4, 0, .2, 1);
will-change: transform;
}
.p4all-marketing .slide {
flex: 0 0 100%;
margin: 0;
min-width: 0;
}
.p4all-marketing .slide img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
}
.p4all-marketing .slider-arrow {
position: absolute;
top: 50%;
width: 3rem;
height: 3rem;
margin-top: -1.5rem;
border-radius: 50%;
border: 0;
background: var(--p4-surface);
color: var(--p4-accent);
cursor: pointer;
box-shadow: var(--p4-shadow-lg);
font-size: 1.75rem;
line-height: 1;
padding: 0 0 0.15rem;
transition: transform .2s cubic-bezier(.4,0,.2,1), background .15s, color .15s;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
font-family: inherit;
}
.p4all-marketing .slider-prev { left: -1.25rem; }
.p4all-marketing .slider-next { right: -1.25rem; }
.p4all-marketing .slider-arrow:hover {
background: var(--p4-accent);
color: var(--p4-accent-text);
transform: scale(1.08);
}
.p4all-marketing .slider-arrow:focus-visible {
outline: 2px solid var(--p4-accent);
outline-offset: 2px;
}
.p4all-marketing .slider-dots {
display: flex;
justify-content: center;
gap: 0.45rem;
margin-top: 1.1rem;
padding: 0;
list-style: none;
}
.p4all-marketing .slider-dots button {
width: 0.55rem;
height: 0.55rem;
padding: 0;
border-radius: 999px;
border: 0;
background: var(--p4-border);
cursor: pointer;
transition: width .25s cubic-bezier(.4,0,.2,1), background .15s;
font-size: 0;
}
.p4all-marketing .slider-dots button[aria-current="true"] {
width: 1.6rem;
background: var(--p4-accent);
}
.p4all-marketing .slider-dots button:hover { background: var(--p4-accent); }
/* --------------------------------------------------------------------------
Icon badges : petite pastille colorée affichée avant le d'une
feature ou d'une card. Utilise le pattern Lucide (SVG stroke-based)
piloté par currentColor pour épouser la palette accent du thème.
-------------------------------------------------------------------------- */
.p4all-marketing .icon-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: 0.7rem;
background: var(--p4-accent-soft);
color: var(--p4-accent);
margin-bottom: 0.85rem;
flex-shrink: 0;
}
.p4all-marketing .icon-badge .icon {
width: 1.4rem;
height: 1.4rem;
stroke-width: 2;
}
/* Au hover de la feature/card, l'icône suit le thème actif. */
.p4all-marketing .feature:hover .icon-badge,
.p4all-marketing .card:hover .icon-badge {
background: var(--p4-accent);
color: var(--p4-accent-text);
}
/* --------------------------------------------------------------------------
Cards (audience, compatibility) — bento-grid
-------------------------------------------------------------------------- */
.p4all-marketing .card-grid {
display: grid;
gap: 1.25rem;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
/* Variante explicite "3 colonnes" pour les sections où l'on veut garantir
* la grille (compatibilité, pricing). Le auto-fill par défaut peut tomber
* en 2 colonnes sur certains écrans intermédiaires. */
.p4all-marketing .card-grid.card-grid-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.p4all-marketing .card-grid.card-grid-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 820px) {
.p4all-marketing .card-grid.card-grid-3,
.p4all-marketing .card-grid.card-grid-2 {
grid-template-columns: 1fr;
}
}
.p4all-marketing .card {
background: var(--p4-surface);
border: 1px solid var(--p4-border);
border-radius: var(--p4-radius);
padding: 1.5rem 1.6rem;
transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s, border-color .25s;
display: flex;
flex-direction: column;
gap: 0.5rem;
position: relative;
overflow: hidden;
}
/* Gradient border on hover via a pseudo */
.p4all-marketing .card::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg, var(--p4-accent) 0%, transparent 50%);
-webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity .25s;
pointer-events: none;
}
.p4all-marketing .card:hover {
transform: translateY(-4px);
box-shadow: var(--p4-shadow-lg);
border-color: transparent;
}
.p4all-marketing .card:hover::before { opacity: 1; }
.p4all-marketing .card h3 {
color: var(--p4-text);
margin-bottom: 0.3rem;
font-size: 1.05rem;
}
.p4all-marketing .card p {
margin: 0;
color: var(--p4-text-soft);
font-size: 0.92rem;
line-height: 1.55;
}
.p4all-marketing .card a { margin-top: auto; font-weight: 600; font-size: 0.92rem; }
/* --------------------------------------------------------------------------
Features bento — grille avec quelques cards plus larges
-------------------------------------------------------------------------- */
.p4all-marketing .feature-grid {
display: grid;
gap: 1.1rem;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
/* Variant Age › section « Respect de la vie privée par design » : 4 blocs
* qu'on force sur 2 colonnes pour une grille propre 2×2 (auto-fill peut
* partir en 3+1 selon la largeur). Retour à 1 colonne sous 720 px. */
.p4all-marketing-age .privacy .feature-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 720px) {
.p4all-marketing-age .privacy .feature-grid {
grid-template-columns: 1fr;
}
}
.p4all-marketing .feature {
background: var(--p4-surface);
border: 1px solid var(--p4-border);
border-radius: var(--p4-radius);
padding: 1.5rem 1.6rem;
transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s, border-color .25s;
display: flex;
flex-direction: column;
gap: 0.4rem;
position: relative;
overflow: hidden;
}
.p4all-marketing .feature::after {
content: '';
position: absolute;
top: -50%;
right: -30%;
width: 60%;
height: 100%;
background: radial-gradient(circle, var(--p4-accent-soft) 0%, transparent 70%);
opacity: 0;
transition: opacity .25s;
pointer-events: none;
}
.p4all-marketing .feature:hover {
transform: translateY(-4px);
border-color: var(--p4-accent);
box-shadow: var(--p4-shadow-lg);
}
.p4all-marketing .feature:hover::after { opacity: 0.6; }
.p4all-marketing .feature h3 {
color: var(--p4-text);
margin-bottom: 0.35rem;
font-size: 1.05rem;
position: relative;
z-index: 1;
}
.p4all-marketing .feature p {
margin: 0;
color: var(--p4-text-soft);
font-size: 0.92rem;
line-height: 1.55;
position: relative;
z-index: 1;
}
.p4all-marketing .feature ul {
margin: 0.3rem 0 0;
padding-left: 1.1rem;
font-size: 0.88rem;
color: var(--p4-text-soft);
position: relative;
z-index: 1;
}
.p4all-marketing .feature ul li { color: var(--p4-text-soft); margin-bottom: 0.2rem; }
/* --------------------------------------------------------------------------
Cards « Encaissement » + bandeaux promo à fond jaune Pay4All (#fff8e5)
Détection par attribut : n'importe quel bloc dont l'inline style contient
#fff8e5 bascule automatiquement en texte foncé, pour rester lisible en
mode clair comme en mode sombre. Aucune classe supplémentaire à ajouter
dans le HTML.
Cibles concrètes :
- .feature (cards TWINT / Cartes de crédit sur pay4all-shop)
- .pricing-promo (bandeau « Promo à vie » sur toutes les pages tarif)
-------------------------------------------------------------------------- */
.p4all-marketing [style*="#fff8e5"],
.p4all-marketing [style*="#fff8e5"] h3,
.p4all-marketing [style*="#fff8e5"] p,
.p4all-marketing [style*="#fff8e5"] strong,
.p4all-marketing [style*="#fff8e5"] a {
color: #0E1117 !important;
}
.p4all-marketing [style*="#fff8e5"] a { text-decoration: underline; }
/* --------------------------------------------------------------------------
Steps : étapes numérotées avec pastille + ligne de progression
-------------------------------------------------------------------------- */
.p4all-marketing .steps-section { background: var(--p4-soft); }
.p4all-marketing .step-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 1.5rem;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
counter-reset: p4step;
}
.p4all-marketing .step-list li {
counter-increment: p4step;
background: var(--p4-surface);
border: 1px solid var(--p4-border);
border-radius: var(--p4-radius);
padding: 2.25rem 1.5rem 1.5rem;
position: relative;
box-shadow: var(--p4-shadow-sm);
transition: transform .2s, box-shadow .2s;
}
.p4all-marketing .step-list li:hover {
transform: translateY(-3px);
box-shadow: var(--p4-shadow);
}
.p4all-marketing .step-list li::before {
content: counter(p4step);
position: absolute;
top: -1.4rem;
left: 1.5rem;
width: 2.8rem;
height: 2.8rem;
background: linear-gradient(135deg, var(--p4-accent) 0%, var(--p4-accent-hover) 100%);
color: var(--p4-accent-text);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 1.15rem;
box-shadow: 0 6px 16px var(--p4-accent-glow);
}
.p4all-marketing .step-list li h3 { font-size: 1.05rem; margin-top: 0.4rem; }
.p4all-marketing .step-list li p { margin: 0; color: var(--p4-text-soft); font-size: 0.92rem; line-height: 1.55; }
/* --------------------------------------------------------------------------
Problem / TWINT bridge — bloc accentué
-------------------------------------------------------------------------- */
.p4all-marketing .problem,
.p4all-marketing .twint {
background:
radial-gradient(ellipse at top right, var(--p4-accent-soft) 0%, transparent 60%),
var(--p4-surface);
border-color: var(--p4-accent);
box-shadow: var(--p4-shadow), 0 0 0 1px var(--p4-accent-soft);
}
.p4all-marketing .problem h2,
.p4all-marketing .twint h2 { text-align: left; }
.p4all-marketing .problem .section-lead,
.p4all-marketing .twint p { text-align: left; max-width: none; margin-bottom: 1rem; font-size: 1rem; }
/* --------------------------------------------------------------------------
Comparison table
-------------------------------------------------------------------------- */
.p4all-marketing .comparison .compare-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
margin-top: 2rem;
border-radius: var(--p4-radius);
overflow: hidden;
box-shadow: var(--p4-shadow-sm);
background: var(--p4-surface);
font-size: 0.95rem;
}
.p4all-marketing .compare-table thead {
background: linear-gradient(135deg, var(--p4-accent) 0%, var(--p4-accent-hover) 100%);
color: var(--p4-accent-text);
}
.p4all-marketing .compare-table thead th { color: var(--p4-accent-text); font-weight: 600; }
.p4all-marketing .compare-table th,
.p4all-marketing .compare-table td {
padding: 0.95rem 1.1rem;
text-align: left;
border-bottom: 1px solid var(--p4-border);
}
.p4all-marketing .compare-table tbody th {
font-weight: 600;
background: var(--p4-soft);
width: 35%;
}
/* La colonne "Pay4All Shop / Twint" du tableau de comparaison utilise la
* couleur d'accent du produit (violet sur shop, bleu sur twint) pour rester
* cohérent avec la marque, plutôt qu'un vert "succès" générique. */
.p4all-marketing .compare-table tbody td:nth-child(2) {
color: var(--p4-accent);
font-weight: 600;
}
.p4all-marketing .compare-table tbody tr:last-child th,
.p4all-marketing .compare-table tbody tr:last-child td { border-bottom: 0; }
/* --------------------------------------------------------------------------
FAQ — accordéon premium
-------------------------------------------------------------------------- */
.p4all-marketing .faq {
background: var(--p4-surface);
}
.p4all-marketing details {
background: var(--p4-soft);
border: 1px solid var(--p4-border);
border-radius: var(--p4-radius-sm);
margin-bottom: 0.7rem;
overflow: hidden;
transition: border-color .15s, background .15s, box-shadow .15s;
}
.p4all-marketing details[open] {
border-color: var(--p4-accent);
background: var(--p4-surface);
box-shadow: 0 6px 20px var(--p4-accent-glow), 0 1px 2px rgba(0,0,0,0.04);
}
.p4all-marketing details summary {
list-style: none;
cursor: pointer;
padding: 1.1rem 3.25rem 1.1rem 1.5rem;
font-weight: 600;
color: var(--p4-text);
position: relative;
user-select: none;
transition: color .15s;
font-size: 1rem;
}
.p4all-marketing details summary::-webkit-details-marker,
.p4all-marketing details summary::marker { display: none; }
.p4all-marketing details summary:hover { color: var(--p4-accent); }
.p4all-marketing details summary::after {
content: '+';
position: absolute;
right: 1.25rem;
top: 50%;
width: 1.75rem;
height: 1.75rem;
margin-top: -0.875rem;
background: var(--p4-accent);
color: var(--p4-accent-text);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
font-weight: 500;
line-height: 1;
transition: transform .25s, background .15s;
}
.p4all-marketing details[open] summary::after { content: '−'; }
.p4all-marketing details > *:not(summary) {
padding: 0 1.5rem 1.25rem;
color: var(--p4-text-soft);
margin: 0;
line-height: 1.6;
animation: p4-fade-in .25s ease-out;
}
@keyframes p4-fade-in {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
/* --------------------------------------------------------------------------
Pricing
-------------------------------------------------------------------------- */
.p4all-marketing .pricing { background: var(--p4-soft); }
.p4all-marketing .pricing-card {
text-align: center;
padding: 2.5rem 1.75rem;
background: var(--p4-surface);
}
.p4all-marketing .pricing-card.featured {
border: 2px solid var(--p4-accent);
transform: scale(1.03);
box-shadow: 0 16px 40px var(--p4-accent-glow), 0 4px 12px rgba(0,0,0,0.06);
background: linear-gradient(180deg, var(--p4-surface) 0%, var(--p4-accent-soft) 100%);
}
.p4all-marketing .pricing-card .price {
font-size: 1rem;
color: var(--p4-text-soft);
margin: 0.75rem 0 1.25rem;
}
.p4all-marketing .pricing-card .price strong {
display: block;
font-size: 2.75rem;
color: var(--p4-text);
line-height: 1;
margin-bottom: 0.4rem;
font-weight: 800;
letter-spacing: -0.03em;
}
.p4all-marketing .pricing-card .badge {
display: inline-block;
background: var(--p4-success-soft);
color: var(--p4-success);
font-size: 0.7rem;
font-weight: 600;
padding: 0.25rem 0.7rem;
border-radius: 999px;
margin-left: 0.5rem;
vertical-align: middle;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.p4all-marketing .pricing-card ul {
list-style: none;
padding: 0;
margin: 0 0 1.5rem;
text-align: left;
}
.p4all-marketing .pricing-card li {
padding: 0.5rem 0 0.5rem 1.75rem;
position: relative;
color: var(--p4-text-soft);
font-size: 0.95rem;
border-bottom: 1px solid var(--p4-border);
margin: 0;
}
.p4all-marketing .pricing-card li:last-child { border-bottom: 0; }
.p4all-marketing .pricing-card li::before {
content: "✓";
position: absolute;
left: 0;
top: 0.5rem;
color: var(--p4-success);
font-weight: 700;
width: 1.25rem;
height: 1.25rem;
background: var(--p4-success-soft);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
}
.p4all-marketing .pricing-card .btn { width: 100%; margin-top: 0.5rem; }
.p4all-marketing .pricing-note {
text-align: center;
font-size: 0.85rem;
color: var(--p4-text-mute);
margin-top: 2rem;
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
/* --------------------------------------------------------------------------
Compatibility / setup
-------------------------------------------------------------------------- */
.p4all-marketing .setup ol {
counter-reset: p4-setup;
list-style: none;
padding: 0;
max-width: 720px;
margin: 0 auto;
}
.p4all-marketing .setup ol li {
counter-increment: p4-setup;
padding: 1.1rem 0 1.1rem 3.5rem;
border-bottom: 1px solid var(--p4-border);
position: relative;
color: var(--p4-text-soft);
line-height: 1.6;
}
.p4all-marketing .setup ol li::before {
content: counter(p4-setup);
position: absolute;
left: 0;
top: 1rem;
width: 2.4rem;
height: 2.4rem;
border-radius: 50%;
background: linear-gradient(135deg, var(--p4-accent) 0%, var(--p4-accent-hover) 100%);
color: var(--p4-accent-text);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.95rem;
box-shadow: 0 4px 12px var(--p4-accent-glow);
}
.p4all-marketing .setup ol li:last-child { border-bottom: 0; }
/* --------------------------------------------------------------------------
Tutorials embed
-------------------------------------------------------------------------- */
.p4all-marketing .tutorials-section { background: var(--p4-soft); }
.p4all-marketing .tutorials-host {
background: var(--p4-surface);
border-radius: var(--p4-radius);
padding: 1.5rem;
box-shadow: var(--p4-shadow-sm);
min-height: 200px;
border: 1px solid var(--p4-border);
}
/* --------------------------------------------------------------------------
Footer CTA — bloc terminal en gradient inversé
-------------------------------------------------------------------------- */
.p4all-marketing .cta-footer {
text-align: center;
background: linear-gradient(135deg, var(--p4-accent) 0%, var(--p4-accent-hover) 100%);
color: var(--p4-accent-text);
border-color: transparent;
box-shadow: 0 16px 40px var(--p4-accent-glow);
padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 4vw, 3rem);
overflow: hidden;
position: relative;
}
.p4all-marketing .cta-footer::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 20% 30%, rgba(255,255,255,0.15) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(255,255,255,0.1) 0%, transparent 50%);
pointer-events: none;
}
.p4all-marketing .cta-footer > * { position: relative; z-index: 1; }
.p4all-marketing .cta-footer h2 {
color: var(--p4-accent-text);
max-width: 680px;
margin-left: auto;
margin-right: auto;
background: none;
-webkit-text-fill-color: var(--p4-accent-text);
}
.p4all-marketing .cta-footer p {
color: rgba(255,255,255,0.92);
max-width: 620px;
margin-left: auto;
margin-right: auto;
font-size: 1.05rem;
}
.p4all-marketing .cta-footer .btn-primary {
background: var(--p4-surface);
color: var(--p4-accent);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.p4all-marketing .cta-footer .btn-primary:hover {
background: var(--p4-surface);
color: var(--p4-accent-hover);
box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}
.p4all-marketing .cta-footer .btn-secondary {
background: transparent;
color: var(--p4-accent-text);
border-color: rgba(255,255,255,0.45);
box-shadow: none;
}
.p4all-marketing .cta-footer .btn-secondary:hover {
background: rgba(255,255,255,0.12);
color: var(--p4-accent-text);
border-color: var(--p4-accent-text);
}
/* --------------------------------------------------------------------------
Animations à l'apparition (JS pose .is-visible)
-------------------------------------------------------------------------- */
.p4all-marketing > section {
opacity: 1; /* le hero est toujours visible */
}
.p4all-marketing > section[data-animate] {
opacity: 0;
transform: translateY(24px) scale(0.985);
transition: opacity .7s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.4,0,.2,1);
}
.p4all-marketing > section[data-animate].is-visible {
opacity: 1;
transform: translateY(0) scale(1);
}
.no-js .p4all-marketing > section[data-animate] { opacity: 1; transform: none; }
/* --------------------------------------------------------------------------
Responsive
-------------------------------------------------------------------------- */
/* Tablette : 5 colonnes pour les stats reste OK jusqu'à 720px (vu que le
* container est limité à 1100px, 5 colonnes ≈ 200px/each). En dessous on
* casse en grille 2x3 pour rester lisible — la dernière case (le 0) prend
* toute la largeur. */
@media (max-width: 720px) {
.p4all-marketing .stats-list {
grid-template-columns: repeat(2, 1fr);
}
.p4all-marketing .stats-list li:last-child { grid-column: 1 / -1; }
.p4all-marketing .stats-list strong { font-size: 2.75rem; }
}
@media (max-width: 640px) {
.p4all-marketing { gap: 1.5rem; padding: 1rem var(--p4-pad-x); }
.p4all-marketing > section { padding: 2rem 1.25rem; border-radius: var(--p4-radius); }
.p4all-marketing .hero { padding: 3rem 1.25rem; border-radius: var(--p4-radius-lg); }
.p4all-marketing .compare-table { font-size: 0.85rem; }
.p4all-marketing .compare-table th,
.p4all-marketing .compare-table td { padding: 0.6rem 0.75rem; }
.p4all-marketing .pricing-card.featured { transform: none; }
/* Slider : flèches plus petites et collées à l'intérieur du cadre */
.p4all-marketing .slider-arrow { width: 2.5rem; height: 2.5rem; margin-top: -1.25rem; font-size: 1.5rem; }
.p4all-marketing .slider-prev { left: 0.5rem; }
.p4all-marketing .slider-next { right: 0.5rem; }
}