/* 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 : trois états. Choix explicite -> data-theme sur ; par défaut, seul prefers-color-scheme départage. Chaque couleur est donc définie une première fois sur :root nu, puis redéfinie dans les deux blocs sombres. */ :root { color-scheme: light dark; --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; } /* Les deux blocs sombres portent les MÊMES redéfinitions : l'un pour le choix explicite du bouton, l'autre pour le réglage système. Ils ne peuvent pas être fusionnés en un seul sélecteur : le second doit rester enfermé dans la media query, sinon il repeindrait aussi le mode clair par défaut. */ :root[data-theme='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); } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --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 (prefers-color-scheme: dark) { :root:not([data-theme='light']) .theme-toggle .icon-sun { display: block; } :root:not([data-theme='light']) .theme-toggle .icon-moon { display: none; } } /* --------------------------------------------------------------------- */ /* « Mon compte » dans l'en-tête */ /* */ /* C'EST LA PORTE D'ACHAT, et elle n'existait pas. */ /* */ /* Les heures s'achètent sur /compte/, et cette page n'était atteignable */ /* que par un lien en PIED de page, coincé entre « Liste d'attente » et */ /* les mentions légales : il fallait connaître l'URL. Sur iPhone, iPad et */ /* Mac App Store, l'app n'a pas le droit d'ouvrir un tunnel de paiement */ /* (règle 3.1.1) — ce lien-ci est donc le SEUL chemin qu'ait un étudiant */ /* à court d'heures sur ces trois appareils. */ /* */ /* D'où sa place : dans `.header-actions` et non dans `.site-nav`, qui */ /* disparaît sous 720 px. Une porte d'achat qui s'efface sur téléphone */ /* s'efface exactement là où l'on est bloqué. */ /* */ /* Et d'où la SPÉCIFICITÉ : `.header-account` seul perd contre `.btn`, */ /* défini plus bas dans cette feuille — à égalité de spécificité, c'est */ /* l'ordre qui tranche. Mesuré : le padding restait à 20 px et le lien */ /* faisait déborder l'en-tête de 74 px. `.site-header .header-account` */ /* gagne quel que soit l'ordre. */ /* --------------------------------------------------------------------- */ .site-header .header-account { padding: 9px 14px; font-size: 0.92rem; } .site-header .header-account svg { width: 18px; height: 18px; flex: none; } @media (max-width: 720px) { .site-nav { display: none; } /* L'en-tête débordait DÉJÀ avant ce lien (367 px de contenu pour 360 px de large, mesuré) : quatre éléments à la taille du bureau ne tiennent pas sur un téléphone. Ce qui suit remet le tout dans la largeur, lien compris — 16 + 108 + 8 + 194 + 16 = 342 px. */ .site-header .wrap { padding-left: 16px; padding-right: 16px; gap: 8px; } .site-header .header-actions { gap: 6px; margin-left: auto; } /* La marque cède la place s'il le faut ; les commandes, jamais. Sans ça, c'est le dernier bouton de la rangée qui sort de l'écran — et le dernier, ici, c'est celui qui compte. */ .site-header .brand { min-width: 0; overflow: hidden; } .site-header .header-actions .btn { padding: 9px 12px; font-size: 0.85rem; } /* Le libellé part, l'icône reste. Elle ne disparaît JAMAIS — c'est tout l'objet de cette règle — et `aria-label` porte le nom sur le lien pour qui ne voit pas l'icône. */ /* Trois classes, comme la règle des boutons juste au-dessus : à deux, elle perdait encore — le padding restait à 12 px. C'est le même piège que `.btn`, une spécificité plus bas. */ .site-header .header-actions .header-account span { display: none; } .site-header .header-actions .header-account { padding: 9px; } } /* Sous 360 px (iPhone SE de première génération, et toute fenêtre étroite), même réduits les quatre éléments ne tiennent plus : mesuré, 357 px de contenu pour 320 px de large. Il faut donc en retirer un, et lequel n'est pas un arbitrage esthétique. C'est « Liste d'attente » qui part, et pas le compte : la liste d'attente est REPRISE ailleurs sur chaque page — dans le héros, et dans le pied de page des huit — tandis que « Mon compte » n'est repris nulle part sur un téléphone, puisque `.site-nav` a déjà disparu. Retirer le lien du compte rendrait la page qui VEND des heures introuvable sur l'appareil où l'on manque d'heures ; retirer celui de la liste d'attente le déplace de deux cents pixels vers le bas. */ @media (max-width: 359px) { .site-header .header-actions .btn-primary { 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.1fr) minmax(0, 0.9fr); } } .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); } /* Ce qui convainc d'essayer, pas une ligne de petits caractères : fond teinté et texte en couleur, à l'inverse de `.hero-note` qui reste discrète. */ .hero-offer { display: inline-flex; align-items: flex-start; gap: 8px; margin-top: 20px; padding: 11px 16px; border-radius: var(--radius-lg); background: var(--accent-soft); color: var(--accent); font-size: 0.93rem; font-weight: 560; text-align: left; } .hero-offer svg { width: 16px; height: 16px; flex: none; margin-top: 3px; } .hero-offer b { color: inherit; font-weight: 700; } :root[data-theme='dark'] .hero-offer { color: var(--accent-hover); } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .hero-offer { 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; } /* --------------------------------------------------------------------- */ /* 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; } /* É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)); } } .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 { /* « 0,30 € » fait deux fois la largeur de l'ancien « 5 € » : à la taille d'avant, il se cassait en deux lignes sur un téléphone, avec l'euro tout seul en dessous. Un prix coupé en deux ne se lit pas comme un prix. */ font-size: clamp(2.4rem, 1.4rem + 4vw, 4.2rem); font-weight: 680; letter-spacing: -0.045em; line-height: 1; color: var(--text); white-space: nowrap; } .price-amount .per { color: var(--text-muted); font-size: 1.02rem; font-weight: 520; } /* Trois points de repère, sur l'accueil : pas le simulateur de la page tarifs (ça reste l'écran de LA page tarifs, pas une copie ici), juste de quoi montrer que le prix suit tes heures plutôt que de tomber sur un seul palier. */ .price-examples { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 9px; } .price-example { display: flex; align-items: baseline; gap: 5px; padding: 8px 13px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); font-size: 0.86rem; } .price-example b { font-size: 1rem; font-weight: 640; color: var(--text); } .price-example span { color: var(--text-faint); } .price-example em { font-style: normal; font-weight: 620; color: var(--accent); margin-left: 3px; } :root[data-theme='dark'] .price-example em { color: var(--accent-hover); } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .price-example em { color: var(--accent-hover); } } /* Le simulateur de la page tarifs. */ .price-card-solo { grid-template-columns: minmax(0, 1fr); } @media (min-width: 820px) { .price-card-solo { grid-template-columns: minmax(0, 1fr); } } .sim-question { color: var(--text-muted); margin-bottom: 14px; } /* Les deux chiffres sur UNE ligne, séparés par un tiret cadratin. Séparés, « 14,40 €/mois » se lit « 14,40 € par semaine » — c'est la confusion la plus coûteuse que ce curseur puisse produire, et elle ne se répare qu'au support. Sur un écran étroit ils passent à la ligne mais restent dans le même bloc. */ .sim-readout { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 4px; } .sim-readout b { font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.1rem); font-weight: 680; letter-spacing: -0.04em; line-height: 1.05; color: var(--text); /* Le libellé change à chaque cran : sans chasse fixe, la ligne tressaute. */ font-variant-numeric: tabular-nums; } .sim-readout .sim-sep { color: var(--text-muted); font-size: 1.4rem; } .sim-hours, .sim-price { color: var(--text-muted); font-size: 1.02rem; font-weight: 520; } /* Sur un écran étroit les deux chiffres passent à la ligne, et le tiret se retrouverait suspendu en fin de première ligne. On l'enlève : chacun porte déjà son unité (« h/semaine », « €/mois »), et ils restent dans le même bloc — c'est ce voisinage-là qui empêche de lire « 14,40 € par semaine ». */ @media (max-width: 560px) { .sim-readout { gap: 2px 8px; } .sim-readout .sim-sep { display: none; } } .sim-credits { color: var(--text-muted); font-size: 0.97rem; margin-bottom: 20px; } .sim-credits b { color: var(--text); font-variant-numeric: tabular-nums; } .sim-controls { display: flex; align-items: center; gap: 12px; } .sim-controls input[type='range'] { flex: 1; min-width: 0; accent-color: var(--accent); cursor: pointer; height: 22px; } /* 40 px : la cible tactile minimale confortable. Cette page se lit surtout sur un téléphone, et viser 17 h sur vingt-cinq crans au doigt ne marche pas. */ .sim-step { flex: none; width: 40px; height: 40px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); color: var(--text); font-size: 1.25rem; line-height: 1; cursor: pointer; } .sim-step:hover { background: var(--surface-hover); border-color: var(--border-strong); } .sim-bounds { display: flex; justify-content: space-between; margin: 6px 52px 0; font-size: 0.85rem; color: var(--text-muted); } .sim-presets-title { margin: 26px 0 10px; color: var(--text-muted); font-size: 0.97rem; } .sim-presets { display: flex; flex-wrap: wrap; gap: 10px; } /* Chaque preset porte SON prix : en proposer un sans son prix obligerait à bouger le curseur pour savoir ce que ça coûte. */ .sim-preset { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; text-align: left; cursor: pointer; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); } .sim-preset:hover { border-color: var(--border-strong); background: var(--surface-hover); } .sim-preset b { color: var(--text); font-size: 0.95rem; font-weight: 580; } .sim-preset span { color: var(--text-muted); font-size: 0.87rem; } .sim-preset.active { border-color: var(--accent); background: var(--accent-soft); } .sim-note { margin: 18px 0 22px; color: var(--text-muted); font-size: 0.92rem; } /* Le minimum d'une heure par séance porte un triangle et non une coche : c'est la seule ligne de cette page qui peut coûter plus cher qu'attendu, et elle doit se distinguer des promesses au premier coup d'œil. */ .checks.facts li svg { color: var(--accent); } .checks.facts li:last-child svg { color: var(--warning); } .pack-grid { display: flex; flex-wrap: wrap; gap: 12px; } .pack { display: flex; align-items: baseline; gap: 10px; padding: 16px 22px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); } .pack b { font-size: 1.35rem; font-weight: 640; color: var(--text); } .pack span { color: var(--text-muted); } /* --------------------------------------------------------------------- */ /* 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; } /* --------------------------------------------------------------------- */ /* Liste d'attente — le seul formulaire du site */ /* --------------------------------------------------------------------- */ /* Il poste pour de vrai (method="post"), sans dépendre de JavaScript : le site tient à rester lisible et utilisable sans lui, et une page d'inscription qui ne s'inscrit pas serait le pire endroit où faire une exception. Le JS n'intercepte l'envoi que pour éviter le rechargement. */ .waitlist-card { padding: clamp(24px, 4vw, 34px); /* Le survol soulève les cartes de contenu ; sur un formulaire, ce mouvement sous le curseur pendant qu'on vise un champ n'a aucun sens. */ transition: none; } .waitlist-card:hover { transform: none; box-shadow: var(--shadow-sm); border-color: var(--border); } .waitlist-form { display: grid; gap: 18px; } .field { display: grid; gap: 7px; } .field label { font-size: 0.92rem; font-weight: 600; color: var(--text); } .field-optional { font-weight: 500; color: var(--text-faint); } .field-hint { font-size: 0.85rem; color: var(--text-muted); margin: 0; } /* Un fieldset se comporte comme un bloc normal une fois débarrassé de sa bordure et de son padding par défaut : la legend reprend l'apparence de `.field label` pour que rien ne distingue ce champ des autres. */ .device-field { border: 0; margin: 0; padding: 0; } .device-field legend { display: block; width: 100%; padding: 0; margin-bottom: 7px; font-size: 0.92rem; font-weight: 600; color: var(--text); } .device-options { display: flex; flex-wrap: wrap; gap: 8px; } .device-option { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); font-size: 0.87rem; font-weight: 550; color: var(--text); cursor: pointer; transition: border-color 0.15s var(--ease), background 0.15s var(--ease); } .device-option:hover { border-color: var(--border-strong); background: var(--surface-hover); } .device-option input { flex: none; width: 15px; height: 15px; margin: 0; accent-color: var(--accent); cursor: pointer; } .device-option svg { width: 15px; height: 15px; color: var(--accent); flex: none; } :root[data-theme='dark'] .device-option svg { color: var(--accent-hover); } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .device-option svg { color: var(--accent-hover); } } .input { width: 100%; padding: 11px 13px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--text); font: inherit; font-size: 0.98rem; transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease); } .input::placeholder { color: var(--text-faint); } .input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } /* Case et libellé sur la même ligne cliquable : le libellé EST une cible de clic, et il est long — d'où l'alignement en haut plutôt qu'au centre. */ .checkbox-row { display: flex; align-items: flex-start; gap: 10px; font-size: 0.9rem; color: var(--text-muted); line-height: 1.5; cursor: pointer; } .checkbox-row input { flex: none; width: 17px; height: 17px; margin-top: 1px; accent-color: var(--accent); cursor: pointer; } .waitlist-submit { width: 100%; justify-content: center; } /* Le champ que seul un robot remplit : hors de l'écran et hors de l'arbre d'accessibilité. `display:none` ne conviendrait pas — plusieurs remplisseurs automatiques sautent justement les champs masqués ainsi. */ .waitlist-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* Vide par défaut, donc sans marge : sans ça la carte porterait un blanc inexpliqué sous le bouton tant que rien n'a été envoyé. */ .waitlist-status { margin: 0; font-size: 0.92rem; } .waitlist-status:empty { display: none; } .waitlist-status.ok { color: var(--success); font-weight: 600; } .waitlist-status.ko { color: var(--warning); font-weight: 600; } .waitlist-legal { margin: 0; font-size: 0.82rem; color: var(--text-faint); line-height: 1.55; } .waitlist-legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } /* --------------------------------------------------------------------- */ /* Captures d'écran */ /* --------------------------------------------------------------------- */ /* Ce sont de VRAIES captures de l'application, pas des maquettes : c'est ce qui distingue une page qui montre le produit d'une page qui le décrit. Elles sont donc encadrées comme une fenêtre — filet, rayon, ombre portée — et jamais recadrées ni retouchées. Chaque image porte ses attributs `width`/`height` : le navigateur en tire la proportion avant de l'avoir téléchargée, donc la page ne se réagence pas quand la capture arrive et le texte qu'on lit ne saute pas. */ .shot { position: relative; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-lg); overflow: hidden; /* Le trait clair en haut du cadre : il détache la capture du fond sans ajouter une seconde bordure, en clair comme en sombre. */ outline: 1px solid rgba(255, 255, 255, 0.5); outline-offset: -2px; } :root[data-theme='dark'] .shot { outline-color: rgba(255, 255, 255, 0.05); } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .shot { outline-color: rgba(255, 255, 255, 0.05); } } .shot img { display: block; width: 100%; height: auto; } /* La capture du téléphone : même cadre, mais un rayon d'appareil. */ .shot-phone { border-radius: 26px; box-shadow: var(--shadow-xl); } .shot-caption { margin: 12px 2px 0; font-size: 0.86rem; color: var(--text-faint); line-height: 1.5; } /* --- La capture du haut de page ---------------------------------------- */ /* Elle déborde volontairement de la colonne de texte : c'est la première preuve que l'app existe, elle a droit à toute la largeur. */ .hero-shot { margin-top: 44px; position: relative; } .hero-shot .shot { max-width: 100%; } /* Le téléphone posé sur le coin de la fenêtre de bureau — les deux profils d'un seul coup d'œil. Il disparaît sous 860 px : superposé à une capture déjà réduite, il n'en resterait qu'un empilement illisible. */ .hero-phone { position: absolute; right: -8px; bottom: -28px; width: 168px; z-index: 2; } @media (max-width: 859px) { .hero-phone { display: none; } } /* --- Une fonctionnalité : le texte d'un côté, sa preuve de l'autre ------ */ .feature { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 48px; align-items: center; } @media (max-width: 959px) { .feature { grid-template-columns: minmax(0, 1fr); gap: 28px; } } /* Une rangée sur deux inverse l'ordre visuel, jamais l'ordre du DOM : le lecteur d'écran et la navigation au clavier gardent « le titre, puis sa capture ». */ @media (min-width: 960px) { .feature-flip .feature-text { order: 2; } .feature-flip .feature-shot { order: 1; } } .feature + .feature { margin-top: 76px; } .feature h3 { font-size: 1.55rem; letter-spacing: -0.02em; margin: 10px 0 12px; } .feature p { color: var(--text-muted); line-height: 1.65; } .feature p + p { margin-top: 12px; } /* --- La rangée de téléphones ------------------------------------------- */ .phones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; max-width: 760px; margin: 0 auto; } @media (max-width: 719px) { .phones { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 460px; gap: 16px; } .phones > :nth-child(3) { display: none; } } /* --------------------------------------------------------------------- */ /* Les cinq plateformes */ /* --------------------------------------------------------------------- */ /* Le bandeau du haut de page. « Est-ce que ça existe sur CE que j'ai ? » est la première question d'un étudiant devant une app, et elle se pose avant d'avoir lu quoi que ce soit : la réponse vit donc au-dessus de la première capture, pas dans une section de bas de page. */ .platform-row { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 9px; } /* Centrée sous le haut de page, qui est lui-même centré ; alignée à gauche partout ailleurs, où elle suit un texte en drapeau. */ .hero .platform-row { justify-content: center; } .platform-chip { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 8px 15px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); box-shadow: var(--shadow-sm); font-size: 0.93rem; font-weight: 570; color: var(--text); white-space: nowrap; } .platform-chip svg { width: 17px; height: 17px; color: var(--accent); flex: none; } .platform-chip span { color: var(--text-faint); font-weight: 500; font-size: 0.83rem; } :root[data-theme='dark'] .platform-chip svg { color: var(--accent-hover); } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .platform-chip svg { color: var(--accent-hover); } } /* Sur un écran étroit, cinq pastilles sur cinq lignes tiennent plus de place que le titre : elles se resserrent plutôt que de disparaître — c'est justement l'information qu'on est venu chercher. */ @media (max-width: 719px) { .platform-row { justify-content: flex-start; gap: 7px; } .platform-chip { padding: 6px 11px; font-size: 0.85rem; } .platform-chip span { display: none; } } /* --- Les badges de plateforme ------------------------------------------- */ /* Une grille de cinq badges, pas cinq captures : la preuve visuelle est déjà faite ailleurs sur la page (le haut de page, puis chaque fonctionnalité). Ici, la seule question posée est « est-ce que ça existe sur CE que j'ai ? » — la réponse tient dans une icône et un nom, en plus grand que la rangée compacte du haut de page. */ .platform-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; } @media (max-width: 900px) { .platform-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 560px) { .platform-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .platform-badge { display: flex; align-items: center; gap: 14px; padding: 18px 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); } .platform-badge-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: var(--radius-md); background: var(--accent-soft); color: var(--accent); flex: none; } .platform-badge-icon svg { width: 24px; height: 24px; } :root[data-theme='dark'] .platform-badge-icon { color: var(--accent-hover); } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .platform-badge-icon { color: var(--accent-hover); } } .platform-badge-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .platform-badge-text b { font-size: 1rem; font-weight: 640; color: var(--text); } .platform-badge-text span { font-size: 0.82rem; color: var(--text-faint); } /* La phrase qui ferme une section, sous une grille plutôt qu'au-dessus. */ .section-note { max-width: 66ch; margin: clamp(28px, 3vw, 40px) auto 0; text-align: center; color: var(--text-muted); font-size: 0.97rem; } @media (max-width: 719px) { .section-note { text-align: left; } } /* Le haut de page centre son texte au-dessus de la capture : la capture est large, un bloc de texte poussé à gauche laisserait un vide en face d'elle. */ .hero-intro { max-width: 760px; margin: 0 auto; text-align: center; } .hero-intro .lead { margin-left: auto; margin-right: auto; } .hero-intro .btn-row { justify-content: center; } /* La note garde son alignement à gauche : centrée, son icône se retrouverait au milieu de la première ligne au lieu d'en marquer le début. */ .hero-intro .hero-note { justify-content: center; text-align: left; margin-left: auto; margin-right: auto; } .hero-caption { max-width: 68ch; margin-left: auto; margin-right: auto; text-align: center; } @media (max-width: 719px) { .hero-intro, .hero-intro .lead, .hero-caption { text-align: left; } .hero-intro .btn-row { justify-content: flex-start; } .hero-intro .hero-note { justify-content: flex-start; } } /* --------------------------------------------------------------------- */ /* Installer — les boutons de magasin */ /* */ /* L'app est SORTIE, et le site est ce qui se met entre quelqu'un et son */ /* installation. D'où la règle qui tient cette partie : le geste doit */ /* être disponible AVANT le premier défilement, sur la page d'accueil */ /* comme sur /telecharger/ — pas au bout d'un lien « en savoir plus ». */ /* */ /* Les badges officiels d'Apple et de Microsoft sont des IMAGES hébergées */ /* chez eux. On les redessine donc en SVG inline : la page d'accueil */ /* affirme n'avoir aucune ressource tierce, et `img-src 'self' data:` */ /* refuserait de toute façon l'image (sans une erreur visible — un cadre */ /* vide à la place du bouton d'installation, ce qui est le pire endroit). */ /* --------------------------------------------------------------------- */ .store-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .hero-intro .store-row { justify-content: center; } @media (max-width: 719px) { .hero-intro .store-row { justify-content: flex-start; } } .store-btn { position: relative; display: inline-flex; align-items: center; gap: 12px; padding: 12px 20px; border: 1px solid transparent; border-radius: var(--radius-lg); background: var(--accent); color: var(--accent-contrast); text-decoration: none; box-shadow: var(--shadow-md); transition: background 0.18s var(--ease), transform 0.18s var(--ease); } .store-btn:hover { background: var(--accent-hover); color: var(--accent-contrast); } .store-btn:active { transform: translateY(1px); } .store-btn svg { width: 26px; height: 26px; flex: none; } .store-btn-text { display: flex; flex-direction: column; line-height: 1.16; text-align: left; } .store-btn-text span { font-size: 0.78rem; font-weight: 500; opacity: 0.86; } .store-btn-text b { font-size: 1.04rem; font-weight: 640; } /* « Ton appareil », posé par site.js — voir la détection là-bas. Il ne MASQUE jamais l'autre bouton et n'en désactive aucun : une détection se trompe (un Mac qui annonce Windows sous une machine virtuelle, un navigateur qui ment par politique de confidentialité), et se tromper ne doit jamais coûter que l'ordre d'affichage. */ .store-flag { display: none; position: absolute; top: -10px; left: 14px; padding: 2px 9px; border-radius: var(--radius-pill); background: var(--success); color: #fff; font-size: 0.72rem; font-weight: 640; letter-spacing: 0.01em; box-shadow: var(--shadow-sm); } :root[data-os='windows'] .store-btn[data-os='windows'] .store-flag, :root[data-os='apple'] .store-btn[data-os='apple'] .store-flag { display: block; } :root[data-os='windows'] .store-btn[data-os='windows'], :root[data-os='apple'] .store-btn[data-os='apple'] { order: -1; } /* --------------------------------------------------------------------- */ /* Installer — la grille par appareil */ /* */ /* La même sur l'accueil et sur /telecharger/ : cinq lignes, chacune avec */ /* SON geste. Une grille de badges qui nomme les appareils sans donner */ /* le lien renvoie à la question qu'on vient de se poser — « oui, mais je */ /* l'installe où ? ». */ /* --------------------------------------------------------------------- */ .install-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); } /* Une grille, pas une rangée flex : le bouton est sur SA ligne, toujours. En flex, il repassait dessous dans les colonnes étroites et restait à côté dans les larges — six cartes, trois mises en page, et des hauteurs qui ne s'alignaient plus. Mesuré dans Chromium. */ .install-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px 14px; padding: 18px 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); } .install-card-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: var(--radius-md); background: var(--accent-soft); color: var(--accent); flex: none; } .install-card-icon svg { width: 24px; height: 24px; } :root[data-theme='dark'] .install-card-icon { color: var(--accent-hover); } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .install-card-icon { color: var(--accent-hover); } } .install-card-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .install-card-body b { font-size: 1rem; font-weight: 640; color: var(--text); } .install-card-body span { font-size: 0.82rem; color: var(--text-faint); } .install-card .btn { grid-column: 1 / -1; justify-self: start; padding: 9px 16px; font-size: 0.9rem; } /* Android n'est pas encore au magasin : la carte le DIT, et son geste est la liste d'attente — pas un bouton d'installation qui ne mène nulle part. L'icône passe en gris pour que la différence se voie sans lire. */ .install-card.is-soon { background: var(--bg-deep); } .install-card.is-soon .install-card-icon { background: var(--surface-2); color: var(--text-faint); } /* Les pastilles du haut de page mènent maintenant au magasin de leur système : c'est la première chose qu'on lit (« est-ce que ça existe sur CE que j'ai ? ») et c'était jusqu'ici la seule réponse qui ne se cliquait pas. `a.platform-chip` hérite de tout le style de la pastille ; il n'y a que l'état de survol à ajouter. */ a.platform-chip { text-decoration: none; } a.platform-chip:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--text); } /* Et sur un téléphone Android, c'est la carte « bientôt » qui passe devant : la seule chose qu'on puisse y faire est de laisser son adresse, autant ne pas la faire chercher sous quatre cartes qui ne servent à rien ici. */ :root[data-os='android'] .install-card.is-soon { order: -1; } /* Le rappel « c'est déjà installable », en tête de la liste d'attente. Un lien ancien, un signet, un message d'un copain : on arrive encore sur cette page-là avec un Windows ou un iPhone en main. Lui faire laisser son adresse pour une app qu'il peut installer en dix secondes serait le seul vrai échec possible de cette page. */ .install-now { margin-top: 24px; padding: 18px 18px 20px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); } .install-now p { color: var(--text-muted); font-size: 0.95rem; margin-bottom: 14px; } .install-now p b { color: var(--text); }