/* ========================================================================== NEXAP — design system du site -------------------------------------------------------------------------- Sombre par défaut, clair au choix. Le sombre n'est pas un thème alternatif : c'est celui de l'application, et un site qui s'ouvre en blanc éclatant pour présenter une app noire ment sur ce qu'on va installer. Le thème se choisit par [data-theme] sur ; sans choix, on suit le système. Aucune couleur n'est définie une seule fois dans un media query. ========================================================================== */ :root { color-scheme: dark; /* Marque — le même orange que l'app (tokens.css). */ --brand: #d97a1e; --brand-2: #ff8c42; --brand-ink: #ff9d5c; --brand-glow: rgba(217, 122, 30, 0.35); /* Fonds : trois profondeurs, pas plus. Au-delà, la hiérarchie se dilue. */ --bg: #08080a; --bg-1: #0d0d10; --bg-2: #131317; --ink: #ffffff; --ink-2: rgba(255, 255, 255, 0.70); --ink-3: rgba(255, 255, 255, 0.46); --ink-4: rgba(255, 255, 255, 0.26); /* Verre : un voile, une bordure, une lumière rasante. C'est tout ce qui fait le « liquid glass » — le reste (ombres épaisses, dégradés saturés) le transforme en plastique. */ --glass: rgba(255, 255, 255, 0.035); --glass-2: rgba(255, 255, 255, 0.06); --stroke: rgba(255, 255, 255, 0.09); --stroke-2: rgba(255, 255, 255, 0.16); --sheen: rgba(255, 255, 255, 0.10); --shadow: 0 24px 60px rgba(0, 0, 0, 0.55); --lime: #a3e635; --amber: #fbbf24; --blue: #60a5fa; --violet: #a78bfa; --r-sm: 10px; --r: 16px; --r-lg: 22px; --r-xl: 30px; --w: 1160px; --gut: 24px; --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-display: "DM Sans", var(--font); --ease: cubic-bezier(0.22, 1, 0.36, 1); } :root[data-theme="light"] { color-scheme: light; --bg: #ffffff; --bg-1: #fbfbfc; --bg-2: #f4f4f6; --ink: #0a0a0c; --ink-2: rgba(10, 10, 12, 0.72); --ink-3: rgba(10, 10, 12, 0.52); --ink-4: rgba(10, 10, 12, 0.32); --brand-ink: #b8621a; --glass: rgba(10, 10, 12, 0.025); --glass-2: rgba(10, 10, 12, 0.05); --stroke: rgba(10, 10, 12, 0.09); --stroke-2: rgba(10, 10, 12, 0.16); --sheen: rgba(255, 255, 255, 0.9); --shadow: 0 18px 44px rgba(10, 10, 12, 0.10); } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]):not([data-theme="light"]) { color-scheme: light; --bg: #ffffff; --bg-1: #fbfbfc; --bg-2: #f4f4f6; --ink: #0a0a0c; --ink-2: rgba(10,10,12,.72); --ink-3: rgba(10,10,12,.52); --ink-4: rgba(10,10,12,.32); --brand-ink: #b8621a; --glass: rgba(10,10,12,.025); --glass-2: rgba(10,10,12,.05); --stroke: rgba(10,10,12,.09); --stroke-2: rgba(10,10,12,.16); --sheen: rgba(255,255,255,.9); --shadow: 0 18px 44px rgba(10,10,12,.10); } } /* --- Base ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* Halo de marque en haut de page : il pose l'ambiance sans peser sur le texte. */ body::before { content: ""; position: fixed; inset: -20% -20% auto -20%; height: 70vh; background: radial-gradient(60% 50% at 50% 0%, var(--brand-glow), transparent 70%); opacity: 0.5; pointer-events: none; z-index: 0; } :root[data-theme="light"] body::before { opacity: 0.22; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 760; letter-spacing: -0.028em; line-height: 1.1; margin: 0; } p { margin: 0; } ::selection { background: var(--brand); color: #fff; } .wrap { width: 100%; max-width: var(--w); margin: 0 auto; padding: 0 var(--gut); position: relative; z-index: 1; } .stack > * + * { margin-top: 18px; } .muted { color: var(--ink-3); } .lead { font-size: 19px; line-height: 1.6; color: var(--ink-2); } /* --- En-tête ------------------------------------------------------------- */ .hdr { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--stroke); } .hdr-in { display: flex; align-items: center; gap: 20px; height: 62px; } .logo { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 800; font-size: 17px; letter-spacing: -0.02em; } .logo svg { width: 26px; height: 26px; border-radius: 7px; } .nav { display: none; gap: 4px; margin-left: 6px; } @media (min-width: 900px) { .nav { display: flex; } } .nav a { padding: 7px 12px; border-radius: 9px; font-size: 14.5px; font-weight: 520; color: var(--ink-2); transition: 160ms var(--ease); } .nav a:hover { color: var(--ink); background: var(--glass-2); } .hdr-end { margin-left: auto; display: flex; align-items: center; gap: 8px; } .icon-btn { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--stroke); background: var(--glass); color: var(--ink-2); cursor: pointer; transition: 160ms var(--ease); } .icon-btn:hover { color: var(--ink); border-color: var(--stroke-2); } .icon-btn svg { width: 16px; height: 16px; } .lang { font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em; width: auto; padding: 0 10px; } /* --- Boutons ------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 8px; justify-content: center; padding: 11px 20px; border-radius: 12px; font-size: 15px; font-weight: 650; border: 1px solid transparent; cursor: pointer; transition: 200ms var(--ease); white-space: nowrap; } .btn-primary { background: linear-gradient(180deg, var(--brand-2), var(--brand)); color: #fff; box-shadow: 0 1px 0 var(--sheen) inset, 0 8px 24px var(--brand-glow); } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 1px 0 var(--sheen) inset, 0 12px 30px var(--brand-glow); } .btn-ghost { background: var(--glass); border-color: var(--stroke); color: var(--ink); } .btn-ghost:hover { border-color: var(--stroke-2); background: var(--glass-2); } .btn-lg { padding: 14px 26px; font-size: 16px; border-radius: 14px; } /* --- Verre --------------------------------------------------------------- */ .glass { position: relative; background: linear-gradient(180deg, var(--glass-2), var(--glass)); border: 1px solid var(--stroke); border-radius: var(--r-lg); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); box-shadow: 0 1px 0 var(--sheen) inset; } /* Le reflet du bord haut : une ligne de lumière de 1 px, pas un dégradé. */ .glass::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,.06), transparent 38%); } :root[data-theme="light"] .glass::after { background: linear-gradient(180deg, rgba(255,255,255,.9), transparent 40%); } /* --- Sections ------------------------------------------------------------ */ .sec { padding: 84px 0; } .sec-sm { padding: 56px 0; } .eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--brand-ink); margin-bottom: 14px; } .eyebrow::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--brand-2); } h1 { font-size: clamp(38px, 6.4vw, 66px); } h2 { font-size: clamp(28px, 3.8vw, 42px); } h3 { font-size: 19px; letter-spacing: -0.018em; } .sec-head { max-width: 680px; margin-bottom: 44px; } .sec-head p { margin-top: 14px; } /* --- Grilles ------------------------------------------------------------- */ .grid { display: grid; gap: 18px; align-items: start; } .g2 { grid-template-columns: 1fr; } .g3 { grid-template-columns: 1fr; } .g4 { grid-template-columns: repeat(2, 1fr); } @media (min-width: 760px) { .g2 { grid-template-columns: repeat(2, 1fr); } .g3 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .g3 { grid-template-columns: repeat(3, 1fr); } .g4 { grid-template-columns: repeat(4, 1fr); } } /* --- Widget : la capture dans son cadre --------------------------------- */ .widget { padding: 22px; overflow: hidden; } .widget-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; } .widget-ico { width: 38px; height: 38px; flex: none; border-radius: 11px; display: grid; place-items: center; background: linear-gradient(180deg, rgba(255,140,66,.20), rgba(217,122,30,.10)); border: 1px solid rgba(217,122,30,.28); color: var(--brand-ink); } .widget-ico svg { width: 18px; height: 18px; } .widget h3 + p { margin-top: 5px; color: var(--ink-3); font-size: 14.5px; line-height: 1.55; } .shot { margin: 0 auto; max-width: 268px; } .shot img { width: 100%; border-radius: 26px; border: 1px solid var(--stroke-2); box-shadow: var(--shadow); background: #000; } /* Capture rognée en haut de cadre : la carte garde sa hauteur, l'image déborde vers le bas et se fond. On ne coupe jamais au milieu d'un chiffre. */ .shot-crop { position: relative; height: 330px; overflow: hidden; } .shot-crop img { position: absolute; inset: 0 0 auto 0; } .shot-crop::after { content: ""; position: absolute; inset: auto 0 0 0; height: 96px; pointer-events: none; background: linear-gradient(180deg, transparent, var(--bg-1)); } /* --- Héros --------------------------------------------------------------- */ .hero { padding: 74px 0 40px; text-align: center; } .hero h1 { margin: 0 auto; max-width: 15ch; } .hero .lead { margin: 22px auto 0; max-width: 58ch; } .hero-cta { margin-top: 30px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .hero-note { margin-top: 16px; font-size: 13.5px; color: var(--ink-4); } .hero-shots { margin-top: 56px; display: flex; justify-content: center; align-items: flex-end; gap: 20px; } .hero-shots .shot { max-width: 232px; } .hero-shots .shot:nth-child(2) { max-width: 268px; margin-bottom: -22px; } .hero-shots .shot:nth-child(1), .hero-shots .shot:nth-child(3) { display: none; } @media (min-width: 860px) { .hero-shots .shot:nth-child(1), .hero-shots .shot:nth-child(3) { display: block; opacity: .82; } } /* --- Liste de chiffres --------------------------------------------------- */ .kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--stroke); border: 1px solid var(--stroke); border-radius: var(--r-lg); overflow: hidden; } @media (min-width: 760px) { .kpis { grid-template-columns: repeat(4, 1fr); } } .kpi { background: var(--bg); padding: 24px 20px; } .kpi b { display: block; font-family: var(--font-display); font-size: 30px; font-weight: 780; letter-spacing: -0.03em; } .kpi span { font-size: 13.5px; color: var(--ink-3); } /* --- Listes de liens (métiers, villes, docs) ----------------------------- */ .links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } @media (min-width: 760px) { .links { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1000px) { .links { grid-template-columns: repeat(4, 1fr); } } .links a { padding: 11px 14px; border-radius: 11px; border: 1px solid var(--stroke); background: var(--glass); font-size: 14.5px; color: var(--ink-2); transition: 160ms var(--ease); display: flex; align-items: center; gap: 8px; } .links a:hover { color: var(--ink); border-color: var(--stroke-2); background: var(--glass-2); } /* --- Prose (guides, docs, légal) ---------------------------------------- */ .prose { max-width: 760px; font-size: 16.5px; color: var(--ink-2); } /* Les titres de prose ne suivent PAS l'échelle des titres de section : dans un article, un h2 de 42 px écrase le paragraphe qu'il annonce. */ .prose h2 { margin: 40px 0 12px; color: var(--ink); font-size: 24px; } .prose h3 { margin: 28px 0 9px; color: var(--ink); font-size: 18px; } .prose p + p { margin-top: 14px; } .prose ul, .prose ol { margin: 14px 0; padding-left: 22px; } .prose li + li { margin-top: 7px; } .prose strong { color: var(--ink); font-weight: 650; } .prose a { color: var(--brand-ink); text-decoration: underline; text-underline-offset: 3px; } .prose code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; padding: 2px 6px; border-radius: 6px; background: var(--glass-2); border: 1px solid var(--stroke); } .note { border-left: 2px solid var(--brand); padding: 12px 0 12px 16px; color: var(--ink-2); margin: 22px 0; } /* --- Documentation : sommaire + contenu --------------------------------- */ .doc-layout { display: grid; gap: 40px; grid-template-columns: 1fr; } @media (min-width: 1000px) { .doc-layout { grid-template-columns: 232px 1fr; } } .doc-nav { position: sticky; top: 84px; align-self: start; font-size: 14.5px; } .doc-nav h4 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-4); margin: 22px 0 8px; font-family: var(--font); font-weight: 700; } .doc-nav h4:first-child { margin-top: 0; } .doc-nav a { display: block; padding: 6px 10px; border-radius: 8px; color: var(--ink-3); } .doc-nav a:hover { color: var(--ink); background: var(--glass-2); } .doc-nav a[aria-current="page"] { color: var(--brand-ink); background: var(--glass-2); font-weight: 600; } /* --- FAQ ----------------------------------------------------------------- */ .faq details { border-bottom: 1px solid var(--stroke); padding: 18px 0; } .faq summary { cursor: pointer; font-weight: 620; font-size: 16.5px; list-style: none; display: flex; gap: 14px; align-items: baseline; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; margin-left: auto; color: var(--ink-4); font-size: 20px; line-height: 1; } .faq details[open] summary::after { content: "\2212"; } .faq p { margin-top: 12px; color: var(--ink-2); } /* --- Pied de page -------------------------------------------------------- */ /* ========================================================================== PIED DE PAGE — cinq colonnes, deux groupes empilés dans certaines -------------------------------------------------------------------------- Le titre de groupe est PETIT et effacé, le lien est GRAND et lisible : l'inverse de ce qu'on fait d'instinct. Un pied de page se parcourt du coin de l'œil, en cherchant un mot — ce sont les liens qu'il faut pouvoir attraper, pas les intitulés qui les rangent. ========================================================================== */ .ftr { border-top: 1px solid var(--stroke); padding: 64px 0 34px; margin-top: 40px; } .ftr-top { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; margin-bottom: 52px; } .ftr-top .muted { font-size: 14.5px; max-width: 46ch; flex: 1 1 260px; } /* La pastille d'état : verte, discrète, cliquable. Elle rassure sans crier. */ .ftr-status { display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px 7px 12px; border-radius: 999px; border: 1px solid var(--stroke); background: var(--glass); font-size: 13.5px; color: var(--ink-2); white-space: nowrap; transition: border-color .2s var(--ease), color .2s var(--ease); } .ftr-status:hover { border-color: var(--stroke-2); color: var(--ink); } .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); flex: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--lime) 22%, transparent); } /* Le battement dit « en direct ». Coupé si la personne a demandé moins d'animation. */ @media (prefers-reduced-motion: no-preference) { .dot { animation: pulse 2.4s var(--ease) infinite; } } @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--lime) 22%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--lime) 6%, transparent); } } .dot.warn { background: var(--amber); box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 22%, transparent); animation: none; } .dot.down { background: #f87171; box-shadow: 0 0 0 3px rgba(248,113,113,.22); animation: none; } .ftr-nav { display: grid; gap: 40px 28px; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 700px) { .ftr-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1000px) { .ftr-nav { grid-template-columns: repeat(5, minmax(0, 1fr)); } } .ftr-col { display: flex; flex-direction: column; gap: 34px; min-width: 0; } .ftr h4 { font-family: var(--font); font-size: 11.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-4); margin-bottom: 16px; font-weight: 700; } .ftr ul { list-style: none; margin: 0; padding: 0; font-size: 15px; } .ftr li + li { margin-top: 13px; } .ftr a { color: var(--ink-3); transition: color .16s var(--ease); } .ftr a:hover { color: var(--ink); } .ftr-more { color: var(--brand-ink) !important; } .ftr-more:hover { opacity: .8; } .ftr-bot { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--stroke); display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: 13px; color: var(--ink-4); } .ftr-bot a { color: var(--ink-4); } .ftr-bot a:hover { color: var(--ink-2); } /* ========================================================================== TABLEAUX DES PAGES LÉGALES -------------------------------------------------------------------------- Un tableau de sous-traitants ne tient pas sur un téléphone. Plutôt que de le comprimer jusqu'à l'illisible, on le laisse défiler DANS son cadre — la page, elle, ne bouge pas d'un pixel. ========================================================================== */ .ltable-wrap { overflow-x: auto; margin: 22px 0; border: 1px solid var(--stroke); border-radius: var(--r); background: var(--glass); } .ltable { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 560px; } .ltable th, .ltable td { text-align: left; padding: 13px 16px; vertical-align: top; border-bottom: 1px solid var(--stroke); } .ltable th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-4); font-weight: 700; } .ltable tbody tr:last-child td { border-bottom: 0; } .ltable-cat td { background: var(--glass-2); font-size: 12px; text-transform: uppercase; letter-spacing: .09em; color: var(--brand-ink); font-weight: 700; } .ltable .muted { font-size: 13.5px; } .lserv { border-left: 2px solid var(--stroke-2); padding: 2px 0 2px 18px; margin: 18px 0 26px; } .lserv p { margin: 0 0 7px; font-size: 15px; line-height: 1.6; color: var(--ink-2); } .lserv a { color: var(--brand-ink); } /* ========================================================================== FORMULAIRE — support ========================================================================== */ .fform { display: grid; gap: 18px; } .frow { display: grid; gap: 18px; grid-template-columns: 1fr; } @media (min-width: 620px) { .frow { grid-template-columns: 1fr 1fr; } } .fld { display: flex; flex-direction: column; gap: 7px; min-width: 0; } .fld > span { font-size: 13.5px; color: var(--ink-2); font-weight: 600; } .fld input, .fld select, .fld textarea { font: inherit; font-size: 15.5px; color: var(--ink); background: var(--bg-2); border: 1px solid var(--stroke); border-radius: var(--r-sm); padding: 12px 14px; width: 100%; transition: border-color .16s var(--ease), box-shadow .16s var(--ease); -webkit-appearance: none; appearance: none; } .fld select { background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: right 18px center, right 13px center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 38px; cursor: pointer; } .fld textarea { resize: vertical; min-height: 148px; line-height: 1.6; } .fld input:focus, .fld select:focus, .fld textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow); } .fld input::placeholder, .fld textarea::placeholder { color: var(--ink-4); } /* Le pot de miel : hors du flux, hors du champ de tabulation, invisible aux lecteurs d'écran. Seul un robot qui lit le HTML le remplit. */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .fform button[type="submit"] { justify-self: start; } .fform button[disabled] { opacity: .55; cursor: progress; } .fmsg { border-radius: var(--r-sm); padding: 14px 16px; font-size: 14.5px; line-height: 1.6; display: none; } .fmsg.on { display: block; } .fmsg.ok { background: color-mix(in srgb, var(--lime) 12%, transparent); border: 1px solid color-mix(in srgb, var(--lime) 34%, transparent); color: var(--ink); } .fmsg.ko { background: rgba(248,113,113,.10); border: 1px solid rgba(248,113,113,.34); color: var(--ink); } .fnote { font-size: 13px; color: var(--ink-4); line-height: 1.6; } .fnote a { color: var(--ink-3); text-decoration: underline; text-underline-offset: 2px; } /* ========================================================================== ÉTAT DU SERVICE ========================================================================== */ .st-hero { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .st-big { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 760; letter-spacing: -.028em; font-size: clamp(24px, 3.4vw, 34px); } .st-big .dot { width: 12px; height: 12px; } .st-count { font-size: 14.5px; color: var(--ink-3); } .st-list { display: grid; gap: 0; border: 1px solid var(--stroke); border-radius: var(--r); overflow: hidden; background: var(--glass); } .st-row { display: flex; align-items: center; gap: 14px; padding: 15px 18px; border-bottom: 1px solid var(--stroke); } .st-row:last-child { border-bottom: 0; } .st-row b { font-weight: 620; font-size: 15px; } .st-row .st-d { color: var(--ink-3); font-size: 13.5px; margin-top: 2px; } .st-row > div:first-of-type { flex: 1; min-width: 0; } .st-badge { font-size: 12px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; padding: 5px 11px; border-radius: 999px; flex: none; background: color-mix(in srgb, var(--lime) 14%, transparent); border: 1px solid color-mix(in srgb, var(--lime) 32%, transparent); color: var(--ink); } .st-badge.wait { background: var(--glass-2); border-color: var(--stroke); color: var(--ink-3); } .st-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } .st-chip { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--stroke); border-radius: var(--r-sm); background: var(--glass); font-size: 14.5px; min-width: 0; } .st-chip span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .st-chip .dot { width: 7px; height: 7px; animation: none; } /* --- Fil d'Ariane -------------------------------------------------------- */ .crumbs { font-size: 13.5px; color: var(--ink-4); padding: 22px 0 0; } .crumbs a { color: var(--ink-3); } .crumbs a:hover { color: var(--ink); } /* --- Polices auto-hébergées : aucun appel à un CDN, donc aucune fuite d'IP vers un tiers, et une typo qui s'affiche même sur une 4G capricieuse. --- */ @font-face { font-family: "Inter"; src: url("/assets/fonts/inter-var-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; font-style: normal; } @font-face { font-family: "DM Sans"; src: url("/assets/fonts/dmsans-var-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; font-style: normal; } /* ========================================================================== HEADER — barre de navigation à menus déroulants -------------------------------------------------------------------------- Un site à 200 pages ne tient pas dans cinq liens : il faut des menus. Ils s'ouvrent au survol ET au focus clavier, et restent atteignables parce que la zone de survol couvre l'espace entre le lien et le panneau — sans ça, le menu se ferme dès qu'on descend la souris vers lui. ========================================================================== */ .hdr-in { height: 68px; gap: 8px; } .nav { gap: 2px; } .nav-item { position: relative; } .nav-item > a, .nav-item > button { display: inline-flex; align-items: center; gap: 5px; padding: 8px 12px; border-radius: 10px; font-size: 14.5px; font-weight: 540; color: var(--ink-2); background: none; border: 0; cursor: pointer; font-family: inherit; transition: 160ms var(--ease); } .nav-item > a:hover, .nav-item > button:hover, .nav-item:hover > button, .nav-item:focus-within > button { color: var(--ink); background: var(--glass-2); } .nav-item > button svg { width: 13px; height: 13px; opacity: .6; transition: transform 200ms var(--ease); } .nav-item:hover > button svg, .nav-item:focus-within > button svg { transform: rotate(180deg); } .drop { position: absolute; top: 100%; left: 0; padding-top: 10px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: 180ms var(--ease); z-index: 60; } .nav-item:hover .drop, .nav-item:focus-within .drop { opacity: 1; visibility: visible; transform: none; } .drop-in { background: color-mix(in srgb, var(--bg-1) 96%, transparent); border: 1px solid var(--stroke); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 14px; min-width: 300px; backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); } .drop-grid { display: grid; gap: 2px; grid-template-columns: 1fr; } .drop-grid.two { grid-template-columns: 1fr 1fr; min-width: 560px; } .drop-grid a { display: flex; gap: 11px; align-items: flex-start; padding: 9px 11px; border-radius: 11px; transition: 140ms var(--ease); } .drop-grid a:hover { background: var(--glass-2); } .drop-ico { width: 30px; height: 30px; flex: none; border-radius: 9px; display: grid; place-items: center; background: var(--glass-2); border: 1px solid var(--stroke); color: var(--brand-ink); } .drop-ico svg { width: 15px; height: 15px; } .drop-t { font-size: 14px; font-weight: 600; color: var(--ink); display: block; line-height: 1.35; } .drop-d { font-size: 12.5px; color: var(--ink-4); display: block; line-height: 1.4; margin-top: 1px; } .drop-foot { margin-top: 10px; padding-top: 11px; border-top: 1px solid var(--stroke); } .drop-foot a { font-size: 13.5px; color: var(--brand-ink); padding: 4px 11px; display: inline-block; } .btn-dark { background: var(--ink); color: var(--bg); border-color: var(--ink); padding: 9px 17px; font-size: 14.5px; border-radius: 11px; } .btn-dark:hover { opacity: .88; } .btn-sm { padding: 9px 17px; font-size: 14.5px; border-radius: 11px; } .lang-sel { display: inline-flex; align-items: center; gap: 6px; padding: 8px 11px; border-radius: 10px; border: 1px solid var(--stroke); background: var(--glass); font-size: 13.5px; font-weight: 600; color: var(--ink-2); } .lang-sel:hover { color: var(--ink); border-color: var(--stroke-2); } /* Burger — sous 900 px la navigation se replie dans un panneau. */ .burger { display: grid; } @media (min-width: 900px) { .burger { display: none; } } .mobile-nav { display: none; border-top: 1px solid var(--stroke); background: var(--bg-1); } .mobile-nav.open { display: block; } .mobile-nav .wrap { padding-top: 14px; padding-bottom: 18px; } .mobile-nav a { display: block; padding: 11px 2px; font-size: 15.5px; border-bottom: 1px solid var(--stroke); color: var(--ink-2); } .mobile-nav a:last-child { border-bottom: 0; } .hdr-end .btn-dark, .hdr-end .lang-sel { display: none; } @media (min-width: 700px) { .hdr-end .lang-sel { display: inline-flex; } } @media (min-width: 1080px) { .hdr-end .btn-dark { display: inline-flex; } } /* ========================================================================== HERO — accroche, capture d'e-mail, réassurances, puis la composition ========================================================================== */ .hero { padding: 66px 0 0; } .hero-proof { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--ink-3); margin-bottom: 22px; } .hero-proof b { color: var(--ink); font-weight: 620; } .hero-proof .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px color-mix(in srgb, var(--lime) 18%, transparent); } .hero h1 { max-width: 17ch; } .capture { margin: 30px auto 0; max-width: 520px; display: flex; gap: 8px; padding: 7px; border-radius: 999px; border: 1px solid var(--stroke); background: var(--glass); } .capture input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--ink); font: inherit; font-size: 15px; padding: 0 18px; } .capture input::placeholder { color: var(--ink-4); } @media (max-width: 560px) { .capture { flex-direction: column; border-radius: var(--r-lg); } .capture input { padding: 12px 16px; } } .reassure { margin-top: 16px; display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; font-size: 13.5px; color: var(--ink-3); } .reassure span { display: inline-flex; align-items: center; gap: 6px; } .reassure svg { width: 14px; height: 14px; color: var(--lime); } /* --- La composition : des panneaux qui se chevauchent, légèrement en biais - */ .compo { position: relative; margin-top: 60px; height: 420px; perspective: 1400px; -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent); mask-image: linear-gradient(180deg, #000 62%, transparent); } .compo-in { position: absolute; inset: 0; display: flex; justify-content: center; align-items: flex-start; gap: 26px; } .pane { border-radius: 24px; overflow: hidden; background: #000; border: 1px solid var(--stroke-2); box-shadow: 0 30px 70px rgba(0,0,0,.6), 0 1px 0 var(--sheen) inset; will-change: transform; } .pane img { display: block; width: 100%; } .pane-a { width: 236px; transform: translateY(58px) rotate(-3deg); animation: floatA 9s ease-in-out infinite; } .pane-b { width: 288px; transform: translateY(0); z-index: 2; animation: floatB 7.5s ease-in-out infinite; } .pane-c { width: 236px; transform: translateY(58px) rotate(3deg); animation: floatC 10s ease-in-out infinite; } @media (max-width: 900px) { .pane-a, .pane-c { display: none; } .compo { height: 360px; } } @keyframes floatA { 0%,100% { transform: translateY(58px) rotate(-3deg); } 50% { transform: translateY(44px) rotate(-2.2deg); } } @keyframes floatB { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } @keyframes floatC { 0%,100% { transform: translateY(58px) rotate(3deg); } 50% { transform: translateY(46px) rotate(2.2deg); } } /* Pastilles flottantes posées sur la composition : elles nomment ce qu'on voit. */ .chip { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--ink); background: color-mix(in srgb, var(--bg-1) 82%, transparent); border: 1px solid var(--stroke-2); box-shadow: var(--shadow); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); animation: chipIn .7s var(--ease) both; } .chip svg { width: 14px; height: 14px; color: var(--brand-2); } .chip-1 { left: 4%; top: 26%; animation-delay: .35s; } .chip-2 { right: 5%; top: 14%; animation-delay: .5s; } .chip-3 { left: 12%; bottom: 24%; animation-delay: .65s; } @media (max-width: 1000px) { .chip { display: none; } } @keyframes chipIn { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } } /* --- Apparition au défilement -------------------------------------------- */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .pane-a, .pane-b, .pane-c, .chip { animation: none; } .reveal { opacity: 1; transform: none; } } /* ========================================================================== WIDGET — la capture ENTIÈRE dans son cadre, jamais un rognage au hasard -------------------------------------------------------------------------- La version précédente coupait chaque capture à 330 px du haut. Sur un écran dont le contenu utile est au milieu (une feuille modale, un total), on ne voyait qu'une barre d'état et un flou. On montre donc l'écran EN ENTIER, posé dans un cadre, et la carte s'adapte. ========================================================================== */ .widget { padding: 20px 20px 0; display: flex; flex-direction: column; } .widget-body { padding-bottom: 20px; } .shot { max-width: 100%; } .frame { margin: 18px auto -1px; width: 208px; border-radius: 26px 26px 0 0; border: 1px solid var(--stroke-2); border-bottom: 0; overflow: hidden; background: #000; box-shadow: 0 -1px 0 var(--sheen) inset, 0 22px 50px rgba(0,0,0,.5); position: relative; } .frame img { display: block; width: 100%; } /* Le bas de l'écran se fond dans la carte : la capture ne s'arrête pas sur une ligne franche, elle plonge. */ .frame::after { content: ""; position: absolute; inset: auto 0 0 0; height: 70px; background: linear-gradient(180deg, transparent, var(--bg-1)); pointer-events: none; } :root[data-theme="light"] .frame::after { background: linear-gradient(180deg, transparent, #fff); } /* --- Correctifs de composition ------------------------------------------- */ /* Les pastilles passaient SOUS l'écran du milieu (qui porte un z-index) : on les remonte, sinon deux des trois disparaissent selon la largeur. */ .chip { z-index: 3; } .chip-1 { left: 2%; top: 30%; } .chip-2 { right: 2%; top: 20%; } .chip-3 { left: 8%; bottom: 30%; } /* Le drapeau et le code langue sur une seule ligne : l'emoji poussait « FR » à la ligne et le bouton doublait de hauteur. */ .lang-sel { white-space: nowrap; gap: 5px; } .lang-sel svg { width: 12px; height: 12px; opacity: .55; } /* --- Cadrage des captures ------------------------------------------------ */ /* Un écran d'iPhone entier fait 450 px de haut dans une carte : trois cartes côte à côte et la page devient un couloir. On borne, et on cadre selon l'endroit où vit l'information — en haut pour une liste, en bas pour une feuille modale. Le dégradé du bas fait le reste. */ .frame { height: 372px; } .frame img { height: 100%; object-fit: cover; object-position: top center; } .frame.at-bottom img { object-position: bottom center; } .frame.at-center img { object-position: center; } /* ========================================================================== ÉLÉMENTS D'INTERFACE — les cartes de l'app, pas des téléphones entiers -------------------------------------------------------------------------- Un écran d'iPhone dans une carte de site, c'est 1206 × 2622 px ramenés à 208 px de large : il faut le rogner ou le comprimer, et dans les deux cas l'information devient illisible. On montre donc l'ÉLÉMENT — la carte de chiffre d'affaires, la liste de documents, l'anneau — découpé à son bord naturel, affiché à sa proportion exacte. `height:auto` : jamais d'étirement. ========================================================================== */ .el { margin-top: 18px; border-radius: 14px; overflow: hidden; border: 1px solid var(--stroke); background: #0b0b0d; box-shadow: 0 14px 34px rgba(0,0,0,.4); } .el img { display: block; width: 100%; height: auto; } .widget { padding: 20px; } .widget-body { padding-bottom: 0; } /* La composition du hero reprend les mêmes éléments, en trois colonnes qui flottent. Plus de téléphones tronqués par un masque. */ .compo { height: auto; margin-top: 54px; -webkit-mask-image: none; mask-image: none; } .compo-in { position: static; display: grid; grid-template-columns: 1fr; gap: 18px; max-width: 1000px; margin: 0 auto; align-items: start; } @media (min-width: 860px) { .compo-in { grid-template-columns: 1fr 1.15fr 1fr; gap: 20px; align-items: center; } } .pane { border-radius: 18px; border: 1px solid var(--stroke-2); background: #0b0b0d; width: auto; } .pane img { width: 100%; height: auto; } .pane-a { transform: translateY(0) rotate(-1.4deg); animation: eA 9s ease-in-out infinite; } .pane-b { transform: none; animation: eB 7.5s ease-in-out infinite; } .pane-c { transform: translateY(0) rotate(1.4deg); animation: eC 10s ease-in-out infinite; } @media (max-width: 860px) { .pane-a, .pane-c { display: none; } } @keyframes eA { 0%,100% { transform: translateY(0) rotate(-1.4deg); } 50% { transform: translateY(-10px) rotate(-1deg); } } @keyframes eB { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } @keyframes eC { 0%,100% { transform: translateY(0) rotate(1.4deg); } 50% { transform: translateY(-10px) rotate(1deg); } } .chip-1 { left: 0; top: 8%; } .chip-2 { right: 0; top: 4%; } .chip-3 { left: 4%; bottom: 8%; } /* ========================================================================== RECHERCHE — un index construit au build, filtré dans le navigateur -------------------------------------------------------------------------- Aucun serveur : l'index (titres, résumés, questions) fait quelques dizaines de kilo-octets et se charge à la première frappe. Une recherche qui exige un backend est une recherche qui tombe en panne un jour de mise à jour. ========================================================================== */ .search { position: relative; margin: 26px 0 8px; } .search-in { display: flex; align-items: center; gap: 11px; padding: 13px 18px; border-radius: 14px; border: 1px solid var(--stroke); background: var(--glass); transition: 160ms var(--ease); } .search-in:focus-within { border-color: var(--brand-2); background: var(--glass-2); } .search-in svg { width: 17px; height: 17px; color: var(--ink-4); flex: none; } .search input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--ink); font: inherit; font-size: 15.5px; } .search input::placeholder { color: var(--ink-4); } .search kbd { font: inherit; font-size: 11.5px; padding: 3px 7px; border-radius: 6px; border: 1px solid var(--stroke); color: var(--ink-4); background: var(--glass-2); } .search-out { margin-top: 10px; display: none; } .search-out.on { display: block; } .search-hit { display: block; padding: 13px 16px; border-radius: 12px; border: 1px solid var(--stroke); background: var(--bg-1); margin-bottom: 7px; transition: 140ms var(--ease); } .search-hit:hover { border-color: var(--stroke-2); background: var(--glass-2); } .search-hit b { display: block; font-size: 15px; color: var(--ink); font-weight: 620; } .search-hit span { display: block; font-size: 13px; color: var(--ink-3); margin-top: 3px; } .search-hit em { font-style: normal; color: var(--brand-ink); } .search-tag { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-4); } .search-none { padding: 16px; color: var(--ink-3); font-size: 14.5px; } /* --- Questions ----------------------------------------------------------- */ .qcats { display: flex; gap: 8px; flex-wrap: wrap; margin: 22px 0 8px; } .qcat { padding: 8px 15px; border-radius: 999px; font-size: 13.5px; font-weight: 560; border: 1px solid var(--stroke); background: var(--glass); color: var(--ink-3); cursor: pointer; font-family: inherit; transition: 140ms var(--ease); } .qcat:hover { color: var(--ink); border-color: var(--stroke-2); } .qcat[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #fff; } .qgroup { margin-top: 34px; } .qgroup > h2 { font-size: 21px; margin-bottom: 6px; } /* --- Blog ---------------------------------------------------------------- */ .post-card { display: block; padding: 22px; } .post-card .meta { font-size: 12.5px; color: var(--ink-4); display: flex; gap: 10px; align-items: center; } .post-card h3 { margin-top: 10px; font-size: 20px; line-height: 1.28; } .post-card p { margin-top: 9px; font-size: 14.5px; color: var(--ink-3); line-height: 1.55; } .post-head { max-width: 760px; } .post-head .meta { font-size: 13.5px; color: var(--ink-4); display: flex; gap: 12px; margin-bottom: 18px; } .post-body { max-width: 760px; } .toc { margin: 26px 0 8px; padding: 16px 20px; border-radius: 14px; border: 1px solid var(--stroke); background: var(--glass); } .toc h4 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-4); margin-bottom: 9px; font-family: var(--font); font-weight: 700; } .toc a { display: block; padding: 4px 0; font-size: 14.5px; color: var(--ink-3); } .toc a:hover { color: var(--brand-ink); } /* --- Étapes (HowTo) ------------------------------------------------------ */ .steps { counter-reset: s; display: grid; gap: 14px; } .step { position: relative; padding: 18px 20px 18px 60px; border-radius: var(--r); border: 1px solid var(--stroke); background: var(--glass); } .step::before { counter-increment: s; content: counter(s); position: absolute; left: 18px; top: 17px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; background: var(--brand-l); border: 1px solid rgba(217,122,30,.3); color: var(--brand-ink); font-size: 13.5px; font-weight: 700; } .step b { display: block; font-size: 15.5px; font-weight: 620; } .step span { display: block; margin-top: 4px; font-size: 14px; color: var(--ink-3); line-height: 1.55; } /* --- Jamais au-delà de la taille native ---------------------------------- */ /* Un élément exporté à 820 px affiché sur 1160 px, c'est un agrandissement : le texte de l'app devient flou. On borne à sa largeur réelle, et la colonne de droite des pages fonctionnalité reprend sa place. */ .el { max-width: 820px; margin-left: auto; margin-right: auto; } .feat-split { align-items: center; } @media (min-width: 900px) { .feat-split { grid-template-columns: 1fr 1fr; } } .feat-split .el { max-width: 100%; } .post-body .el, .prose + .el { max-width: 700px; } .doc-layout .el { max-width: 520px; margin-left: 0; }