/* notorga.app — feuille de style du site. Les jetons reprennent volontairement ceux de l'app (app/web/css/style.css) : même bleu ardoise, mêmes rayons, mêmes ombres. Quelqu'un qui télécharge après avoir lu le site doit retrouver exactement la même chose à l'écran. Thème : clair par défaut pour tout le monde ; le sombre n'existe que par le bouton (data-theme='dark' sur , mémorisé en local). */ :root { color-scheme: light; --bg: #f4f6f9; --bg-deep: #e9edf4; --surface: #ffffff; --surface-2: #eef1f6; --surface-hover: #e7ebf1; --border: #e2e8f0; --border-strong: #cbd5e1; --text: #0f172a; --text-muted: #64748b; --text-faint: #94a3b8; --accent: #375f91; --accent-hover: #2c4d76; --accent-soft: #e2eaf3; --accent-contrast: #ffffff; /* Lien : plus foncé que --accent pour rester lisible en corps de texte. */ --link: #2c4d76; --success: #16a34a; --success-soft: #dcfce7; --warning: #b45309; --warning-soft: #fef1de; --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 1px rgba(15, 23, 42, 0.04); --shadow-md: 0 8px 20px -4px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.06); --shadow-lg: 0 20px 45px -12px rgba(15, 23, 42, 0.25); --shadow-xl: 0 40px 80px -24px rgba(15, 23, 42, 0.3); --radius-sm: 7px; --radius-md: 9px; --radius-lg: 12px; --radius-xl: 18px; --radius-pill: 999px; --ease: cubic-bezier(0.4, 0, 0.2, 1); --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, monospace; --page: 1160px; --gutter: 24px; } /* Le site s'ouvre en CLAIR pour tout le monde — le lectorat est étudiant, pas développeur, et le réglage système de la machine ne dit rien de ce qu'il veut ici. Le sombre n'existe que par le bouton (data-theme='dark', mémorisé). */ :root[data-theme='dark'] { color-scheme: dark; --bg: #0b1120; --bg-deep: #070c17; --surface: #121a2b; --surface-2: #1a2439; --surface-hover: #212c45; --border: #26314a; --border-strong: #33405e; --text: #e7ecf5; --text-muted: #94a3b8; --text-faint: #64748b; --accent: #4a76ad; --accent-hover: #5f8bc4; --accent-soft: rgba(74, 118, 173, 0.18); --accent-contrast: #ffffff; --link: #8fb4e0; --success: #4ade80; --success-soft: rgba(74, 222, 128, 0.14); --warning: #e0a15c; --warning-soft: rgba(217, 146, 72, 0.14); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 8px 24px -4px rgba(0, 0, 0, 0.45); --shadow-lg: 0 24px 50px -12px rgba(0, 0, 0, 0.6); --shadow-xl: 0 44px 90px -28px rgba(0, 0, 0, 0.75); } /* --------------------------------------------------------------------- */ /* 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; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } body { margin: 0; font-family: var(--font); font-size: 16.5px; line-height: 1.65; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } h1, h2, h3, h4 { margin: 0 0 0.5em; line-height: 1.18; letter-spacing: -0.021em; font-weight: 660; text-wrap: balance; } h1 { font-size: clamp(2.1rem, 1.35rem + 3vw, 3.15rem); letter-spacing: -0.032em; } h2 { font-size: clamp(1.6rem, 1.2rem + 1.7vw, 2.3rem); } h3 { font-size: 1.16rem; font-weight: 640; } p { margin: 0 0 1.05em; text-wrap: pretty; } p:last-child { margin-bottom: 0; } a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; } a:hover { color: var(--accent-hover); } strong { font-weight: 630; color: var(--text); } ul, ol { margin: 0 0 1.05em; padding-left: 1.25em; } li { margin-bottom: 0.35em; } li::marker { color: var(--text-faint); } code, kbd { font-family: var(--font-mono); font-size: 0.88em; background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px; padding: 0.1em 0.38em; } kbd { box-shadow: 0 1px 0 var(--border-strong); } hr { border: 0; border-top: 1px solid var(--border); margin: 40px 0; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } ::selection { background: var(--accent-soft); color: var(--text); } .skip-link { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--surface); color: var(--text); padding: 10px 16px; border-radius: var(--radius-md); border: 1px solid var(--border); box-shadow: var(--shadow-md); } .skip-link:focus { left: 12px; } .wrap { width: 100%; max-width: var(--page); margin-inline: auto; padding-inline: var(--gutter); } .narrow { max-width: 760px; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* --------------------------------------------------------------------- */ /* En-tête */ /* --------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(150%) blur(14px); -webkit-backdrop-filter: saturate(150%) blur(14px); border-bottom: 1px solid transparent; transition: border-color 0.25s var(--ease), background 0.25s var(--ease); } .site-header[data-stuck='true'] { border-bottom-color: var(--border); background: color-mix(in srgb, var(--bg) 92%, transparent); } .site-header .wrap { display: flex; align-items: center; gap: 14px; height: 62px; } .brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 660; font-size: 1.06rem; letter-spacing: -0.02em; color: var(--text); text-decoration: none; flex: none; } .brand:hover { color: var(--text); } .brand svg { width: 24px; height: 24px; color: var(--accent); flex: none; } .site-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; } .site-nav a { padding: 7px 12px; border-radius: var(--radius-pill); color: var(--text-muted); text-decoration: none; font-size: 0.94rem; font-weight: 520; transition: color 0.18s var(--ease), background 0.18s var(--ease); } .site-nav a:hover { color: var(--text); background: var(--surface-hover); } .site-nav a[aria-current='page'] { color: var(--text); } .header-actions { display: flex; align-items: center; gap: 8px; margin-left: 6px; } .theme-toggle { width: 36px; height: 36px; display: inline-grid; place-items: center; border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); cursor: pointer; transition: color 0.18s var(--ease), background 0.18s var(--ease), border-color 0.18s var(--ease); } .theme-toggle:hover { color: var(--text); background: var(--surface-hover); border-color: var(--border-strong); } .theme-toggle svg { width: 17px; height: 17px; } .theme-toggle .icon-sun { display: none; } :root[data-theme='dark'] .theme-toggle .icon-sun { display: block; } :root[data-theme='dark'] .theme-toggle .icon-moon { display: none; } @media (max-width: 720px) { .site-nav { display: none; } } /* --------------------------------------------------------------------- */ /* Boutons */ /* --------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; border-radius: var(--radius-pill); border: 1px solid transparent; font: inherit; font-size: 0.97rem; font-weight: 570; line-height: 1.2; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform 0.16s var(--ease), background 0.18s var(--ease), border-color 0.18s var(--ease), color 0.18s var(--ease), box-shadow 0.18s var(--ease); } .btn:active { transform: translateY(1px); } .btn svg { width: 17px; height: 17px; flex: none; } .btn-primary { background: var(--accent); color: var(--accent-contrast); box-shadow: var(--shadow-sm); } .btn-primary:hover { background: var(--accent-hover); color: var(--accent-contrast); box-shadow: var(--shadow-md); } .btn-ghost { background: var(--surface); color: var(--text); border-color: var(--border); } .btn-ghost:hover { background: var(--surface-hover); border-color: var(--border-strong); color: var(--text); } .btn-lg { padding: 14px 22px; font-size: 1.02rem; } .btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } /* --------------------------------------------------------------------- */ /* Sections */ /* --------------------------------------------------------------------- */ section { position: relative; } .section { padding: clamp(56px, 7vw, 100px) 0; } .section-tight { padding: clamp(40px, 5vw, 68px) 0; } .section-alt { background: var(--bg-deep); } :root[data-theme='dark'] .section-alt { background: var(--bg-deep); } .eyebrow { display: inline-block; font-size: 0.79rem; font-weight: 620; letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; } .section-head { max-width: 660px; margin-bottom: clamp(32px, 4vw, 52px); } .section-head p { color: var(--text-muted); font-size: 1.06rem; margin-bottom: 0; } .lead { font-size: clamp(1.06rem, 1rem + 0.35vw, 1.2rem); color: var(--text-muted); } /* --------------------------------------------------------------------- */ /* Hero */ /* --------------------------------------------------------------------- */ .hero { position: relative; padding: clamp(52px, 7vw, 96px) 0 clamp(40px, 5vw, 72px); overflow: hidden; } /* Halo discret derrière le titre — dessiné en CSS, aucune image à charger. */ .hero::before { content: ''; position: absolute; inset: -35% 0 auto -10%; height: 720px; width: 120%; background: radial-gradient(46% 42% at 22% 42%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 72%), radial-gradient(38% 40% at 78% 26%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 70%); pointer-events: none; z-index: 0; } .hero > .wrap { position: relative; z-index: 1; } .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 5vw, 64px); align-items: center; } @media (min-width: 960px) { /* La colonne de texte porte le titre : c'est elle qui doit être la plus large, sinon « Tu écoutes le cours. » se casse en trois lignes. */ .hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); } } .hero h1 { margin-bottom: 18px; } .hero .lead { margin-bottom: 26px; max-width: 40ch; } .pill { display: inline-flex; align-items: center; gap: 8px; padding: 5px 13px 5px 8px; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); font-size: 0.85rem; font-weight: 520; color: var(--text-muted); margin-bottom: 22px; } .pill b { background: var(--accent-soft); color: var(--accent); font-weight: 620; padding: 2px 9px; border-radius: var(--radius-pill); font-size: 0.8rem; } :root[data-theme='dark'] .pill b { color: var(--accent-hover); } .hero-note { margin-top: 18px; font-size: 0.89rem; color: var(--text-faint); display: flex; /* La note tient sur deux lignes : une icône centrée verticalement flotterait à côté du texte au lieu d'en marquer le début. */ align-items: flex-start; gap: 7px; max-width: 52ch; } .hero-note svg { width: 15px; height: 15px; flex: none; margin-top: 4px; } /* --------------------------------------------------------------------- */ /* Maquette de l'app — calquée sur la vraie fenêtre */ /* (barre de titre + onglets de matières colorés + colonne Leçons avec le */ /* panneau Enregistrement en bas + la fiche à droite). */ /* --------------------------------------------------------------------- */ .mockup { border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-xl); overflow: hidden; font-size: 12px; line-height: 1.45; } .mock-titlebar { display: flex; align-items: center; gap: 4px; padding: 0 10px; height: 36px; border-bottom: 1px solid var(--border); background: var(--surface); } .mock-brand { display: inline-flex; align-items: center; gap: 6px; font-weight: 620; font-size: 12px; color: var(--text); padding-right: 6px; } .mock-brand svg { width: 14px; height: 14px; color: var(--accent); } .mock-nav { display: flex; gap: 2px; flex: 1 1 auto; min-width: 0; overflow: hidden; } .mock-nav span { padding: 4px 9px; border-radius: var(--radius-sm); color: var(--text-faint); font-size: 11px; font-weight: 520; white-space: nowrap; } .mock-nav span.on { background: var(--accent); color: #fff; } .mock-dots { display: flex; gap: 9px; color: var(--text-faint); flex: none; font-size: 11px; } /* Onglets de matières : pastilles colorées, comme dans l'app. */ .mock-subjects { display: flex; gap: 3px; align-items: center; padding: 6px 10px; border-bottom: 1px solid var(--border); background: var(--surface-2); overflow: hidden; } .mock-subjects span { padding: 4px 12px; border-radius: var(--radius-sm); font-size: 10.5px; font-weight: 540; white-space: nowrap; color: var(--text); } .mock-subjects .s1 { background: #dbe7f3; } .mock-subjects .s2 { background: #d8ebe2; } .mock-subjects .s3 { background: #f3e3d5; } .mock-subjects .on { background: #8f3436; color: #fff; } :root[data-theme='dark'] .mock-subjects .s1 { background: #24344a; } :root[data-theme='dark'] .mock-subjects .s2 { background: #213a34; } :root[data-theme='dark'] .mock-subjects .s3 { background: #3d3125; } .mock-body { display: grid; grid-template-columns: 142px minmax(0, 1fr); min-height: 300px; } @media (max-width: 560px) { .mock-body { grid-template-columns: minmax(0, 1fr); } } .mock-side { border-right: 1px solid var(--border); display: flex; flex-direction: column; background: var(--surface); } @media (max-width: 560px) { .mock-side { display: none; } } .mock-side-top { padding: 10px 9px; flex: 1 1 auto; } .mock-side h4 { font-size: 9px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-faint); margin: 0 0 7px; font-weight: 640; } .mock-livre { color: var(--accent); font-size: 10.5px; font-weight: 560; margin-bottom: 10px; } .mock-chap { font-size: 10px; color: var(--text-muted); margin-bottom: 5px; } .mock-lesson { background: #f7e4e4; border-left: 2px solid #8f3436; border-radius: 4px; padding: 6px 7px; } :root[data-theme='dark'] .mock-lesson { background: rgba(143, 52, 54, 0.22); } .mock-lesson b { display: block; font-size: 10px; font-weight: 580; color: var(--text); } .mock-lesson span { font-size: 9px; color: var(--text-faint); } /* Le panneau Enregistrement, ancré en bas de la colonne comme dans l'app. */ .mock-rec-panel { border-top: 1px solid var(--border); padding: 10px 9px; } .mock-timer { font-family: var(--font-mono); font-size: 13px; color: var(--text-faint); letter-spacing: 0.04em; } .mock-ready { font-size: 9.5px; color: var(--text-faint); margin-bottom: 8px; } .mock-btn { display: flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 8px; font-size: 10.5px; font-weight: 560; color: var(--text); margin-bottom: 4px; } .mock-btn.go { background: var(--accent); border-color: var(--accent); color: #fff; } .mock-main { padding: 13px 15px; min-width: 0; } .mock-main h5 { margin: 0 0 8px; font-size: 14.5px; font-weight: 660; letter-spacing: -0.018em; color: var(--text); } .mock-tabs { display: flex; gap: 14px; align-items: center; border-bottom: 1px solid var(--border); margin-bottom: 10px; padding-bottom: 5px; } .mock-tabs span { font-size: 11px; color: var(--text-faint); font-weight: 520; } .mock-tabs span.on { color: var(--accent); border-bottom: 2px solid var(--accent); padding-bottom: 5px; margin-bottom: -7px; } .mock-tabs .brute { margin-left: auto; font-size: 10px; text-decoration: underline; } /* La barre d'outils : des pastilles qui suggèrent le traitement de texte. */ .mock-toolbar { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; padding-bottom: 9px; margin-bottom: 10px; border-bottom: 1px solid var(--border); color: var(--text-faint); font-size: 10.5px; font-weight: 600; } .mock-toolbar i { font-style: normal; } .mock-toolbar .sep { width: 1px; height: 11px; background: var(--border); } .mock-h { font-size: 11.5px; font-weight: 660; color: var(--text); margin: 11px 0 6px; } .mock-line { height: 6px; border-radius: 4px; background: var(--surface-2); margin-bottom: 6px; } .mock-line.w95 { width: 95%; } .mock-line.w88 { width: 88%; } .mock-line.w72 { width: 72%; } .mock-line.w60 { width: 60%; } .mock-bullet { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; } .mock-bullet::before { content: ''; width: 3px; height: 3px; border-radius: 50%; background: var(--text-faint); flex: none; } .mock-bullet .mock-line { margin: 0; flex: 1 1 auto; } /* --------------------------------------------------------------------- */ /* Cartes / grilles */ /* --------------------------------------------------------------------- */ /* Les largeurs minimales sont choisies pour que le nombre de colonnes tombe juste sur le nombre de cartes : 2 pour une série de 4, 3 pour une série de 6. Sinon auto-fit case une colonne de plus et laisse une carte orpheline sur sa propre ligne. Le min(100%, …) évite qu'un minimum plus large que l'écran force un débordement horizontal sur mobile. */ .grid { display: grid; gap: 18px; } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); } .grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); } .grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px 22px; box-shadow: var(--shadow-sm); transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease), border-color 0.22s var(--ease); } .card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-strong); } .card h3 { margin-bottom: 7px; } .card p { color: var(--text-muted); font-size: 0.95rem; margin-bottom: 0; } .card-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: var(--radius-md); background: var(--accent-soft); color: var(--accent); margin-bottom: 15px; } :root[data-theme='dark'] .card-icon { color: var(--accent-hover); } .card-icon svg { width: 19px; height: 19px; } /* Coches courtes sous les boutons du héros : trois faits, pas un paragraphe. */ .hero-checks { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px 22px; font-size: 0.91rem; color: var(--text-muted); } .hero-checks li { margin: 0; display: flex; align-items: center; gap: 7px; } .hero-checks li::before { content: ''; width: 14px; height: 14px; flex: none; background: currentColor; color: var(--success); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E") center / contain no-repeat; } /* Bandeau vie privée : trois phrases et un lien — le détail vit sur sa page. */ .privacy-strip { text-align: center; max-width: 620px; } .privacy-strip h2 { margin-bottom: 8px; } .privacy-strip p { color: var(--text-muted); margin-bottom: 20px; } /* Étapes numérotées */ .steps { counter-reset: step; display: grid; gap: 16px; } @media (min-width: 860px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 860px) { .steps-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .step { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px 20px 20px; box-shadow: var(--shadow-sm); } .step::before { counter-increment: step; content: counter(step); display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: var(--accent); color: var(--accent-contrast); font-size: 0.8rem; font-weight: 640; margin-bottom: 13px; } .step h3 { font-size: 1.02rem; margin-bottom: 5px; } .step p { color: var(--text-muted); font-size: 0.92rem; margin-bottom: 0; } /* Liste à puces cochées */ .checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; } .checks li { display: flex; align-items: flex-start; gap: 10px; margin: 0; color: var(--text-muted); font-size: 0.97rem; } .checks li svg { width: 18px; height: 18px; color: var(--success); flex: none; margin-top: 3px; } .checks li b { color: var(--text); } /* --------------------------------------------------------------------- */ /* Tarif */ /* --------------------------------------------------------------------- */ .price-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: clamp(28px, 4vw, 44px); box-shadow: var(--shadow-lg); display: grid; gap: clamp(26px, 4vw, 48px); align-items: center; } @media (min-width: 820px) { .price-card { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); } } .price-amount { display: flex; align-items: baseline; gap: 5px; margin-bottom: 6px; } .price-amount .num { font-size: clamp(3rem, 2rem + 4vw, 4.2rem); font-weight: 680; letter-spacing: -0.045em; line-height: 1; color: var(--text); } .price-amount .per { color: var(--text-muted); font-size: 1.02rem; font-weight: 520; } /* --------------------------------------------------------------------- */ /* FAQ */ /* --------------------------------------------------------------------- */ .faq { display: grid; gap: 10px; } .faq details { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: border-color 0.2s var(--ease); } .faq details[open] { border-color: var(--border-strong); } .faq summary { padding: 17px 22px; cursor: pointer; font-weight: 580; font-size: 1.01rem; list-style: none; display: flex; align-items: center; gap: 14px; color: var(--text); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ''; margin-left: auto; width: 9px; height: 9px; border-right: 2px solid var(--text-faint); border-bottom: 2px solid var(--text-faint); transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.25s var(--ease); flex: none; } .faq details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); } .faq summary:hover { background: var(--surface-hover); } .faq .answer { padding: 0 22px 20px; color: var(--text-muted); font-size: 0.97rem; } .faq .answer p:last-child { margin-bottom: 0; } /* --------------------------------------------------------------------- */ /* Bandeau final */ /* --------------------------------------------------------------------- */ .cta-band { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: clamp(34px, 5vw, 56px); text-align: center; box-shadow: var(--shadow-md); position: relative; overflow: hidden; } .cta-band::before { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 120% at 50% 0%, var(--accent-soft), transparent 70%); pointer-events: none; } .cta-band > * { position: relative; } .cta-band h2 { margin-bottom: 12px; } .cta-band p { color: var(--text-muted); max-width: 52ch; margin-inline: auto; margin-bottom: 24px; } .cta-band .btn-row { justify-content: center; } /* --------------------------------------------------------------------- */ /* Pied de page */ /* --------------------------------------------------------------------- */ .site-footer { border-top: 1px solid var(--border); padding: 46px 0 34px; margin-top: clamp(50px, 6vw, 84px); font-size: 0.93rem; color: var(--text-muted); } .footer-grid { display: grid; gap: 30px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-bottom: 32px; } .footer-grid h4 { font-size: 0.79rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); margin-bottom: 12px; font-weight: 620; } .footer-grid ul { list-style: none; margin: 0; padding: 0; } .footer-grid li { margin-bottom: 7px; } .footer-grid a { color: var(--text-muted); text-decoration: none; } .footer-grid a:hover { color: var(--text); text-decoration: underline; } .footer-grid .brand { margin-bottom: 10px; } .footer-about p { font-size: 0.9rem; max-width: 32ch; margin-bottom: 0; } .footer-bottom { border-top: 1px solid var(--border); padding-top: 20px; display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; justify-content: space-between; font-size: 0.87rem; color: var(--text-faint); } /* --------------------------------------------------------------------- */ /* Pages de contenu (légal, téléchargement) */ /* --------------------------------------------------------------------- */ .page-head { padding: clamp(40px, 5vw, 68px) 0 clamp(20px, 3vw, 34px); } .page-head h1 { font-size: clamp(1.9rem, 1.4rem + 2.2vw, 2.9rem); margin-bottom: 12px; } .page-head .lead { margin-bottom: 0; } .page-head .updated { font-size: 0.86rem; color: var(--text-faint); margin-top: 14px; } .prose { padding-bottom: 20px; } .prose h2 { font-size: 1.32rem; margin-top: 2.1em; padding-top: 1.1em; border-top: 1px solid var(--border); } .prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; } .prose h3 { margin-top: 1.7em; font-size: 1.04rem; } .prose p, .prose li { color: var(--text-muted); } .prose strong { color: var(--text); } .callout { border: 1px solid var(--border); border-left: 3px solid var(--accent); background: var(--surface); border-radius: var(--radius-md); padding: 16px 20px; margin: 22px 0; font-size: 0.95rem; } .callout.todo { border-left-color: var(--warning); background: var(--warning-soft); } .callout p { color: var(--text-muted); } .callout p:last-child { margin-bottom: 0; } .toc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 22px; margin-bottom: 34px; } .toc h2 { font-size: 0.79rem !important; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); margin: 0 0 10px !important; padding: 0 !important; border: 0 !important; } .toc ol { margin: 0; padding-left: 1.2em; font-size: 0.94rem; } .toc li { margin-bottom: 4px; } .toc a { text-decoration: none; } .toc a:hover { text-decoration: underline; } .table-wrap { overflow-x: auto; margin: 20px 0; } table { border-collapse: collapse; width: 100%; font-size: 0.93rem; min-width: 460px; } th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--border); vertical-align: top; } th { font-weight: 620; color: var(--text); background: var(--surface-2); } td { color: var(--text-muted); } tbody tr:last-child td { border-bottom: 0; } /* --------------------------------------------------------------------- */ /* Page de confirmation de compte / 404 */ /* --------------------------------------------------------------------- */ .centered { min-height: 78vh; display: grid; place-items: center; padding: 40px 0; } .status-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: clamp(30px, 5vw, 46px); max-width: 490px; text-align: center; } .status-card .card-icon { margin-inline: auto; width: 46px; height: 46px; } .status-card .card-icon svg { width: 23px; height: 23px; } .status-card h1 { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.8rem); margin-bottom: 10px; } .status-card p { color: var(--text-muted); font-size: 0.98rem; } .status-card .detail { font-size: 0.78rem; color: var(--text-faint); margin-top: 18px; overflow-wrap: anywhere; } /* --------------------------------------------------------------------- */ /* Apparition au défilement */ /* --------------------------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(14px); } .reveal.in { opacity: 1; transform: none; transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } } /* Sans JS, rien ne doit rester invisible. */ .no-js .reveal { opacity: 1; transform: none; } /* --------------------------------------------------------------------- */ /* La couche « fun » — discrète mais vivante. */ /* Tout est neutralisé d'office par le bloc prefers-reduced-motion. */ /* --------------------------------------------------------------------- */ :root { --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); } /* Trait de surligneur qui se dessine sous les mots-clés une fois visibles, comme un coup de Stabilo dans un poly. */ .hl { background: linear-gradient(120deg, var(--accent-soft), var(--accent-soft)); background-repeat: no-repeat; background-size: 0% 42%; background-position: 0 78%; transition: background-size 0.7s var(--ease) 0.25s; border-radius: 3px; padding-inline: 2px; margin-inline: -2px; } .in .hl, .hl.in { background-size: 100% 42%; } /* La maquette flotte doucement, comme posée sur l'eau. */ @keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } } .mockup { animation: bob 7s ease-in-out infinite; } /* Les icônes des cartes se dandinent au survol. */ @keyframes wiggle { 0%, 100% { rotate: 0deg; } 25% { rotate: -8deg; } 60% { rotate: 6deg; } } .card:hover .card-icon svg { animation: wiggle 0.5s var(--ease); } /* Les numéros d'étapes surgissent avec un rebond quand la carte apparaît. */ .step::before { scale: 0; transition: scale 0.5s var(--ease-bounce) 0.15s; } .step.in::before, .no-js .step::before { scale: 1; } /* Boutons principaux : petit sursaut au survol. */ .btn-primary:hover { transform: translateY(-1px); } .btn-primary:active { transform: translateY(1px); } /* ---- Comparatif de prix : des barres qui poussent ---------------------- */ .compare { display: grid; gap: 14px; max-width: 680px; } .compare-row { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; align-items: center; gap: 14px; } @media (max-width: 560px) { .compare-row { grid-template-columns: 92px minmax(0, 1fr) auto; gap: 10px; } .compare-price { font-size: 0.88rem; } } .compare-name { font-weight: 580; font-size: 0.95rem; color: var(--text); } .compare-name small { display: block; font-weight: 460; font-size: 0.76rem; color: var(--text-faint); } .compare-track { display: block; background: var(--surface-2); border-radius: var(--radius-pill); height: 26px; overflow: hidden; } .compare-bar { display: block; height: 100%; width: 0; border-radius: var(--radius-pill); background: var(--border-strong); transition: width 1s var(--ease) 0.2s; } .compare-row.us .compare-bar { background: var(--accent); } .compare-row.us .compare-name { color: var(--accent); } .in .compare-bar { width: var(--w); } .no-js .compare-bar { width: var(--w); } .compare-price { font-weight: 640; font-size: 0.98rem; text-align: right; white-space: nowrap; } .compare-row.us .compare-price { color: var(--accent); } .compare-note { font-size: 0.82rem; color: var(--text-faint); margin-top: 14px; max-width: 680px; } /* ---- Vacances : le bandeau « tu coupes, tu reprends » ------------------- */ .pause-card { display: flex; align-items: center; gap: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px 22px; box-shadow: var(--shadow-sm); margin-top: 18px; } .pause-card .sun { font-size: 1.9rem; line-height: 1; flex: none; animation: sunspin 14s linear infinite; transform-origin: 50% 52%; } @keyframes sunspin { to { rotate: 360deg; } } .pause-card b { color: var(--text); } .pause-card p { margin: 0; color: var(--text-muted); font-size: 0.96rem; } /* --------------------------------------------------------------------- */ /* Plateformes : ce qui existe, ce qui arrive */ /* --------------------------------------------------------------------- */ .plats { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 26px; } .plat { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--surface); font-size: 0.93rem; font-weight: 540; color: var(--text); box-shadow: var(--shadow-sm); } .plat svg { width: 17px; height: 17px; flex: none; color: var(--accent); } .plat.soon { color: var(--text-faint); box-shadow: none; background: transparent; } .plat.soon svg { color: var(--text-faint); } .plat.soon b { font-size: 0.7rem; font-weight: 640; text-transform: uppercase; letter-spacing: 0.07em; color: var(--accent); background: var(--accent-soft); border-radius: var(--radius-pill); padding: 2px 8px; } :root[data-theme='dark'] .plat.soon b { color: var(--accent-hover); } /* --------------------------------------------------------------------- */ /* « Le compteur s'arrête » — les trois cas de la facturation */ /* --------------------------------------------------------------------- */ .pause-steps { display: grid; gap: 12px; margin-top: 24px; } @media (min-width: 720px) { .pause-steps { grid-template-columns: repeat(3, 1fr); } } .pause-step { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px 20px 18px; box-shadow: var(--shadow-sm); } .pause-step .when { font-size: 0.78rem; font-weight: 640; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-faint); margin-bottom: 9px; } .pause-step .what { font-size: 1.28rem; font-weight: 680; color: var(--accent); margin-bottom: 6px; letter-spacing: -0.02em; } .pause-step p { font-size: 0.92rem; color: var(--text-muted); margin: 0; } /* --------------------------------------------------------------------- */ /* Bandeau « par des étudiants » */ /* --------------------------------------------------------------------- */ .trust { display: grid; gap: 16px; } @media (min-width: 780px) { .trust { grid-template-columns: repeat(2, 1fr); } } .trust-item { display: flex; gap: 13px; align-items: flex-start; } .trust-item .emo { font-size: 1.5rem; line-height: 1.2; flex: none; } .trust-item b { display: block; margin-bottom: 2px; } .trust-item span { color: var(--text-muted); font-size: 0.95rem; } /* Titre géant du héros, pour que la promesse crie avant qu'on lise. */ .hero h1 { font-size: clamp(2.3rem, 1.3rem + 4vw, 3.4rem); line-height: 1.06; }