:root { --ln-navy: #0B1F3C; --ln-navy-dark: #071426; --ln-navy-light: #16305A; --ln-green: #208040; --ln-red: #D3191A; --ln-gold: #F7C210; } /* Densité générale de l'appli : Bootstrap dimensionne ses composants (boutons, form-control, badges...) en rem, toujours relatif à la taille de police de — la réduire ici (plutôt que sur body) fait donc baisser proportionnellement tout le reste de l'appli, pas seulement le texte brut, pour retrouver la même densité que le tableau du portefeuille. */ html { font-size: 80%; } body { font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } .ln-brand-bar { height: 4px; width: 100%; background: linear-gradient( to right, var(--ln-green) 0%, var(--ln-green) 30%, var(--ln-gold) 45%, var(--ln-gold) 55%, var(--ln-red) 70%, var(--ln-red) 100% ); border-radius: 2px; } .ln-logo { max-width: 260px; height: auto; } .ln-tagline { color: var(--ln-navy-light); letter-spacing: .06em; font-size: .8rem; font-weight: 600; text-transform: uppercase; } .ln-card { border: none; border-radius: 1rem; box-shadow: 0 1rem 3rem rgba(11, 31, 60, .15); } .ln-card .card-body { padding: 2.5rem; } .btn-ln-primary { background-color: var(--ln-navy); border-color: var(--ln-navy); color: #fff; font-weight: 600; letter-spacing: .02em; } .btn-ln-primary:hover, .btn-ln-primary:focus, .btn-ln-primary:active { background-color: var(--ln-navy-dark); border-color: var(--ln-navy-dark); color: #fff; } .form-control:focus { border-color: var(--ln-navy-light); box-shadow: 0 0 0 .25rem rgba(11, 31, 60, .15); } .ln-label { font-weight: 600; color: var(--ln-navy); font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; } a.ln-link { color: var(--ln-navy); font-weight: 600; } a.ln-link:hover { color: var(--ln-red); } .ln-footer { color: #8a94a6; font-size: .8rem; } .ln-page { min-height: 100vh; background: linear-gradient(160deg, #f4f6fb 0%, #eef1f8 100%); } /* Sidebar + topbar */ .ln-shell { display: flex; min-height: 100vh; } .ln-sidebar { width: 260px; flex-shrink: 0; background-color: var(--ln-navy); border: none; } /* Bootstrap's plain .offcanvas is fixed/hidden off-screen by default at every width (that's the mobile drawer behaviour, kept as-is below this breakpoint) — above it, the sidebar becomes a normal, always-visible flex child instead of a drawer. Deliberately NOT using Bootstrap's `.offcanvas-lg` responsive variant: that class only resets to static/ visible when nested inside a `.navbar-expand-lg` wrapper (it's designed as a navbar-collapse replacement, not a standalone sidebar) — without that wrapper it stays hidden at every screen size, which is why the sidebar was invisible. Targeted by #lnSidebar (not just .ln-sidebar): Bootstrap's own `.offcanvas.offcanvas-start` compound selector has specificity (0,0,2,0) — double a single class — and wins over a same-specificity .ln-sidebar rule for `width`/`transform` regardless of stylesheet order. An ID selector (1,0,0,0) is needed to reliably beat it. */ @media (min-width: 992px) { #lnSidebar.ln-sidebar { position: sticky; top: 0; visibility: visible; transform: none; width: 260px; z-index: auto; box-shadow: none; height: 100vh; transition: width .15s ease; } /* Repli desktop : icônes seules. Le texte des liens n'est pas dans un propre (juste un nœud texte après l'icône) — mettre le lien à font-size:0 l'efface sans y toucher, puis .bi restaure la taille de l'icône seule. Sous-menus et bloc abonnement n'ont pas leur place à cette largeur : masqués plutôt qu'écrasés. */ body.ln-sidebar-collapsed #lnSidebar.ln-sidebar { width: 76px; } body.ln-sidebar-collapsed .ln-sidebar-nav > .nav-item { position: relative; } /* !important sur display/justify-content/align-items : les liens de groupe (« Mon hôtel »…) portent les utilitaires Bootstrap .d-flex.justify-content-between.align-items-center, compilés !important par défaut sur ce CDN (Bootstrap 5.3) — sans quoi ils gagnent malgré la spécificité plus élevée de ce sélecteur, et l'icône reste calée à gauche au lieu d'être centrée. */ body.ln-sidebar-collapsed .ln-sidebar-nav > .nav-item > .nav-link { font-size: 0; display: flex !important; align-items: center !important; justify-content: center !important; padding: .65rem .5rem; } body.ln-sidebar-collapsed .ln-sidebar-nav .bi { font-size: 1.15rem; margin: 0 !important; } body.ln-sidebar-collapsed .ln-sidebar-chevron, body.ln-sidebar-collapsed .ln-sidebar-subnav, body.ln-sidebar-collapsed .ln-quota { display: none !important; } /* Libellé au survol : reconstitué en JS dans data-label (le texte du lien n'est pas dans un isolable — voir le script en bas de app.blade.php), affiché comme une bulle détachée à droite de l'icône plutôt qu'un natif, pour un rendu cohérent avec le reste de l'interface et sans le délai d'apparition du navigateur. */ body.ln-sidebar-collapsed .ln-sidebar-nav > .nav-item > .nav-link[data-label]:hover::after { content: attr(data-label); position: absolute; left: calc(100% + .5rem); top: 50%; transform: translateY(-50%); background-color: var(--ln-navy-dark); color: #fff; font-size: .85rem; font-weight: 500; white-space: nowrap; padding: .45rem .8rem; border-radius: .4rem; box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .35); pointer-events: none; z-index: 1050; } body.ln-sidebar-collapsed .ln-sidebar-brand { padding: 1.75rem .5rem 1.25rem; } body.ln-sidebar-collapsed .ln-logo-complet, .ln-logo-icone { display: none; } body.ln-sidebar-collapsed .ln-logo-icone { display: block; max-width: 32px; border-radius: .4rem; } } .ln-sidebar-brand { padding: 1.75rem 1.25rem 1.25rem; justify-content: center; flex-shrink: 0; } .ln-sidebar-brand .ln-logo { max-width: 170px; } /* Le vrai conteneur qui défile est .offcanvas-body (ln-sidebar-body) — pas .ln-sidebar lui-même : Bootstrap lui donne déjà flex-grow:1 + overflow-y: auto par défaut, donc le contenu (liens) scrolle indépendamment de l'en-tête (logo) au-dessus, sans jamais dépasser la hauteur de l'écran. */ .ln-sidebar-body { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .25) transparent; } .ln-sidebar-body::-webkit-scrollbar { width: 6px; } .ln-sidebar-body::-webkit-scrollbar-track { background: transparent; } .ln-sidebar-body::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, .25); border-radius: 3px; } .ln-sidebar-body::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, .4); } .ln-sidebar-body { padding: .5rem 0 2rem; } .ln-sidebar-nav > .nav-item > .nav-link { color: rgba(255, 255, 255, .85); font-weight: 500; padding: .65rem 1.25rem; border-radius: 0; } /* Conteneur d'un sous-menu déroulé : bleu marine plus foncé que la sidebar, pour que les enfants se lisent d'un coup d'œil comme un bloc rattaché à leur groupe parent, et non comme des entrées de premier niveau. Les filets internes marquent le début et la fin du bloc sans ajouter de bordure dure. */ .ln-sidebar-subnav { background-color: var(--ln-navy-dark); padding: .25rem 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 -1px 0 rgba(255, 255, 255, .06); } .ln-sidebar-subnav .nav-link { color: rgba(255, 255, 255, .7); font-size: .92rem; padding: .5rem 1.25rem .5rem 2.25rem; } /* Un groupe ouvert reste visuellement lié au bloc foncé qu'il coiffe. */ .ln-sidebar-group-toggle[aria-expanded="true"] { background-color: rgba(255, 255, 255, .04); } .ln-sidebar-nav > .nav-item > .nav-link:hover, .ln-sidebar-nav > .nav-item > .nav-link.active, .ln-sidebar-subnav .nav-link:hover, .ln-sidebar-subnav .nav-link.active { color: var(--ln-gold); background-color: rgba(255, 255, 255, .06); } /* Sur le fond plus foncé du sous-menu, 6 % de blanc se distingue mal : un survol un peu plus marqué garde le même contraste apparent qu'au premier niveau. */ .ln-sidebar-subnav .nav-link:hover, .ln-sidebar-subnav .nav-link.active { background-color: rgba(255, 255, 255, .1); } .ln-sidebar-divider { border-color: rgba(255, 255, 255, .15); margin: .5rem 1.25rem; } .ln-sidebar-nav .bi { width: 1.1em; display: inline-block; text-align: center; opacity: .85; } .ln-sidebar-chevron { display: inline-block; transition: transform .15s ease; color: rgba(255, 255, 255, .5); } .ln-sidebar-group-toggle[aria-expanded="true"] .ln-sidebar-chevron { transform: rotate(90deg); } /* Récapitulatif de consommation de l'abonnement (partials._sidebar-abonnement). Épinglé en bas de la sidebar : c'est un frère de .offcanvas-body — lequel porte déjà flex-grow:1 + overflow-y:auto — dans un .offcanvas que Bootstrap dispose en colonne flex. Le bloc garde donc sa hauteur naturelle et reste visible pendant que la liste des menus défile au-dessus. Les couleurs des jauges sont des variantes éclaircies des couleurs de marque : sur le bleu marine de la sidebar, --ln-green et --ln-red manquent de luminance pour rester lisibles sur un filet de 4 px. */ .ln-quota { --ln-quota-ok: #3ecf7a; --ln-quota-tendu: var(--ln-gold); --ln-quota-sature: #ff6b6b; flex-shrink: 0; background-color: var(--ln-navy-dark); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); } .ln-quota-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; padding: .7rem 1.25rem; border: 0; background: transparent; text-align: left; } .ln-quota-head:hover .ln-quota-titre, .ln-quota-head:hover .ln-quota-chevron { color: var(--ln-gold); } .ln-quota-head-texte { display: flex; flex-direction: column; gap: .1rem; min-width: 0; } .ln-quota-titre { color: rgba(255, 255, 255, .55); font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; transition: color .15s ease; } /* Nom du plan : l'information la plus lue du bloc, donc la seule en pleine opacité. Tronquée plutôt que repliée sur deux lignes, pour que la hauteur du bloc ne dépende pas de la longueur du libellé commercial. */ .ln-quota-plan { color: #fff; font-size: .95rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ln-quota-chevron { flex-shrink: 0; transition: transform .15s ease, color .15s ease; } .ln-quota-head[aria-expanded="true"] .ln-quota-chevron { transform: rotate(90deg); } .ln-quota-corps { padding: 0 1.25rem .9rem; } .ln-quota-item + .ln-quota-item { margin-top: .5rem; } .ln-quota-ligne { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin-bottom: .25rem; } .ln-quota-libelle { color: rgba(255, 255, 255, .7); font-size: .8rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ln-quota-libelle .bi { margin-right: .4rem; opacity: .6; } .ln-quota-valeur { color: #fff; flex-shrink: 0; font-size: .8rem; font-weight: 600; font-variant-numeric: tabular-nums; } .ln-quota-valeur-tendu { color: var(--ln-quota-tendu); } .ln-quota-valeur-sature { color: var(--ln-quota-sature); } /* Le dénominateur est un repère, pas une donnée à comparer : il s'efface derrière le nombre consommé, qui porte la couleur d'état. */ .ln-quota-sur { color: rgba(255, 255, 255, .45); font-weight: 400; } .ln-quota-jauge { height: 4px; border-radius: 2px; background-color: rgba(255, 255, 255, .12); overflow: hidden; } .ln-quota-jauge-remplissage { display: block; height: 100%; border-radius: 2px; background-color: var(--ln-quota-ok); transition: width .3s ease; } .ln-quota-jauge-tendu { background-color: var(--ln-quota-tendu); } .ln-quota-jauge-sature { background-color: var(--ln-quota-sature); } /* Quota illimité : un dégradé qui s'évanouit sur la droite, pour signaler « pas de plafond » sans jamais suggérer un taux de remplissage. */ .ln-quota-jauge-illimitee { display: block; height: 100%; background: linear-gradient(to right, rgba(62, 207, 122, .8), rgba(62, 207, 122, 0)); } .ln-quota-echeance { display: flex; align-items: center; gap: .35rem; margin-top: .75rem; padding-top: .6rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .6); font-size: .75rem; } .ln-quota-echeance-proche { color: var(--ln-gold); } .ln-quota-date { color: rgba(255, 255, 255, .4); } .ln-quota-echeance-proche .ln-quota-date { color: rgba(247, 194, 16, .7); } .ln-quota-lien { display: inline-flex; align-items: center; margin-top: .5rem; color: var(--ln-gold); font-size: .78rem; font-weight: 600; text-decoration: none; } .ln-quota-lien:hover { color: #fff; } .ln-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .ln-topbar { background-color: var(--ln-navy); padding: .75rem 1.5rem; display: flex; align-items: center; gap: 1rem; } .ln-sidebar-toggle { border: none; color: rgba(255, 255, 255, .85); padding: .25rem .5rem; } .ln-sidebar-toggle:hover { color: var(--ln-gold); } .ln-topbar .nav-link { color: rgba(255, 255, 255, .85); } .ln-topbar .nav-link:hover { color: var(--ln-gold); } .ln-topbar form .btn-outline-secondary { color: rgba(255, 255, 255, .85); border-color: rgba(255, 255, 255, .4); } .ln-topbar form .btn-outline-secondary:hover { color: var(--ln-navy); background-color: rgba(255, 255, 255, .85); border-color: rgba(255, 255, 255, .85); } /* Recherche collée à l'extrême gauche du topbar (juste après le bouton menu mobile, masqué en desktop) — notifications + déconnexion collées à l'extrême droite via margin-left:auto, quelle que soit la largeur prise par la recherche. */ .ln-topbar-actions { margin-left: auto; display: flex; align-items: center; gap: .5rem; flex-shrink: 0; } .ln-topbar-entite { align-items: center; gap: .45rem; padding: .3rem .7rem; border-radius: 2rem; background-color: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .85); font-size: .82rem; font-weight: 500; white-space: nowrap; flex-shrink: 0; max-width: 220px; overflow: hidden; } .ln-topbar-entite i { color: var(--ln-gold); flex-shrink: 0; } .ln-topbar-entite-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ln-topbar-profil { display: flex; align-items: center; gap: .55rem; text-decoration: none; color: rgba(255, 255, 255, .85); padding: .25rem .5rem; border-radius: .5rem; } .ln-topbar-profil:hover, .ln-topbar-profil.active { color: var(--ln-gold); background-color: rgba(255, 255, 255, .08); } .ln-topbar-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .ln-topbar-avatar-initiales { display: flex; align-items: center; justify-content: center; background-color: rgba(255, 255, 255, .15); color: #fff; font-size: .78rem; font-weight: 600; } .ln-topbar-nom { font-size: .88rem; font-weight: 500; white-space: nowrap; } .ln-search { position: relative; width: 100%; max-width: 480px; } .ln-search-input { border-radius: 2rem; padding-left: 1.1rem; } .ln-search-results { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: #fff; border-radius: .75rem; box-shadow: 0 1rem 3rem rgba(11, 31, 60, .2); max-height: 420px; overflow-y: auto; z-index: 1050; padding: .5rem 0; } .ln-search-category { padding: .5rem 1rem .25rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: #8a94a6; font-weight: 600; } .ln-search-item { display: block; padding: .5rem 1rem; color: var(--ln-navy); text-decoration: none; } .ln-search-item:hover { background-color: #f4f6fb; } .ln-search-item .sous-titre { font-size: .78rem; color: #8a94a6; } .ln-search-empty { padding: 1rem; color: #8a94a6; font-size: .85rem; text-align: center; } /* Plan de sièges du bus (aperçu temps réel) */ .bus-schema { border: 3px solid var(--ln-navy); border-radius: 28px 28px 10px 10px; background: #fff; padding: 1.25rem .75rem; max-width: 340px; margin: 0 auto; } .bus-schema-front { text-align: center; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ln-navy-light); font-weight: 600; margin-bottom: .75rem; padding-bottom: .5rem; border-bottom: 2px dashed #dde3ee; } .bus-schema-classe-label { text-align: center; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: #8a94a6; margin: .75rem 0 .4rem; } .bus-schema-row { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-bottom: .35rem; } .bus-schema-group { display: flex; gap: .3rem; } .bus-schema-aisle { width: 1.4rem; } .bus-schema-seat { width: 2rem; height: 2rem; border: 1px solid var(--ln-navy); border-radius: .35rem; display: flex; align-items: center; justify-content: center; font-size: .65rem; font-weight: 600; background: #f4f6fb; color: var(--ln-navy); } .bus-schema-seat.classe-1 { background: var(--ln-gold); border-color: #c99a0b; color: var(--ln-navy); } .bus-schema-seat--libre { cursor: pointer; transition: transform .1s ease; } .bus-schema-seat--libre:hover { transform: scale(1.12); box-shadow: 0 0 0 2px var(--ln-navy-light); } .bus-schema-seat--occupe { background: var(--ln-red); border-color: var(--ln-red); color: #fff; cursor: not-allowed; opacity: .85; } .bus-schema-seat--reserve { background: #8a94a6; border-color: #8a94a6; color: #fff; cursor: not-allowed; opacity: .85; } .bus-schema-seat--choisi { background: var(--ln-green); border-color: var(--ln-green); color: #fff; cursor: pointer; } .bus-schema-seat--cible { box-shadow: 0 0 0 3px var(--ln-navy) !important; } .bus-schema-legende { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; font-size: .75rem; color: var(--ln-navy-light); margin-top: .75rem; } .bus-schema-legende span { display: inline-flex; align-items: center; gap: .3rem; } .bus-schema-legende i { display: inline-block; width: .8rem; height: .8rem; border-radius: .2rem; border: 1px solid var(--ln-navy); } .bus-schema-empty { text-align: center; color: #8a94a6; font-size: .85rem; padding: 1rem 0; } .bus-schema-total { text-align: center; margin-top: .75rem; padding-top: .5rem; border-top: 2px dashed #dde3ee; font-weight: 600; color: var(--ln-navy); font-size: .85rem; } .ligne-schema-wrapper { overflow-x: auto; padding: 1.5rem .5rem 1rem; } .ligne-schema { position: relative; display: flex; align-items: flex-start; min-width: 480px; } .ligne-schema-track { position: absolute; left: 0; right: 0; top: 15px; height: 3px; background-color: var(--ln-navy-light); z-index: 0; } .ligne-schema-arrets { position: relative; z-index: 1; display: flex; flex: 1; justify-content: space-around; align-items: flex-start; } .ligne-schema-node { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 70px; flex-shrink: 0; } .ligne-schema-dot { width: 16px; height: 16px; border-radius: 50%; background-color: var(--ln-gold); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--ln-navy-light); } .ligne-schema-dot--depart, .ligne-schema-dot--arrivee { width: 20px; height: 20px; } .ligne-schema-dot--depart { background-color: var(--ln-green); } .ligne-schema-dot--arrivee { background-color: var(--ln-red); } .ligne-schema-label { margin-top: .5rem; font-size: .78rem; color: var(--ln-navy); max-width: 90px; overflow-wrap: break-word; } .ligne-schema-node--depart .ligne-schema-label, .ligne-schema-node--arrivee .ligne-schema-label { font-weight: 600; } .ligne-schema-empty { font-size: .78rem; color: #8a94a6; padding-top: .5rem; flex: 1; text-align: center; } /* Espace administrateur hôtel (ERP) — cartes KPI et panneaux, partagés par toutes les pages hotel/* (dashboard, réception...) plutôt que dupliqués dans un <style> par vue. */ .hk-kpi { background: #fff; border: none; border-radius: .85rem; box-shadow: 0 .5rem 1.5rem rgba(11, 31, 60, .07); padding: 1rem 1.1rem; height: 100%; } .hk-kpi .lbl { color: #8a94a6; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; } .hk-kpi .val { color: var(--ln-navy); font-size: 1.5rem; font-weight: 700; line-height: 1.1; margin: .15rem 0; } .hk-kpi .val small { font-size: .8rem; font-weight: 600; color: #8a94a6; } .hk-ic { width: 38px; height: 38px; border-radius: .7rem; display: flex; align-items: center; justify-content: center; margin-bottom: .6rem; font-size: 1.1rem; } .hk-ic.ic-green { background: #e6f4ea; color: var(--ln-green); } .hk-ic.ic-navy { background: #e7ecf5; color: var(--ln-navy-light); } .hk-ic.ic-gold { background: #fef4d3; color: #b8890a; } .hk-ic.ic-red { background: #fbe6e6; color: var(--ln-red); } .hk-panel { background: #fff; border: none; border-radius: 1rem; box-shadow: 0 .5rem 1.5rem rgba(11, 31, 60, .07); } /* Module « Ma compagnie » (ERP administrateur de compagnie) — bandeau d'en-tête et barre d'onglets partagés par compagnie/*, societe/show et la gestion des agences, plutôt qu'un <style> dupliqué par vue. */ .ln-erp-header { background: #fff; border-radius: 1rem; box-shadow: 0 .5rem 1.5rem rgba(11, 31, 60, .07); padding: 1.1rem 1.25rem; margin-bottom: 1rem; } .ln-erp-header .logo { width: 56px; height: 56px; border-radius: .75rem; object-fit: contain; background: #f4f6fa; padding: .35rem; } .ln-erp-header .logo-vide { width: 56px; height: 56px; border-radius: .75rem; background: #e7ecf5; color: var(--ln-navy-light); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.25rem; } .ln-erp-header .meta { color: #8a94a6; font-size: .8rem; } .ln-erp-header .meta .bi { margin-right: .25rem; } .ln-erp-tabs { display: flex; flex-wrap: nowrap; gap: .35rem; overflow-x: auto; border-bottom: 1px solid #e4e8f0; margin-bottom: 1.25rem; } .ln-erp-tabs a { white-space: nowrap; padding: .55rem .9rem; font-size: .85rem; font-weight: 600; color: #6b7689; text-decoration: none; border-bottom: 2px solid transparent; } .ln-erp-tabs a:hover { color: var(--ln-navy); } .ln-erp-tabs a.active { color: var(--ln-navy); border-bottom-color: var(--ln-navy); } /* En-tête de page avec icône (titre + sous-titre), et tableaux à en-tête teinté / lignes accentuées par statut — introduits pour la page Lignes mais génériques, réutilisables par toute autre liste qui voudrait le même traitement plutôt que le simple <h1> + <table> par défaut. */ .ln-page-header-icon { width: 46px; height: 46px; border-radius: .85rem; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0; background: #e7ecf5; color: var(--ln-navy-light); } .ln-page-subtitle { color: #8a94a6; font-size: .82rem; } .ln-table thead th { background: #f7f9fc; color: var(--ln-navy); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; border-bottom: 2px solid #eef1f8; } .ln-table tbody td { border-color: #eef1f8; } .ln-row-accent-active td:first-child { box-shadow: inset 3px 0 0 0 var(--ln-green); } .ln-row-accent-inactive td:first-child { box-shadow: inset 3px 0 0 0 #d7dce5; } /* Visuel de trajet (ville de départ — flèche — ville d'arrivée), en remplacement d'un simple texte « Ville A → Ville B ». */ .ln-route { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; } .ln-route-ville { font-weight: 600; color: var(--ln-navy); background: #eef1f8; padding: .2rem .65rem; border-radius: 999px; font-size: .78rem; white-space: nowrap; } .ln-route-fleche { color: #b7bfcf; font-size: .8rem; } /* Petites puces icône + valeur (distance, durée, arrêts...) réutilisées dans les cellules d'un tableau pour éviter le texte brut. */ .ln-stat-chip { display: inline-flex; align-items: center; gap: .4rem; color: #4a5468; font-weight: 500; } .ln-stat-chip i { color: var(--ln-navy-light); }