/* Feuille de style propre au dossier billing/ — volontairement indépendante
de assets/css/style.css (voir billing/README.md) : aucun lien, aucun
import, aucune variable partagée avec le reste de l'application. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--bg: #f6f4ef;
--surface: #ffffff;
--primary: #2f6b46;
--primary-dk: #234f34;
--primary-lt: #e6f0ea;
--text: #22261f;
--text-muted: #5c6259;
--border: #e2ded2;
--danger: #b3261e;
--shadow: 0 2px 16px rgba(0,0,0,.06);
--radius: 16px;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #14170f; --surface: #1d2118; --primary: #4f9d6c; --primary-dk: #3a7a51;
--primary-lt: #223a2a; --text: #eceee7; --text-muted: #a3a89a; --border: #2c3226;
--shadow: 0 2px 16px rgba(0,0,0,.4);
}
}
html { font-size: 16px; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
background: var(--bg); color: var(--text); line-height: 1.55;
}
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 20px; }
a { color: var(--primary); }
h1, h2, h3 { font-family: Georgia, 'Times New Roman', serif; line-height: 1.2; }
/* ===== Hero ===== */
.hero { background: linear-gradient(160deg, var(--primary), var(--primary-dk)); color: #fff; padding: 64px 0 72px; }
.brand {
font-family: Georgia, 'Times New Roman', serif; font-size: 2.4rem; font-weight: 700;
letter-spacing: .02em; margin-bottom: 22px; text-align: center;
}
/* max-width généreux (proche de .wrap) : le texte est désormais découpé en
lignes manuelles précises via
(voir billing/pricing.php) — une
largeur trop étroite pour la taille de police (jusqu'à 2.6rem) provoquait
un second retour à la ligne non voulu au milieu de certaines d'entre elles
(ex. "qui vous permet d'organiser votre temps"), en plus de ceux demandés. */
.hero h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); max-width: 960px; margin: 0 auto; text-align: center; }
.hero-sub { margin-top: 18px; font-size: 1.05rem; max-width: 620px; margin-left: auto; margin-right: auto; opacity: .92; text-align: justify; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.btn-cta {
display: inline-block; background: #fff; color: var(--primary-dk);
padding: .85rem 1.6rem; border-radius: 30px; font-weight: 600; text-decoration: none;
box-shadow: var(--shadow); transition: transform .15s;
}
.btn-cta:hover { transform: translateY(-2px); }
.btn-cta-outline {
display: inline-block; background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.7);
padding: .8rem 1.6rem; border-radius: 30px; font-weight: 600; text-decoration: none;
transition: background .15s, transform .15s;
}
.btn-cta-outline:hover { background: rgba(255,255,255,.12); transform: translateY(-2px); }
/* ===== Features ===== */
.features { padding: 64px 0; }
.features h2, .pricing h2, .privacy-note h2, .pitch h2 { font-size: 1.7rem; margin-bottom: 32px; text-align: center; }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.feature-card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; }
.feature-icon { font-size: 1.8rem; margin-bottom: 10px; }
.feature-card h3 { font-size: 1.05rem; margin-bottom: 8px; text-align: center; }
.feature-card p { color: var(--text-muted); font-size: .92rem; text-align: justify; }
/* ===== Privacy note ===== */
.privacy-note { padding: 40px 0; }
.privacy-note .wrap { max-width: 700px; text-align: center; }
.privacy-note p { color: var(--text-muted); }
/* ===== Pricing ===== */
.pricing { padding: 56px 0 80px; }
.pricing-card {
max-width: 400px; margin: 0 auto; background: var(--surface); border-radius: var(--radius);
box-shadow: var(--shadow); padding: 32px 28px; text-align: center;
}
.success-card p { color: var(--text-muted); margin-top: 8px; }
.price { margin-bottom: 6px; }
.amount { font-size: 2.6rem; font-weight: 700; color: var(--primary); }
.period { color: var(--text-muted); font-size: 1rem; }
.price-hint { font-size: .82rem; color: var(--text-muted); margin-bottom: 24px; }
.pricing-card label { display: block; text-align: left; font-size: .82rem; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; }
.pricing-card input {
width: 100%; padding: .65rem .9rem; border: 1.5px solid var(--border); border-radius: 10px;
background: var(--bg); color: var(--text); font: inherit; margin-bottom: 8px;
}
.pricing-card input:focus { outline: none; border-color: var(--primary); }
.sub-status { font-size: .82rem; min-height: 1.2em; margin-bottom: 10px; }
.sub-status.error { color: var(--danger); }
#paypal-button-container { margin-top: 12px; }
.btn-subscribe {
display: block; width: 100%; background: var(--primary); color: #fff;
border: none; padding: .85rem 1.6rem; border-radius: 30px; font: inherit;
font-weight: 600; cursor: pointer; text-align: center;
transition: background .15s, transform .15s;
}
.btn-subscribe:hover { background: var(--primary-dk); transform: translateY(-1px); }
.hidden { display: none; }
/* ===== Argumentaire (pourquoi l'abonnement est payant) ===== */
.pitch { padding: 48px 0; }
.pitch .wrap { max-width: 700px; }
.pitch p { text-align: justify; margin-bottom: 16px; }
.pitch p:last-of-type { margin-bottom: 28px; }
/* Second bouton "Je m'abonne", même style que celui de la carte tarif mais
pas étiré sur toute la largeur du .wrap (700px, bien plus large que la
carte de 400px d'origine) — resterait démesuré sinon. */
.pitch .btn-subscribe { max-width: 280px; margin: 0 auto; }
/* ===== Footer ===== */
.site-footer { border-top: 1px solid var(--border); padding: 28px 0; text-align: center; }
.site-footer p { font-size: .82rem; color: var(--text-muted); }
.legal-links { margin-top: 6px; }
.legal-links a { color: var(--text-muted); margin: 0 6px; }
/* ===== Pages légales (placeholders) ===== */
.legal-page { padding: 56px 0; }
.legal-page .wrap { max-width: 640px; }
.legal-page h1 { font-size: 1.6rem; margin-bottom: 20px; }
.legal-todo {
background: var(--primary-lt); border-left: 3px solid var(--primary);
border-radius: 8px; padding: 14px 16px; font-size: .88rem; margin-bottom: 20px;
}
.legal-updated { color: var(--text-muted); font-size: .85rem; margin-bottom: 8px; }
.legal-intro { margin-bottom: 24px; }
.legal-intro p { margin-bottom: 12px; }
.legal-party {
background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
padding: 16px 18px; margin: 16px 0; font-size: .92rem; line-height: 1.7;
}
.legal-article {
padding-top: 28px; margin-top: 28px; border-top: 1px solid var(--border);
}
.legal-article:first-of-type { border-top: none; margin-top: 0; padding-top: 0; }
.legal-article h2 { font-size: 1.08rem; margin-bottom: 12px; }
.legal-article p { margin-bottom: 12px; }
.legal-article p:last-child { margin-bottom: 0; }
.legal-article ul { margin: 8px 0 14px 1.3em; }
.legal-article li { margin-bottom: 6px; }
/* Repère visuel volontairement voyant : un champ entre crochets doit sauter
aux yeux comme "pas une vraie donnée" avant toute mise en ligne réelle —
inventer une adresse, un SIREN ou une date plausibles serait plus
dangereux qu'un vide clairement signalé. */
.legal-placeholder {
background: rgba(179,38,30,.1); color: var(--danger); font-weight: 600;
padding: 1px 5px; border-radius: 4px; white-space: nowrap;
}
.legal-annex {
background: var(--primary-lt); border-radius: var(--radius);
padding: 20px 22px; margin-top: 28px; font-size: .92rem; line-height: 1.8;
}
.legal-annex h2 { font-size: 1.05rem; margin-bottom: 6px; }
.legal-annex .legal-annex-note { font-size: .85rem; color: var(--text-muted); margin-bottom: 14px; }
/* ===== Présentation vidéo (billing/assets/ricol.mp4) =====
Fichier auto-hébergé sur ce même serveur — lu nativement par le
navigateur (balise