/* ============================================================
   OpsFacturePro 1.4.8 — Page de connexion, calquée sur le haut de la
   page de présentation : fond ardoise, pastille de thème, grand
   titre, puis l'anneau lumineux #22B07D autour du tableau
   de bord et le téléphone ; le formulaire seul à droite.
   ============================================================ */
.cx {
  --acc: #22B07D; --acc-rgb: 34, 176, 125; --acc-fonce: #0E7D59; --acc-clair: #E4F6EE; --ops: #22B07D;
  --ardoise: #2C2F3E; --ardoise2: #363A4B; --ardoise3: #454A5E; --gris: #5A6075; --brume: #C8CCD8; --pale: #9AA0AE; --blanc: #F3F2F3;
  --encre: #232633; --encre2: #565C70; --trait: #D5D9E2;
  margin: 0; min-height: 100vh;
  font-family: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; background: var(--ardoise); color: var(--blanc);
}
.cx *, .cx *::before, .cx *::after { box-sizing: border-box; }
.cx h1, .cx h2, .cx .cx-nom { font-family: 'Nunito', 'Nunito Sans', system-ui, sans-serif; }
.cx-page { position: relative; min-height: 100vh; display: flex; flex-direction: column; overflow: clip; }
.cx-fond { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.cx-halo { position: absolute; left: 4%; bottom: -260px; width: 900px; height: 900px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(var(--acc-rgb), .16) 0%, rgba(var(--acc-rgb), 0) 62%); }

/* ── L'en-tête, comme sur la page de présentation ── */
.cx-tete { position: relative; z-index: 3; border-bottom: 1px solid #3A3E50; padding: 16px 48px; display: flex; justify-content: center; }
.cx-marque { width: 100%; max-width: 1264px; display: flex; align-items: center; gap: 12px; }
.cx-logo { width: 46px; height: 46px; display: block; border-radius: 10px; }
.cx-nom-bloc { display: flex; flex-direction: column; gap: 1px; }
.cx-nom { font-weight: 800; font-size: 23px; letter-spacing: -.01em; line-height: 1.1; }
.cx-nom i { font-style: normal; color: var(--ops); }
.cx-par { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pale); }

/* ── Le haut de page : texte et écrans à gauche, formulaire seul à droite ── */
.cx-corps { position: relative; z-index: 2; flex: 1; width: 100%; max-width: 1360px; margin: 0 auto; padding: 28px 48px 32px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 410px); gap: 64px; align-items: center; }
.cx-gauche { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.cx-texte { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cx-pilule { align-self: flex-start; display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--acc); background: rgba(var(--acc-rgb), .1); border: 1px solid rgba(var(--acc-rgb), .45);
  padding: 8px 14px; border-radius: 999px; }
.cx-pilule::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 10px var(--acc); flex-shrink: 0; }
.cx-texte h2 { margin: 0; font-weight: 800; font-size: clamp(32px, 3vw, 46px); line-height: 1.05; letter-spacing: -.01em; text-wrap: balance; max-width: 800px; }
.cx-texte h2 em { font-style: normal; color: var(--acc); }
.cx-sous { margin: 0; font-size: 17px; line-height: 1.55; color: var(--brume); max-width: 720px; }
.cx-signature { margin: 0; font-size: 14px; color: var(--pale); }

/* Les écrans de l'application dans l'anneau lumineux */
.cx-vitrine { position: relative; width: min(100%, 700px, max(420px, calc((100vh - 540px) * 2.1))); padding: 0 0 46px; }
.cx-anneau { position: absolute; width: 68%; aspect-ratio: 1; left: 32%; top: 50%; translate: 0 -50%; border-radius: 50%;
  border: 4px solid var(--acc); border-right-color: transparent; rotate: 35deg; pointer-events: none;
  box-shadow: 0 0 46px -4px rgba(var(--acc-rgb), .6), inset 0 0 36px -8px rgba(var(--acc-rgb), .45); }
.cx-ecran { position: relative; width: 80%; background: #fff; border: 1px solid var(--ardoise3); border-radius: 14px; overflow: hidden;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.6), 0 0 0 6px rgba(var(--acc-rgb), .08); }
.cx-barre { height: 26px; background: var(--ardoise2); display: flex; align-items: center; gap: 6px; padding: 0 12px; }
.cx-barre i { width: 9px; height: 9px; border-radius: 50%; background: var(--gris); }
.cx-barre i:first-child { background: var(--acc); }
.cx-ecran img { display: block; width: 100%; height: auto; aspect-ratio: 1.6; object-fit: cover; object-position: left top; }
.cx-tel { position: absolute; right: 4%; bottom: 0; width: 23%; max-width: 160px; background: #1B1E2A; border-radius: 30px; padding: 8px;
  border: 1px solid rgba(var(--acc-rgb), .5); box-shadow: 0 30px 60px -20px rgba(0,0,0,.6), 0 0 34px -6px rgba(var(--acc-rgb), .55);
  animation: cx-flotte 7s ease-in-out infinite; }
.cx-tel img { display: block; width: 100%; height: auto; border-radius: 23px; }
@keyframes cx-flotte { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }

/* Instance d'un client (CONNEXION_CLIENT_NOM) : son logo dans l'anneau, à la place des captures */
.cx-logo-client { width: auto; max-width: 150px; height: 46px; object-fit: contain; background: #fff; padding: 5px 8px; }
.cx-blason { position: relative; width: min(100%, 560px); aspect-ratio: 1.75; display: grid; place-items: center; }
.cx-blason .cx-anneau { width: 54%; left: 23%; top: 50%; }
.cx-tuile { position: relative; background: #fff; border-radius: 24px; padding: 28px 36px; max-width: 62%;
  box-shadow: 0 30px 60px -24px rgba(0,0,0,.6), 0 0 40px -10px rgba(var(--acc-rgb), .5); }
.cx-tuile img { display: block; max-width: 100%; max-height: 120px; width: auto; height: auto; margin: 0 auto; }

/* La colonne de droite : le formulaire seul */
.cx-droite { position: relative; min-width: 0; display: flex; justify-content: center; }

/* ── Le formulaire ── */
.cx-carte { position: relative; z-index: 2; width: 100%; max-width: 410px; background: #fff; color: var(--encre); border-radius: 22px; padding: 32px 30px 26px;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.06), 0 0 60px -20px rgba(var(--acc-rgb), .45); }
.cx-carte::before { content: ""; position: absolute; left: 30px; right: 30px; top: 0; height: 5px; border-radius: 0 0 6px 6px; background: var(--acc); }
.cx-salut { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--acc-fonce); background: var(--acc-clair);
  border-radius: 999px; padding: 4px 12px; }
.cx-salut .cx-main { display: inline-block; transform-origin: 70% 80%; animation: cx-coucou 2.6s ease-in-out 1s 2; }
@keyframes cx-coucou { 0%, 60%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(16deg); } 20%, 40% { transform: rotate(-8deg); } }
.cx-carte h1 { font-size: 27px; line-height: 1.15; font-weight: 800; margin: 14px 0 6px; letter-spacing: -.01em; }
.cx-carte .cx-aide { color: var(--encre2); font-size: 14.5px; margin: 0 0 20px; }
.cx-form { display: grid; gap: 15px; }
.cx-champ { display: grid; gap: 6px; }
.cx-champ > span:first-child { font-weight: 700; font-size: 13px; }
.cx-saisie { position: relative; }
.cx-saisie > svg { position: absolute; left: 13px; top: 50%; translate: 0 -50%; color: #7A8094; pointer-events: none; }
.cx-saisie input { width: 100%; font: inherit; font-size: 15.5px; font-weight: 400; min-height: 50px; padding: 12px 14px 12px 42px; border: 1.5px solid var(--trait);
  border-radius: 13px; background: #F7F8FA; color: var(--encre); transition: border-color .15s, box-shadow .15s, background .15s; }
.cx-saisie input::placeholder { color: #8A90A2; }
.cx-saisie input:focus { outline: none; border-color: var(--acc-fonce); background: #fff; box-shadow: 0 0 0 4px rgba(var(--acc-rgb), .2); }
.cx-saisie:focus-within > svg { color: var(--acc-fonce); }
.cx-mdp input { padding-right: 52px; }
.cx-oeil { position: absolute; right: 6px; top: 50%; translate: 0 -50%; width: 40px; height: 40px; border: 0; border-radius: 10px; background: none;
  color: #7A8094; cursor: pointer; display: grid; place-items: center; }
.cx-oeil:hover { background: var(--acc-clair); color: var(--acc-fonce); }
.cx-oeil:focus-visible { outline: 2px solid var(--acc-fonce); }
.cx-maj { font-size: 12.5px; color: #92400E; background: #FFFBEB; border: 1px solid #FDE68A; border-radius: 8px; padding: 5px 9px; }
.cx-btn { font: inherit; font-size: 16.5px; font-weight: 700; min-height: 54px; border: 0; border-radius: 999px; cursor: pointer; color: #1B1E2A; margin-top: 4px;
  background: var(--acc); box-shadow: 0 0 28px -6px rgba(var(--acc-rgb), .75);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; transition: transform .12s, box-shadow .12s, filter .12s; }
.cx-btn:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 0 34px -4px rgba(var(--acc-rgb), .85); }
.cx-btn:active { transform: translateY(0); }
.cx-btn:focus-visible { outline: 3px solid var(--acc-fonce); outline-offset: 3px; }
.cx-btn[aria-busy="true"] { pointer-events: none; filter: saturate(.7); }
.cx-btn[aria-busy="true"] svg { animation: cx-tourne .9s linear infinite; }
@keyframes cx-tourne { to { rotate: 360deg; } }
.cx-msg { border-radius: 12px; padding: 11px 13px; font-size: 14px; margin: 0 0 16px; display: flex; gap: 9px; align-items: flex-start; }
.cx-msg svg { flex-shrink: 0; margin-top: 1px; }
.cx-erreur { background: #FEF3F2; color: #9B1C12; border: 1px solid #FECDCA; animation: cx-secoue .4s ease 1; }
.cx-info { background: var(--acc-clair); color: var(--acc-fonce); border: 1px solid rgba(var(--acc-rgb), .35); }
@keyframes cx-secoue { 20%, 60% { translate: -5px 0; } 40%, 80% { translate: 5px 0; } }
.cx-liens { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 18px; font-size: 13.5px; }
.cx-liens a { color: var(--acc-fonce); font-weight: 700; }
.cx-note { margin: 16px 0 0; padding-top: 14px; border-top: 1px dashed var(--trait); font-size: 13px; color: var(--encre2); display: flex; gap: 9px; align-items: flex-start; }
.cx-note svg { color: var(--acc-fonce); flex-shrink: 0; margin-top: 1px; }

/* ── Écrans moyens : le téléphone se retire ── */
@media (max-width: 1180px) {
  .cx-corps { grid-template-columns: minmax(0, 1fr) minmax(340px, 400px); gap: 40px; padding-inline: 32px; }
  .cx-tete { padding-inline: 32px; }
  .cx-tel { display: none; }
  .cx-ecran { width: 100%; }
  .cx-anneau { width: 76%; left: 12%; }
}
/* ── Téléphone et tablette : la marque et le téléphone en haut, le formulaire en volet posé en bas d'écran ── */
@media (max-width: 900px) {
  .cx-page { min-height: 100vh; min-height: 100dvh; }
  .cx-tete { padding: 14px 18px 4px; border-bottom: 0; }
  .cx-marque { justify-content: center; gap: 10px; }
  .cx-logo { width: 36px; height: 36px; border-radius: 9px; }
  .cx-logo-client { height: 36px; max-width: 120px; padding: 3px 6px; }
  .cx-nom { font-size: 20px; }
  .cx-par { font-size: 9.5px; }
  .cx-halo { width: 560px; height: 560px; left: 50%; translate: -50% 0; top: 40px; bottom: auto; }
  .cx-corps { display: flex; flex-direction: column; gap: 0; padding: 0; max-width: none; }
  .cx-gauche { flex: 1; gap: 16px; padding: 10px 22px 0; align-items: center; text-align: center; }
  .cx-texte { gap: 10px; align-items: center; }
  .cx-pilule { align-self: center; font-size: 10.5px; padding: 5px 12px; gap: 7px; }
  .cx-texte h2 { font-size: clamp(21px, 6vw, 28px); line-height: 1.1; max-width: 24ch; }
  .cx-sous, .cx-signature, .cx-ecran, .cx-salut { display: none; }
  /* Le téléphone de la page de présentation dépasse de derrière le volet de connexion */
  .cx-vitrine { flex: 1 1 0; min-height: 0; width: 100%; max-height: 300px; padding: 0; overflow: hidden; margin-bottom: -26px; }
  .cx-vitrine .cx-anneau { width: 280px; left: 50%; top: 100%; translate: -50% -42%; }
  .cx-tel { display: block; position: absolute; left: 50%; right: auto; bottom: auto; top: 14px; translate: -50% 0; width: 158px; max-width: none; padding: 7px; border-radius: 28px; animation: none; }
  .cx-tel img { border-radius: 21px; }
  .cx-blason { flex: 1 1 0; min-height: 0; width: 100%; max-height: 260px; aspect-ratio: auto; margin-bottom: -26px; padding-bottom: 26px; }
  .cx-blason .cx-anneau { width: 230px; left: 50%; translate: -50% -50%; }
  .cx-tuile { padding: 16px 22px; border-radius: 18px; }
  .cx-tuile img { max-height: 70px; }
  .cx-droite { position: relative; z-index: 3; }
  .cx-carte { max-width: 560px; margin: 0 auto; border-radius: 26px 26px 0 0; padding: 24px 22px calc(18px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -24px 60px -24px rgba(0,0,0,.7), 0 0 50px -16px rgba(var(--acc-rgb), .45); }
  .cx-carte::before { display: none; }
  .cx-carte h1 { font-size: 22px; margin: 0 0 4px; }
  .cx-carte .cx-aide { font-size: 13.5px; line-height: 1.4; margin-bottom: 14px; }
  .cx-form { gap: 12px; }
  .cx-champ { gap: 5px; }
  /* 16 px : en dessous, l'iPhone zoome sur le champ quand on le touche */
  .cx-saisie input { font-size: 16px; min-height: 48px; padding-block: 10px; }
  .cx-btn { min-height: 52px; font-size: 16px; }
  .cx-msg { padding: 8px 10px; font-size: 13px; margin-bottom: 10px; }
  .cx-liens { margin-top: 12px; justify-content: center; }
  .cx-note { margin-top: 12px; padding-top: 10px; font-size: 12px; line-height: 1.4; }
}
/* Écrans courts : le téléphone, puis la phrase d'aide, puis la pastille se retirent */
@media (max-width: 900px) and (max-height: 720px) { .cx-vitrine, .cx-blason { display: none; } .cx-gauche { justify-content: center; padding-bottom: 34px; } .cx-droite { margin-top: -26px; } .cx-carte:has(.cx-msg) .cx-aide { display: none; } }
@media (max-width: 900px) and (max-height: 650px) { .cx-carte .cx-aide { display: none; } }
@media (max-width: 900px) and (max-height: 600px) { .cx-pilule { display: none; } }
@media (prefers-reduced-motion: reduce) { .cx * { animation: none !important; transition: none !important; } }

/* OpsInterventionPro (édition « intervention ») : le bleu de l'anneau du logo « ops » à la place de l'émeraude. */
body.cx.cx-iv { --acc: #2BA3D6; --acc-rgb: 43, 163, 214; --acc-fonce: #0B6E8F; --acc-clair: #E0F1F7; --ops: #2BA3D6; }