/* ========================================================================== TrigStage — feuille de style partagée entre les pages produit (trigstage/index.html et trigstage-mp/index.html). Identité visuelle propre à l'écosystème TrigStage (corail #fe5c47, Fraunces/IBM Plex) — distincte du design system du portail Agylus.Tech (bleu, Inter/JetBrains Mono, voir portal.css). Les deux pages qui l'utilisent partagent presque toutes ces règles à l'identique ; les rares différences réelles (taille du pad du hero, largeur du texte du bandeau fiabilité) sont scopées via une classe sur : body.trigstage-app → trigstage/index.html body.trigstage-mp-app → trigstage-mp/index.html ========================================================================== */ :root { --bg: #0b0c11; --bg-raised: #15161b; --bg-raised-2: #1c1d24; --ink: #f2ede6; --ink-muted: #9b968c; --accent: #fe5c47; --accent-soft: rgba(254, 92, 71, .13); --standby: #e8a33d; --rule: rgba(255,255,255,.09); --serif: "Fraunces", ui-serif, Georgia, serif; --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: inherit; } img { max-width: 100%; display: block; } .wrap { max-width: 1120px; margin: 0 auto; padding: 0 28px; } /* ---------- nav ---------- */ nav.top { position: sticky; top: 0; z-index: 10; background: rgba(11,12,17,.82); backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule); } nav.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; } .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; } .brand img { width: 26px; height: 26px; } .brand span { font-family: var(--mono); font-weight: 500; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); } .nav-right { display: flex; align-items: center; gap: 28px; } .nav-links { display: flex; gap: 28px; font-size: 14px; } .nav-links a { text-decoration: none; color: var(--ink-muted); transition: color .15s; } .nav-links a:hover, .nav-links a:focus-visible { color: var(--ink); } @media (max-width: 720px) { .nav-links { display: none; } } .lang-switch { display: flex; gap: 10px; font-size: 13px; font-family: var(--mono); } .lang-switch button { background: none; border: none; padding: 0; font: inherit; cursor: pointer; color: var(--ink-muted); } .lang-switch button[aria-current="true"] { color: var(--ink); font-weight: 600; text-decoration: underline; } .lang-switch button:hover { color: var(--ink); } /* ---------- hero ---------- */ .hero { /* padding-top/bottom seulement (pas le shorthand padding) : cet élément cumule les classes .hero ET .wrap — un shorthand ici écraserait le padding horizontal de .wrap (28px), collant le contenu du hero aux bords sur mobile alors que les autres sections (wrap séparé) restent correctement marginées (retour utilisateur, capture d'écran — même piège corrigé sur le portail, voir portal.css). */ padding-top: 96px; padding-bottom: 80px; display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; } @media (max-width: 880px) { .hero { grid-template-columns: 1fr; padding-top: 56px; padding-bottom: 48px; } } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 20px; } .cue-light { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--standby); animation: cueSequence 2.6s ease-in-out 1 forwards; } @keyframes cueSequence { 0% { background: var(--standby); box-shadow: 0 0 8px 2px rgba(232,163,61,.6); } 25% { box-shadow: 0 0 13px 4px rgba(232,163,61,.9); } 50% { background: var(--standby); box-shadow: 0 0 8px 2px rgba(232,163,61,.6); } 70% { background: var(--accent); box-shadow: 0 0 18px 6px rgba(254,92,71,.95); } 100% { background: var(--accent); box-shadow: 0 0 11px 3px rgba(254,92,71,.6); } } @media (prefers-reduced-motion: reduce) { .cue-light { animation: none; background: var(--accent); box-shadow: 0 0 11px 3px rgba(254,92,71,.6); } } h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(48px, 7vw, 84px); line-height: .98; letter-spacing: -.01em; margin: 0 0 24px; text-wrap: balance; } .word-go { color: var(--accent); opacity: 0; animation: goReveal 2.6s ease-in-out 1 forwards; } @keyframes goReveal { 0%, 65% { opacity: 0; } 85%, 100% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .word-go { animation: none; opacity: 1; } } .hero p.lede { font-size: 18px; color: var(--ink-muted); max-width: 46ch; margin: 0 0 32px; } .cta-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: 999px; font-size: 15px; font-weight: 500; text-decoration: none; border: 1px solid transparent; } .btn.primary { background: var(--accent); color: #16110f; } .btn.primary:hover { background: color-mix(in srgb, var(--accent) 88%, white); } .btn.ghost { border-color: var(--rule); color: var(--ink); } .btn.ghost:hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent); } /* Badge officiel Apple (règles d'usage : ne jamais recolorer/déformer, laisser respirer — voir developer.apple.com/app-store/marketing/guidelines). Le badge Google Play viendra à côté sur la page MP dès que TrigStage MP Android sera en production (retour utilisateur, 2026-07-30). Note i18n : seul l'artwork français existe (app-store-badge-fr.svg) ; le libellé alt est traduit dynamiquement mais le visuel du badge reste en français quelle que soit la langue de page tant qu'aucun artwork anglais n'a été fourni (limite connue, voir PROMO.md). */ .app-store-badge { display: inline-flex; align-items: center; line-height: 0; } .app-store-badge img { height: 48px; width: auto; } /* ---------- hero pad ---------- */ .hero-pad-wrap { display: flex; justify-content: flex-end; } /* Règle placée après la base exprès (retour utilisateur, capture d'écran mobile : le bouton restait collé à droite) — une media query définie avant la règle de base qu'elle doit surclasser perd le conflit de cascade à spécificité égale, quel que soit l'ordre d'évaluation des media queries elles-mêmes. */ @media (max-width: 880px) { .hero-pad-wrap { order: -1; justify-content: center; } } .hero-pad { width: min(240px, 46vw); aspect-ratio: 1; border-radius: 50%; position: relative; background: radial-gradient(circle at 32% 28%, #1e1f27, #0b0c11 72%); box-shadow: 0 30px 70px -24px rgba(0,0,0,.85), inset 0 2px 0 rgba(255,255,255,.05), inset 0 -16px 34px rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; transition: transform .2s ease, box-shadow .2s ease; } .hero-pad::before { content: ""; position: absolute; inset: 15%; border-radius: 50%; background: linear-gradient(160deg, #1b1c22, #0d0e13); box-shadow: 0 10px 22px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06); } /* Taille du logo dans le pad du hero : différente entre les deux pages (le mark "MP" respire moins bien en grand que le mark seul), scopée par page plutôt que dupliquée en règle générique. */ body.trigstage-app .hero-pad img { position: relative; z-index: 1; width: 30%; } body.trigstage-mp-app .hero-pad img { position: relative; z-index: 1; width: 34%; } .hero-pad:hover { transform: translateY(3px); box-shadow: 0 18px 50px -20px rgba(0,0,0,.85), inset 0 2px 0 rgba(255,255,255,.05), inset 0 -10px 26px rgba(0,0,0,.6); } /* ---------- sections ---------- */ section.block { padding: 72px 0; border-top: 1px solid var(--rule); } .eyebrow-label { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin: 0 0 16px; } .block h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(30px, 4vw, 44px); line-height: 1.08; margin: 0 0 20px; max-width: 18ch; text-wrap: balance; } .block p.body { font-size: 17px; color: var(--ink-muted); max-width: 62ch; margin: 0; } /* Centré dans le wrap plutôt que collé à gauche (retour utilisateur, capture d'écran : sur un écran large, un texte étroit plaqué à gauche d'un conteneur déjà centré laissait un vide déséquilibré à droite) — reste un paragraphe en drapeau (ragged-right) normal, juste la colonne elle-même qui se centre, même principe que .reliability plus bas. */ .block-content { max-width: 62ch; margin: 0 auto; } @media (max-width: 700px) { .block-content { margin: 0; } } /* ---------- flow diagram (trigstage/index.html uniquement — libellés en overlay directement sur l'image, retour utilisateur : image + texte séparés en dessous n'était pas satisfaisant) — positions en % du conteneur, calées sur les icônes du schéma (image 1600×900, ratio 16:9 conservé par .flow-diagram-wrap). Les "trois maillons" d'origine mélangeaient à tort le matériel dédié (qui passe par la centrale) et TrigStage MP/un contrôleur générique (qui ne passe jamais par elle) dans un seul chemin linéaire. Libellés bilingues par spans inline (pas de duplication des divs positionnées : ça aurait forcé à garder deux jeux de coordonnées en synchro à chaque futur ajustement). ---------- */ /* Sous ~640px, les libellés se chevauchent quel que soit le rétrécissement de police (constaté à l'usage : "Multipad" touchait "Centrale-relais", le tag "Bientôt disponible" chevauchait "BLE-MIDI") — largeur minimale du diagramme + défilement horizontal du conteneur plutôt que du texte illisible ou collé (retour utilisateur : le texte doit rester sur l'image, pas de repli en légende séparée). */ .flow-diagram-scroll { overflow-x: auto; margin: 32px 0 24px; border-radius: 16px; } .flow-diagram-wrap { position: relative; width: 100%; min-width: 640px; aspect-ratio: 16 / 9; border-radius: 16px; border: 1px solid var(--rule); overflow: hidden; background: #070810; } .flow-diagram-wrap img { width: 100%; height: 100%; display: block; object-fit: contain; } .flow-label { position: absolute; transform: translateX(-50%); text-align: center; max-width: 34%; line-height: 1.3; } .flow-label strong { display: block; font-size: clamp(10px, 1.7vw, 15px); font-weight: 600; color: var(--ink); } .flow-label .caption { display: block; font-family: var(--mono); font-size: clamp(8px, 1.2vw, 11px); color: var(--ink-muted); letter-spacing: .04em; text-transform: uppercase; } .flow-label .tag { display: inline-block; margin-top: 5px; font-family: var(--mono); font-size: clamp(7px, 1vw, 10px); font-weight: 500; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--rule); background: color-mix(in srgb, var(--bg) 60%, transparent); } .flow-label .tag.soon { color: var(--standby); border-color: color-mix(in srgb, var(--standby) 45%, transparent); } .flow-label .tag.available { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); } /* ---------- ecosystem / status note ---------- */ .status-line { display: flex; align-items: flex-start; gap: 10px; font-family: var(--mono); font-size: 13px; color: var(--ink-muted); margin-top: 28px; } .status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px 2px rgba(254,92,71,.55); flex: none; margin-top: 6px; } /* Ambre "standby" plutôt que corail "go" (même vocabulaire que le cue-light du hero) pour distinguer un fait déjà vrai aujourd'hui (le point corail) d'une disponibilité à venir (le point ambre). Utilisé sur trigstage/index.html uniquement. */ .status-dot.standby { background: var(--standby); box-shadow: 0 0 10px 2px rgba(232,163,61,.55); } .status-line a { color: var(--accent); text-decoration: none; } .status-line a:hover { text-decoration: underline; } /* ---------- callout card (mp-card sur trigstage/index.html, partner-card sur trigstage-mp/index.html — même composant, deux noms historiques, règles identiques) ---------- */ .mp-card, .partner-card { display: flex; gap: 24px; align-items: center; background: var(--bg-raised); border: 1px solid var(--rule); border-radius: 20px; padding: 32px; margin-top: 32px; } @media (max-width: 620px) { .mp-card, .partner-card { flex-direction: column; text-align: center; } } .mp-card img, .partner-card img { width: 64px; height: 64px; flex: none; } .mp-card h4, .partner-card h4 { margin: 0 0 6px; font-size: 18px; } .mp-card p, .partner-card p { margin: 0; color: var(--ink-muted); font-size: 15px; } .mp-card a, .partner-card a { color: var(--accent); text-decoration: none; font-weight: 500; white-space: nowrap; } .mp-card a:hover, .partner-card a:hover { text-decoration: underline; } /* ---------- platforms row (trigstage-mp/index.html uniquement) ---------- */ .platforms { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } .platform-pill { font-family: var(--mono); font-size: 13px; color: var(--ink-muted); border: 1px solid var(--rule); border-radius: 999px; padding: 8px 16px; } /* Pas encore testée (Watch/Wear OS, retour utilisateur : pas de quoi valider ces versions pour l'instant) — même vocabulaire ambre "standby" que le reste du site plutôt qu'une simple omission. */ .platform-pill.soon { color: var(--standby); border-color: rgba(232,163,61,.3); } .platform-pill.soon .tag-soon { opacity: .75; margin-left: 6px; } /* ---------- reliability strip ---------- */ .reliability { background: var(--bg-raised); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .reliability .wrap { padding: 56px 28px; text-align: center; } .reliability p { font-family: var(--serif); font-size: clamp(22px, 3vw, 30px); margin: 16px auto 0; text-wrap: balance; } /* Largeur de ligne du message : différente entre les deux pages (le texte MP est un peu plus long), scopée par page. */ body.trigstage-app .reliability p { max-width: 26ch; } body.trigstage-mp-app .reliability p { max-width: 30ch; } .eyebrow-centered { justify-content: center; } .cue-light-lit { animation: none; background: var(--accent); box-shadow: 0 0 11px 3px rgba(254,92,71,.6); } /* ---------- footer ---------- */ footer { padding: 56px 0 64px; } footer .wrap { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; font-size: 13px; color: var(--ink-muted); } footer .links { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; } footer a { text-decoration: none; } footer a:hover { color: var(--ink); } footer .contact { color: var(--accent); font-weight: 500; text-decoration: none; } footer .contact:hover { text-decoration: underline; } ::selection { background: var(--accent-soft); color: var(--ink); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } [data-lang="en"] { display: none; }