, ou d'un wrapper. Pas de cascade à pousser à chaque page. */ .altus-section-hero:first-child { padding-top: 25vh; } /* Container interne — borne la mesure de lecture. */ .altus-section-hero-content { position: relative; z-index: 2; max-width: 1200px; margin-inline: auto; display: flex; flex-direction: column; /* Hiérarchie d'espacement : eyebrow / titre / lede / CTAs. Le gap par défaut est l'espacement eyebrow→titre. Les autres respirations sont posées par margin sur les blocs concernés. */ gap: 24px; } /* ─── Eyebrow ─────────────────────────────────────────────── */ .altus-section-hero-eyebrow { margin: 0; font-size: 13px; font-weight: var(--altus-w-medium); letter-spacing: 0.15em; text-transform: uppercase; /* Bronze — réservé à l'eyebrow du hero comme accent typographique unique. Identique sur fond clair et sombre (le bronze tient les deux). */ color: var(--altus-accent); } /* ─── Titre h1 ────────────────────────────────────────────── */ .altus-section-hero-title { margin: 0; /* Light 300 — comme demandé. La rigueur vient du poids, pas de la graisse. Letter-spacing négatif pour resserrer les capitales. Taille réduite (échelle clamp 40…80px / 5vw) pour ne pas écraser le rythme typographique des sections suivantes. */ font-size: clamp(40px, 5vw, 80px); font-weight: var(--altus-w-light); line-height: 1.05; letter-spacing: -0.02em; color: var(--altus-fg1); max-width: 22ch; /* Évite les veuves typographiques dans un titre clé. */ text-wrap: balance; } /* ─── Lede ────────────────────────────────────────────────── */ .altus-section-hero-lede { /* +8px de respiration avant le lede (titre est dense). */ margin: 8px 0 0; font-size: clamp(18px, 1.8vw, 24px); font-weight: var(--altus-w-light); line-height: 1.5; /* Lede en primaire (fg1) — même poids visuel que le titre. Le contraste vient de la taille et du poids, pas du gris. */ color: var(--altus-fg1); max-width: 60ch; text-wrap: pretty; } /* ─── CTAs ───────────────────────────────────────────────── */ .altus-section-hero .altus-btn-group { /* +16px de respiration avant les boutons (au-delà du gap de 24). */ margin-top: 16px; display: flex; flex-wrap: wrap; gap: 16px; } /* ──────────────────────────────────────────────────────────── Variante inverse — fond ivoire (variante C) Inverse les couleurs sémantiques. Le header de la page doit passer en data-altus-theme="dark". ──────────────────────────────────────────────────────────── */ .altus-section-hero.altus-section-inverse { background: var(--altus-bg-inverse); color: var(--altus-fg1-inverse); } .altus-section-hero.altus-section-inverse .altus-section-hero-eyebrow { color: var(--altus-accent); } .altus-section-hero.altus-section-inverse .altus-section-hero-title { color: var(--altus-fg1-inverse); } .altus-section-hero.altus-section-inverse .altus-section-hero-lede { color: var(--altus-fg1-inverse); } /* ──────────────────────────────────────────────────────────── Variante broll — fond image, voile B ou C, noise data-altus-broll seul → voile B (sombre, texte clair) .altus-section-inverse[data-altus-broll] → voile C (clair, texte sombre) L'image est attribuée via la variable CSS --altus-broll. Voiles uniformes (jamais dégradés). Conforme à la règle DS §6 : tout texte sur image relève d'un voile B ou C, jamais de D. ──────────────────────────────────────────────────────────── */ .altus-section-hero[data-altus-broll] { background-image: var(--altus-broll); background-size: cover; background-position: center; } /* Voile B (défaut sur broll) — charbon 0.6, uniforme. Opacité modérée : l'image reste perceptible comme matière sous le texte ; la lisibilité est garantie par le contraste typographique (Light 300 sur fond non-blanc) plutôt que par un voile écrasant. */ .altus-section-hero[data-altus-broll]::before { content: ''; position: absolute; inset: 0; background: rgba(20, 17, 13, 0.6); z-index: 0; } /* Voile C (variante inverse combinée à l'image) — ivoire 0.7, uniforme. */ .altus-section-hero.altus-section-inverse[data-altus-broll]::before { background: rgba(235, 229, 218, 0.7); } /* Noise turbulence — identique sur B et C, mix-blend overlay. */ .altus-section-hero[data-altus-broll]::after { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml;utf8,"); opacity: 0.22; mix-blend-mode: overlay; z-index: 1; pointer-events: none; } /* ─── Animation d'entrée — fade discret au load ──────────── */ /* opacity 0→1, 600 ms, stagger 80 ms. Désactivé si l'utilisateur préfère réduire les animations. */ @media (prefers-reduced-motion: no-preference) { .altus-section-hero-eyebrow, .altus-section-hero-title, .altus-section-hero-lede, .altus-section-hero .altus-btn-group { opacity: 0; animation: altus-hero-fade-in 600ms var(--altus-ease) both; } .altus-section-hero-eyebrow { animation-delay: 0ms; } .altus-section-hero-title { animation-delay: 80ms; } .altus-section-hero-lede { animation-delay: 160ms; } .altus-section-hero .altus-btn-group { animation-delay: 240ms; } } @keyframes altus-hero-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ──────────────────────────────────────────────────────────── Responsive — mobile ≤ 768 px ──────────────────────────────────────────────────────────── */ @media (max-width: 768px) { .altus-section-hero { padding-block: clamp(72px, 12vh, 120px); padding-inline: 22px; } .altus-section-hero:first-child { /* Sur mobile, 25vh peut être trop quand le viewport est court. On baisse à 20vh — l'air reste là, sans gaspiller l'écran. */ padding-top: 20vh; } .altus-section-hero-content { gap: 20px; } .altus-section-hero-title { font-size: clamp(36px, 9vw, 56px); max-width: none; } .altus-section-hero-lede { font-size: clamp(16px, 4.5vw, 18px); max-width: none; } .altus-section-hero .altus-btn-group { flex-direction: column; align-items: stretch; gap: 12px; } .altus-section-hero .altus-btn-group .altus-btn { width: 100%; text-align: center; } } /* ============================================================ Variante mise en page « split » ------------------------------------------------------------ Titre 60 % à gauche, lede 40 % à droite, group de boutons en pleine largeur au bas du contenu. Pensé pour les pages à image de fond (data-altus-broll) où la composition débouche sur deux liens forts — « voir les formules » et « prendre rendez-vous » par exemple. Note DS : le rayon des boutons (pill) est ici une exception délibérée à la règle « pas de border-radius » — réservée à ce composant précis, le groupe de CTAs split. Toute autre surface reste rectangulaire. ============================================================ */ .altus-section-hero-split .altus-section-hero-content { /* Le contenu se répartit verticalement entre la grille texte en haut et le groupe de boutons en bas — sur des sections à grande hauteur (broll), ça aère la composition. */ gap: 48px; } .altus-section-hero-split .altus-section-hero-grid { display: grid; /* Titre 60 % · lede 40 % · gap explicite pour la lisibilité. */ grid-template-columns: 6fr 4fr; column-gap: clamp(48px, 7vw, 120px); align-items: end; } .altus-section-hero-split .altus-section-hero-grid .altus-section-hero-title { /* La largeur est déjà contrainte par la colonne grid. */ max-width: none; margin: 0; } .altus-section-hero-split .altus-section-hero-grid .altus-section-hero-lede { margin: 0; max-width: none; } /* Empilement de l'eyebrow au-dessus de la grille. */ .altus-section-hero-split .altus-section-hero-eyebrow { margin-bottom: -8px; /* compense le gap général de 48px */ } /* ---- Groupe de boutons pleine largeur ---------------------- Deux liens coté à coté sans espace : l'extrémité gauche du premier est arrondie, l'extrémité droite du second est arrondie, la jointure centrale reste droite. S'il n'y a qu'un seul bouton, les quatre coins sont arrondis. */ .altus-section-hero-split .altus-btn-group { display: flex; width: 100%; gap: 0; /* Annule le margin-top par défaut des CTAs — l'air vient du gap du content. */ margin-top: 0; } .altus-section-hero-split .altus-btn-group .altus-btn { flex: 1 1 0; padding: 28px 36px; /* La largeur du bouton est déterminée par la grille du groupe ; le contenu interne répartit le texte à gauche, l'icône à droite. */ justify-content: space-between; font-size: clamp(15px, 1.3vw, 18px); /* Aucun radius par défaut — les radii sont appliqués sur les coins externes via :first-child / :last-child / :only-child. */ border-radius: 0; } .altus-section-hero-split .altus-btn-group .altus-btn:first-child { border-top-left-radius: 999px; border-bottom-left-radius: 999px; } .altus-section-hero-split .altus-btn-group .altus-btn:last-child { border-top-right-radius: 999px; border-bottom-right-radius: 999px; } .altus-section-hero-split .altus-btn-group .altus-btn:only-child { border-radius: 999px; } .altus-section-hero-split .altus-btn-group .altus-btn svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1; fill: none; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; transition: transform 200ms var(--altus-ease); } .altus-section-hero-split .altus-btn-group .altus-btn:hover svg, .altus-section-hero-split .altus-btn-group .altus-btn:focus-visible svg { transform: translateX(4px); } /* Bouton secondaire dans un groupe split — outline 1 px ivoire sur fond translucide pour rester lisible au-dessus de l'image. */ .altus-section-hero-split .altus-btn-group .altus-btn-secondary { background: rgba(20, 17, 13, 0.4); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } /* En variante inverse (voile C), bascule en ivoire translucide pour rester contrasté sur fond clair. */ .altus-section-hero.altus-section-inverse .altus-btn-group .altus-btn-secondary { background: rgba(235, 229, 218, 0.4); } /* Responsive split */ @media (max-width: 768px) { .altus-section-hero-split .altus-section-hero-grid { grid-template-columns: 1fr; row-gap: 32px; } .altus-section-hero-split .altus-btn-group { flex-direction: column; } /* En colonne, les radii latales deviennent haut / bas. */ .altus-section-hero-split .altus-btn-group .altus-btn { width: 100%; padding: 22px 26px; } .altus-section-hero-split .altus-btn-group .altus-btn:first-child { border-radius: 999px 999px 0 0; } .altus-section-hero-split .altus-btn-group .altus-btn:last-child { border-radius: 0 0 999px 999px; } .altus-section-hero-split .altus-btn-group .altus-btn:only-child { border-radius: 999px; } } /* ============================================================ BOUTONS — primaire / secondaire Définis ici parce que le hero est leur premier usage, mais conçus pour être réutilisés partout dans le site. ============================================================ */ .altus-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 28px; font-family: var(--altus-font); font-size: 15px; font-weight: var(--altus-w-medium); letter-spacing: 0.04em; line-height: 1.2; text-decoration: none; cursor: pointer; background: transparent; border: 1px solid transparent; border-radius: 0; /* règle DS : pas de radius */ user-select: none; -webkit-appearance: none; appearance: none; transition: opacity 200ms var(--altus-ease), border-color 200ms var(--altus-ease), background 200ms var(--altus-ease), color 200ms var(--altus-ease); } .altus-btn:focus-visible { outline: 1px solid var(--altus-fg2); outline-offset: 4px; } /* Primaire — fond fg1 plein, texte bg. S'inverse automatiquement en variante C (fg1-inverse = charbon, bg-inverse = ivoire). */ .altus-btn-primary { background: var(--altus-fg1); color: var(--altus-bg); } /* Hover — unique passage du bronze (--altus-accent) dans le hero. Le bronze prend le fond, le texte bascule en charbon pour le contraste. Animation 200ms cubic-bezier (héritée de .altus-btn). */ .altus-btn-primary:hover { background: var(--altus-accent); color: var(--altus-fg1-inverse); opacity: 1; } .altus-section-hero.altus-section-inverse .altus-btn-primary { background: var(--altus-fg1-inverse); color: var(--altus-bg-inverse); } .altus-section-hero.altus-section-inverse .altus-btn-primary:hover { background: var(--altus-accent); color: var(--altus-fg1-inverse); } /* Secondaire — outline 1 px, transparent. Couleur héritée. */ .altus-btn-secondary { background: transparent; color: currentColor; border-color: currentColor; } .altus-btn-secondary:hover { opacity: 0.7; }