/* ============================================================ Site vitrine flashcards — feuille unique, sans dépendance. Mise en œuvre de la passe Claude Design du 2026-08-30 : papier chaud, Fraunces en display, violet mesuré. Les styles en ligne du prototype sont convertis en tokens ; le prototype lui-même n'est pas repris tel quel. Tokens sémantiques : le thème sombre réassigne les mêmes noms, donc aucun composant ne connaît son thème. Les valeurs sombres dérivent de la section « Parti pris », seule surface sombre que le design définit lui-même. ============================================================ */ /* ---------- Polices auto-hébergées (aucun appel tiers) ---------- */ @font-face { font-family: Fraunces; font-style: normal; font-weight: 400 900; font-display: swap; src: url("/assets/fonts/fraunces-var-latin.woff2") format("woff2"); } /* Italique réservée au logotype : sous-ensemble des lettres de « flashcards ». */ @font-face { font-family: "Fraunces Logotype"; font-style: italic; font-weight: 800; font-display: swap; src: url("/assets/fonts/fraunces-italic-logotype.woff2") format("woff2"); } @font-face { font-family: Figtree; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/figtree-var-latin.woff2") format("woff2"); } @font-face { font-family: Inter; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/assets/fonts/inter-var-latin.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/ibm-plex-mono-400-latin.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/ibm-plex-mono-500-latin.woff2") format("woff2"); } /* ---------- Tokens ---------- */ /* Chaque token porte ses deux valeurs : light-dark() choisit selon le `color-scheme` effectif. Une seule définition par token, donc aucune palette à tenir en double. Le `color-scheme` vient de la préférence système, sauf si le visiteur a basculé le thème lui-même : le script pose alors data-theme sur et les deux règles ci-dessous figent le choix. */ :root { color-scheme: light dark; /* Surfaces */ --paper: light-dark(#f4f1ec, #211e1a); --card: light-dark(#fdfbf7, #2b2620); --card-sunk: light-dark(#eeeae2, #363029); /* Encres */ --ink: light-dark(#2b2620, #f4f1ec); --ink-soft: light-dark(#4e4638, #e0d9cd); --muted: light-dark(#6d6458, #c1b8ab); /* Le design pose #8C8399, qui ne donne que 3,2:1 sur le papier alors qu'il porte du vrai texte (« Par mois », notes de tarifs, légendes de la démonstration). Même teinte gris-violet, valeur descendue jusqu'à 4,9:1. */ --faint: light-dark(#6e6578, #a1988c); /* Lignes */ --line: light-dark(#e4ded2, #46403a); --line-strong: light-dark(#d4ccbe, #5b544b); /* Accent */ --violet: light-dark(#6f52cc, #b4a0f5); --violet-deep: light-dark(#543ca8, #cabbfc); --violet-pale: light-dark(#b4a0f5, #cabbfc); --violet-soft: light-dark(#efeafb, #332c46); --violet-edge: light-dark(#dfd6f5, #473d63); --on-violet: light-dark(#fdfbf7, #1d1633); /* Section inversée (« Parti pris ») */ --invert-bg: light-dark(#2b2620, #17140f); --invert-ink: light-dark(#f4f1ec, #f4f1ec); --invert-muted: light-dark(#c7bfb2, #c7bfb2); --invert-faint: light-dark(#a79e91, #a79e91); --invert-line: light-dark(#46403a, #3b352e); /* Faces de la carte de démonstration. En sombre, mêmes teintes pastel, valeur basse : la carte reste colorée sans éclairer l'écran. */ --face-front: linear-gradient( 158deg, light-dark(#fae7ec, #3a2b30) 0%, light-dark(#fdf4e2, #3a3427) 26%, light-dark(#e9f6ec, #2a3a2e) 52%, light-dark(#e4effa, #29323f) 76%, light-dark(#ede6fa, #322b45) 100% ); --face-back: linear-gradient( 158deg, light-dark(#ede6fa, #322b45) 0%, light-dark(#e4effa, #29323f) 26%, light-dark(#e9f6ec, #2a3a2e) 52%, light-dark(#fdf4e2, #3a3427) 76%, light-dark(#fae7ec, #3a2b30) 100% ); --face-ink: light-dark(#2b2620, #f4f1ec); --face-muted: light-dark(#6d6458, #c1b8ab); --face-chip: light-dark(rgb(253 251 247 / 0.72), rgb(23 20 15 / 0.5)); --face-blank: light-dark(#ded5f3, #4a4066); --face-reveal-bg: light-dark(#efeafb, #3a3157); --face-reveal-ink: light-dark(#543ca8, #d3c6ff); /* Teintes des types de cartes */ --tint-texte: light-dark(#efeafb, #372f4d); --tint-image: light-dark(#e4effa, #26313f); --tint-audio: light-dark(#e9f6ec, #263a2d); --tint-trous: light-dark(#fdf4e2, #3c3524); --tint-occlusion: light-dark(#fae7ec, #3f2a31); --tint-qcm: light-dark(#eeeae2, #363029); /* Notes de révision */ --note-again: light-dark(#c62828, #ff8a80); --note-hard: light-dark(#b5480a, #ffb27a); --note-good: light-dark(#1565c0, #90c2ff); --note-easy: light-dark(#2e7d32, #91d69a); /* Marque : filet de tête et logotype, rien d'autre */ --brand: linear-gradient(100deg, #4230fc, #3553fa 30%, #14adf6 72%, #01e4f4); /* Ombres */ --shadow-soft: 0 4px 14px light-dark(rgb(43 38 32 / 0.04), rgb(0 0 0 / 0.3)); --shadow-card: 0 14px 30px light-dark(rgb(43 38 32 / 0.08), rgb(0 0 0 / 0.45)); --shadow-panel: 0 24px 60px light-dark(rgb(43 38 32 / 0.1), rgb(0 0 0 / 0.5)); --shadow-face: 0 10px 24px light-dark(rgb(43 38 32 / 0.1), rgb(0 0 0 / 0.4)); --shadow-phone: 0 18px 44px light-dark(rgb(43 38 32 / 0.14), rgb(0 0 0 / 0.5)); --shadow-cta: 0 8px 20px light-dark(rgb(111 82 204 / 0.24), rgb(0 0 0 / 0.4)); --shadow-cta-hover: 0 12px 26px light-dark(rgb(111 82 204 / 0.3), rgb(0 0 0 / 0.5)); --shadow-plan: 0 16px 38px light-dark(rgb(111 82 204 / 0.14), rgb(0 0 0 / 0.45)); /* Typographie */ --serif: Fraunces, Georgia, "Times New Roman", serif; --ui: Figtree, system-ui, -apple-system, "Segoe UI", sans-serif; --body: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; /* Rythme */ --wrap: 1140px; --gutter: clamp(20px, 4vw, 40px); --section-y: clamp(56px, 8vw, 96px); --ease: cubic-bezier(0.2, 0.7, 0.2, 1); } :root[data-theme="light"] { color-scheme: only light; } :root[data-theme="dark"] { color-scheme: only dark; } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.6; overflow-x: hidden; } h1, h2, h3, h4, p, ul, li, figure, figcaption, dl { margin: 0; padding: 0; } ul { list-style: none; } img { display: block; max-width: 100%; } a { color: var(--violet); text-decoration-thickness: 1px; text-underline-offset: 0.2em; } a:hover { color: var(--violet-deep); } button { font: inherit; } :focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 4px; } ::selection { background: var(--violet-soft); color: var(--ink); } .wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } /* L'en-tête est collant : sans ce décalage, une ancre amène le haut de la section sous la barre et le surtitre se retrouve coupé. La valeur suit la hauteur de l'en-tête ; le rembourrage de la section fournit l'air au-dessus du titre. */ [id] { scroll-margin-top: 70px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .skip-link { position: absolute; left: var(--gutter); top: -100%; z-index: 60; background: var(--violet); color: var(--on-violet); padding: 10px 16px; border-radius: 0 0 12px 12px; font-family: var(--ui); font-weight: 600; text-decoration: none; } .skip-link:focus { top: 0; } /* ---------- Éléments récurrents ---------- */ .eyebrow { display: block; font-family: var(--ui); font-size: 12px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--violet); } .h2 { margin-top: 12px; font-family: var(--serif); font-weight: 600; font-size: clamp(30px, 3.8vw, 46px); line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; } .lede { margin-top: 18px; font-size: 17px; line-height: 1.65; color: var(--muted); max-width: 60ch; text-wrap: pretty; } .badge { display: inline-block; margin-left: 4px; padding: 2px 8px; border-radius: 999px; background: var(--violet-soft); color: var(--violet-deep); font-family: var(--ui); font-size: 10.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; vertical-align: 2px; } .chip { border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 6px 13px; font-size: 13px; color: var(--muted); } .btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--ui); font-weight: 600; font-size: 16px; padding: 15px 24px; border-radius: 16px; text-decoration: none; white-space: nowrap; transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease); } .btn-primary { background: var(--violet); color: var(--on-violet); box-shadow: var(--shadow-cta); } .btn-primary:hover { color: var(--on-violet); transform: translateY(-2px); box-shadow: var(--shadow-cta-hover); } .btn-ghost { border: 1px solid var(--line); color: var(--ink); } .btn-ghost:hover { color: var(--ink); border-color: var(--line-strong); background: var(--card); } .btn-soon { border: 1px solid var(--line); color: var(--faint); padding: 15px 22px; cursor: default; } .btn-soon small { font-weight: 500; font-size: 13px; } /* ---------- Filet de marque, en-tête ---------- */ .brand-bar { height: 4px; background: var(--brand); } .site-header { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); } .site-header .wrap { min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); } .logo img { width: 24px; height: 27px; } .logotype { font-family: "Fraunces Logotype", var(--serif); font-style: italic; font-weight: 800; font-size: 21px; letter-spacing: -0.01em; background: var(--brand); -webkit-background-clip: text; background-clip: text; color: transparent; } .site-nav { display: flex; align-items: center; gap: clamp(14px, 2.5vw, 28px); } .site-nav a { font-size: 14px; color: var(--muted); text-decoration: none; white-space: nowrap; } .site-nav a:hover { color: var(--ink); } .nav-cta { display: inline-flex; align-items: center; gap: 8px; background: var(--ink); color: var(--paper); font-family: var(--ui); font-weight: 600; font-size: 14px; padding: 9px 16px; border-radius: 999px; text-decoration: none; white-space: nowrap; transition: background 0.2s var(--ease); } .nav-cta:hover { background: var(--violet); color: var(--on-violet); } /* ---------- Bascule de thème ---------- */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; /* Le bouton n'est pas emporté par la vague : sa propre couche le garde net pendant la transition. */ view-transition-name: fc-theme-toggle; width: 36px; height: 36px; flex: 0 0 auto; padding: 0; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; transition: border-color 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease); } .theme-toggle:hover { border-color: var(--line-strong); background: var(--card); color: var(--ink); } .theme-toggle svg { width: 17px; height: 17px; transition: transform 0.45s var(--ease); } .theme-toggle:hover svg { transform: rotate(25deg); } /* Le bouton montre l'astre du thème vers lequel il mène. `data-resolved` est posé par le script : il dit quel thème est réellement affiché, y compris quand on suit la préférence système. */ :root[data-resolved="light"] .icon-sun, :root[data-resolved="dark"] .icon-moon { display: none; } /* ---------- Sélecteur de langue ---------- Un
plutôt qu'un menu en JavaScript : il s'ouvre et se ferme tout seul, ses entrées sont de vrais liens, et l'ensemble fonctionne sans script. Le résumé reprend la forme ronde du bouton de thème. */ .lang { position: relative; flex: 0 0 auto; } .lang-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); font-family: var(--ui); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; cursor: pointer; list-style: none; user-select: none; transition: border-color 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease); } /* La puce native du se retire différemment selon les moteurs. */ .lang-toggle::-webkit-details-marker { display: none; } .lang-toggle::marker { content: ""; } .lang-toggle:hover, .lang[open] .lang-toggle { border-color: var(--line-strong); background: var(--card); color: var(--ink); } .lang-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 50; min-width: 160px; padding: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-card); } .lang-menu a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border-radius: 9px; font-family: var(--ui); font-size: 14px; font-weight: 500; color: var(--muted); text-decoration: none; white-space: nowrap; } .lang-menu a:hover { background: var(--card-sunk); color: var(--ink); } .lang-menu a[aria-current="true"] { color: var(--ink); font-weight: 600; } .lang-menu .code { font-family: var(--mono); font-size: 11px; color: var(--faint); } /* Sur les écrans étroits, la nav textuelle disparaît : le menu s'ancre alors sur le bord droit de la fenêtre plutôt que sous un bouton très à droite. */ @media (max-width: 620px) { .lang-menu { right: -8px; } } @media (max-width: 620px) { .nav-link { display: none; } } /* ---------- Hero ---------- */ .hero { max-width: var(--wrap); margin-inline: auto; padding: clamp(48px, 8vw, 92px) var(--gutter) clamp(40px, 6vw, 72px); display: grid; gap: clamp(40px, 6vw, 64px); grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); align-items: center; } .hero-flag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--ui); font-size: 12px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--violet); background: var(--violet-soft); border: 1px solid var(--violet-edge); padding: 6px 12px; border-radius: 999px; white-space: nowrap; } .hero h1 { margin-top: 22px; font-family: var(--serif); font-weight: 600; font-size: clamp(40px, 6.4vw, 68px); line-height: 1.02; letter-spacing: -0.025em; text-wrap: balance; } .hero-lede { margin-top: 22px; font-size: clamp(17px, 1.4vw, 19px); line-height: 1.6; color: var(--muted); max-width: 40ch; text-wrap: pretty; } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } .hero-points { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 26px; font-size: 14px; color: var(--muted); } .hero-points li { display: flex; align-items: center; gap: 8px; white-space: nowrap; } .hero-points li::before { content: ""; width: 5px; height: 5px; border-radius: 99px; background: var(--violet); } /* ---------- Démonstration jouable ---------- */ .demo { background: var(--card); border: 1px solid var(--line); border-radius: 28px; padding: clamp(16px, 2.4vw, 22px); box-shadow: var(--shadow-panel); } .demo-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 4px 12px; } .demo-head .label { font-family: var(--ui); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); white-space: nowrap; } .demo-head .count { font-family: var(--mono); font-size: 12px; color: var(--muted); } .demo-track { height: 3px; background: var(--card-sunk); border-radius: 99px; overflow: hidden; } .demo-track span { display: block; height: 100%; border-radius: 99px; background: var(--violet); transition: width 0.4s var(--ease); } .demo-stage { perspective: 1400px; margin-top: 16px; } .demo-card { position: relative; height: clamp(300px, 42vh, 360px); transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(0.35, 0.9, 0.25, 1); cursor: pointer; } .demo-card.is-flipped { transform: rotateY(180deg); } .demo-face { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 24px; padding: 22px; display: flex; flex-direction: column; box-shadow: var(--shadow-face); transition: opacity 0.01s linear 0.3s; } .demo-face-front { background: var(--face-front); transform: rotateY(0deg); } .demo-face-back { background: var(--face-back); transform: rotateY(180deg); opacity: 0; } .demo-card.is-flipped .demo-face-front { opacity: 0; } .demo-card.is-flipped .demo-face-back { opacity: 1; } .demo-tag { display: flex; justify-content: flex-end; } .demo-tag span { display: inline-flex; align-items: center; gap: 7px; background: var(--face-chip); border-radius: 999px; padding: 6px 12px; font-size: 12px; color: var(--face-muted); } .demo-body { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 8px 4px; } .demo-prompt { text-align: center; font-family: var(--serif); font-size: clamp(21px, 2.2vw, 26px); line-height: 1.32; color: var(--face-ink); text-wrap: pretty; } .demo-answer { text-align: center; font-family: var(--serif); font-size: clamp(19px, 1.9vw, 23px); line-height: 1.34; color: var(--face-ink); text-wrap: pretty; } /* Mot masqué du texte à trous : lisible seulement au verso. */ .cloze { background: var(--face-blank); color: transparent; border-radius: 5px; } .cloze-shown { background: var(--face-reveal-bg); color: var(--face-reveal-ink); border-radius: 5px; } .demo-recall { text-align: center; font-family: var(--serif); font-size: 17px; line-height: 1.4; color: var(--face-muted); padding-bottom: 14px; border-bottom: 1px solid color-mix(in srgb, var(--face-ink) 12%, transparent); } .demo-code { margin: 0; background: var(--face-chip); border-radius: 14px; padding: 16px 18px; font-family: var(--mono); font-size: 14px; line-height: 1.65; color: var(--face-ink); overflow-x: auto; text-align: left; } .demo-flip-hint { text-align: center; font-family: var(--ui); font-size: 12px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--faint); } .demo-notes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 16px; } .demo-note { display: flex; flex-direction: column; align-items: center; gap: 3px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 11px 4px; cursor: pointer; transition: transform 0.18s var(--ease), border-color 0.18s, background 0.18s; } .demo-note:hover { transform: translateY(-2px); border-color: var(--line-strong); background: var(--card-sunk); } .demo-note .arrow { font-size: 17px; line-height: 1; } .demo-note .name { font-family: var(--ui); font-size: 12px; font-weight: 600; color: var(--ink); } .demo-note .when { font-family: var(--mono); font-size: 10.5px; color: var(--muted); min-height: 14px; } .demo-foot { min-height: 26px; margin-top: 12px; text-align: center; font-size: 13px; } .demo-foot .hint { color: var(--faint); } .demo-foot .toast { color: var(--muted); animation: fcToast 2s ease both; } /* ---------- Méthode ---------- */ .band { background: var(--card); border-block: 1px solid var(--line); padding-block: var(--section-y); } .section { padding-block: var(--section-y); } .schedule { margin-top: clamp(36px, 5vw, 56px); border: 1px solid var(--line); border-radius: 24px; background: var(--paper); padding: clamp(20px, 3vw, 32px); } .schedule-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .schedule-head p:first-child { font-family: var(--ui); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } .schedule-head p:last-child { font-size: 13px; color: var(--faint); } .schedule-rows { margin-top: 24px; display: grid; gap: 11px; } .schedule-row { display: grid; grid-template-columns: 78px 1fr; gap: 16px; align-items: center; } .schedule-row dt { font-family: var(--serif); font-size: 18px; font-weight: 600; color: var(--ink); text-align: right; white-space: nowrap; } .schedule-row dd { margin: 0; display: flex; align-items: center; gap: 12px; min-width: 0; } .schedule-bar { height: 11px; border-radius: 99px; background: linear-gradient(90deg, var(--violet-pale), var(--violet)); flex: 0 0 auto; } .schedule-note { font-family: var(--mono); font-size: 11.5px; color: var(--faint); } .trio { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 20px; } .tile { border: 1px solid var(--line); border-radius: 20px; padding: 22px; background: var(--paper); } .tile h3 { font-family: var(--ui); font-size: 17px; font-weight: 600; } .tile p { margin-top: 8px; font-size: 15px; line-height: 1.6; color: var(--muted); } /* ---------- Types de cartes ---------- */ .split-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px; } .split-head .h2 { max-width: 22ch; } .split-head > p { font-size: 15px; line-height: 1.6; color: var(--muted); max-width: 34ch; } .types { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin-top: clamp(32px, 4vw, 48px); } .type { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 22px; box-shadow: var(--shadow-soft); transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease); } .type:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); } .type-mark { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 12px; font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--ink); } .type h3 { margin-top: 14px; font-family: var(--ui); font-size: 16.5px; font-weight: 600; } .type p { margin-top: 6px; font-size: 14.5px; line-height: 1.55; color: var(--muted); } /* ---------- Parti pris (section inversée) ---------- */ .stance { background: var(--invert-bg); color: var(--invert-ink); padding-block: clamp(56px, 8vw, 92px); } .stance .wrap { display: grid; gap: clamp(32px, 5vw, 56px); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: center; } .stance .eyebrow { color: var(--violet-pale); } .stance .h2 { margin-top: 14px; } .stance-lede { margin-top: 18px; font-size: 16.5px; line-height: 1.65; color: var(--invert-muted); max-width: 46ch; text-wrap: pretty; } .stance-list { display: grid; gap: 2px; } .stance-list li { display: flex; align-items: baseline; gap: 16px; padding: 16px 0; border-top: 1px solid var(--invert-line); } .stance-num { font-family: var(--mono); font-size: 12px; color: var(--invert-faint); } .stance-list h3 { font-family: var(--ui); font-size: 18px; font-weight: 600; letter-spacing: -0.01em; } .stance-list p { margin-top: 4px; font-size: 14.5px; line-height: 1.55; color: var(--invert-faint); } /* ---------- Aperçu ---------- */ .shots { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; margin-top: clamp(28px, 4vw, 44px); padding: 6px var(--gutter) 18px; max-width: var(--wrap); margin-inline: auto; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; } .shots::-webkit-scrollbar { height: 8px; } .shots::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; } .shots li { flex: 0 0 auto; scroll-snap-align: center; width: 252px; } .phone { width: 252px; padding: 7px; background: var(--card-sunk); border: 1px solid var(--line); border-radius: 32px; box-shadow: var(--shadow-phone); } .phone img { width: 100%; height: auto; border-radius: 25px; } .shots figcaption { margin-top: 14px; font-size: 14px; line-height: 1.5; color: var(--muted); } /* ---------- Partage ---------- */ .share { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .share-head { grid-column: 1 / -1; margin-bottom: 8px; } .share-head .h2 { max-width: 26ch; } .panel { background: var(--paper); border: 1px solid var(--line); border-radius: 22px; padding: clamp(22px, 3vw, 30px); } .panel h3 { font-family: var(--ui); font-size: 19px; font-weight: 600; } .panel > p { margin-top: 10px; font-size: 15.5px; line-height: 1.6; color: var(--muted); } .code-plate { display: flex; align-items: center; gap: 14px; margin-top: 20px; padding: 14px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; } .code-plate .key { font-family: var(--mono); font-size: 12px; color: var(--faint); } .code-plate .val { font-family: var(--mono); font-size: 19px; font-weight: 500; letter-spacing: 0.22em; color: var(--ink); } .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; } .panel-wide { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding: clamp(20px, 2.6vw, 26px); } .panel-wide p { margin-top: 8px; font-size: 15.5px; line-height: 1.6; color: var(--muted); max-width: 52ch; } .langs { display: flex; flex-wrap: wrap; gap: 7px; } .langs li { border: 1px solid var(--line); background: var(--card); border-radius: 10px; padding: 6px 10px; font-family: var(--mono); font-size: 12px; color: var(--muted); } /* ---------- Tarifs ---------- */ .plans { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: clamp(32px, 4vw, 48px); align-items: start; } .plan { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: clamp(22px, 3vw, 28px); } .plan-featured { border: 1.5px solid var(--violet); box-shadow: var(--shadow-plan); } .plan-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .plan h3 { font-family: var(--ui); font-size: 17px; font-weight: 600; } .plan-flag { padding: 4px 10px; border-radius: 999px; background: var(--violet); color: var(--on-violet); font-family: var(--ui); font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } .price { margin-top: 10px; font-family: var(--serif); font-size: 40px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; } .price-unit { margin-top: 6px; font-size: 13.5px; color: var(--faint); } .plan ul { display: grid; gap: 10px; margin-top: 22px; } .plan li { display: flex; gap: 11px; font-size: 15px; color: var(--muted); } .plan li::before { content: ""; flex: 0 0 auto; width: 6px; height: 6px; margin-top: 8px; border-radius: 99px; background: var(--violet); } .plans-note { margin-top: 24px; font-size: 14px; line-height: 1.6; color: var(--faint); max-width: 62ch; } /* ---------- Clôture ---------- */ .closing { border-top: 1px solid var(--line); padding: clamp(60px, 9vw, 110px) var(--gutter); text-align: center; } .closing h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(32px, 4.6vw, 54px); line-height: 1.06; letter-spacing: -0.025em; max-width: 22ch; margin-inline: auto; text-wrap: balance; } .closing p { margin: 18px auto 0; font-size: 17px; line-height: 1.6; color: var(--muted); max-width: 44ch; } .closing-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 30px; } /* ---------- Pied de page ---------- */ .site-footer { border-top: 1px solid var(--line); background: var(--card); padding-block: 40px; } .site-footer .wrap { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; } .footer-id { display: flex; align-items: center; gap: 11px; } .footer-id img { width: 20px; height: 23px; } .footer-id p, .footer-links { font-size: 14px; color: var(--muted); } .footer-links { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; } .footer-id a, .footer-links a { color: var(--muted); white-space: nowrap; } .footer-id a:hover, .footer-links a:hover { color: var(--ink); } /* ---------- Page 404 ---------- */ .center-page { min-height: 62svh; display: grid; place-content: center; text-align: center; gap: 14px; padding-block: var(--section-y); } .center-page h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(30px, 4.6vw, 46px); line-height: 1.08; letter-spacing: -0.02em; } .center-page p { color: var(--muted); max-width: 44ch; margin-inline: auto; } /* ---------- Mouvement ---------- */ @keyframes fcRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes fcToast { 0% { opacity: 0; transform: translateY(6px); } 12% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; } } /* ---------- Vague de bascule du thème ---------- Le changement de thème passe par une transition de vue : le navigateur photographie la page avant et après, et le script découpe la nouvelle image en un disque qui s'ouvre depuis le bouton. Le fondu par défaut est retiré, sinon les deux thèmes se superposeraient au lieu de se recouvrir. Sans l'API (ou en mouvement réduit), le thème bascule d'un coup : le script n'ouvre alors aucune transition. */ ::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; } ::view-transition-old(root) { z-index: 1; } ::view-transition-new(root) { z-index: 2; } /* Le bouton reste au-dessus de la vague, sans animation propre. */ ::view-transition-group(fc-theme-toggle) { z-index: 3; } ::view-transition-old(fc-theme-toggle), ::view-transition-new(fc-theme-toggle) { animation: none; } .rise { animation: fcRise 0.7s var(--ease) both; } .rise-late { animation: fcRise 0.8s 0.12s var(--ease) both; } /* Les apparitions au défilement ne masquent rien sans JS. */ .js .reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); transition-delay: calc(var(--i, 0) * 55ms); } .js .reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js .reveal { opacity: 1; transform: none; transition: none; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }