/* ============================================================ ViaPilot · Design System — brand.css ------------------------------------------------------------ Vrais assets de marque Octevia : logotype "OCTEVIA / ACCOMPAGNEMENT NUMÉRIQUE", favicon "O" contourné, filet orange, motif arcs concentriques. ------------------------------------------------------------ Source des fichiers : design-system/brand/*.png Conserver les ratios d'origine — ne jamais étirer. ============================================================ */ :root { /* URLs des assets pour réutilisation dans tokens dérivés */ /* Logotype Octevia + motif arcs non livrés avec le set ViaTEMPO : tokens omis (fichiers PNG introuvables — casseraient la compilation AssetMapper). */ --brand-favicon: url("brand/favicon-O-6JYM-hi.png"); --brand-filet: url("brand/filet-orange-kTV8auN.png"); /* Logo produit ViaPilot (cf. §08) — D officiel : I capsule orange + O ovale vertical */ --brand-vp: url("brand/logo-viapilot-VtS41eW.svg"); --brand-vp-light: url("brand/logo-viapilot-light-PGIw6F7.svg"); /* Logo produit ViaTEMPO (cf. §09) — O ovale vertical orange (hérité ViaPilot) */ --brand-vt: url("brand/logo-viatempo-GWNW77N.svg"); --brand-vt-light: url("brand/logo-viatempo-light-mLr019y.svg"); /* Icônes produit (cf. §10) — icône autonome dans le lockup ou seule en mark */ --brand-icon-compass: url("brand/icon-compass-E-2CDm6.svg"); /* blanc sur fond sombre */ --brand-icon-compass-light: url("brand/icon-compass-light-A39Qpcy.svg"); /* sombre sur fond clair */ --brand-icon-hourglass: url("brand/icon-hourglass-miCICdS.svg"); --brand-icon-hourglass-light: url("brand/icon-hourglass-light-CenQpkE.svg"); /* App tiles (cf. §11) — carré arrondi r=14, 3 thèmes */ --brand-app-vp-dark: url("brand/app-viapilot-dark-0N4W0zR.svg"); --brand-app-vp-orange: url("brand/app-viapilot-orange-Kw_WDnd.svg"); --brand-app-vp-light: url("brand/app-viapilot-light-2ylxAZF.svg"); --brand-app-vt-dark: url("brand/app-viatempo-dark-8mMGkS6.svg"); --brand-app-vt-orange: url("brand/app-viatempo-orange-7pAH_3u.svg"); --brand-app-vt-light: url("brand/app-viatempo-light-mNH9IzB.svg"); /* Favicons (cf. §12) — alias du thème dark de chaque app-tile */ --brand-favicon-vp: url("brand/favicon-viapilot-0N4W0zR.svg"); --brand-favicon-vt: url("brand/favicon-viatempo-8mMGkS6.svg"); /* Lockups produit (cf. §13) — icône + wordmark, autonome */ --brand-lockup-vp: url("brand/lockup-viapilot-vPxPJ2F.svg"); --brand-lockup-vp-light: url("brand/lockup-viapilot-light-Iu6GFtJ.svg"); --brand-lockup-vp-stacked: url("brand/lockup-viapilot-stacked-_JWSlRa.svg"); --brand-lockup-vp-stacked-light: url("brand/lockup-viapilot-stacked-light-8sRN4aq.svg"); --brand-lockup-vt: url("brand/lockup-viatempo-kbRB1Kz.svg"); --brand-lockup-vt-light: url("brand/lockup-viatempo-light-yqC8e-E.svg"); --brand-lockup-vt-stacked: url("brand/lockup-viatempo-stacked-hK_mut7.svg"); --brand-lockup-vt-stacked-light: url("brand/lockup-viatempo-stacked-light-BZ-yWxE.svg"); /* Lockups ViaTEMPO avec baseline (cf. §14) */ --brand-lockup-vt-baseline: url("brand/lockup-viatempo-baseline-bj8SuwW.svg"); --brand-lockup-vt-baseline-light: url("brand/lockup-viatempo-baseline-light-wRaP-KS.svg"); /* Ratios d'aspect natifs (à respecter strictement) */ --brand-logo-ratio: 810 / 305; /* ≈ 2.65:1 */ --brand-favicon-ratio: 1 / 1; --brand-vp-ratio: 84 / 42; /* logo ViaPilot : 2:1 */ --brand-vt-ratio: 84 / 42; /* logo ViaTEMPO : 2:1 (même chassis) */ --brand-icon-ratio: 1 / 1; /* icônes produit : carré 32×32 */ --brand-app-ratio: 1 / 1; /* app tile : carré 64×64 */ --brand-lockup-ratio: 233 / 70; /* lockup horizontal : icône + wordmark ≈ 3.33:1 */ --brand-lockup-stacked-ratio: 200 / 186; /* lockup vertical : icône au-dessus du wordmark */ --brand-lockup-baseline-ratio: 233 / 96; /* lockup + baseline produit ≈ 2.43:1 */ } /* ============================================================ 01 · LOGO LOGOTYPE — orange (sur fond clair) ============================================================ */ .brand-logo { display: inline-block; background: var(--brand-logo-orange) no-repeat center / contain; width: 132px; /* tail default — UI medium */ aspect-ratio: var(--brand-logo-ratio); flex-shrink: 0; } .brand-logo-sm { width: 88px; } .brand-logo-md { width: 132px; } .brand-logo-lg { width: 200px; } .brand-logo-xl { width: 280px; } /* Sur fond sombre — bascule en blanc */ .brand-logo-white { background-image: var(--brand-logo-white); } /* Variante "blanc + filet orange" (signature TDL/letterhead) */ .brand-logo-white-filet { background-image: var(--brand-logo-white-filet); } /* Accessibilité — toujours fournir un à côté */ .brand-logo[role="img"] { /* aria-label="Octevia — Accompagnement numérique" est requis sur l'élément parent */ } /* ============================================================ 02 · FAVICON / MARK "O" — l'oval contourné isolé ------------------------------------------------------------ La signature compacte (sidebar collapsed, favicon, app icon, loader). C'est le pendant du dot-mark orange — la "ponctuation visuelle" la plus distillée possible. ============================================================ */ .brand-mark { display: inline-block; background: var(--brand-favicon) no-repeat center / contain; width: 28px; height: 28px; flex-shrink: 0; } .brand-mark-sm { width: 18px; height: 18px; } .brand-mark-md { width: 28px; height: 28px; } .brand-mark-lg { width: 44px; height: 44px; } .brand-mark-xl { width: 64px; height: 64px; } /* Variante orange (sur fond noir/sombre) — on inverse via filter */ .brand-mark-orange { filter: invert(60%) sepia(95%) saturate(2400%) hue-rotate(2deg) brightness(102%) contrast(102%); } /* Variante blanche (sur fond noir) */ .brand-mark-white { filter: brightness(0) invert(1); } /* ============================================================ 03 · FILET ORANGE — séparateur identitaire ------------------------------------------------------------ Le petit filet orange est la "ponctuation orange" de l'identité historique Octevia (CC, TDL). Dans le DS, deux façons de l'évoquer : - .brand-filet : ligne horizontale courte orange - .brand-filet-thick : version plus épaisse (lettrhead) - .brand-filet-img : utilise l'image source (1:1) ============================================================ */ .brand-filet { display: inline-block; width: 32px; height: 3px; background: var(--orange-500); border-radius: 2px; vertical-align: middle; } .brand-filet-thick { height: 4px; width: 48px; } .brand-filet-thin { height: 2px; width: 24px; } .brand-filet-block { display: block; margin: var(--s-3) 0; } /* Variante image (fidèle au CC / letterhead) */ .brand-filet-img { display: inline-block; background: var(--brand-filet) no-repeat center / contain; width: 32px; height: 3px; vertical-align: middle; } /* ============================================================ 04 · MOTIF ARCS — décoration de fond ------------------------------------------------------------ Trois arcs concentriques empilés, en gris très clair sur lettrhead, en orange diffus dans le DS. Utiliser EN FOND, en filigrane, jamais comme élément actif. ============================================================ */ .brand-motif-bg { position: relative; isolation: isolate; } .brand-motif-bg::before { content: ''; position: absolute; inset: 0; background: var(--brand-motif-large) no-repeat; background-position: center 110%; background-size: 160% auto; opacity: 0.08; z-index: -1; pointer-events: none; } .brand-motif-bg.is-soft::before { opacity: 0.05; } .brand-motif-bg.is-strong::before { opacity: 0.16; } /* Variante : motif petit en bordure (CC/business card style) */ .brand-motif-corner { position: relative; } .brand-motif-corner::after { content: ''; position: absolute; top: 50%; right: -10%; transform: translateY(-50%); width: 40%; aspect-ratio: 376/791; background: var(--brand-motif) no-repeat right center / contain; opacity: 0.10; pointer-events: none; } /* ============================================================ 05 · LOCKUP — assemblages canoniques ------------------------------------------------------------ Une seule manière de poser le logotype dans une header :
Variante "app product" : logo + nom produit en mono séparés par un filet orange vertical. ============================================================ */ .brand-lockup { display: inline-flex; align-items: center; gap: var(--s-3); } .brand-lockup .sep { width: 1px; height: 28px; background: var(--orange-500); flex-shrink: 0; opacity: 0.6; } .brand-lockup .product { font-family: var(--font-mono); font-size: var(--t-12); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-strong); font-weight: var(--fw-bold); } .brand-lockup .product .meta { display: block; font-size: 9px; color: var(--text-muted); font-weight: var(--fw-regular); letter-spacing: 0.12em; margin-top: 2px; } /* ============================================================ 06 · SAFE ZONE — règle de protection autour du logotype ------------------------------------------------------------ Outil de visualisation pour la doc — pas pour la prod. ============================================================ */ .brand-safe { display: inline-block; padding: 24px; outline: 1px dashed var(--orange-300); outline-offset: -1px; position: relative; } .brand-safe::before, .brand-safe::after { content: 'safe'; position: absolute; font-family: var(--font-mono); font-size: 9px; color: var(--orange-700); letter-spacing: 0.08em; text-transform: uppercase; } .brand-safe::before { top: 4px; left: 6px; } .brand-safe::after { bottom: 4px; right: 6px; } /* ============================================================ 07 · MISUSE — exemples à ne PAS faire (doc seulement) ============================================================ */ .brand-misuse { position: relative; display: inline-block; padding: 12px; border: 1px dashed var(--danger-base); background: var(--danger-soft); border-radius: var(--r-6); } .brand-misuse::after { content: '✕'; position: absolute; top: -10px; right: -10px; width: 22px; height: 22px; background: var(--danger-base); color: #fff; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: var(--fw-bold); } /* ============================================================ 08 · LOCKUP PRODUIT — ViaPilot « by Octevia » (D officiel) ------------------------------------------------------------ Le SEUL endroit où le produit ViaPilot s'écrit. Le logo est le SVG canonique design-system/brand/logo-viapilot.svg : ViaP · [I capsule orange] · L · [O ovale vertical orange] · T ____ BY OCTEVIA Le I (capsule) et le O (ovale) lisent comme « 1 » et « 0 » — clin d'œil binaire qui ancre le produit dans le numérique. ------------------------------------------------------------ Usage: Variantes: .brand-vp.is-on-light surface claire (login, PDF, splash) .brand-vp.is-mark-only le mark Octevia seul (sidebar repliée) ------------------------------------------------------------ Tokens utilisés: --brand-vp, --brand-vp-light, --brand-favicon Aspect-ratio natif: 2:1 (--brand-vp-ratio). Ne JAMAIS déformer. ============================================================ */ .brand-vp { display: inline-block; width: 140px; /* taille canonique sidebar */ aspect-ratio: var(--brand-vp-ratio); background: var(--brand-vp) no-repeat center / contain; flex-shrink: 0; } .brand-vp.is-on-light { background-image: var(--brand-vp-light); } /* Tailles tabulaires — utiliser ces alias au lieu de width arbitraire */ .brand-vp-sm { width: 92px; } /* topbar, breadcrumb */ .brand-vp-md { width: 140px; } /* sidebar (défaut) */ .brand-vp-lg { width: 200px; } /* login, splash */ .brand-vp-xl { width: 320px; } /* PDF de couverture */ /* Variante « mark seul » — le favicon-O Octevia, en orange. Utilisée automatiquement en sidebar repliée (navigation.css §02b) via .app-shell.is-collapsed .brand-vp { ... }. */ .brand-vp.is-mark-only { width: 28px; aspect-ratio: 1 / 1; background-image: var(--brand-favicon); filter: invert(60%) sepia(95%) saturate(2400%) hue-rotate(2deg) brightness(102%) contrast(102%); } /* ============================================================ 09 · LOCKUP PRODUIT — ViaTEMPO « by Octevia » ------------------------------------------------------------ Même chassis que ViaPilot (§08). Le wordmark partage le O ovale vertical orange — c'est la signature famille. Construction : V · i · a · T · E · M · P · [O ovale orange] ____ filet orange BY OCTEVIA ------------------------------------------------------------ Usage: Variantes: .brand-vt.is-on-light surface claire (login, PDF, splash) ------------------------------------------------------------ Tokens utilisés: --brand-vt, --brand-vt-light Aspect-ratio natif: 2:1 (--brand-vt-ratio). Ne JAMAIS déformer. ============================================================ */ .brand-vt { display: inline-block; width: 140px; /* taille canonique sidebar */ aspect-ratio: var(--brand-vt-ratio); background: var(--brand-vt) no-repeat center / contain; flex-shrink: 0; } .brand-vt.is-on-light { background-image: var(--brand-vt-light); } /* Tailles tabulaires — même échelle que ViaPilot */ .brand-vt-sm { width: 92px; } .brand-vt-md { width: 140px; } .brand-vt-lg { width: 200px; } .brand-vt-xl { width: 320px; } /* ============================================================ 10 · ICÔNES PRODUIT — compas (ViaPilot) + sablier (ViaTEMPO) ------------------------------------------------------------ Icône carrée 32×32 utilisée en lockup (icon-left ou stacked) adossée au wordmark, ou seule dans la nav (sidebar repliée, onglets, breadcrumbs). Accent orange sur la pièce qui « agit » : • compas → aiguille N (le cap) • sablier → grain + tas de sable (le temps qui passe) ------------------------------------------------------------ Usage: ============================================================ */ .brand-icon { display: inline-block; width: 32px; aspect-ratio: var(--brand-icon-ratio); background-repeat: no-repeat; background-position: center; background-size: contain; flex-shrink: 0; vertical-align: middle; } .brand-icon-sm { width: 20px; } .brand-icon-md { width: 32px; } .brand-icon-lg { width: 48px; } .brand-icon-xl { width: 64px; } .brand-icon-compass { background-image: var(--brand-icon-compass); } .brand-icon-compass.is-on-light { background-image: var(--brand-icon-compass-light); } .brand-icon-hourglass { background-image: var(--brand-icon-hourglass); } .brand-icon-hourglass.is-on-light { background-image: var(--brand-icon-hourglass-light); } /* ============================================================ 11 · APP TILE — carré arrondi 64×64 (favicon, app icon) ------------------------------------------------------------ Tuile produit. Trois thèmes : • .is-dark — fond espresso #1A1612 + glyphe blanc + accent orange (défaut) • .is-orange — fond orange #FF9900 + glyphe blanc mono • .is-light — fond paper #FBFAF7 + glyphe sombre + accent orange + trait subtil Le rendu à 16px (favicon) reste lisible (glyph épais, accent isolé). ------------------------------------------------------------ Usage: ============================================================ */ .brand-app { display: inline-block; width: 64px; aspect-ratio: var(--brand-app-ratio); background-repeat: no-repeat; background-position: center; background-size: contain; flex-shrink: 0; vertical-align: middle; } .brand-app-xs { width: 16px; } /* favicon */ .brand-app-sm { width: 32px; } /* nav, onglet */ .brand-app-md { width: 64px; } /* défaut */ .brand-app-lg { width: 96px; } /* tile homescreen */ .brand-app-xl { width: 128px; } /* PWA install splash */ .brand-app-vp.is-dark { background-image: var(--brand-app-vp-dark); } .brand-app-vp.is-orange { background-image: var(--brand-app-vp-orange); } .brand-app-vp.is-light { background-image: var(--brand-app-vp-light); } .brand-app-vp { background-image: var(--brand-app-vp-dark); } /* défaut */ .brand-app-vt.is-dark { background-image: var(--brand-app-vt-dark); } .brand-app-vt.is-orange { background-image: var(--brand-app-vt-orange); } .brand-app-vt.is-light { background-image: var(--brand-app-vt-light); } .brand-app-vt { background-image: var(--brand-app-vt-dark); } /* défaut */ /* ============================================================ 12 · FAVICONS — HTML head snippets canoniques ------------------------------------------------------------ SVG est servi en priorité (modernes), PNG en fallback si rasterisé (non fourni ici — cf. note de release). ------------------------------------------------------------ Dans le de chaque produit : ============================================================ */ /* ============================================================ 13 · LOCKUPS — icône + wordmark, assemblés en un seul SVG ------------------------------------------------------------ Deux compositions : • horizontal — icône 56×56 · filet orange vertical · wordmark ratio 233/70 ≈ 3.33:1 — par défaut • stacked — icône 72×72 centrée au-dessus du wordmark ratio 200/186 — splash, login, couverture PDF Chaque SVG est totalement autonome (paths inline, pas de référence externe) — sert directement en , background, ou dans un éditeur vectoriel. ------------------------------------------------------------ Usage CSS: ------------------------------------------------------------ Tokens utilisés: --brand-lockup-vp{,-light,-stacked,-stacked-light} --brand-lockup-vt{,-light,-stacked,-stacked-light} --brand-lockup-ratio, --brand-lockup-stacked-ratio ============================================================ */ .brand-lockup-vp, .brand-lockup-vt { display: inline-block; width: 233px; /* taille canonique horizontal */ aspect-ratio: var(--brand-lockup-ratio); background-repeat: no-repeat; background-position: center; background-size: contain; flex-shrink: 0; } .brand-lockup-vp { background-image: var(--brand-lockup-vp); } .brand-lockup-vt { background-image: var(--brand-lockup-vt); } .brand-lockup-vp.is-on-light { background-image: var(--brand-lockup-vp-light); } .brand-lockup-vt.is-on-light { background-image: var(--brand-lockup-vt-light); } /* Variante stacked — changement de ratio + d'image */ .brand-lockup-vp.brand-lockup-stacked, .brand-lockup-vt.brand-lockup-stacked { width: 200px; aspect-ratio: var(--brand-lockup-stacked-ratio); } .brand-lockup-vp.brand-lockup-stacked { background-image: var(--brand-lockup-vp-stacked); } .brand-lockup-vp.brand-lockup-stacked.is-on-light { background-image: var(--brand-lockup-vp-stacked-light); } .brand-lockup-vt.brand-lockup-stacked { background-image: var(--brand-lockup-vt-stacked); } .brand-lockup-vt.brand-lockup-stacked.is-on-light { background-image: var(--brand-lockup-vt-stacked-light); } /* Tailles tabulaires — width override */ .brand-lockup-sm { width: 160px; } .brand-lockup-md { width: 233px; } /* horizontal défaut */ .brand-lockup-lg { width: 320px; } .brand-lockup-xl { width: 480px; } /* couverture PDF */ /* ============================================================ 14 · LOCKUP + BASELINE PRODUIT — ViaTEMPO ------------------------------------------------------------ Variante "signée" du lockup horizontal ViaTEMPO : ajoute la baseline « SUIVI D'ACTIVITÉ · VALIDATION » sous le wordmark, alignée typographiquement (début sablier ↔ fin O ovale). ------------------------------------------------------------ Quand utiliser ce lockup plutôt que .brand-lockup-vt : • login, splash, page d'accueil produit • header de site marketing • couverture PDF, plaquette commerciale • en-tête de premier email transactionnel (welcome) Quand revenir au .brand-lockup-vt (sans baseline) : • header in-app récurrent, breadcrumb, signature mail • favicon, app tile, sidebar (utiliser .brand-vt à la place) ------------------------------------------------------------ Usage: Variantes: .is-on-light surface claire (login, PDF, splash) ============================================================ */ .brand-lockup-vt-baseline { display: inline-block; width: 233px; /* taille canonique md */ aspect-ratio: var(--brand-lockup-baseline-ratio); background: var(--brand-lockup-vt-baseline) no-repeat center / contain; flex-shrink: 0; } .brand-lockup-vt-baseline.is-on-light { background-image: var(--brand-lockup-vt-baseline-light); } /* Tailles tabulaires — utiliser ces alias plutôt qu'un width arbitraire */ .brand-lockup-baseline-sm { width: 180px; } /* sidebar large, header in-app */ .brand-lockup-baseline-md { width: 233px; } /* défaut */ .brand-lockup-baseline-lg { width: 320px; } /* login / splash */ .brand-lockup-baseline-xl { width: 480px; } /* couverture PDF, slide d'ouverture */