/*
 * LuxApps Pointage : styles propres à la section /time-tracking-software-luxembourg/.
 * Fichier distinct de site.css (servi en cache 24 h sans version) : lié avec ?v=AAAAMMJJ depuis les pages.
 */

/* ---- Hero ------------------------------------------------------------------------------------ */
.pt-hero .lead { max-width: 60ch; }
.pt-hero .hero__ctas { margin-top: 8px; }
.pt-hero__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; position: relative; z-index: 1; }
.pt-hero--split .page-hero__inner { max-width: none; }
@media (max-width: 980px) { .pt-hero__grid { grid-template-columns: 1fr; } }

.pt-daycard { background: #FFFFFF; border-radius: 16px; padding: 20px; box-shadow: 0 30px 60px rgba(10, 8, 40, 0.35); display: flex; flex-direction: column; gap: 10px; color: var(--ink-700); font-size: 14px; }
.pt-daycard__head { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--border-default); }
.pt-daycard__head strong { color: var(--lux-navy); flex: 1; }
.pt-daycard__head span:last-child { color: var(--ink-500); font-size: 12px; }
.pt-daycard__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--lux-teal); box-shadow: 0 0 0 4px var(--lux-teal-100); }
.pt-daycard__row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; background: var(--ink-050); line-height: 1.4; }
.pt-daycard__row--warn { background: #FFF6E8; color: #7A4A12; }
.pt-daycard__row--ok { background: var(--lux-teal-050); color: var(--lux-teal-700); font-weight: 600; }
.pt-tag { flex: none; font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--lux-navy); background: #FFFFFF; border: 1px solid var(--border-default); border-radius: 6px; padding: 3px 7px; min-width: 50px; text-align: center; }
.pt-tag--warn { color: #C97A1F; border-color: #E9C48F; }
.pt-tag--ok { color: var(--success); border-color: var(--lux-teal-200); }
.pt-daycard__bars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding-top: 6px; }
.pt-daycard__bars div { background: var(--lux-navy-050); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 2px; }
.pt-daycard__bars span { font-size: 11px; color: var(--ink-500); text-transform: uppercase; letter-spacing: .06em; }
.pt-daycard__bars strong { color: var(--lux-navy); font-size: 16px; }
.pt-anim { opacity: 0; transform: translateY(8px); animation: pt-in 500ms var(--easing, ease-out) forwards; }
.pt-anim--1 { animation-delay: 300ms; }
.pt-anim--2 { animation-delay: 900ms; }
.pt-anim--3 { animation-delay: 1500ms; }
.pt-anim--4 { animation-delay: 2300ms; }
.pt-anim--5 { animation-delay: 3600ms; }
.pt-anim--6 { animation-delay: 4200ms; }
@keyframes pt-in { to { opacity: 1; transform: none; } }

/* ---- Sous-navigation de la section ---------------------------------------------------------- */
.pt-subnav { position: sticky; top: 0; z-index: 40; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border-default); }
.pt-subnav__inner { display: flex; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none; padding-top: 10px; padding-bottom: 10px; }
.pt-subnav__inner::-webkit-scrollbar { display: none; }
.pt-subnav__brand { flex: none; font-weight: 700; color: var(--lux-navy); margin-right: 12px; font-size: 14px; }
.pt-subnav a { flex: none; padding: 7px 12px; border-radius: 999px; color: var(--ink-600); font-size: 14px; text-decoration: none; white-space: nowrap; }
.pt-subnav a:hover { background: var(--ink-050); color: var(--lux-navy); }
.pt-subnav a.is-current { background: var(--lux-navy); color: #FFFFFF; }

/* ---- Typographie et blocs ------------------------------------------------------------------- */
.pt-section .pt-head { margin-bottom: 36px; }
.pt-section .pt-head .lead { max-width: 68ch; }
.pt-h3 { margin: 40px 0 14px; font-size: 20px; color: var(--lux-navy); font-weight: 600; }
.pt-p { max-width: 75ch; color: var(--ink-600); line-height: 1.65; margin: 0 0 16px; }
.pt-note { max-width: 80ch; color: var(--ink-500); font-size: var(--fs-small); line-height: 1.6; margin: 16px 0 0; }

.pt-cards { display: grid; gap: 16px; }
.pt-cards--2 { grid-template-columns: repeat(2, 1fr); }
.pt-cards--3 { grid-template-columns: repeat(3, 1fr); }
.pt-cards--4 { grid-template-columns: repeat(4, 1fr); }
.pt-card { background: #FFFFFF; border: 1px solid var(--border-default); border-radius: var(--r-md); padding: 24px; display: flex; flex-direction: column; gap: 10px; transition: transform 220ms var(--easing), box-shadow 220ms var(--easing), border-color 220ms var(--easing); }
.pt-card:hover { transform: translateY(-2px); border-color: var(--lux-teal-200); box-shadow: var(--shadow-md); }
.pt-card h3 { margin: 0; font-size: 17px; line-height: 1.3; color: var(--lux-navy); font-weight: 600; }
.pt-card p { margin: 0; color: var(--ink-600); font-size: var(--fs-small); line-height: 1.6; }
.pt-card--sol { border-top: 3px solid var(--lux-teal); }
.pt-chip { align-self: flex-start; font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--lux-teal-700); background: var(--lux-teal-050); border-radius: var(--r-sm); padding: 5px 10px; }
@media (max-width: 980px) { .pt-cards--3, .pt-cards--4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .pt-cards--2, .pt-cards--3, .pt-cards--4 { grid-template-columns: 1fr; } }

.pt-two { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
@media (max-width: 900px) { .pt-two { grid-template-columns: 1fr; } }

.pt-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.pt-checks li { position: relative; padding-left: 30px; color: var(--ink-600); line-height: 1.6; }
.pt-checks li::before { content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--lux-teal-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F8A98' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 11px no-repeat; }
.pt-checks strong, .pt-steps strong { color: var(--lux-navy); }

.pt-steps { list-style: none; counter-reset: pt; margin: 0; padding: 0; display: grid; gap: 12px; }
.pt-steps li { counter-increment: pt; position: relative; padding: 16px 18px 16px 62px; background: #FFFFFF; border: 1px solid var(--border-default); border-radius: var(--r-md); color: var(--ink-600); line-height: 1.6; }
.pt-steps li::before { content: counter(pt); position: absolute; left: 16px; top: 14px; width: 32px; height: 32px; border-radius: 50%; background: var(--lux-navy); color: #FFFFFF; font-weight: 700; display: grid; place-items: center; font-size: 14px; }

.pt-callout { border-left: 4px solid var(--lux-teal); background: var(--lux-teal-050); border-radius: 0 var(--r-md) var(--r-md) 0; padding: 16px 20px; margin: 24px 0; }
.pt-callout p { margin: 0; color: var(--ink-700); line-height: 1.6; }
.pt-callout--warn { border-left-color: var(--warning); background: #FFF6E8; }
.pt-callout--navy { border-left-color: var(--lux-navy); background: var(--lux-navy-050); }

.pt-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pt-stat { background: #FFFFFF; border: 1px solid var(--border-default); border-radius: var(--r-md); padding: 22px; display: flex; flex-direction: column; gap: 6px; }
.pt-stat strong { font-size: 40px; line-height: 1; color: var(--lux-navy); font-weight: 700; letter-spacing: -0.02em; }
.pt-stat > span { color: var(--ink-600); font-size: var(--fs-small); line-height: 1.5; }
@media (max-width: 900px) { .pt-stats { grid-template-columns: 1fr 1fr; } }

/* ---- Tableaux ------------------------------------------------------------------------------- */
.pt-table-wrap { overflow-x: auto; border: 1px solid var(--border-default); border-radius: var(--r-md); background: #FFFFFF; margin: 0 0 8px; }
.pt-table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); line-height: 1.55; min-width: 640px; }
.pt-table caption { caption-side: top; text-align: left; padding: 14px 16px 0; color: var(--ink-500); font-size: 13px; }
.pt-table th { text-align: left; padding: 12px 16px; background: var(--lux-navy-050); color: var(--lux-navy); font-weight: 600; white-space: nowrap; }
.pt-table td { padding: 12px 16px; border-top: 1px solid var(--border-default); color: var(--ink-600); vertical-align: top; }
.pt-table tbody tr:hover td { background: var(--ink-025); }
.pt-table td.pt-ref { font-family: var(--font-mono); font-size: 12.5px; color: var(--lux-teal-700); white-space: nowrap; }
.pt-table a { color: var(--lux-teal-700); }
.pt-table--compact td, .pt-table--compact th { padding: 9px 14px; }

/* ---- Schémas -------------------------------------------------------------------------------- */
.pt-figure { margin: 8px 0 24px; background: #FFFFFF; border: 1px solid var(--border-default); border-radius: var(--r-md); padding: 20px; }
.pt-figure__scroll { overflow-x: auto; }
.pt-svg { display: block; width: 100%; height: auto; }
.pt-figure figcaption { margin-top: 12px; color: var(--ink-500); font-size: 13px; line-height: 1.55; }
.pt-flow { stroke-dasharray: 6 5; animation: pt-flow 1.4s linear infinite; }
@keyframes pt-flow { to { stroke-dashoffset: -22; } }
.pt-node rect, .pt-node polygon { transition: fill 300ms, stroke 300ms; }
.pt-node.is-on rect, .pt-node.is-on polygon { fill: #232066; stroke: #232066; }
.pt-node.is-on text { fill: #FFFFFF !important; }
.pt-node.is-done rect, .pt-node.is-done polygon { fill: #DEF3F6; stroke: #2EB8C9; }
.pt-node.is-done text { fill: #1B194D !important; }

.pt-play__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.pt-play__bar span { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-500); margin-right: 4px; }
.pt-play__bar button, .pt-sim__presets button { border: 1px solid var(--border-strong); background: #FFFFFF; color: var(--lux-navy); border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.pt-play__bar button:hover, .pt-sim__presets button:hover { border-color: var(--lux-teal); }
.pt-play__bar button.is-active { background: var(--lux-navy); border-color: var(--lux-navy); color: #FFFFFF; }
.pt-play__note { min-height: 1.6em; margin: 12px 0 0; color: var(--lux-navy); font-weight: 600; }

/* ---- Onglets -------------------------------------------------------------------------------- */
.pt-tabs__list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.pt-tabs__list button { border: 1px solid var(--border-default); background: #FFFFFF; color: var(--ink-600); border-radius: 999px; padding: 8px 16px; font: inherit; font-size: 14px; cursor: pointer; }
.pt-tabs__list button[aria-selected="true"] { background: var(--lux-teal); border-color: var(--lux-teal); color: #FFFFFF; font-weight: 600; }
.pt-tabs__panel { animation: pt-in 300ms ease-out; }

/* ---- Simulateur ----------------------------------------------------------------------------- */
.pt-sim { display: grid; grid-template-columns: 320px 1fr; gap: 24px; background: #FFFFFF; border: 1px solid var(--border-default); border-radius: 16px; padding: 24px; box-shadow: var(--shadow-md); }
.pt-sim__form fieldset { border: 0; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pt-sim__form legend { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-500); margin-bottom: 8px; font-weight: 600; }
.pt-sim__field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--ink-600); }
.pt-sim__field input { font: inherit; font-family: var(--font-mono); font-size: 15px; padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); color: var(--lux-navy); }
.pt-sim__field input:focus { outline: none; border-color: var(--lux-teal); box-shadow: 0 0 0 3px var(--lux-teal-100); }
.pt-sim__presets { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pt-sim__presets span { font-size: 12px; color: var(--ink-500); width: 100%; }
.pt-sim__timeline { position: relative; padding-bottom: 24px; }
.pt-sim__row { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 10px; margin-bottom: 8px; }
.pt-sim__label { font-size: 12px; color: var(--ink-500); }
.pt-sim__track { position: relative; height: 28px; background: var(--ink-050); border-radius: 6px; }
.pt-sim__bar { position: absolute; top: 3px; bottom: 3px; border-radius: 5px; font-size: 11px; font-family: var(--font-mono); display: flex; align-items: center; justify-content: center; overflow: hidden; white-space: nowrap; transition: left 300ms, width 300ms; }
.pt-sim__bar.is-plan { background: transparent; border: 1.5px dashed var(--ink-300); color: var(--ink-500); }
.pt-sim__bar.is-work { background: var(--lux-teal); color: #FFFFFF; }
.pt-sim__bar.is-night { background: #F3D9C4; color: #7A4A12; }
.pt-sim__bar.is-ot { background: var(--lux-navy); color: #FFFFFF; }
.pt-sim__scale { position: relative; height: 16px; margin-left: 120px; }
.pt-sim__scale span { position: absolute; transform: translateX(-50%); font-size: 11px; color: var(--ink-400); font-family: var(--font-mono); }
.pt-sim__outs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 8px; }
.pt-sim__out { background: var(--lux-navy-050); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.pt-sim__out span { font-size: 12px; color: var(--ink-500); line-height: 1.4; }
.pt-sim__out strong { font-size: 20px; color: var(--lux-navy); font-family: var(--font-mono); }
.pt-sim__alerts { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pt-sim__alerts li { padding: 9px 12px; border-radius: 8px; font-size: 13px; line-height: 1.5; }
.pt-sim__alerts li.is-info { background: var(--ink-050); color: var(--ink-600); }
.pt-sim__alerts li.is-warn { background: #FFF6E8; color: #7A4A12; }
.pt-sim__alerts li.is-ok { background: var(--lux-teal-050); color: var(--lux-teal-700); font-weight: 600; }
@media (max-width: 980px) { .pt-sim { grid-template-columns: 1fr; } .pt-sim__outs { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .pt-sim { padding: 16px; } .pt-sim__row { grid-template-columns: 70px 1fr; } .pt-sim__scale { margin-left: 80px; } }

/* ---- Exploration, pager, sources, CTA ------------------------------------------------------- */
.pt-explore { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pt-explore__card { display: flex; flex-direction: column; gap: 8px; padding: 24px; background: #FFFFFF; border: 1px solid var(--border-default); border-radius: var(--r-md); text-decoration: none; transition: transform 220ms var(--easing), box-shadow 220ms var(--easing), border-color 220ms var(--easing); }
.pt-explore__card:hover { transform: translateY(-3px); border-color: var(--lux-teal-200); box-shadow: var(--shadow-md); }
.pt-explore__card strong { color: var(--lux-navy); font-size: 18px; line-height: 1.3; }
.pt-explore__card > span:not(.pt-chip) { color: var(--ink-600); font-size: var(--fs-small); line-height: 1.55; flex: 1; }
.pt-explore__card em { font-style: normal; color: var(--lux-teal-700); font-weight: 600; font-size: 14px; }
@media (max-width: 980px) { .pt-explore { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .pt-explore { grid-template-columns: 1fr; } }

.pt-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 8px; }
.pt-pager a { display: flex; flex-direction: column; gap: 4px; padding: 18px 22px; border: 1px solid var(--border-default); border-radius: var(--r-md); text-decoration: none; background: #FFFFFF; }
.pt-pager a:hover { border-color: var(--lux-teal); }
.pt-pager span { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-500); }
.pt-pager strong { color: var(--lux-navy); }
.pt-pager__next { text-align: right; grid-column: 2; }

.pt-sources { border-top: 1px solid var(--border-default); margin-top: 32px; padding-top: 18px; }
.pt-sources p { margin: 0 0 8px; color: var(--ink-500); font-size: 13px; line-height: 1.7; }
.pt-sources strong { color: var(--ink-700); }
.pt-sources a { color: var(--lux-teal-700); }

.pt-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.pt-cta__inner .lead { text-align: left; max-width: 60ch; }
@media (max-width: 860px) { .pt-cta__inner { flex-direction: column; align-items: flex-start; } }

@media (prefers-reduced-motion: reduce) {
  .pt-anim { animation: none; opacity: 1; transform: none; }
  .pt-flow { animation: none; }
  .pt-tabs__panel { animation: none; }
}