/* ⟦2026-09-21⟧ site.css — style commun des quatre pages neuves de la vitrine. Repris de votre accueil : mêmes variables, mêmes couleurs. Rien d'inventé. CONTIENT : les variables · la navigation commune (.snav) · le pied commun · la règle « sans JavaScript » · les cartes de prix (base référent, en rose ou en bleu). */ :root{ --encre:#0E1B2C; --encre2:#12233A; --papier:#F6F8FA; --blanc:#FFFFFF; --texte:#1C2B3A; --gris:#5D6B7A; --ligne:#E3E9EF; --cyan:#00B4D8; --cyan-fonce:#0891B2; --cyan-nuit:#7DD8EA; --candidat:#E91E8C; --pro:#2563EB; --sans:'Plus Jakarta Sans',system-ui,sans-serif; --corps:'DM Sans',sans-serif; --mono:'DM Mono',monospace; --r:16px; --ombre:0 10px 40px rgba(14,27,44,.10); } /* ── RÈGLE « SANS JAVASCRIPT » ───────────────────────────────────────────── Sur l'accueil actuel, .rv met le contenu à opacité zéro tant que le script ne l'a pas révélé, et la scène cache ses étiquettes et la quatrième case : sans JavaScript, la page est vide. Ici, tout est VISIBLE par défaut. L'animation ne joue que si le script a posé la classe .js. */ html:not(.js) .rv{opacity:1!important;transform:none!important} html:not(.js) .stele li, html:not(.js) .stele.quatre .occupant{opacity:1!important;transform:none!important} /* ── NAVIGATION COMMUNE ── */ .snav{position:sticky;top:0;z-index:100;background:#0B1628;border-bottom:1px solid rgba(255,255,255,.08)} .snav-in{max-width:1180px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;gap:22px} .snav-logo{display:inline-flex;line-height:0} .snav-logo img{height:30px;width:auto;display:block} .snav-liens{display:flex;align-items:center;gap:20px;margin-left:auto;flex-wrap:wrap} .snav-liens a{white-space:nowrap;color:#C9D6E2;text-decoration:none;font-family:var(--sans);font-size:14px;font-weight:600} .snav-liens a:hover,.snav-liens a[aria-current]{color:#fff} .snav-esp{display:flex;gap:8px} .snav-esp a{white-space:nowrap;color:#fff!important;border-radius:999px;padding:8px 15px;font-size:13px!important} .snav-esp .c{background:var(--candidat)} .snav-esp .r{background:var(--pro)} .snav-burger{display:none;margin-left:auto;background:none;border:0;color:#fff;font-size:24px;cursor:pointer} @media(max-width:900px){ .snav-burger{display:block} .snav-liens{display:none;position:absolute;top:100%;left:0;right:0;background:#0B1628; flex-direction:column;align-items:flex-start;padding:16px 24px 22px;gap:14px} .snav-liens.ouvert{display:flex} .snav-esp{flex-direction:column;width:100%} } /* Sans JavaScript, le menu mobile reste ouvert : il doit rester utilisable. */ @media(max-width:900px){html:not(.js) .snav-liens{display:flex;position:static}} /* ── PIED COMMUN — règles reprises de l'accueil ── */ footer{background:#0B1522;color:#93A1B5} .f-in{max-width:1140px;margin:0 auto;padding:46px 24px 18px} .f-cols{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:26px} .f-cols h4{color:#fff;font-family:var(--sans);font-size:13.5px;margin-bottom:10px} .f-cols p,.f-cols a{font-size:13px;line-height:1.6;color:#93A1B5;text-decoration:none;display:block;margin-bottom:7px} .f-cols a{color:#8fb8d8} .f-cols a:hover{color:#fff} .f-base{border-top:1px solid #1E2E42;margin-top:22px;padding-top:14px;font-size:11.5px;display:flex;flex-wrap:wrap;gap:6px 14px} .f-base a{color:#93A1B5;text-decoration:none} .f-base a:hover{color:#fff} .f-base span{margin-left:auto} /* ── CARTES DE PRIX — base référent (décision garante du 18/09) ── */ .pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:24px 0} .pricing-card{position:relative;background:#fff;border:2px solid var(--ligne,#e5e7eb);border-radius:16px;padding:26px 22px;text-align:center} .pricing-card.popular{border-color:var(--accent)} .pricing-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff; font-size:12px;font-weight:700;padding:4px 14px;border-radius:999px;white-space:nowrap} .pricing-name{font-family:var(--sans);font-weight:800;font-size:1.15rem;margin-bottom:8px} .pricing-price{font-size:2.5rem;font-weight:800;color:var(--accent);line-height:1.1} .pricing-credits{font-weight:700;color:var(--accent);margin:6px 0 10px} .pricing-details{color:var(--gris,#64748b);font-size:.9rem;line-height:1.6} .abo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:640px;margin:20px auto 0} .abo-card{background:#fff;border:1px solid var(--ligne,#e5e7eb);border-radius:14px;padding:22px;text-align:center} .abo-name{font-weight:800;margin-bottom:6px} .abo-price{font-size:1.8rem;font-weight:800;color:var(--accent)} .abo-price small{font-size:.95rem;font-weight:600} .abo-credits{color:var(--gris,#64748b);margin-top:4px} .ton-candidat{--accent:var(--candidat)} .ton-referent{--accent:var(--pro)} @media(max-width:760px){.pricing-grid,.abo-grid{grid-template-columns:1fr}} /* ── COULEURS PAR PUBLIC — décision de la garante du 22/09 ──────────────────── · présentation CANDIDAT : rose (--candidat) · présentation RÉFÉRENT : bleu (--pro) · pages GÉNÉRALES (accueil, parcours) : ni rose ni bleu — le cyan, troisième couleur du logo · la CAUSE (Écologie de l'Humain) : vert, celui de sa propre page (--vert #3E6B4F) · « PASSER LE TEST » : ROSE PARTOUT, même chez le référent — le test est le test candidat, que le référent passe aussi pour comprendre ce que c'est. */ :root{--vert:#3E6B4F;--vert-clair:#EAF1EC} /* La page référent héritait du cyan de l'ancienne porte : ses repères passent au bleu. */ body.ton-referent{--cyan:#2563EB;--cyan-fonce:#1D4ED8;--cyan-nuit:#93C5FD} a.btn-test,.btn.btn-test{background:var(--candidat)!important;border-color:var(--candidat)!important;color:#fff!important} a.lien-test{color:var(--candidat)!important;font-weight:700} .bloc-cause{border-color:var(--vert)!important;background:var(--vert-clair)!important} .bloc-cause .eyebrow,.bloc-cause a{color:var(--vert)!important} .bloc-cause h2{color:var(--vert)!important} /* ── PARTIE « VOTRE ESPACE — COMMENT ÇA MARCHE » — décision de la garante du 22/09 ───── Visuellement IDENTIQUE côté candidat et côté référent : mêmes composants, définis UNE fois ici, teintés par la couleur du public (--accent : rose candidat, bleu référent). */ .esp{padding:64px 0} .esp h2{font-family:var(--sans);font-weight:800;font-size:1.75rem;line-height:1.25;color:var(--encre,#0f172a);margin:0 0 8px} .esp .esp-sous{color:var(--gris,#64748b);margin:0 0 26px;max-width:720px} .esp-etapes{display:grid;gap:14px} .esp-etape{display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:start;background:#fff; border:1px solid var(--ligne,#e5e7eb);border-radius:14px;padding:18px 20px} .esp-num{width:36px;height:36px;border-radius:50%;background:var(--accent);color:#fff;font-weight:800; display:flex;align-items:center;justify-content:center;font-family:var(--sans)} .esp-etape h3,.esp-carte h3{font-family:var(--sans);font-weight:800;font-size:1.02rem;margin:4px 0 6px;color:var(--encre,#0f172a)} .esp-etape p,.esp-carte p{margin:0;color:var(--texte,#334155);font-size:.94rem;line-height:1.6} .esp-etape .esp-lien{margin-top:8px} .esp-cartes{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px} .esp-carte{background:#fff;border:1px solid var(--ligne,#e5e7eb);border-top:3px solid var(--accent);border-radius:14px;padding:20px} .esp-tag{display:inline-block;margin-top:12px;font-size:.75rem;font-weight:700;border-radius:999px;padding:3px 11px; background:#EEF2F6;color:#475569} .esp-tag.pay,.esp-tag.prem{background:var(--accent);color:#fff} .esp-oblig{display:inline-block;margin-left:8px;font-size:.72rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase; color:#fff;background:var(--candidat);border-radius:999px;padding:2px 10px;vertical-align:middle} .esp-note{margin-top:18px;color:var(--gris,#64748b);font-size:.93rem} .esp-acces{background:#0f172a;color:#fff;text-align:center;padding:52px 24px} .esp-acces h2{color:#fff;font-family:var(--sans);font-weight:800;font-size:1.6rem;margin:0 0 10px} .esp-acces p{color:#C9D6E2;margin:0 0 22px} .esp-acces .esp-btn{display:inline-block;background:var(--accent);color:#fff;font-family:var(--sans);font-weight:700; text-decoration:none;border-radius:999px;padding:13px 28px} .esp-acces .esp-acces-note{color:#8FA3B8;font-size:.9rem;margin:20px 0 0} .esp-acces .esp-acces-note a{color:#fff;font-weight:700} /* Titres de la partie espace et des prix : même taille et même alignement des deux côtés, quel que soit le style hérité de la page d'origine. */ .partie-espace{padding:56px 0 8px!important} .partie-espace h2{font-family:var(--sans)!important;font-weight:800!important;font-size:2.1rem!important;line-height:1.2!important; text-transform:none!important;letter-spacing:0!important;color:var(--encre,#0f172a)!important;text-align:left!important;margin:0!important} .esp-prix h2{font-family:var(--sans)!important;font-weight:800!important;font-size:1.75rem!important;line-height:1.25!important; text-transform:none!important;letter-spacing:0!important;color:var(--encre,#0f172a)!important;text-align:left!important} .esp-prix .eyebrow{display:none!important} /* La grille de tarifs référent héritait d'un conteneur étroit et d'une introduction centrée (mise en page du bureau) : alignée sur la grille candidat, pleine largeur, à gauche. */ .esp-prix .container{max-width:none!important;padding:0!important;margin:0!important} .esp-prix .pricing-intro,.esp-prix .pricing-intro p{text-align:left!important;margin-left:0!important} /* ── « COMMENT ÇA MARCHE » EN FORME VISUELLE — décision de la garante du 22/09 ───────── Même forme que la rangée « Six temps » de la page du parcours : des cartes courtes, une icône, un titre, une légende. Pas de texte long. La carte du bureau Matching Tool est mise en avant. */ .esp-flux{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:6px} .esp-pas{position:relative;background:#fff;border:1px solid var(--ligne,#e5e7eb);border-radius:14px;padding:20px 14px;text-align:center} .esp-pas .e{font-size:26px;line-height:1} .esp-pas .n{position:absolute;top:10px;left:12px;font-family:var(--mono);font-size:11px;color:var(--gris,#94a3b8)} .esp-pas h4{font-family:var(--sans);font-size:15px;font-weight:800;margin:10px 0 6px;color:var(--encre,#0f172a)} .esp-pas p{font-size:13px;color:var(--gris,#64748b);margin:0;line-height:1.5} .esp-pas .b{display:inline-block;margin-top:10px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase; color:#fff;background:var(--accent);border-radius:999px;padding:3px 10px} .esp-pas .b.test{background:var(--candidat)} .esp-pas.bureau{border:2px solid var(--accent);box-shadow:0 6px 18px rgba(15,23,42,.08)} .esp-flux-note{margin-top:18px;text-align:center;font-size:.95rem} .esp-flux-note a{font-weight:700;margin:0 10px} @media(max-width:860px){.esp-flux{grid-template-columns:1fr 1fr}} @media(max-width:480px){.esp-flux{grid-template-columns:1fr}} /* ── CE QUE ÇA COÛTE : d'abord le test (acheté via Stripe sur la page d'inscription), puis les crédits, qui servent aux outils du bureau Matching Tool. Le test est ROSE des deux côtés. */ .esp-test{display:grid;grid-template-columns:1fr auto;gap:22px;align-items:center;background:#fff; border:2px solid var(--candidat);border-radius:16px;padding:24px 26px;margin:6px 0 34px} .esp-test h3{font-family:var(--sans);font-weight:800;font-size:1.2rem;margin:0 0 6px;color:var(--encre,#0f172a)} .esp-test p{margin:0;color:var(--texte,#334155);font-size:.95rem;line-height:1.6} .esp-test .prix{font-family:var(--sans);font-weight:800;font-size:2.4rem;color:var(--candidat);line-height:1;text-align:right} .esp-test .prix small{display:block;font-size:.8rem;font-weight:600;color:var(--gris,#64748b);margin-top:4px} .esp-test .esp-btn-test{display:inline-block;margin-top:12px;background:var(--candidat);color:#fff!important;font-family:var(--sans); font-weight:700;text-decoration:none;border-radius:999px;padding:11px 24px} @media(max-width:620px){.esp-test{grid-template-columns:1fr}.esp-test .prix{text-align:left}} /* Bloc « le bilan n'est pas la fin » (accueil) : la ligne des deux portes de chaque espace n'avait aucune marge dans les cartes — les boutons mordaient sur la liste. */ .mt-carte .cta-ligne{margin-top:24px;display:flex;gap:12px;flex-wrap:wrap} /* ── Le TEST est ROSE partout (décision garante) : le bloc « Pour vous d'abord » du pitch référent, où le référent est d'abord un candidat, et la vignette du test sur les pages d'espace. */ .bloc-test-rose{--cyan:var(--candidat);--cyan-fonce:var(--candidat);--cyan-nuit:#B0136A;--pro:var(--candidat)} .bloc-test-rose .t3 .n{background:rgba(233,30,140,.1)!important} .vignette-test{--accent:var(--candidat);grid-template-columns:repeat(auto-fill,minmax(240px,320px))!important} .vignette-test .pricing-card{border-color:var(--candidat)!important} .vignette-test .pricing-card h3{margin:0 0 8px} .vignette-test .pricing-price,.vignette-test .pricing-credits{color:var(--candidat)!important} .vignette-test .esp-btn-test{display:inline-block;margin-top:16px;background:var(--candidat);color:#fff!important;font-family:var(--sans); font-weight:700;text-decoration:none;border-radius:999px;padding:10px 22px} /* ⟦23/09 nuit⟧ CORRECTIF RESPONSIVE — site.css est chargé APRÈS le