/* Diagnostic CRA — aligné sur la GUI du site adnt.io. Mêmes tokens que le site : Inter, accent cyan brand, neutres ink-slate, et le MÊME thème clair/sombre, piloté par (cf. layout.php, localStorage 'theme' partagé avec le site). Police Inter chargée en dans layout.php, comme le site. */ :root { /* ---- Thème CLAIR (défaut, identique au site) — neutres « ink » (slate) ---- */ --bg: #ffffff; --bg-soft: #f8fafc; /* ink-50 */ --card: #ffffff; --card-elev: #f1f5f9; /* ink-100 */ --ink: #0f172a; /* ink-900 */ --ink-soft: #334155; /* ink-700 */ --muted: #475569; /* ink-600 */ --faint: #64748b; /* ink-500 */ --rule: rgba(15,23,42,0.10); --rule-strong: rgba(15,23,42,0.16); /* Accent « brand » (cyan). En clair, le texte accent est foncé (contraste), comme les liens du site (brand-600/700). */ --cyan: #0891b2; /* brand-600 */ --blue: #0e7490; /* brand-700 */ --deep: #020617; /* texte sombre sur aplat cyan — identique aux deux thèmes */ --warm: #b45309; --alert: #dc2626; --good: #0891b2; --grad: linear-gradient(135deg, #22d3ee 0%, #0e7490 100%); --grad-soft: linear-gradient(135deg, rgba(34,211,238,0.18) 0%, rgba(14,116,144,0.18) 100%); --font: 'Inter', system-ui, sans-serif; --mono: 'JetBrains Mono', ui-monospace, monospace; --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 22px; --r-pill: 999px; } /* ---- Thème SOMBRE — (même mécanisme et même clé que le site) ---- */ html.dark { --bg: #020617; /* ink-950 */ --bg-soft: #0b1322; --card: #0f172a; /* ink-900 */ --card-elev: #1e293b; /* ink-800 */ --ink: #f1f5f9; /* ink-100 */ --ink-soft: #cbd5e1; /* ink-300 */ --muted: #94a3b8; /* ink-400 */ --faint: #64748b; /* ink-500 */ --rule: rgba(148,163,184,0.14); --rule-strong: rgba(148,163,184,0.24); --cyan: #22d3ee; /* brand-400 */ --warm: #ffb648; --alert: #ff5b6c; --good: #22d3ee; } * { box-sizing: border-box; } html, body { background: var(--bg); } body { margin: 0; font-family: var(--font); font-feature-settings: 'ss01', 'cv11'; color: var(--ink); line-height: 1.55; -webkit-font-smoothing: antialiased; position: relative; min-height: 100vh; } /* glow mesh en haut */ body::before { content: ''; position: fixed; inset: 0 0 auto 0; height: 560px; pointer-events: none; z-index: 0; background: radial-gradient(ellipse at 50% 0%, rgba(34,211,238,0.16) 0%, rgba(14,116,144,0.07) 35%, rgba(0,0,0,0) 70%); } a { color: var(--cyan); text-decoration: none; } a:hover { text-decoration: underline; } code, .mono { font-family: var(--mono); } code { background: rgba(100,116,139,0.15); padding: 1px 6px; border-radius: 6px; font-size: .88em; color: var(--ink-soft); } /* Topbar */ .topbar { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 18px 24px; border-bottom: 1px solid var(--rule); } .brand { font-weight: 700; font-size: 1.1rem; letter-spacing: -.025em; display: flex; align-items: center; gap: 10px; } .brand img, .brand-logo svg { height: 26px; width: auto; display: block; } .brand-logo { display: inline-flex; color: var(--ink); } .brand .grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .topbar-right { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .tagline { color: var(--muted); font-size: .82rem; } .langsel { display: inline-flex; gap: 2px; border: 1px solid var(--rule); border-radius: var(--r-pill); padding: 3px; background: var(--card); } .langsel a { padding: 4px 11px; border-radius: var(--r-pill); font-size: .78rem; font-weight: 600; color: var(--muted); text-decoration: none; letter-spacing: .03em; transition: background .12s, color .12s; } .langsel a:hover { color: var(--ink); text-decoration: none; } .langsel a.on { background: var(--grad); color: var(--deep); } /* Bascule clair/sombre — même comportement/clé que le site (icône lune en clair, soleil en sombre) */ .theme-toggle { display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--card); color: var(--muted); cursor: pointer; transition: color .12s, border-color .12s; } .theme-toggle:hover { color: var(--cyan); border-color: var(--rule-strong); } .theme-toggle svg { width: 18px; height: 18px; display: block; } .theme-toggle .sun { display: none; } html.dark .theme-toggle .sun { display: block; } html.dark .theme-toggle .moon { display: none; } .wrap { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; padding: 30px 18px 70px; } /* Étapes */ .steps { list-style: none; display: flex; gap: 8px; padding: 0; margin: 0 0 26px; flex-wrap: wrap; } .steps li { display: flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--muted); padding: 6px 14px; border-radius: var(--r-pill); background: var(--card); border: 1px solid var(--rule); } .steps .num { width: 20px; height: 20px; border-radius: 50%; background: rgba(100,116,139,0.16); color: var(--muted); display: grid; place-items: center; font-weight: 600; font-size: .72rem; } .steps .cur { border-color: rgba(34,211,238,0.5); color: var(--ink); } .steps .cur .num { background: var(--grad); color: var(--deep); } .steps .done { color: var(--ink-soft); } .steps .done .num { background: rgba(34,211,238,0.2); color: var(--cyan); } /* Carte */ .card { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-xl); padding: 34px; box-shadow: 0 16px 48px -24px rgba(2,6,23,0.22); } h1 { font-size: 2rem; line-height: 1.08; letter-spacing: -.035em; font-weight: 600; margin: 0 0 12px; text-wrap: balance; } h2 { font-size: 1.2rem; letter-spacing: -.02em; margin: 28px 0 12px; font-weight: 600; } .grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .lede { color: var(--muted); font-size: 1.02rem; margin: 0 0 24px; text-wrap: pretty; } /* Pill */ .pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--r-pill); border: 1px solid rgba(34,211,238,0.5); color: var(--cyan); font-size: .72rem; font-weight: 500; letter-spacing: .04em; margin-bottom: 16px; } /* Champs */ .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } label { display: block; font-weight: 500; font-size: .9rem; } label.full { grid-column: 1 / -1; } .field { display: block; background: var(--card-elev); border: 1px solid var(--rule); border-radius: var(--r-lg); padding: 12px 16px; } .field .flab { font-size: .72rem; font-weight: 500; color: var(--muted); letter-spacing: .03em; margin-bottom: 5px; } .field .flab .req { color: var(--cyan); } input[type=text], input[type=email], input[type=tel] { width: 100%; border: none; background: transparent; color: var(--ink); font-size: 1.05rem; font-family: inherit; font-weight: 500; padding: 0; } input::placeholder { color: var(--faint); font-weight: 400; } input:focus { outline: none; } .field:focus-within { border-color: rgba(34,211,238,0.5); box-shadow: 0 0 0 3px rgba(34,211,238,0.08); } small { display: block; color: var(--faint); font-weight: 400; margin-top: 7px; font-size: .8rem; } /* Boutons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; border: none; border-radius: var(--r-lg); padding: 0 26px; height: 54px; font-size: 1rem; font-weight: 600; font-family: inherit; letter-spacing: -.005em; text-decoration: none; transition: transform .12s ease, filter .15s ease; } .btn:hover { text-decoration: none; } .btn:active { transform: translateY(1px); } .btn.primary { background: var(--grad); color: var(--deep); box-shadow: 0 8px 24px -8px rgba(34,211,238,0.35); } .btn.primary:hover { filter: brightness(1.06); } .btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--rule-strong); } .btn.ghost:hover { background: rgba(100,116,139,0.10); } .actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 26px; } .btn.primary[type=submit], form .btn.primary { margin-top: 24px; } /* Dans une barre d'actions, les boutons partagent la marge du conteneur. Sélecteur renforcé pour battre `.btn.primary[type=submit]` / `form .btn.primary`. */ .actions .btn, .actions .btn.primary, .actions .btn.primary[type=submit] { margin-top: 0; } .legal, .foot { color: var(--faint); font-size: .8rem; line-height: 1.55; } .legal { margin-top: 18px; } .consent { display: flex; align-items: flex-start; gap: 11px; margin-top: 20px; background: var(--card-elev); border: 1px solid var(--rule); border-radius: var(--r-md); padding: 14px 16px; font-size: .9rem; color: var(--ink-soft); font-weight: 400; cursor: pointer; } .consent input { width: 20px; height: 20px; margin: 1px 0 0; flex-shrink: 0; accent-color: var(--cyan); cursor: pointer; } .consent .req { color: var(--cyan); } /* Notice « que faisons-nous de vos données » — repliée par défaut, ouverte au clic. */ .privacy { margin: 8px 2px 0; font-size: .85rem; } .privacy summary { color: var(--cyan); cursor: pointer; width: fit-content; } .privacy-body { margin-top: 10px; color: var(--muted); } .privacy-body ul { margin: 0; padding-left: 18px; } .privacy-body li { margin: 6px 0; } .privacy-body a { color: var(--cyan); } /* Alertes */ .alert-box { border-radius: var(--r-md); padding: 13px 16px; margin-bottom: 20px; border: 1px solid; } .alert-box ul { margin: 0; padding-left: 18px; } .alert-box.err { background: rgba(255,91,108,0.08); color: #ffb3bb; border-color: rgba(255,91,108,0.4); } /* Résultat scan */ .result { border-radius: var(--r-lg); padding: 20px; margin: 20px 0; border: 1px solid var(--rule); background: var(--card-elev); } .result.ok { border-color: rgba(34,211,238,0.35); background: rgba(34,211,238,0.06); } .result.ko { border-color: rgba(255,91,108,0.35); background: rgba(255,91,108,0.06); } .result.compact { padding: 14px 18px; } .badge { display: inline-flex; align-items: center; font-weight: 600; padding: 5px 14px; border-radius: var(--r-pill); margin-bottom: 10px; font-size: .85rem; } .badge.ok { background: var(--grad); color: var(--deep); } .badge.ko { background: var(--alert); color: #fff; } details summary { cursor: pointer; color: var(--cyan); font-size: .88rem; } pre { background: #060a10; color: var(--ink-soft); padding: 14px; border-radius: var(--r-md); overflow: auto; font-size: .8rem; font-family: var(--mono); border: 1px solid var(--rule); } /* Bloc échéance */ .deadline { border: 1px solid rgba(255,182,72,0.4); background: rgba(255,182,72,0.06); border-radius: var(--r-lg); padding: 24px; margin: 22px 0; } .deadline h2 { margin-top: 0; color: var(--warm); } .checklist { padding-left: 4px; list-style: none; } .checklist li { margin: 9px 0; padding-left: 26px; position: relative; } .checklist li::before { content: '→'; position: absolute; left: 0; color: var(--cyan); font-weight: 700; } .warn { color: var(--alert); font-weight: 600; } /* Questions */ .product .field { max-width: 460px; } .qsection { border: 1px solid var(--rule); border-radius: var(--r-lg); padding: 8px 22px 18px; margin: 24px 0; background: var(--bg-soft); } .qsection legend { font-weight: 600; padding: 0 10px; color: var(--cyan); font-size: .95rem; } .question { padding: 18px 0; border-bottom: 1px solid var(--rule); } .question:last-child { border-bottom: none; } .qref { font-family: var(--mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); margin: 0 0 6px; } .qprompt { font-weight: 500; margin: 0 0 8px; color: var(--ink); } .qhelp summary { font-size: .82rem; } .qhelp p { font-size: .86rem; color: var(--muted); margin: 8px 0; } .answers { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; } .ans { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; cursor: pointer; font-size: .92rem; border: 1px solid var(--rule-strong); border-radius: var(--r-pill); padding: 9px 18px; background: var(--card-elev); color: var(--ink-soft); transition: border-color .12s, background .12s; } .ans input { accent-color: var(--cyan); } .ans:has(input:checked) { border-color: rgba(34,211,238,0.6); background: rgba(34,211,238,0.1); color: var(--ink); } .ans:has(input:disabled) { opacity: .4; cursor: not-allowed; } .consent.optin { margin-top: 22px; } .deep-audit { color: var(--muted); font-size: .92rem; margin: 14px 0 18px; padding: 12px 16px; border-radius: var(--r-md); border: 1px solid var(--rule); background: var(--card-elev); } .deep-audit.on { color: var(--ink); border-color: rgba(34,211,238,0.4); background: rgba(34,211,238,0.06); font-weight: 600; } /* Choix unique (rôle, catégorie) : options empilées, plus lisibles */ .answers.single { flex-direction: column; align-items: stretch; gap: 8px; } .answers.single .ans { border-radius: var(--r-md); padding: 11px 16px; justify-content: flex-start; } /* Section neutralisée par le branchement « mise sur le marché UE » */ .qsection.gated-off { opacity: .4; } .qsection.gated-off .question { pointer-events: none; } .alert-box.stop { background: rgba(255,182,72,0.1); color: var(--warm); border-color: rgba(255,182,72,0.5); font-weight: 600; } /* Verdict */ .verdict { border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden; margin: 18px 0; background: var(--card-elev); } .vrow { display: grid; grid-template-columns: 190px 1fr; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--rule); } .vrow:last-child { border-bottom: none; } .vlabel { color: var(--muted); font-weight: 500; font-size: .82rem; letter-spacing: .02em; } .vvalue { font-weight: 600; color: var(--ink); } .scope-in { background: rgba(255,91,108,0.08); } .scope-in .vvalue { color: var(--alert); } .scope-out { background: rgba(34,211,238,0.08); } .scope-out .vvalue { color: var(--cyan); } .class-critical .vvalue, .class-important_ii .vvalue { color: var(--warm); } .vrow.route .vvalue { font-weight: 400; color: var(--ink-soft); } .notes ul { padding-left: 4px; list-style: none; } .notes li { margin: 9px 0; padding-left: 24px; position: relative; color: var(--ink-soft); } .notes li::before { content: '!'; position: absolute; left: 0; color: var(--warm); font-weight: 700; } .recap summary { font-weight: 600; margin: 20px 0; color: var(--cyan); } .answers-table { width: 100%; border-collapse: collapse; font-size: .86rem; } .answers-table td { padding: 9px 10px; border-bottom: 1px solid var(--rule); vertical-align: top; color: var(--ink-soft); } .answers-table .acol { white-space: nowrap; font-weight: 600; color: var(--cyan); width: 80px; font-family: var(--mono); } .cta { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--rule); } .cta .btn { margin-right: 10px; margin-top: 8px; } /* Honeypot anti-bot : retiré du flux visuel et du parcours clavier/lecteur d'écran. */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .foot { position: relative; z-index: 1; text-align: center; padding: 26px; border-top: 1px solid var(--rule); } .foot-feedback { margin: 10px 0 0; font-size: .85rem; } .foot-feedback a { color: var(--cyan); text-decoration: none; } .foot-feedback a:hover { text-decoration: underline; } @media (max-width: 620px) { .grid2 { grid-template-columns: 1fr; } .card { padding: 24px; } h1 { font-size: 1.7rem; } .vrow { grid-template-columns: 1fr; gap: 3px; } .steps .lbl { display: none; } }