/* ============================================================================
 * product-tour.css — La démo animée de la page d'accueil (G1, Mathis 27.10.2026)
 * ----------------------------------------------------------------------------
 * Une fenêtre de GoLynk Gestion qui passe seule d'une page à l'autre, comme une
 * vidéo, sans rien de cliquable. Tout le code vit ici et dans product-tour.js :
 * index.html n'en porte que la section vide (#product-tour), pour que la page
 * d'accueil puisse être refaite sans toucher à la démo.
 * L'écran est dessiné à 1080 × 640 px puis réduit à la largeur disponible
 * (transform: scale, calculé en JS) : il reste identique sur un téléphone.
 * ========================================================================== */
.pt-sec{position:relative;background:#fff;padding:24px 0 72px}
.pt-tete{max-width:680px;margin:0 auto 28px;text-align:center}
.pt-tete h2{margin:0 0 10px;font-size:clamp(26px,3.4vw,38px);line-height:1.15;letter-spacing:-.02em;color:var(--ink,#0a2540);text-wrap:balance}
.pt-tete p{margin:0;font-size:17px;line-height:1.55;color:var(--ink-soft,#425466)}

.pt-cadre{position:relative;width:100%;max-width:1080px;margin:0 auto;aspect-ratio:1080/640;  /* la hauteur exacte est posée par le JS */
  border-radius:16px;overflow:hidden;
  border:1px solid var(--border,#dbe4ef);background:#fff;box-shadow:0 40px 80px -40px rgba(10,37,64,.4)}
.pt-ecran{position:absolute;left:0;top:0;width:1080px;height:640px;transform-origin:0 0;display:flex;
  font-family:Inter,"Helvetica Neue",Arial,sans-serif;font-size:14px;color:#14121F;background:#fff;
  -webkit-user-select:none;user-select:none;pointer-events:none}

/* Menu de gauche, comme Gestion v2 */
.pt-nav{width:200px;flex:none;box-sizing:border-box;padding:18px 12px;border-right:1px solid #E4ECEA;display:flex;flex-direction:column;gap:3px}
.pt-moi{display:flex;align-items:center;gap:10px;padding:2px 8px 14px}
.pt-av{width:30px;height:30px;border-radius:50%;background:#EAF0FD;color:#2D56D8;font-weight:700;font-size:11.5px;display:flex;align-items:center;justify-content:center;flex:none}
.pt-moi b{display:block;font-size:13px}
.pt-moi small{display:block;font-size:11.5px;color:#5E6577}
.pt-creer{height:34px;margin-bottom:10px;border-radius:10px;background:#2D56D8;color:#fff;font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center}
.pt-lien{height:34px;padding:0 10px;border-radius:10px;display:flex;align-items:center;gap:10px;font-size:13.5px;color:#3F4552;transition:background .35s,color .35s}
.pt-lien svg{width:16px;height:16px;flex:none;color:#5E6577}
.pt-lien.on{background:#EAF0FD;color:#14121F;font-weight:600}

/* Zone de droite */
.pt-main{position:relative;flex:1;min-width:0;overflow:hidden}
.pt-barre{height:52px;box-sizing:border-box;padding:0 26px;border-bottom:1px solid #F0F4F3;display:flex;align-items:center;justify-content:space-between}
.pt-cherche{width:240px;height:32px;border-radius:9px;background:#F4FAF9;border:1px solid #E4ECEA;display:flex;align-items:center;padding:0 10px;font-size:12.5px;color:#9AA3AF}
.pt-cloche{width:32px;height:32px;border-radius:9px;border:1px solid #E4ECEA}
.pt-scene{position:absolute;left:0;right:0;top:52px;bottom:0;padding:24px 28px;box-sizing:border-box;display:flex;flex-direction:column;gap:16px;
  opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .45s ease}
.pt-scene.on{opacity:1;transform:none}
.pt-h{margin:0;font-size:24px;font-weight:600;letter-spacing:-.01em}
.pt-ligne-tete{display:flex;justify-content:space-between;align-items:center}
.pt-bouton{height:34px;padding:0 14px;border-radius:9px;background:#2D56D8;color:#fff;font-size:13px;font-weight:600;display:flex;align-items:center;transition:transform .15s,filter .15s}
.pt-bouton.presse{transform:scale(.94);filter:brightness(.9)}

/* Accueil */
.pt-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.pt-kpi{padding:14px 16px;border:1px solid #E4ECEA;border-radius:13px;display:flex;flex-direction:column;gap:5px}
.pt-kpi span{font-size:12px;color:#5E6577}
.pt-kpi b{font-size:21px;font-variant-numeric:tabular-nums}
.pt-kpi small{font-size:12px}
.pt-liste{display:flex;flex-direction:column;border:1px solid #E4ECEA;border-radius:13px;overflow:hidden}
.pt-rang{display:grid;gap:10px;padding:11px 16px;border-top:1px solid #F0F4F3;align-items:center;font-variant-numeric:tabular-nums;font-size:13.5px}
.pt-rang:first-child{border-top:0}
.pt-rang.ent{font-size:12px;color:#5E6577}
.pt-ap{opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s,background .8s}
.pt-ap.vu{opacity:1;transform:none}
.pt-neuf{background:#EAF0FD}
.pt-pill{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:999px;font-size:11.5px;font-weight:600;white-space:nowrap}
.pt-pill.ok{background:#ECF8F0;color:#166534}
.pt-pill.att{background:#FFF4EC;color:#9A4A14}
.pt-pill.bleu{background:#EAF0FD;color:#2D56D8}
.pt-doux{color:#5E6577}
.pt-r{text-align:right;white-space:nowrap}
.pt-retard{color:#9A4A14}
.pt-vert{color:#166534}

/* Panneau à droite (nouvelle facture) */
.pt-voile{position:absolute;inset:52px 0 0 0;background:rgba(20,18,31,.22);opacity:0;transition:opacity .35s}
.pt-voile.on{opacity:1}
.pt-panneau{position:absolute;top:52px;right:0;bottom:0;width:430px;box-sizing:border-box;background:#fff;border-left:1px solid #E4ECEA;
  padding:20px 22px;display:flex;flex-direction:column;gap:14px;transform:translateX(105%);transition:transform .45s cubic-bezier(.2,.8,.2,1);box-shadow:-20px 0 40px -24px rgba(0,0,0,.35)}
.pt-panneau.on{transform:none}
.pt-panneau h3{margin:0;font-size:19px;font-weight:600}
.pt-carte{display:flex;align-items:center;gap:11px;padding:10px 12px;border:1px solid #E4ECEA;border-radius:11px}
.pt-carte b{display:block;font-size:13.5px}
.pt-carte small{display:block;font-size:12px;color:#5E6577}
.pt-totaux{display:flex;flex-direction:column;gap:5px;padding-top:10px;border-top:1px solid #F0F4F3;font-variant-numeric:tabular-nums}
.pt-totaux div{display:flex;justify-content:space-between}
.pt-totaux .du{font-size:17px;font-weight:700}
.pt-pied{margin-top:auto;display:flex;justify-content:flex-end;gap:8px}
.pt-secondaire{height:34px;padding:0 14px;border-radius:9px;border:1px solid #C9D6D3;display:flex;align-items:center;font-size:13px}

/* Clients */
.pt-deux{display:grid;grid-template-columns:240px minmax(0,1fr);gap:18px}
.pt-cli{padding:11px 14px;border-top:1px solid #F0F4F3;transition:background .35s}
.pt-cli:first-child{border-top:0}
.pt-cli.on{background:#EAF0FD;font-weight:600}
.pt-fiche{display:flex;flex-direction:column;gap:12px;transition:opacity .3s}
.pt-fiche.change{opacity:0}
.pt-fiche b.nom{font-size:18px}
.pt-chiffres{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}

/* Calendrier */
.pt-semaine{flex:1;display:grid;grid-template-columns:44px repeat(5,minmax(0,1fr));border:1px solid #E4ECEA;border-radius:13px;overflow:hidden;position:relative}
.pt-jour{border-left:1px solid #F0F4F3;position:relative}
.pt-jour-t{height:34px;display:flex;align-items:center;justify-content:center;font-size:12px;color:#5E6577;border-bottom:1px solid #F0F4F3}
.pt-heures{display:flex;flex-direction:column;padding-top:34px}
.pt-heures span{height:44px;font-size:11px;color:#9AA3AF;text-align:right;padding-right:6px;box-sizing:border-box}
.pt-rdv{position:absolute;left:5px;right:5px;border-radius:8px;padding:6px 8px;font-size:11.5px;line-height:1.3;background:#EAF0FD;color:#14121F;border:1px solid #CFDCFA;
  opacity:0;transform:scale(.96);transition:opacity .35s,transform .35s}
.pt-rdv.vu{opacity:1;transform:none}
.pt-rdv b{display:block;font-size:12px}
.pt-rdv.res{background:#ECF8F0;border-color:#BFE6CC}

/* Curseur */
.pt-curseur{position:absolute;left:0;top:0;width:22px;height:22px;z-index:5;transition:transform .9s cubic-bezier(.45,.05,.3,1),opacity .3s;opacity:0}
.pt-curseur.on{opacity:1}
.pt-curseur svg{width:22px;height:22px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.3))}
.pt-clic{position:absolute;left:-9px;top:-9px;width:22px;height:22px;border-radius:50%;border:2px solid #2D56D8;opacity:0}
.pt-curseur.clic .pt-clic{animation:pt-onde .5s ease-out}
@keyframes pt-onde{0%{opacity:.8;transform:scale(.4)}100%{opacity:0;transform:scale(1.8)}}

/* Écran étroit (téléphone) : sans menu de gauche, dessiné sur 560 px (voir echelle() dans le JS). */
.pt-ecran.etroit .pt-nav{display:none}
.pt-ecran.etroit .pt-cherche{width:180px}
.pt-ecran.etroit .pt-panneau{width:100%}
.pt-ecran.etroit .pt-deux{grid-template-columns:170px minmax(0,1fr)}
.pt-ecran.etroit .pt-kpi b{font-size:17px}

/* Légende et progression, sous la fenêtre */
.pt-legende{max-width:1080px;margin:18px auto 0;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.pt-legende b{font-size:17px;color:var(--ink,#0a2540)}
.pt-legende p{margin:4px 0 0;font-size:15px;line-height:1.5;color:var(--ink-soft,#425466);min-height:3em}
.pt-pas{display:flex;gap:8px;width:min(420px,100%)}
.pt-pas span{flex:1;height:4px;border-radius:4px;background:#e4eaf1;overflow:hidden}
.pt-pas i{display:block;height:100%;width:0;background:var(--ink,#0a2540)}
.pt-pas span.fait i{width:100%}
.pt-pas span.cours i{animation:pt-barre linear forwards}
@keyframes pt-barre{to{width:100%}}
.pt-cache{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (max-width:640px){
  .pt-sec{padding:8px 0 48px}
  .pt-cadre{border-radius:10px}
  .pt-legende p{font-size:14px}
}
/* Mouvement réduit : pas de curseur ni de glissements, les pages changent quand même, sans effet. */
@media (prefers-reduced-motion:reduce){
  .pt-scene,.pt-ap,.pt-rdv,.pt-panneau,.pt-voile,.pt-fiche,.pt-lien{transition:none}
  .pt-curseur{display:none}
}