/* JM'claire — feuille de style du site vitrine Thème clair par défaut ; thème sombre via préférence système (prefers-color-scheme) ou choix manuel (attribut data-theme sur ). */ :root { --body-bg: #fff; --page-bg: #fff; --text: #0f1b4c; --text-secondary: #3f4a6b; --text-muted: #4c5878; --accent: #0b63e5; --accent-contrast: #fff; --cta-primary-bg: #0f1b4c; --border: #e8ecf4; --border-strong: #c9d3e8; --border-card: #e3e8f2; --card-bg: #f5f8fe; --card-bg-alt: #fff; --section-alt-bg: #f7f9fd; --thumb-a: #eaf0fb; --thumb-b: #f6f9fe; --date-highlight: #c2181f; --actu-accent-border: #0f1b4c; --contact-bg: #0f1b4c; --contact-text-secondary: #c2cce8; --footer-bg: #08123a; --footer-text: #b9c4dd; --footer-tagline: #9fadd0; --footer-copyright: #8b99bd; color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --body-bg: #070c20; --page-bg: #0b1229; --text: #eaeefb; --text-secondary: #b6c1e0; --text-muted: #9aa7cc; --accent: #5b9bff; --cta-primary-bg: #0b63e5; --border: #1d2747; --border-strong: #33406b; --border-card: #23305a; --card-bg: #111a38; --card-bg-alt: #111a38; --section-alt-bg: #0e1530; --thumb-a: #16204a; --thumb-b: #1b2755; --date-highlight: #ff6b6b; --actu-accent-border: #5b9bff; --contact-bg: #111a38; --contact-text-secondary: #b6c1e0; --footer-bg: #070c20; --footer-text: #b6c1e0; --footer-tagline: #8fa0cc; --footer-copyright: #8fa0cc; color-scheme: dark; } } :root[data-theme="dark"] { --body-bg: #070c20; --page-bg: #0b1229; --text: #eaeefb; --text-secondary: #b6c1e0; --text-muted: #9aa7cc; --accent: #5b9bff; --cta-primary-bg: #0b63e5; --border: #1d2747; --border-strong: #33406b; --border-card: #23305a; --card-bg: #111a38; --card-bg-alt: #111a38; --section-alt-bg: #0e1530; --thumb-a: #16204a; --thumb-b: #1b2755; --date-highlight: #ff6b6b; --actu-accent-border: #5b9bff; --contact-bg: #111a38; --contact-text-secondary: #b6c1e0; --footer-bg: #070c20; --footer-text: #b6c1e0; --footer-tagline: #8fa0cc; --footer-copyright: #8fa0cc; color-scheme: dark; } * { box-sizing: border-box; } body { margin: 0; background: var(--body-bg); font-family: 'Poppins', sans-serif; color: var(--text); } a { color: inherit; text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; } .page { background: var(--page-bg); } /* En-tête */ .site-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 44px; border-bottom: 1px solid var(--border); flex-wrap: wrap; } .brand { display: flex; align-items: center; gap: 12px; } .brand-name { font-weight: 700; font-size: 19px; letter-spacing: -0.02em; } .logo-badge { display: inline-flex; align-items: center; justify-content: center; width: auto; height: auto; border-radius: 0; background: transparent; } .logo-badge img { height: 40px; width: auto; display: block; } :root[data-theme="dark"] .logo-badge { width: 46px; height: 46px; border-radius: 50%; background: #fff; } :root[data-theme="dark"] .logo-badge img { height: 32px; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo-badge { width: 46px; height: 46px; border-radius: 50%; background: #fff; } :root:not([data-theme="light"]) .logo-badge img { height: 32px; } } .nav-links { display: flex; align-items: center; gap: 22px; font-size: 14.5px; font-weight: 500; color: var(--text-secondary); flex-wrap: wrap; justify-content: flex-end; } .nav-toggle { display: none; width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--border-strong); background: transparent; color: var(--text); align-items: center; justify-content: center; cursor: pointer; padding: 0; } .nav-toggle svg { width: 18px; height: 18px; fill: currentColor; } .nav-toggle .icon-close { display: none; } .nav-toggle.is-open .icon-burger { display: none; } .nav-toggle.is-open .icon-close { display: block; } @media (max-width: 880px) { .nav-toggle { display: inline-flex; } .nav-links { display: none; width: 100%; flex-basis: 100%; flex-direction: column; align-items: flex-start; gap: 18px; padding: 20px 0 4px; } .nav-links.is-open { display: flex; } } .lang-switch { font-size: 13.5px; color: var(--text-muted); } .lang-switch strong { color: var(--text); } .btn { border-radius: 999px; font-size: 14.5px; font-weight: 600; padding: 11px 22px; display: inline-block; } .btn-contact { background: var(--accent); color: #fff; } .theme-toggle { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--border-strong); background: transparent; color: var(--text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; } .theme-toggle svg { width: 17px; height: 17px; fill: currentColor; } .theme-toggle .icon-sun { display: none; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: block; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; } :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; } } /* Hero */ .grid-split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 64px; align-items: center; padding: 92px 44px 84px; } .eyebrow { font-size: 12.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin: 0 0 26px; } h1 { font-size: 66px; font-weight: 700; line-height: 1.02; letter-spacing: -0.035em; margin: 0 0 24px; text-wrap: pretty; } .hero-lead { font-size: 19.5px; line-height: 1.6; color: var(--text-secondary); margin: 0 0 40px; max-width: 520px; text-wrap: pretty; } .hero-actions { display: flex; flex-wrap: wrap; gap: 13px; } .btn-primary { background: var(--cta-primary-bg); color: #fff; padding: 16px 30px; } .btn-secondary { border: 1.5px solid var(--border-strong); color: var(--text); padding: 16px 30px; } .hero-visual { display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--border); border-radius: 28px; padding: 48px; min-height: 340px; } :root[data-theme="dark"] .hero-visual { border: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero-visual { border: none; } } .hero-visual img, .hero-visual video { width: 100%; max-width: 300px; height: auto; display: block; } .hero-video { cursor: pointer; border-radius: 12px; } /* Chiffres clés */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1px; background: var(--border); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .stat { background: var(--page-bg); padding: 34px 44px; } .stat-number { font-size: 34px; font-weight: 700; letter-spacing: -0.03em; margin: 0 0 4px; color: var(--accent); } .stat-label { font-size: 14.5px; color: var(--text-muted); margin: 0; } /* Sections génériques */ .section-title { font-size: 40px; font-weight: 700; letter-spacing: -0.03em; margin: 0 0 20px; } /* Origine */ .origin { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 64px; padding: 76px 44px; } .origin-text p { font-size: 17.5px; line-height: 1.72; color: var(--text-secondary); margin: 0 0 14px; } .origin-text p:last-child { margin-bottom: 0; } .origin-cards { display: flex; flex-direction: column; gap: 14px; } .card { background: var(--card-bg); border-radius: 16px; padding: 24px; } .card h3 { font-size: 18.5px; font-weight: 600; margin: 0 0 8px; } .card p { font-size: 16px; line-height: 1.6; color: var(--text-muted); margin: 0; } /* Créations */ .creations { padding: 76px 44px; background: var(--section-alt-bg); border-top: 1px solid var(--border); } .creations-header { margin-bottom: 38px; } .creations-header .section-title { margin-bottom: 10px; } .creations-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(195px, 1fr)); gap: 24px; } .creation-card { background: var(--card-bg-alt); border: 1px solid var(--border-card); border-radius: 18px; overflow: hidden; display: block; } .creation-thumb { height: 186px; background: repeating-linear-gradient(135deg, var(--thumb-a) 0 9px, var(--thumb-b) 9px 18px); display: flex; align-items: center; justify-content: center; } .creation-thumb span { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; color: var(--text-muted); letter-spacing: 0.06em; } .creation-body { padding: 22px; } .creation-body h3 { font-size: 18.5px; font-weight: 600; margin: 0 0 8px; } .creation-meta { font-size: 14.5px; color: var(--text-muted); margin: 0 0 16px; } .creation-link { font-size: 14.5px; font-weight: 600; color: var(--accent); margin: 0; } .creation-card--empty { border: 1.5px dashed var(--border-strong); border-radius: 18px; display: flex; flex-direction: column; justify-content: flex-end; padding: 22px; min-height: 186px; } .creation-card--empty h3 { font-size: 18.5px; font-weight: 600; margin: 0 0 8px; color: var(--text-muted); } .creation-card--empty p { font-size: 14.5px; color: var(--text-muted); margin: 0; } /* Actualités */ .actualites { padding: 76px 44px; } .actu-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 28px; padding: 22px 0; border-top: 1px solid var(--border); align-items: baseline; } .actu-row:first-of-type { border-top: 2px solid var(--actu-accent-border); } .actu-date { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; color: var(--text-muted); } .actu-date--highlight { color: var(--date-highlight); font-weight: 500; } .actu-text { font-size: 19px; color: var(--text-secondary); } .actu-text--highlight { color: var(--text); font-weight: 500; } /* Contact */ .contact { background: var(--contact-bg); color: #fff; padding: 80px 44px; display: flex; flex-direction: column; gap: 24px; align-items: flex-start; } :root[data-theme="dark"] .contact { border-top: 1px solid var(--border); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .contact { border-top: 1px solid var(--border); } } .contact h2 { font-size: 46px; font-weight: 700; letter-spacing: -0.04em; line-height: 1.02; margin: 0; } .contact-text { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; } .contact-text p { font-size: 17px; line-height: 1.6; color: var(--contact-text-secondary); margin: 0; } .btn-contact-mail { background: var(--accent); color: #fff; padding: 16px 32px; font-size: 16px; font-weight: 600; } /* Pied de page */ .site-footer { padding: 52px 44px; background: var(--footer-bg); color: var(--footer-text); } :root[data-theme="dark"] .site-footer { border-top: 1px solid var(--border); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .site-footer { border-top: 1px solid var(--border); } } .footer-top { display: flex; flex-wrap: wrap; gap: 40px; justify-content: space-between; align-items: flex-start; } .footer-brand { max-width: 380px; } .footer-name { font-weight: 700; font-size: 18px; color: #fff; margin: 0 0 6px; } .footer-tagline { font-size: 14.5px; color: var(--footer-tagline); margin: 0 0 14px; font-style: italic; } .footer-legal { font-size: 15.5px; line-height: 1.7; margin: 0; white-space: nowrap; } .footer-social { display: inline-flex; align-items: center; justify-content: center; margin-top: 16px; opacity: 0.9; } .footer-social svg { width: 30px; height: 30px; } .footer-social:hover { opacity: 1; } .footer-nav { display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; } .footer-copyright { font-size: 12.5px; color: var(--footer-copyright); margin: 40px 0 0; } .footer-version { font-family: 'IBM Plex Mono', monospace; } /* Pages de contenu (mentions légales, confidentialité, cookies) */ .content-page { max-width: 760px; margin: 0 auto; padding: 76px 44px 96px; } .content-meta { font-size: 14px; color: var(--text-muted); margin: 0 0 12px; } .content-page > h1 { font-size: 40px; font-weight: 700; letter-spacing: -0.03em; margin: 0 0 40px; } .content-block { margin-bottom: 36px; } .content-block h2 { font-size: 22px; font-weight: 600; margin: 0 0 12px; } .content-block p { font-size: 16.5px; line-height: 1.7; color: var(--text-secondary); margin: 0 0 12px; } .content-block p:last-child { margin-bottom: 0; } .content-block .placeholder { border: 1.5px dashed var(--border-strong); border-radius: 12px; padding: 14px 18px; color: var(--text-muted); font-style: italic; font-size: 15px; } /* Page d'erreur 404 */ .error-page { min-height: 56vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 96px 44px; gap: 16px; } .error-frame { display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 20px; max-width: 320px; margin: 0 0 8px; } :root[data-theme="dark"] .error-frame { border: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .error-frame { border: none; } } .error-visual { width: 100%; height: auto; display: block; border-radius: 10px; } .error-page h1 { font-size: 28px; margin: 0; } .error-page p { font-size: 16.5px; color: var(--text-secondary); margin: 0 0 12px; max-width: 440px; } /* Retour en haut */ .back-to-top { position: fixed; right: 24px; bottom: 24px; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--page-bg); color: var(--text); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 8px 24px rgba(15, 27, 76, 0.14); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; z-index: 20; } .back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } .back-to-top svg { width: 20px; height: 20px; fill: currentColor; } /* Réactif */ @media (max-width: 880px) { .grid-split { grid-template-columns: minmax(0, 1fr) !important; gap: 44px !important; } .origin { grid-template-columns: minmax(0, 1fr) !important; gap: 40px !important; } } @media (max-width: 640px) { h1 { font-size: 40px !important; } h2 { font-size: 30px !important; } .site-header, .grid-split, .stat, .origin, .creations, .actualites, .contact, .site-footer, .content-page, .error-page { padding-left: 22px !important; padding-right: 22px !important; } .actu-row { grid-template-columns: minmax(0, 1fr) !important; gap: 6px !important; } .footer-legal { white-space: normal !important; } }