/* ═══════════════════════════════════════════════════════════════════ REBOOT PLAN · rp4.css · socle de la refonte du site (DA 4.0 de l'app) ─────────────────────────────────────────────────────────────────── Feuille UNIQUE d'une page migrée : elle ne charge ni tokens.css, ni base.css, ni components.css (ces trois-là restent pour les pages non migrées, on n'y touche pas). Conventions - Classes : préfixe unique « rp4- » (rp4-btn, rp4-card…). Variantes en « --mod » (rp4-btn--primary), éléments en « -nom » (rp4-plan-price). - Tokens : noms de l'app (--bg, --text, --gold…), préfixe --w- pour ce qui n'existe que sur le web (--w-hero, --w-section…). On AJOUTE des tokens, on n'en renomme jamais. - Deux expériences sous une même URL : pouce = largeur < 768 px : pilule de nav, menu en feuille du bas, CTA de verre collé en bas, segments aimantés, cibles 44 px. pointeur = largeur ≥ 768 px : barre de verre complète, deux colonnes à partir de 1024 px. Le survol n'existe que sous (hover: hover) and (pointer: fine). - Clair par défaut, sombre automatique (prefers-color-scheme), sans bouton. :root[data-theme] ne sert qu'aux vérifications (captures) : jamais posé en production. - L'or #C9A84C est un REMPLISSAGE en clair, jamais du texte (texte doré = --gold-text). CTA à l'encre, comme l'app. Référence visuelle : _preview_refonte.html (arbre principal). Contrat : _partials/CONTRAT.md. ═══════════════════════════════════════════════════════════════════ */ /* ═══════════ 1. Tokens, clair par défaut ═══════════ */ :root { color-scheme: light dark; /* Surfaces (app tokens.css:55-59) */ --bg: #F2F2F7; --bg2: #FFFFFF; --bg3: #F7F7FA; --bg-raised: #EBEBF0; --border: #E5E5EA; --sep: rgba(60,60,67,.18); /* Encres */ --text: #1D1D1F; --text2: #3A3A3C; --text3: #6E6E73; --text4: #AEAEB2; /* Marque : --gold = remplissage seulement en clair */ --gold: #C9A84C; --gold-text: #8B6914; --on-gold: #1D1D1F; --gold-a15: rgba(201,168,76,.15); --gold-a45: rgba(201,168,76,.45); /* Action */ --cta-bg: #1D1D1F; --cta-text: #FFFFFF; --cta-bg-pressed: #3A3A3C; --link: #0067D6; --focus: #007AFF; --focus-a30: rgba(0,122,255,.30); /* Remplissages système */ --fill-1: rgba(120,120,128,.20); --fill-2: rgba(120,120,128,.16); --fill-3: rgba(118,118,128,.12); --fill-4: rgba(116,116,128,.08); /* États (texte) */ --ok-text: #1F7A32; --warn-text: #A85D00; --danger-text: #C4281E; /* Accents sujet (pastilles d'icône) */ --acc-steps: #FF6B22; --acc-sleep: #5E5CE6; --acc-heart: #FF2D55; --acc-nutri: #34C759; --acc-body: #007AFF; --acc-train: #1D1D1F; --acc-cycle: #AF52DE; /* Sur une photo ou une vidéo (une image n'a pas de mode clair) */ --on-media: #FFFFFF; --on-media-2: rgba(255,255,255,.82); --on-media-fill: rgba(0,0,0,.42); --on-media-scrim: rgba(0,0,0,.72); /* Photo sombre posée comme sa propre surface (photos de Paul, vignettes de reels) : fond de repli, liseré */ --photo-bg: #0B0B0C; --photo-rim: rgba(0,0,0,.08); /* Ombres */ --elev-2: 0 8px 28px rgba(0,0,0,.10); --elev-sheet: 0 -8px 40px rgba(0,0,0,.14); /* Verre (audit-da §2.6) : nav, feuille, CTA collé. Trois pièces visibles au plus, jamais une carte. */ --glass-bg: rgba(255,255,255,.62); --glass-bg-strong: rgba(255,255,255,.86); --glass-border: rgba(0,0,0,.06); --glass-blur: 32px; --glass-saturate: 200%; --glass-highlight: rgba(255,255,255,.55); --glass-rim: rgba(255,255,255,.90); --nav-glass-clear: rgba(255,255,255,.42); --nav-specular: linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.18) 38%, rgba(255,255,255,0) 62%); --nav-edge: rgba(0,0,0,.09); --nav-inner-rim: rgba(255,255,255,.45); --elev-nav: 0 8px 28px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.05); --scrim: rgba(0,0,0,.28); --seg-on: #FFFFFF; /* (mouvement) halo qui suit le pointeur sur les cartes cliquables (souris seulement) */ --glow: rgba(120,120,128,.12); --logo: var(--text); /* encre en clair (se lit mieux à 32 px que l'or), or en sombre */ /* Typo : système sur Apple (Inter n'y est jamais téléchargée), Inter ailleurs (repère : bevel.health) */ --font: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif; --font-display: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif; --font-rounded: ui-rounded, var(--font-display); --body-w: 500; --body-ls: .01em; /* corps façon Bevel */ --w-hero: clamp(2.5rem, 1.6rem + 4.4vw, 5.5rem); --w-display: clamp(2.125rem, 1.5rem + 3vw, 4rem); --w-title1: clamp(1.75rem, 1.35rem + 1.9vw, 3rem); --w-title2: clamp(1.375rem, 1.2rem + .8vw, 2rem); --w-title3: clamp(1.25rem, 1.15rem + .4vw, 1.5rem); --w-lead: clamp(1.0625rem, .95rem + .6vw, 1.5rem); --w-body: 1.0625rem; --w-callout: 1rem; --w-footnote: .8125rem; --w-caption: .75rem; --w-stat: clamp(3.5rem, 2.4rem + 4vw, 6rem); /* Rayons, espacements, largeurs */ --r-xs: 8px; --r-sm: 12px; --r-card: 20px; --w-r-bento: clamp(20px, 1.2rem + .6vw, 28px); --r-pill: 999px; --w-section: clamp(72px, 4rem + 6vw, 160px); --w-gutter: clamp(16px, 4vw, 48px); --w-max: 1200px; --w-narrow: 880px; --w-read: 680px; --gap-bento: clamp(12px, 1.5vw, 20px); --pad-bento: clamp(20px, 2.5vw, 40px); /* Mouvement */ --dur-press: 120ms; --dur-fast: 150ms; --dur-base: 220ms; --dur-slow: 350ms; --w-dur-reveal: 600ms; --ease-out: cubic-bezier(.22,1,.36,1); --ease-sheet: cubic-bezier(.32,.72,0,1); --nav-h: 52px; interpolate-size: allow-keywords; } /* Sombre automatique : mêmes valeurs que l'app (tokens.css:813-914) */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #000000; --bg2: #1C1C1E; --bg3: #2C2C2E; --bg-raised: #2C2C2E; --border: #38383A; --sep: rgba(84,84,88,.6); --text: #F2F2F7; --text2: #D1D1D6; --text3: #A1A1A6; --text4: #636366; --gold-text: #E8C76C; --cta-bg: #F2F2F7; --cta-text: #1D1D1F; --cta-bg-pressed: #D1D1D6; --link: #5AA9FF; --focus: #0A84FF; --focus-a30: rgba(10,132,255,.35); --acc-train: #F2F2F7; --ok-text: #5CD67A; --warn-text: #FFB340; --danger-text: #FF6B61; --fill-1: rgba(120,120,128,.36); --fill-2: rgba(120,120,128,.32); --fill-3: rgba(118,118,128,.24); --fill-4: rgba(116,116,128,.18); --elev-2: 0 8px 28px rgba(0,0,0,.5); --elev-sheet: 0 -8px 40px rgba(0,0,0,.6); --glass-bg: rgba(28,28,30,.62); --glass-bg-strong: rgba(28,28,30,.92); --glass-border: rgba(255,255,255,.08); --glass-highlight: rgba(255,255,255,.10); --glass-rim: rgba(255,255,255,.14); --nav-glass-clear: rgba(28,28,30,.58); --nav-specular: linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.03) 38%, rgba(255,255,255,0) 62%); --nav-edge: rgba(0,0,0,.60); --nav-inner-rim: rgba(255,255,255,.08); --elev-nav: 0 8px 28px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.4); --scrim: rgba(0,0,0,.5); --seg-on: #636366; --logo: #C9A84C; --photo-rim: rgba(255,255,255,.16); --glow: rgba(255,255,255,.07); } } /* Vérification seulement (captures, ?theme=dark de la page gabarit). Jamais posé en production. */ :root[data-theme="dark"] { color-scheme: dark; --bg: #000000; --bg2: #1C1C1E; --bg3: #2C2C2E; --bg-raised: #2C2C2E; --border: #38383A; --sep: rgba(84,84,88,.6); --text: #F2F2F7; --text2: #D1D1D6; --text3: #A1A1A6; --text4: #636366; --gold-text: #E8C76C; --cta-bg: #F2F2F7; --cta-text: #1D1D1F; --cta-bg-pressed: #D1D1D6; --link: #5AA9FF; --focus: #0A84FF; --focus-a30: rgba(10,132,255,.35); --acc-train: #F2F2F7; --ok-text: #5CD67A; --warn-text: #FFB340; --danger-text: #FF6B61; --fill-1: rgba(120,120,128,.36); --fill-2: rgba(120,120,128,.32); --fill-3: rgba(118,118,128,.24); --fill-4: rgba(116,116,128,.18); --elev-2: 0 8px 28px rgba(0,0,0,.5); --elev-sheet: 0 -8px 40px rgba(0,0,0,.6); --glass-bg: rgba(28,28,30,.62); --glass-bg-strong: rgba(28,28,30,.92); --glass-border: rgba(255,255,255,.08); --glass-highlight: rgba(255,255,255,.10); --glass-rim: rgba(255,255,255,.14); --nav-glass-clear: rgba(28,28,30,.58); --nav-specular: linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.03) 38%, rgba(255,255,255,0) 62%); --nav-edge: rgba(0,0,0,.60); --nav-inner-rim: rgba(255,255,255,.08); --elev-nav: 0 8px 28px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.4); --scrim: rgba(0,0,0,.5); --seg-on: #636366; --logo: #C9A84C; --photo-rim: rgba(255,255,255,.16); --glow: rgba(255,255,255,.07); } /* ═══════════ 2. Base ═══════════ */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/assets/fonts/inter-latin-var.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: var(--w-body); font-weight: var(--body-w); letter-spacing: var(--body-ls); line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; } img, video { display: block; max-width: 100%; height: auto; } a { color: var(--link); text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; } h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; text-wrap: balance; } p { margin: 0; text-wrap: pretty; } ::selection { background: rgba(0,122,255,.22); } :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 10px; } [hidden] { display: none !important; } .rp4-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Lien d'évitement (clavier) */ .rp4-skip { position: fixed; left: 16px; top: -100px; z-index: 100; background: var(--cta-bg); color: var(--cta-text); padding: 12px 18px; border-radius: var(--r-pill); font-weight: 600; } .rp4-skip:focus { top: calc(env(safe-area-inset-top) + 12px); } /* ═══════════ 3. Mise en page ═══════════ */ .rp4-wrap { width: 100%; max-width: calc(var(--w-max) + 2 * var(--w-gutter)); margin: 0 auto; padding: 0 var(--w-gutter); } .rp4-wrap--narrow { max-width: calc(var(--w-narrow) + 2 * var(--w-gutter)); } .rp4-wrap--read { max-width: calc(var(--w-read) + 2 * var(--w-gutter)); } .rp4-section { padding: var(--w-section) 0 0; scroll-margin-top: calc(var(--nav-h) + 24px); } /* Première section d'une page sans hero : dégage la nav fixe */ .rp4-section--first { padding-top: calc(env(safe-area-inset-top) + var(--nav-h) + clamp(40px, 6vw, 88px)); } .rp4-split { display: grid; gap: clamp(40px, 5vw, 72px); align-items: center; } .rp4-stack { display: flex; flex-direction: column; gap: 16px; } .rp4-center { text-align: center; } /* ═══════════ 4. Typographie ═══════════ */ .rp4-eyebrow { display: block; font-size: var(--w-footnote); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text3); margin-bottom: 12px; line-height: 1.3; } .rp4-sh { max-width: 760px; margin-bottom: clamp(32px, 4vw, 64px); } .rp4-sh h2 { font-size: var(--w-title1); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; } .rp4-sh p { font-size: var(--w-lead); line-height: 1.4; letter-spacing: -.005em; color: var(--text3); margin-top: 12px; } .rp4-sh--center { margin-left: auto; margin-right: auto; text-align: center; } .rp4-sh--tight { margin-bottom: 32px; } .rp4-display { font-size: var(--w-display); font-weight: 700; letter-spacing: -.024em; line-height: 1.06; } .rp4-title1 { font-size: var(--w-title1); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; } .rp4-title2 { font-size: var(--w-title2); font-weight: 600; letter-spacing: -.015em; line-height: 1.15; } .rp4-title3 { font-size: var(--w-title3); font-weight: 600; letter-spacing: -.01em; line-height: 1.2; } .rp4-lead { font-size: var(--w-lead); line-height: 1.4; letter-spacing: -.005em; color: var(--text3); } .rp4-footnote { font-size: var(--w-footnote); color: var(--text3); line-height: 1.4; } /* Une adresse ne se coupe jamais au trait d'union (« support@reboot- / plan.com », revue design m3) */ a[href^="mailto:"] { white-space: nowrap; } .rp4-gold-text { color: var(--gold-text); } /* le seul or permis en texte */ .rp4-link { color: var(--link); font-weight: 500; } .rp4-link-arrow { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; color: var(--link); font-weight: 600; } .rp4-link-arrow .rp4-i { width: 16px; height: 16px; } /* ═══════════ 5. Boutons ═══════════ */ .rp4-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 24px; border-radius: var(--r-pill); border: 0; font-size: var(--w-body); font-weight: 600; white-space: nowrap; cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); } .rp4-btn--primary { background: var(--cta-bg); color: var(--cta-text); } .rp4-btn--primary:active { background: var(--cta-bg-pressed); transform: scale(.97); } /* (mouvement) état pressé net */ .rp4-btn--secondary { background: var(--fill-3); color: var(--text); } .rp4-btn--secondary:active { background: var(--fill-1); transform: scale(.97); } .rp4-btn--sm { min-height: 36px; padding: 0 16px; font-size: .9375rem; } .rp4-btn--block { width: 100%; } .rp4-btn[disabled], .rp4-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; } .rp4-btn .rp4-i { width: 18px; height: 18px; } /* Bouton qui ressemble à un lien (ex. « Gérer mes cookies ») */ .rp4-linkbtn { background: none; border: 0; padding: 0; cursor: pointer; color: inherit; text-align: left; } /* ═══════════ 6. Icônes (Lucide, sprite /assets/icons/rp4-lucide.svg) ═══════════ */ .rp4-i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .rp4-i--lg { stroke-width: 1.75; } /* au-dessus de 24 px : graisse optique des SF Symbols Regular */ /* Pastille d'icône (rp4-ico de l'app) : teinte du sujet à 14 %, accent par --accent */ .rp4-ico { position: relative; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: var(--accent, var(--text)); flex: none; overflow: hidden; } .rp4-ico::before { content: ""; position: absolute; inset: 0; background: currentColor; opacity: .14; } .rp4-ico .rp4-i { position: relative; width: 18px; height: 18px; } .rp4-ico--lg { width: 44px; height: 44px; border-radius: 12px; } .rp4-ico--lg .rp4-i { width: 24px; height: 24px; } /* Accents prêts à poser : */ .rp4-acc-train { --accent: var(--acc-train); } .rp4-acc-nutri { --accent: var(--acc-nutri); } .rp4-acc-steps { --accent: var(--acc-steps); } .rp4-acc-sleep { --accent: var(--acc-sleep); } .rp4-acc-heart { --accent: var(--acc-heart); } .rp4-acc-body { --accent: var(--acc-body); } .rp4-acc-cycle { --accent: var(--acc-cycle); } .rp4-acc-muted { --accent: var(--text3); } /* ═══════════ 7. Badges officiels des stores (intouchés, jamais redessinés) ═══════════ */ .rp4-stores { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .rp4-stores a { display: inline-flex; align-items: center; min-height: 44px; border-radius: 9px; } .rp4-stores img { height: 44px; width: auto; } .rp4-stores--center { justify-content: center; } /* ═══════════ 8. Révélations (jamais sur les appareils) ═══════════ */ /* La classe rp4-js est posée par rp4.js : sans JS, tout est visible. Décalage : style="--i:1" (≤ 4). */ .rp4-js .rp4-rv { opacity: 0; transform: translateY(16px); transition: opacity var(--w-dur-reveal) var(--ease-out), transform var(--w-dur-reveal) var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); } .rp4-js .rp4-rv.rp4-in { opacity: 1; transform: none; } /* ═══════════ 9. Appareils : bezels officiels, droits, entiers, immobiles, sans ombre ni reflet ═══════════ Règles Apple : jamais recadré ni masqué, aucun élément qui entre dans l'écran ou en sort, écran jamais vide, au moins 200 px de haut, texte à côté jamais dessus. Seule l'image d'écran change (fondu). Taille : --dev-w = largeur du cadre iPhone. La montre vaut 0,555 × --dev-w (échelle relative réelle : écran iPhone 1320 px à 460 ppp, écran Ultra 3 422 px à ~336 ppp). */ .rp4-iphone { position: relative; aspect-ratio: 1470 / 3000; flex: none; width: var(--dev-w, 280px); } .rp4-iphone .rp4-screen { position: absolute; left: 5.102%; top: 2.2%; width: 89.796%; height: 95.6%; border-radius: 14.24% / 6.56%; overflow: hidden; background: #F2F2F6; } .rp4-watch { position: relative; aspect-ratio: 600 / 960; flex: none; width: calc(var(--dev-w, 280px) * .555); min-width: 125px; /* 125 × 1,6 = 200 px de haut, le plancher Apple */ } .rp4-watch .rp4-screen { position: absolute; left: 14.833%; top: 23.229%; width: 70.333%; height: 53.542%; border-radius: 27.5% / 22.6%; overflow: hidden; background: #000; } .rp4-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .rp4-frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .rp4-screen img[data-screen] { opacity: 0; transition: opacity var(--dur-slow) var(--ease-out); } .rp4-screen img[data-screen].rp4-on { opacity: 1; } /* Paire iPhone + montre posées côte à côte, bas alignés (hero) */ .rp4-devices { --dev-w: min(calc((100vw - 32px) / 1.6), 300px); display: flex; justify-content: center; align-items: flex-end; gap: 8px; margin: 0 -4px; } @media (max-width: 374px) { /* Trop étroit pour deux appareils à l'échelle sans passer sous 200 px : l'iPhone seul, la montre a sa section. */ .rp4-devices { --dev-w: 62vw; } .rp4-devices .rp4-watch { display: none; } } /* Deux montres côte à côte, avec légende sous chacune (jamais sur l'écran) */ .rp4-watch-pair { --dev-w: min(72vw, 342px); display: flex; justify-content: center; gap: clamp(16px, 4vw, 40px); } .rp4-watch-pair figure, .rp4-device-fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; } .rp4-watch-pair figcaption, .rp4-device-fig figcaption { font-size: var(--w-footnote); color: var(--text3); font-weight: 500; text-align: center; } /* Rangée défilante d'appareils (remplace le coverflow) : aimantée, voisins à l'opacité 1 */ .rp4-device-row { --dev-w: 220px; display: flex; gap: clamp(16px, 3vw, 32px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(-1 * var(--w-gutter)); padding: 4px var(--w-gutter); overscroll-behavior-x: contain; } .rp4-device-row::-webkit-scrollbar { display: none; } .rp4-device-row > * { scroll-snap-align: center; flex: none; } /* ═══════════ 10. Nav de verre (en-tête partagé, _partials/header.html) ═══════════ */ .rp4-nav-wrap { position: fixed; z-index: 50; top: calc(env(safe-area-inset-top) + 10px); left: 0; right: 0; padding: 0 var(--w-gutter); pointer-events: none; } .rp4-nav { pointer-events: auto; max-width: var(--w-max); margin: 0 auto; height: var(--nav-h); display: flex; align-items: center; gap: 8px; padding: 0 6px 0 10px; border-radius: var(--r-pill); background: var(--nav-specular), var(--nav-glass-clear); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); border: 1px solid var(--glass-border); box-shadow: inset 0 1px 0 var(--glass-highlight), inset 0 0 0 1px var(--nav-inner-rim), inset 0 -1px 0 var(--nav-edge), var(--elev-nav); } .rp4-brand { white-space: nowrap; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding-right: 8px; color: var(--text); font-weight: 600; font-size: 1.0625rem; letter-spacing: -.01em; border-radius: 12px; } .rp4-brand-mark { width: 32px; height: 32px; flex: none; color: var(--logo); } .rp4-nav-links { display: none; list-style: none; margin: 0 auto; padding: 0; gap: 2px; } .rp4-nav-links a { white-space: nowrap; display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: var(--r-pill); color: var(--text2); font-size: .9375rem; font-weight: 500; transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .rp4-nav-links a[aria-current="page"] { color: var(--text); background: var(--glass-rim); box-shadow: 0 1px 3px rgba(0,0,0,.08); } .rp4-nav-links a:focus-visible { outline-offset: 1px; border-radius: var(--r-pill); } .rp4-nav-cta { display: none; } .rp4-menu-btn { margin-left: auto; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--fill-4); display: grid; place-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent; color: var(--text); } .rp4-menu-btn:active { background: var(--fill-2); } .rp4-menu-btn .rp4-i { width: 20px; height: 20px; } /* Feuille du menu (pouce) */ .rp4-scrim { position: fixed; inset: 0; z-index: 60; background: var(--scrim); opacity: 0; visibility: hidden; transition: opacity var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow); } .rp4-sheet { position: fixed; z-index: 61; left: 8px; right: 8px; bottom: 8px; border-radius: 32px; padding: 10px 16px calc(env(safe-area-inset-bottom) + 16px); background: var(--glass-bg); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); border: 1px solid var(--glass-border); box-shadow: inset 0 1px 0 var(--glass-highlight), var(--elev-sheet); transform: translateY(calc(100% + 16px)); visibility: hidden; transition: transform var(--dur-slow) var(--ease-sheet), visibility 0s linear var(--dur-slow); } .rp4-menu-open .rp4-scrim { opacity: 1; visibility: visible; transition: opacity var(--dur-slow) var(--ease-out); } .rp4-menu-open .rp4-sheet { transform: none; visibility: visible; transition: transform var(--dur-slow) var(--ease-sheet); } .rp4-sheet-grab { width: 36px; height: 5px; border-radius: 3px; background: var(--fill-1); margin: 0 auto 10px; } .rp4-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 8px; } .rp4-sheet-head span { font-weight: 600; font-size: 1.0625rem; } .rp4-sheet-list { list-style: none; margin: 0 0 16px; padding: 0; } .rp4-sheet-list li + li { border-top: 1px solid var(--sep); } .rp4-sheet-list a { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 0 4px; color: var(--text); font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em; border-radius: 10px; } .rp4-sheet-list a[aria-current="page"] { color: var(--text); } .rp4-sheet-list .rp4-i { width: 18px; height: 18px; color: var(--text4); } .rp4-sheet .rp4-btn { width: 100%; } /* CTA collé en bas (pouce) : apparaît après le hero, s'efface sur le prix et le pied */ .rp4-dock { position: fixed; z-index: 40; left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom) + 12px); display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 20px; border-radius: var(--r-pill); background: var(--glass-bg); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); border: 1px solid var(--glass-border); box-shadow: inset 0 1px 0 var(--glass-highlight), var(--elev-2); transform: translateY(calc(100% + 32px)); opacity: 0; visibility: hidden; transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-slow); } .rp4-dock.rp4-show { transform: none; opacity: 1; visibility: visible; transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-base) var(--ease-out); } .rp4-dock-txt { flex: 1; min-width: 0; line-height: 1.25; } .rp4-dock-txt b { display: block; font-size: .9375rem; font-weight: 600; } .rp4-dock-txt span { display: block; font-size: var(--w-footnote); color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rp4-dock .rp4-btn { min-height: 44px; padding: 0 20px; } /* Repli et accessibilité du verre */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .rp4-nav, .rp4-sheet, .rp4-dock, .rp4-glass { background: var(--glass-bg-strong); } } @media (max-width: 380px) { .rp4-nav, .rp4-sheet, .rp4-dock, .rp4-glass { --glass-blur: 24px; --glass-saturate: 160%; } } @media (prefers-reduced-transparency: reduce) { :root { --glass-bg: var(--bg2); --glass-bg-strong: var(--bg2); --nav-glass-clear: var(--bg2); --nav-specular: none; --glass-border: var(--border); --glass-highlight: transparent; --nav-edge: transparent; --nav-inner-rim: transparent; } .rp4-nav, .rp4-sheet, .rp4-dock, .rp4-glass { -webkit-backdrop-filter: none; backdrop-filter: none; } } /* Pièce de verre générique (pilule collante d'une page). Compte dans les trois pièces visibles au plus. */ .rp4-glass { background: var(--glass-bg); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); border: 1px solid var(--glass-border); box-shadow: inset 0 1px 0 var(--glass-highlight), var(--elev-2); } /* ═══════════ 11. Hero ═══════════ */ .rp4-hero { padding-top: calc(env(safe-area-inset-top) + var(--nav-h) + clamp(40px, 6vw, 88px)); } .rp4-hero-grid { display: grid; gap: clamp(40px, 5vw, 64px); align-items: center; } .rp4-hero-copy { text-align: center; max-width: 640px; margin: 0 auto; } .rp4-hero h1 { font-size: var(--w-hero); font-weight: 700; letter-spacing: -.028em; line-height: 1.04; } .rp4-hero-lead { font-size: var(--w-lead); line-height: 1.4; letter-spacing: -.005em; color: var(--text3); margin-top: 16px; } .rp4-hero-actions { margin-top: 28px; display: flex; flex-direction: column; align-items: center; gap: 16px; } .rp4-hero-actions .rp4-btn { min-width: 240px; } .rp4-hero .rp4-stores { justify-content: center; } .rp4-reassure { margin-top: 18px; display: block; font-size: var(--w-footnote); color: var(--text3); } .rp4-reassure .rp4-i { display: inline-block; vertical-align: -3px; margin-right: 6px; width: 15px; height: 15px; color: var(--text3); } /* Hero sans appareil (pages secondaires) */ .rp4-hero--text .rp4-hero-copy { max-width: 760px; } /* ═══════════ 12. Segments (pilule d'onglets) + vitrine à écran qui change ═══════════ Structure : [data-rp4-tabs] contient .rp4-seg (role=tablist), un appareil dont les images portent data-screen="0..n", et des cartes .rp4-card[data-tab]. rp4.js synchronise le tout. */ .rp4-seg-scroll { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(-1 * var(--w-gutter)) 28px; padding: 2px var(--w-gutter); } .rp4-seg-scroll::-webkit-scrollbar { display: none; } .rp4-seg { display: flex; gap: 2px; width: max-content; min-width: 100%; padding: 3px; border-radius: var(--r-pill); background: var(--fill-3); } .rp4-seg button { flex: 1 0 auto; scroll-snap-align: center; min-height: 44px; min-width: 76px; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--text2); font-size: .9375rem; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); } .rp4-seg button[aria-selected="true"] { background: var(--seg-on); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.10), 0 1px 1px rgba(0,0,0,.04); } .rp4-seg--inline { width: max-content; min-width: 0; margin: 0 auto; } /* pilule courte, toujours visible */ .rp4-tabs-device { display: flex; justify-content: center; --dev-w: min(62vw, 280px); } /* Au pouce, la vitrine tient dans l'écran : l'iPhone se rétrécit pour laisser la place à la pilule, aux cartes et aux points sous les barres collantes. Sinon l'appareil sort par le haut dès qu'on atteint les cartes, et l'écran change sans qu'on le voie (retour de Paul, 02/10, page App dans Instagram). .49 = 1470 / 3000 (largeur pour une hauteur). Plancher 168 px : la capture reste lisible. */ @media (max-width: 767px) { .rp4-tabs-device { --dev-w: max(168px, min(62vw, 280px, calc((100svh - var(--nav-h) - 330px) * .49))); } body:has(.rp4-secnav) .rp4-tabs-device { --dev-w: max(168px, min(62vw, 280px, calc((100svh - var(--nav-h) - 390px) * .49))); } .rp4-cards { overscroll-behavior-x: contain; } /* Dans une rangée à glisser, la carte apparaît en fondu seul : sa translation d'apparition (16 px) donnait du jeu vertical au défileur, qu'iOS laissait tirer de haut en bas (retour de Paul, 02/10). */ .rp4-js .rp4-cards .rp4-rv { transform: none; } } /* Tout défileur horizontal est verrouillé sur son axe : aucun débordement vertical ne doit le rendre tirable de haut en bas (élastique iOS = « le carrousel n'est pas fixé verticalement »). */ .rp4-device-row, .rp4-seg-scroll, .rp4-cards, .rp4-secnav ul, .rp4-toc--chips ol, .rp4-reels--carousel { overflow-y: hidden; overscroll-behavior-y: none; } .rp4-cards { list-style: none; margin: 28px calc(-1 * var(--w-gutter)) 0; padding: 0 var(--w-gutter); display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--w-gutter); scrollbar-width: none; overscroll-behavior-x: contain; } .rp4-cards::-webkit-scrollbar { display: none; } .rp4-cards li { flex: 0 0 84%; scroll-snap-align: start; display: flex; } .rp4-card { width: 100%; text-align: left; border: 0; cursor: pointer; background: var(--bg2); border-radius: var(--w-r-bento); color: var(--text); padding: var(--pad-bento); display: flex; flex-direction: column; gap: 10px; -webkit-tap-highlight-color: transparent; box-shadow: inset 0 0 0 1.5px transparent; transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out); } .rp4-card:active { transform: scale(.985); } .rp4-card[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--text); } .rp4-card-top { display: flex; align-items: center; gap: 10px; font-size: .9375rem; font-weight: 600; color: var(--text2); } .rp4-card h3 { font-size: var(--w-title2); font-weight: 600; letter-spacing: -.015em; line-height: 1.15; } .rp4-card p { font-size: var(--w-callout); line-height: 1.45; color: var(--text3); } .rp4-dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; } .rp4-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--fill-1); transition: background-color var(--dur-base) var(--ease-out), width var(--dur-base) var(--ease-out); } .rp4-dots span.rp4-on { background: var(--text); width: 20px; border-radius: 4px; } /* ═══════════ 13. Cartes bento (grille 12 colonnes, opaques, sans ombre) ═══════════ */ .rp4-bento { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap-bento); grid-template-columns: 1fr; } .rp4-tile { position: relative; background: var(--bg2); border-radius: var(--w-r-bento); padding: var(--pad-bento); display: flex; flex-direction: column; gap: 10px; color: var(--text); min-width: 0; } .rp4-tile h3 { font-size: var(--w-title2); font-weight: 600; letter-spacing: -.015em; line-height: 1.15; } .rp4-tile p { font-size: var(--w-callout); line-height: 1.45; color: var(--text3); } .rp4-tile-top { display: flex; align-items: center; gap: 10px; font-size: .9375rem; font-weight: 600; color: var(--text2); } .rp4-tile-stat { font-family: var(--font-rounded); font-size: var(--w-stat); font-weight: 600; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; } .rp4-tile-visual { margin-top: auto; padding-top: 12px; display: flex; justify-content: center; } /* Carte entière cliquable : un qui mène à CE sur quoi on a cliqué */ .rp4-tile--link { text-decoration: none; -webkit-tap-highlight-color: transparent; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); box-shadow: inset 0 0 0 1.5px transparent; } .rp4-tile--link:active { transform: scale(.985); } .rp4-tile--link .rp4-link-arrow { margin-top: auto; } /* ═══════════ 14. Liste à pastilles d'icône ═══════════ */ .rp4-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; } .rp4-facts li { display: flex; gap: 14px; align-items: flex-start; } .rp4-facts h3 { font-family: var(--font); font-size: var(--w-body); font-weight: 600; letter-spacing: -.005em; } .rp4-facts p { font-size: var(--w-callout); color: var(--text3); line-height: 1.45; margin-top: 2px; } .rp4-facts--2 { gap: 24px; } /* Bloc de note (encadré d'information calme, jamais d'or en texte) */ .rp4-note { display: flex; gap: 12px; align-items: flex-start; background: var(--bg2); border-radius: var(--r-card); padding: 16px 20px; font-size: var(--w-callout); color: var(--text2); line-height: 1.45; } .rp4-note .rp4-i { width: 18px; height: 18px; margin-top: 2px; color: var(--text3); } .rp4-note--warn .rp4-i { color: var(--warn-text); } /* ═══════════ 15. Preuve : note réelle + avis App Store exacts ═══════════ */ .rp4-rating { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: clamp(32px, 4vw, 56px); } .rp4-rating-num { font-family: var(--font-rounded); font-size: var(--w-stat); font-weight: 600; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; } .rp4-stars { display: flex; gap: 4px; margin: 14px 0 10px; } .rp4-stars svg { width: 22px; height: 22px; } .rp4-rating-meta { font-size: var(--w-callout); color: var(--text3); } .rp4-star { fill: var(--gold); stroke: none; } /* l'étoile est un remplissage or, jamais du texte */ .rp4-star-empty { fill: var(--fill-1); stroke: none; } .rp4-quotes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap-bento); } .rp4-quote { margin: 0; background: var(--bg2); border-radius: var(--w-r-bento); padding: var(--pad-bento); height: 100%; display: flex; flex-direction: column; gap: 16px; } .rp4-quote blockquote { margin: 0; font-size: var(--w-title3); font-weight: 500; line-height: 1.35; letter-spacing: -.01em; } .rp4-quote figcaption { margin-top: auto; font-size: var(--w-footnote); color: var(--text3); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .rp4-quote figcaption b { color: var(--text); font-weight: 600; } .rp4-qdate { white-space: nowrap; } .rp4-mini-stars { display: inline-flex; gap: 2px; } .rp4-mini-stars svg { width: 12px; height: 12px; } /* ═══════════ 16. Prix (calqué sur OfferScreen de l'app : l'encre dit la sélection, jamais l'or) ═══════════ */ .rp4-plans { display: grid; gap: var(--gap-bento); max-width: 820px; margin: 0 auto; } .rp4-plan { position: relative; background: var(--bg2); border-radius: var(--w-r-bento); padding: var(--pad-bento); box-shadow: inset 0 0 0 1.5px var(--border); display: flex; flex-direction: column; gap: 6px; } .rp4-plan--best { box-shadow: inset 0 0 0 2px var(--text); } .rp4-plan-badge { position: absolute; top: -13px; left: var(--pad-bento); background: var(--cta-bg); color: var(--cta-text); font-size: var(--w-footnote); font-weight: 600; padding: 4px 12px; border-radius: var(--r-pill); } .rp4-plan-name { font-size: var(--w-body); font-weight: 600; color: var(--text2); } .rp4-plan-price { display: flex; align-items: baseline; gap: 6px; margin-top: 4px; flex-wrap: wrap; } .rp4-plan-price b { font-family: var(--font-rounded); font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem); font-weight: 600; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; } .rp4-plan-price span { font-size: var(--w-body); color: var(--text3); } .rp4-plan-sub { font-size: var(--w-callout); color: var(--text3); } .rp4-plan-sub strong { color: var(--text); font-weight: 600; } .rp4-plans-cta { max-width: 820px; margin: 28px auto 0; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; } .rp4-plans-cta .rp4-btn { width: 100%; max-width: 420px; } .rp4-plans-cta p { font-size: var(--w-footnote); color: var(--text3); max-width: 520px; line-height: 1.45; } /* ═══════════ 17. FAQ (accordéon natif
) ═══════════ */ .rp4-faq { max-width: var(--w-read); margin: 0 auto; background: var(--bg2); border-radius: var(--r-card); overflow: hidden; } .rp4-faq details + details { border-top: 1px solid var(--sep); margin: 0 0 0 20px; } .rp4-faq details + details summary { padding-left: 0; } .rp4-faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 16px 20px; font-weight: 600; font-size: var(--w-body); cursor: pointer; -webkit-tap-highlight-color: transparent; } .rp4-faq summary::-webkit-details-marker { display: none; } .rp4-faq summary:focus-visible { outline-offset: -3px; } .rp4-faq summary .rp4-i { width: 18px; height: 18px; color: var(--text4); flex: none; transition: transform var(--dur-base) var(--ease-out); } .rp4-faq details[open] summary .rp4-i { transform: rotate(90deg); } .rp4-faq .rp4-ans { padding: 0 20px 20px 0; color: var(--text2); line-height: 1.5; } .rp4-faq details:first-child .rp4-ans { padding-left: 20px; } .rp4-faq .rp4-ans p + p { margin-top: 10px; } .rp4-faq details::details-content { block-size: 0; overflow: hidden; transition: block-size var(--dur-base) var(--ease-out), content-visibility var(--dur-base) allow-discrete; } .rp4-faq details[open]::details-content { block-size: auto; } /* ═══════════ 18. Formulaires (audit-da §4.8) ═══════════ */ .rp4-form { display: grid; gap: 18px; } .rp4-field { display: grid; gap: 6px; } .rp4-label { font-size: var(--w-footnote); font-weight: 600; color: var(--text3); } .rp4-input, .rp4-select, .rp4-textarea { width: 100%; min-height: 50px; padding: 0 16px; border-radius: var(--r-sm); border: 1px solid transparent; background: var(--bg3); color: var(--text); font-size: var(--w-body); /* 17 px : pas de zoom auto sur iPhone */ transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); -webkit-appearance: none; appearance: none; } .rp4-section .rp4-tile .rp4-input, .rp4-tile .rp4-select, .rp4-tile .rp4-textarea { background: var(--bg-raised); } .rp4-textarea { padding: 14px 16px; min-height: 120px; resize: vertical; line-height: 1.45; } .rp4-select { padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6E73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; } .rp4-input::placeholder, .rp4-textarea::placeholder { color: var(--text3); } /* --text4 sur --bg2 = 2,21:1 (revue design m7) */ .rp4-input:focus, .rp4-select:focus, .rp4-textarea:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px var(--focus-a30); } .rp4-input[aria-invalid="true"], .rp4-select[aria-invalid="true"], .rp4-textarea[aria-invalid="true"] { border-color: var(--danger-text); } .rp4-input[aria-invalid="true"]:focus, .rp4-textarea[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(196,40,30,.22); } .rp4-hint { font-size: var(--w-footnote); color: var(--text3); line-height: 1.4; } .rp4-error { font-size: var(--w-footnote); color: var(--danger-text); font-weight: 600; line-height: 1.4; } .rp4-check { display: flex; gap: 12px; align-items: flex-start; font-size: var(--w-callout); color: var(--text2); line-height: 1.45; cursor: pointer; } .rp4-check input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--cta-bg); } .rp4-choices { display: flex; flex-wrap: wrap; gap: 8px; } .rp4-choice { position: relative; } .rp4-choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .rp4-choice span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: var(--r-pill); background: var(--fill-3); font-weight: 600; font-size: .9375rem; color: var(--text2); transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .rp4-choice input:checked + span { background: var(--cta-bg); color: var(--cta-text); } .rp4-choice input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; } .rp4-form-status { font-size: var(--w-callout); line-height: 1.45; } .rp4-form-status--ok { color: var(--ok-text); } .rp4-form-status--error { color: var(--danger-text); } /* ═══════════ 19. Page éditoriale longue (légal, à propos) ═══════════ */ .rp4-prose { max-width: var(--w-read); margin: 0 auto; color: var(--text2); font-size: var(--w-body); line-height: 1.6; } .rp4-prose > * + * { margin-top: 1em; } .rp4-prose h1 { font-size: var(--w-title1); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; color: var(--text); } .rp4-prose h2 { font-size: var(--w-title3); font-weight: 600; letter-spacing: -.01em; line-height: 1.25; color: var(--text); margin-top: 2.2em; scroll-margin-top: calc(var(--nav-h) + 32px); } .rp4-prose h3 { font-family: var(--font); font-size: var(--w-body); font-weight: 600; color: var(--text); margin-top: 1.6em; } .rp4-prose h2 + *, .rp4-prose h3 + * { margin-top: .5em; } .rp4-prose p, .rp4-prose li { text-wrap: pretty; } .rp4-prose ul, .rp4-prose ol { padding-left: 1.3em; } .rp4-prose li + li { margin-top: .4em; } /* :where(:not(.rp4-btn)) : un bouton posé dans de la prose reste un bouton (avant, il devenait un lien bleu souligné). :where() garde la spécificité d’origine (0,1,1) : les liens de sommaire (.rp4-toc a) gardent la main. */ .rp4-prose a:where(:not(.rp4-btn)) { color: var(--link); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; } .rp4-prose strong { color: var(--text); font-weight: 600; } .rp4-prose blockquote { margin-left: 0; margin-right: 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--fill-1); color: var(--text); font-weight: 500; } .rp4-prose hr { border: 0; border-top: 1px solid var(--sep); margin: 2.4em 0; } .rp4-prose table { width: 100%; border-collapse: collapse; font-size: var(--w-callout); display: block; overflow-x: auto; } .rp4-prose th, .rp4-prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--sep); vertical-align: top; } .rp4-prose th { color: var(--text); font-weight: 600; } .rp4-prose-meta { font-size: var(--w-footnote); color: var(--text3); } /* Sommaire d'une page longue */ .rp4-toc { background: var(--bg2); border-radius: var(--r-card); padding: 16px 20px; } .rp4-toc ol { margin: 8px 0 0; padding-left: 1.3em; font-size: var(--w-callout); } .rp4-toc a { text-decoration: none; display: inline-flex; min-height: 32px; align-items: center; } @media (max-width: 767px) { .rp4-toc a { min-height: 44px; } } /* cible du pouce (revue design m6) */ /* ═══════════ 20. Pierre tombale (page retirée, même chemin conservé) ═══════════ */ .rp4-tomb { min-height: 100svh; display: grid; place-items: center; padding: calc(env(safe-area-inset-top) + 32px) var(--w-gutter) calc(env(safe-area-inset-bottom) + 32px); text-align: center; } .rp4-tomb-box { max-width: 460px; display: flex; flex-direction: column; align-items: center; gap: 16px; } .rp4-tomb .rp4-brand-mark { width: 48px; height: 48px; } .rp4-tomb h1 { font-size: var(--w-title2); font-weight: 700; letter-spacing: -.015em; line-height: 1.15; } .rp4-tomb p { color: var(--text3); } /* ═══════════ 21. Pied de page (_partials/footer.html) ═══════════ */ .rp4-foot { margin-top: var(--w-section); border-top: 1px solid var(--sep); padding: 48px 0 calc(env(safe-area-inset-bottom) + 40px); } .rp4-foot-top { display: grid; gap: 32px; } .rp4-foot-brand p { font-size: var(--w-callout); color: var(--text3); margin-top: 12px; max-width: 320px; } .rp4-foot-brand .rp4-stores { margin-top: 20px; } .rp4-foot-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .rp4-foot h2 { font-family: var(--font); font-size: var(--w-footnote); font-weight: 600; color: var(--text); margin-bottom: 8px; } .rp4-foot ul { list-style: none; margin: 0; padding: 0; } .rp4-foot ul a, .rp4-foot ul .rp4-linkbtn { display: inline-flex; align-items: center; min-height: 36px; font-size: var(--w-footnote); font-weight: 500; color: var(--text3); border-radius: 6px; } .rp4-foot-legal { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--sep); font-size: var(--w-caption); color: var(--text3); line-height: 1.5; } /* Sur iPhone, le CTA collé ne doit jamais masquer le bas du pied */ @media (max-width: 767px) { .rp4-foot { padding-bottom: calc(env(safe-area-inset-bottom) + 40px); } .rp4-foot ul a, .rp4-foot ul .rp4-linkbtn { min-height: 44px; } /* cible du pouce (revue design m5) */ } /* ═══════════ 22. Tablette portrait (≥ 768) : expérience pointeur, grille intermédiaire ═══════════ */ /* (corrections 1) Nav à cinq liens (Application, Formations gratuites, Le Guide, Coaching, À propos) : de 768 à 1023 px, le logo seul (le nom reste dans l'aria-label) et des liens plus serrés, pour que la barre tienne sans couper. */ @media (min-width: 768px) and (max-width: 1023px) { .rp4-nav .rp4-brand > span { display: none; } .rp4-nav .rp4-brand { padding-right: 0; } .rp4-nav-links a { padding: 0 10px; } } @media (min-width: 768px) { .rp4-nav { padding: 0 8px 0 12px; gap: 12px; } .rp4-nav-links { display: flex; } .rp4-nav-cta { display: inline-flex; } .rp4-menu-btn--open { display: none; } .rp4-dock, .rp4-sheet, .rp4-scrim { display: none; } .rp4-devices { --dev-w: 300px; gap: 20px; } .rp4-hero-actions { flex-direction: row; flex-wrap: wrap; justify-content: center; } .rp4-tabs .rp4-seg-scroll, .rp4-tabs .rp4-dots { display: none; } .rp4-tabs-grid { display: grid; grid-template-columns: 280px 1fr; gap: 40px; align-items: start; } .rp4-tabs-device { position: sticky; top: calc(var(--nav-h) + 40px); --dev-w: 280px; } .rp4-cards { display: grid; grid-template-columns: 1fr; gap: var(--gap-bento); margin: 0; padding: 0; overflow: visible; } .rp4-cards li { flex: none; } .rp4-card { padding: 24px; } .rp4-watch-pair { --dev-w: 360px; } .rp4-bento { grid-template-columns: repeat(12, 1fr); } .rp4-bento > * { grid-column: span 6; } .rp4-bento > .rp4-span-12 { grid-column: span 12; } .rp4-bento > .rp4-span-4, .rp4-bento > .rp4-span-8 { grid-column: span 6; } .rp4-quotes { grid-template-columns: 1fr 1fr; } .rp4-quotes li:first-child { grid-column: 1 / -1; } .rp4-plans { grid-template-columns: 1fr 1fr; } .rp4-foot-top { grid-template-columns: 1.2fr 2fr; } .rp4-foot-cols { grid-template-columns: repeat(3, 1fr); } .rp4-form--2 { grid-template-columns: 1fr 1fr; } .rp4-form--2 > .rp4-span-full { grid-column: 1 / -1; } .rp4-device-row { --dev-w: 240px; } } @media (min-width: 768px) and (max-width: 1023px) { .rp4-nav-links { gap: 0; } .rp4-nav-links a { padding: 0 10px; font-size: .875rem; } .rp4-nav { gap: 4px; } } /* ═══════════ 23. Mac / PC (≥ 1024) : deux colonnes, bento large ═══════════ */ @media (min-width: 1024px) { .rp4-hero-grid { grid-template-columns: 1.05fr .95fr; } .rp4-hero-copy { text-align: left; margin: 0; max-width: 600px; } .rp4-hero--text .rp4-hero-grid { grid-template-columns: 1fr; } .rp4-hero--text .rp4-hero-copy { text-align: center; margin: 0 auto; } .rp4-hero--text .rp4-hero-actions { justify-content: center; } .rp4-hero--text .rp4-stores { justify-content: center; } .rp4-hero-actions { flex-direction: row; align-items: center; justify-content: flex-start; gap: 16px 20px; } .rp4-hero .rp4-stores { justify-content: flex-start; } .rp4-devices { --dev-w: clamp(300px, 25vw, 360px); justify-content: flex-end; gap: 24px; } .rp4-tabs-grid { grid-template-columns: 1fr clamp(300px, 26vw, 340px); gap: clamp(40px, 5vw, 80px); } .rp4-tabs-device { order: 2; --dev-w: clamp(300px, 26vw, 340px); } .rp4-cards { grid-template-columns: 1fr 1fr; } .rp4-card { padding: var(--pad-bento); min-height: 260px; } /* (corrections 1) plus de margin-top:auto sur le titre : les titres des cartes d'une même rangée partaient à des hauteurs différentes (revue design m1). Titre collé sous la ligne du haut. */ .rp4-split { grid-template-columns: 1fr 1fr; } .rp4-split--media-end > :first-child { order: 2; } .rp4-watch-pair { --dev-w: 378px; justify-content: flex-end; } .rp4-split--media-end .rp4-watch-pair { justify-content: flex-end; } .rp4-bento > .rp4-span-4 { grid-column: span 4; } .rp4-bento > .rp4-span-8 { grid-column: span 8; } .rp4-quotes { grid-template-columns: repeat(3, 1fr); } .rp4-quotes li:first-child { grid-column: auto; } .rp4-device-row { --dev-w: 260px; } } /* ═══════════ 23 bis. Socle v2 : composants remontés des pages migrées (additifs) ═══════════ */ /* Titre en deux phrases : chaque phrase reste d'un bloc, la coupure tombe entre elles.

Tes chiffres. Pas une promesse.

*/ .rp4-nw { white-space: nowrap; } /* Un appareil seul, centré dans sa colonne, à l'échelle du hero */ .rp4-media { display: flex; justify-content: center; --dev-w: min(calc((100vw - 32px) / 1.45), 300px); } /* Deux iPhone côte à côte, légende sous chacun */ .rp4-device-pair { --dev-w: min(calc((100vw - 2 * var(--w-gutter) - 16px) / 2), 250px); display: flex; justify-content: center; gap: 16px; } .rp4-device-fig figcaption { max-width: var(--dev-w, 280px); } .rp4-device-fig:has(> .rp4-watch) figcaption { max-width: calc(var(--dev-w, 280px) * .62); } /* Split « titre d'abord » : dans le DOM, .rp4-split-text (avec son .rp4-sh puis les cartes) puis le média. Une colonne (< 1024) : titre, puis l'appareil, puis les cartes. Deux colonnes : texte | média, ou média | texte avec rp4-split--media-start. */ @media (max-width: 1023px) { .rp4-split--title-first { gap: 0; } .rp4-split--title-first > .rp4-split-text { display: contents; } .rp4-split--title-first .rp4-sh { order: 1; margin-bottom: 40px; } .rp4-split--title-first > :not(.rp4-split-text) { order: 2; margin-bottom: 48px; } .rp4-split--title-first > .rp4-split-text > :not(.rp4-sh) { order: 3; } } /* Liste à pastilles : titres h4 (sous un h3 de panneau) et colonnes. --cols-N (--2 veut dire « écart », pas colonnes) */ .rp4-facts h4 { font-family: var(--font); font-size: var(--w-body); font-weight: 600; letter-spacing: -.005em; margin: 0; } /* Rangée d'appareils (pouce) : UN appareil entier et centré à la fois. Chaque diapositive vaut la largeur utile de la rangée, aimantée, sans voisin visible à l'arrêt ; rp4.js ajoute les points. Enfants : figure.rp4-device-fig (une figure par appareil, légende dessous). */ @media (max-width: 767px) { .rp4-device-row { container-type: inline-size; gap: 0; padding: 4px 0; scroll-padding: 0; } .rp4-device-row > * { flex: 0 0 100cqw; width: 100cqw; min-width: 0; padding: 0 var(--w-gutter); scroll-snap-stop: always; } } .rp4-row-dots { display: none; } @media (max-width: 767px) { .rp4-row-dots { display: flex; } } /* Onglets qui changent un bloc entier (texte + appareils), et pas seulement l'écran :
.rp4-seg-scroll.rp4-panels-seg > .rp4-seg [role=tab][data-panel=i] ; .rp4-panel[data-rp4-panel=i] (le premier porte rp4-on). Sans JS : tous les panneaux visibles, chacun titré par son .rp4-panel-eyebrow. */ .rp4-panels-seg { display: none; } .rp4-js .rp4-panels-seg { display: block; } .rp4-js .rp4-panel:not(.rp4-on) { display: none; } .rp4-panel + .rp4-panel { margin-top: var(--w-section); } .rp4-js .rp4-panel + .rp4-panel { margin-top: 0; } .rp4-panel-eyebrow { display: none; } html:not(.rp4-js) .rp4-panel-eyebrow { display: block; } /* Sélecteur collant des sections d'une page longue (pièce de verre : avec la nav et le CTA collé, la troisième et dernière).