, ou d'un wrapper. Pas de cascade à pousser à chaque page. */ .revalta-section-hero:first-child { /* Compensation du header fixe : globale, body.revalta main > :first-child (colors_and_type.css, identité 28/09/2026). Rien ici. */ } /* Container interne — borne la mesure de lecture. */ .revalta-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 ─────────────────────────────────────────────── */ .revalta-section-hero-eyebrow { margin: 0; font-size: 13px; font-weight: var(--revalta-w-medium); letter-spacing: 0.15em; text-transform: uppercase; /* Bleu encre — réservé à l'eyebrow du hero comme accent typographique unique. Identique sur fond clair et sombre (le bleu encre tient les deux). */ color: var(--revalta-accent); } /* ─── Titre h1 ────────────────────────────────────────────── */ .revalta-section-hero-title { margin: 0; /* Regular 400 — 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(--revalta-w-light); line-height: 1.05; letter-spacing: -0.02em; color: var(--revalta-fg1); max-width: 22ch; /* Évite les veuves typographiques dans un titre clé. */ text-wrap: balance; } /* ─── Lede ────────────────────────────────────────────────── */ .revalta-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(--revalta-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(--revalta-fg1); max-width: 60ch; text-wrap: pretty; } /* ─── CTAs ───────────────────────────────────────────────── */ .revalta-section-hero .revalta-btn-group { /* +16px de respiration avant les boutons (au-delà du gap de 24). */ margin-top: 16px; display: flex; flex-wrap: wrap; gap: 12px; } /* ──────────────────────────────────────────────────────────── Variante inverse — fond marine (variante C) Inverse les couleurs sémantiques. Le header de la page doit passer en data-revalta-theme="dark". ──────────────────────────────────────────────────────────── */ .revalta-section-hero.revalta-section-inverse { background: var(--revalta-bg-inverse); color: var(--revalta-fg1-inverse); } .revalta-section-hero.revalta-section-inverse .revalta-section-hero-eyebrow { color: var(--revalta-accent); } .revalta-section-hero.revalta-section-inverse .revalta-section-hero-title { color: var(--revalta-fg1-inverse); } .revalta-section-hero.revalta-section-inverse .revalta-section-hero-lede { color: var(--revalta-fg1-inverse); } /* ──────────────────────────────────────────────────────────── Variante broll — fond image, voile B ou C, noise data-revalta-broll seul → voile B (sombre, texte clair) .revalta-section-inverse[data-revalta-broll] → voile C (clair, texte sombre) L'image est attribuée via la variable CSS --revalta-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. ──────────────────────────────────────────────────────────── */ .revalta-section-hero[data-revalta-broll] { background-image: var(--revalta-broll); background-size: cover; background-position: center; } /* Voile B (défaut sur broll) — papier 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 (Regular 400 sur fond non-blanc) plutôt que par un voile écrasant. */ .revalta-section-hero[data-revalta-broll]::before { content: ''; position: absolute; inset: 0; background: var(--revalta-veil); z-index: 0; } /* Voile C (variante inverse combinée à l'image) — encre 0.7, uniforme. */ .revalta-section-hero.revalta-section-inverse[data-revalta-broll]::before { background: var(--revalta-veil-inverse); } /* Noise turbulence — identique sur B et C, mix-blend overlay. */ .revalta-section-hero[data-revalta-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) { .revalta-section-hero-eyebrow, .revalta-section-hero-title, .revalta-section-hero-lede, .revalta-section-hero .revalta-btn-group { opacity: 0; animation: revalta-hero-fade-in 600ms var(--revalta-ease) both; } .revalta-section-hero-eyebrow { animation-delay: 0ms; } .revalta-section-hero-title { animation-delay: 80ms; } .revalta-section-hero-lede { animation-delay: 160ms; } .revalta-section-hero .revalta-btn-group { animation-delay: 240ms; } } @keyframes revalta-hero-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ──────────────────────────────────────────────────────────── Responsive — mobile ≤ 768 px ──────────────────────────────────────────────────────────── */ @media (max-width: 768px) { .revalta-section-hero { padding-block: clamp(72px, 12vh, 120px); padding-inline: 22px; } .revalta-section-hero:first-child { /* Compensation du header fixe : globale, body.revalta main > :first-child (colors_and_type.css, identité 28/09/2026). Rien ici. */ } .revalta-section-hero-content { gap: 20px; } .revalta-section-hero-title { font-size: clamp(36px, 9vw, 56px); max-width: none; } .revalta-section-hero-lede { font-size: clamp(16px, 4.5vw, 18px); max-width: none; } .revalta-section-hero .revalta-btn-group { flex-direction: column; align-items: stretch; gap: 12px; } .revalta-section-hero .revalta-btn-group .revalta-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-revalta-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. ============================================================ */ .revalta-section-hero-split .revalta-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; } .revalta-section-hero-split .revalta-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; } .revalta-section-hero-split .revalta-section-hero-grid .revalta-section-hero-title { /* La largeur est déjà contrainte par la colonne grid. */ max-width: none; margin: 0; } .revalta-section-hero-split .revalta-section-hero-grid .revalta-section-hero-lede { margin: 0; max-width: none; } /* Empilement de l'eyebrow au-dessus de la grille. */ .revalta-section-hero-split .revalta-section-hero-eyebrow { margin-bottom: -8px; /* compense le gap général de 48px */ } /* ---- Groupe de boutons du split — deux pilules distinctes ----- Identité (28/09/2026) : le groupe soudé (jointure droite, coins externes arrondis) disparaît. Chaque bouton garde le rayon pilule, le padding et l'icône du bloc boutons de colors_and_type.css. */ .revalta-section-hero-split .revalta-btn-group { display: flex; flex-wrap: wrap; width: auto; gap: 12px; margin-top: 0; } .revalta-section-hero-split .revalta-btn-group .revalta-btn { flex: 0 1 auto; padding: 15px 24px; border-radius: var(--revalta-r-pill); } /* Responsive split */ @media (max-width: 768px) { .revalta-section-hero-split .revalta-section-hero-grid { grid-template-columns: 1fr; row-gap: 32px; } .revalta-section-hero-split .revalta-btn-group { flex-direction: column; align-items: stretch; } .revalta-section-hero-split .revalta-btn-group .revalta-btn { width: 100%; } } /* ============================================================ Variante mise en page « média » — texte + vidéo verticale 9:16 ------------------------------------------------------------ Texte à gauche (~58 %), lecteur vidéo vertical à droite (~42 %), alignés au centre vertical. Modèle de référence : hero avnear, média substitué par une vidéo Instagram (1080×1920). La vidéo est un élément d'AMBIANCE : autoplay MUET + loop par défaut. C'est l'exception assumée à la règle « pas d'autoplay » (qui ne vaut, elle, que pour la section media en click-to-play). Un bouton son permet d'activer/couper le son. prefers-reduced-motion: reduce → pas d'autoplay, poster figé + bouton play injecté par header.js. Variantes de fond : A (papier, défaut) · C (encre, inverse). Image de fond déconseillée ici (la vidéo est déjà le point focal). Comportement (bouton son, autoplay muet, reduced-motion) : porté par header.js — le script du shell toujours injecté à la publication. Aucun second fichier à injecter. ============================================================ */ .revalta-section-hero-media .revalta-section-hero-content { /* Un peu plus large que le hero standard pour loger les deux colonnes. */ max-width: 1280px; } .revalta-section-hero-media-grid { display: grid; /* ~58 % texte / 42 % média — proportions du modèle de référence. */ grid-template-columns: 1.4fr 1fr; column-gap: clamp(48px, 6vw, 96px); align-items: center; } /* ─── Colonne texte — reprend la hiérarchie hero ──────────── */ .revalta-section-hero-media-text { display: flex; flex-direction: column; gap: 24px; } .revalta-section-hero-media-text .revalta-section-hero-title { /* Un cran sous le hero plein écran : la vidéo partage la vedette. */ font-size: clamp(36px, 3.6vw, 60px); max-width: 16ch; } .revalta-section-hero-media-text .revalta-section-hero-lede { max-width: 44ch; } .revalta-section-hero-media-text .revalta-btn-group { margin-top: 8px; } /* ─── Colonne média — lecteur vertical 9:16 ───────────────── */ .revalta-section-hero-media-player { position: relative; justify-self: center; /* Hauteur pilotée, largeur déduite du ratio 9:16. Plafonnée pour ne pas dépasser le viewport ni la largeur de colonne. */ height: min(70vh, 720px); aspect-ratio: 9 / 16; width: auto; max-width: 100%; background: var(--revalta-bg); /* letterbox papier, jamais blanc */ overflow: hidden; border-radius: 0; /* règle DS : pas de radius */ isolation: isolate; } .revalta-section-hero-media-video { width: 100%; height: 100%; display: block; object-fit: cover; background: var(--revalta-bg); border-radius: 0; } /* ─── Bouton son — cercle hairline 48×48, coin bas-droit ──── Exception radius assumée (au même titre que le bouton play de la section media). Fond papier translucide + flou. */ .revalta-section-hero-media-sound { position: absolute; right: 16px; bottom: 16px; z-index: 3; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; color: var(--revalta-fg1); background: color-mix(in srgb, var(--revalta-bg) 40%, transparent); border: 1px solid currentColor; border-radius: 50%; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); cursor: pointer; -webkit-appearance: none; appearance: none; transition: transform 200ms var(--revalta-ease), background 200ms var(--revalta-ease); } .revalta-section-hero-media-sound[hidden] { display: none; } .revalta-section-hero-media-sound:hover, .revalta-section-hero-media-sound:focus-visible { transform: scale(1.05); } .revalta-section-hero-media-sound:focus-visible { outline: 1px solid var(--revalta-fg1); outline-offset: 4px; } .revalta-section-hero-media-sound svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1; fill: none; stroke-linecap: round; stroke-linejoin: round; } /* Bascule des icônes selon l'état du son (aria-pressed). */ .revalta-section-hero-media-sound .alt-sound-on { display: none; } .revalta-section-hero-media-sound .alt-sound-off { display: block; } .revalta-section-hero-media-sound[aria-pressed="true"] .alt-sound-on { display: block; } .revalta-section-hero-media-sound[aria-pressed="true"] .alt-sound-off { display: none; } /* ─── Bouton play (injecté en mode reduced-motion) ───────── Repris du vocabulaire de la section media : cercle 72×72, triangle bleu encre, centré sur le poster figé. */ .revalta-section-hero-media-play { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; background: transparent; color: var(--revalta-fg1); cursor: pointer; -webkit-appearance: none; appearance: none; } .revalta-section-hero-media-play:focus-visible { outline: 1px solid var(--revalta-fg1); outline-offset: -8px; } .revalta-section-hero-media-play-circle { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; border: 1px solid currentColor; border-radius: 50%; background: color-mix(in srgb, var(--revalta-bg) 28%, transparent); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); transition: transform 200ms var(--revalta-ease); } .revalta-section-hero-media-play:hover .revalta-section-hero-media-play-circle, .revalta-section-hero-media-play:focus-visible .revalta-section-hero-media-play-circle { transform: scale(1.05); } .revalta-section-hero-media-play-triangle { width: 26px; height: 26px; margin-left: 4px; /* décalage optique : centre la masse du triangle */ display: block; } .revalta-section-hero-media-play-triangle polygon { fill: var(--revalta-accent); } /* ─── Variante inverse (encre) — boutons en papier ──────── */ .revalta-section-hero-media.revalta-section-inverse .revalta-section-hero-media-sound, .revalta-section-hero-media.revalta-section-inverse .revalta-section-hero-media-play { color: var(--revalta-fg1-inverse); } .revalta-section-hero-media.revalta-section-inverse .revalta-section-hero-media-sound { background: color-mix(in srgb, var(--revalta-bg-inverse) 40%, transparent); } .revalta-section-hero-media.revalta-section-inverse .revalta-section-hero-media-play-circle { background: color-mix(in srgb, var(--revalta-bg-inverse) 28%, transparent); } .revalta-section-hero-media.revalta-section-inverse .revalta-section-hero-media-sound:focus-visible, .revalta-section-hero-media.revalta-section-inverse .revalta-section-hero-media-play:focus-visible { outline-color: var(--revalta-fg1-inverse); } /* ─── Responsive — empilement ≤ 900 px ───────────────────── Texte au-dessus, vidéo en-dessous, le tout centré. */ @media (max-width: 900px) { .revalta-section-hero-media-grid { grid-template-columns: 1fr; row-gap: 48px; } .revalta-section-hero-media-text .revalta-section-hero-title { max-width: none; } .revalta-section-hero-media-text .revalta-section-hero-lede { max-width: none; } .revalta-section-hero-media-player { height: min(60vh, 560px); } } /* ─── Filet de sécurité — coexistence avec .revalta-section-hero-split ------------------------------------------------------------ Le normaliseur de publication peut ajouter .revalta-section-hero-split à toute section hero, y compris un hero média. Cette classe parasite ne doit JAMAIS reconfigurer la mise en page média : ici, la grille texte/vidéo prime. On neutralise les règles split qui, sinon, étireraient le groupe de boutons en pleine largeur et fausseraient l'espacement du contenu. (Correctif idéalement aussi porté côté normaliseur ; ce filet garantit le rendu quoi qu'il arrive.) */ .revalta-section-hero-media.revalta-section-hero-split .revalta-section-hero-content { gap: 24px; } .revalta-section-hero-media.revalta-section-hero-split .revalta-section-hero-media-text .revalta-btn-group { display: flex; flex-wrap: wrap; width: auto; gap: 16px; margin-top: 8px; } .revalta-section-hero-media.revalta-section-hero-split .revalta-section-hero-media-text .revalta-btn-group .revalta-btn { flex: 0 0 auto; width: auto; padding: 18px 30px; border-radius: 999px; } /* ============================================================ BOUTONS — le bloc unique vit dans colors_and_type.css depuis l'identité (28/09/2026) : pilules, primaire bleu accent, secondaire contour encre, or, contexte inverse. Rien n'est redéfini ici. ============================================================ */ /* ─── Hero split — échelle direction B (Home validée 26/09/2026) ── */ .revalta-section-hero-split{min-height:min(88vh,860px);display:flex;align-items:flex-end;padding-bottom:clamp(40px,6vh,72px)} .revalta-section-hero-split .revalta-section-hero-content{width:100%} .revalta-section-hero-split .revalta-section-hero-grid .revalta-section-hero-title{font-size:clamp(44px,5.6vw,84px);line-height:1;letter-spacing:-.035em;font-weight:var(--revalta-w-medium);text-wrap:balance} .revalta-section-hero-split .revalta-section-hero-grid .revalta-section-hero-lede{font-size:clamp(17px,1.35vw,21px);line-height:1.5;border-left:1px solid var(--revalta-sep);padding-left:clamp(20px,2.4vw,36px);text-wrap:pretty} /* ─── Hero de page secondaire — même split, hauteur réduite ───── */ .revalta-section-hero-split.revalta-section-hero-page{min-height:min(62vh,620px)} .revalta-section-hero-page .revalta-section-hero-grid .revalta-section-hero-title{font-size:clamp(38px,4.6vw,68px)} /* ============================================================ Variante « preuve + action » — hero de la home (identité, 28/09/2026) ------------------------------------------------------------ Texte à gauche : puces produits · h1 à mot tournant · lede · note Google en pilule (ou liste de faits · boutons · pastilles de preuve). Panneau simulateur arrondi à droite : projet (select) · curseurs · résultat · bouton · note. Quatre surfaces, un seul contrat : A .revalta-section-hero-action blanc C-flat + .revalta-section-inverse marine C + .revalta-section-inverse[data-revalta-broll] image + voile sombre B + [data-revalta-broll] image + voile clair Le panneau garde ses couleurs encre sur toutes les surfaces (accent et filet re-déclarés avec les alias « default »). .revalta-section-hero.revalta-section-hero-action .revalta-section-hero-content .revalta-section-hero-action-grid .revalta-section-hero-action-text ul.revalta-section-hero-chips > li > a h1.revalta-section-hero-title (> span.revalta-section-hero-rotate[data-revalta-rotate] > span[data-on] …) p.revalta-section-hero-lede a.revalta-section-hero-rating (> .revalta-section-hero-stars · strong · span · svg.revalta-section-hero-rating-arrow) ul.revalta-section-hero-list · .revalta-btn-group · p.revalta-section-hero-proof (optionnels) form.revalta-section-hero-panel[data-revalta-simulator] p.revalta-section-hero-panel-title .revalta-section-hero-panel-project (label + select) .revalta-section-hero-panel-field (header > label + output) + input.revalta-section-hero-panel-range .revalta-section-hero-panel-result > -result-label · -result-figure · -result-sub button.revalta-btn.revalta-btn-primary · p.revalta-section-hero-panel-note ============================================================ */ .revalta-section-hero-action{background:var(--revalta-light);padding:clamp(48px,6vw,88px) var(--revalta-web-pad-x) clamp(56px,6vw,96px);min-height:0;display:block} .revalta-section-hero-action.revalta-section-inverse{background:var(--revalta-bg-inverse)} .revalta-section-hero-action[data-revalta-broll]{background-color:var(--revalta-light)} .revalta-section-hero-action.revalta-section-inverse[data-revalta-broll]{background-color:var(--revalta-bg-inverse)} .revalta-section-hero-action .revalta-section-hero-content{max-width:var(--revalta-max);margin-inline:auto} .revalta-section-hero-action-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,5vw,80px);align-items:start} .revalta-section-hero-action-text{display:flex;flex-direction:column;gap:26px;min-width:0} .revalta-section-hero-action-text>*{max-width:100%} /* Puces produits */ .revalta-section-hero-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none} .revalta-section-hero-chips a{display:inline-block;padding:7px 14px;border:1px solid var(--revalta-sep);border-radius:var(--revalta-r-pill);font-size:13px;font-weight:var(--revalta-w-medium);letter-spacing:.04em;color:var(--revalta-fg2);text-decoration:none;transition:border-color 200ms var(--revalta-ease),color 200ms var(--revalta-ease)} .revalta-section-hero-chips a:hover{border-color:var(--revalta-fg1);color:var(--revalta-fg1)} .revalta-section-inverse .revalta-section-hero-chips a{color:var(--revalta-fg2-inverse)} .revalta-section-inverse .revalta-section-hero-chips a:hover{border-color:var(--revalta-fg1-inverse);color:var(--revalta-fg1-inverse)} /* Titre — mot tournant en accent (or inverse sur marine) */ .revalta-section-hero-action .revalta-section-hero-title{margin:0;font-size:clamp(36px,3.9vw,58px);line-height:1.04;letter-spacing:-.035em;font-weight:var(--revalta-w-title);max-width:none;text-wrap:balance} .revalta-section-hero-rotate{display:grid;color:var(--revalta-accent)} .revalta-section-hero-rotate>span{grid-area:1/1;opacity:0;transition:opacity 360ms var(--revalta-ease);text-wrap:balance} .revalta-section-hero-rotate>span[data-on]{opacity:1} .revalta-section-hero-title-accent,.revalta-section-hero-action .revalta-section-hero-title em{color:var(--revalta-accent);font-style:normal} .revalta-section-inverse .revalta-section-hero-rotate,.revalta-section-inverse .revalta-section-hero-title-accent,.revalta-section-inverse.revalta-section-hero-action .revalta-section-hero-title em{color:var(--revalta-gold-inverse)} .revalta-section-hero-action .revalta-section-hero-lede{margin:0;font-size:clamp(17px,1.3vw,20px);line-height:1.5;color:var(--revalta-fg2);max-width:54ch;text-wrap:pretty} .revalta-section-hero-action.revalta-section-inverse .revalta-section-hero-lede{color:var(--revalta-fg2-inverse)} /* Note Google — pilule cliquable */ .revalta-section-hero-rating{display:inline-flex;flex-wrap:wrap;align-items:center;gap:10px 12px;align-self:flex-start;margin:0;padding:12px 20px 12px 16px;border-radius:var(--revalta-r-pill);background:var(--revalta-bg);font-size:15px;color:var(--revalta-fg2);text-decoration:none;transition:background 200ms var(--revalta-ease)} .revalta-section-hero-rating:hover{background:var(--revalta-sky)} .revalta-section-hero-rating strong{color:var(--revalta-fg1);font-weight:var(--revalta-w-title);font-size:18px;letter-spacing:-.01em} .revalta-section-hero-rating-arrow{width:18px;height:18px;stroke:var(--revalta-fg1);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:transform 200ms var(--revalta-ease)} .revalta-section-hero-rating:hover .revalta-section-hero-rating-arrow{transform:translateX(4px)} .revalta-section-hero-stars{display:inline-flex;gap:4px;vertical-align:-2px} .revalta-section-hero-stars svg{width:20px;height:20px;fill:var(--revalta-gold);stroke:none;color:var(--revalta-gold)} .revalta-section-inverse .revalta-section-hero-rating{background:rgba(245,243,238,.1);color:var(--revalta-fg1-inverse)} .revalta-section-inverse .revalta-section-hero-rating:hover{background:rgba(245,243,238,.16)} .revalta-section-inverse .revalta-section-hero-rating strong,.revalta-section-inverse .revalta-section-hero-rating-arrow{color:var(--revalta-fg1-inverse);stroke:var(--revalta-fg1-inverse)} .revalta-section-inverse .revalta-section-hero-stars svg{fill:var(--revalta-gold-inverse);color:var(--revalta-gold-inverse)} /* Liste de faits (optionnelle) — sans filets, coche en accent */ .revalta-section-hero-list{list-style:none;margin:0;padding:0;border-top:0} .revalta-section-hero-list li{display:flex;gap:12px;align-items:flex-start;padding:6px 0;border-bottom:0;font-size:17px;line-height:1.45} .revalta-section-hero-list svg{width:18px;height:18px;flex:none;margin-top:3px;stroke:currentColor;stroke-width:1.75;fill:none;stroke-linecap:round;stroke-linejoin:round;color:var(--revalta-accent)} .revalta-section-inverse .revalta-section-hero-list svg{color:var(--revalta-accent-inverse)} /* Boutons et pastilles de preuve (optionnels) */ .revalta-section-hero-action .revalta-btn-group{margin-top:0;gap:12px} .revalta-section-hero-proof{margin:0;display:flex;flex-wrap:wrap;gap:10px;font-size:15px;line-height:1.5;color:var(--revalta-fg2)} .revalta-section-hero-proof>span{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:var(--revalta-r-pill);background:var(--revalta-bg);color:var(--revalta-fg2);white-space:nowrap} .revalta-section-hero-proof>span:first-child{font-size:16px} .revalta-section-hero-proof strong{color:var(--revalta-fg1);font-weight:var(--revalta-w-title);font-size:18px} .revalta-section-hero-proof .revalta-section-hero-stars svg{width:18px;height:18px} .revalta-section-inverse .revalta-section-hero-proof>span{background:rgba(245,243,238,.1);color:var(--revalta-fg1-inverse)} .revalta-section-inverse .revalta-section-hero-proof strong{color:var(--revalta-fg1-inverse)} /* Panneau simulateur — papier sur hero blanc, blanc ailleurs ; couleurs encre fixées */ .revalta-section-hero-panel{--revalta-accent:var(--revalta-accent-default);--revalta-sep:var(--revalta-sep-default);display:flex;flex-direction:column;gap:20px;margin:0;padding:clamp(24px,2.8vw,44px);background:var(--revalta-bg);color:var(--revalta-fg1);border:0;border-radius:var(--revalta-r-panel);min-width:0} .revalta-section-inverse .revalta-section-hero-panel,[data-revalta-broll] .revalta-section-hero-panel{background:var(--revalta-light)} .revalta-section-hero-panel-title{margin:0;font-size:13px;font-weight:var(--revalta-w-medium);letter-spacing:.15em;text-transform:uppercase;color:var(--revalta-fg2)} .revalta-section-hero-panel-project{display:grid;gap:8px} .revalta-section-hero-panel-project label{font-size:14px;line-height:1.4;color:var(--revalta-fg2)} .revalta-section-hero-panel-project select{appearance:none;-webkit-appearance:none;width:100%;border:1px solid var(--revalta-sep);border-radius:var(--revalta-r-pill);background:var(--revalta-light) url("data:image/svg+xml;utf8,") no-repeat right 16px center/16px;padding:12px 40px 12px 16px;font:inherit;font-size:14px;font-weight:var(--revalta-w-medium);color:var(--revalta-fg1);cursor:pointer;text-overflow:ellipsis} .revalta-section-hero-panel-project select:focus-visible{outline:2px solid var(--revalta-accent);outline-offset:2px} .revalta-section-hero-panel-field{display:flex;flex-direction:column;gap:8px} .revalta-section-hero-panel-field header{display:flex;justify-content:space-between;gap:16px;font-size:15px;line-height:1.4;color:var(--revalta-fg2)} .revalta-section-hero-panel-field output{font-variant-numeric:tabular-nums;font-weight:var(--revalta-w-medium);color:var(--revalta-fg1);white-space:nowrap} .revalta-section-hero-panel-range{-webkit-appearance:none;appearance:none;width:100%;height:4px;margin:8px 0 4px;background:var(--revalta-sep);border-radius:var(--revalta-r-pill);outline:none;cursor:pointer} .revalta-section-hero-panel-range::-webkit-slider-runnable-track{height:4px;background:var(--revalta-sep);border-radius:var(--revalta-r-pill)} .revalta-section-hero-panel-range::-moz-range-track{height:4px;background:var(--revalta-sep);border-radius:var(--revalta-r-pill)} .revalta-section-hero-panel-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;margin-top:-8px;background:var(--revalta-accent);border:3px solid var(--revalta-light);border-radius:50%;box-shadow:0 1px 4px rgba(16,28,51,.25)} .revalta-section-hero-panel-range::-moz-range-thumb{width:14px;height:14px;background:var(--revalta-accent);border:3px solid var(--revalta-light);border-radius:50%} .revalta-section-hero-panel-range:focus-visible::-webkit-slider-thumb{outline:2px solid var(--revalta-accent);outline-offset:2px} .revalta-section-hero-panel-range:focus-visible::-moz-range-thumb{outline:2px solid var(--revalta-accent);outline-offset:2px} .revalta-section-hero-panel-result{display:flex;flex-direction:column;gap:6px;padding:20px 22px;background:var(--revalta-light);border-radius:var(--revalta-r-card);border-top:0} .revalta-section-inverse .revalta-section-hero-panel-result,[data-revalta-broll] .revalta-section-hero-panel-result{background:var(--revalta-bg)} .revalta-section-hero-panel-result-label{margin:0;font-size:13px;color:var(--revalta-fg2)} .revalta-section-hero-panel-result-figure{margin:0;font-size:clamp(32px,2.8vw,42px);line-height:1.1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;font-weight:var(--revalta-w-title);color:var(--revalta-accent)} .revalta-section-hero-panel-result-sub{margin:0;display:flex;flex-wrap:wrap;gap:6px 20px;font-size:13px;color:var(--revalta-fg2);font-variant-numeric:tabular-nums} .revalta-section-hero-panel-result-sub strong{font-weight:var(--revalta-w-medium);color:var(--revalta-fg1)} .revalta-section-hero-panel .revalta-btn{appearance:none;-webkit-appearance:none;width:100%;font-family:var(--revalta-font);justify-content:center;padding:16px 22px;white-space:normal;text-align:center;background:var(--revalta-accent);color:var(--revalta-light);border-color:transparent} .revalta-section-hero-panel .revalta-btn:hover{background:var(--revalta-fg1);color:var(--revalta-light)} .revalta-section-hero-panel-note{margin:0;font-size:12px;line-height:1.6;color:var(--revalta-fg2);text-wrap:pretty} /* Renforts : sur marine et sur image + voile sombre, le panneau garde l'encre (la règle générique « p en papier » des sections inverse à image ne s'applique pas ici). */ .revalta-section-hero.revalta-section-inverse .revalta-section-hero-panel :is(.revalta-section-hero-panel-title,.revalta-section-hero-panel-project label,.revalta-section-hero-panel-field header,.revalta-section-hero-panel-field label,.revalta-section-hero-panel-result-label,.revalta-section-hero-panel-result-sub,.revalta-section-hero-panel-note){color:var(--revalta-fg2);opacity:1} .revalta-section-hero.revalta-section-inverse .revalta-section-hero-panel :is(.revalta-section-hero-panel-field output,.revalta-section-hero-panel-result-sub strong,.revalta-section-hero-panel-project select){color:var(--revalta-fg1)} .revalta-section-hero.revalta-section-inverse .revalta-section-hero-panel .revalta-section-hero-panel-result-figure{color:var(--revalta-accent-default)} .revalta-section-hero.revalta-section-inverse .revalta-section-hero-panel .revalta-btn{background:var(--revalta-accent-default);color:var(--revalta-light)} .revalta-section-hero.revalta-section-inverse .revalta-section-hero-panel .revalta-btn:hover{background:var(--revalta-fg1);color:var(--revalta-light)} /* Entrée au load — le panneau suit le texte. */ @media (prefers-reduced-motion: no-preference){ .revalta-section-hero-list,.revalta-section-hero-proof,.revalta-section-hero-rating,.revalta-section-hero-panel{opacity:0;animation:revalta-hero-fade-in 600ms var(--revalta-ease) both} .revalta-section-hero-list{animation-delay:200ms}.revalta-section-hero-proof,.revalta-section-hero-rating{animation-delay:320ms}.revalta-section-hero-panel{animation-delay:240ms} } @media (max-width:900px){ .revalta-section-hero-action-grid{grid-template-columns:minmax(0,1fr);gap:40px} .revalta-section-hero-action .revalta-section-hero-lede{max-width:none} .revalta-section-hero-rating{font-size:14px;padding:10px 16px 10px 14px} .revalta-section-hero-rating strong{font-size:16px} .revalta-section-hero-rating .revalta-section-hero-stars svg{width:16px;height:16px} } @media (max-width:768px){ .revalta-section-hero-action .revalta-btn-group{flex-direction:column;align-items:stretch} .revalta-section-hero-action .revalta-btn-group .revalta-btn{width:100%;white-space:normal;text-align:center} } @media (max-width:480px){ .revalta-section-hero-action .revalta-section-hero-title{font-size:clamp(34px,10vw,40px)} .revalta-section-hero-panel{padding:20px;border-radius:20px} }