/* ========================================================================= pricing-cards-dark.css — Design "pricing cards" fond sombre, halo coloré ========================================================================= Lib CSS partagée (wwwroot, PAS de CSS Isolation Blazor) entre les pages publiques de souscription : /catalogue/plans (TableForfait.razor) et /subscription/saasplans (SaaSPlanForfait.razor) — factorisée ici pour ne pas dupliquer le même composant "carte" dans deux fichiers .razor.css scopés. Chargée à la demande via dans chaque page (cf. Admin.razor pour le même pattern avec admin.css), jamais dans App.razor : elle ne doit s'appliquer QUE sur les pages qui l'incluent explicitement. Portée volontairement limitée à des noms de classes dédiés à ce composant (.pricing-page-bg, .pricing-grid, .pricing-card...), jamais réutilisés ailleurs dans l'appli (vérifié par recherche globale) — sûr d'être chargé sans CSS Isolation pour autant. Chaque page garde dans son propre .razor.css tout ce qui lui est spécifique (recherche, breadcrumb, bandeaux de remise, toggle de récurrence...) et peut réutiliser les tokens --accent/ --accent-2 posés ici par .pricing-card pour rester visuellement cohérente. ========================================================================= */ /* 🐛 Le dégradé sombre restait cantonné à .pricing-page-bg (min-height:100vh) — un simple plancher de hauteur, pas une garantie qu'il couvre bien tout le contenu : selon le fil de resolution flex/hauteur en % des ancêtres, le bas de pouvait rester visible (blanc) au scroll une fois le contenu plus haut qu'un écran. Fix radical et sans dépendance à cette chaîne : le même dégradé posé directement sur , actif uniquement sur les 2 pages qui chargent CETTE feuille (via ) — jamais globale. */ body { background: radial-gradient(ellipse 90% 60% at 50% -10%, #2c2170 0%, transparent 60%), linear-gradient(160deg, #171233 0%, #100c29 55%, #0a0720 100%); background-attachment: fixed; /* .pricing-page-watermark (SaaSPlanForfait.razor.css) déborde volontairement du cadre — évite la barre de scroll horizontale que ce débordement provoquerait sinon, sans limiter le scroll vertical normal de la page (ce n'est pas lui l'élément qui scrolle, body/html le reste). */ overflow-x: hidden; } /* Fond de page + titre — classe dédiée à ajouter en plus de .background-main-content (jamais une surcharge de .background-main-content elle-même : classe utilitaire partagée par des dizaines d'autres pages en thème clair). */ .pricing-page-bg { min-height: 100vh; /* Ancre pour un éventuel filigrane décoratif en position:absolute posé par une page hôte (cf. .pricing-page-watermark, propre à SaaSPlanForfait.razor.css) — neutre pour les pages qui n'en ajoutent pas. */ position: relative; } .pricing-page-bg .colorBlack { color: #f5f3ff; letter-spacing: -0.01em; text-shadow: 0 2px 24px rgb(124 92 246 / 35%); } /* Titre principal ("hero") — classe posée en plus de colorBlack/font-1-bold sur le titre de chaque page. 🎯 "Space Grotesk" est désormais --font-family-base (Settings-v1.0.0.css) : plus besoin de forcer explicitement la police ici, .font-1-bold suffit. Classe conservée (vide) au cas où ce titre "hero" aurait un jour besoin d'un traitement typographique propre, distinct du reste de l'appli. */ .pricing-hero-title { } /* Pousse le bloc légal (CGV/mentions/confidentialité) en bas de page même quand le contenu est court (peu de cartes) — margin-top:auto sur un enfant flex consomme tout l'espace restant du conteneur (.container-col, flex-direction:column) : classique "sticky footer". Nécessite que ce conteneur ait lui-même une hauteur déterminée (flex:1 1 auto posé en style inline dans chaque .razor, cf. commentaire à cet endroit). */ .pricing-legal-footer { margin-top: auto; } /* Grille en flex : centre naturellement les cartes dans le conteneur quel que soit leur nombre (2, 3, 4...) — un CSS Grid auto-fill/auto-fit remplit la largeur même avec une seule rangée incomplète, sans les centrer. flex-basis 320px laisse assez de place au prix pour ne jamais passer à la ligne (ex: le "*" du renvoi TVA). */ .pricing-grid { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem; padding: 0.5rem 2rem 2rem; box-sizing: border-box; } /* 🐛 Piège déjà rencontré : rgb(var(--accent-rgb) / X%) avec --accent-rgb au format "R, G, B" (virgules) mélange la syntaxe rgb() historique et la syntaxe moderne (barre d'alpha) — invalide selon la spec CSS Color 4, certains moteurs rejettent alors TOUTE la déclaration (fond ET bordure disparaissent). N'utiliser QUE color-mix(in srgb, var(--accent) X%, transparent) pour toute variante transparente de --accent/--accent-2 ci-dessous, jamais rgb(var(...)). 🎨 Couleur d'accent portée par une classe DÉDIÉE (.pricing-card-accent-0 à -3, assignée explicitement dans le .razor de la page plutôt que déduite d'un :nth-child) — chaque carte pioche sa propre couleur via --accent/--accent-2, réutilisées par le badge, le check, le CTA et le halo. */ .pricing-card { --accent: #4ade80; --accent-2: #22c55e; position: relative; flex: 1 1 320px; max-width: 360px; display: flex; flex-direction: column; justify-content: space-between; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 18%, transparent) 0%, color-mix(in srgb, var(--accent) 5%, transparent) 45%, rgb(255 255 255 / 2%) 100%); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 20px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent), 0 25px 50px -20px color-mix(in srgb, var(--accent) 35%, transparent), 0 8px 24px rgb(0 0 0 / 35%); backdrop-filter: blur(16px); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; overflow: hidden; } .pricing-card-accent-1 { --accent: #38bdf8; --accent-2: #0ea5e9; } .pricing-card-accent-2 { --accent: #fb923c; --accent-2: #f97316; } .pricing-card-accent-3 { --accent: #c084fc; --accent-2: #a855f7; } .pricing-card:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 30px 55px -18px color-mix(in srgb, var(--accent) 50%, transparent), 0 10px 28px rgb(0 0 0 / 40%); } .pricing-card-featured { border-color: color-mix(in srgb, var(--accent) 70%, transparent); box-shadow: 0 0 0 1.5px var(--accent), 0 30px 60px -18px color-mix(in srgb, var(--accent) 55%, transparent), 0 8px 24px rgb(0 0 0 / 40%); } .pricing-card-owned { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 14%, transparent) 0%, rgb(255 255 255 / 3%) 100%); border-color: color-mix(in srgb, var(--accent) 70%, transparent); } .pricing-card-featured-badge { position: absolute; top: 0; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; text-shadow: 0 1px 2px rgb(0 0 0 / 25%); font-size: 0.78rem; font-weight: 700; padding: 0.3rem 1.1rem; border-radius: 0 0 10px 10px; letter-spacing: 0.02em; } .badge-current { position: absolute; top: 0; right: 0; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; text-shadow: 0 1px 2px rgb(0 0 0 / 25%); padding: 4px 15px; font-size: 0.8rem; border-radius: 0 19px; font-weight: bold; } .pricing-card-header { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 2.25rem 1.5rem 1rem; } .pricing-card-image { max-width: 100px; max-height: 100px; object-fit: contain; border-radius: 8px; margin-bottom: 0.75rem; } .pricing-card-category { font-size: 0.8rem; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 0.06em; } .pricing-card-title { margin: 0.35rem 0 0.6rem; font-size: 1.35rem; font-weight: 700; color: #fff; } .pricing-card-price { font-size: 1.7rem; font-weight: 700; color: #fff; white-space: nowrap; } /* Suffixe de période ("/mois", "* /an"...) : plus petit et plus fin que le montant — attendu dans son propre span à côté du montant (cf. TableForfait.razor/SaaSPlanForfait.razor). */ .pricing-card-price-period { font-size: 0.85rem; font-weight: 400; color: #b3aed6; } .pricing-card-price-note { font-size: 0.8rem; font-weight: 400; color: #9a94bd; margin-top: 0.15rem; } .pricing-card-body { flex-grow: 1; padding: 0 1.5rem 1rem; } .pricing-card-description { color: #c2bde3; font-size: 0.95rem; text-align: center; margin: 0 0 1rem; } .pricing-card-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; } .pricing-card-features li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.9rem; color: #d8d4f0; } .pricing-card-check { color: var(--accent); font-weight: 700; flex-shrink: 0; } .pricing-card-footer { padding: 1.25rem 1.5rem 1.5rem; } .pricing-card-cta { display: block; width: 100%; box-sizing: border-box; text-align: center; padding: 0.75rem 1rem; border-radius: 999px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; text-shadow: 0 1px 2px rgb(0 0 0 / 25%); font-weight: 700; text-decoration: none; border: none; cursor: pointer; font-size: 1rem; box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--accent) 60%, transparent); transition: filter 0.2s ease, transform 0.2s ease; } .pricing-card-cta:hover { filter: brightness(1.1); transform: translateY(-1px); color: #fff; } .pricing-card-cta-owned { background: transparent; color: #fff; box-shadow: none; border: 1px solid color-mix(in srgb, var(--accent) 70%, transparent); } .pricing-card-cta-owned:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); color: #fff; } /* ========================================================================= Fiche produit détail — partagée entre /catalogue/plans/{id} (TableForfait) et /subscription/saasplans/{id} (SaaSPlanForfait). Réutilise --accent/--accent-2 posés par .pricing-card-accent-N (appliquée au conteneur .product-detail lui-même par la page hôte, même convention que les cartes catalogue) et les classes de badge déjà existantes (.pricing-card-featured-badge, .badge-current, .pricing-card-check). ========================================================================= */ .product-detail-back { display: inline-flex; align-items: center; gap: 0.4rem; color: #b9a6ff; font-weight: 600; font-size: 0.9rem; text-decoration: none; margin-bottom: 1.5rem; cursor: pointer; background: none; border: none; } .product-detail-back:hover { color: #fff; text-decoration: underline; } .product-detail { position: relative; width: 100%; max-width: 980px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 2.5rem; padding: 2rem; box-sizing: border-box; } .product-detail-visual { flex: 1 1 320px; max-width: 400px; min-height: 320px; border-radius: 24px; background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 28%, transparent) 0%, color-mix(in srgb, var(--accent) 8%, transparent) 55%, rgb(255 255 255 / 3%) 100%); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); display: flex; align-items: center; justify-content: center; overflow: hidden; } .product-detail-visual img { width: 100%; height: 100%; object-fit: contain; padding: 2rem; box-sizing: border-box; } /* Repli sans image (ex: plans SaaS, qui n'en portent pas) : initiale du produit en grand, dans le même dégradé d'accent que la carte catalogue — jamais un cadre vide. */ .product-detail-visual-fallback { font-size: 5rem; font-weight: 700; color: color-mix(in srgb, var(--accent) 85%, white); text-shadow: 0 4px 32px color-mix(in srgb, var(--accent) 50%, transparent); } .product-detail-info { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; } .product-detail-category { font-size: 0.85rem; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 0.06em; } .product-detail-title { margin: 0.4rem 0 0.9rem; font-size: 2.1rem; font-weight: 700; color: #fff; line-height: 1.15; } .product-detail-price { font-size: 2rem; font-weight: 700; color: #fff; } .product-detail-price-strike { font-size: 1.2rem; font-weight: 500; color: #9a94bd; text-decoration: line-through; margin-right: 0.5rem; } .product-detail-price-period { font-size: 0.95rem; font-weight: 400; color: #b3aed6; } .product-detail-price-note { font-size: 0.85rem; color: #9a94bd; margin-top: 0.2rem; } .product-detail-cta { display: inline-block; width: fit-content; padding: 0.85rem 2.25rem; margin: 1.5rem 0 2rem; border-radius: 999px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; text-shadow: 0 1px 2px rgb(0 0 0 / 25%); font-weight: 700; font-size: 1.05rem; text-decoration: none; border: none; cursor: pointer; box-shadow: 0 10px 24px -6px color-mix(in srgb, var(--accent) 60%, transparent); transition: filter 0.2s ease, transform 0.2s ease; } .product-detail-cta:hover { filter: brightness(1.1); transform: translateY(-1px); color: #fff; } .product-detail-description { color: #d8d4f0; font-size: 1rem; line-height: 1.65; white-space: pre-line; margin: 0 0 1.75rem; } .product-detail-features-title { color: #fff; font-weight: 700; font-size: 1rem; margin-bottom: 0.75rem; } /* Sous-titre de groupe (Facturation & conformité / Paiement & vente / Personnalisation) — un par catégorie active du plan, répété au-dessus de chaque .product-detail-features qui suit. */ .product-detail-feature-category { color: #b9a6ff; font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.03em; margin: 1rem 0 0.5rem; } .product-detail-feature-category:first-of-type { margin-top: 0; } .product-detail-features { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: 0.65rem; } .product-detail-features li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.98rem; color: #e4e1f5; } /* Libellé (gras) + phrase explicative (atténuée, ligne suivante) empilés dans chaque

— la fiche détail peut se permettre la phrase complète, contrairement à la carte catalogue. */ .product-detail-feature-label { display: block; font-weight: 600; color: #fff; } .product-detail-feature-desc { display: block; font-size: 0.85rem; color: #b3aed6; margin-top: 0.15rem; } /* Le lien "Souscrire"/"Commander" ci-dessus (product-detail-cta) reste dans le flux normal — sur petit écran (mobile), un CTA sticky en bas de viewport évite d'avoir à scroller pour agir, bonne pratique e-commerce standard sur fiche produit. */ @media (max-width: 640px) { .product-detail-cta { position: sticky; bottom: 1rem; width: 100%; text-align: center; box-sizing: border-box; z-index: 4; } } /* Toggle de récurrence (Mensuel/Annuel/...) — déplacé ici depuis SaaSPlanForfait.razor.css (CSS scopé Blazor, invisible en dehors de son propre composant) pour être réutilisable par toute page partageant ce fichier, notamment la vue "options" d'un groupe couplé de TableForfait.razor (un même groupe peut mélanger plusieurs récurrences, cf. ForfaitCouplingHelper). */ .recurrence-toggle { display: inline-flex; gap: 0.35rem; padding: 0.4rem; background: rgb(255 255 255 / 6%); border: 1px solid rgb(255 255 255 / 14%); border-radius: 999px; backdrop-filter: blur(10px); } .recurrence-toggle-option { border: none; background: transparent; cursor: pointer; padding: 0.65rem 1.5rem; font-size: 1.05rem; font-weight: 600; color: #c9b8ff; border-radius: 999px; transition: all 0.25s ease; white-space: nowrap; } .recurrence-toggle-option:hover { background: rgb(255 255 255 / 10%); color: #fff; } .recurrence-toggle-option.active { background: linear-gradient(90deg, #7c5cf6, #a78bfa); color: #fff; box-shadow: 0 6px 14px rgb(124 92 246 / 45%); }