/* * Feuille de style des pages publiques (site vitrine). * * Contraintes assumées : aucune dépendance distante (pas de police Google, pas de CDN), * aucun JavaScript de mise en page. Objectif = un rendu immédiat et des Core Web Vitals * au vert, puisque ces pages sont la seule surface indexable du service. * * Parti pris visuel : sobriété. Un seul accent (teal 600), une seule échelle typographique, * un seul rythme vertical, pas d'ombre. L'alignement est décidé par une classe posée sur * — `page-home` (tout centré, page d'accueil) ou `page-article` (tout aligné à * gauche, pages de contenu) — de façon qu'aucune page n'ait besoin d'un style en dur. */ :root { --teal-50: #f0fdfa; --teal-100: #ccfbf1; --teal-600: #0d9488; --teal-700: #0f766e; --teal-800: #115e59; --stone-100: #f5f5f4; --stone-200: #e7e5e4; --stone-400: #a8a29e; --stone-500: #78716c; --stone-600: #57534e; --stone-800: #292524; --radius: 14px; /* Largeur du contenu : large pour les grilles de la page d'accueil, resserrée pour la lecture suivie des pages de contenu (une ligne trop longue fatigue). */ --width-wide: 58rem; --width-text: 44rem; --gutter: 1.25rem; --section-y: 4rem; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; /* Filet de sécurité : aucune page ne doit pouvoir défiler latéralement. */ overflow-x: hidden; } body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 17px; line-height: 1.65; color: var(--stone-800); background: #fff; overflow-x: hidden; /* Encoche / barre gestuelle, comme dans l'application. */ padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); } /* ── Conteneur ───────────────────────────────────────────────────────────── */ .wrap { width: 100%; max-width: var(--width-wide); margin: 0 auto; padding: 0 var(--gutter); } .page-article .wrap { max-width: var(--width-text); } /* Pas d'exception de largeur sur une page de contenu : une section plus large que les autres décale sa marge gauche et casse l'alignement vertical de toute la page. Les grilles s'adaptent à la colonne (voir .grid-3), la colonne ne s'adapte pas aux grilles. */ .page-home { text-align: center; } .page-article { text-align: left; } /* ── En-tête ─────────────────────────────────────────────────────────────── */ .site-header { border-bottom: 1px solid var(--stone-200); background: #fff; text-align: left; } .site-header .wrap { /* Toujours pleine largeur, même sur les pages de contenu : la barre encadre la page, elle ne suit pas la colonne de texte. */ max-width: var(--width-wide); display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 60px; } .page-article .site-header .wrap { max-width: var(--width-wide); } .brand { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 1.15rem; letter-spacing: -0.02em; color: var(--teal-800); text-decoration: none; flex: none; } .brand svg { flex: none; } .site-nav { display: flex; align-items: center; gap: 1.35rem; font-size: 0.95rem; white-space: nowrap; } .site-nav a { color: var(--stone-600); text-decoration: none; } .site-nav a:hover, .site-nav a:focus-visible { color: var(--teal-700); } .site-nav a[aria-current="page"] { color: var(--teal-800); font-weight: 600; } /* ── Typographie ─────────────────────────────────────────────────────────── */ h1 { font-size: clamp(1.85rem, 4.6vw, 2.9rem); line-height: 1.12; letter-spacing: -0.03em; font-weight: 800; margin: 0 0 1rem; color: var(--teal-800); /* Coupe les mots très longs plutôt que d'élargir la page (contrainte réelle à 320 px). */ overflow-wrap: break-word; } h2 { font-size: clamp(1.35rem, 2.8vw, 1.75rem); line-height: 1.25; letter-spacing: -0.02em; font-weight: 700; margin: 0 0 1rem; color: var(--teal-800); } /* Sur une page de contenu, les titres intermédiaires s'enchaînent dans une même section : sans respiration au-dessus, ils collent au paragraphe ou à la liste qui précède. */ .page-article .wrap > h2 { margin-top: 2.75rem; } .page-article .wrap > h2:first-child { margin-top: 0; } h3 { font-size: 1.05rem; font-weight: 600; margin: 0 0 0.35rem; color: var(--stone-800); } p { margin: 0 0 1rem; } p:last-child { margin-bottom: 0; } a { color: var(--teal-700); } strong { font-weight: 600; } .lead { font-size: clamp(1.02rem, 2vw, 1.18rem); color: var(--stone-600); max-width: 38rem; margin: 0 0 1.75rem; } .page-home .lead { margin-left: auto; margin-right: auto; } .muted { color: var(--stone-500); font-size: 0.93rem; } /* ── Sections ────────────────────────────────────────────────────────────── */ section { padding: var(--section-y) 0; } .hero { padding-top: 3.5rem; padding-bottom: 3rem; } .section-alt { background: var(--stone-100); } .badge { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--teal-50); color: var(--teal-800); border: 1px solid var(--teal-100); border-radius: 999px; padding: 0.28rem 0.8rem; font-size: 0.83rem; font-weight: 600; margin-bottom: 1.1rem; } /* ── Boutons ─────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.72rem 1.35rem; border-radius: 999px; font-weight: 600; font-size: 1rem; line-height: 1.2; text-decoration: none; border: 1px solid transparent; transition: background-color 0.15s ease; } .btn-primary { background: var(--teal-600); color: #fff; } .btn-primary:hover, .btn-primary:focus-visible { background: var(--teal-700); } .btn-ghost { background: #fff; color: var(--teal-800); border-color: var(--stone-200); } .btn-ghost:hover, .btn-ghost:focus-visible { background: var(--teal-50); } .cta-row { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.5rem; } .page-home .cta-row { justify-content: center; } /* ── Grilles ─────────────────────────────────────────────────────────────── */ .grid { display: grid; gap: 1rem; align-items: stretch; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); margin-top: 2rem; } /* Quatre cartes : en grille automatique elles tombent à 3 + 1 orpheline sur un écran large. Deux colonnes fixes donnent un bloc carré, sans ligne bancale. */ @media (min-width: 620px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } /* Trois packs de prix : colonnes égales, même dans la colonne de lecture resserrée. */ .grid-3 { grid-template-columns: repeat(3, 1fr); } } .card { background: #fff; border: 1px solid var(--stone-200); border-radius: var(--radius); padding: 1.35rem; } .card .price { display: block; font-size: 1.5rem; font-weight: 700; color: var(--teal-700); margin: 0.15rem 0 0.1rem; } /* Étapes numérotées — même grille que les cartes, numéro en pastille au-dessus du titre. */ .steps { counter-reset: step; list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1.25rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); } .steps li { counter-increment: step; } .steps li::before { content: counter(step); display: flex; align-items: center; justify-content: center; width: 1.85rem; height: 1.85rem; margin-bottom: 0.6rem; border-radius: 999px; background: var(--teal-600); color: #fff; font-size: 0.9rem; font-weight: 700; } .page-home .steps li::before { margin-left: auto; margin-right: auto; } /* Une seule colonne, quelle que soit la largeur (pages de contenu). */ .steps-stacked { grid-template-columns: 1fr; gap: 1.5rem; } /* Listes à puces cochées */ .checks { list-style: none; padding: 0; margin: 0 0 1rem; } .checks li { padding-left: 1.5rem; position: relative; margin-bottom: 0.5rem; } .checks li::before { content: "✓"; position: absolute; left: 0; color: var(--teal-600); font-weight: 700; } /* ── FAQ ─────────────────────────────────────────────────────────────────── */ .faq-list { max-width: var(--width-text); margin: 1.75rem auto 0; text-align: left; } .faq-list details { border-bottom: 1px solid var(--stone-200); padding: 0.85rem 0; } .faq-list details:first-of-type { border-top: 1px solid var(--stone-200); } .faq-list summary { cursor: pointer; font-weight: 600; color: var(--stone-800); list-style-position: outside; } .faq-list p { margin: 0.65rem 0 0; color: var(--stone-600); } /* ── Fil d'Ariane ────────────────────────────────────────────────────────── */ .breadcrumb { font-size: 0.87rem; color: var(--stone-400); margin: 1.25rem 0 0; } .breadcrumb a { color: var(--stone-500); text-decoration: none; } .breadcrumb a:hover { text-decoration: underline; } /* ── Pied de page ────────────────────────────────────────────────────────── */ .site-footer { border-top: 1px solid var(--stone-200); padding: 2.25rem 0; font-size: 0.92rem; color: var(--stone-500); background: #fff; } .site-footer nav { display: flex; flex-wrap: wrap; gap: 0.6rem 1.25rem; margin-bottom: 0.85rem; } .page-home .site-footer nav { justify-content: center; } .site-footer a { color: var(--stone-600); text-decoration: none; } .site-footer a:hover { text-decoration: underline; } /* ── Petits écrans ───────────────────────────────────────────────────────── */ @media (max-width: 640px) { :root { --section-y: 2.75rem; --gutter: 1.1rem; } body { font-size: 16.5px; } .hero { padding-top: 2.5rem; padding-bottom: 2.25rem; } .site-nav { gap: 1.05rem; font-size: 0.92rem; } /* Les deux boutons du héro font toute la largeur : plus lisibles au pouce, et l'alignement reste net (aucune ligne orpheline à moitié remplie). */ .page-home .hero .cta-row { flex-direction: column; align-items: stretch; } } @media (max-width: 360px) { .site-nav { gap: 0.8rem; font-size: 0.88rem; } .brand { font-size: 1.05rem; } }