/* ============================================================ dc.css — design system commun Maestrow (hub / labs / domain / server) Chargé APRÈS fonts.css, AVANT le CSS spécifique de chaque page. Chaque page définit sur ses accents : --dc-accent / --dc-accent-2 / --dc-accent-deep (labs bleu #1d4ed8, domain violet #6d28d9, server orange #c2410c, hub = les trois combinés dans son propre CSS). ============================================================ */ /* ---------- 1. Variables & reset ---------- */ :root{ --dc-ink:#111; --dc-dark:#0b0b0e; --dc-body:#3f3f46; --dc-muted:#555; --dc-line:rgba(17,17,17,0.13); /* Défauts neutres — surchargés par chaque page sur */ --dc-accent:#111; --dc-accent-2:#3f3f46; --dc-accent-deep:#0b0b0e; } *,*::before,*::after{box-sizing:border-box;} html{overflow-x:clip;scroll-behavior:smooth;} body{ margin:0; position:relative; background:#fff; color:var(--dc-ink); font-family:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif; font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } h1,h2,h3,h4{ margin:0; font-family:"Space Grotesk","Instrument Sans",system-ui,sans-serif; font-weight:700; color:var(--dc-ink); } h1{font-size:clamp(38px,6.5vw,84px);letter-spacing:-0.035em;line-height:1.0;overflow-wrap:anywhere;} h2{font-size:clamp(28px,4.6vw,52px);letter-spacing:-0.03em;line-height:1.05;overflow-wrap:anywhere;} h3{font-size:20px;letter-spacing:-0.015em;line-height:1.25;overflow-wrap:anywhere;} p{margin:0;color:var(--dc-body);overflow-wrap:anywhere;} a{color:inherit;text-decoration:none;} button{font:inherit;border:0;background:none;padding:0;cursor:pointer;} img,svg{max-width:100%;display:block;} :focus-visible{outline:2px solid var(--dc-accent);outline-offset:2px;} ::selection{background:color-mix(in srgb,var(--dc-accent) 16%,#fff);} .dc-container{max-width:1240px;margin:0 auto;padding:0 32px;min-width:0;} /* ---------- 2. Fond dégradé continu (couche signature) ---------- Les backgrounds eux-mêmes (3 radial-gradient vers ~720–830px de haut + 1 linear blanc→teinte→blanc) sont définis par le CSS de chaque page. Ici : position, hauteur, mask en fondu (jamais d'arrêt net), parallaxe JS. */ #bg-gradient{ position:absolute;top:0;left:0; width:100%;height:1500px; z-index:-1; pointer-events:none; -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 60%,transparent 98%); mask-image:linear-gradient(180deg,#000 0%,#000 60%,transparent 98%); will-change:transform; } /* ---------- 3. Logo pac-man (CSS pur) ---------- Cercle noir + encoche blanche (quart, arc tourné vers le centre) + « m » blanc Space Grotesk 700 centré. */ .dc-logo{ position:relative; width:28px;height:28px;flex:0 0 auto; border-radius:50%; background:var(--dc-dark); overflow:hidden; display:inline-flex;align-items:center;justify-content:center; } .dc-logo::before{ content:""; position:absolute;top:0;right:0; width:42%;height:42%; background:#fff; border-bottom-left-radius:100%; } .dc-logo::after{ content:"m"; position:relative; font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:14px;line-height:1; color:#fff; transform:translate(-1px,-0.5px); } .dc-logo--sm{width:22px;height:22px;} .dc-logo--sm::after{font-size:11px;} /* ---------- 4. Header ---------- */ .dc-header{ position:sticky;top:0;z-index:80; padding:14px 20px; } .dc-header__bar{ position:relative; max-width:1240px;margin:0 auto; display:flex;align-items:center;justify-content:space-between;gap:16px; padding:10px 12px 10px 16px; background:rgba(255,255,255,0.88); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border:1px solid var(--dc-line); border-radius:10px; box-shadow:none; min-width:0; } .dc-header.is-scrolled .dc-header__bar{ background:rgba(255,255,255,0.95); border-color:rgba(17,17,17,0.18); } .dc-brand{ display:inline-flex;align-items:center;gap:10px; font-family:"Space Grotesk",sans-serif; font-weight:700;font-size:18px;letter-spacing:-0.02em;line-height:1; color:var(--dc-ink); min-width:0; } .dc-brand__full{height:26px;width:auto;display:block;max-width:100%;flex:0 0 auto;} .dc-badge{ display:inline-block; margin-left:2px; padding:4px 9px; border-radius:8px; font-family:"Space Grotesk",sans-serif; font-weight:600;font-size:13px;line-height:1;letter-spacing:0.01em; color:var(--dc-accent); background:color-mix(in srgb,var(--dc-accent) 8%,transparent); } .dc-nav{ position:absolute;left:50%;top:50%; transform:translate(-50%,-50%); display:flex;align-items:center;gap:26px; } .dc-nav a{ font-size:15px;font-weight:500;color:var(--dc-body); transition:color .2s ease; } .dc-nav a:hover{color:var(--dc-ink);} .dc-nav a.is-active{color:var(--dc-accent);font-weight:600;} .dc-header .dc-btn{padding:9px 16px;font-size:14px;flex:0 0 auto;white-space:nowrap;} /* ---------- 5. Boutons (radius 8px, jamais de pill) ---------- */ .dc-btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:11px 20px; border-radius:8px; border:1px solid transparent; background:var(--dc-accent); color:#fff; font-family:"Instrument Sans",system-ui,sans-serif; font-size:15px;font-weight:600;line-height:1; cursor:pointer; transition:background .2s ease,border-color .2s ease,color .2s ease; -webkit-tap-highlight-color:transparent; } .dc-btn:hover{background:color-mix(in srgb,var(--dc-accent) 84%,#000);} .dc-btn--ghost{background:transparent;color:var(--dc-ink);border-color:var(--dc-line);} .dc-btn--ghost:hover{background:transparent;border-color:rgba(17,17,17,0.34);} .dc-btn--light{background:#fff;color:var(--dc-dark);} .dc-btn--light:hover{background:#ececf1;} .dc-btn--outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,0.4);} .dc-btn--outline-light:hover{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.75);} /* ---------- 6. Eyebrow & en-tête de section ---------- */ .dc-eyebrow{ display:inline-block; font-family:"Space Grotesk",sans-serif; font-weight:600;font-size:13px; letter-spacing:0.18em;text-transform:uppercase; color:var(--dc-accent); } .dc-section-head{ display:flex;justify-content:space-between;align-items:flex-end;gap:24px; margin:0 0 44px; } .dc-section-head h2{font-size:clamp(34px,4.6vw,52px);letter-spacing:-0.03em;line-height:1.02;} .dc-section-head .dc-eyebrow{padding-bottom:12px;white-space:nowrap;} /* ---------- 7. Bande « 3 étapes » ---------- */ .dc-steps{ display:grid;grid-template-columns:repeat(3,1fr); border-top:1px solid var(--dc-line); border-bottom:1px solid var(--dc-line); } .dc-step{padding:30px 28px 36px;} .dc-step:first-child{padding-left:0;} .dc-step:last-child{padding-right:0;} .dc-step + .dc-step{border-left:1px solid var(--dc-line);} .dc-step__num{ display:block; font-family:"Space Grotesk",sans-serif; font-weight:600;font-size:22px;line-height:1; color:var(--dc-accent); margin-bottom:14px; } .dc-step h3{font-size:18px;font-weight:600;letter-spacing:-0.01em;margin-bottom:8px;} .dc-step p{font-size:15px;color:var(--dc-muted);line-height:1.6;} /* ---------- 8. CTA final sombre ---------- */ .dc-cta{ position:relative;overflow:hidden; background:var(--dc-dark); border-radius:16px; padding:80px 40px; text-align:center; } .dc-cta::before{ /* radial-gradients d'accent ancrés en BAS du bloc */ content:""; position:absolute;inset:0; pointer-events:none; background: radial-gradient(620px 340px at 16% 102%, color-mix(in srgb,var(--dc-accent) 34%,transparent), transparent 70%), radial-gradient(680px 360px at 84% 104%, color-mix(in srgb,var(--dc-accent-2) 26%,transparent), transparent 72%), radial-gradient(560px 300px at 50% 112%, color-mix(in srgb,var(--dc-accent-deep) 40%,transparent), transparent 74%); } .dc-cta > *{position:relative;} .dc-cta h2{ font-size:clamp(28px,4.4vw,46px); color:#fff;letter-spacing:-0.03em;line-height:1.05; margin:0 auto;max-width:680px; overflow-wrap:anywhere; } .dc-cta p{margin:16px auto 0;max-width:540px;font-size:16px;color:rgba(255,255,255,0.72);overflow-wrap:anywhere;} .dc-cta__actions{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:32px;} /* ---------- 9. Footer ---------- */ .dc-footer{ border-top:1px solid var(--dc-line); margin-top:96px; padding:28px 0; } .dc-footer .dc-container{ display:flex;align-items:center;justify-content:space-between;gap:20px; flex-wrap:wrap; } .dc-footer__brand{ display:inline-flex;align-items:center;gap:10px; font-size:14px;color:var(--dc-muted); min-width:0; } .dc-footer__links{display:flex;align-items:center;gap:22px;flex-wrap:wrap;row-gap:10px;} .dc-footer__links a{font-size:14px;color:var(--dc-muted);transition:color .2s ease;} .dc-footer__links a:hover{color:var(--dc-ink);} /* ---------- 10. Animations ---------- */ /* Reveal au scroll (dc.js ajoute .is-revealed + transitionDelay) */ [data-reveal]{ opacity:0; transform:translateY(36px); transition:opacity .9s cubic-bezier(0.22,1,0.36,1),transform .9s cubic-bezier(0.22,1,0.36,1); } [data-reveal].is-revealed{opacity:1;transform:translateY(0);} /* Tuiles flottantes du hero — appliquer .dc-float (+ variante) sur chaque tuile */ @keyframes floaty{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-14px);} } .dc-float{animation:floaty 6s ease-in-out infinite;} .dc-float--slow{animation-duration:7s;animation-delay:-2.4s;} .dc-float--fast{animation-duration:5s;animation-delay:-1.2s;} /* Marquee — contenu dupliqué 2× (deux .dc-marquee__group identiques) */ .dc-marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); } .dc-marquee__track{display:flex;width:max-content;animation:dc-marquee 28s linear infinite;} .dc-marquee__group{display:flex;align-items:center;gap:48px;padding-right:48px;flex:0 0 auto;} @keyframes dc-marquee{to{transform:translateX(-50%);}} /* ---------- 11. Mouvement réduit : tout visible, rien ne bouge ---------- */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} [data-reveal]{opacity:1 !important;transform:none !important;transition:none !important;} .dc-marquee__track,.dc-float,.dc-float--slow,.dc-float--fast{animation:none !important;} #bg-gradient{transform:none !important;} *,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;} } /* ---------- 12. Responsive ---------- */ @media (max-width:900px){ .dc-nav{gap:18px;} } @media (max-width:760px){ .dc-container{padding:0 20px;} .dc-header{padding:10px 12px;} .dc-header__bar{flex-wrap:wrap;row-gap:8px;padding:10px 14px;} .dc-nav{ position:static;transform:none; order:3;width:100%; justify-content:flex-start;gap:18px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; max-width:100%; } .dc-nav::-webkit-scrollbar{display:none;} .dc-nav a{white-space:nowrap;padding:4px 0;} .dc-section-head{flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:32px;} .dc-section-head .dc-eyebrow{order:-1;padding-bottom:0;} .dc-steps{grid-template-columns:1fr;} .dc-step{padding:24px 0;} .dc-step:first-child{padding-top:26px;} .dc-step + .dc-step{border-left:0;border-top:1px solid var(--dc-line);} .dc-cta{padding:56px 24px;} .dc-cta__actions{width:100%;} .dc-footer{margin-top:64px;} .dc-footer .dc-container{flex-direction:column;align-items:flex-start;gap:14px;} .dc-footer__links{width:100%;gap:16px 22px;} } @media (max-width:400px){ .dc-container{padding:0 16px;} .dc-header{padding:8px;} .dc-header__bar{padding:8px 10px;gap:8px;} .dc-brand{font-size:16px;gap:8px;} .dc-brand__full{height:22px;} .dc-badge{font-size:12px;padding:3px 7px;margin-left:0;} .dc-nav{gap:14px;} .dc-nav a{font-size:14px;} .dc-btn{padding:10px 14px;font-size:14px;min-height:40px;} .dc-header .dc-btn{padding:8px 12px;min-height:36px;} .dc-cta{padding:48px 18px;} .dc-cta__actions{flex-direction:column;align-items:stretch;} .dc-cta__actions .dc-btn{width:100%;min-height:44px;} .dc-footer__links{gap:12px 18px;} .dc-footer__links a{font-size:13px;} }