/* =================================================== GOOPI — Design System & Styles globaux Typographie : Outfit (chargée via dans le de chaque page — preconnect + stylesheet, non bloquant) =================================================== */ /* === 1. Variables CSS ============================================= */ :root { /* Couleurs */ --color-primary: #E9563B; --color-primary-dark: #C94430; --color-primary-deep: #B50301; --color-secondary: #EF811F; --color-secondary-light:#F9A055; --color-bg: #FFFAF5; --color-bg-alt: #FFF6EE; --color-surface: #FFE4D1; --color-surface-light: #FFF0E5; --color-text: #2A1810; --color-text-muted: #7A4A38; --color-text-light: #A86848; --color-white: #FFFFFF; --color-border: rgba(233, 86, 59, 0.15); /* Typographie */ --font: 'Outfit', sans-serif; --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-md: 1.125rem; --fs-lg: 1.25rem; --fs-xl: 1.5rem; --fs-2xl: 2rem; --fs-3xl: 2.5rem; --fs-4xl: 3rem; /* Espacements (base 8px) */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px; --s20: 80px; --s24: 96px; /* Rayons */ --r-sm: 8px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px; /* Ombres (corail dilué, jamais noir) */ --sh-xs: 0 1px 4px rgba(233,86,59,.08); --sh-sm: 0 2px 8px rgba(233,86,59,.10); --sh-md: 0 8px 24px rgba(233,86,59,.14); --sh-lg: 0 16px 48px rgba(233,86,59,.18); --sh-xl: 0 24px 64px rgba(233,86,59,.22); /* Transitions */ --t-fast: 150ms ease; --t-base: 250ms ease; --t-slow: 400ms ease; /* Layout */ --container-max: 1200px; --container-pad: var(--s6); --header-h: 76px; } /* === 2. Reset & Base ============================================= */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } html { scroll-behavior: smooth; font-size: 16px; } ::selection { background: rgba(233,86,59,.18); color: var(--color-text); } ::-moz-selection { background: rgba(233,86,59,.18); color: var(--color-text); } body { font-family: var(--font); font-size: var(--fs-base); color: var(--color-text); background: var(--color-bg); overflow-x: hidden; line-height: 1.6; -webkit-font-smoothing: antialiased; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } button { cursor: pointer; border: none; background: none; font-family: inherit; } /* === 3. Layout =================================================== */ .container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); } .section { padding: var(--s20) 0; } .section--alt { background: var(--color-bg-alt); } .section--dark { background: var(--color-text); } /* === 4. Typographie ============================================== */ h1,h2,h3,h4,h5,h6 { font-weight: 700; line-height: 1.2; color: var(--color-text); } h1 { font-size: var(--fs-4xl); } h2 { font-size: var(--fs-3xl); } h3 { font-size: var(--fs-xl); } h4 { font-size: var(--fs-lg); } p { line-height: 1.7; } .section-label { display: inline-block; font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--color-primary); background: rgba(233,86,59,.1); padding: var(--s1) var(--s3); border-radius: var(--r-pill); margin-bottom: var(--s4); } .section-title { margin-bottom: var(--s4); } .section-sub { font-size: var(--fs-md); color: var(--color-text-muted); max-width: 600px; } .text-center { text-align: center; } .text-center .section-sub { margin: 0 auto; } /* === 5. Boutons ================================================== */ .btn { display: inline-flex; align-items: center; gap: var(--s2); font-family: var(--font); font-size: var(--fs-base); font-weight: 600; padding: var(--s3) var(--s6); border-radius: var(--r-pill); transition: transform var(--t-base), box-shadow var(--t-base), background-color var(--t-base), color var(--t-base); white-space: nowrap; line-height: 1; border: 2px solid transparent; } .btn:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; } .btn-primary { background: var(--color-primary); color: var(--color-white); box-shadow: var(--sh-md); } .btn-primary:hover { background: var(--color-primary-deep); transform: translateY(-2px); box-shadow: var(--sh-lg); } .btn-secondary { background: transparent; color: var(--color-primary); border-color: var(--color-primary); } .btn-secondary:hover { background: rgba(233,86,59,.06); transform: translateY(-2px); } .btn-ghost { color: var(--color-text-muted); font-weight: 500; } .btn-ghost:hover { color: var(--color-primary); } .btn--lg { font-size: var(--fs-md); padding: var(--s4) var(--s8); } .btn--sm { font-size: var(--fs-sm); padding: var(--s2) var(--s4); } /* === 6. Header / Nav ============================================= */ .header { position: sticky; top: 0; z-index: 100; height: var(--header-h); background: rgba(255,250,245,.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--color-border); border-top: 3px solid var(--color-primary); transition: box-shadow var(--t-base); } .header.scrolled { box-shadow: var(--sh-md); } /* Propager la hauteur du header jusqu'au header__inner */ .header > .container { height: 100%; } .header__inner { display: flex; align-items: center; justify-content: space-between; height: 100%; } .header__logo { display: flex; align-items: center; gap: var(--s3); font-size: var(--fs-xl); font-weight: 700; color: var(--color-text); letter-spacing: -.02em; transition: opacity var(--t-fast); } .header__logo:hover { opacity: .85; } .nav { display: flex; align-items: center; gap: var(--s8); } .nav__links { display: flex; align-items: center; gap: var(--s6); } .nav__link { font-size: var(--fs-sm); font-weight: 500; color: var(--color-text-muted); transition: color var(--t-fast); position: relative; padding-bottom: 2px; } .nav__link::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: var(--color-primary); border-radius: var(--r-pill); transition: width var(--t-base); } .nav__link:hover, .nav__link.active { color: var(--color-primary); } .nav__link:hover::after, .nav__link.active::after { width: 100%; } /* Burger */ .burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; padding: var(--s2); border-radius: var(--r-sm); transition: background var(--t-fast); } .burger:hover { background: var(--color-surface); } .burger__line { width: 100%; height: 2px; background: var(--color-text); border-radius: var(--r-pill); transition: transform var(--t-base), opacity var(--t-base); } .burger.open .burger__line:nth-child(1) { transform: translateY(7px) rotate(45deg); } .burger.open .burger__line:nth-child(2) { opacity: 0; } .burger.open .burger__line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Nav mobile */ .nav__mobile { display: none; position: fixed; top: var(--header-h); left: 0; right: 0; background: var(--color-white); padding: var(--s6); border-radius: 0 0 var(--r-lg) var(--r-lg); box-shadow: 0 16px 32px -8px rgba(20,20,40,.18); flex-direction: column; gap: var(--s4); z-index: 99; } .nav__mobile.open { display: flex; animation: navMobileIn .22s cubic-bezier(.16,1,.3,1); } @keyframes navMobileIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .nav__mobile .nav__link { font-size: var(--fs-md); font-weight: 600; padding: var(--s4); border-radius: var(--r-md); color: var(--color-text); transition: background var(--t-fast), color var(--t-fast), padding-left var(--t-fast); } .nav__mobile .nav__link::after { display: none; } .nav__mobile .nav__link:hover, .nav__mobile .nav__link:focus-visible { background: var(--color-bg-alt); color: var(--color-primary); padding-left: calc(var(--s4) + 6px); } .nav__mobile .nav__link.active { color: var(--color-primary); background: rgba(233,86,59,.08); } .nav__mobile .btn { margin-top: var(--s4); width: 100%; justify-content: center; } /* === 7. Hero ===================================================== */ .hero { padding: var(--s20) 0; overflow: hidden; background: linear-gradient(135deg, var(--color-bg) 0%, var(--color-bg-alt) 100%); position: relative; } .hero::before { content: ''; position: absolute; top: -200px; right: -200px; width: 700px; height: 700px; background: radial-gradient(circle, rgba(233,86,59,.06) 0%, transparent 70%); border-radius: 50%; pointer-events: none; } .hero__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s16); align-items: center; } .hero__eyebrow { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--fs-sm); font-weight: 600; color: var(--color-primary); background: rgba(233,86,59,.08); padding: var(--s2) var(--s4); border-radius: var(--r-pill); margin-bottom: var(--s6); } .hero__eyebrow::before { content: ''; width: 8px; height: 8px; background: var(--color-primary); border-radius: 50%; } .hero__title { font-size: clamp(2.2rem, 4vw, 3.4rem); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; margin-bottom: var(--s6); } .hero__title span { color: var(--color-primary); } .hero__subtitle { font-size: var(--fs-md); color: var(--color-text-muted); line-height: 1.75; margin-bottom: var(--s10); } .hero__ctas { display: flex; gap: var(--s4); flex-wrap: wrap; } .hero__badges { display: flex; gap: var(--s5); margin-top: var(--s8); flex-wrap: wrap; } .hero__badge { display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-xs); font-weight: 500; color: var(--color-text-muted); } .hero__badge::before { content: '✓'; color: var(--color-primary); font-weight: 700; } /* === 8. Mockups CSS ============================================== */ .hero__visual { position: relative; height: 540px; } /* --- Mockups images réelles (hero) --- */ .hero__visual-desktop { position: absolute; top: 0; left: 0; width: 100%; max-width: 640px; height: auto; } .hero__visual-mobile { position: absolute; bottom: 0; right: 0; width: 34%; max-width: 230px; height: auto; z-index: 2; } /* Fenêtre app Windows */ .mockup-win { position: absolute; top: 0; left: 0; width: 420px; background: var(--color-white); border-radius: var(--r-md); box-shadow: var(--sh-xl); overflow: hidden; border: 1px solid rgba(233,86,59,.1); } .mockup-win__bar { display: flex; align-items: center; gap: var(--s2); padding: var(--s3) var(--s4); background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%); } .mockup-win__dots { display: flex; gap: 6px; } .mockup-win__dot { width: 10px; height: 10px; border-radius: 50%; } .mockup-win__dot--r { background: #FF5F57; } .mockup-win__dot--y { background: #FFBD2E; } .mockup-win__dot--g { background: #28CA42; } .mockup-win__name { font-size: var(--fs-xs); font-weight: 600; color: rgba(255,255,255,.9); margin-left: var(--s2); } .mockup-win__body { display: flex; height: 290px; } .mockup-sidebar { width: 110px; background: #FFF6EE; border-right: 1px solid var(--color-border); padding: var(--s3) 0; flex-shrink: 0; } .mockup-sidebar__item { display: flex; align-items: center; gap: var(--s2); padding: 7px var(--s3); font-size: 9px; font-weight: 500; color: var(--color-text-muted); } .mockup-sidebar__item.active { background: rgba(233,86,59,.12); color: var(--color-primary); border-right: 2px solid var(--color-primary); } .mockup-sidebar__icon { font-size: 12px; } .mockup-main { flex: 1; padding: var(--s3); overflow: hidden; } .mockup-planning-hd { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s3); } .mockup-planning-hd-title { font-size: 10px; font-weight: 700; color: var(--color-text); } .mockup-planning-hd-date { font-size: 9px; color: var(--color-text-muted); } .mockup-rdv { display: flex; align-items: flex-start; gap: var(--s2); background: var(--color-bg-alt); border-radius: var(--r-sm); padding: 6px var(--s3); margin-bottom: 5px; border-left: 3px solid var(--color-primary); font-size: 9px; } .mockup-rdv--orange { border-left-color: var(--color-secondary); } .mockup-rdv--green { border-left-color: #28CA42; } .mockup-rdv__time { font-weight: 700; color: var(--color-primary); min-width: 30px; font-size: 8px; padding-top: 1px; } .mockup-rdv__name { font-weight: 600; color: var(--color-text); margin-bottom: 1px; } .mockup-rdv__detail { color: var(--color-text-muted); } .mockup-rdv__badge { margin-left: auto; background: rgba(233,86,59,.1); color: var(--color-primary); padding: 1px 6px; border-radius: var(--r-pill); font-size: 7px; font-weight: 600; white-space: nowrap; flex-shrink: 0; } .mockup-rdv__badge--green { background: rgba(40,202,66,.1); color: #1a8c2a; } /* Téléphone mobile */ .mockup-phone { position: absolute; bottom: 10px; right: 10px; width: 158px; background: var(--color-white); border-radius: 24px; box-shadow: var(--sh-xl); border: 8px solid #2A1810; overflow: hidden; } .mockup-phone__notch { width: 60px; height: 14px; background: #2A1810; border-radius: 0 0 10px 10px; margin: 0 auto; } .mockup-phone__screen { padding: var(--s2); background: var(--color-bg); } .mockup-phone__hd { font-size: 8px; font-weight: 700; color: var(--color-text); margin-bottom: var(--s2); padding-bottom: var(--s2); border-bottom: 1px solid var(--color-border); } .mockup-phone__hd span { font-weight: 400; color: var(--color-text-muted); } .mockup-phone__item { background: var(--color-white); border-radius: var(--r-sm); padding: 5px var(--s2); margin-bottom: 4px; border-left: 2px solid var(--color-primary); font-size: 7px; } .mockup-phone__item--done { border-left-color: #28CA42; opacity: .7; } .mockup-phone__item-name { font-weight: 700; color: var(--color-text); margin-bottom: 1px; } .mockup-phone__item-info { color: var(--color-text-muted); } .mockup-phone__item-time { font-weight: 600; color: var(--color-primary); margin-top: 2px; } .mockup-phone__item--done .mockup-phone__item-time { color: #1a8c2a; } /* === 9. Bandeau Métiers ========================================== */ .metiers { padding: var(--s12) 0; background: var(--color-surface); } .metiers__label { text-align: center; font-size: var(--fs-sm); font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: var(--s6); } .metiers__track { display: flex; gap: var(--s3); flex-wrap: wrap; justify-content: center; } .metier-pill { display: inline-flex; align-items: center; gap: var(--s2); background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--r-pill); padding: var(--s2) var(--s5); font-size: var(--fs-sm); font-weight: 500; color: var(--color-text); box-shadow: var(--sh-xs); transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base), color var(--t-base); } .metier-pill:hover { transform: translateY(-2px); box-shadow: var(--sh-md); border-color: var(--color-primary); color: var(--color-primary); } .metiers__note { text-align: center; margin-top: var(--s6); font-size: var(--fs-sm); color: var(--color-text-muted); font-style: italic; } /* === 10. Section 3 Briques ======================================= */ .briques__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s6); margin-top: var(--s12); } .brique-card { background: var(--color-white); border-radius: var(--r-lg); padding: var(--s8); box-shadow: var(--sh-sm); border: 1px solid var(--color-border); transition: transform var(--t-base), box-shadow var(--t-base); display: flex; flex-direction: column; } .brique-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); } .brique-card__icon { width: 56px; height: 56px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; margin-bottom: var(--s5); background: rgba(233,86,59,.08); color: var(--color-primary); } .brique-card__platform { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-light); margin-bottom: var(--s2); } .brique-card__title { font-size: var(--fs-xl); margin-bottom: var(--s3); } .brique-card__desc { font-size: var(--fs-sm); color: var(--color-text-muted); line-height: 1.7; flex: 1; } .brique-card__link { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--fs-sm); font-weight: 600; color: var(--color-primary); margin-top: var(--s5); transition: gap var(--t-base); } .brique-card__link:hover { gap: var(--s3); } /* === 11. Section Fonctionnalités ================================= */ .features { padding: var(--s20) 0; background: var(--color-bg-alt); } .feature-block { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--s10); align-items: center; padding: var(--s10) 0; border-bottom: 1px solid var(--color-border); } .feature-block:last-child { border-bottom: none; } .feature-block--rev { direction: rtl; } .feature-block--rev > * { direction: ltr; } .feature-block__num { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: var(--color-primary); color: var(--color-white); border-radius: 50%; font-size: var(--fs-sm); font-weight: 700; margin-bottom: var(--s4); } .feature-block__title { font-size: var(--fs-2xl); margin-bottom: var(--s4); } .feature-block__desc { color: var(--color-text-muted); line-height: 1.75; margin-bottom: var(--s6); } .feature-list { display: flex; flex-direction: column; gap: var(--s3); } .feature-list__item { display: flex; align-items: flex-start; gap: var(--s3); font-size: var(--fs-sm); color: var(--color-text-muted); } .feature-list__item::before { content: ''; width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; margin-top: 2px; background: rgba(233,86,59,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%23E9563B' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 12px; } /* Visuels feature — carte blanche commune */ .feature-visual { background: var(--color-white); border-radius: var(--r-lg); padding: var(--s6); box-shadow: var(--sh-md); border: 1px solid var(--color-border); min-height: 260px; display: flex; flex-direction: column; gap: var(--s3); position: relative; overflow: hidden; } .feature-visual::after { content: ''; position: absolute; bottom: -50px; right: -50px; width: 150px; height: 150px; background: radial-gradient(circle, rgba(233,86,59,.06) 0%, transparent 70%); border-radius: 50%; pointer-events: none; } .feature-visual__ttl { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--color-text-muted); padding-bottom: var(--s3); border-bottom: 1px solid var(--color-border); } /* Variante : feature-visual contenant une image (override .feature-visual) */ .feature-visual--img { display: block; position: relative; background: transparent; border: none; box-shadow: none; padding: 0; min-height: auto; overflow: visible; gap: 0; } /* Halo décoratif derrière l'image pour la profondeur */ .feature-visual--img::after { content: ''; display: block; position: absolute; inset: 6% -14% -16% 0%; background: radial-gradient(circle at 55% 50%, rgba(233,86,59,.32) 0%, rgba(239,129,31,.16) 45%, transparent 74%); filter: blur(46px); z-index: 0; pointer-events: none; } .feature-visual--img img { position: relative; z-index: 1; width: 100%; height: auto; display: block; border-radius: 10px; border: 1px solid var(--color-border); box-shadow: 0 2px 8px rgba(20,20,40,.08), 0 14px 32px -6px rgba(20,20,40,.18), 0 36px 70px -12px rgba(233,86,59,.22); } /* Viz 1 : Planning */ .viz-plan__row { display: flex; gap: var(--s3); align-items: flex-start; } .viz-plan__time { font-size: 10px; font-weight: 600; color: var(--color-text-muted); min-width: 38px; padding-top: 3px; } .viz-plan__slot { flex: 1; background: rgba(233,86,59,.08); border-left: 3px solid var(--color-primary); border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 5px var(--s3); font-size: 10px; } .viz-plan__slot--orange { border-left-color: var(--color-secondary); background: rgba(239,129,31,.08); } .viz-plan__slot--green { border-left-color: #28CA42; background: rgba(40,202,66,.08); } .viz-plan__slot-name { font-weight: 600; color: var(--color-text); } .viz-plan__slot-detail { color: var(--color-text-muted); margin-top: 1px; } .viz-plan__km { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s2); padding: var(--s2) var(--s3); background: rgba(233,86,59,.06); border-radius: var(--r-sm); font-size: 10px; color: var(--color-primary); font-weight: 600; } /* Viz 2 : Devis/Facture */ .viz-invoice__row { display: flex; justify-content: space-between; align-items: center; font-size: 10px; padding: 5px var(--s3); border-radius: var(--r-sm); } .viz-invoice__row:nth-child(odd) { background: var(--color-bg-alt); } .viz-invoice__label { color: var(--color-text-muted); } .viz-invoice__val { font-weight: 600; color: var(--color-text); } .viz-invoice__row--total { background: rgba(233,86,59,.08); font-weight: 700; color: var(--color-primary); margin-top: var(--s2); } .viz-invoice__badges { display: flex; gap: var(--s2); margin-top: var(--s3); } .viz-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--r-pill); font-size: 9px; font-weight: 600; } .viz-badge--green { background: rgba(40,202,66,.12); color: #1a8c2a; } .viz-badge--orange { background: rgba(239,129,31,.12); color: #b85e00; } .viz-badge--coral { background: rgba(233,86,59,.1); color: var(--color-primary); } /* Viz 3 : Rapport */ .viz-cert { background: var(--color-white); border: 1px dashed var(--color-border); border-radius: var(--r-sm); padding: var(--s4); } .viz-cert__head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: var(--s3); padding-bottom: var(--s3); border-bottom: 1px solid var(--color-border); } .viz-cert__title { font-size: 10px; font-weight: 700; color: var(--color-primary); } .viz-cert__ref { font-size: 8px; color: var(--color-text-muted); margin-top: 2px; } .viz-cert__line { display: flex; justify-content: space-between; font-size: 9px; padding: 3px 0; border-bottom: 1px dotted var(--color-border); color: var(--color-text-muted); } .viz-cert__line:last-of-type { border-bottom: none; } .viz-cert__line b { color: var(--color-text); font-weight: 600; } .viz-cert__stamp { margin-top: var(--s3); display: inline-flex; align-items: center; gap: var(--s2); background: rgba(40,202,66,.1); color: #1a8c2a; padding: 3px var(--s3); border-radius: var(--r-pill); font-size: 9px; font-weight: 600; border: 1px solid rgba(40,202,66,.25); } /* Viz 4 : Rappels */ .viz-notif { display: flex; align-items: flex-start; gap: var(--s3); padding: var(--s3); background: var(--color-bg-alt); border-radius: var(--r-sm); font-size: 10px; } .viz-notif__icon { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; background: rgba(233,86,59,.1); flex-shrink: 0; } .viz-notif__body { flex: 1; } .viz-notif__title { font-weight: 600; color: var(--color-text); margin-bottom: 2px; } .viz-notif__desc { color: var(--color-text-muted); line-height: 1.5; } .viz-notif__tag { margin-left: auto; flex-shrink: 0; background: rgba(233,86,59,.1); color: var(--color-primary); padding: 2px 7px; border-radius: var(--r-pill); font-size: 8px; font-weight: 600; } /* Viz 5 : Espace client */ .viz-portal { background: var(--color-white); border-radius: var(--r-sm); overflow: hidden; box-shadow: var(--sh-xs); border: 1px solid var(--color-border); } .viz-portal__bar { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%); padding: 6px var(--s3); font-size: 9px; font-weight: 600; color: rgba(255,255,255,.9); display: flex; align-items: center; gap: var(--s2); } .viz-portal__row { display: flex; justify-content: space-between; align-items: center; padding: 7px var(--s3); font-size: 9px; border-bottom: 1px solid var(--color-border); } .viz-portal__row:last-child { border-bottom: none; } .viz-portal__lbl { color: var(--color-text-muted); } .viz-portal__action { color: var(--color-primary); font-weight: 600; } /* === 12. CTA Final =============================================== */ .cta-final { padding: var(--s20) 0; background: var(--color-text); position: relative; overflow: hidden; } .cta-final::before { content: ''; position: absolute; border-radius: 50%; background: rgba(233,86,59,.07); } .cta-final::before { top: -100px; right: -100px; width: 400px; height: 400px; } .cta-final__inner { text-align: center; position: relative; z-index: 1; } .cta-final__title { color: var(--color-white); font-size: clamp(1.8rem, 3vw, 2.5rem); margin-bottom: var(--s4); } .cta-final__subtitle { color: rgba(255,255,255,.65); font-size: var(--fs-md); margin-bottom: var(--s8); } .cta-final__ctas { display: flex; gap: var(--s4); justify-content: center; flex-wrap: wrap; } .cta-final .btn-primary { background: var(--color-primary); color: var(--color-white); } .cta-final .btn-primary:hover { background: var(--color-primary-deep); } .cta-final .btn-secondary { color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.3); } .cta-final .btn-secondary:hover { background: rgba(255,255,255,.08); } /* === 13. Footer ================================================== */ .footer { background: var(--color-text); color: rgba(255,255,255,.7); padding: var(--s16) 0 var(--s8); position: relative; overflow: hidden; } .footer::before { content: ''; position: absolute; bottom: 28px; left: -80px; width: 300px; height: 300px; border-radius: 50%; background: rgba(233,86,59,.07); } .footer > .container { position: relative; z-index: 1; } .footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s8); margin-bottom: var(--s12); } .footer__logo { display: flex; align-items: center; gap: var(--s3); font-size: var(--fs-xl); font-weight: 700; color: var(--color-white); letter-spacing: -.02em; margin-bottom: var(--s4); } .footer__tagline { font-size: var(--fs-sm); line-height: 1.7; max-width: 280px; } .footer__col-title { font-size: var(--fs-sm); font-weight: 700; color: var(--color-white); margin-bottom: var(--s4); } .footer__col-desc { font-size: var(--fs-sm); color: rgba(255,255,255,.55); line-height: 1.5; margin-bottom: var(--s3); } .footer__links { display: flex; flex-direction: column; gap: var(--s3); } .footer__link { font-size: var(--fs-sm); color: rgba(255,255,255,.6); transition: color var(--t-fast); } .footer__link:hover { color: var(--color-primary); } .footer__bottom { display: flex; justify-content: space-between; align-items: center; padding-top: var(--s6); border-top: 1px solid rgba(255,255,255,.1); font-size: var(--fs-xs); flex-wrap: wrap; gap: var(--s4); } .footer__legal { display: flex; gap: var(--s4); } .footer__legal-link { color: rgba(255,255,255,.5); transition: color var(--t-fast); } .footer__legal-link:hover { color: var(--color-white); } /* === 14. Page hero (réutilisable) ================================ */ .page-hero { background: linear-gradient(135deg, var(--color-bg) 0%, var(--color-surface) 100%); padding: var(--s16) 0; text-align: center; } .page-hero__title { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: var(--s4); } .page-hero__title span { color: var(--color-primary); } .page-hero__subtitle { font-size: var(--fs-md); color: var(--color-text-muted); max-width: 600px; margin: 0 auto; } /* === 15. Pricing ================================================= */ .pricing__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s6); margin-top: var(--s12); align-items: start; } .pricing-card { background: var(--color-white); border-radius: var(--r-lg); padding: var(--s8); border: 2px solid var(--color-border); transition: transform var(--t-base), box-shadow var(--t-base); position: relative; } .pricing-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); } .pricing-card--feat { border-color: var(--color-primary); box-shadow: var(--sh-lg); transform: scale(1.02); } .pricing-card--feat:hover { transform: scale(1.02) translateY(-4px); } .pricing-card__badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%); color: var(--color-white); font-size: var(--fs-xs); font-weight: 700; padding: var(--s1) var(--s4); border-radius: var(--r-pill); white-space: nowrap; } .pricing-card__plan { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--color-primary); margin-bottom: var(--s2); } .pricing-card__name { font-size: var(--fs-2xl); margin-bottom: var(--s2); } .pricing-card__target { font-size: var(--fs-sm); color: var(--color-text-muted); margin-bottom: var(--s6); } .pricing-card__price { margin-bottom: var(--s6); padding-bottom: var(--s6); border-bottom: 1px solid var(--color-border); } .pricing-card__amount { font-size: var(--fs-4xl); font-weight: 700; line-height: 1; } .pricing-card__amount span { font-size: var(--fs-xl); color: var(--color-text-muted); font-weight: 400; } .pricing-card__mention { font-size: var(--fs-xs); color: var(--color-text-muted); margin-top: var(--s1); } .pricing-card__features { display: flex; flex-direction: column; gap: var(--s3); margin-bottom: var(--s8); } .pricing-card__feature { display: flex; align-items: flex-start; gap: var(--s3); font-size: var(--fs-sm); color: var(--color-text-muted); } .pricing-card__feature::before { content: '✓'; color: var(--color-primary); font-weight: 700; flex-shrink: 0; margin-top: 1px; } .pricing-card__feature--off { opacity: .4; } .pricing-card__feature--off::before { content: '×'; color: var(--color-text-muted); } .pricing-card .btn { width: 100%; justify-content: center; } /* Tableau comparatif */ .comparison { padding: var(--s16) 0; background: var(--color-bg-alt); } .comparison-table { width: 100%; border-collapse: collapse; background: var(--color-white); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-sm); } .comparison-table th { padding: var(--s4) var(--s6); font-size: var(--fs-sm); font-weight: 700; background: var(--color-text); color: var(--color-white); text-align: center; } .comparison-table th:first-child { text-align: left; } .comparison-table th.feat { background: var(--color-primary); } .comparison-table td { padding: var(--s4) var(--s6); font-size: var(--fs-sm); border-bottom: 1px solid var(--color-border); text-align: center; } .comparison-table td:first-child { text-align: left; font-weight: 500; } .comparison-table tr:last-child td { border-bottom: none; } .comparison-table tr:hover td { background: var(--color-bg-alt); } .comparison-table .ck { color: var(--color-primary); font-weight: 700; font-size: 1.1rem; } .comparison-table .cr { color: var(--color-text-light); font-size: 1.1rem; } .comparison-table .pt { color: var(--color-secondary); font-weight: 600; font-size: var(--fs-xs); } .comparison-table .cat { background: var(--color-surface) !important; font-weight: 700; color: var(--color-primary); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; } /* === 16. FAQ ===================================================== */ .faq { padding: var(--s16) 0; } .faq__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); margin-top: var(--s10); align-items: start; } .faq-item { background: var(--color-white); border-radius: var(--r-md); border: 1px solid var(--color-border); overflow: hidden; } .faq-item__q { display: flex; align-items: center; justify-content: space-between; padding: var(--s5) var(--s6); font-weight: 600; font-size: var(--fs-sm); cursor: pointer; transition: color var(--t-fast); gap: var(--s4); user-select: none; } .faq-item__q:hover { color: var(--color-primary); } .faq-item__chevron { font-size: 1.1rem; color: var(--color-primary); flex-shrink: 0; transition: transform var(--t-base); } .faq-item.open .faq-item__chevron { transform: rotate(180deg); } .faq-item__a { padding: 0 var(--s6); font-size: var(--fs-sm); color: var(--color-text-muted); line-height: 1.75; max-height: 0; overflow: hidden; transition: max-height var(--t-slow), padding var(--t-slow); } .faq-item.open .faq-item__a { max-height: 400px; padding-bottom: var(--s5); } /* === 17. Contact ================================================= */ .contact-grid { display: grid; grid-template-columns: 3fr 2fr; gap: var(--s16); align-items: start; } .contact-form { background: var(--color-white); border-radius: var(--r-lg); padding: var(--s8); box-shadow: var(--sh-md); border: 1px solid var(--color-border); } .form-group { margin-bottom: var(--s5); } .form-label { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--color-text); margin-bottom: var(--s2); } .form-input, .form-select, .form-textarea { width: 100%; padding: var(--s3) var(--s4); font-family: var(--font); font-size: var(--fs-sm); color: var(--color-text); background: var(--color-bg); border: 2px solid var(--color-border); border-radius: var(--r-md); transition: border-color var(--t-fast), box-shadow var(--t-fast); outline: none; } .form-select { padding-right: 2.75rem; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23E9563B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.875rem center; background-size: 16px; } .form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(233,86,59,.12); } .form-textarea { min-height: 140px; resize: vertical; } .frc-captcha { min-height: 60px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); } .form-submit { width: 100%; justify-content: center; margin-top: var(--s2); } .form-success { display: none; align-items: center; gap: var(--s3); background: rgba(40,202,66,.1); border: 1px solid rgba(40,202,66,.3); border-radius: var(--r-md); padding: var(--s4) var(--s5); margin-top: var(--s4); font-size: var(--fs-sm); color: #1a8c2a; font-weight: 500; } .form-success.visible { display: flex; } /* --- Hint au-dessus du formulaire --- */ .form-hint { font-size: var(--fs-sm); color: var(--color-text-muted); margin-bottom: var(--s4); } /* --- Erreurs inline sous chaque champ --- */ .form-error { display: block; margin-top: var(--s2); font-size: 0.8125rem; color: #c0392b; min-height: 1.1rem; line-height: 1.3; } .form-input.invalid, .form-select.invalid, .form-textarea.invalid { border-color: #c0392b; } .form-input.invalid:focus, .form-select.invalid:focus, .form-textarea.invalid:focus { box-shadow: 0 0 0 3px rgba(192,57,43,.15); } /* --- Checkbox d'acceptance --- */ .form-checkbox { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: var(--s3); margin: var(--s4) 0 var(--s5); font-size: var(--fs-sm); } .form-checkbox input[type="checkbox"] { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--color-primary); cursor: pointer; flex-shrink: 0; } .form-checkbox label { color: var(--color-text); line-height: 1.5; cursor: pointer; } .form-checkbox__hint { display: block; margin-top: var(--s1); font-size: 0.8125rem; color: var(--color-text-muted); } .form-checkbox__hint a { color: var(--color-primary); text-decoration: underline; } .form-checkbox .form-error { grid-column: 1 / -1; } /* --- Erreur globale après échec d'envoi --- */ .form-submit-error { display: none; margin-top: var(--s4); padding: var(--s4) var(--s5); background: rgba(192,57,43,.08); border: 1px solid rgba(192,57,43,.3); border-radius: var(--r-md); font-size: var(--fs-sm); color: #c0392b; line-height: 1.5; } .form-submit-error.visible { display: block; } /* --- Bouton submit désactivé --- */ .btn:disabled, .btn[disabled] { opacity: 0.5; cursor: not-allowed; pointer-events: none; } .contact-info__block { background: var(--color-white); border-radius: var(--r-lg); padding: var(--s6); box-shadow: var(--sh-sm); border: 1px solid var(--color-border); margin-bottom: var(--s4); } .contact-info__icon { margin-bottom: var(--s3); color: var(--color-primary); display: flex; } .contact-info__label { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--color-text-muted); margin-bottom: var(--s2); } .contact-info__value { font-size: var(--fs-md); font-weight: 600; color: var(--color-text); } .contact-info__value a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; transition: opacity var(--t-fast); } .contact-info__value a:hover { opacity: .8; } /* === 18. Espace Client =========================================== */ .ec-feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .ec-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .ec-stats > div { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .ec-stats > div > div:last-child { max-width: 22ch; margin: 0 auto; line-height: 1.45; text-wrap: balance; } .ec-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s6); margin-top: var(--s12); } .ec-card { background: var(--color-white); border-radius: var(--r-lg); padding: var(--s8); border: 1px solid var(--color-border); box-shadow: var(--sh-sm); transition: transform var(--t-base), box-shadow var(--t-base); } .ec-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); } .ec-card__icon { font-size: 2.5rem; margin-bottom: var(--s4); color: var(--color-primary); } .ec-card__title { font-size: var(--fs-xl); margin-bottom: var(--s3); } .ec-card__desc { font-size: var(--fs-sm); color: var(--color-text-muted); line-height: 1.75; } /* Mockup portail espace client */ .ec-portal-mock { background: var(--color-white); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-xl); border: 1px solid var(--color-border); max-width: 580px; margin: var(--s12) auto 0; } .ec-portal-mock__topbar { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%); padding: var(--s3) var(--s5); display: flex; align-items: center; justify-content: space-between; } .ec-portal-mock__brand { font-size: var(--fs-sm); font-weight: 700; color: var(--color-white); } .ec-portal-mock__user { font-size: var(--fs-xs); color: rgba(255,255,255,.8); } .ec-portal-mock__body { padding: var(--s5); background: var(--color-bg-alt); } .ec-portal-mock__row { display: flex; align-items: center; justify-content: space-between; background: var(--color-white); border-radius: var(--r-sm); padding: var(--s3) var(--s4); margin-bottom: var(--s3); font-size: var(--fs-sm); box-shadow: var(--sh-xs); } .ec-portal-mock__row:last-child { margin-bottom: 0; } .ec-portal-mock__row-left { display: flex; align-items: center; gap: var(--s3); } .ec-portal-mock__row-icon { font-size: 1.1rem; } .ec-portal-mock__row-name { font-weight: 600; color: var(--color-text); } .ec-portal-mock__row-date { font-size: var(--fs-xs); color: var(--color-text-muted); margin-top: 2px; } .ec-portal-mock__row-dl { font-size: var(--fs-xs); font-weight: 600; color: var(--color-primary); } /* === 19. Reveal (Intersection Observer) ========================== */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity .5s ease, transform .5s ease; } .reveal.visible { opacity: 1; transform: translateY(0); } .reveal-d1 { transition-delay: .1s; } .reveal-d2 { transition-delay: .2s; } .reveal-d3 { transition-delay: .3s; } /* === 20. Responsive ============================================== */ @media (max-width: 1024px) { :root { --container-pad: var(--s5); } .hero__inner { grid-template-columns: 1fr; gap: var(--s12); } .hero__visual { height: 440px; } .hero__visual-desktop { max-width: 520px; } .hero__visual-mobile { max-width: 180px; } .mockup-win { width: 360px; } .mockup-phone { width: 140px; } .briques__grid { grid-template-columns: 1fr 1fr; } .feature-block { grid-template-columns: 1fr; gap: var(--s8); } .feature-block--rev { direction: ltr; } .pricing__grid { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; } .pricing-card--feat { transform: none; } .pricing-card--feat:hover { transform: translateY(-4px); } .faq__grid { grid-template-columns: 1fr; } .footer__grid { grid-template-columns: 1fr 1fr; } .contact-grid { grid-template-columns: 1fr; } .ec-grid { grid-template-columns: 1fr; } .ec-feature-row { grid-template-columns: 1fr; gap: 2rem; } .ec-stats { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { :root { --container-pad: var(--s4); } .nav__links, .nav > .btn { display: none; } .burger { display: flex; } .hero { padding: var(--s12) 0; } .hero__visual { display: none; } .hero__ctas { flex-direction: column; } .hero__ctas .btn { width: 100%; justify-content: center; } .briques__grid { grid-template-columns: 1fr; } .footer__grid { grid-template-columns: 1fr; } .footer__bottom { flex-direction: column; text-align: center; } .comparison-table th, .comparison-table td { padding: var(--s3); font-size: var(--fs-xs); } .form-row { grid-template-columns: 1fr; } .section { padding: var(--s12) 0; } .cta-final { padding: var(--s12) 0; } h2 { font-size: var(--fs-2xl); } h1 { font-size: var(--fs-3xl); } }