/* * Thème commun à toutes les pages (connexion, accueil, événement). * * MARQUE : les couleurs « --marque* » portent l'identité ID EVENT ; les * couleurs « --violet / --olive » viennent du faire-part de l'événement. * Pour caler la charte d'ID EVENT, il suffit de changer ces quelques lignes. * * Clair / sombre : suit le réglage de l'ordinateur, sauf si l'utilisateur a * choisi avec le bouton (data-theme="clair" | "sombre" sur , voir theme.js). */ /* Polices embarquées (licence OFL, fichiers dans /fonts) : aucune dépendance à Google. */ @font-face { font-family: Montserrat; font-style: normal; font-weight: 300; font-display: swap; src: url('/fonts/montserrat-latin-300-normal.woff2') format('woff2'); } @font-face { font-family: Montserrat; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/montserrat-latin-400-normal.woff2') format('woff2'); } @font-face { font-family: Montserrat; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/montserrat-latin-500-normal.woff2') format('woff2'); } @font-face { font-family: Montserrat; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/montserrat-latin-600-normal.woff2') format('woff2'); } @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2'); } @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/cormorant-garamond-latin-600-normal.woff2') format('woff2'); } :root { --marque: #1c1b1f; --marque-doux: #6b6875; --marque-accent: #3d3566; --fond: #f5f4ef; --carte: #ffffff; --texte: #25232e; --doux: #6d6a78; --ligne: #e3e1d8; --olive: #56693a; --olive-clair: #e8eddd; --violet: #3d3566; --violet-clair: #ebe8f5; --rouge: #b23a3a; --rouge-clair: #f8e3e3; --ambre: #9a6a12; --ambre-clair: #f7edd7; --sur-accent: #ffffff; --bulle: #dcf8c6; --bulle-texte: #111111; --chat: #efeae2; --ombre: 0 1px 2px rgba(30,25,50,.06), 0 4px 16px rgba(30,25,50,.05); --ombre-tuile: 0 2px 4px rgba(30,25,50,.06), 0 18px 40px -12px rgba(30,25,50,.22); --ombre-tuile-survol: 0 4px 8px rgba(30,25,50,.08), 0 28px 60px -14px rgba(30,25,50,.32); /* Montserrat : la typographie du site idevent.be (capitales très espacées). */ --police: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --espacement-marque: .3em; --police-titre: "Cormorant Garamond", Georgia, "Times New Roman", serif; --largeur: 1440px; color-scheme: light; } /* Sombre : quand l'ordinateur est en sombre et qu'on n'a rien choisi… */ @media (prefers-color-scheme: dark) { :root:not([data-theme="clair"]) { --marque: #f1f0f5; --marque-doux: #a3a0ad; --marque-accent: #b7aee6; --fond: #16151a; --carte: #211f28; --texte: #ecebf2; --doux: #a19eae; --ligne: #34313f; --olive: #a3bd78; --olive-clair: #2a3220; --violet: #b7aee6; --violet-clair: #2d2842; --rouge: #f08c8c; --rouge-clair: #3d2224; --ambre: #e6b55c; --ambre-clair: #3a2e17; --sur-accent: #16151a; --bulle: #1f4f3a; --bulle-texte: #e9edef; --chat: #0f1a17; --ombre: 0 1px 2px rgba(0,0,0,.35); --ombre-tuile: 0 2px 4px rgba(0,0,0,.35), 0 18px 40px -12px rgba(0,0,0,.6); --ombre-tuile-survol: 0 4px 8px rgba(0,0,0,.4), 0 28px 60px -14px rgba(0,0,0,.75); color-scheme: dark; } } /* …ou quand on l'a choisi avec le bouton. */ :root[data-theme="sombre"] { --marque: #f1f0f5; --marque-doux: #a3a0ad; --marque-accent: #b7aee6; --fond: #16151a; --carte: #211f28; --texte: #ecebf2; --doux: #a19eae; --ligne: #34313f; --olive: #a3bd78; --olive-clair: #2a3220; --violet: #b7aee6; --violet-clair: #2d2842; --rouge: #f08c8c; --rouge-clair: #3d2224; --ambre: #e6b55c; --ambre-clair: #3a2e17; --sur-accent: #16151a; --bulle: #1f4f3a; --bulle-texte: #e9edef; --chat: #0f1a17; --ombre: 0 1px 2px rgba(0,0,0,.35); --ombre-tuile: 0 2px 4px rgba(0,0,0,.35), 0 18px 40px -12px rgba(0,0,0,.6); --ombre-tuile-survol: 0 4px 8px rgba(0,0,0,.4), 0 28px 60px -14px rgba(0,0,0,.75); color-scheme: dark; } * { box-sizing: border-box; } [hidden] { display: none !important; } body { margin: 0; background: var(--fond); color: var(--texte); font: 15px/1.5 var(--police); -webkit-font-smoothing: antialiased; } button, input, select, textarea { font: inherit; color: inherit; } /* Contenu centré, qui profite des grands écrans */ .cadre { width: 100%; max-width: var(--largeur); margin: 0 auto; padding-left: 40px; padding-right: 40px; } @media (max-width: 900px) { .cadre { padding-left: 16px; padding-right: 16px; } } /* Signature ID EVENT : le logo, un filet vertical, le libellé en capitales espacées (comme l'en-tête d'idevent.be). */ .marque { display: inline-flex; align-items: center; gap: 22px; color: var(--marque); text-decoration: none; } .marque [data-logo] { display: block; width: 64px; height: 59px; flex: none; } .marque [data-logo] svg { display: block; width: 100%; height: 100%; } .marque .libelle { border-left: 1px solid var(--ligne); padding: 6px 0 6px 22px; font-size: 11px; font-weight: 400; letter-spacing: var(--espacement-marque); text-transform: uppercase; color: var(--marque); white-space: nowrap; } a.marque:hover .libelle { color: var(--marque-doux); } @media (max-width: 640px) { .marque [data-logo] { width: 48px; height: 44px; } .marque .libelle { display: none; } } /* Capitales espacées, pour les libellés de navigation et les petits titres */ .capitales { text-transform: uppercase; letter-spacing: var(--espacement-marque); font-size: 12px; font-weight: 400; } /* Bouton clair / sombre */ .bascule-theme { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--ligne); background: var(--carte); color: var(--texte); cursor: pointer; font-size: 16px; line-height: 1; } .bascule-theme:hover { border-color: var(--doux); }