/* ===================================================================== WEB 213 — Page d'accueil Sections, maquette du héros, grille tarifaire, FAQ, révélations. S'appuie sur tokens.css / base.css / components.css. ===================================================================== */ /* --------------------------------------------------------------------- 1. Révélation au défilement Les états masqués ne s'appliquent QUE si reveal.js a posé `.js-reveal` sur . Sans JavaScript, la page reste entièrement lisible. --------------------------------------------------------------------- */ /* reveal.js marque chaque élément à animer d'un attribut `data-reveal-item` — y compris le conteneur lui-même quand il n'a pas d'enfants à animer. Un seul sélecteur suffit donc, sans `:has()`, et le rendu reste identique sur les navigateurs plus anciens. */ .js-reveal [data-reveal-item] { opacity: 0; transform: translate3d(0, 22px, 0); will-change: opacity, transform; } .js-reveal [data-reveal].is-visible [data-reveal-item], .js-reveal [data-reveal-item].is-visible { opacity: 1; transform: none; transition: opacity .62s var(--ease) calc(var(--i, 0) * 80ms), transform .62s var(--ease) calc(var(--i, 0) * 80ms); } @media (prefers-reduced-motion: reduce) { .js-reveal [data-reveal-item] { opacity: 1 !important; transform: none !important; transition: none !important; } } /* --------------------------------------------------------------------- 2. Rythme des sections --------------------------------------------------------------------- */ .section { padding-block: clamp(56px, 8vw, 108px); } .section--tinted { position: relative; background: color-mix(in srgb, var(--brand-500) 5%, transparent); border-block: 1px solid var(--border); } .container--narrow { max-width: 820px; } .section__head { max-width: 700px; margin-inline: auto; margin-bottom: clamp(34px, 5vw, 58px); text-align: center; } .kicker { display: inline-block; margin-bottom: 12px; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--primary); } html[dir="rtl"] .kicker { letter-spacing: 0; } .section__head h2 { margin-bottom: 14px; } .section__head .lede { margin: 0; color: var(--text-soft); font-size: 1.04rem; } .grad { background: linear-gradient(105deg, var(--brand-500) 10%, var(--accent-500) 90%); -webkit-background-clip: text; background-clip: text; color: transparent; } html[dir="rtl"] .grad { background-image: linear-gradient(255deg, var(--brand-500) 10%, var(--accent-500) 90%); } .btn-lg { min-height: 54px; padding: 15px 30px; font-size: 1.02rem; } .badge-lg { padding: 8px 16px; font-size: .84rem; } /* --------------------------------------------------------------------- 3. Héros --------------------------------------------------------------------- */ .hero { padding-block: clamp(34px, 6vw, 78px) clamp(46px, 7vw, 88px); } .hero__grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(30px, 5vw, 62px); align-items: center; } .hero__copy h1 { margin: 16px 0 18px; font-size: clamp(2.1rem, 1.2rem + 3.4vw, 3.6rem); line-height: 1.08; } .hero__copy .lede { max-width: 52ch; margin-bottom: 30px; font-size: clamp(1rem, .95rem + .3vw, 1.14rem); color: var(--text-soft); } .hero__actions { display: flex; flex-wrap: wrap; gap: 12px; } .hero__note { display: flex; align-items: center; gap: 8px; margin-top: 20px; font-size: .88rem; color: var(--text-muted); } .hero__note > svg { width: 17px; height: 17px; flex: 0 0 auto; } /* ---- Maquette de navigateur ---------------------------------------- */ .hero__mock { position: relative; padding-block: 10px; } .mock-window { overflow: hidden; border-radius: var(--r-lg); transform: perspective(1400px) rotateY(-7deg) rotateX(3deg); transform-origin: center; } html[dir="rtl"] .mock-window { transform: perspective(1400px) rotateY(7deg) rotateX(3deg); } .mock-window__bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--bg-elevated) 55%, transparent); } .mock-window__bar .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); } .mock-window__url { flex: 1; margin-inline-start: 10px; padding: 4px 12px; font-size: .72rem; color: var(--text-muted); text-align: center; background: var(--field-bg); border-radius: var(--r-full); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mock-window__body { padding: 18px; } .mock-shop__head { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--border); } .mock-avatar { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 auto; border-radius: 14px; background: color-mix(in srgb, var(--brand-500) 14%, transparent); color: var(--primary); } .mock-avatar .mock-logo { width: 26px; height: 26px; } .mock-lines { display: grid; gap: 7px; flex: 1; } .mock-lines i, .mock-line { display: block; height: 8px; border-radius: var(--r-full); background: var(--border); } .mock-line { margin-top: 7px; } .mock-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .mock-card { padding: 10px; border-radius: var(--r-sm); background: var(--field-bg); border: 1px solid var(--border); } .mock-card b { display: block; margin-top: 8px; font-size: .8rem; } .mock-card em { display: block; margin-top: 3px; font-size: .78rem; font-style: normal; font-weight: 700; color: var(--primary); } .mock-thumb { display: block; aspect-ratio: 4 / 3; border-radius: 10px; background: linear-gradient(135deg, var(--brand-200), var(--brand-400)); } .mock-thumb--2 { background: linear-gradient(135deg, var(--accent-400), var(--brand-300)); } .mock-thumb--3 { background: linear-gradient(135deg, var(--brand-300), var(--brand-600)); } .mock-thumb--4 { background: linear-gradient(135deg, var(--brand-400), var(--accent-500)); } /* ---- Notification de commande flottante ---------------------------- */ .mock-toast { position: absolute; inset-inline-start: -26px; bottom: -18px; display: flex; align-items: flex-start; gap: 11px; max-width: 290px; padding: 14px 16px; border-radius: var(--r-md); } .mock-toast__icon { color: var(--ok-500); flex: 0 0 auto; } .mock-toast__icon > svg { width: 22px; height: 22px; } .mock-toast b { display: block; font-size: .88rem; } .mock-toast small { display: block; margin-top: 2px; font-size: .76rem; color: var(--text-muted); } .mock-toast em { display: inline-flex; align-items: center; gap: 5px; margin-top: 7px; font-size: .74rem; font-style: normal; font-weight: 600; color: var(--primary); } .mock-toast em > svg { width: 14px; height: 14px; } /* Flottement continu, désactivé si l'utilisateur préfère moins d'animations */ @keyframes floaty { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -14px, 0); } } @media (prefers-reduced-motion: no-preference) { [data-float="slow"] { animation: floaty 5.5s ease-in-out infinite alternate; } } /* --------------------------------------------------------------------- 4. Bandeau de chiffres --------------------------------------------------------------------- */ .stats-band { padding-bottom: clamp(20px, 4vw, 40px); } .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0; padding: 24px 18px; list-style: none; } .stats li { display: grid; justify-items: center; gap: 3px; padding: 6px 10px; text-align: center; } .stats li + li { border-inline-start: 1px solid var(--border); } .stats__icon { color: var(--primary); margin-bottom: 4px; } .stats__icon > svg { width: 22px; height: 22px; } .stats b { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); font-weight: 800; letter-spacing: -.02em; color: var(--text); } .stats small { font-size: .82rem; color: var(--text-muted); } /* --------------------------------------------------------------------- 5. Comment ça marche --------------------------------------------------------------------- */ .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 0; padding: 0; list-style: none; counter-reset: step; } .step { position: relative; padding: 26px 22px 24px; } .step h3 { margin: 14px 0 8px; font-size: 1.06rem; } .step p { margin: 0; font-size: .92rem; color: var(--text-soft); } .step__num { display: grid; place-items: center; width: 40px; height: 40px; font-size: 1.05rem; font-weight: 800; color: var(--on-primary); background: var(--primary); border-radius: 13px; box-shadow: 0 8px 20px -8px rgba(30, 143, 213, .8); } /* Trait de liaison entre les étapes */ .step::after { content: ""; position: absolute; top: 46px; inset-inline-start: calc(100% + 1px); width: 16px; height: 2px; background: linear-gradient(90deg, var(--brand-300), transparent); } html[dir="rtl"] .step::after { background: linear-gradient(270deg, var(--brand-300), transparent); } .steps li:last-child::after { display: none; } /* --------------------------------------------------------------------- 6. Fonctionnalités --------------------------------------------------------------------- */ .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(262px, 1fr)); gap: 18px; } .feature { padding: 26px 24px; transition: transform var(--t-base), box-shadow var(--t-base); } .feature:hover { transform: translateY(-4px); } .feature h3 { margin: 16px 0 8px; font-size: 1.04rem; } .feature p { margin: 0; font-size: .92rem; color: var(--text-soft); } .feature__icon { display: grid; place-items: center; width: 46px; height: 46px; color: var(--primary); background: color-mix(in srgb, var(--brand-500) 13%, transparent); border-radius: 14px; } .feature__icon > svg { width: 23px; height: 23px; } /* --------------------------------------------------------------------- 7. Tarifs --------------------------------------------------------------------- */ .cycle { display: flex; justify-content: center; margin-top: 26px; } .cycle__switch { display: inline-flex; gap: 4px; padding: 5px; background: var(--glass-bg-soft); border: 1px solid var(--border); border-radius: var(--r-full); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .cycle__btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; font: inherit; font-weight: 600; font-size: .93rem; color: var(--text-soft); background: transparent; border: 0; border-radius: var(--r-full); cursor: pointer; transition: background-color var(--t-fast), color var(--t-fast); } .cycle__btn:hover { color: var(--text); } .cycle__btn.is-active { color: var(--on-primary); background: var(--primary); box-shadow: 0 6px 16px -8px rgba(30, 143, 213, .9); } .cycle__save { padding: 3px 8px; font-size: .7rem; font-weight: 700; border-radius: var(--r-full); color: var(--ok-500); background: rgba(22, 164, 107, .14); } .cycle__btn.is-active .cycle__save { color: #fff; background: rgba(255, 255, 255, .22); } .plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; } .plan { position: relative; display: flex; flex-direction: column; padding: 30px 26px 28px; } .plan--featured { border-color: var(--brand-400); box-shadow: var(--glass-shadow), 0 0 0 2px var(--brand-400) inset; } .plan__flag { position: absolute; top: -13px; inset-inline-start: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; font-size: .74rem; font-weight: 700; white-space: nowrap; color: var(--on-primary); background: var(--primary); border-radius: var(--r-full); box-shadow: 0 8px 18px -8px rgba(30, 143, 213, .9); } html[dir="rtl"] .plan__flag { transform: translateX(50%); } .plan__flag > svg { width: 13px; height: 13px; } .plan__name { margin: 0 0 4px; font-size: 1.22rem; } .plan__tagline { margin: 0 0 20px; font-size: .88rem; color: var(--text-muted); min-height: 3em; } .plan__price { display: flex; align-items: baseline; gap: 8px; margin: 0 0 4px; flex-wrap: wrap; } .plan__amount { font-size: clamp(2rem, 1.5rem + 1.6vw, 2.7rem); font-weight: 800; letter-spacing: -.03em; color: var(--text); font-variant-numeric: tabular-nums; } .plan__unit { font-size: .88rem; font-weight: 600; color: var(--text-muted); } .plan__sub { margin: 0 0 20px; font-size: .82rem; color: var(--text-muted); min-height: 1.4em; } .plan__features { margin: 24px 0 0; padding: 22px 0 0; border-top: 1px solid var(--border); list-style: none; display: grid; gap: 11px; } .plan__features li { display: flex; align-items: flex-start; gap: 10px; font-size: .9rem; color: var(--text-soft); } .plan__features svg { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 3px; } .plan__features .is-on svg { color: var(--ok-500); } .plan__features .is-off { color: var(--text-muted); opacity: .65; } .plan__features .is-off svg { color: var(--text-muted); } /* ---- Bandeau « compris dans tous les packs » ----------------------- */ .included { margin-top: 26px; padding: 28px 30px; } .included h3 { margin: 0 0 16px; font-size: 1rem; } .included ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px 22px; margin: 0; padding: 0; list-style: none; } .included li { display: flex; align-items: center; gap: 9px; font-size: .9rem; color: var(--text-soft); } .included li > svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--ok-500); } .included__note { display: flex; align-items: flex-start; gap: 9px; margin: 20px 0 0; padding-top: 18px; border-top: 1px solid var(--border); font-size: .86rem; color: var(--text-muted); } .included__note > svg { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 2px; } /* --------------------------------------------------------------------- 8. FAQ --------------------------------------------------------------------- */ .faq { display: grid; gap: 12px; } .faq__item { overflow: hidden; } .faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 19px 22px; font-weight: 600; cursor: pointer; list-style: none; transition: color var(--t-fast); } .faq__item summary::-webkit-details-marker { display: none; } .faq__item summary:hover { color: var(--primary); } .faq__sign { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 auto; color: var(--primary); background: color-mix(in srgb, var(--brand-500) 12%, transparent); border-radius: 50%; transition: transform var(--t-base); } .faq__sign > svg { width: 16px; height: 16px; } .faq__item[open] .faq__sign { transform: rotate(45deg); } .faq__answer { padding: 0 22px 20px; } .faq__answer p { margin: 0; font-size: .95rem; color: var(--text-soft); } @media (prefers-reduced-motion: no-preference) { .faq__item[open] .faq__answer { animation: faqOpen .3s var(--ease); } @keyframes faqOpen { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } } /* --------------------------------------------------------------------- 9. Appel à l'action final --------------------------------------------------------------------- */ .final-cta { padding-block: clamp(50px, 7vw, 96px); } .final-cta__box { position: relative; overflow: hidden; padding: clamp(36px, 5vw, 64px) clamp(24px, 4vw, 56px); text-align: center; } .final-cta__box::before { content: ""; position: absolute; inset: -40% 30% auto; height: 220px; background: radial-gradient(closest-side, var(--blob-1), transparent); pointer-events: none; } .final-cta__box > * { position: relative; } .final-cta__box h2 { margin-bottom: 12px; } .final-cta__box .lede { max-width: 54ch; margin: 0 auto 28px; color: var(--text-soft); } .final-cta__login { margin: 18px 0 0; font-size: .9rem; color: var(--text-muted); } .final-cta__login a { font-weight: 700; } /* --------------------------------------------------------------------- 10. Navigation d'ancres dans l'en-tête --------------------------------------------------------------------- */ .site-nav { display: flex; align-items: center; gap: 4px; } .site-nav a { padding: 9px 12px; white-space: nowrap; font-size: .91rem; font-weight: 600; color: var(--text-soft); border-radius: var(--r-full); transition: color var(--t-fast), background-color var(--t-fast); } .site-nav a:hover { color: var(--text); background: var(--glass-bg-soft); text-decoration: none; } /* --------------------------------------------------------------------- 11. Pied de page complet --------------------------------------------------------------------- */ .footer-rich { padding-block: clamp(40px, 6vw, 66px) 26px; border-top: 1px solid var(--border); } .footer-rich__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 34px; margin-bottom: 34px; } .footer-rich .brand .logo { height: 28px; } .footer-rich__about p { max-width: 34ch; margin: 14px 0 0; font-size: .9rem; color: var(--text-muted); } .footer-rich h4 { margin: 0 0 14px; font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); } html[dir="rtl"] .footer-rich h4 { letter-spacing: 0; } .footer-rich ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; } .footer-rich ul a { font-size: .92rem; color: var(--text-soft); } .footer-rich ul a:hover { color: var(--primary); } .footer-rich__bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 22px; border-top: 1px solid var(--border); font-size: .86rem; color: var(--text-muted); } /* --------------------------------------------------------------------- 12. Adaptation aux petits écrans --------------------------------------------------------------------- */ /* En dessous de 1180 px, la barre devient trop dense : les ancres disparaissent au profit des boutons d'action, qui priment. */ @media (max-width: 1180px) { .site-nav { display: none; } } @media (max-width: 1080px) { .plans { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } .plan--featured { order: -1; } .steps { grid-template-columns: repeat(2, 1fr); } .step:nth-child(2)::after { display: none; } .footer-rich__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; } .hero__copy { text-align: center; } .hero__copy .lede { margin-inline: auto; } .hero__actions, .hero__note { justify-content: center; } .hero__mock { max-width: 520px; margin-inline: auto; } .mock-window, html[dir="rtl"] .mock-window { transform: none; } .stats { grid-template-columns: repeat(2, 1fr); gap: 14px; } .stats li:nth-child(odd) { border-inline-start: 0; } .stats li:nth-child(3), .stats li:nth-child(4) { padding-top: 16px; border-top: 1px solid var(--border); } } @media (max-width: 640px) { .steps { grid-template-columns: 1fr; } .step::after { display: none; } .mock-toast { position: static; max-width: none; margin-top: 14px; } .footer-rich__grid { grid-template-columns: 1fr; gap: 26px; } .cycle__switch { width: 100%; } .cycle__btn { flex: 1; justify-content: center; padding-inline: 12px; } .included { padding: 24px 20px; } }