/* ========================================================= Formation Assistante Virtuelle — Site one-page d'affiliation Système visuel : crème chaleureux + corail (esprit LiveMentor) rehaussé d'une touche féminine pastel (rose poudré, pêche). Léger, graphique, aéré. ========================================================= */ /* ---------- Fonts ---------- Chargées via dans le de index.html (chargement parallèle, non bloquant). */ /* ---------- Tokens ---------- */ :root { /* surfaces */ --cream: #FCF7F1; --cream-2: #F8EFE6; --cream-3: #F4E7DC; --white: #FFFFFF; /* ink */ --ink: #2C2433; --ink-2: #5E5468; --ink-3: #8A8195; /* brand — corail/orange (esprit LiveMentor) */ --coral: #FF6A4D; --coral-deep: #ED4F2E; --coral-ink: #B5371C; /* féminin pastel */ --blush: #FFE2E8; --blush-2: #FFD0DC; --rose: #F58BA9; --rose-deep: #E26088; --peach: #FFE0C2; --peach-2: #FFCE9E; --apricot: #FFB877; /* utility */ --line: #EADFD3; --line-soft: #F0E7DC; --shadow-sm: 0 2px 8px rgba(80, 50, 40, 0.06); --shadow-md: 0 10px 30px rgba(120, 70, 55, 0.10); --shadow-lg: 0 28px 60px rgba(120, 70, 55, 0.16); --shadow-coral: 0 14px 30px rgba(237, 79, 46, 0.28); --r-sm: 12px; --r-md: 18px; --r-lg: 28px; --r-xl: 40px; --r-pill: 999px; --maxw: 1180px; --gut: clamp(20px, 5vw, 64px); --font-display: 'Bricolage Grotesque', system-ui, sans-serif; --font-body: 'Mulish', system-ui, sans-serif; --font-serif: 'Instrument Serif', Georgia, serif; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; font-family: var(--font-body); color: var(--ink); background: var(--cream); line-height: 1.65; font-size: 17px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.06; letter-spacing: -0.02em; margin: 0; color: var(--ink); text-wrap: balance; } p { margin: 0; text-wrap: pretty; } ul { margin: 0; padding: 0; list-style: none; } /* ---------- Layout helpers ---------- */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); } .section { padding-block: clamp(64px, 9vw, 130px); position: relative; } .eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-body); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--coral-ink); } .eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--coral); } .eyebrow.center::after { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--coral); } .eyebrow.center { justify-content: center; } .lead { font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: var(--ink-2); } .serif-it { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: 0; } .center { text-align: center; } .muted { color: var(--ink-2); } .h-title { font-size: clamp(2rem, 4.4vw, 3.3rem); } .section-head { max-width: 760px; } .section-head.center { margin-inline: auto; text-align: center; } .section-head .eyebrow { margin-bottom: 18px; } .section-head p { margin-top: 20px; font-size: clamp(1.02rem, 1.5vw, 1.18rem); color: var(--ink-2); } /* squiggle underline accent */ .squiggle { position: relative; display: inline-block; } .squiggle::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.42em; height: 0.36em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='12' viewBox='0 0 120 12' fill='none'%3E%3Cpath d='M2 7C12 2 20 2 30 7s18 5 28 0 18-5 28 0 18 5 30 0' stroke='%23FF6A4D' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x center / auto 100%; opacity: 0.95; } .squiggle.rose::after { bottom: -0.28em; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='12' viewBox='0 0 120 12' fill='none'%3E%3Cpath d='M2 7C12 2 20 2 30 7s18 5 28 0 18-5 28 0 18 5 30 0' stroke='%23F58BA9' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E"); } /* sparkle */ .spark { color: var(--rose); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-body); font-weight: 700; font-size: 1rem; padding: 16px 28px; border-radius: var(--r-pill); border: 2px solid transparent; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease; white-space: nowrap; cursor: pointer; line-height: 1; } .btn svg { width: 18px; height: 18px; flex: none; } .btn-primary { background: var(--coral); color: #fff; box-shadow: var(--shadow-coral); } .btn-primary:hover { background: var(--coral-deep); transform: translateY(-2px); box-shadow: 0 18px 36px rgba(237,79,46,.34); } .btn-ghost { background: var(--white); color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-sm); } .btn-ghost:hover { border-color: var(--coral); color: var(--coral-deep); transform: translateY(-2px); } .btn-lg { padding: 20px 38px; font-size: 1.08rem; } .btn-block { width: 100%; } .text-link { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: var(--coral-deep); border-bottom: 2px solid var(--blush-2); padding-bottom: 2px; transition: border-color .2s, gap .2s; } .text-link:hover { border-color: var(--coral); gap: 11px; } .text-link svg { width: 16px; height: 16px; transition: transform .2s; } .text-link:hover svg { transform: translateX(3px); } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(252, 247, 241, 0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: border-color .25s, box-shadow .25s, background .25s; } .site-header.scrolled { border-color: var(--line); box-shadow: var(--shadow-sm); } .nav { display: flex; align-items: center; justify-content: space-between; height: 74px; gap: 24px; } .brand { display: inline-flex; align-items: center; gap: 11px; font-family: var(--font-display); font-weight: 800; font-size: 1.16rem; letter-spacing: -0.02em; color: var(--ink); } .brand-mark { width: 34px; height: 34px; border-radius: 11px; background: linear-gradient(135deg, var(--coral), var(--rose)); display: grid; place-items: center; box-shadow: var(--shadow-coral); flex: none; } .brand-mark svg { width: 19px; height: 19px; } .brand small { display: block; font-family: var(--font-body); font-weight: 600; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-top: 1px; } .nav-links { display: flex; align-items: center; gap: 30px; } .nav-links a { font-weight: 600; font-size: .95rem; color: var(--ink-2); transition: color .18s; position: relative; } .nav-links a:hover { color: var(--ink); } .nav-actions { display: flex; align-items: center; gap: 14px; } .nav-cta { padding: 11px 22px; font-size: .94rem; } .nav-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); align-items: center; justify-content: center; } .nav-toggle svg { width: 22px; height: 22px; } /* mobile drawer */ .mobile-menu { display: none; } /* ---------- Decorative blobs ---------- */ .blob { position: absolute; border-radius: 48% 52% 58% 42% / 52% 44% 56% 48%; filter: blur(2px); z-index: 0; pointer-events: none; opacity: .8; } /* ========================================================= HERO ========================================================= */ .hero { position: relative; padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(56px, 8vw, 100px); overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(60% 50% at 82% 8%, rgba(255,206,158,.55), transparent 70%), radial-gradient(55% 45% at 8% 18%, rgba(255,210,220,.55), transparent 70%), radial-gradient(70% 60% at 50% 110%, rgba(255,224,226,.5), transparent 70%); } .hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 5vw, 72px); align-items: center; } .hero-badge { display: inline-flex; align-items: center; gap: 10px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 8px 16px 8px 10px; font-weight: 700; font-size: .82rem; color: var(--ink-2); box-shadow: var(--shadow-sm); margin-bottom: 26px; } .hero-badge .dot { width: 9px; height: 9px; border-radius: 50%; background: #36c08a; box-shadow: 0 0 0 4px rgba(54,192,138,.18); } .hero h1 { font-size: clamp(2.4rem, 5.2vw, 4rem); font-weight: 800; } .hero h1 .serif-it { color: var(--coral-deep); font-weight: 400; } .hero-sub { margin-top: 26px; font-size: clamp(1.05rem, 1.5vw, 1.22rem); color: var(--ink-2); max-width: 36ch; } .hero-cta { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; } .hero-trust { margin-top: 34px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; } .hero-trust .stars { display: inline-flex; gap: 3px; color: var(--apricot); } .hero-trust .stars svg { width: 17px; height: 17px; } .hero-trust small { color: var(--ink-2); font-weight: 600; font-size: .86rem; } .hero-trust .sep { width: 1px; height: 26px; background: var(--line); } /* hero visual */ .hero-visual { position: relative; } .hero-photo { width: 100%; aspect-ratio: 4/5; border-radius: var(--r-xl); box-shadow: var(--shadow-lg); overflow: hidden; border: 6px solid var(--white); background: var(--cream-3); } .hero-photo::part(empty) { font-family: var(--font-body); } .hero-visual .frame-tilt { transform: rotate(2.2deg); } .float-card { position: absolute; background: var(--white); border-radius: var(--r-md); box-shadow: var(--shadow-md); padding: 14px 18px; display: flex; align-items: center; gap: 12px; border: 1px solid var(--line-soft); z-index: 3; } .float-card .fc-ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: none; } .float-card .fc-ico svg { width: 22px; height: 22px; } .float-card b { display: block; font-family: var(--font-display); font-size: 1.18rem; line-height: 1; } .float-card span { font-size: .8rem; color: var(--ink-2); font-weight: 600; } .fc-1 { top: 8%; left: -7%; } .fc-2 { bottom: 12%; right: -8%; } .fc-3 { bottom: -4%; left: 8%; } .bg-blush { background: var(--blush); color: var(--rose-deep); } .bg-peach { background: var(--peach); color: var(--coral-ink); } .bg-mint { background: #D8F2E4; color: #1f8a5b; } /* logos / financement strip */ .fin-strip { position: relative; z-index: 1; margin-top: clamp(44px, 6vw, 72px); padding-top: 30px; border-top: 1px dashed var(--line); } .fin-strip p { text-align: center; font-weight: 700; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 20px; } .fin-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 28px; } .fin-chip { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; font-family: var(--font-display); color: var(--ink-2); font-size: 1.02rem; opacity: .85; } .fin-chip svg { width: 20px; height: 20px; color: var(--coral); } /* ========================================================= INTRO / context band ========================================================= */ .intro { background: var(--white); } .intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 70px); align-items: center; } .intro-grid p + p { margin-top: 18px; } .intro-quote { background: var(--cream); border: 1px solid var(--line); border-left: 4px solid var(--coral); border-radius: var(--r-md); padding: 26px 28px; font-size: 1.08rem; color: var(--ink); } .intro-quote .text-link { margin-top: 12px; } /* ========================================================= Generic card grids ========================================================= */ .cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 54px; } .cards-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 54px; } .card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 32px; box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s, border-color .2s; } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line-soft); } .card .c-ico { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 20px; } .card .c-ico svg { width: 26px; height: 26px; } .card h3 { font-size: 1.3rem; margin-bottom: 10px; } .card p { color: var(--ink-2); font-size: .98rem; } .card.featured { border: 2px solid var(--coral); position: relative; } .card .tag-mini { position: absolute; top: -13px; left: 28px; background: var(--coral); color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 5px 13px; border-radius: var(--r-pill); } /* ========================================================= MISSIONS ========================================================= */ .missions { background: var(--white); } .miss-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 54px; } .miss-panel { border-radius: var(--r-lg); padding: 36px; border: 1px solid var(--line); } .miss-panel.admin { background: linear-gradient(160deg, var(--blush) 0%, #fff 75%); } .miss-panel.digital { background: linear-gradient(160deg, var(--peach) 0%, #fff 75%); } .miss-panel .mp-head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; } .miss-panel .mp-ico { width: 50px; height: 50px; border-radius: 14px; background: var(--white); display: grid; place-items: center; box-shadow: var(--shadow-sm); } .miss-panel .mp-ico svg { width: 25px; height: 25px; color: var(--coral-deep); } .miss-panel h3 { font-size: 1.4rem; } .miss-list li { position: relative; padding: 11px 0 11px 36px; border-bottom: 1px solid rgba(0,0,0,.05); font-weight: 500; } .miss-list li:last-child { border-bottom: 0; } .miss-list .chk { position: absolute; left: 0; top: 12px; width: 22px; height: 22px; border-radius: 50%; background: var(--white); display: grid; place-items: center; flex: none; box-shadow: var(--shadow-sm); } .miss-list .chk svg { width: 13px; height: 13px; color: var(--coral-deep); } .miss-list b { font-weight: 700; } /* tools */ .tools-box { margin-top: 26px; background: var(--cream); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px 32px; text-align: center; } .tools-box h4 { font-family: var(--font-display); font-size: 1.15rem; margin-bottom: 6px; } .tools-box p { color: var(--ink-2); font-size: .95rem; max-width: 60ch; margin-inline: auto; margin-bottom: 22px; } .tool-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 11px; } .tool-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 10px 18px; font-weight: 700; font-size: .92rem; box-shadow: var(--shadow-sm); } .tool-pill .pd { width: 10px; height: 10px; border-radius: 3px; } /* ========================================================= SALAIRE ========================================================= */ .salaire { background: var(--cream-2); } .pay-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 24px; margin-top: 54px; align-items: stretch; } .pay-card { border-radius: var(--r-lg); padding: 38px; display: flex; flex-direction: column; } .pay-card.salariat { background: var(--white); border: 1px solid var(--line); } .pay-card.freelance { background: linear-gradient(155deg, #2C2433 0%, #3d2f3f 100%); color: #fff; position: relative; overflow: hidden; box-shadow: var(--shadow-lg); } .pay-card.freelance::after { content: ""; position: absolute; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(255,106,77,.45), transparent 70%); top: -90px; right: -80px; } .pay-card .pc-label { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; } .pay-card.salariat .pc-label { color: var(--ink-3); } .pay-card.freelance .pc-label { color: var(--peach-2); position: relative; z-index: 1; } .pay-amount { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em; line-height: 1; margin: 22px 0 6px; position: relative; z-index: 1; } .pay-card.salariat .pay-amount { font-size: clamp(2.4rem, 4vw, 3.1rem); color: var(--ink); } .pay-card.freelance .pay-amount { font-size: clamp(2.8rem, 5vw, 3.8rem); } .pay-card.freelance .pay-amount em { font-family: var(--font-display); font-style: normal; font-weight: 800; color: var(--peach-2); } .pay-unit { display: inline-block; font-size: 1rem; font-weight: 600; opacity: .85; margin-left: 10px; white-space: nowrap; letter-spacing: normal; } .pay-card p { font-size: .98rem; margin-top: 14px; position: relative; z-index: 1; } .pay-card.salariat p { color: var(--ink-2); } .pay-card.freelance p { color: rgba(255,255,255,.82); } .pay-card .pay-foot { margin-top: auto; padding-top: 24px; position: relative; z-index: 1; } .pay-note { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; font-size: .9rem; } .pay-card.freelance .pay-note { color: rgba(255,255,255,.9); } .pay-note svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--apricot); } /* ========================================================= ÉTAPES ========================================================= */ .etapes { background: var(--white); } .steps { margin-top: 56px; display: grid; gap: 20px; } .step { display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center; background: var(--cream); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px 34px; transition: transform .2s, box-shadow .2s; } .step:hover { transform: translateX(6px); box-shadow: var(--shadow-md); } .step-num { font-family: var(--font-display); font-weight: 800; font-size: 2.2rem; width: 70px; height: 70px; border-radius: 20px; display: grid; place-items: center; flex: none; color: #fff; } .step:nth-child(1) .step-num { background: linear-gradient(135deg, var(--coral), var(--apricot)); } .step:nth-child(2) .step-num { background: linear-gradient(135deg, var(--rose), var(--blush-2)); color: var(--rose-deep); } .step:nth-child(3) .step-num { background: linear-gradient(135deg, var(--apricot), var(--peach-2)); color: var(--coral-ink); } .step:nth-child(4) .step-num { background: linear-gradient(135deg, var(--coral-deep), var(--rose)); } .step-body h3 { font-size: 1.32rem; margin-bottom: 7px; } .step-body p { color: var(--ink-2); font-size: .98rem; max-width: 62ch; } .step-tag { font-weight: 700; font-size: .82rem; color: var(--coral-deep); background: var(--blush); padding: 7px 15px; border-radius: var(--r-pill); white-space: nowrap; } /* ========================================================= SHOWCASE (bannière visuelle mi-page) ========================================================= */ .showcase { padding-block: clamp(20px, 5vw, 56px); background: var(--white); } .showcase-card { display: grid; grid-template-columns: 1.15fr 0.85fr; align-items: stretch; background: linear-gradient(160deg, var(--blush) 0%, var(--peach) 130%); border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-md); } .showcase-img { position: relative; min-height: 340px; } .showcase-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .showcase-copy { padding: clamp(32px, 4vw, 56px); display: flex; flex-direction: column; justify-content: center; } .showcase-copy h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); margin: 16px 0 16px; } .showcase-copy h2 .serif-it { color: var(--coral-deep); } .showcase-copy > p { color: var(--ink-2); font-size: 1.04rem; } .showcase-list { margin: 22px 0 26px; display: grid; gap: 12px; } .showcase-list li { display: flex; align-items: center; gap: 12px; font-weight: 600; } .showcase-list .sc-chk { width: 26px; height: 26px; border-radius: 50%; background: var(--white); display: grid; place-items: center; flex: none; box-shadow: var(--shadow-sm); } .showcase-list .sc-chk svg { width: 14px; height: 14px; color: var(--coral-deep); } /* ========================================================= FORMATION (critères + reco) ========================================================= */ .formation { background: var(--cream-2); } .form-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(28px, 4vw, 56px); margin-top: 54px; align-items: start; } .criteres { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 36px; box-shadow: var(--shadow-sm); } .criteres h3 { font-size: 1.4rem; margin-bottom: 22px; } .crit-list li { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px dashed var(--line); } .crit-list li:last-child { border-bottom: 0; padding-bottom: 0; } .crit-list .ci { width: 30px; height: 30px; border-radius: 9px; background: var(--blush); display: grid; place-items: center; flex: none; } .crit-list .ci svg { width: 16px; height: 16px; color: var(--rose-deep); } .crit-list b { font-weight: 700; } .crit-list span { font-size: .96rem; color: var(--ink-2); } .reco { background: linear-gradient(165deg, #fff 0%, var(--blush) 130%); border: 2px solid var(--coral); border-radius: var(--r-lg); padding: 38px; box-shadow: var(--shadow-md); position: relative; } .reco .reco-pin { position: absolute; top: -14px; left: 36px; background: var(--coral); color: #fff; font-weight: 800; font-size: .74rem; letter-spacing: .07em; text-transform: uppercase; padding: 6px 15px; border-radius: var(--r-pill); box-shadow: var(--shadow-coral); white-space: nowrap; } .reco .reco-stars { margin-top: 10px; } .reco h3 { font-size: 1.55rem; margin-bottom: 14px; margin-top: 6px; } .reco p { color: var(--ink-2); margin-bottom: 14px; } .reco p strong { color: var(--ink); } .reco .reco-stars { display: inline-flex; gap: 4px; color: var(--apricot); margin-bottom: 18px; } .reco .reco-stars svg { width: 19px; height: 19px; } .reco .btn { margin-top: 12px; } .fin-callout { margin-top: 22px; background: rgba(255,255,255,.7); border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px 20px; display: flex; gap: 13px; align-items: flex-start; } .fin-callout svg { width: 22px; height: 22px; color: var(--coral-deep); flex: none; margin-top: 2px; } .fin-callout p { font-size: .9rem; margin: 0; } /* ========================================================= OFFRE / PRIX ========================================================= */ .offre { background: var(--ink); color: #fff; position: relative; overflow: hidden; } .offre::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 60% at 85% 10%, rgba(255,106,77,.3), transparent 60%), radial-gradient(55% 55% at 10% 90%, rgba(245,139,169,.28), transparent 60%); } .offre .section-head h2, .offre .section-head { position: relative; z-index: 1; } .offre .section-head h2 { color: #fff; } .offre .eyebrow { color: var(--peach-2); } .offre .eyebrow::before, .offre .eyebrow.center::after { background: var(--peach-2); } .offre .section-head p { color: rgba(255,255,255,.75); } .price-card { position: relative; z-index: 1; margin-top: 56px; background: var(--white); color: var(--ink); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); overflow: hidden; display: grid; grid-template-columns: 1fr 1.25fr; } .price-left { padding: 48px 44px; background: linear-gradient(165deg, var(--cream) 0%, var(--blush) 140%); border-right: 1px solid var(--line); display: flex; flex-direction: column; } .price-tag-row { display: flex; align-items: baseline; gap: 10px; } .price-big { font-family: var(--font-display); font-weight: 800; font-size: clamp(3rem, 6vw, 4.2rem); letter-spacing: -0.03em; line-height: 1; } .price-cur { font-size: 1.6rem; font-weight: 700; margin-left: 4px; } .price-big { white-space: nowrap; } .price-sub { margin-top: 14px; font-weight: 700; color: var(--coral-deep); display: inline-flex; align-items: center; gap: 8px; } .price-sub svg { width: 18px; height: 18px; } .price-desc { margin-top: 16px; color: var(--ink-2); font-size: .98rem; } .price-mentor { margin-top: auto; padding-top: 28px; display: flex; align-items: center; gap: 14px; } .price-mentor .pm-av { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, var(--rose), var(--peach-2)); display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; color: #fff; flex: none; box-shadow: var(--shadow-sm); } .price-mentor div { font-size: .9rem; } .price-mentor b { display: block; font-family: var(--font-display); } .price-mentor span { color: var(--ink-2); } .price-right { padding: 48px 44px; display: flex; flex-direction: column; } .price-right h3 { font-size: 1.3rem; margin-bottom: 22px; } .incl-list li { display: flex; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line-soft); } .incl-list li:last-child { border-bottom: 0; } .incl-list .ic { width: 26px; height: 26px; border-radius: 8px; background: var(--coral); display: grid; place-items: center; flex: none; margin-top: 1px; } .incl-list .ic svg { width: 15px; height: 15px; color: #fff; } .incl-list b { font-weight: 700; } .incl-list p { font-size: .95rem; color: var(--ink-2); margin-top: 2px; } .price-cta { margin-top: 26px; } .price-cta .btn { width: 100%; } .price-reassure { margin-top: 14px; text-align: center; font-size: .84rem; color: var(--ink-3); display: flex; align-items: center; justify-content: center; gap: 8px; } .price-reassure svg { width: 15px; height: 15px; color: #36c08a; } /* ========================================================= AVIS ========================================================= */ .avis { background: var(--white); } .avis-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 54px; } .avis-card { background: var(--cream); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px; display: flex; flex-direction: column; } .avis-card.tall { grid-row: span 1; } .avis-stars { display: inline-flex; gap: 3px; color: var(--apricot); margin-bottom: 16px; } .avis-stars svg { width: 17px; height: 17px; } .avis-card blockquote { margin: 0; font-size: 1.02rem; color: var(--ink); line-height: 1.6; } .avis-card blockquote .hl { background: linear-gradient(transparent 60%, var(--blush) 60%); font-weight: 600; } .avis-person { margin-top: 24px; display: flex; align-items: center; gap: 13px; } .avis-av { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; color: #fff; flex: none; } .avis-person b { display: block; font-size: .96rem; } .avis-person span { font-size: .82rem; color: var(--ink-2); } .proscons { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .pc-box { border-radius: var(--r-lg); padding: 30px 32px; border: 1px solid var(--line); } .pc-box.pros { background: linear-gradient(160deg, #E8F7EE, #fff 80%); } .pc-box.cons { background: linear-gradient(160deg, var(--peach), #fff 80%); } .pc-box h4 { display: flex; align-items: center; gap: 11px; font-size: 1.12rem; margin-bottom: 16px; } .pc-box h4 .pc-ico { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; } .pc-box h4 svg { width: 18px; height: 18px; } .pc-box .pros-ico { background: #C9EED9; color: #1f8a5b; } .pc-box .cons-ico { background: var(--peach-2); color: var(--coral-ink); } .pc-box li { display: flex; gap: 11px; padding: 8px 0; font-size: .96rem; color: var(--ink-2); } .pc-box li svg { width: 17px; height: 17px; flex: none; margin-top: 3px; } .pc-box.pros li svg { color: #1f8a5b; } .pc-box.cons li svg { color: var(--coral-deep); } /* ========================================================= FAQ ========================================================= */ .faq { background: var(--cream-2); } .faq-list { margin-top: 50px; max-width: 820px; margin-inline: auto; display: grid; gap: 14px; } .faq-item { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; transition: box-shadow .2s, border-color .2s; } .faq-item.open { box-shadow: var(--shadow-md); border-color: var(--blush-2); } .faq-q { width: 100%; text-align: left; background: none; border: 0; padding: 24px 26px; display: flex; align-items: center; justify-content: space-between; gap: 18px; font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; color: var(--ink); } .faq-ico { width: 32px; height: 32px; border-radius: 50%; background: var(--blush); display: grid; place-items: center; flex: none; transition: transform .25s, background .25s; } .faq-ico svg { width: 17px; height: 17px; color: var(--rose-deep); transition: transform .25s; } .faq-item.open .faq-ico { background: var(--coral); } .faq-item.open .faq-ico svg { color: #fff; transform: rotate(45deg); } .faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; } .faq-a-inner { padding: 0 26px 26px; color: var(--ink-2); font-size: 1rem; } .faq-a-inner strong { color: var(--ink); } /* ========================================================= CTA final ========================================================= */ .final { position: relative; overflow: hidden; padding-block: clamp(72px, 10vw, 140px); background: linear-gradient(160deg, var(--coral) 0%, var(--rose) 100%); color: #fff; } .final::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 60% at 80% 0%, rgba(255,224,194,.55), transparent 60%), radial-gradient(50% 60% at 10% 100%, rgba(255,255,255,.22), transparent 60%); } .final-inner { position: relative; z-index: 1; text-align: center; max-width: 760px; margin-inline: auto; } .final .eyebrow { color: #fff; } .final .eyebrow::before, .final .eyebrow.center::after { background: rgba(255,255,255,.7); } .final h2 { color: #fff; font-size: clamp(2.2rem, 5vw, 3.5rem); font-weight: 800; } .final h2 .serif-it { color: #fff; } .final p { color: rgba(255,255,255,.92); font-size: clamp(1.05rem, 1.6vw, 1.25rem); margin-top: 22px; } .final .btn-primary { background: #fff; color: var(--coral-deep); box-shadow: 0 16px 36px rgba(120,40,20,.3); margin-top: 38px; } .final .btn-primary:hover { background: var(--cream); color: var(--coral-deep); } .final-mini { margin-top: 20px; font-size: .9rem; color: rgba(255,255,255,.85); display: inline-flex; align-items: center; gap: 8px; } .final-mini svg { width: 16px; height: 16px; } /* ========================================================= FOOTER ========================================================= */ .site-footer { background: var(--ink); color: rgba(255,255,255,.7); padding-block: 56px 36px; font-size: .92rem; } .foot-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-bottom: 36px; border-bottom: 1px solid rgba(255,255,255,.1); } .foot-brand .brand { color: #fff; margin-bottom: 16px; } .foot-brand p { max-width: 42ch; color: rgba(255,255,255,.6); } .foot-col h5 { font-family: var(--font-display); color: #fff; font-size: .95rem; margin-bottom: 16px; text-transform: uppercase; letter-spacing: .08em; } .foot-col a { display: block; padding: 6px 0; color: rgba(255,255,255,.66); transition: color .18s; } .foot-col a:hover { color: #fff; } .foot-disclosure { margin-top: 28px; padding: 18px 22px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-md); font-size: .82rem; color: rgba(255,255,255,.6); display: flex; gap: 12px; } .foot-disclosure svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--peach-2); } .foot-legal { margin-top: 26px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; font-size: .82rem; color: rgba(255,255,255,.5); } .foot-legal a { color: rgba(255,255,255,.55); } /* ========================================================= Scroll reveal ========================================================= */ .js-reveal .reveal { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s ease; } .js-reveal .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js-reveal .reveal { opacity: 1; transform: none; transition: none; } } @media print { .js-reveal .reveal { opacity: 1 !important; transform: none !important; } } /* ========================================================= Responsive ========================================================= */ @media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; gap: 48px; } .hero-visual { max-width: 460px; margin-inline: auto; } .hero-sub { max-width: none; } .intro-grid { grid-template-columns: 1fr; } .pay-grid, .form-grid { grid-template-columns: 1fr; } .showcase-card { grid-template-columns: 1fr; } .showcase-img { min-height: 280px; aspect-ratio: 16/9; } .price-card { grid-template-columns: 1fr; } .price-left { border-right: 0; border-bottom: 1px solid var(--line); } .cards-3, .avis-grid { grid-template-columns: 1fr 1fr; } .nav-links { display: none; } .nav-toggle { display: inline-flex; } .nav-cta { display: none; } } @media (max-width: 680px) { body { font-size: 16px; } .cards-3, .cards-2, .miss-grid, .avis-grid, .proscons, .foot-top { grid-template-columns: 1fr; } .step { grid-template-columns: auto 1fr; gap: 18px 20px; padding: 24px; } .step-tag { grid-column: 2; justify-self: start; } .float-card { padding: 11px 14px; } .fc-1 { left: -2%; } .fc-2 { right: -2%; } .fc-3 { left: 2%; } .price-left, .price-right { padding: 34px 26px; } .reco, .criteres, .card, .miss-panel { padding: 28px 24px; } .foot-legal { flex-direction: column; align-items: flex-start; } } /* mobile menu open */ body.menu-open { overflow: hidden; } .mobile-menu.show { display: flex; } .mobile-menu { position: fixed; inset: 74px 0 0; z-index: 99; background: var(--cream); flex-direction: column; padding: 28px var(--gut); gap: 6px; animation: slideDown .25s ease; } @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } } .mobile-menu a { padding: 16px 4px; font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; border-bottom: 1px solid var(--line); color: var(--ink); } .mobile-menu .btn { margin-top: 24px; } /* ========================================================= Animations légères (CSS pur — transform/opacity uniquement, aucun impact sur le temps de chargement). Tout est conditionné à prefers-reduced-motion: no-preference. ========================================================= */ @keyframes pageFadeIn { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: no-preference) { /* Fade-in global au chargement de la page */ body { animation: pageFadeIn .7s ease both; } /* HERO — le cadre se redresse, l'image zoome doucement dans le cadre */ .hero-visual .frame-tilt { transition: transform .55s cubic-bezier(.16, 1, .3, 1); will-change: transform; } .hero-photo img { transition: transform .6s cubic-bezier(.16, 1, .3, 1); } .hero-visual:hover .frame-tilt { transform: rotate(0deg); } .hero-visual:hover .hero-photo img { transform: scale(1.06); } /* MISSIONS — élévation (translation verticale + ombre) */ .miss-panel { transition: transform .3s ease, box-shadow .3s ease; } .miss-panel:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); } /* SALAIRE — léger zoom (mise à l'échelle) */ .pay-card { transition: transform .3s ease, box-shadow .3s ease; } .pay-card.salariat:hover { transform: scale(1.02); box-shadow: var(--shadow-md); border-color: var(--blush-2); } .pay-card.freelance:hover { transform: scale(1.02); box-shadow: 0 34px 66px rgba(20, 12, 18, .42); } }