/* Page de connexion (refonte, etape 2). Couleurs = variables du theme
 * (clair / sombre) ; seules les couleurs de la marque sont fixes. */
.cx{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);min-height:100vh;margin:-6px -12px}
.cx-vitrine{background:var(--surface-2);padding:34px 40px 28px;display:flex;flex-direction:column;min-width:0}
.cx-marque{display:flex;align-items:center;gap:10px;font-size:20px;letter-spacing:-0.3px}
.cx-marque img{display:block;border-radius:8px;box-shadow:0 0 0 1px rgba(255,255,255,.14)}
.cx-mot b{font-weight:600;color:var(--nav-text)}
.cx-mot span{color:var(--info)}
.cx-trait{height:4px;width:0;border-radius:2px;background:#F7931E;margin:34px 0 14px;animation:cx-trait .6s ease 1.5s forwards}
.cx-titre{font-size:30px;line-height:1.28;font-weight:600;letter-spacing:-0.6px;color:var(--text);margin:0 0 10px;max-width:460px}
.cx-titre-court{display:none}
.cx-bleu{color:var(--info)}
.cx-m{display:inline-block;opacity:0;animation:cx-monte .55s ease forwards}
.cx-reseau{display:block;width:100%;max-width:520px;height:auto;margin:auto 0 0;flex:1;min-height:180px;max-height:340px}
.cx-liens path{stroke:rgba(47,164,231,.32);stroke-width:1.5}
.cx-noeuds circle{fill:#2FA4E7}
.cx-pouls circle{fill:none;stroke:#2FA4E7;stroke-width:1.2}
.cx-onde{fill:none;stroke:#2FA4E7;stroke-width:1.5;opacity:0}
.cx-paquet{fill:var(--accent)}
.cx-paquet-soleil{fill:#F7931E}
.cx-hub{stroke:rgba(255,255,255,.16);stroke-width:2}
.cx-zone-form{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:34px 28px 20px;background:var(--surface);min-width:0}
.cx-form{width:100%;max-width:360px;opacity:0;animation:cx-monte .6s ease .15s forwards}
.cx-h{font-size:24px;font-weight:600;color:var(--text);margin:0 0 4px;letter-spacing:-0.3px}
.cx-sous{font-size:14px;color:var(--muted);margin:0 0 22px}
.cx-alerte{display:flex;align-items:flex-start;gap:8px;background:rgba(220,38,38,.09);border:1px solid rgba(220,38,38,.28);color:var(--danger);border-radius:10px;padding:10px 12px;font-size:13.5px;margin:0 0 16px;line-height:1.4}
.cx-alerte .ico{margin-top:1px}
.cx-champ{position:relative;margin-bottom:16px}
.cx-champ input{width:100%;box-sizing:border-box;height:52px;margin:0;padding:20px 46px 6px 14px;border:1px solid var(--border);border-radius:11px;background:var(--field);color:var(--text);font-size:16px;outline:none;transition:border-color .2s,box-shadow .2s}
.cx-champ input:focus{border-color:#2FA4E7;box-shadow:0 0 0 3px rgba(47,164,231,.2)}
.cx-champ label{position:absolute;left:15px;top:16px;font-size:15px;color:var(--muted);pointer-events:none;transition:all .18s ease}
.cx-champ input:focus+label,.cx-champ input:not(:placeholder-shown)+label{top:7px;font-size:11.5px;color:var(--info)}
.cx-champ.cx-mauvais input{border-color:var(--danger);box-shadow:0 0 0 3px rgba(220,38,38,.14)}
.cx-err{font-size:12.5px;color:var(--danger);margin-top:5px}
.cx-err:empty{display:none}
.cx-maj{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--warning);margin-top:5px}
.cx-maj[hidden]{display:none}
.cx-oeil{position:absolute;right:6px;top:8px;width:36px;height:36px;border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.cx-oeil:hover{background:var(--surface-2);color:var(--text)}
.cx-oeil .ico{width:20px;height:20px}
.cx-btn{width:100%;height:50px;margin-top:6px;border:0;border-radius:11px;background:var(--accent);color:#fff;font-size:15.5px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;transition:background .25s,transform .1s,filter .2s}
.cx-btn:hover{filter:brightness(1.12)}
.cx-btn:active{transform:scale(.98)}
.cx-btn[aria-busy="true"]{cursor:progress;filter:none}
.cx-rond{width:16px;height:16px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:cx-tourne .7s linear infinite}
.cx-note{display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;color:var(--muted);margin:14px 0 0}
.cx-pied{font-size:12px;color:var(--muted);margin:28px 0 0;text-align:center}
.cx-tremble{animation:cx-monte .6s ease .15s forwards,cx-tremble .45s ease .75s}
.cx-tremble-seul{animation:cx-tremble .45s ease;opacity:1}
@keyframes cx-monte{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes cx-trait{to{width:36px}}
@keyframes cx-tourne{to{transform:rotate(360deg)}}
@keyframes cx-tremble{0%,100%{transform:none}20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}
/* Telephone : la vitrine devient un bandeau en haut, le formulaire passe devant. */
@media (max-width:760px){
  .cx{grid-template-columns:1fr;grid-template-rows:auto 1fr;min-height:100vh}
  .cx-vitrine{padding:18px 18px 16px;align-items:center;text-align:center}
  .cx-marque{order:2;font-size:20px;margin-top:2px}
  .cx-marque img{display:none}
  .cx-reseau{order:1;max-width:320px;min-height:0;max-height:none;height:140px;flex:none;margin:0 auto}
  .cx-trait{order:3;margin:10px auto 8px}
  .cx-titre{display:none}
  .cx-titre-court{display:block;order:4;font-size:14px;color:var(--muted);margin:0}
  .cx-zone-form{justify-content:flex-start;padding:24px 18px 18px}
  .cx-h{font-size:21px}
  .cx-sous{margin-bottom:18px}
  .cx-pied{margin-top:22px}
}
/* Le telephone demande moins d'animations : tout s'affiche directement. */
@media (prefers-reduced-motion:reduce){
  .cx-m,.cx-form{opacity:1;animation:none}
  .cx-trait{width:36px;animation:none}
  .cx-tremble,.cx-tremble-seul{animation:none;opacity:1}
}