/* RelayOps — feuille de style. Principes : une seule police, une seule couleur d'accent, aucun effet décoratif. Fond clair et contraste élevé : nos visiteurs lisent souvent sur un téléphone, en plein soleil. Aucune police externe : la page doit s'afficher vite sur une connexion lente. */ /* Deux thèmes, choisis par l'HEURE du visiteur (script dans le ) : jour = fond blanc · nuit = vert profond. Pas un gadget : on lit au soleil la journée, dans le noir le soir. */ :root, :root[data-theme="jour"] { --encre: #14171a; --encre-douce: #55606b; --trait: #e3e6e9; --fond: #ffffff; --fond-doux: #f6f7f8; --accent: #17703c; --accent-clair: #eaf3ed; --sur-accent: #ffffff; --accent-fonce: #125c31; --rayon: 12px; --largeur: 1080px; } :root[data-theme="nuit"] { --encre: #eaf3ec; --encre-douce: #9db3a5; --trait: #1f3a2a; --fond: #0a1a12; /* vert profond */ --fond-doux: #0f261a; --accent: #5fd18d; --accent-clair: #14301f; --sur-accent: #06170e; --accent-fonce: #7ddfa5; } /* Si le visiteur n'a pas de JavaScript, on respecte sa préférence système. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --encre: #eaf3ec; --encre-douce: #9db3a5; --trait: #1f3a2a; --fond: #0a1a12; --fond-doux: #0f261a; --accent: #5fd18d; --accent-clair: #14301f; --sur-accent: #06170e; --accent-fonce: #7ddfa5; } } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: var(--encre); background: var(--fond); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 .5em; } h1 { font-size: clamp(2.1rem, 6vw, 3.6rem); font-weight: 800; } h2 { font-size: clamp(1.5rem, 3.6vw, 2.2rem); font-weight: 750; } h3 { font-size: 1.06rem; font-weight: 680; } p { margin: 0 0 1em; } em { font-style: normal; color: var(--accent); } a { color: var(--accent); } /* ── Boutons ───────────────────────────────────────────────── */ .btn { display: inline-block; background: var(--accent); color: var(--sur-accent); text-decoration: none; font-weight: 620; padding: .7em 1.3em; border: 0; border-radius: var(--rayon); cursor: pointer; font-size: 1rem; font-family: inherit; transition: background .15s ease; } .btn:hover { background: var(--accent-fonce); } .btn-lg { padding: .85em 1.7em; font-size: 1.05rem; } .btn-sm { padding: .5em 1em; font-size: .92rem; } .btn-text { color: var(--encre-douce); text-decoration: none; font-weight: 550; } .btn-text:hover { color: var(--accent); } /* ── En-tête ───────────────────────────────────────────────── */ .nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; max-width: var(--largeur); margin: 0 auto; padding: 1.1rem 1.5rem; } .brand { display: flex; align-items: center; gap: .55rem; color: var(--encre); text-decoration: none; font-weight: 720; font-size: 1.1rem; letter-spacing: -.02em; } /* ── Sections ──────────────────────────────────────────────── */ main > section { max-width: var(--largeur); margin: 0 auto; padding: 3.5rem 1.5rem; } .band { max-width: none; background: var(--fond-doux); border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait); } .band > * { max-width: var(--largeur); margin-left: auto; margin-right: auto; } .section-sub { color: var(--encre-douce); margin-top: -.4em; } /* ── Héros ─────────────────────────────────────────────────── */ .hero { padding-top: 2.5rem; padding-bottom: 3rem; } .eyebrow { color: var(--accent); font-weight: 640; font-size: .82rem; letter-spacing: .09em; text-transform: uppercase; margin-bottom: 1.1rem; } .lead { font-size: 1.14rem; color: var(--encre-douce); max-width: 46ch; } .cta-row { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; margin: 1.8rem 0 2.6rem; } /* La preuve : l'élément le plus important de la page. */ .proof { display: flex; align-items: center; gap: 1.3rem; background: var(--accent-clair); border-left: 4px solid var(--accent); border-radius: 0 var(--rayon) var(--rayon) 0; padding: 1.3rem 1.5rem; max-width: 34rem; } .proof-figure { font-size: clamp(2rem, 6vw, 2.7rem); font-weight: 800; color: var(--accent); letter-spacing: -.03em; line-height: 1; white-space: nowrap; } .proof-text { font-size: .97rem; color: var(--encre-douce); } .proof-text strong { display: block; color: var(--encre); } /* ── Grilles et cartes ─────────────────────────────────────── */ .grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 1.2rem; margin-top: 2rem; } .card { background: var(--fond); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 1.5rem; } .card p { margin: 0; color: var(--encre-douce); font-size: .97rem; } /* ── Étapes ────────────────────────────────────────────────── */ .steps { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1.6rem; } .steps li { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "num titre" ". texte"; gap: .25rem 1rem; align-items: center; } .steps .num { grid-area: num; width: 2.1rem; height: 2.1rem; display: grid; place-items: center; background: var(--accent); color: var(--sur-accent); border-radius: 50%; font-weight: 700; font-size: .95rem; } .steps h3 { grid-area: titre; margin: 0; } .steps p { grid-area: texte; margin: 0; color: var(--encre-douce); } /* ── Tarifs ────────────────────────────────────────────────── */ .card.price { display: flex; flex-direction: column; position: relative; } .card.price.featured { border-color: var(--accent); border-width: 2px; } .tag { position: absolute; top: -.7rem; left: 1.4rem; background: var(--accent); color: var(--sur-accent); font-size: .72rem; font-weight: 650; letter-spacing: .04em; padding: .2em .7em; border-radius: 999px; } .amount { font-size: 1.7rem; font-weight: 780; letter-spacing: -.02em; margin: .3em 0 0 !important; color: var(--encre) !important; } .amount span { font-size: .88rem; font-weight: 550; color: var(--encre-douce); } .per { font-size: .9rem; margin-bottom: 1.1rem !important; } .card.price ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; } .card.price li { font-size: .95rem; color: var(--encre-douce); padding-left: 1.4rem; position: relative; } .card.price li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 700; } /* ── Contact ───────────────────────────────────────────────── */ /* Cette section porte .band ET .contact : on annule le recadrage automatique des enfants et on contraint la grille elle-même. */ .band.contact > * { max-width: none; margin-inline: 0; } .band.contact { max-width: var(--largeur); margin-inline: auto; border-radius: var(--rayon); } .contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2.5rem; align-items: start; } .muted { color: var(--encre-douce); font-size: .95rem; } .contact-form { display: grid; gap: .9rem; } .contact-form label { display: grid; gap: .35rem; font-size: .9rem; font-weight: 600; } .contact-form input, .contact-form select, .contact-form textarea { font: inherit; font-size: 1rem; padding: .65em .8em; border: 1px solid var(--trait); border-radius: 10px; background: var(--fond); color: var(--encre); width: 100%; } .contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; } .contact-form textarea { resize: vertical; } .form-note { font-size: .84rem; color: var(--encre-douce); margin: 0; } /* ── Pied de page ──────────────────────────────────────────── */ footer { border-top: 1px solid var(--trait); margin-top: 1rem; padding: 2.2rem 1.5rem; display: flex; flex-wrap: wrap; gap: 1.2rem; justify-content: space-between; max-width: var(--largeur); margin-inline: auto; color: var(--encre-douce); font-size: .92rem; } footer nav { display: flex; flex-wrap: wrap; gap: 1.2rem; } footer a { color: var(--encre-douce); text-decoration: none; } footer a:hover { color: var(--accent); text-decoration: underline; } /* ── Les deux portes ───────────────────────────────────────── */ .grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.2rem; margin-top: 2rem; } .porte { display: block; text-decoration: none; color: inherit; background: var(--fond); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 1.8rem; transition: border-color .15s ease, transform .15s ease; } .porte:hover { border-color: var(--accent); transform: translateY(-2px); } .porte-num { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .12em; color: var(--accent); margin-bottom: .7rem; } .porte h3 { font-size: 1.35rem; font-weight: 760; margin-bottom: .5rem; } .porte p { color: var(--encre-douce); font-size: 1rem; margin: 0 0 .7em; } .porte-cible { font-size: .86rem !important; color: var(--encre-douce); } .porte-preuve { display: inline-block; margin-top: .5rem; background: var(--accent-clair); color: var(--encre); font-size: .88rem; padding: .4em .8em; border-radius: 999px; } .porte-preuve strong { color: var(--accent); } /* ── Encart Sankoré ────────────────────────────────────────── */ .sankore { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; align-items: start; margin-top: 2.5rem; padding: 2rem; background: var(--fond); border: 1px solid var(--trait); border-left: 4px solid var(--accent); border-radius: 0 var(--rayon) var(--rayon) 0; } .sankore h3 { font-size: 1.6rem; font-weight: 800; margin-bottom: .4em; } .sankore p { color: var(--encre-douce); } .sankore strong { color: var(--encre); } .sankore-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; } .sankore-liste li { font-size: .95rem; color: var(--encre-douce); padding-left: 1.4rem; position: relative; } .sankore-liste li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 700; } @media (max-width: 640px) { body { font-size: 16px; } main > section { padding: 2.5rem 1.25rem; } .proof { flex-direction: column; align-items: flex-start; gap: .6rem; } }