/* ========================================================================== theme.css — TOUTE la charte Phonodesk, et rien d'autre. Cinq themes nommes d'apres les declinaisons du logotype. Changer de theme = changer UNE classe sur : t-ciel, t-pastel, t-nuit, t-pervenche, t-indigo. Aucun autre fichier ne connait de couleur. ========================================================================== */ /* --- Couleurs de marque : invariantes, jamais redefinies par un theme ---- */ :root{ --pd-ciel: #5ABFFF; --pd-pastel: #C2E8FF; --pd-nuit: #100F44; --pd-pervenche: #6D6AFF; --pd-indigo: #322F9C; --pd-blanc: #F3FAFF; /* Typographie — polices auto-hebergees, aucun CDN */ --police: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --police-titre: "Poppins", "Geist", system-ui, sans-serif; /* Rythme */ --large: 1120px; --etroit: 760px; --rayon: 14px; --rayon-s: 10px; --rayon-pill: 999px; --gouttiere: 20px; --section: clamp(56px, 8vw, 104px); } /* ========================= CIEL — theme par defaut ======================= */ body.t-ciel, :root{ --fond: #FFFFFF; --fond-doux: #F4FAFF; --carte: #FFFFFF; --carte-bord: #DCEEFB; --encre: #16202E; --encre-douce: #55637A; --titre: #100F44; --accent: #0072CE; --accent-encre:#FFFFFF; --accent-doux: #E8F5FF; --marque: #5ABFFF; --lien: #0072CE; --lien-survol: #100F44; --ombre: 0 1px 2px rgba(16,15,68,.06), 0 8px 24px rgba(16,15,68,.06); --ombre-forte: 0 2px 4px rgba(16,15,68,.08), 0 18px 44px rgba(16,15,68,.12); } /* ============================== PASTEL ================================== */ body.t-pastel{ --fond: #F7FCFF; --fond-doux: #EAF6FF; --carte: #FFFFFF; --carte-bord: #CFE7F8; --encre: #16202E; --encre-douce: #4F5D74; --titre: #100F44; --accent: #0F6FB8; --accent-encre:#FFFFFF; --accent-doux: #DDF0FF; --marque: #5ABFFF; --lien: #0F6FB8; --lien-survol: #100F44; --ombre: 0 1px 2px rgba(16,15,68,.05), 0 8px 24px rgba(16,15,68,.07); --ombre-forte: 0 2px 4px rgba(16,15,68,.07), 0 18px 44px rgba(16,15,68,.13); } /* =============================== NUIT =================================== */ body.t-nuit{ --fond: #0B0A2E; --fond-doux: #100F44; --carte: #17164F; --carte-bord: #2A2870; --encre: #EAF2FF; --encre-douce: #A9B4D6; --titre: #FFFFFF; --accent: #5ABFFF; --accent-encre:#0B0A2E; --accent-doux: #1B1A5C; --marque: #5ABFFF; --lien: #5ABFFF; --lien-survol: #C2E8FF; --ombre: 0 1px 2px rgba(0,0,0,.34), 0 8px 24px rgba(0,0,0,.34); --ombre-forte: 0 2px 4px rgba(0,0,0,.40), 0 18px 44px rgba(0,0,0,.46); } /* ============================= PERVENCHE ================================ */ body.t-pervenche{ --fond: #FFFFFF; --fond-doux: #F5F5FF; --carte: #FFFFFF; --carte-bord: #E0DFFF; --encre: #171727; --encre-douce: #575770; --titre: #322F9C; --accent: #5754F0; --accent-encre:#FFFFFF; --accent-doux: #EFEFFF; --marque: #6D6AFF; --lien: #5754F0; --lien-survol: #322F9C; --ombre: 0 1px 2px rgba(50,47,156,.06), 0 8px 24px rgba(50,47,156,.08); --ombre-forte: 0 2px 4px rgba(50,47,156,.09), 0 18px 44px rgba(50,47,156,.15); } /* =============================== INDIGO ================================= */ body.t-indigo{ --fond: #14133F; --fond-doux: #1A1852; --carte: #221F63; --carte-bord: #38348F; --encre: #EDEDFF; --encre-douce: #B0AEDC; --titre: #FFFFFF; --accent: #8F8DFF; --accent-encre:#14133F; --accent-doux: #2B2878; --marque: #6D6AFF; --lien: #8F8DFF; --lien-survol: #C2E8FF; --ombre: 0 1px 2px rgba(0,0,0,.32), 0 8px 24px rgba(0,0,0,.32); --ombre-forte: 0 2px 4px rgba(0,0,0,.38), 0 18px 44px rgba(0,0,0,.44); }