/* NumériSIG — shared site styles Same palette/fonts as the logo exploration page: dark-first, JetBrains Mono + Fraunces + IBM Plex Sans + Orbitron + Titillium Web. Theme + language both toggle via attributes on , same pattern (localStorage, default dark/fr). */ :root{ --bg-void:#0A0E0C; --bg-surface:#121815; --bg-surface-raised:#1A2320; --bg-surface-raised-2:#202B26; --ink-primary:#EDF3F0; --ink-muted:#8FA39B; --ink-faint:#5C6E67; --accent-digital:#5FD4E8; --accent-organic-a:#2F7A52; --accent-organic-b:#7BCB99; --border:#243129; --border-strong:#324339; --chip-bg:#EEF2EC; --chip-ink:#14201B; --danger:#E8836B; --shadow: 0 20px 60px -30px rgba(0,0,0,.6); --container: 1080px; --radius-s: 8px; --radius-m: 14px; --radius-l: 22px; } html[data-site-theme="light"]{ --bg-void:#F4F6F1; --bg-surface:#FFFFFF; --bg-surface-raised:#EAEFE7; --bg-surface-raised-2:#DEE7DB; --ink-primary:#12201A; --ink-muted:#4C5D56; --ink-faint:#7B8B84; --accent-digital:#0C8AA3; --accent-organic-a:#1F6B45; --accent-organic-b:#3F9268; --border:#DAE2D9; --border-strong:#C4D0C1; --chip-bg:#12201A; --chip-ink:#F4F6F1; --danger:#B5432B; --shadow: 0 20px 60px -30px rgba(20,40,30,.25); } *, *::before, *::after{ box-sizing:border-box; } html, body{ margin:0; padding:0; } html{ scroll-behavior:smooth; } body{ background:var(--bg-void); color:var(--ink-primary); font-family:"IBM Plex Sans", -apple-system, "Segoe UI", sans-serif; line-height:1.6; -webkit-font-smoothing:antialiased; transition:background .25s ease, color .25s ease; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *, *::before, *::after{ transition:none !important; animation:none !important; } } /* ---------- hero mark rings (rotating rings on the globe logo) ---------- */ .ring-spin{ animation:spin 50s linear infinite; transform-origin:100px 100px; } .ring-spin-rev{ animation:spin 65s linear infinite reverse; transform-origin:100px 100px; } @keyframes spin{ to{ transform:rotate(360deg); } } img{ max-width:100%; display:block; } a{ color:inherit; } .container{ max-width:var(--container); margin-inline:auto; padding-inline:20px; } /* ---------- language toggle ---------- */ [lang="fr"], [lang="en"]{ } html:not([data-site-lang="en"]) [lang="en"]{ display:none !important; } html[data-site-lang="en"] [lang="fr"]{ display:none !important; } /* ---------- type ---------- */ h1, h2, h3, h4{ font-family:"Fraunces", serif; font-optical-sizing:auto; font-weight:600; line-height:1.15; text-wrap:balance; margin:0 0 .5em; color:var(--ink-primary); } h1{ font-size:clamp(2.1rem, 1.3rem + 3vw, 3.4rem); } h2{ font-size:clamp(1.5rem, 1.1rem + 1.6vw, 2.2rem); } h3{ font-size:clamp(1.15rem, 1rem + .6vw, 1.4rem); } p{ margin:0 0 1em; color:var(--ink-primary); } .lede{ color:var(--ink-muted); font-size:1.08rem; max-width:60ch; } .muted{ color:var(--ink-muted); } .eyebrow{ font-family:"Titillium Web", "JetBrains Mono", monospace; font-weight:600; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-digital); margin:0 0 .8em; display:inline-flex; align-items:center; gap:.6em; } .eyebrow::before{ content:""; width:22px; height:1px; background:var(--accent-digital); display:inline-block; } .brand-word{ font-family:"Orbitron", "JetBrains Mono", monospace; letter-spacing:.01em; } .brand-word .w-digital{ color:var(--ink-primary); } .brand-word .w-organic{ background:linear-gradient(100deg, var(--accent-organic-a), var(--accent-organic-b)); -webkit-background-clip:text; background-clip:text; color:transparent; margin-left:.03em; } .brand-word.glow .w-digital{ color:var(--accent-digital); text-shadow:0 0 14px color-mix(in srgb, var(--accent-digital) 55%, transparent); } code, .mono{ font-family:"JetBrains Mono", monospace; } /* ---------- buttons ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5em; font-family:"Titillium Web", "IBM Plex Sans", sans-serif; font-weight:600; font-size:.95rem; padding:.85em 1.5em; border-radius:999px; border:1px solid transparent; cursor:pointer; text-decoration:none; transition:transform .15s ease, border-color .15s ease, background .15s ease, color .15s ease; } .btn:active{ transform:translateY(1px); } .btn-primary{ background:var(--accent-digital); color:#06181C; } html[data-site-theme="light"] .btn-primary{ color:#04262c; } .btn-primary:hover{ filter:brightness(1.08); } .btn-ghost{ background:transparent; border-color:var(--border-strong); color:var(--ink-primary); } .btn-ghost:hover{ border-color:var(--accent-digital); } /* ---------- header / nav ---------- */ .site-header{ position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--bg-void) 88%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--border); } .nav-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:14px; } .nav-logo{ display:inline-flex; align-items:center; gap:.6em; text-decoration:none; flex:0 0 auto; } .nav-logo svg{ width:34px; height:34px; flex:0 0 auto; } .nav-logo .brand-word{ font-size:1.05rem; } .nav-links{ display:flex; align-items:center; gap:28px; list-style:none; margin:0; padding:0; font-family:"Titillium Web", sans-serif; font-weight:600; font-size:.92rem; } .nav-links a{ text-decoration:none; color:var(--ink-muted); padding-block:6px; border-bottom:2px solid transparent; transition:color .15s ease, border-color .15s ease; } .nav-links a:hover, .nav-links a[aria-current="page"]{ color:var(--ink-primary); border-color:var(--accent-digital); } .nav-tools{ display:flex; align-items:center; gap:8px; } .icon-toggle{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:999px; background:var(--bg-surface-raised); border:1px solid var(--border); color:var(--ink-primary); cursor:pointer; font-family:"JetBrains Mono", monospace; font-size:.72rem; font-weight:600; } .icon-toggle:hover{ border-color:var(--accent-digital); } .icon-toggle:focus-visible{ outline:2px solid var(--accent-digital); outline-offset:2px; } .nav-burger{ display:none; width:38px; height:38px; border-radius:999px; align-items:center; justify-content:center; background:var(--bg-surface-raised); border:1px solid var(--border); color:var(--ink-primary); cursor:pointer; } @media (max-width: 780px){ .nav-links{ position:fixed; inset:62px 12px auto 12px; background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-m); flex-direction:column; align-items:stretch; padding:14px 18px; gap:4px; box-shadow:var(--shadow); transform:translateY(-8px); opacity:0; pointer-events:none; transition:transform .15s ease, opacity .15s ease; } .nav-links.open{ transform:translateY(0); opacity:1; pointer-events:auto; } .nav-links a{ padding:10px 4px; border-bottom:1px solid var(--border); } .nav-links a:last-child{ border-bottom:none; } .nav-burger{ display:inline-flex; } } /* ---------- hero ---------- */ .hero{ padding-block:clamp(48px, 8vw, 96px) clamp(40px, 6vw, 72px); position:relative; overflow:hidden; } .hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(24px, 5vw, 64px); align-items:center; } @media (max-width: 860px){ .hero-grid{ grid-template-columns:1fr; } } .hero-mark{ display:flex; justify-content:center; } .hero-mark svg{ width:min(360px, 80vw); height:auto; } .hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:1.6em; } .stat-row{ display:flex; flex-wrap:wrap; gap:28px; margin-top:2.2em; padding-top:1.6em; border-top:1px solid var(--border); } .stat{ min-width:120px; } .stat b{ display:block; font-family:"JetBrains Mono", monospace; font-size:1.5rem; color:var(--accent-digital); font-weight:600; } .stat span{ color:var(--ink-muted); font-size:.85rem; } /* ---------- sections / cards ---------- */ section{ padding-block:clamp(40px, 6vw, 76px); } .section-head{ max-width:64ch; margin-bottom:2.2em; } .grid{ display:grid; gap:20px; } .grid-3{ grid-template-columns:repeat(3, 1fr); } .grid-2{ grid-template-columns:repeat(2, 1fr); } @media (max-width: 900px){ .grid-3{ grid-template-columns:repeat(2,1fr); } } @media (max-width: 620px){ .grid-3, .grid-2{ grid-template-columns:1fr; } } .card{ background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-m); padding:clamp(20px, 3vw, 30px); position:relative; } .card h3{ margin-bottom:.4em; } .card p{ color:var(--ink-muted); margin-bottom:0; font-size:.96rem; } .card .tag{ display:inline-block; font-family:"JetBrains Mono", monospace; font-size:.7rem; color:var(--accent-digital); letter-spacing:.06em; margin-bottom:.8em; } .card-icon{ width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:var(--bg-surface-raised); border:1px solid var(--border); margin-bottom:1em; color:var(--accent-digital); } .card-icon svg{ width:22px; height:22px; } .panel{ background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-l); padding:clamp(24px, 4vw, 48px); } .panel-alt{ background:var(--bg-surface-raised); } .list-check{ list-style:none; margin:0; padding:0; display:grid; gap:.7em; } .list-check li{ display:flex; gap:.7em; align-items:flex-start; color:var(--ink-muted); } .list-check li::before{ content:""; flex:0 0 auto; width:8px; height:8px; margin-top:.5em; border-radius:2px; background:var(--accent-organic-b); transform:rotate(45deg); } .timeline{ display:grid; gap:0; border-left:2px solid var(--border); margin-left:6px; } .timeline-item{ position:relative; padding:0 0 2.2em 28px; } .timeline-item:last-child{ padding-bottom:0; } .timeline-item::before{ content:""; position:absolute; left:-7px; top:2px; width:12px; height:12px; border-radius:50%; background:var(--bg-void); border:2px solid var(--accent-digital); } .timeline-item .when{ font-family:"JetBrains Mono", monospace; font-size:.78rem; color:var(--accent-digital); display:block; margin-bottom:.3em; } .cta-band{ background:var(--bg-surface-raised); border:1px solid var(--border); border-radius:var(--radius-l); padding:clamp(28px, 5vw, 52px); display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; } .cta-band h2{ margin-bottom:.2em; } .cta-band p{ margin:0; color:var(--ink-muted); } /* ---------- forms ---------- */ .field{ display:grid; gap:.4em; margin-bottom:1.2em; } .field label{ font-family:"Titillium Web", sans-serif; font-weight:600; font-size:.88rem; color:var(--ink-primary); } .field input, .field textarea, .field select{ font:inherit; font-family:"IBM Plex Sans", sans-serif; background:var(--bg-surface-raised); border:1px solid var(--border-strong); border-radius:var(--radius-s); color:var(--ink-primary); padding:.8em .9em; resize:vertical; } .field input:focus, .field textarea:focus, .field select:focus{ outline:2px solid var(--accent-digital); outline-offset:1px; border-color:var(--accent-digital); } .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; } @media (max-width: 600px){ .field-row{ grid-template-columns:1fr; } } .form-note{ font-size:.82rem; color:var(--ink-faint); } .form-status{ margin-top:1em; padding:.8em 1em; border-radius:var(--radius-s); font-size:.9rem; display:none; border:1px solid var(--border); } .form-status.show{ display:block; } .form-status.ok{ border-color:var(--accent-organic-b); color:var(--accent-organic-b); } .form-status.err{ border-color:var(--danger); color:var(--danger); } /* ---------- contact info rows ---------- */ .info-row{ display:flex; gap:14px; align-items:flex-start; margin-bottom:1.4em; } .info-row .card-icon{ margin-bottom:0; flex:0 0 auto; } .info-row div b{ display:block; font-size:.85rem; color:var(--ink-muted); font-weight:600; margin-bottom:.15em; } .info-row div a{ text-decoration:none; } .info-row div a:hover{ color:var(--accent-digital); } /* ---------- footer ---------- */ .site-footer{ border-top:1px solid var(--border); padding-block:32px; margin-top:40px; } .footer-row{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; } .footer-row .brand-word{ font-size:.95rem; } .footer-legal{ color:var(--ink-faint); font-size:.8rem; display:flex; gap:18px; flex-wrap:wrap; } .footer-legal a{ text-decoration:none; color:var(--ink-faint); } .footer-legal a:hover{ color:var(--accent-digital); } /* ---------- misc ---------- */ .badge{ display:inline-flex; align-items:center; gap:.5em; background:var(--bg-surface-raised); border:1px solid var(--border); border-radius:999px; padding:.4em .9em; font-size:.78rem; font-family:"Titillium Web", sans-serif; font-weight:600; color:var(--ink-muted); } .badge .dot{ width:7px; height:7px; border-radius:50%; background:var(--accent-organic-b); } .skip-link{ position:absolute; left:-999px; top:auto; background:var(--accent-digital); color:#04181c; padding:10px 16px; border-radius:8px; z-index:100; } .skip-link:focus{ left:16px; top:16px; }