/* ============================================================ TOURAK ACADEMY — Design system boutique formation (shop.css) Marque : dégradé indigo #6366f1 → violet #8b5cf6, accent rose #ec4899 Portée : classes préfixées fs- uniquement (aucun style global). Thèmes : clair par défaut, sombre via [data-theme="dark"] (+ fallback prefers-color-scheme). Mobile-first 360px → 1440px, zéro débordement horizontal. ============================================================ */ /* ------------------------------------------------------------ 1. TOKENS ------------------------------------------------------------ */ :root { --fs-indigo: #6366f1; --fs-indigo-deep: #4f46e5; --fs-violet: #8b5cf6; --fs-rose: #ec4899; --fs-grad: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); --fs-grad-full: linear-gradient(135deg, #6366f1 0%, #8b5cf6 55%, #ec4899 125%); --fs-grad-soft: linear-gradient(135deg, rgba(99, 102, 241, .10) 0%, rgba(139, 92, 246, .09) 55%, rgba(236, 72, 153, .07) 100%); --fs-bg: #f8f9fc; --fs-bg-alt: #f1f2f9; --fs-surface: #ffffff; --fs-surface-2: #f3f4fb; --fs-text: #17172e; --fs-text-2: #46465c; --fs-muted: #6b7280; --fs-border: #e5e7f2; --fs-border-strong: #d4d7ea; --fs-link: #4f46e5; --fs-tint: rgba(99, 102, 241, .08); --fs-tint-strong: rgba(99, 102, 241, .14); --fs-ring: rgba(99, 102, 241, .45); --fs-star: #f59e0b; --fs-ok: #059669; --fs-ok-bg: #ecfdf5; --fs-ok-border: rgba(5, 150, 105, .28); --fs-err: #dc2626; --fs-err-bg: #fef2f2; --fs-err-border: rgba(220, 38, 38, .28); --fs-shadow-sm: 0 1px 2px rgba(23, 23, 46, .05), 0 1px 3px rgba(23, 23, 46, .07); --fs-shadow-md: 0 2px 4px rgba(23, 23, 46, .04), 0 6px 16px -6px rgba(23, 23, 46, .10); --fs-shadow-lg: 0 4px 12px rgba(23, 23, 46, .06), 0 22px 48px -18px rgba(79, 70, 229, .22); --fs-shadow-card: 0 1px 2px rgba(23, 23, 46, .05), 0 10px 28px -14px rgba(79, 70, 229, .16); --fs-shadow-btn: 0 8px 20px -8px rgba(99, 102, 241, .55); --fs-radius-sm: 10px; --fs-radius: 16px; --fs-radius-lg: 22px; --fs-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --fs-font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif; --fs-speed: .25s; --fs-ease: cubic-bezier(.22, .61, .36, 1); --fs-nav-h: 84px; --fs-bar-top: 60px; /* hauteur de la nav fixe une fois réduite au scroll */ } /* Thème sombre — piloté par le site via data-theme sur */ [data-theme="dark"] { --fs-bg: #0a0a1a; --fs-bg-alt: #0e0e22; --fs-surface: #14142e; --fs-surface-2: #1b1b3a; --fs-text: #f2f2fa; --fs-text-2: #b8b8ce; --fs-muted: #8d8da6; --fs-border: rgba(255, 255, 255, .09); --fs-border-strong: rgba(255, 255, 255, .17); --fs-link: #a5b4fc; --fs-tint: rgba(99, 102, 241, .14); --fs-tint-strong: rgba(99, 102, 241, .22); --fs-grad-soft: linear-gradient(135deg, rgba(99, 102, 241, .16) 0%, rgba(139, 92, 246, .13) 55%, rgba(236, 72, 153, .10) 100%); --fs-ok-bg: rgba(5, 150, 105, .14); --fs-err-bg: rgba(220, 38, 38, .14); --fs-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --fs-shadow-md: 0 4px 10px rgba(0, 0, 0, .45); --fs-shadow-lg: 0 22px 48px -18px rgba(0, 0, 0, .6); --fs-shadow-card: 0 1px 2px rgba(0, 0, 0, .35), 0 12px 30px -16px rgba(0, 0, 0, .55); --fs-shadow-btn: 0 8px 22px -8px rgba(99, 102, 241, .45); } /* Fallback : préférence système quand le site n'impose pas le clair */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --fs-bg: #0a0a1a; --fs-bg-alt: #0e0e22; --fs-surface: #14142e; --fs-surface-2: #1b1b3a; --fs-text: #f2f2fa; --fs-text-2: #b8b8ce; --fs-muted: #8d8da6; --fs-border: rgba(255, 255, 255, .09); --fs-border-strong: rgba(255, 255, 255, .17); --fs-link: #a5b4fc; --fs-tint: rgba(99, 102, 241, .14); --fs-tint-strong: rgba(99, 102, 241, .22); --fs-grad-soft: linear-gradient(135deg, rgba(99, 102, 241, .16) 0%, rgba(139, 92, 246, .13) 55%, rgba(236, 72, 153, .10) 100%); --fs-ok-bg: rgba(5, 150, 105, .14); --fs-err-bg: rgba(220, 38, 38, .14); --fs-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --fs-shadow-md: 0 4px 10px rgba(0, 0, 0, .45); --fs-shadow-lg: 0 22px 48px -18px rgba(0, 0, 0, .6); --fs-shadow-card: 0 1px 2px rgba(0, 0, 0, .35), 0 12px 30px -16px rgba(0, 0, 0, .55); --fs-shadow-btn: 0 8px 22px -8px rgba(99, 102, 241, .45); } } /* ------------------------------------------------------------ 2. BASE / LAYOUT ------------------------------------------------------------ */ .fs-shop, .fs-page, .fs-error-page { font-family: var(--fs-font); color: var(--fs-text); overflow-x: clip; /* aucun débordement horizontal, sticky préservé */ -webkit-font-smoothing: antialiased; } .fs-shop *, .fs-shop *::before, .fs-shop *::after, .fs-page *, .fs-page *::before, .fs-page *::after, .fs-error-page *, .fs-error-page *::before, .fs-error-page *::after { box-sizing: border-box; min-width: 0; } .fs-shop img, .fs-page img, .fs-error-page img { max-width: 100%; height: auto; } .fs-shop [hidden], .fs-page [hidden], .fs-error-page [hidden] { display: none !important; } .fs-container { width: 100%; max-width: 1160px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 32px); } .fs-container-narrow { max-width: 800px; } /* Pages « simples » (checkout, merci, abonnement, erreur) : dégager la nav fixe */ .fs-page { padding: clamp(104px, 15vw, 148px) 0 clamp(56px, 8vw, 88px); } .fs-checkout, .fs-merci, .fs-abo { background: radial-gradient(48rem 26rem at 90% -8%, rgba(139, 92, 246, .10), transparent 60%), radial-gradient(38rem 24rem at -12% 12%, rgba(99, 102, 241, .08), transparent 55%); } /* Ancres internes : ne pas passer sous la nav fixe */ #fs-catalogue, #fs-comparatif, #fs-pourquoi, #fs-avis, #fs-faq, #fs-abo-souscrire { scroll-margin-top: calc(var(--fs-nav-h) + 16px); } /* ------------------------------------------------------------ 3. TYPOGRAPHIE / TITRES ------------------------------------------------------------ */ .fs-title { font-family: var(--fs-font-display); font-size: clamp(1.7rem, 4.2vw, 2.35rem); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; margin: .4rem 0 1.1rem; color: var(--fs-text); text-wrap: balance; } .fs-section { padding: clamp(48px, 7vw, 84px) 0; } .fs-section-alt { background: var(--fs-bg-alt); border-block: 1px solid var(--fs-border); } .fs-section-head { max-width: 660px; margin: 0 auto clamp(1.8rem, 4vw, 2.8rem); text-align: center; } .fs-section-head h2, .fs-section-title { font-family: var(--fs-font-display); font-size: clamp(1.45rem, 3.2vw, 1.95rem); font-weight: 700; line-height: 1.2; letter-spacing: -.015em; color: var(--fs-text); margin: 0 0 .55rem; text-wrap: balance; } .fs-section-title { text-align: center; margin-bottom: clamp(1.4rem, 3vw, 2.1rem); } .fs-section-head p { color: var(--fs-text-2); font-size: 1rem; line-height: 1.65; margin: 0; } /* ------------------------------------------------------------ 4. ICÔNES / ÉTOILES ------------------------------------------------------------ */ svg.fs-icon, svg.fs-ic { flex: none; display: inline-block; vertical-align: middle; } /* Certains SVG inline n'ont pas d'attributs width/height : taille par défaut. :where() = spécificité nulle, pour que les tailles contextuelles gagnent. */ :where(svg.fs-icon:not([width])) { width: 20px; height: 20px; } :where(svg.fs-icon-lg:not([width])) { width: 42px; height: 42px; } .fs-stars { display: inline-flex; gap: 2px; color: var(--fs-star); } .fs-stars svg { flex: none; } /* ------------------------------------------------------------ 5. BOUTONS ------------------------------------------------------------ */ .fs-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-family: var(--fs-font); font-size: .95rem; font-weight: 600; line-height: 1.2; padding: .72rem 1.4rem; border-radius: 999px; border: 1.5px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; -webkit-tap-highlight-color: transparent; transition: transform var(--fs-speed) var(--fs-ease), box-shadow var(--fs-speed) var(--fs-ease), background-color var(--fs-speed) var(--fs-ease), border-color var(--fs-speed) var(--fs-ease), color var(--fs-speed) var(--fs-ease), filter var(--fs-speed) var(--fs-ease); } .fs-btn svg { flex: none; width: 18px; height: 18px; } .fs-btn-sm svg { width: 15px; height: 15px; } .fs-btn:focus-visible { outline: 3px solid var(--fs-ring); outline-offset: 2px; } .fs-btn:active { transform: translateY(0) scale(.985); } /* Primaire : dégradé de marque */ .fs-btn-primary { background-image: var(--fs-grad); color: #fff; box-shadow: var(--fs-shadow-btn); } .fs-btn-primary:hover { color: #fff; transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 14px 30px -10px rgba(99, 102, 241, .6); } /* Fantôme : action secondaire discrète */ .fs-btn-ghost { background: var(--fs-tint); color: var(--fs-link); } .fs-btn-ghost:hover { background: var(--fs-tint-strong); color: var(--fs-link); transform: translateY(-2px); } /* Secondaire : accent rose */ .fs-btn-secondary { background-image: linear-gradient(135deg, var(--fs-rose) 0%, var(--fs-violet) 120%); color: #fff; box-shadow: 0 8px 20px -8px rgba(236, 72, 153, .5); } .fs-btn-secondary:hover { color: #fff; transform: translateY(-2px); filter: brightness(1.06); } /* Sur fond dégradé (CTA final) */ .fs-btn-light { background: #fff; color: var(--fs-indigo-deep); box-shadow: 0 10px 26px -10px rgba(10, 10, 26, .45); } .fs-btn-light:hover { color: var(--fs-indigo-deep); transform: translateY(-2px); box-shadow: 0 16px 34px -12px rgba(10, 10, 26, .55); } .fs-btn-outline { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .65); color: #fff; } .fs-btn-outline:hover { background: rgba(255, 255, 255, .14); border-color: #fff; color: #fff; transform: translateY(-2px); } /* Tailles / variantes */ .fs-btn-sm { font-size: .84rem; padding: .5rem 1rem; } .fs-btn-lg { font-size: 1.02rem; padding: .92rem 1.8rem; } .fs-btn-block { display: flex; width: 100%; white-space: normal; text-align: center; } .fs-btn-download { box-shadow: 0 14px 32px -10px rgba(99, 102, 241, .65); } /* ------------------------------------------------------------ 6. BADGES / ALERTES ------------------------------------------------------------ */ .fs-badge { display: inline-flex; align-items: center; gap: .4rem; padding: .32rem .8rem; border-radius: 999px; background: var(--fs-tint); color: var(--fs-link); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .fs-badge-promo { background: rgba(236, 72, 153, .12); color: var(--fs-rose); } .fs-alert { padding: .95rem 1.15rem; border-radius: var(--fs-radius-sm); border: 1px solid var(--fs-border); font-size: .92rem; line-height: 1.55; margin: .9rem 0; } .fs-alert ul { margin: 0; padding-left: 1.15em; display: grid; gap: .35rem; } .fs-alert-error { background: var(--fs-err-bg); border-color: var(--fs-err-border); color: var(--fs-err); } .fs-alert-error a { color: inherit; font-weight: 600; } .fs-alert-succes { background: var(--fs-ok-bg); border-color: var(--fs-ok-border); color: var(--fs-ok); } .fs-alert-succes a { color: inherit; font-weight: 600; } /* ------------------------------------------------------------ 7. FIL D'ARIANE (les deux variantes de markup) ------------------------------------------------------------ */ .fs-breadcrumb { font-size: .84rem; color: var(--fs-muted); margin-bottom: 1.2rem; display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .45rem; } .fs-breadcrumb a { color: var(--fs-muted); text-decoration: none; transition: color var(--fs-speed) var(--fs-ease); } .fs-breadcrumb a:hover { color: var(--fs-link); } .fs-breadcrumb-list { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .45rem; list-style: none; margin: 0; padding: 0; } .fs-breadcrumb-item { display: inline-flex; align-items: center; gap: .45rem; } .fs-breadcrumb-item svg { opacity: .5; flex: none; } .fs-breadcrumb-current { color: var(--fs-text-2); font-weight: 600; } .fs-breadcrumb-sep { opacity: .45; user-select: none; } /* ------------------------------------------------------------ 8. HERO BOUTIQUE ------------------------------------------------------------ */ .fs-hero { position: relative; padding: clamp(108px, 16vw, 164px) 0 clamp(44px, 6vw, 72px); background: radial-gradient(52rem 30rem at 88% -12%, rgba(139, 92, 246, .16), transparent 60%), radial-gradient(40rem 26rem at -10% 22%, rgba(99, 102, 241, .13), transparent 55%), radial-gradient(30rem 22rem at 72% 112%, rgba(236, 72, 153, .09), transparent 60%); } .fs-hero-badge { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem 1rem; border-radius: 999px; background: var(--fs-grad-soft); border: 1px solid var(--fs-tint-strong); color: var(--fs-link); font-size: .85rem; font-weight: 600; margin: 0 0 1.1rem; } .fs-hero-title { font-family: var(--fs-font-display); font-size: clamp(2rem, 5.4vw, 3.15rem); font-weight: 700; line-height: 1.1; letter-spacing: -.025em; margin: 0 0 1rem; max-width: 780px; text-wrap: balance; color: var(--fs-text); background: linear-gradient(115deg, var(--fs-text) 45%, var(--fs-indigo) 72%, var(--fs-rose) 105%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .fs-hero-lead { font-size: clamp(1rem, 1.8vw, 1.12rem); line-height: 1.7; color: var(--fs-text-2); max-width: 660px; margin: 0 0 1.7rem; } .fs-hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; } .fs-hero-badges { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; list-style: none; margin: 1.8rem 0 0; padding: 0; } .fs-hero-badges li { display: inline-flex; align-items: center; gap: .45rem; font-size: .87rem; font-weight: 600; color: var(--fs-text-2); } .fs-hero-badges svg { color: var(--fs-indigo); flex: none; } /* ------------------------------------------------------------ 9. GRILLE + CARTES PRODUIT ------------------------------------------------------------ */ .fs-grid { display: grid; gap: clamp(18px, 2.5vw, 28px); grid-template-columns: 1fr; } /* Carte générique (panneau) : sert aussi au checkout / merci / abonnement */ .fs-card { position: relative; background: var(--fs-surface); border: 1px solid var(--fs-border); border-radius: var(--fs-radius-lg); box-shadow: var(--fs-shadow-card); padding: clamp(1.3rem, 2.5vw, 1.7rem); } /* Cartes produit dans une grille */ .fs-grid > .fs-card { display: flex; flex-direction: column; gap: .85rem; overflow: hidden; transition: transform .3s var(--fs-ease), box-shadow .3s var(--fs-ease), border-color .3s var(--fs-ease); } .fs-grid > .fs-card::before { content: ""; position: absolute; top: 0; left: 22px; right: 40%; height: 3px; border-radius: 0 0 6px 6px; background: linear-gradient(90deg, var(--fs-accent, var(--fs-indigo)), transparent 92%); opacity: .75; } @media (hover: hover) { .fs-grid > .fs-card:hover { transform: translateY(-6px); border-color: var(--fs-tint-strong); box-shadow: var(--fs-shadow-lg); } } .fs-card-top { display: flex; align-items: center; gap: .65rem; } /* Mini « couverture » : pastille dégradée à la couleur du livre */ .fs-card-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px; color: #fff; flex: none; background: var(--fs-accent, var(--fs-indigo)); box-shadow: 0 8px 18px -8px var(--fs-accent, rgba(99, 102, 241, .6)); } @supports (background: color-mix(in srgb, red 50%, blue)) { .fs-card-icon { background: linear-gradient(140deg, color-mix(in srgb, var(--fs-accent, #6366f1) 88%, #ffffff), color-mix(in srgb, var(--fs-accent, #6366f1) 62%, #1e1b4b)); } } .fs-card-badge { display: inline-flex; padding: .3rem .7rem; border-radius: 999px; background: var(--fs-surface-2); border: 1px solid var(--fs-border); color: var(--fs-text-2); font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; } .fs-card-promo { margin-left: auto; display: inline-flex; padding: .3rem .65rem; border-radius: 999px; background: var(--fs-rose); color: #fff; font-size: .74rem; font-weight: 700; letter-spacing: .02em; } .fs-card-title { font-family: var(--fs-font-display); font-size: 1.16rem; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; margin: 0 0 .6rem; color: var(--fs-text); } .fs-grid .fs-card-title { margin: 0; } .fs-card-title a { color: inherit; text-decoration: none; transition: color var(--fs-speed) var(--fs-ease); } .fs-card-title a:hover { color: var(--fs-link); } .fs-card-accroche { color: var(--fs-text-2); font-size: .93rem; line-height: 1.6; margin: 0; } .fs-card-meta { display: flex; align-items: center; gap: .45rem; color: var(--fs-muted); font-size: .82rem; margin: 0; } .fs-card-meta svg { color: var(--fs-indigo); flex: none; } .fs-card-footer { margin-top: auto; display: flex; flex-direction: column; gap: .9rem; padding-top: 1rem; border-top: 1px dashed var(--fs-border); } .fs-card-actions { display: flex; flex-wrap: wrap; gap: .6rem; } /* Déclinaisons par type de produit */ .fs-card-ebook { /* apparence par défaut */ } .fs-card-bundle { border-color: transparent; background: linear-gradient(var(--fs-surface), var(--fs-surface)) padding-box, var(--fs-grad-full) border-box; } .fs-card-subscription { background: linear-gradient(var(--fs-surface), var(--fs-surface)) padding-box, linear-gradient(135deg, var(--fs-violet), var(--fs-rose)) border-box; border-color: transparent; } /* Carte centrée (états vides, confirmation, 404 encart) */ .fs-card-center { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .5rem; padding: clamp(2rem, 5vw, 2.6rem) clamp(1.3rem, 4vw, 2rem); max-width: 620px; margin-inline: auto; } .fs-card-center > svg { width: 44px; height: 44px; color: var(--fs-muted); margin-bottom: .4rem; } .fs-notfound p { color: var(--fs-text-2); line-height: 1.65; margin: 0 0 1.1rem; } /* ------------------------------------------------------------ 10. PRIX ------------------------------------------------------------ */ .fs-price { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: .2rem .55rem; font-family: var(--fs-font-display); font-size: 1.45rem; font-weight: 700; line-height: 1.1; color: var(--fs-text); } .fs-price-main { font-size: inherit; font-weight: inherit; } .fs-price-period { font-family: var(--fs-font); font-size: .9rem; font-weight: 600; color: var(--fs-muted); } .fs-price-old { font-family: var(--fs-font); font-size: .95rem; font-weight: 500; color: var(--fs-muted); text-decoration: line-through; text-decoration-color: rgba(236, 72, 153, .6); } .fs-price-approx { flex-basis: 100%; font-family: var(--fs-font); font-size: .82rem; font-weight: 500; color: var(--fs-muted); } .fs-price-xl { font-size: clamp(2.5rem, 6.5vw, 3.4rem); letter-spacing: -.02em; } .fs-price-row { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; margin: .9rem 0 .2rem; } .fs-price-row .fs-price { font-size: 1.7rem; } .fs-price-mad { color: var(--fs-muted); font-size: .88rem; margin: .35rem 0 0; } /* ------------------------------------------------------------ 11. LISTES À COCHES ------------------------------------------------------------ */ .fs-check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; } .fs-check-list li { display: flex; align-items: flex-start; gap: .6rem; color: var(--fs-text-2); font-size: .95rem; line-height: 1.55; } .fs-check-list svg { color: var(--fs-ok); flex: none; margin-top: 2px; } /* ------------------------------------------------------------ 12. COMPARATIF ACHAT / ABONNEMENT (boutique) ------------------------------------------------------------ */ .fs-compare { display: grid; gap: clamp(18px, 3vw, 28px); grid-template-columns: 1fr; max-width: 920px; margin-inline: auto; } .fs-compare-card { display: flex; flex-direction: column; gap: 1rem; background: var(--fs-surface); border: 1px solid var(--fs-border); border-radius: var(--fs-radius-lg); box-shadow: var(--fs-shadow-card); padding: clamp(1.5rem, 3vw, 2rem); } .fs-compare-card .fs-btn { margin-top: auto; align-self: flex-start; } .fs-compare-featured { border-color: transparent; background: linear-gradient(var(--fs-surface), var(--fs-surface)) padding-box, var(--fs-grad-full) border-box; box-shadow: var(--fs-shadow-lg); } .fs-compare-flag { align-self: flex-start; display: inline-flex; align-items: center; gap: .4rem; padding: .32rem .8rem; border-radius: 999px; background-image: var(--fs-grad-full); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin: 0; } .fs-compare-title { font-family: var(--fs-font-display); font-size: 1.28rem; font-weight: 700; margin: 0; color: var(--fs-text); } .fs-compare-price { font-family: var(--fs-font-display); font-size: 1.55rem; font-weight: 700; color: var(--fs-text); margin: 0; } .fs-compare-period { font-family: var(--fs-font); font-size: .95rem; font-weight: 600; color: var(--fs-muted); } .fs-compare-mad { display: block; font-family: var(--fs-font); font-size: .84rem; font-weight: 500; color: var(--fs-muted); margin-top: .25rem; } /* ------------------------------------------------------------ 13. ARGUMENTS « POURQUOI » ------------------------------------------------------------ */ .fs-args { display: grid; gap: clamp(16px, 2.5vw, 24px); grid-template-columns: 1fr; } .fs-arg { background: var(--fs-surface); border: 1px solid var(--fs-border); border-radius: var(--fs-radius-lg); box-shadow: var(--fs-shadow-sm); padding: 1.6rem; } .fs-arg-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px; background: var(--fs-grad-soft); border: 1px solid var(--fs-tint-strong); color: var(--fs-indigo); } .fs-arg h3 { font-family: var(--fs-font-display); font-size: 1.08rem; font-weight: 700; margin: 1rem 0 .45rem; color: var(--fs-text); } .fs-arg p { color: var(--fs-text-2); font-size: .93rem; line-height: 1.65; margin: 0; } /* ------------------------------------------------------------ 14. AVIS CLIENTS ------------------------------------------------------------ */ .fs-reviews { display: grid; gap: clamp(16px, 2.5vw, 24px); grid-template-columns: 1fr; } .fs-review { position: relative; display: flex; flex-direction: column; gap: .9rem; background: var(--fs-surface); border: 1px solid var(--fs-border); border-radius: var(--fs-radius-lg); box-shadow: var(--fs-shadow-sm); padding: 1.6rem; } .fs-review::before { content: "\201C"; position: absolute; top: .4rem; right: 1.1rem; font-family: var(--fs-font-display); font-size: 4rem; line-height: 1; color: var(--fs-tint-strong); pointer-events: none; } .fs-review-text { margin: 0; color: var(--fs-text-2); font-size: .95rem; line-height: 1.7; } .fs-review-author { display: flex; flex-direction: column; gap: .1rem; margin-top: auto; padding-top: .9rem; border-top: 1px dashed var(--fs-border); } .fs-review-name { font-weight: 700; font-size: .95rem; color: var(--fs-text); } .fs-review-job { font-size: .82rem; color: var(--fs-muted); } /* ------------------------------------------------------------ 15. FAQ (accordéons
) ------------------------------------------------------------ */ .fs-faq { display: grid; gap: .75rem; } .fs-faq-item { background: var(--fs-surface); border: 1px solid var(--fs-border); border-radius: 14px; box-shadow: var(--fs-shadow-sm); overflow: hidden; transition: border-color var(--fs-speed) var(--fs-ease), box-shadow var(--fs-speed) var(--fs-ease); } .fs-faq-item[open] { border-color: var(--fs-tint-strong); box-shadow: var(--fs-shadow-md); } .fs-faq-q { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.02rem 1.15rem; cursor: pointer; list-style: none; font-weight: 600; font-size: .97rem; line-height: 1.45; color: var(--fs-text); user-select: none; transition: color var(--fs-speed) var(--fs-ease); } .fs-faq-q::-webkit-details-marker { display: none; } .fs-faq-q::marker { content: ""; } .fs-faq-q:hover { color: var(--fs-link); } .fs-faq-q:focus-visible { outline: 3px solid var(--fs-ring); outline-offset: -3px; border-radius: 14px; } .fs-faq-q svg, .fs-faq-chevron { width: 18px; height: 18px; color: var(--fs-indigo); flex: none; transition: transform .3s var(--fs-ease); } .fs-faq-item[open] > .fs-faq-q svg { transform: rotate(180deg); } .fs-faq-a { padding: 0 1.15rem 1.1rem; color: var(--fs-text-2); font-size: .93rem; line-height: 1.7; overflow: hidden; } .fs-faq-a p { margin: 0; } /* ------------------------------------------------------------ 16. CTA FINAL (boutique) ------------------------------------------------------------ */ .fs-cta-final { position: relative; margin-top: clamp(40px, 6vw, 72px); padding: clamp(56px, 8vw, 96px) 0; background-image: radial-gradient(42rem 26rem at 80% -20%, rgba(255, 255, 255, .14), transparent 55%), radial-gradient(30rem 20rem at 10% 120%, rgba(255, 255, 255, .10), transparent 55%), var(--fs-grad-full); color: #fff; text-align: center; overflow: hidden; } .fs-cta-final h2 { font-family: var(--fs-font-display); font-size: clamp(1.6rem, 3.8vw, 2.3rem); font-weight: 700; letter-spacing: -.02em; color: #fff; margin: 0 0 .7rem; } .fs-cta-final p { color: rgba(255, 255, 255, .88); font-size: 1.02rem; line-height: 1.65; max-width: 580px; margin: 0 auto 1.8rem; } .fs-cta-final .fs-hero-actions { justify-content: center; } /* ------------------------------------------------------------ 17. PAGE 404 (boutique / extrait) ------------------------------------------------------------ */ .fs-404 { padding: clamp(140px, 20vw, 200px) 0 clamp(72px, 10vw, 110px); text-align: center; } .fs-404-code { font-family: var(--fs-font-display); font-size: .85rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--fs-rose); margin: 0 0 .7rem; } .fs-404 h1 { font-family: var(--fs-font-display); font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 700; letter-spacing: -.02em; color: var(--fs-text); margin: 0 0 .8rem; } .fs-404 p { color: var(--fs-text-2); line-height: 1.65; max-width: 540px; margin: 0 auto 1.6rem; } .fs-404 .fs-hero-actions { justify-content: center; } /* ------------------------------------------------------------ 18. FICHE PRODUIT ------------------------------------------------------------ */ .fs-product { padding: clamp(104px, 15vw, 150px) 0 clamp(40px, 6vw, 64px); background: radial-gradient(48rem 28rem at 90% -10%, rgba(139, 92, 246, .13), transparent 60%), radial-gradient(36rem 24rem at -8% 30%, rgba(99, 102, 241, .10), transparent 55%); } .fs-product-layout { display: grid; gap: clamp(28px, 4.5vw, 56px); grid-template-columns: 1fr; align-items: start; } .fs-product-cover { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; } /* --- Couverture livre 100 % CSS --- */ .fs-book { position: relative; width: min(300px, 82%); aspect-ratio: 5 / 7; border-radius: 6px 14px 14px 6px; background: var(--fs-c, var(--fs-indigo)); box-shadow: 0 30px 56px -20px rgba(23, 23, 46, .45), 0 10px 22px -10px rgba(23, 23, 46, .25); transform: perspective(1200px) rotateY(-8deg); transition: transform .45s var(--fs-ease); } .fs-book:hover { transform: perspective(1200px) rotateY(-2deg) translateY(-4px); } /* Tranche des pages, à droite */ .fs-book::after { content: ""; position: absolute; right: -6px; top: 7px; bottom: 7px; width: 6px; border-radius: 0 3px 3px 0; background: repeating-linear-gradient(180deg, #ffffff 0 2px, #e2e2ee 2px 3.5px); box-shadow: 1px 0 2px rgba(0, 0, 0, .18); } .fs-book-spine { position: absolute; left: 0; top: 0; bottom: 0; width: 16px; border-radius: 6px 0 0 6px; background: linear-gradient(180deg, rgba(0, 0, 0, .34), rgba(0, 0, 0, .2)); } .fs-book-face { position: absolute; inset: 0 0 0 16px; display: flex; flex-direction: column; padding: clamp(1.1rem, 3vw, 1.5rem) clamp(1rem, 2.6vw, 1.3rem); color: #fff; border-radius: 0 12px 12px 0; overflow: hidden; background: linear-gradient(155deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 40%), linear-gradient(335deg, rgba(0, 0, 0, .30), rgba(0, 0, 0, 0) 55%); } /* Cercle décoratif façon collection */ .fs-book-face::after { content: ""; position: absolute; right: -32%; top: -18%; width: 75%; aspect-ratio: 1; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .28); box-shadow: 0 0 0 26px rgba(255, 255, 255, .05); pointer-events: none; } /* Liseré lumineux le long de la reliure */ .fs-book-face::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .12)); } .fs-book-brand { font-size: .66rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; opacity: .88; } .fs-book-title { font-family: var(--fs-font-display); font-size: clamp(1.02rem, 2.6vw, 1.3rem); font-weight: 700; line-height: 1.25; letter-spacing: -.01em; margin-top: 1.1rem; text-wrap: balance; text-shadow: 0 1px 2px rgba(0, 0, 0, .2); } .fs-book-sub { font-size: .8rem; line-height: 1.5; opacity: .88; margin-top: .65rem; } .fs-book-foot { margin-top: auto; font-size: .66rem; font-weight: 600; letter-spacing: .1em; opacity: .78; } .fs-product-format { display: inline-flex; align-items: center; gap: .45rem; color: var(--fs-muted); font-size: .88rem; margin: 0; } .fs-product-format svg { color: var(--fs-indigo); } /* --- Colonne infos --- */ .fs-product-title { font-family: var(--fs-font-display); font-size: clamp(1.65rem, 3.8vw, 2.35rem); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; color: var(--fs-text); margin: 0; text-wrap: balance; } .fs-product-sub { font-size: 1.05rem; line-height: 1.55; color: var(--fs-text-2); margin: .55rem 0 0; } .fs-product-rating { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; margin: .95rem 0; color: var(--fs-muted); font-size: .9rem; } .fs-product-accroche { font-size: 1rem; line-height: 1.7; color: var(--fs-text-2); margin: 0; } .fs-product-price { margin: 1.25rem 0; } .fs-product-price .fs-price { font-size: 2.1rem; } .fs-product-info .fs-check-list { margin: 1.1rem 0 1.5rem; } .fs-product-actions { display: flex; flex-wrap: wrap; gap: .8rem; } .fs-product-reassure { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin: 1.25rem 0 0; padding: 0; } .fs-product-reassure li { display: inline-flex; align-items: center; gap: .4rem; color: var(--fs-muted); font-size: .84rem; font-weight: 500; } .fs-product-reassure svg { color: var(--fs-ok); } /* --- Garantie --- */ .fs-garantie { display: flex; align-items: flex-start; gap: 1.2rem; padding: clamp(1.4rem, 3vw, 1.8rem); background: var(--fs-grad-soft); border: 1px solid var(--fs-tint-strong); border-radius: var(--fs-radius-lg); } .fs-garantie-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background-image: var(--fs-grad); color: #fff; flex: none; box-shadow: var(--fs-shadow-btn); } .fs-garantie-title { font-family: var(--fs-font-display); font-size: 1.14rem; font-weight: 700; color: var(--fs-text); margin: 0 0 .45rem; } .fs-garantie p { color: var(--fs-text-2); font-size: .94rem; line-height: 1.65; margin: 0; } /* --- Description + sommaire --- */ .fs-product-details { display: grid; gap: clamp(28px, 4vw, 44px); grid-template-columns: 1fr; align-items: start; } .fs-product-desc h2, .fs-product-toc h2 { font-family: var(--fs-font-display); font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em; color: var(--fs-text); margin: 0 0 1rem; } .fs-product-desc p { color: var(--fs-text-2); font-size: .98rem; line-height: 1.75; margin: 0 0 1rem; } .fs-product-toc { background: var(--fs-surface); border: 1px solid var(--fs-border); border-radius: var(--fs-radius-lg); box-shadow: var(--fs-shadow-card); padding: 1.6rem; } .fs-toc-list { list-style: none; margin: 0; padding: 0; counter-reset: fs-toc; display: grid; gap: .6rem; } .fs-toc-list li { counter-increment: fs-toc; display: flex; gap: .7rem; align-items: baseline; color: var(--fs-text-2); font-size: .92rem; line-height: 1.5; padding-bottom: .6rem; border-bottom: 1px dashed var(--fs-border); } .fs-toc-list li:last-child { border-bottom: 0; padding-bottom: 0; } .fs-toc-list li::before { content: counter(fs-toc, decimal-leading-zero); font-family: var(--fs-font-display); font-size: .78rem; font-weight: 700; color: var(--fs-link); flex: none; } /* --- CTA extrait sur la fiche --- */ .fs-extrait-cta { display: flex; align-items: center; justify-content: space-between; gap: 1.4rem; padding: clamp(1.4rem, 3vw, 1.8rem); background: var(--fs-surface); border: 1px solid var(--fs-border); border-radius: var(--fs-radius-lg); box-shadow: var(--fs-shadow-card); } .fs-extrait-cta h2 { font-family: var(--fs-font-display); font-size: 1.22rem; font-weight: 700; color: var(--fs-text); margin: 0 0 .4rem; } .fs-extrait-cta p { color: var(--fs-text-2); font-size: .93rem; line-height: 1.6; margin: 0; } .fs-extrait-cta .fs-btn { flex: none; } /* ------------------------------------------------------------ 19. LECTEUR D'EXTRAIT ------------------------------------------------------------ */ .fs-shop-reader { padding-top: var(--fs-nav-h); } /* Bandeau sticky d'achat — cale sous la nav fixe du site */ .fs-extrait-bar { position: sticky; top: var(--fs-bar-top); z-index: 800; background: rgba(255, 255, 255, .88); border-bottom: 1px solid var(--fs-border); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } [data-theme="dark"] .fs-extrait-bar { background: rgba(16, 16, 38, .88); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fs-extrait-bar { background: rgba(16, 16, 38, .88); } } .fs-extrait-bar-inner { max-width: 1160px; margin-inline: auto; padding: .6rem clamp(16px, 4vw, 32px); display: flex; align-items: center; gap: .9rem; } .fs-extrait-bar-title { flex: 1; min-width: 0; font-weight: 600; font-size: .92rem; color: var(--fs-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fs-extrait-bar-price { flex: none; } .fs-extrait-bar-price .fs-price { font-size: 1.05rem; gap: .1rem .45rem; } .fs-extrait-bar-price .fs-price-approx { display: none; /* trop d'info dans un bandeau compact */ } .fs-extrait-bar .fs-btn { flex: none; } /* Corps de lecture */ .fs-reader { max-width: 760px; margin-inline: auto; padding: clamp(28px, 5vw, 56px) clamp(16px, 4vw, 32px) 0; } .fs-reader-head { margin-bottom: clamp(1.6rem, 3vw, 2.4rem); } .fs-reader-head h1 { font-family: var(--fs-font-display); font-size: clamp(1.65rem, 4vw, 2.3rem); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; color: var(--fs-text); margin: 0 0 .6rem; text-wrap: balance; } .fs-reader-badge { display: inline-flex; align-items: center; gap: .5rem; padding: .42rem .95rem; border-radius: 999px; background: var(--fs-grad-soft); border: 1px solid var(--fs-tint-strong); color: var(--fs-link); font-size: .84rem; font-weight: 600; margin: 0 0 1rem; } .fs-reader-sub { font-size: 1.05rem; line-height: 1.6; color: var(--fs-text-2); margin: 0 0 .8rem; } .fs-reader-note { font-size: .88rem; color: var(--fs-muted); line-height: 1.6; padding: .8rem 1.05rem; background: var(--fs-surface-2); border-left: 3px solid var(--fs-indigo); border-radius: 0 10px 10px 0; margin: 1rem 0 0; } /* Typographie du fragment HTML (contenu de l'extrait) */ .fs-reader-content { position: relative; font-size: 1.02rem; line-height: 1.8; color: var(--fs-text-2); } .fs-reader-content h1, .fs-reader-content h2 { font-family: var(--fs-font-display); font-size: clamp(1.35rem, 3vw, 1.6rem); font-weight: 700; line-height: 1.25; letter-spacing: -.015em; color: var(--fs-text); margin: 2.4rem 0 .9rem; } .fs-reader-content h3 { font-family: var(--fs-font-display); font-size: 1.18rem; font-weight: 700; color: var(--fs-text); margin: 1.8rem 0 .6rem; } .fs-reader-content h4 { font-size: 1.02rem; font-weight: 700; color: var(--fs-text); margin: 1.4rem 0 .5rem; } .fs-reader-content p { margin: 0 0 1.05rem; } .fs-reader-content strong { color: var(--fs-text); font-weight: 600; } /* Le CSS global du site retire les puces (ul{list-style:none}) : on les rétablit dans le contenu éditorial de l'extrait */ .fs-reader-content ul { list-style: disc; } .fs-reader-content ol { list-style: decimal; } .fs-reader-content ul, .fs-reader-content ol { margin: 0 0 1.1rem; padding-left: 1.35rem; display: grid; gap: .45rem; } .fs-reader-content li::marker { color: var(--fs-indigo); font-weight: 700; } .fs-reader-content blockquote { margin: 1.4rem 0; padding: .9rem 1.2rem; border-left: 3px solid var(--fs-violet); background: var(--fs-surface-2); border-radius: 0 12px 12px 0; font-style: italic; } .fs-reader-content table { width: 100%; border-collapse: collapse; font-size: .92rem; margin: 1.4rem 0; display: block; overflow-x: auto; /* les tableaux larges défilent dans leur cadre */ } .fs-reader-content th, .fs-reader-content td { padding: .6rem .8rem; border: 1px solid var(--fs-border); text-align: left; } .fs-reader-content th { background: var(--fs-surface-2); color: var(--fs-text); } /* Marqueur de fin d'extrait (présent dans les fragments) */ .fs-extrait-fin { position: relative; margin-top: 2.6rem; padding: 1.1rem 1.25rem; text-align: center; font-style: italic; font-size: .92rem; color: var(--fs-muted); background: var(--fs-surface-2); border: 1px dashed var(--fs-border-strong); border-radius: 12px; } /* Fondu doux au-dessus de la fin d'extrait */ .fs-extrait-fin::before { content: ""; position: absolute; left: 0; right: 0; top: -96px; height: 84px; background: linear-gradient(180deg, transparent, var(--fs-bg)); pointer-events: none; } /* Fin d'extrait : bloc CTA */ .fs-reader-end { margin-top: clamp(40px, 6vw, 64px); padding: clamp(48px, 7vw, 80px) 0; background: var(--fs-bg-alt); border-top: 1px solid var(--fs-border); text-align: center; } .fs-reader-end h2 { font-family: var(--fs-font-display); font-size: clamp(1.45rem, 3.2vw, 1.9rem); font-weight: 700; letter-spacing: -.015em; color: var(--fs-text); margin: 0 0 .7rem; } .fs-reader-end > .fs-container-narrow > p { color: var(--fs-text-2); line-height: 1.7; max-width: 620px; margin: 0 auto 1.4rem; } .fs-reader-end .fs-check-list { max-width: 540px; margin: 1.4rem auto; text-align: left; } .fs-reader-end .fs-hero-actions { justify-content: center; margin-top: 1.6rem; } .fs-reader-garantie { display: inline-flex; align-items: center; gap: .45rem; margin: 1.3rem 0 0; color: var(--fs-muted); font-size: .85rem; } .fs-reader-garantie svg { color: var(--fs-ok); } /* ------------------------------------------------------------ 20. CHECKOUT (commander.php) ------------------------------------------------------------ */ .fs-checkout-grid { display: grid; gap: clamp(20px, 3vw, 28px); grid-template-columns: 1fr; align-items: start; margin-top: 1.4rem; } .fs-recap { padding: clamp(1.4rem, 3vw, 1.8rem); } .fs-recap-produit { font-family: var(--fs-font-display); font-size: 1.12rem; font-weight: 700; color: var(--fs-text); margin: .5rem 0 0; } .fs-recap-sous-titre { color: var(--fs-text-2); font-size: .92rem; line-height: 1.55; margin: .25rem 0 0; } .fs-recap-pages { color: var(--fs-muted); font-size: .84rem; margin: .55rem 0 0; } .fs-tva-note { color: var(--fs-muted); font-size: .78rem; margin: .45rem 0 0; } .fs-garanties { list-style: none; margin: 1.1rem 0 0; padding: 1.1rem 0 0; border-top: 1px dashed var(--fs-border); display: grid; gap: .6rem; } .fs-garanties li { display: flex; align-items: flex-start; gap: .55rem; color: var(--fs-text-2); font-size: .87rem; line-height: 1.5; } .fs-garanties svg { width: 17px; height: 17px; color: var(--fs-ok); flex: none; margin-top: 2px; } .fs-paiement { padding: clamp(1.4rem, 3vw, 1.8rem); } /* --- Onglets méthode de paiement --- */ .fs-tabs { display: flex; gap: 5px; padding: 5px; margin: 1.1rem 0 1.3rem; background: var(--fs-surface-2); border: 1px solid var(--fs-border); border-radius: 999px; } .fs-tab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .6rem .7rem; border: 0; border-radius: 999px; background: transparent; color: var(--fs-text-2); font-family: var(--fs-font); font-size: .88rem; font-weight: 600; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--fs-speed) var(--fs-ease), color var(--fs-speed) var(--fs-ease), box-shadow var(--fs-speed) var(--fs-ease); } .fs-tab svg { width: 17px; height: 17px; flex: none; } .fs-tab:hover { color: var(--fs-link); } .fs-tab:focus-visible { outline: 3px solid var(--fs-ring); outline-offset: 1px; } .fs-tab.is-active { background: var(--fs-surface); color: var(--fs-link); box-shadow: var(--fs-shadow-sm); } .fs-tab-panel { display: none; } .fs-tab-panel.is-active { display: block; animation: fs-fade-in .32s var(--fs-ease); } #fs-paypal-buttons, #fs-abo-paypal { min-height: 48px; margin-top: .4rem; } .fs-pay-note { color: var(--fs-muted); font-size: .88rem; line-height: 1.65; margin: .9rem 0 0; } .fs-pay-note strong { color: var(--fs-text-2); } .fs-pay-soon { padding: 1rem 1.15rem; background: var(--fs-surface-2); border: 1px dashed var(--fs-border-strong); border-radius: var(--fs-radius-sm); color: var(--fs-text-2); font-size: .92rem; line-height: 1.6; margin: 0; } /* --- Formulaire --- */ .fs-form { display: grid; gap: 1.05rem; margin-top: 1.15rem; } .fs-field { display: grid; gap: .4rem; } .fs-label { font-size: .88rem; font-weight: 600; color: var(--fs-text); } .fs-input { width: 100%; padding: .78rem .95rem; font-family: inherit; font-size: 1rem; color: var(--fs-text); background: var(--fs-surface); border: 1.5px solid var(--fs-border-strong); border-radius: 12px; transition: border-color var(--fs-speed) var(--fs-ease), box-shadow var(--fs-speed) var(--fs-ease); } [data-theme="dark"] .fs-input { background: var(--fs-surface-2); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fs-input { background: var(--fs-surface-2); } } .fs-input:focus { outline: none; border-color: var(--fs-indigo); box-shadow: 0 0 0 4px var(--fs-tint-strong); } .fs-input::placeholder { color: var(--fs-muted); } /* Case à cocher consentement */ .fs-check { grid-template-columns: auto 1fr; align-items: start; gap: .6rem; } .fs-check input[type="checkbox"] { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--fs-indigo); cursor: pointer; } .fs-check input[type="checkbox"]:focus-visible { outline: 3px solid var(--fs-ring); outline-offset: 2px; } .fs-check label { font-size: .87rem; font-weight: 400; color: var(--fs-text-2); line-height: 1.55; cursor: pointer; } /* Honeypot : invisible pour les humains, présent pour les bots */ .fs-hp { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* ------------------------------------------------------------ 21. PAGE MERCI (merci.php) ------------------------------------------------------------ */ .fs-merci .fs-container { display: grid; gap: clamp(16px, 2.5vw, 22px); } .fs-merci-hero { padding: clamp(2.2rem, 5vw, 2.8rem) clamp(1.4rem, 4vw, 2.2rem); } .fs-merci-check { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #10b981, #059669); box-shadow: 0 14px 30px -10px rgba(16, 185, 129, .55); margin-bottom: .5rem; } .fs-merci-check svg { width: 34px; height: 34px; } .fs-merci-intro { color: var(--fs-text-2); font-size: 1rem; line-height: 1.7; margin: 0; } .fs-merci-intro strong { color: var(--fs-text); } .fs-merci-email { color: var(--fs-muted); font-size: .9rem; margin: .4rem 0 0; } .fs-merci-email strong { color: var(--fs-text-2); } .fs-merci-etapes { padding: clamp(1.4rem, 3vw, 1.8rem); } .fs-merci-etapes p { color: var(--fs-text-2); line-height: 1.7; margin: 0; } .fs-merci-etapes a, .fs-virement a, .fs-download a:not(.fs-btn) { color: var(--fs-link); font-weight: 600; text-decoration: none; } .fs-merci-etapes a:hover, .fs-virement a:hover { text-decoration: underline; } /* Bloc téléchargement */ .fs-download { padding: clamp(2rem, 5vw, 2.6rem) clamp(1.4rem, 4vw, 2.2rem); border-color: transparent; background: linear-gradient(var(--fs-surface), var(--fs-surface)) padding-box, var(--fs-grad-full) border-box; } .fs-download p { color: var(--fs-text-2); line-height: 1.65; margin: 0; } .fs-download .fs-btn-download { margin: 1.1rem 0 .4rem; } .fs-download-note { color: var(--fs-muted); font-size: .82rem; margin: .5rem 0 0 !important; } /* Instructions virement */ .fs-virement { padding: clamp(1.4rem, 3vw, 1.8rem); } .fs-virement-infos { margin: 1.1rem 0; border: 1px solid var(--fs-border); border-radius: 14px; overflow: hidden; } .fs-virement-ligne { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .35rem 1rem; padding: .85rem 1.15rem; } .fs-virement-ligne:nth-child(odd) { background: var(--fs-surface-2); } .fs-virement-ligne + .fs-virement-ligne { border-top: 1px solid var(--fs-border); } .fs-virement-ligne dt { font-size: .82rem; font-weight: 600; color: var(--fs-muted); text-transform: uppercase; letter-spacing: .05em; } .fs-virement-ligne dd { margin: 0; display: flex; align-items: center; gap: .55rem; font-size: .93rem; font-weight: 600; color: var(--fs-text); text-align: right; word-break: break-word; font-variant-numeric: tabular-nums; } .fs-virement-note { color: var(--fs-text-2); font-size: .92rem; line-height: 1.65; margin: 0; } /* Upsell abonnement */ .fs-upsell { display: flex; align-items: center; justify-content: space-between; gap: 1.4rem; padding: clamp(1.5rem, 3vw, 1.9rem); background: var(--fs-grad-soft); border: 1px solid var(--fs-tint-strong); } .fs-upsell-texte { flex: 1; } .fs-upsell-texte .fs-badge { margin-bottom: .7rem; } .fs-upsell-texte p { color: var(--fs-text-2); font-size: .93rem; line-height: 1.65; margin: .4rem 0 0; } .fs-upsell .fs-btn { flex: none; } .fs-merci-retour { text-align: center; margin: .4rem 0 0; } .fs-merci-retour a { color: var(--fs-link); font-weight: 600; font-size: .92rem; text-decoration: none; } .fs-merci-retour a:hover { text-decoration: underline; } /* Actions groupées (cartes centrées, hero abo) */ .fs-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: 1.2rem; } /* ------------------------------------------------------------ 22. ABONNEMENT (abonnement.php) ------------------------------------------------------------ */ .fs-abo-hero { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 780px; margin: 0 auto clamp(44px, 7vw, 80px); } .fs-abo-hero .fs-title { background: linear-gradient(115deg, var(--fs-text) 45%, var(--fs-indigo) 72%, var(--fs-rose) 105%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .fs-abo-lead { color: var(--fs-text-2); font-size: 1.05rem; line-height: 1.7; max-width: 640px; margin: 0; } .fs-abo-prix { display: flex; align-items: baseline; justify-content: center; gap: .5rem; margin-top: 1.5rem; } .fs-abo-prix-periode { font-size: 1.1rem; font-weight: 600; color: var(--fs-muted); } .fs-abo-hero .fs-price-mad { margin-top: .5rem; } .fs-abo-inclus, .fs-abo-comparatif, .fs-abo-souscrire, .fs-abo-faq { margin-top: clamp(48px, 7vw, 84px); } /* Grille « inclus » */ .fs-grid-3 { display: grid; gap: clamp(16px, 2.5vw, 24px); grid-template-columns: 1fr; } .fs-inclus-item { padding: 1.7rem; } .fs-inclus-item > svg { width: 50px; height: 50px; padding: 13px; border-radius: 15px; background: var(--fs-grad-soft); border: 1px solid var(--fs-tint-strong); color: var(--fs-indigo); } .fs-inclus-titre { font-family: var(--fs-font-display); font-size: 1.06rem; font-weight: 700; color: var(--fs-text); margin: .95rem 0 .4rem; } .fs-inclus-item p { color: var(--fs-text-2); font-size: .92rem; line-height: 1.65; margin: 0; } /* Tableau comparatif */ .fs-table-wrap { max-width: 920px; margin-inline: auto; overflow-x: auto; /* le tableau défile, jamais la page */ -webkit-overflow-scrolling: touch; background: var(--fs-surface); border: 1px solid var(--fs-border); border-radius: var(--fs-radius); box-shadow: var(--fs-shadow-card); } .fs-table { width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 0; font-size: .92rem; } .fs-table th, .fs-table td { padding: .9rem 1.15rem; text-align: left; border-bottom: 1px solid var(--fs-border); color: var(--fs-text-2); } .fs-table thead th { font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--fs-muted); background: var(--fs-surface-2); white-space: nowrap; } .fs-table tbody th[scope="row"] { font-weight: 600; color: var(--fs-text); white-space: nowrap; } .fs-table tbody tr:last-child th, .fs-table tbody tr:last-child td { border-bottom: 0; } /* Colonne mise en avant */ .fs-table .fs-table-star { background: var(--fs-tint); color: var(--fs-text); font-weight: 600; } .fs-table thead .fs-table-star { color: var(--fs-link); background: var(--fs-tint-strong); } /* Bloc souscription */ .fs-card-souscrire { max-width: 660px; margin-inline: auto; padding: clamp(1.7rem, 4vw, 2.3rem); } .fs-card-souscrire .fs-section-title { margin-bottom: 1rem; } .fs-abo-faq .fs-faq { max-width: 800px; margin-inline: auto; } /* ------------------------------------------------------------ 23. PAGE D'ERREUR TÉLÉCHARGEMENT (telecharger.php) ------------------------------------------------------------ */ .fs-error-page { padding: clamp(120px, 17vw, 172px) 0 clamp(64px, 9vw, 96px); background: radial-gradient(44rem 26rem at 85% -10%, rgba(236, 72, 153, .08), transparent 60%), radial-gradient(36rem 22rem at -10% 30%, rgba(99, 102, 241, .08), transparent 55%); } .fs-error-card { background: var(--fs-surface); border: 1px solid var(--fs-border); border-radius: var(--fs-radius-lg); box-shadow: var(--fs-shadow-card); padding: clamp(2rem, 5vw, 3rem); max-width: 660px; margin-inline: auto; text-align: center; } .fs-error-icon { display: inline-grid; place-items: center; width: 86px; height: 86px; border-radius: 50%; background: rgba(236, 72, 153, .12); color: var(--fs-rose); margin-bottom: 1.1rem; } .fs-error-title { font-family: var(--fs-font-display); font-size: clamp(1.5rem, 3.6vw, 2rem); font-weight: 700; letter-spacing: -.02em; color: var(--fs-text); margin: 0 0 .7rem; } .fs-error-message { color: var(--fs-text-2); font-size: .98rem; line-height: 1.7; margin: 0; } .fs-error-hints { text-align: left; margin: 1.7rem 0; padding: 1.3rem 1.4rem; background: var(--fs-surface-2); border-radius: 14px; } .fs-error-hints-title { font-size: .94rem; font-weight: 700; color: var(--fs-text); margin: 0 0 .85rem; } .fs-error-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; } .fs-error-list li { display: flex; align-items: flex-start; gap: .55rem; color: var(--fs-text-2); font-size: .9rem; line-height: 1.55; } .fs-error-list svg { color: var(--fs-ok); flex: none; margin-top: 2px; } .fs-error-help { color: var(--fs-text-2); font-size: .92rem; line-height: 1.7; margin: 0; } .fs-error-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: 1.6rem; } /* ------------------------------------------------------------ 24. ANIMATIONS / RÉVÉLATION AU SCROLL ------------------------------------------------------------ */ @keyframes fs-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* .fs-reveal est ajouté PAR le JS (progressive enhancement : sans JS, tout est visible d'emblée) */ .fs-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--fs-ease), transform .6s var(--fs-ease); transition-delay: var(--fs-delay, 0s); will-change: opacity, transform; } .fs-reveal.is-visible { opacity: 1; transform: none; } /* ------------------------------------------------------------ 25. TOAST + BOUTON COPIER + COMPTEUR HONNÊTE ------------------------------------------------------------ */ .fs-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 14px); z-index: 2000; display: flex; align-items: center; gap: .5rem; max-width: calc(100vw - 32px); padding: .72rem 1.25rem; border-radius: 999px; background: #17172e; color: #fff; font-family: var(--fs-font); font-size: .9rem; font-weight: 600; box-shadow: 0 16px 40px -12px rgba(10, 10, 26, .5); opacity: 0; pointer-events: none; transition: opacity .3s var(--fs-ease), transform .3s var(--fs-ease); } .fs-toast.is-visible { opacity: 1; transform: translate(-50%, 0); } [data-theme="dark"] .fs-toast { background: #2a2a52; border: 1px solid rgba(255, 255, 255, .14); } .fs-copy-btn { display: inline-flex; align-items: center; gap: .32rem; padding: .3rem .6rem; border: 1px solid var(--fs-border-strong); border-radius: 8px; background: var(--fs-surface); color: var(--fs-text-2); font-family: var(--fs-font); font-size: .72rem; font-weight: 600; cursor: pointer; flex: none; transition: color var(--fs-speed) var(--fs-ease), border-color var(--fs-speed) var(--fs-ease), background-color var(--fs-speed) var(--fs-ease); } .fs-copy-btn:hover { color: var(--fs-link); border-color: var(--fs-indigo); } .fs-copy-btn:focus-visible { outline: 3px solid var(--fs-ring); outline-offset: 1px; } .fs-copy-btn svg { width: 13px; height: 13px; flex: none; } /* Compteur honnête : uniquement alimenté par une vraie échéance (data-fs-deadline côté serveur). Expiré = masqué par le JS. */ .fs-countdown { display: inline-flex; gap: .3rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--fs-rose); } /* ------------------------------------------------------------ 26. RESPONSIVE (mobile-first : paliers ascendants) ------------------------------------------------------------ */ @media (max-width: 480px) { /* Onglets compacts : on retire les icônes, le texte reste lisible */ .fs-tab svg { display: none; } .fs-tab { font-size: .84rem; padding: .58rem .5rem; } /* Bandeau extrait compact */ .fs-extrait-bar-price { display: none; } .fs-book { width: min(240px, 78%); } .fs-btn-lg { width: 100%; } .fs-product-actions .fs-btn, .fs-hero-actions .fs-btn { flex: 1 1 auto; justify-content: center; } } @media (min-width: 560px) { .fs-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 640px) { .fs-grid-3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 719px) { .fs-garantie { flex-direction: column; } .fs-extrait-cta { flex-direction: column; align-items: flex-start; } .fs-upsell { flex-direction: column; align-items: flex-start; } .fs-virement-ligne dd { text-align: left; } } @media (min-width: 820px) { .fs-compare { grid-template-columns: 1fr 1fr; align-items: stretch; } .fs-args { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 880px) { .fs-product-layout { grid-template-columns: minmax(280px, 380px) 1fr; } .fs-product-details { grid-template-columns: 1.35fr .95fr; } .fs-product-toc { position: sticky; top: calc(var(--fs-nav-h) + 16px); } } @media (min-width: 920px) { .fs-checkout-grid { grid-template-columns: 380px 1fr; } .fs-recap { position: sticky; top: calc(var(--fs-nav-h) + 16px); } .fs-reviews { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 980px) { .fs-grid { grid-template-columns: repeat(3, 1fr); } .fs-grid-3 { grid-template-columns: repeat(3, 1fr); } } /* ------------------------------------------------------------ 27. ACCESSIBILITÉ : MOUVEMENT RÉDUIT ------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { .fs-shop *, .fs-page *, .fs-error-page *, .fs-toast, .fs-reveal { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .fs-reveal { opacity: 1; transform: none; } .fs-book, .fs-book:hover { transform: none; } .fs-grid > .fs-card:hover, .fs-btn:hover { transform: none; } } /* ------------------------------------------------------------ 28. IMPRESSION PROPRE ------------------------------------------------------------ */ @media print { .fs-shop, .fs-page, .fs-error-page { color: #000; background: #fff; } .fs-hero, .fs-product, .fs-page, .fs-error-page { padding-top: 0; background: none; } .fs-extrait-bar, .fs-hero-actions, .fs-product-actions, .fs-card-actions, .fs-cta-final, .fs-actions, .fs-error-actions, .fs-btn, .fs-tabs, .fs-toast, .fs-copy-btn, .fs-upsell, .fs-merci-retour { display: none !important; } .fs-card, .fs-compare-card, .fs-faq-item, .fs-arg, .fs-review, .fs-error-card, .fs-table-wrap { box-shadow: none !important; border: 1px solid #bbb; break-inside: avoid; } .fs-book { box-shadow: none; transform: none; } .fs-hero-title, .fs-abo-hero .fs-title { -webkit-text-fill-color: initial; background: none; color: #000; } .fs-tab-panel { display: block !important; } .fs-reveal { opacity: 1 !important; transform: none !important; } .fs-reader-content { font-size: 11pt; line-height: 1.6; } .fs-extrait-fin::before { display: none; } } /* ------------------------------------------------------------ 29. GARDE-FOUS CASCADE Le CSS global du site force en mode clair : [data-theme="light"] h1..h6 { color:#1a1a2e !important } [data-theme="light"] p, li, span, label, td, th, strong… { color:#1a1a2e } [data-theme="light"] a { color:#4a4a5a } + a:hover Ces règles écraseraient la hiérarchie du design system boutique. On ré-affirme ici chaque couleur posée sur un élément concerné (shop.css est chargé APRÈS style.css : à spécificité égale, on gagne). ------------------------------------------------------------ */ /* Les spans sans classe héritent toujours de leur parent (boutons, listes à coches, badges héro, résumé FAQ, méta de carte…) */ :is(.fs-shop, .fs-page, .fs-error-page) span:not([class]) { color: inherit; } .fs-btn span, .fs-faq-q span, .fs-copy-btn span { color: inherit; } .fs-alert li { color: inherit; } /* Boutons-liens : couleurs immuables, même au survol */ a.fs-btn-primary, a.fs-btn-primary:hover, a.fs-btn-secondary, a.fs-btn-secondary:hover, a.fs-btn-outline, a.fs-btn-outline:hover { color: #fff; } a.fs-btn-light, a.fs-btn-light:hover { color: var(--fs-indigo-deep); } a.fs-btn-ghost, a.fs-btn-ghost:hover { color: var(--fs-link); } /* Texte blanc sur zones colorées / en dégradé */ .fs-cta-final h2 { color: #fff !important; /* le global force les h2 avec !important */ } .fs-cta-final p { color: rgba(255, 255, 255, .88); } .fs-book-face span { color: #fff; } span.fs-card-promo, p.fs-compare-flag { color: #fff; } /* Pastilles-icônes (span + SVG currentColor) */ span.fs-card-icon, span.fs-garantie-icon, span.fs-merci-check { color: #fff; } span.fs-arg-icon { color: var(--fs-indigo); } span.fs-error-icon { color: var(--fs-rose); } /* Pastilles et badges colorés */ p.fs-hero-badge, p.fs-reader-badge, span.fs-badge { color: var(--fs-link); } span.fs-badge-promo { color: var(--fs-rose); } p.fs-404-code, span.fs-countdown { color: var(--fs-rose); } span.fs-stars { color: var(--fs-star); } /* Hiérarchie texte : couleur principale */ span.fs-price, p.fs-recap-produit, p.fs-compare-price, span.fs-extrait-bar-title, label.fs-label, span.fs-review-name { color: var(--fs-text); } /* Hiérarchie texte : secondaire */ p.fs-hero-lead, p.fs-card-accroche, p.fs-product-sub, p.fs-product-accroche, p.fs-reader-sub, p.fs-recap-sous-titre, p.fs-pay-soon, p.fs-merci-intro, p.fs-virement-note, p.fs-abo-lead, p.fs-error-message, p.fs-error-help, blockquote.fs-review-text, span.fs-card-badge { color: var(--fs-text-2); } .fs-breadcrumb [aria-current="page"], li.fs-breadcrumb-current { color: var(--fs-text-2); } /* Hiérarchie texte : atténué */ p.fs-card-meta, p.fs-price-mad, p.fs-product-format, p.fs-reader-note, p.fs-reader-garantie, p.fs-recap-pages, p.fs-tva-note, p.fs-pay-note, p.fs-merci-email, p.fs-download-note, span.fs-price-period, span.fs-price-approx, span.fs-compare-period, span.fs-compare-mad, span.fs-abo-prix-periode, span.fs-review-job, del.fs-price-old { color: var(--fs-muted); }