/* ═══════════════════════════════════════════════════════════════════════════ Tunnel d'inscription à l'essai — demo.cmk.biz ═══════════════════════════════════════════════════════════════════════════ Feuille unique, sans dépendance ni build CSS : le site est généré par un script Python de la bibliothèque standard et publié en fichiers plats. Une chaîne d'outils front ici coûterait plus qu'elle ne rapporte. Écrit en PROPRIÉTÉS LOGIQUES (`margin-inline`, `padding-inline-start`, `border-inline-start`) plutôt qu'en `left`/`right`. C'est ce qui fait que la version arabe se retourne correctement avec le seul `dir="rtl"` du , sans une seule règle miroir à maintenir en double. ═════════════════════════════════════════════════════════════════════════ */ :root { --bg: #f6f7fb; --surface: #ffffff; --ink: #171a2b; --ink-soft: #5b6079; --line: #e2e5f0; --primary: #4338ca; --primary-ink: #ffffff; --primary-hover: #372fb0; --danger: #b42318; --danger-bg: #fef3f2; --focus: #f59e0b; --radius: 14px; --shadow: 0 1px 2px rgb(16 24 40 / 6%), 0 12px 32px -12px rgb(16 24 40 / 18%); } @media (prefers-color-scheme: dark) { :root { --bg: #0e1020; --surface: #171a2e; --ink: #eef0f8; --ink-soft: #a3a8c2; --line: #2a2e48; --primary: #8b83f5; --primary-ink: #12142a; --primary-hover: #a49df8; --danger: #ffb4ab; --danger-bg: #3a1f1c; --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 12px 32px -12px rgb(0 0 0 / 60%); } } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100dvh; display: flex; flex-direction: column; background: radial-gradient(60rem 30rem at 50% -12rem, color-mix(in srgb, var(--primary) 14%, transparent), transparent), var(--bg); color: var(--ink); font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } /* L'arabe respire mal dans une graisse fine à cette taille. */ html[lang="ar"] body { font-size: 17px; line-height: 1.7; } /* ── Accessibilité ──────────────────────────────────────────────────────── */ .skip { position: absolute; inset-inline-start: -9999px; } .skip:focus { inset-inline-start: 1rem; top: 1rem; z-index: 10; background: var(--surface); padding: .6rem 1rem; border-radius: 8px; box-shadow: var(--shadow); } :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; } /* ── Ossature ───────────────────────────────────────────────────────────── */ .site-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem clamp(1rem, 4vw, 2.5rem); } .brand { font-weight: 650; letter-spacing: -.01em; } .langs { display: flex; gap: .25rem; } .langs a { color: var(--ink-soft); text-decoration: none; padding: .3rem .55rem; border-radius: 8px; font-size: .875rem; } .langs a:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); } .langs a[aria-current="true"] { color: var(--ink); font-weight: 600; } .shell { flex: 1; width: min(30rem, 100% - 2rem); margin-inline: auto; padding-block: clamp(1rem, 5vh, 3rem) 3rem; } .shell.centered { display: flex; flex-direction: column; justify-content: center; text-align: center; } .tagline { margin: 0 0 1.5rem; color: var(--ink-soft); font-size: .9375rem; } h1 { margin: 0 0 .5rem; font-size: clamp(1.5rem, 4vw, 1.875rem); line-height: 1.2; letter-spacing: -.02em; } .lede { margin: 0 0 1.75rem; color: var(--ink-soft); } .step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(1.25rem, 4vw, 2rem); } /* ── Portes d'entrée ────────────────────────────────────────────────────── */ .doors { display: grid; gap: .625rem; } .door-btn { display: flex; align-items: center; justify-content: center; gap: .625rem; width: 100%; padding: .8rem 1rem; font: inherit; font-weight: 550; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; } .door-btn:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--line)); } .door-btn svg { flex: none; width: 20px; height: 20px; } .sep { display: flex; align-items: center; gap: .75rem; color: var(--ink-soft); font-size: .8125rem; margin-block: .25rem; } .sep::before, .sep::after { content: ""; flex: 1; height: 1px; background: var(--line); } /* ── Formulaires ────────────────────────────────────────────────────────── */ label { display: block; margin-bottom: .375rem; font-size: .875rem; font-weight: 550; } .opt { color: var(--ink-soft); font-weight: 400; } input[type="email"], input[type="text"] { width: 100%; padding: .7rem .85rem; font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; margin-bottom: 1rem; } input:focus { border-color: var(--primary); } /* Le code est une suite de chiffres : chasse fixe et suivi large, pour qu'on puisse le relire caractère par caractère en le comparant à son écran. */ .code-input { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 1.5rem; letter-spacing: .4em; text-align: center; /* Toujours de gauche à droite, même en arabe : un code numérique ne se retourne pas — l'inverser le rendrait faux à la saisie. */ direction: ltr; } .row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; } @media (max-width: 26rem) { .row { grid-template-columns: 1fr; } } .check { display: flex; gap: .625rem; align-items: start; font-weight: 400; margin-block: .5rem 1rem; cursor: pointer; } .check input { margin-top: .2rem; flex: none; } .hint { margin: -.5rem 0 1rem; font-size: .8125rem; color: var(--ink-soft); } .hint a { color: inherit; } button.primary, .primary.as-link { display: block; width: 100%; padding: .8rem 1rem; font: inherit; font-weight: 600; text-align: center; text-decoration: none; color: var(--primary-ink); background: var(--primary); border: 1px solid transparent; border-radius: 10px; cursor: pointer; } button.primary:hover, .primary.as-link:hover { background: var(--primary-hover); } button[disabled] { opacity: .6; cursor: progress; } button.ghost, .ghost.as-link { display: block; width: 100%; margin-top: .5rem; padding: .6rem; font: inherit; font-size: .875rem; text-align: center; color: var(--ink-soft); background: none; border: 0; border-radius: 8px; cursor: pointer; text-decoration: none; } button.ghost:hover, .ghost.as-link:hover { color: var(--ink); } /* ── Erreurs ────────────────────────────────────────────────────────────── */ .error { margin-top: 1rem; padding: .75rem .9rem; color: var(--danger); background: var(--danger-bg); border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); border-radius: 10px; font-size: .9375rem; } /* ── Pied ───────────────────────────────────────────────────────────────── */ .site-foot { padding: 1.5rem clamp(1rem, 4vw, 2.5rem) 2rem; text-align: center; font-size: .8125rem; color: var(--ink-soft); } .site-foot a { color: inherit; margin-inline: .5rem; } @media (prefers-reduced-motion: no-preference) { .step[data-step] { animation: rise .18s ease-out; } @keyframes rise { from { opacity: 0; transform: translateY(4px); } } }