/* global.css — styles partagés (corps, conteneur, titres, boutons, liens) */ body { font-family: var(--police-texte); color: var(--couleur-texte); background-color: var(--couleur-fond); font-size: 1rem; } /* Conteneur centré réutilisé partout */ .container { max-width: var(--largeur-max); margin: 0 auto; padding: 0 24px; } /* ---- Titres (échelle relevée sur hellobetter) ---- */ h1, h2, h3, h4 { font-family: var(--police-titre); color: var(--couleur-texte); font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; } h1 { font-size: clamp(2rem, 1rem + 4vw, 3.75rem); /* 32px → 60px */ line-height: 1.1; } h2 { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.25rem); /* 28px → 36px */ line-height: 1.25; } h3 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.5rem); /* ~22px → 24px */ } h4 { font-size: 1.25rem; } p { color: var(--couleur-texte-doux); line-height: 1.55; } /* En-tête de section (titre + accroche centrés) */ .section-titre { text-align: center; max-width: 720px; margin: 0 auto 56px; } .section-titre p { margin-top: 16px; font-size: 1.1rem; } /* Petit libellé au-dessus des titres (« eyebrow ») */ .eyebrow { display: inline-block; font-family: var(--police-texte); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--couleur-principale); margin-bottom: 14px; } /* ---- Boutons ---- */ .btn { display: inline-block; padding: 14px 28px; border-radius: var(--rayon-bouton); font-family: var(--police-texte); font-weight: 600; font-size: 1rem; text-align: center; transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease; } .btn-principal { background-color: var(--couleur-principale); color: var(--couleur-fond); } .btn-principal:hover { background-color: var(--couleur-principale-foncee); transform: translateY(-2px); } .btn-secondaire { background-color: transparent; color: var(--couleur-principale); border: 2px solid var(--couleur-bordure); } .btn-secondaire:hover { border-color: var(--couleur-principale); background-color: var(--couleur-fond-clair); } /* ---- Listes à coches (puces vertes type hellobetter) ---- */ .liste-coches { display: grid; gap: 14px; } .liste-coches li { position: relative; padding-left: 36px; color: var(--couleur-texte); font-weight: 500; } .liste-coches li::before { content: "✓"; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: var(--couleur-vif); color: #fff; font-size: 0.8rem; font-weight: 700; } /* ---- Animation d'apparition au scroll ---- */ /* L'état masqué n'est appliqué QUE si le JS est actif (classe .js sur ). */ /* Ainsi, sans JavaScript, tout le contenu reste visible. */ .js [data-anim] { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; } .js [data-anim].visible { opacity: 1; transform: translateY(0); } /* Petits délais en cascade pour les éléments d'une même rangée */ .js [data-anim][data-delay="1"] { transition-delay: 0.1s; } .js [data-anim][data-delay="2"] { transition-delay: 0.2s; } .js [data-anim][data-delay="3"] { transition-delay: 0.3s; } /* Respect des préférences d'accessibilité (pas d'animation si l'utilisateur le demande) */ @media (prefers-reduced-motion: reduce) { [data-anim] { opacity: 1; transform: none; transition: none; } } /* Espacement vertical commun des sections */ section { padding: var(--espace-section) 0; }