/* ═══════════════════════════════════════════════════════════════════════ PARCOURS — feuille mutualisée des 4 pages cible (entrepreneurs · experts-comptables · avocats · notaires) La couleur d'accent est pilotée par une classe persona sur : (ou is-experts-comptables / is-avocats / is-notaires) --persona : teinte pleine (hex, via le token global --p-*) --persona-soft : même teinte ~14% (token global --p-*-soft) --persona-rgb : triplet R G B pour les rgba() à alpha variable ═══════════════════════════════════════════════════════════════════════ */ body.parcours-page.is-entrepreneurs { --persona: var(--p-entrepreneur); --persona-soft: var(--p-entrepreneur-soft); --persona-rgb: 37 99 235; } body.parcours-page.is-experts-comptables { --persona: var(--p-ec); --persona-soft: var(--p-ec-soft); --persona-rgb: 14 165 233; } body.parcours-page.is-avocats { --persona: var(--p-avocat); --persona-soft: var(--p-avocat-soft); --persona-rgb: 79 70 229; } body.parcours-page.is-notaires { --persona: var(--p-notaire); --persona-soft: var(--p-notaire-soft); --persona-rgb: 30 64 175; } /* ═══════════════════ Styles partagés des pages « parcours » ═══════════════════ */ /* Accent persona (bleu, var --persona) sur les eyebrows partagés */ body.parcours-page .section-eyebrow { color: var(--persona); } body.parcours-page .section-eyebrow::before { background: linear-gradient(90deg, var(--persona), transparent); } body.parcours-page .nav-link.active { color: var(--text-strong); } body.parcours-page .nav-link.active::after { background: var(--persona); box-shadow: 0 0 8px var(--persona-soft); } /* Sections alternées : fonds très légèrement contrastés pour donner du rythme */ .sec-dark { background: var(--navy-deep); } .sec-soft { background: linear-gradient(180deg, var(--navy-deep), var(--bg-deep) 50%, var(--navy-deep)); } .sec-raised { background: radial-gradient(800px 500px at 50% 0%, rgba(var(--persona-rgb) / 0.04), transparent 65%), var(--navy-deep); } /* ═══════════════════ HERO ═══════════════════ */ .parcours-hero { padding: 138px 0 4.5rem; position: relative; overflow: hidden; isolation: isolate; background: var(--navy-deep); } .parcours-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(900px 600px at 15% 20%, rgba(var(--persona-rgb) / 0.10), transparent 60%), radial-gradient(700px 500px at 85% 80%, rgba(0, 184, 255, 0.04), transparent 65%); } .parcours-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(circle, rgba(15, 23, 42, 0.05) 1px, transparent 1px); background-size: 28px 28px; mask-image: radial-gradient(ellipse 70% 60% at 60% 40%, #000 10%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 70% 60% at 60% 40%, #000 10%, transparent 75%); opacity: 0.6; pointer-events: none; } .hero-s-inner { max-width: 1180px; margin: 0 auto; padding: 3rem 2rem 1rem; position: relative; } .hero-s-eyebrow { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--persona); display: inline-flex; align-items: center; gap: 12px; } .hero-s-eyebrow::before { content: ''; width: 32px; height: 2px; background: linear-gradient(90deg, var(--persona), transparent); display: inline-block; } .hero-s-h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.028em; color: var(--text-strong); max-width: 960px; margin-top: 1.1rem; } .hero-s-h1 .accent { color: var(--persona); position: relative; } .hero-s-h1 .accent::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0.08em; height: 0.32em; background: rgba(var(--persona-rgb) / 0.18); z-index: -1; border-radius: 2px; } .hero-s-sub { font-size: 1.08rem; color: var(--ink-dim); line-height: 1.7; max-width: 720px; margin-top: 1.35rem; } .hero-s-ctas { display: flex; gap: 1rem; margin-top: 2rem; flex-wrap: wrap; } .hero-s-reassure { margin-top: 1.4rem; font-size: 0.82rem; color: var(--muted); display: inline-flex; align-items: center; gap: 10px; } .hero-s-reassure svg { stroke: var(--persona); flex-shrink: 0; } /* ═══════════════════ VOTRE SITUATION — pain points en citations ═══════════════════ */ .pain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 2.75rem; } @media (max-width: 900px) { .pain-grid { grid-template-columns: 1fr; gap: 1rem; } } .pain-card { position: relative; padding: 2.25rem 1.75rem 1.5rem; background: var(--card-bg); border: 1px solid var(--border); border-left: 3px solid var(--persona); border-radius: 14px; display: flex; flex-direction: column; overflow: hidden; } .pain-card::before { content: '“'; position: absolute; top: -12px; left: 18px; font-family: Georgia, 'Times New Roman', serif; font-size: 5.5rem; line-height: 1; color: var(--persona); opacity: 0.35; font-weight: 700; pointer-events: none; } .pain-quote { font-size: 1rem; line-height: 1.55; color: var(--ink); font-style: italic; font-weight: 400; margin-bottom: 1.4rem; position: relative; z-index: 1; } .pain-label { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--persona); margin-top: auto; display: inline-flex; align-items: center; gap: 8px; } .pain-label::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--persona); } /* ═══════════════════ NOS APPORTS ═══════════════════ */ .apports-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; margin-top: 2.75rem; } @media (max-width: 820px) { .apports-grid { grid-template-columns: 1fr; } } .apport-card { padding: 2rem; background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } .apport-card:hover { transform: translateY(-3px); border-color: rgba(var(--persona-rgb) / 0.32); box-shadow: 0 18px 40px -18px rgba(var(--persona-rgb) / 0.25); } .apport-icon { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--persona-soft); color: var(--persona); margin-bottom: 1.1rem; } .apport-title { font-size: 1.08rem; font-weight: 700; color: var(--text-strong); margin-bottom: 0.55rem; letter-spacing: -0.01em; } .apport-body { font-size: 0.94rem; color: var(--ink-dim); line-height: 1.7; } /* ═══════════════════ PROCESS — timeline 5 étapes ═══════════════════ */ .process-timeline { margin-top: 3rem; position: relative; max-width: 820px; margin-left: auto; margin-right: auto; } .process-step { display: grid; grid-template-columns: 72px 1fr; gap: 1.5rem; padding: 1rem 0 1.5rem; position: relative; } .process-step:not(:last-child)::after { content: ''; position: absolute; left: 35px; top: 76px; bottom: -6px; width: 2px; background: linear-gradient(180deg, rgba(var(--persona-rgb) / 0.45), rgba(var(--persona-rgb) / 0.12)); z-index: 0; } .process-num { width: 72px; height: 72px; border-radius: 50%; background: rgba(var(--persona-rgb) / 0.08); border: 2px solid var(--persona); color: var(--persona); font-size: 1.4rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; position: relative; z-index: 2; letter-spacing: 0; } .process-content { padding-top: 14px; } .process-title { font-size: 1.08rem; font-weight: 700; color: var(--text-strong); margin-bottom: 0.4rem; letter-spacing: -0.01em; } .process-body { font-size: 0.95rem; color: var(--ink-dim); line-height: 1.7; } .process-badge { display: inline-flex; align-items: center; gap: 6px; margin-top: 0.7rem; padding: 4px 12px; border-radius: 999px; background: rgba(var(--persona-rgb) / 0.12); color: var(--persona); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid rgba(var(--persona-rgb) / 0.2); } .process-badge svg { stroke: var(--persona); } /* ═══════════════════ CAS D'ÉCOLE ═══════════════════ */ .case-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--border-strong); border-radius: 18px; overflow: hidden; background: var(--card-bg); margin-top: 2.75rem; position: relative; } @media (max-width: 900px) { .case-panel { grid-template-columns: 1fr; } } .case-anon-badge { position: absolute; top: 20px; right: 20px; padding: 5px 11px; border-radius: 999px; background: var(--surface-strong); color: var(--ink-dim); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; border: 1px solid var(--border); z-index: 3; backdrop-filter: blur(8px); } .case-left { padding: 2.5rem; border-right: 1px solid var(--border); } @media (max-width: 900px) { .case-left { border-right: none; border-bottom: 1px solid var(--border); } } .case-kicker { font-size: 0.72rem; letter-spacing: 0.14em; font-weight: 700; text-transform: uppercase; color: var(--persona); margin-bottom: 0.6rem; } .case-title { font-size: 1.35rem; font-weight: 700; color: var(--text-strong); letter-spacing: -0.015em; line-height: 1.3; } .case-profile { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 1.6rem; } .case-row { display: flex; flex-direction: column; padding: 0.85rem 1rem; background: var(--surface-low); border: 1px solid var(--border); border-radius: 10px; } .case-row-label { font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; font-weight: 600; } .case-row-value { font-size: 1rem; font-weight: 700; color: var(--text-strong); } .case-block-title { font-size: 0.72rem; letter-spacing: 0.14em; font-weight: 700; text-transform: uppercase; color: var(--persona); margin-top: 1.75rem; margin-bottom: 0.6rem; } .case-block-body { font-size: 0.93rem; color: var(--ink-dim); line-height: 1.7; } .case-right { padding: 2.5rem; display: flex; flex-direction: column; justify-content: center; } .case-result-label { font-size: 0.72rem; letter-spacing: 0.14em; font-weight: 700; text-transform: uppercase; color: var(--persona); margin-bottom: 1rem; } .case-result-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.9rem; margin-bottom: 1.75rem; } .case-result-list li { position: relative; padding-left: 2rem; font-size: 0.96rem; color: var(--ink); line-height: 1.55; } .case-result-list li::before { content: ''; position: absolute; left: 0; top: 0.35em; width: 18px; height: 18px; border-radius: 50%; background: var(--persona-soft); border: 1.5px solid var(--persona); } .case-result-list li::after { content: ''; position: absolute; left: 5px; top: 0.65em; width: 7px; height: 4px; border-left: 2px solid var(--persona); border-bottom: 2px solid var(--persona); transform: rotate(-45deg); } .case-verbatim { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); font-size: 0.95rem; font-style: italic; color: var(--ink); line-height: 1.65; position: relative; } .case-author { margin-top: 0.85rem; font-size: 0.8rem; color: var(--muted); letter-spacing: 0.04em; } /* Témoignage Google (Denis Brillault) */ .testi-external { max-width: 820px; margin: 3rem auto 0; padding: 2rem 2.25rem; background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; position: relative; } .testi-stars { color: var(--persona); letter-spacing: 0.15em; font-size: 0.95rem; margin-bottom: 0.6rem; } .testi-quote { font-size: 1rem; color: var(--ink); line-height: 1.65; font-style: italic; } .testi-meta { margin-top: 1rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; font-size: 0.82rem; color: var(--muted); } .testi-source { display: inline-flex; align-items: center; gap: 6px; } .testi-source strong { color: var(--ink-dim); font-weight: 600; } a.testi-source { text-decoration: none; transition: color 0.2s ease; } a.testi-source:hover { color: var(--persona); } /* ═══════════════════ PARTENAIRES ═══════════════════ */ .partners-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 2.75rem; } @media (max-width: 900px) { .partners-grid { grid-template-columns: 1fr; } } .partner-card { padding: 1.85rem; background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; transition: border-color 0.25s; } .partner-card:hover { border-color: rgba(var(--persona-rgb) / 0.25); } .partner-icon { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--surface-low); color: var(--persona); margin-bottom: 1rem; border: 1px solid var(--border); } .partner-kicker { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--persona); margin-bottom: 0.35rem; } .partner-title { font-size: 1.05rem; font-weight: 700; color: var(--text-strong); margin-bottom: 0.55rem; letter-spacing: -0.01em; } .partner-body { font-size: 0.92rem; color: var(--ink-dim); line-height: 1.65; } /* ═══════════════════ FAQ ═══════════════════ */ .faq-list { max-width: 820px; margin: 2.75rem auto 0; display: flex; flex-direction: column; gap: 0.75rem; } .faq-item { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; transition: border-color 0.2s, background 0.2s; } .faq-item[open] { border-color: rgba(var(--persona-rgb) / 0.3); background: var(--card-bg); } .faq-item summary { cursor: pointer; padding: 1.15rem 3rem 1.15rem 1.35rem; font-size: 1rem; font-weight: 600; color: var(--text-strong); list-style: none; position: relative; transition: color 0.2s; line-height: 1.4; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: ''; position: absolute; right: 1.3rem; top: 50%; width: 14px; height: 14px; transform: translateY(-50%); background-image: linear-gradient(var(--persona), var(--persona)), linear-gradient(var(--persona), var(--persona)); background-size: 14px 2px, 2px 14px; background-position: center, center; background-repeat: no-repeat; transition: transform 0.3s ease; } .faq-item[open] summary::after { background-size: 14px 2px, 0 0; transform: translateY(-50%) rotate(90deg); } .faq-item summary:hover { color: var(--persona); } .faq-body { padding: 0 1.35rem 1.3rem; font-size: 0.94rem; color: var(--ink-dim); line-height: 1.75; } .faq-body p + p { margin-top: 0.8rem; } /* ═══════════════════ CTA FINAL ═══════════════════ */ .cta-final { background: radial-gradient(800px 500px at 30% 50%, rgba(var(--persona-rgb) / 0.14), transparent 60%), radial-gradient(600px 400px at 80% 40%, rgba(0,184,255,0.06), transparent 65%), linear-gradient(135deg, var(--navy), var(--navy-deep)); border-top: 1px solid rgba(var(--persona-rgb) / 0.2); padding: 5rem 0; position: relative; overflow: hidden; } .cta-final::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(15, 23, 42, 0.05) 1px, transparent 1px); background-size: 32px 32px; mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000 20%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000 20%, transparent 80%); opacity: 0.5; pointer-events: none; } .cta-inner { max-width: 820px; margin: 0 auto; padding: 0 2rem; text-align: center; position: relative; } .cta-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--persona); margin-bottom: 1rem; } .cta-eyebrow::before { content: ''; width: 24px; height: 2px; background: linear-gradient(90deg, var(--persona), transparent); } .cta-title { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 800; color: var(--text-strong); letter-spacing: -0.025em; line-height: 1.15; } .cta-title .accent { color: var(--persona); } .cta-sub { font-size: 1.02rem; color: var(--ink-dim); margin-top: 1.15rem; line-height: 1.65; max-width: 620px; margin-left: auto; margin-right: auto; } .cta-btn-wrap { margin-top: 2rem; display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } .cta-engagement { margin-top: 1.25rem; font-size: 0.84rem; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; } .cta-engagement svg { stroke: var(--persona); flex-shrink: 0; } /* ═══════════════════ RESPONSIVE FINETUNING ═══════════════════ */ @media (max-width: 760px) { .parcours-hero { padding: 128px 0 3rem; } .hero-s-inner { padding: 2rem 1.25rem 0.5rem; } .hero-s-ctas .btn-primary, .hero-s-ctas .btn-outline { width: 100%; justify-content: center; } .case-left, .case-right { padding: 1.75rem 1.5rem; } .case-profile { grid-template-columns: 1fr; } .process-step { grid-template-columns: 56px 1fr; gap: 1rem; } .process-num { width: 56px; height: 56px; font-size: 1.1rem; } .process-step:not(:last-child)::after { left: 27px; top: 60px; } .apport-card, .diff-pillar, .partner-card { padding: 1.5rem; } .cta-btn-wrap .btn-primary, .cta-btn-wrap .btn-outline { width: 100%; justify-content: center; } } /* ═══════════════════ GROUPE NOVANCES — bandeau réassurance ═══════════════════ */ .novances-band { background: radial-gradient(900px 520px at 50% 0%, rgba(var(--persona-rgb) / 0.06), transparent 65%), var(--bg-elevated); } .novances-band .section-title .accent { color: var(--persona); } .novances-band .section-sub + .section-sub { margin-top: 0.9rem; } .novances-band-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 2.5rem 3rem; align-items: center; } .novances-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } .novances-stats .novances-stat:last-child { grid-column: 1 / -1; } .novances-stat { position: relative; overflow: hidden; padding: 1.6rem 1.25rem; text-align: center; background: var(--card-bg); border: 1px solid var(--line-2); border-radius: 14px; box-shadow: 0 24px 48px -34px var(--persona-soft); } .novances-stat::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--persona), transparent); } .novances-stat-num { display: block; font-size: clamp(1.7rem, 3vw, 2.25rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1; color: var(--persona); } .novances-stat-label { display: block; margin-top: 0.6rem; font-size: 0.9rem; line-height: 1.3; color: var(--text-2); } .novances-band-foot { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-top: 2.5rem; } .novances-band-foot .novances-band-logo { height: 38px; width: auto; } .novances-band-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.95rem; color: var(--persona); text-decoration: none; transition: gap 0.25s ease, color 0.25s ease; } .novances-band-link:hover { gap: 12px; } .novances-band-link svg { transition: transform 0.25s ease; } .novances-band-link:hover svg { transform: translateX(2px); } @media (max-width: 900px) { .novances-band-grid { grid-template-columns: 1fr; gap: 2rem; } .novances-stats { grid-template-columns: repeat(3, 1fr); } .novances-stats .novances-stat:last-child { grid-column: auto; } } @media (max-width: 560px) { .novances-stats { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } .novances-stats .novances-stat:last-child { grid-column: 1 / -1; } .novances-stat { padding: 1.3rem 0.9rem; } } /* ═══════════════════ MÉTHODE · cheminement par les outils ═══════════════════ */ .methodo-flow { background: var(--bg-elevated); } .ch-flow { display:grid; grid-template-columns:repeat(5,1fr); gap:1rem; margin-top:3rem; position:relative; align-items:start; } .ch-flow::before { content:''; position:absolute; top:36px; left:9%; right:9%; height:3px; border-radius:3px; background:linear-gradient(90deg, rgba(var(--persona-rgb)/.2), var(--persona) 50%, rgba(var(--persona-rgb)/.2)); } .ch-flow::after { content:''; position:absolute; top:36px; left:9%; width:16%; height:3px; border-radius:3px; background:linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent); animation:ch-sheen 3.2s ease-in-out infinite; } @keyframes ch-sheen { 0%{ left:7%; opacity:0; } 18%{opacity:1;} 82%{opacity:1;} 100%{ left:77%; opacity:0; } } .ch-step { position:relative; text-align:center; padding:0 .25rem; } .ch-node { position:relative; z-index:1; height:72px; width:72px; margin:0 auto; border-radius:18px; background:#fff; border:1px solid var(--line-2); box-shadow:0 12px 26px -14px rgba(6,24,56,.28); display:flex; align-items:center; justify-content:center; transition:transform .25s ease, box-shadow .25s ease; } .ch-step:hover .ch-node { transform:translateY(-4px); box-shadow:0 18px 34px -14px rgba(6,24,56,.32); } .ch-node img { width:38px; height:38px; object-fit:contain; display:block; } .ch-node svg { width:34px; height:34px; color:var(--persona); } .ch-tool { display:block; margin-top:.8rem; font-size:.72rem; font-weight:800; letter-spacing:.03em; text-transform:uppercase; color:var(--persona); } .ch-tool small { display:block; font-size:.64rem; font-weight:600; letter-spacing:0; text-transform:none; color:var(--text-3); margin-top:3px; line-height:1.35; } .ch-title { font-size:.92rem; font-weight:700; color:var(--text-strong); margin:.45rem 0 .3rem; } .ch-desc { font-size:.82rem; color:var(--text-2); line-height:1.5; margin:0; } .ch-data { margin-top:2.5rem; display:flex; gap:1.25rem; align-items:center; flex-wrap:wrap; background:var(--card-bg); border:1px solid var(--line-2); border-radius:16px; padding:1.25rem 1.5rem; box-shadow:0 24px 48px -36px var(--persona-soft); } .ch-data-ic { flex-shrink:0; width:50px; height:50px; border-radius:12px; background:rgba(var(--persona-rgb)/.10); color:var(--persona); display:flex; align-items:center; justify-content:center; } .ch-data-ic svg { width:28px; height:28px; } .ch-data-txt { flex:1; min-width:240px; } .ch-data-tool { font-size:.7rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--persona); } .ch-data-txt p { margin:.15rem 0 0; font-size:.92rem; color:var(--text-1); line-height:1.55; } .ch-data-logos { display:flex; gap:.6rem; flex-shrink:0; } .ch-data-chip { display:flex; align-items:center; gap:9px; background:#fff; border:1px solid var(--line-2); border-radius:11px; padding:8px 13px; } .ch-data-chip img { width:26px; height:26px; object-fit:contain; } .ch-data-chip b { font-size:.8rem; font-weight:700; color:var(--text-strong); white-space:nowrap; } .ch-teams { margin-top:2.5rem; display:flex; gap:1.1rem; align-items:center; background:rgba(var(--persona-rgb)/.06); border:1px solid rgba(var(--persona-rgb)/.18); border-left:3px solid var(--persona); border-radius:14px; padding:1.1rem 1.4rem; } .ch-teams-ic { flex-shrink:0; height:50px; padding:0 14px; border-radius:12px; background:#fff; border:1px solid var(--line-2); display:flex; align-items:center; gap:11px; } .ch-teams-ic img { width:28px; height:28px; object-fit:contain; } .ch-teams-ic svg { width:24px; height:24px; color:var(--persona); } .ch-teams-sep { width:1px; height:24px; background:var(--line-2); } .ch-teams-tool { font-size:.7rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--persona); } .ch-teams p { margin:.15rem 0 0; font-size:.92rem; color:var(--text-1); line-height:1.55; } @media(max-width:680px){ .ch-data-logos{ width:100%; } .ch-data-chip{ flex:1; justify-content:center; } } @media(max-width:860px){ .ch-flow { grid-template-columns:1fr; gap:0; max-width:460px; margin-inline:auto; } .ch-flow::before { top:0; bottom:0; left:36px; right:auto; width:3px; height:auto; background:linear-gradient(180deg, rgba(var(--persona-rgb)/.2), var(--persona), rgba(var(--persona-rgb)/.2)); } .ch-flow::after { display:none; } .ch-step { display:grid; grid-template-columns:72px 1fr; gap:1rem; text-align:left; padding:.55rem 0; align-items:center; } .ch-node { margin:0; } .ch-tool { margin-top:.15rem; } .ch-title{margin-top:.1rem;} } /* ─── TEMPORAIRE : cas d'école masqué (avis déplacé sous « Notre méthode ») ─── */ #cas-ecole { display: none; } .avis-section .testi-external { margin-top: 0; } /* ═══════════════════ TÉMOIGNAGE · interview expert-comptable ═══════════════════ */ .interview { background: var(--bg-elevated); } .interview .section-title .accent { color: var(--persona); } .itw-grid { display: grid; grid-template-columns: 300px 1fr; gap: 3rem; margin-top: 2.75rem; align-items: start; } .itw-person { align-self: start; } .itw-photo { border-radius: 18px; overflow: hidden; background: radial-gradient(120% 100% at 50% 0%, rgba(var(--persona-rgb)/0.20), rgba(var(--persona-rgb)/0.05)); border: 1px solid var(--line-2); } .itw-photo img { width: 100%; height: auto; display: block; } .itw-name { margin-top: 1.1rem; font-size: 1.15rem; font-weight: 800; color: var(--text-strong); letter-spacing: -0.01em; } .itw-role { font-size: 0.85rem; color: var(--text-2); margin-top: 2px; } .itw-pull { margin: 1rem 0 0; padding-left: 0.9rem; border-left: 3px solid var(--persona); font-size: 0.95rem; font-style: italic; color: var(--text-1); line-height: 1.5; } .itw-qa { display: flex; flex-direction: column; gap: 1.7rem; } .itw-q { position: relative; margin: 0 0 0.55rem; padding-left: 1.1rem; font-size: 1.05rem; font-weight: 700; color: var(--text-strong); line-height: 1.4; } .itw-q::before { content: ''; position: absolute; left: 0; top: 0.18em; bottom: 0.18em; width: 3px; border-radius: 2px; background: var(--persona); } .itw-a { margin: 0; font-size: 0.96rem; color: var(--text-2); line-height: 1.7; } @media (max-width: 820px) { .itw-grid { grid-template-columns: 1fr; gap: 1.75rem; } .itw-person { position: static; } .itw-photo { max-width: 240px; } } /* Placeholder photo témoignage (en attente du portrait) */ .itw-photo--placeholder { aspect-ratio: 346 / 362; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.7rem; color: var(--persona); } .itw-photo--placeholder svg { width: 60px; height: 60px; opacity: 0.55; } .itw-photo--placeholder span { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); } /* ─── TEMPORAIRE : modèle de collaboration masqué (doublon avec « Notre méthode ») ─── */ #process { display: none; }