/* Page de connexion v3 (maquette « Connexion v3 ») : panneau bleu nuit à gauche, formulaire sur fond blanc à droite.
   Connexion par e-mail et mot de passe (choix validé : ni code SMS, ni Google). Aucun cadratin ni demi-cadratin.
   Les animations sont coupées si l'appareil demande moins de mouvement. */
@font-face{font-family:"Sora";src:url("../polices/sora-600.4c3aca48be0c.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Sora";src:url("../polices/sora-800.566a81b2caf2.woff2") format("woff2");font-weight:800;font-display:swap}

.page-connexion{--cx-nuit:#1B2A4A; --cx-jaune:#F5C343; --cx-fond:#FFFFFF; --cx-texte:#141A26; --cx-texte-2:#535B6B; --cx-filet:#E5E7EB;
  --cx-champ:#FFFFFF; --cx-erreur:#C2410C; --cx-sora:"QELI Chiffres","Sora","Plus Jakarta Sans",system-ui,sans-serif; --cx-ease:cubic-bezier(.2,.8,.2,1);
  background:var(--cx-fond);color:var(--cx-texte)}
:root[data-theme="sombre"] .page-connexion{--cx-fond:#0E131C; --cx-texte:#EEF1F6; --cx-texte-2:#A8B0C0; --cx-filet:#2B3546; --cx-champ:#171E2B; --cx-erreur:#FF8A5C}
@media (prefers-color-scheme:dark){:root[data-theme="auto"] .page-connexion{--cx-fond:#0E131C; --cx-texte:#EEF1F6; --cx-texte-2:#A8B0C0;
  --cx-filet:#2B3546; --cx-champ:#171E2B; --cx-erreur:#FF8A5C}}
.page-connexion .contenu.contenu-plein{max-width:none;padding:0;margin:0}

.cx{min-height:100svh;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,480px),1fr))}

/* ---------- Gauche : bleu nuit ---------- */
.cx-gauche{position:relative;overflow:hidden;isolation:isolate;background:var(--cx-nuit);color:#fff;display:flex;flex-direction:column;
  justify-content:space-between;gap:40px;padding:clamp(24px,4.5vw,56px)}
.cx-halo{position:absolute;z-index:-1;border-radius:999px;aspect-ratio:1;pointer-events:none}
.cx-halo-1{right:-25%;top:-20%;width:80%;background:radial-gradient(circle,rgba(245,195,67,.24),rgba(245,195,67,0) 65%)}
.cx-halo-2{left:-30%;bottom:-35%;width:85%;background:radial-gradient(circle,rgba(120,150,220,.20),rgba(120,150,220,0) 65%)}
.cx-logo{align-self:flex-start;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.85)}
.cx-message{display:flex;flex-direction:column;gap:18px}
.cx-titre{margin:0;font:800 clamp(2.25rem,5vw,4.25rem)/1.02 var(--cx-sora);letter-spacing:-.04em}
.cx-mot{display:inline-block}
.cx-tournant{display:inline-block;color:var(--cx-jaune);white-space:nowrap}
.cx-sous{margin:0;max-width:420px;color:#C9D2E3;font-size:clamp(.9375rem,1.1vw,1.0625rem);line-height:1.55}
.cx-etiquettes{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px}
.cx-etiquette{display:inline-flex;align-items:center;gap:10px;padding:10px 16px 10px 10px;border-radius:16px;font:700 .9375rem/1.2 var(--cx-sora);
  box-shadow:0 14px 30px rgba(5,10,25,.3)}
.cx-etiquette small{display:block;font:500 .75rem var(--cx-sora);opacity:.75}
.cx-etiquette.blanche{background:#fff;color:#141A26}
.cx-etiquette.blanche b{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:999px;background:var(--cx-nuit);color:var(--cx-jaune);font-size:.875rem}
.cx-etiquette.jaune{background:var(--cx-jaune);color:#141A26;padding-left:16px}

/* ---------- Droite : formulaire ---------- */
.cx-droite{display:flex;align-items:center;justify-content:center;padding:clamp(28px,5vw,64px) clamp(16px,4vw,56px);background:var(--cx-fond)}
.cx-carte{width:100%;max-width:420px;display:flex;flex-direction:column;gap:18px}
.cx-h1{margin:0;font:800 clamp(1.875rem,3vw,2.375rem)/1.1 var(--cx-sora);letter-spacing:-.03em;color:var(--cx-texte)}
.cx-note{margin:-8px 0 0;color:var(--cx-texte-2);font-size:.9375rem;line-height:1.5}
.cx-carte a{color:var(--cx-texte);font-weight:700;text-decoration:underline;text-decoration-color:var(--cx-jaune);text-decoration-thickness:2px;text-underline-offset:4px}
.cx-segments{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:999px;background:#F3F4F6}
:root[data-theme="sombre"] .cx-segments{background:#1F2837}
@media (prefers-color-scheme:dark){:root[data-theme="auto"] .cx-segments{background:#1F2837}}
.cx-segments a{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;min-height:44px;border-radius:999px;
  font:600 .875rem var(--cx-sora);color:var(--cx-texte-2)!important;text-decoration:none!important;transition:color .3s}
.cx-segments a[aria-current="page"]{color:#fff!important}
.cx-pastille{position:absolute;z-index:0;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;background:var(--cx-nuit)}
.cx-segments:has(a:last-of-type[aria-current="page"]) .cx-pastille{transform:translateX(100%)}
.cx-formulaire{display:flex;flex-direction:column;gap:16px}
.cx-champ{display:flex;flex-direction:column;gap:7px}
.cx-champ label{font:600 .875rem var(--cx-sora);color:var(--cx-texte)}
.cx-ligne-label{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.cx-ligne-label a{font-size:.8125rem}
.cx-champ input{width:100%;min-height:52px;padding:0 16px;border:1px solid var(--cx-filet);border-radius:16px;background:var(--cx-champ);color:var(--cx-texte);
  font:500 1rem var(--police-texte,"QELI Chiffres","Plus Jakarta Sans",system-ui,sans-serif);transition:box-shadow .2s,border-color .2s}
.cx-champ input::placeholder{color:#9AA1AE}
.cx-champ input:focus{outline:none;border-color:var(--cx-nuit);box-shadow:0 0 0 2px var(--cx-nuit),0 8px 20px rgba(27,42,74,.10)}
:root[data-theme="sombre"] .cx-champ input:focus{border-color:var(--cx-jaune);box-shadow:0 0 0 2px var(--cx-jaune)}
.cx-champ.cx-invalide input{border-color:var(--cx-erreur);box-shadow:0 0 0 2px var(--cx-erreur)}
.cx-message-champ{margin:0;color:var(--cx-erreur);font-weight:700;font-size:.8125rem}
.cx-erreur-globale{margin:0;padding:12px 14px;border-radius:14px;background:#FBEBE3;color:#9A3412;font-weight:700;font-size:.875rem;line-height:1.45}
.cx-mdp{position:relative}
.cx-mdp input{padding-right:96px}
.cx-voir{position:absolute;right:6px;top:50%;transform:translateY(-50%);min-height:40px;padding:0 12px;border:0;border-radius:12px;background:transparent;
  color:var(--cx-texte-2);font:600 .8125rem var(--cx-sora);cursor:pointer}
.cx-voir:hover{background:#F3F4F6}
.cx-voir:focus-visible{outline:2px solid var(--cx-nuit);outline-offset:1px}
.cx-bouton{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;min-height:56px;margin-top:4px;border:0;border-radius:999px;
  background:var(--cx-jaune);color:#141A26;font:700 1rem var(--cx-sora);cursor:pointer;box-shadow:0 12px 26px rgba(245,195,67,.30);
  transition:transform .2s var(--cx-ease),box-shadow .2s,translate .3s var(--cx-ease)}
.cx-bouton:hover{box-shadow:0 16px 34px rgba(245,195,67,.40)}
.cx-bouton:focus-visible{outline:3px solid var(--cx-nuit);outline-offset:3px}
.cx-spinner{display:none;width:18px;height:18px;border-radius:999px;border:2.5px solid rgba(20,26,38,.25);border-top-color:#141A26}
.cx-bouton.charge .cx-spinner{display:inline-block}
.cx-bouton.charge{pointer-events:none;opacity:.9}
.cx-suite{display:flex;flex-direction:column;gap:10px;padding-top:16px;border-top:1px solid var(--cx-filet);color:var(--cx-texte-2);font-size:.9375rem}
.cx-suite p{margin:0}
.cx-mentions{font-size:.8125rem}

/* Téléphone : panneau bleu nuit plus court, sans étiquettes */
@media (max-width:959px){
  .cx-gauche{gap:22px;padding-bottom:30px}
  .cx-etiquettes{display:none}
  .cx-titre{font-size:clamp(2rem,9vw,2.75rem)}
}

/* ---------- Mouvement ---------- */
@media (prefers-reduced-motion:no-preference){
  @keyframes cx-mot{from{opacity:0;transform:translateY(40%);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
  @keyframes cx-monte{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
  @keyframes cx-rebond{0%{opacity:0;transform:scale(.7)}70%{opacity:1;transform:scale(1.06)}100%{opacity:1;transform:none}}
  @keyframes cx-flotte{0%,100%{translate:0 0}50%{translate:0 -10px}}
  @keyframes cx-derive{from{transform:translate(0,0) scale(1)}to{transform:translate(-40px,30px) scale(1.08)}}
  @keyframes cx-secousse{0%,100%{transform:none}20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}
  @keyframes cx-tourne{to{transform:rotate(360deg)}}
  .cx-mot,.cx-tournant{animation:cx-mot .8s var(--cx-ease) both}
  .cx-mot[data-mot="1"]{animation-delay:.08s}.cx-mot[data-mot="2"]{animation-delay:.16s}.cx-tournant{animation-delay:.24s}
  .cx-mot[data-mot="3"]{animation-delay:.32s}.cx-mot[data-mot="4"]{animation-delay:.4s}
  .cx-sous{animation:cx-monte .8s .45s var(--cx-ease) both}
  .cx-etiquette{animation:cx-rebond .7s .7s cubic-bezier(.34,1.56,.64,1) both,cx-flotte 4.2s 1.5s ease-in-out infinite}
  .cx-etiquette + .cx-etiquette{animation-delay:.9s,2.1s}
  .cx-halo-1{animation:cx-derive 10s ease-in-out infinite alternate}
  .cx-halo-2{animation:cx-derive 13s ease-in-out infinite alternate-reverse}
  .cx-carte{animation:cx-monte .8s .15s var(--cx-ease) both}
  .cx-pastille{transition:transform .4s var(--cx-ease)}
  .cx-tournant.sort{transition:opacity .3s,filter .3s,transform .3s;opacity:0;filter:blur(6px);transform:translateY(-30%)}
  .cx-formulaire.secoue{animation:cx-secousse .42s ease}
  .cx-bouton.charge .cx-spinner{animation:cx-tourne .8s linear infinite}
}
.cx-etiquette small{color:inherit}
:root[data-theme="sombre"] .cx-pastille{background:var(--cx-jaune)}
:root[data-theme="sombre"] .cx-segments a[aria-current="page"]{color:#141A26!important}
@media (prefers-color-scheme:dark){
  :root[data-theme="auto"] .cx-pastille{background:var(--cx-jaune)}
  :root[data-theme="auto"] .cx-segments a[aria-current="page"]{color:#141A26!important}
  :root[data-theme="auto"] .cx-champ input:focus{border-color:var(--cx-jaune);box-shadow:0 0 0 2px var(--cx-jaune)}
}
/* « Devenir formateur QELI » ouvre le chat ; la bulle flottante elle-même reste cachée sur cette page */
.cx-lien-bouton{align-self:flex-start;padding:0;border:0;background:none;color:var(--cx-texte);font:700 .9375rem var(--police-texte,inherit);cursor:pointer;
  text-decoration:underline;text-decoration-color:var(--cx-jaune);text-decoration-thickness:2px;text-underline-offset:4px}
.page-connexion .question-flottante:not([open]){display:none}
/* Console : petite étiquette au-dessus du titre ; icône dans le rond blanc */
.cx-console-libelle{align-self:flex-start;padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.10);color:var(--cx-jaune);
  font:600 .8125rem var(--cx-sora);letter-spacing:.04em;text-transform:uppercase}
.cx-etiquette.blanche b svg{color:var(--cx-jaune)}

/* ---------- Inscription : même cadre que la connexion, champs du formulaire existant ---------- */
.cx-carte-large{max-width:480px}
.cx-rappel{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:16px;background:#FFF4D3;color:#141A26}
.cx-rappel p{margin:0;font-size:.9375rem;line-height:1.45}
.cx-rappel svg{flex:none;color:var(--cx-nuit);margin-top:2px}
:root[data-theme="sombre"] .cx-rappel{background:#2E2812;color:var(--cx-texte)}
.cx-inscription{display:flex;flex-direction:column;gap:14px}
.cx-inscription .champ{margin:0;display:flex;flex-direction:column;gap:7px}
.cx-inscription .champ > label{font:600 .875rem var(--cx-sora);color:var(--cx-texte)}
.cx-inscription .champ input:not([type=checkbox]){width:100%;min-height:52px;padding:0 16px;border:1px solid var(--cx-filet);border-radius:16px;
  background:var(--cx-champ);color:var(--cx-texte);font:500 1rem var(--police-texte,"QELI Chiffres","Plus Jakarta Sans",system-ui,sans-serif)}
.cx-inscription .champ input:not([type=checkbox]):focus{outline:none;border-color:var(--cx-nuit);box-shadow:0 0 0 2px var(--cx-nuit),0 8px 20px rgba(27,42,74,.10)}
:root[data-theme="sombre"] .cx-inscription .champ input:not([type=checkbox]):focus{border-color:var(--cx-jaune);box-shadow:0 0 0 2px var(--cx-jaune)}
.cx-inscription .champ input[aria-invalid="true"]{border-color:var(--cx-erreur);box-shadow:0 0 0 2px var(--cx-erreur)}
.cx-inscription .prefixe{display:flex;align-items:stretch}
.cx-inscription .prefixe > span{display:flex;align-items:center;padding:0 14px;border:1px solid var(--cx-filet);border-right:0;border-radius:16px 0 0 16px;
  background:#F3F4F6;color:var(--cx-texte-2);font-weight:600}
:root[data-theme="sombre"] .cx-inscription .prefixe > span{background:#1F2837}
.cx-inscription .prefixe input{border-radius:0 16px 16px 0!important}
.cx-inscription .note{color:var(--cx-texte-2);font-size:.8125rem}
.cx-inscription .erreur{color:var(--cx-erreur);font-weight:700;font-size:.8125rem;margin:0}
.cx-inscription .champs-deux{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:14px}
.cx-inscription .choix{display:flex;gap:10px;align-items:flex-start;font-size:.9375rem;color:var(--cx-texte)}
.cx-inscription .cx-mentions{margin:0;color:var(--cx-texte-2)}
@media (prefers-color-scheme:dark){
  :root[data-theme="auto"] .cx-rappel{background:#2E2812;color:var(--cx-texte)}
  :root[data-theme="auto"] .cx-inscription .prefixe > span{background:#1F2837}
}
.cx-inscription .prefixe{border:0!important;background:none!important;box-shadow:none!important;padding:0!important;border-radius:16px}
.cx-inscription .prefixe:focus-within > span{border-color:var(--cx-nuit)}