/* ============================================================ RIDE UP — base.css Design system « Première Lueur » (source unique : spec/da.json) Chargé AVANT styles/sections-*.css. Règles transversales : AUCUN rgba(0,0,0,…), aucun vert, aucune surface sombre, ombres toujours teintées ambre. Fonts chargées dans le (Bricolage Grotesque + Figtree). ============================================================ */ /* ------------------------------------------------------------ 1. TOKENS ------------------------------------------------------------ */ :root { /* Couleurs — fonds */ --bg: #FFF8F0; /* ivoire d'aube, fond de page global */ --surface: #FFFFFF; /* cartes standard */ --surface-warm: #FFF2E3; /* sections alternées, bento vedette, footer */ --chip-bg: #FDEBD7; /* chips, tondos 48px, halo carte Recommandé */ --border: #F0E2D2; /* bordures 1px, séparateurs, contours d'input */ /* Couleurs — texte */ --text: #4A5065; /* corps de texte (AAA sur --bg) */ --heading: #1D2749; /* H1→H4, wordmark, traits d'icônes, horizon */ --accent-xl: #E8590C; /* RÉSERVÉ ≥24px ou ≥18,7px gras (AA texte large) */ --accent: #C2410C; /* liens, boutons, kickers, ✓ (AA partout) */ --accent-hover: #A8380A; /* hover bouton primaire */ --chip-text: #8A4A0E; /* texte des chips sur --chip-bg */ --muted: #6B7288; /* logos presse, méta (catégorie, temps de lecture) */ --cross: #9AA0B5; /* ✗ comparatif, éléments désactivés (décoratif) */ --on-accent: #FFFCF7; /* texte sur fond --accent */ /* Couleurs — décor */ --gold: #F2B84B; /* or du matin, DÉCORATIF PUR — jamais en texte */ --grad-signature: linear-gradient(90deg, #F2B84B, #E8590C); /* Variante pour background-clip:text : départ or profond #D97706 (≥3:1 sur blanc) — --gold reste décoratif pur, jamais en texte */ --grad-signature-text: linear-gradient(90deg, #D97706, #E8590C); --sky: linear-gradient(180deg, #FFF3E4 0%, #FFE8CF 45%, #FFD9B6 72%, #FFF8F0 100%); /* --sun-core (SVG uniquement) : radialGradient #FFD08A → #F07B1F */ --sun-halo: radial-gradient(closest-side, rgba(240, 123, 31, .22), transparent 70%); --sun-halo-gold: radial-gradient(closest-side, rgba(242, 184, 75, .18), transparent 70%); --skyline-back: #F3DCC4; --skyline-front: #E7C3A6; --road: #E9D5C0; --road-edge: #D9BBA0; /* Ombres — toutes teintées ambre, jamais rgba(0,0,0,…) */ --shadow-sm: 0 2px 8px rgba(184, 102, 38, .06); --shadow-card: 0 8px 24px rgba(184, 102, 38, .08); --shadow-card-hover: 0 16px 32px rgba(184, 102, 38, .12); --shadow-btn: 0 6px 18px rgba(194, 65, 12, .25); --halo-reco: 0 0 0 10px #FDEBD7, 0 24px 48px rgba(184, 102, 38, .14); /* Accessibilité (WCAG 1.4.11) : anneau opaque, halo ivoire 2px pour rester visible sur le bouton primaire orange. Remplace le rgba(232,89,12,.35) de da.json (~1,5:1 sur ivoire). */ --focus-ring: 0 0 0 2px var(--bg), 0 0 0 5px var(--accent); /* Rayons */ --r-card: 20px; --r-input: 12px; --r-pill: 999px; --r-phone: 36px; /* Espacements — échelle base 4px */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px; --section-pad: clamp(72px, 10vw, 128px); --container: 1200px; --container-pad: 24px; --gap-grid: 24px; /* 32px entre grandes cartes du comparatif */ --gap-grid-lg: 32px; --gap-stack-kicker: 12px; /* kicker → titre */ --gap-stack-sub: 16px; /* titre → sous-titre */ --gap-stack-cta: 32px; /* sous-titre → CTA */ /* Typographie — familles */ --font-heading: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif; --font-body: "Figtree", "Segoe UI", system-ui, sans-serif; /* Typographie — échelle */ /* H1 : la ligne 1 du hero (« Indépendant sur la route, » = 11,67em mesurés en Bricolage 800) doit tenir sur UNE ligne dans .hero-content (760px) et dans les 343px utiles à 375px — d'où clamp(28, 5.2vw, 64) au lieu du clamp(44, 7vw, 84) de da.json qui repliait le titre sur 3-4 lignes à presque toutes les largeurs */ --fs-h1: clamp(28px, 5.2vw, 64px); --fs-h2: clamp(32px, 4.5vw, 52px); --fs-h3: clamp(22px, 2.5vw, 28px); --fs-h4: 19px; --fs-lead: clamp(18px, 2vw, 21px); --fs-body: 17px; --fs-ui-nav: 15px; --fs-ui-btn: 16px; --fs-small: 14px; --fs-kicker: 13px; --fs-num-giant: clamp(56px, 8vw, 96px); /* Motion */ --ease-out: cubic-bezier(.22, 1, .36, 1); --dur-hover: 200ms; --dur-entry: 700ms; --dur-halo: 8s; --dur-dash: 12s; color-scheme: light; } @media (max-width: 767px) { :root { --section-pad: 64px; --container-pad: 16px; --fs-body: 16px; } } /* ------------------------------------------------------------ 2. RESET MODERNE ------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; /* compense le header sticky sur les ancres */ } body { min-height: 100vh; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: var(--fs-body); font-weight: 400; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; /* fallback (Safari ≤ 15) pour .steps-track en 100vw */ overflow-x: clip; } img, svg, video { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: 0; padding: 0; } ul[class], ol[class] { list-style: none; padding: 0; } p, h1, h2, h3, h4 { overflow-wrap: break-word; } hr { border: 0; border-top: 1px solid var(--border); } ::selection { background: var(--chip-bg); color: var(--heading); } /* Focus visible universel */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: none; box-shadow: var(--focus-ring); /* pas de border-radius ici : l'anneau épouse le radius propre de chaque élément (pill 999px des boutons, 12px des inputs…) */ } /* ------------------------------------------------------------ 3. GRAIN PAPIER GLOBAL (feTurbulence, un seul, sur body) ------------------------------------------------------------ */ body::after { content: ""; position: fixed; inset: 0; z-index: 2147483647; pointer-events: none; opacity: .02; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"); background-repeat: repeat; } /* ------------------------------------------------------------ 4. TYPOGRAPHIE ------------------------------------------------------------ */ h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--heading); } h1 { font-size: var(--fs-h1); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; } h2 { font-size: var(--fs-h2); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; } h3 { font-size: var(--fs-h3); font-weight: 700; line-height: 1.25; } h4 { font-size: var(--fs-h4); font-weight: 700; line-height: 1.3; } .lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--text); } /* Kicker : 13px Figtree 600, uppercase, .12em, précédé de la puce demi-soleil (signature Horizon Levant, 18px) */ .kicker { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--font-body); font-size: var(--fs-kicker); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--gap-stack-kicker); } .kicker::before { content: ""; flex: none; width: 18px; height: 11px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23F2B84B'/%3E%3Cstop offset='1' stop-color='%23E8590C'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M4 12a8 8 0 0 1 16 0Z' fill='url(%23g)'/%3E%3Cpath d='M0 12h24' stroke='%231D2749' stroke-width='2'/%3E%3C/svg%3E") no-repeat center / contain; } /* Chiffres : tabular-nums obligatoire sur tout montant ou stat */ .num { font-variant-numeric: tabular-nums; } /* Chiffres géants gradient-clippés (01/02/03, montants héros) */ .num-giant { font-family: var(--font-heading); font-size: var(--fs-num-giant); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; background: var(--grad-signature-text); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } /* Liens courants */ a { color: var(--accent); font-weight: 500; text-decoration: none; } a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--accent); text-underline-offset: 3px; } /* ------------------------------------------------------------ 5. LAYOUT ------------------------------------------------------------ */ .section { padding-block: var(--section-pad); } .container { max-width: var(--container); margin-inline: auto; padding-inline: var(--container-pad); } /* ------------------------------------------------------------ 6. COMPOSANTS RÉUTILISABLES ------------------------------------------------------------ */ /* Bouton primaire — pill, fond brique, ombre ambrée */ .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: 16px 30px; border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent); font-family: var(--font-body); font-size: var(--fs-ui-btn); font-weight: 600; line-height: 1; text-decoration: none; border: 0; box-shadow: var(--shadow-btn); transition: background var(--dur-hover) ease, transform var(--dur-hover) ease; } .btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); text-decoration: none; } .btn-primary:active { transform: translateY(0); } .btn-primary:focus-visible { outline: none; box-shadow: var(--shadow-btn), var(--focus-ring); } /* Bouton secondaire — pill transparent bordé bleu nuit ; hover : seule inversion sombre autorisée du site */ .btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: 15px 30px; border-radius: var(--r-pill); background: transparent; border: 1.5px solid var(--heading); color: var(--heading); font-family: var(--font-body); font-size: var(--fs-ui-btn); font-weight: 600; line-height: 1; text-decoration: none; transition: background var(--dur-hover) ease, color var(--dur-hover) ease; } .btn-secondary:hover { background: var(--heading); color: var(--bg); text-decoration: none; } .btn-secondary:focus-visible { outline: none; box-shadow: var(--focus-ring); } /* Carte standard */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--shadow-card); transition: transform var(--dur-hover) ease, box-shadow var(--dur-hover) ease; } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); } /* Chip — pill ambrée (Mutuelle, Retraite, TVA…) */ .chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--r-pill); background: var(--chip-bg); color: var(--chip-text); font-family: var(--font-body); font-size: var(--fs-small); font-weight: 500; line-height: 1; } .chip svg { width: 16px; height: 16px; flex: none; } /* Tondo — pastille d'icône 48px, fond ambré, trait bleu nuit. L'icône SVG à l'intérieur hérite de currentColor (stroke 1.75px). */ .tondo { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--chip-bg); color: var(--heading); } .tondo svg { width: 24px; height: 24px; } /* ------------------------------------------------------------ 7. SIGNATURE « HORIZON LEVANT » Demi-disque solaire (gradient or→orange) posé sur une ligne d'horizon 2px bleu nuit qui déborde de part et d'autre. Déclinable : redéfinir --horizon-w (largeur totale) et, au besoin, --horizon-line (épaisseur de la ligne). Ex. : .footer-logo .horizon { --horizon-w: 32px; } ------------------------------------------------------------ */ .horizon { --horizon-w: 24px; --horizon-line: 2px; position: relative; display: inline-block; flex: none; width: var(--horizon-w); height: calc(var(--horizon-w) * 14 / 24); } .horizon::before { /* demi-soleil */ content: ""; position: absolute; left: 50%; bottom: var(--horizon-line); width: calc(var(--horizon-w) * 16 / 24); height: calc(var(--horizon-w) * 8 / 24); transform: translateX(-50%); background: var(--grad-signature); border-radius: var(--r-pill) var(--r-pill) 0 0; } .horizon::after { /* ligne d'horizon */ content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--horizon-line); background: var(--heading); } /* Variante filigrane (CTA final : géant, 10% d'opacité) */ .horizon--filigrane { opacity: .1; } /* ------------------------------------------------------------ 8. INPUTS ------------------------------------------------------------ */ input:not([type="checkbox"]):not([type="radio"]), select, textarea { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-input); padding: 12px 16px; } input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--accent); box-shadow: var(--focus-ring); border-radius: var(--r-input); } /* ------------------------------------------------------------ 9. APPARITION AU SCROLL (.reveal / [data-reveal]) script.js ajoute la classe "js" sur au chargement, puis "is-visible" via IntersectionObserver. Sans JS : tout reste visible (aucun contenu piégé). ------------------------------------------------------------ */ html.js .reveal, html.js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-entry) var(--ease-out), transform var(--dur-entry) var(--ease-out); } html.js .reveal.is-visible, html.js [data-reveal].is-visible { opacity: 1; transform: none; } /* ------------------------------------------------------------ 10. ACCESSIBILITÉ ------------------------------------------------------------ */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* Lien d'évitement « Aller au contenu » : hors écran, révélé au focus */ .skip-link { position: fixed; top: var(--sp-3); left: var(--sp-3); z-index: 200; padding: 12px 20px; border-radius: var(--r-pill); background: var(--surface); color: var(--heading); font-weight: 600; font-size: var(--fs-ui-nav); box-shadow: var(--shadow-card); transform: translateY(calc(-100% - var(--sp-5))); } .skip-link:focus, .skip-link:focus-visible { transform: none; outline: none; box-shadow: var(--shadow-card), var(--focus-ring); text-decoration: none; } /* Reduced motion : TOUTES les animations et transitions coupées. (!important autorisé ici uniquement — fichier design system.) */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0ms !important; } html.js .reveal, html.js [data-reveal] { opacity: 1; transform: none; } }