/* ═══════════════════════════════════════════════════════════════════
   assets/syn-connexion.css — page de connexion (lot 14, maquette A « Quai »)

   Écran partagé : à gauche un panneau à la couleur de marque, logo animé
   et colis qui glissent sur des pistes ; à droite un formulaire aéré
   (champs en cartes, bouton en relief). Sur téléphone, le panneau devient
   un bandeau et le formulaire remonte en feuille arrondie.
   Tout est sous #loginOverlay.loginPage. Mouvements coupés par
   « Désactiver les animations » et prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════ */
#loginOverlay.loginPage{ padding:0; background:var(--surface, #fff) !important; -webkit-backdrop-filter:none; backdrop-filter:none; z-index:2000; align-items:stretch; justify-content:stretch; }
:root.loginOuvert, :root.loginOuvert body{ overflow:hidden; }
#loginOverlay .lpCadre{ flex:1; display:flex; min-height:100%; width:100%; font-family:var(--f); color:var(--tx); }

/* ── Panneau de marque ── */
#loginOverlay .lpCote{ position:relative; flex:0 0 min(46%, 560px); background:var(--syn); color:#fff; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; gap:32px; padding:48px 52px; box-sizing:border-box; }
#loginOverlay .lpCote > *{ position:relative; z-index:2; }
#loginOverlay .lpFlux{ position:absolute !important; inset:0; z-index:1 !important; pointer-events:none; }
#loginOverlay .lpPiste{ position:absolute; left:0; right:0; height:2px; background:repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 10px, transparent 10px 22px); animation:lpDefile 2.4s linear infinite; }
#loginOverlay .lpColis{ position:absolute; top:-6px; width:14px; height:14px; border-radius:4px; background:rgba(255,255,255,.24); animation:lpGlisse 7s cubic-bezier(.45,0,.25,1) infinite; }
@keyframes lpDefile{ to{ background-position:22px 0; } }
@keyframes lpGlisse{ 0%{ left:-20px; opacity:0; } 12%{ opacity:1; } 85%{ opacity:1; } 100%{ left:calc(100% + 20px); opacity:0; } }
#loginOverlay .lpMarque{ display:flex; align-items:center; gap:12px; }
#loginOverlay .lpNom{ font-size:26px; font-weight:800; letter-spacing:-.02em; }
#loginOverlay .lpLogo .q1{ animation:lpQ1 2.6s cubic-bezier(.3,1.4,.5,1) infinite; }
#loginOverlay .lpLogo .q2{ animation:lpQ2 2.6s cubic-bezier(.3,1.4,.5,1) infinite; }
#loginOverlay .lpLogo .q3{ animation:lpQ3 2.6s cubic-bezier(.3,1.4,.5,1) infinite; }
#loginOverlay .lpLogo .q4{ animation:lpQ4 2.6s cubic-bezier(.3,1.4,.5,1) infinite; }
#loginOverlay .lpLogo .h{ transform-origin:24px 24px; animation:lpHub 2.6s ease-in-out infinite; }
@keyframes lpQ1{ 0%,100%{ transform:translateX(-3px); } 45%{ transform:translateX(2px); } }
@keyframes lpQ2{ 0%,100%{ transform:translateX(3px); } 45%{ transform:translateX(-2px); } }
@keyframes lpQ3{ 0%,100%{ transform:translateY(-3px); } 45%{ transform:translateY(2px); } }
@keyframes lpQ4{ 0%,100%{ transform:translateY(3px); } 45%{ transform:translateY(-2px); } }
@keyframes lpHub{ 0%,100%{ transform:scale(1); } 45%{ transform:scale(1.14); } }
#loginOverlay .lpAccroche{ max-width:400px; }
#loginOverlay .lpAccrocheT{ font-size:40px; line-height:1.12; font-weight:800; letter-spacing:-.025em; }
#loginOverlay .lpAccrocheS{ margin-top:16px; font-size:15px; line-height:1.6; font-weight:600; color:#ddd6fe; }
#loginOverlay .lpPuces{ display:flex; flex-wrap:wrap; gap:8px; font:700 12px var(--m); }
#loginOverlay .lpPuces span{ padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.14); }

/* ── Formulaire ── */
#loginOverlay .lpMain{ position:relative; flex:1 1 auto; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:48px 40px 28px; box-sizing:border-box; overflow:auto; }
#loginOverlay .lpFermer{ position:absolute; top:18px; right:18px; width:42px; height:42px; border-radius:12px; border:1px solid var(--bd); background:var(--surface, #fff); color:var(--mu); display:grid; place-items:center; cursor:pointer; padding:0; }
#loginOverlay .lpFermer svg{ width:18px; height:18px; }
#loginOverlay .lpFermer:hover{ border-color:var(--syn); color:var(--syn); }
#loginOverlay .modal.lpForm{ width:100%; max-width:400px; margin:auto 0; padding:0; border:0; border-radius:0; background:none; box-shadow:none; animation:none; }
#loginOverlay .lpPied{ margin-top:28px; font-size:12.5px; font-weight:600; color:var(--mu); }
#loginOverlay .loginStep.active{ display:flex; flex-direction:column; gap:22px; }
:root:not(.anims-off) #loginOverlay .loginStep.active{ animation:lpEntre .45s var(--eS) both; }
@keyframes lpEntre{ from{ opacity:0; transform:translateX(22px); } to{ opacity:1; transform:none; } }
#loginOverlay form{ display:flex; flex-direction:column; gap:20px; margin:0; }
#loginOverlay .lpTete{ display:flex; flex-direction:column; gap:8px; }
#loginOverlay .lpH{ margin:0; font-size:30px; line-height:1.15; font-weight:800; letter-spacing:-.02em; color:var(--tx); }
#loginOverlay .lpLead{ margin:0; font-size:15px; line-height:1.55; font-weight:600; color:var(--mu); text-align:left; }
#loginOverlay .lpEtapes{ display:flex; gap:6px; }
#loginOverlay .lpEtapes i{ width:22px; height:4px; border-radius:999px; background:#e3e7ee; transition:background var(--tM), width var(--tM) var(--eS); }
#loginOverlay .lpEtapes i.on{ background:var(--syn); width:34px; }

/* Champs en cartes (choix E du site) */
#loginOverlay .lpChamp{ display:block; background:var(--surface, #fff); border:1.5px solid rgba(18,22,28,.12); border-radius:13px; padding:10px 14px 9px; cursor:text; transition:border-color var(--tC), box-shadow var(--tC); }
#loginOverlay .lpChamp:focus-within{ border-color:var(--syn); box-shadow:0 0 0 4px var(--synT); }
#loginOverlay .lpChampL{ display:block; font-size:10px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--mu); margin-bottom:3px; }
#loginOverlay .lpChampLigne{ display:flex; align-items:center; gap:6px; }
#loginOverlay .lpIn{ display:block; width:100%; height:28px; border:0; outline:0; background:transparent; padding:2px 0; font:600 16px var(--f); color:var(--tx); box-shadow:none; }
#loginOverlay .lpIn::placeholder{ color:#9aa5b5; font-weight:500; }
#loginOverlay .lpOeil{ flex:0 0 auto; width:40px; height:40px; margin:-8px -8px -8px 0; border:0; background:transparent; border-radius:10px; color:var(--mu); display:grid; place-items:center; cursor:pointer; padding:0; }
#loginOverlay .lpOeil svg{ width:20px; height:20px; }
#loginOverlay .lpOeil:hover{ background:var(--bg); color:var(--tx); }

/* Bouton en relief doux (choix 3 du site) */
#loginOverlay .lpBt{ width:100%; height:52px; border:0; border-radius:12px; background:linear-gradient(180deg, color-mix(in srgb, var(--syn) 88%, #fff), var(--syn)); color:#fff;
  font:800 15px var(--f); letter-spacing:.01em; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px;
  box-shadow:0 3px 0 var(--synD), 0 8px 22px color-mix(in srgb, var(--syn) 28%, transparent); transition:transform 90ms, box-shadow 90ms, filter var(--tC); }
#loginOverlay .lpBt svg{ width:18px; height:18px; }
#loginOverlay .lpBt:hover{ filter:brightness(1.06); }
#loginOverlay .lpBt:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--synD), 0 4px 12px color-mix(in srgb, var(--syn) 24%, transparent); }
#loginOverlay .lpBt:disabled{ opacity:.6; cursor:wait; }
#loginOverlay .lpLien{ background:none; border:0; padding:6px 2px; font:700 13.5px var(--f); color:var(--syn); cursor:pointer; border-radius:6px; }
#loginOverlay .lpLien:hover{ color:var(--synD); text-decoration:underline; }
#loginOverlay .lpRetour{ align-self:flex-start; }
#loginOverlay .lpRetourProfils{ align-self:center; margin-top:-6px; }
#loginOverlay .lpLigne{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }

/* « Rester connecté » : la case native reste (app2.js la lit), dessinée en interrupteur. */
#loginOverlay .lpRester{ display:inline-flex; align-items:center; gap:10px; margin:0; font-size:14px; font-weight:700; color:var(--tx); cursor:pointer; position:relative; }
#loginOverlay .lpRester input{ position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; }
#loginOverlay .lpSw{ position:relative; width:42px; height:24px; border-radius:999px; background:#d7dce4; flex:0 0 auto; transition:background .2s; }
#loginOverlay .lpSw i{ position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .22s cubic-bezier(.3,1.4,.5,1); }
#loginOverlay .lpRester input:checked + .lpSw{ background:var(--syn); }
#loginOverlay .lpRester input:checked + .lpSw i{ transform:translateX(18px); }
#loginOverlay .lpRester input:focus-visible + .lpSw{ outline:2px solid var(--syn); outline-offset:2px; }

/* Qui se connecte (mot de passe, code) */
#loginOverlay .lpQui{ display:flex; align-items:center; gap:14px; padding:12px 14px; border:1.5px solid rgba(18,22,28,.1); border-radius:14px; margin:0; text-align:left; }
#loginOverlay .lpAv{ --pc:var(--syn); width:44px; height:44px; flex:0 0 44px; border-radius:50%; background:color-mix(in srgb, var(--pc) 12%, #fff); color:var(--pc); display:grid; place-items:center; font:800 17px var(--f); }
:root:not(.anims-off) #loginOverlay .loginStep.active .lpAv{ animation:lpPop .5s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes lpPop{ from{ transform:scale(.4); opacity:0; } to{ transform:none; opacity:1; } }
#loginOverlay .lpQuiTx{ flex:1; min-width:0; display:flex; flex-direction:column; }
#loginOverlay .lpQuiL{ font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--mu); }
#loginOverlay #pinNom{ font:800 16px var(--f); }
#loginOverlay .lpQuiN{ font:700 15px var(--m); color:var(--tx); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin:0; }

/* Messages */
#loginOverlay .lpErr{ margin:0; border-radius:11px; padding:11px 13px; font-size:13.5px; font-weight:700; background:var(--redL, #fdeaea); color:#8f1414; text-align:left; }
#loginOverlay .lpErr.ok{ background:var(--okL, #e8f5ec); color:#14532d; }
:root:not(.anims-off) #loginOverlay .lpErr:not([style*="none"]){ animation:lpEntre .3s var(--eS) both; }

/* Profils du poste */
#loginOverlay .lpProfils{ display:flex; flex-direction:column; gap:8px; }
#loginOverlay .lpProfilL{ --pc:var(--syn); position:relative; display:flex; }
#loginOverlay .lpProfil{ flex:1; min-width:0; display:flex; align-items:center; gap:14px; padding:12px 54px 12px 12px; border:1.5px solid rgba(18,22,28,.1); border-radius:14px; background:var(--surface, #fff);
  cursor:pointer; text-align:left; font-family:var(--f); color:var(--tx); transition:border-color var(--tC), box-shadow var(--tC), transform var(--tC) var(--eS); }
#loginOverlay .lpProfil:hover, #loginOverlay .lpProfil:focus-visible{ border-color:var(--pc); box-shadow:0 0 0 4px color-mix(in srgb, var(--pc) 14%, transparent); outline:none; }
#loginOverlay .lpProfil:active{ transform:scale(.99); }
#loginOverlay .lpProfilAv{ width:48px; height:48px; flex:0 0 48px; border-radius:50%; background:var(--pc); color:#fff; display:grid; place-items:center; font:800 17px var(--f); }
#loginOverlay .lpProfilTx{ flex:1; min-width:0; display:flex; flex-direction:column; }
#loginOverlay .lpProfilTx b{ font-size:16px; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#loginOverlay .lpProfilTx small{ font:600 12.5px var(--m); color:var(--mu); }
#loginOverlay .lpProfilFl{ color:var(--mu); display:grid; place-items:center; }
#loginOverlay .lpProfilFl svg{ width:18px; height:18px; }
#loginOverlay .lpProfilX{ position:absolute; right:8px; top:50%; transform:translateY(-50%); width:32px; height:32px; border:0; border-radius:9px; background:none; color:var(--mu); font-size:18px; cursor:pointer; opacity:0; transition:opacity var(--tC), background var(--tC); }
#loginOverlay .lpProfilL:hover .lpProfilX, #loginOverlay .lpProfilX:focus-visible{ opacity:1; }
#loginOverlay .lpProfilL:hover .lpProfilFl{ visibility:hidden; }
#loginOverlay .lpProfilX:hover{ background:var(--redL, #fdeaea); color:var(--red); }
@media (hover:none){ #loginOverlay .lpProfilX{ opacity:1; } #loginOverlay .lpProfilFl{ display:none; } }
:root:not(.anims-off) #loginOverlay .loginStep.active .lpProfilL{ animation:lpEntre .45s var(--eS) both; }
:root:not(.anims-off) #loginOverlay .loginStep.active .lpProfilL:nth-child(2){ animation-delay:.05s; }
:root:not(.anims-off) #loginOverlay .loginStep.active .lpProfilL:nth-child(3){ animation-delay:.1s; }
:root:not(.anims-off) #loginOverlay .loginStep.active .lpProfilL:nth-child(n+4){ animation-delay:.15s; }
#loginOverlay .lpAutre{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:48px; border:1.5px dashed color-mix(in srgb, var(--syn) 35%, var(--bd)); border-radius:14px; }
#loginOverlay .lpAutre svg{ width:16px; height:16px; }
#loginOverlay .lpAutre:hover{ background:var(--synT); text-decoration:none; }

/* Code PIN */
#loginOverlay .lpPinForm{ gap:18px; align-items:center; }
#loginOverlay .lpPinIn{ position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; }
#loginOverlay .lpPinPoints{ display:flex; justify-content:center; gap:14px; min-height:20px; padding:6px 0; }
#loginOverlay .lpPinPoints i{ width:16px; height:16px; border-radius:50%; border:2px solid color-mix(in srgb, var(--tx) 25%, transparent); transition:background var(--tC), border-color var(--tC), transform var(--tC) cubic-bezier(.2,1.6,.4,1); }
#loginOverlay .lpPinPoints i.on{ background:var(--syn); border-color:var(--syn); transform:scale(1.12); }
#loginOverlay .lpPinForm:focus-within .lpPinPoints{ outline:2px dashed color-mix(in srgb, var(--syn) 40%, transparent); outline-offset:6px; border-radius:12px; }
#loginOverlay .lpSecoue{ animation:lpSecoue .42s; }
@keyframes lpSecoue{ 20%,60%{ transform:translateX(-8px); } 40%,80%{ transform:translateX(8px); } }
#loginOverlay .lpPave{ display:grid; grid-template-columns:repeat(3, 76px); gap:10px; justify-content:center; }
#loginOverlay .lpPave button{ height:60px; border-radius:16px; border:1.5px solid rgba(18,22,28,.1); background:var(--surface, #fff); color:var(--tx); font:700 22px var(--m); cursor:pointer;
  display:grid; place-items:center; padding:0; transition:background var(--tC), border-color var(--tC), transform 90ms; }
#loginOverlay .lpPave button:hover{ border-color:var(--syn); background:var(--synT); }
#loginOverlay .lpPave button:active{ transform:scale(.94); }
#loginOverlay .lpPave button:focus-visible{ outline:2px solid var(--syn); outline-offset:2px; }
#loginOverlay .lpPave .lpPaveOk{ background:var(--syn); border-color:var(--syn); color:#fff; }
#loginOverlay .lpPave .lpPaveOk svg{ width:22px; height:22px; }
#loginOverlay .lpPinForm.envoi .lpPinPoints i.on{ animation:lpRespire .8s ease-in-out infinite alternate; }
@keyframes lpRespire{ to{ opacity:.35; } }
#loginOverlay .lpAide{ margin:0; text-align:center; font-size:13.5px; color:var(--mu); font-weight:600; }
#loginOverlay .lpAide .lpLien{ padding:0; }

/* ── Téléphone : bandeau en haut, feuille de formulaire ── */
@media (max-width:860px){
  #loginOverlay .lpCadre{ flex-direction:column; }
  #loginOverlay .lpCote{ flex:0 0 auto; min-height:190px; padding:26px 24px 46px; gap:14px; justify-content:flex-start; }
  #loginOverlay .lpAccrocheS, #loginOverlay .lpPuces{ display:none; }
  #loginOverlay .lpAccrocheT{ font-size:24px; }
  #loginOverlay .lpMain{ flex:1 0 auto; margin-top:-22px; border-radius:22px 22px 0 0; background:var(--surface, #fff); z-index:3; justify-content:flex-start; padding:30px 22px calc(22px + env(safe-area-inset-bottom)); overflow:visible; }
  #loginOverlay .lpFermer{ position:fixed; top:14px; right:14px; background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.3); color:#fff; z-index:5; }
  #loginOverlay .modal.lpForm{ margin:0; }
  #loginOverlay .lpH{ font-size:26px; }
  #loginOverlay .lpPave{ grid-template-columns:repeat(3, minmax(0, 88px)); }
  #loginOverlay .lpPied{ margin-top:auto; padding-top:24px; }
  #loginOverlay.loginPage{ overflow:auto; }
}
:root.anims-off #loginOverlay *{ animation:none !important; transition:none !important; }
@media (prefers-reduced-motion:reduce){ #loginOverlay *{ animation:none !important; transition:none !important; } }

/* ── Profil › Sécurité › Connexion rapide ── */
.pinSection .pinEtat{ display:flex; align-items:center; gap:8px; margin:10px 0 4px; font-size:13.5px; font-weight:700; color:var(--mu); }
.pinSection .pinEtatPt{ width:9px; height:9px; border-radius:50%; background:color-mix(in srgb, var(--tx) 25%, transparent); }
.pinSection .pinEtat.on{ color:var(--ok); }
.pinSection .pinEtat.on .pinEtatPt{ background:var(--ok); box-shadow:0 0 0 4px color-mix(in srgb, var(--ok) 15%, transparent); }
.pinSection .pinReglage{ margin-top:10px; }
.pinSection .pinChiffres{ font-family:var(--m); letter-spacing:.3em; }
.pinSection #pinMsg.err{ color:var(--red); font-weight:700; }