/* ═══════════════════════════════════════════════════════════════════════════
   CONNEXION — Électro-Shop Formation

   Deux panneaux : la marque à gauche, sur le marine du logo ; les trois
   chemins d'entrée à droite, sur fond clair. Sur téléphone, le panneau
   devient un bandeau court et tout se range sur une colonne.

   La grammaire est celle de la page d'accueil : marine #0B2A52, filet rouge,
   petites capitales en IBM Plex Mono, aucun dégradé, aucune teinte délavée.
   ═══════════════════════════════════════════════════════════════════════════ */

.cx{
  --marine:#0B2A52; --marine-2:#0F3565; --marine-line:#1D477F; --marine-deep:#061A36;
  --rouge:#E3263A; --rouge-deep:#B3172A;
  --paper:#F0F2F6; --surface:#FFFFFF; --surface-2:#E7EBF1;
  --bord:#D6DCE6; --bord-2:#B9C3D1;
  --encre:#0C1219; --encre-2:#4E5A66; --encre-3:#828D9C;
  --clair:#FFFFFF; --clair-2:#AEC2DC; --clair-3:#728CB0;
  --ok:#127A47;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body.cx{
  min-height:100vh;min-height:100dvh;background:var(--paper);color:var(--encre);
  font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;
  display:flex;align-items:stretch}

.cx-cadre{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);width:100%;min-height:100vh;min-height:100dvh}

/* ── panneau de gauche ── */
.cx-marque{background:var(--marine);color:var(--clair);padding:48px 52px;
  display:flex;flex-direction:column;border-right:4px solid var(--rouge)}
.cx-logo{display:inline-flex;align-items:center;gap:13px;text-decoration:none;color:inherit;margin-bottom:auto}
.cx-logo img{width:44px;height:44px;border-radius:10px;display:block}
.cx-logo b{display:block;font-size:16px;font-weight:700;letter-spacing:.03em;line-height:1.15}
.cx-logo span{display:block;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--clair-3);margin-top:3px}

.cx-mot{margin:56px 0}
.cx-k{display:inline-flex;align-items:center;gap:9px;font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:var(--clair-3);margin-bottom:15px}
.cx-k::before{content:"";width:24px;height:1px;background:var(--rouge)}
.cx-mot h2{margin:0 0 14px;font-size:clamp(25px,2.7vw,34px);line-height:1.12;letter-spacing:-.018em;font-weight:700}
.cx-mot p{margin:0;color:var(--clair-2);font-size:15.5px;line-height:1.65;max-width:34ch}

.cx-liste{list-style:none;margin:0;padding:0;border-top:1px solid var(--marine-line)}
.cx-liste li{display:flex;align-items:flex-start;gap:12px;padding:13px 0;
  border-bottom:1px solid var(--marine-line);font-size:14px;color:var(--clair-2)}
.cx-liste svg{flex:0 0 17px;width:17px;height:17px;margin-top:2px;color:var(--rouge)}
.cx-pied{margin-top:auto;padding-top:34px;font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:11px;letter-spacing:.1em;color:var(--clair-3)}

/* ── panneau de droite ── */
.cx-zone{display:flex;align-items:center;justify-content:center;padding:48px 40px;background:var(--paper)}
.cx-boite{width:100%;max-width:392px}
.cx-boite h1{margin:0 0 6px;font-size:27px;font-weight:700;letter-spacing:-.02em}
.cx-sous{margin:0 0 28px;color:var(--encre-2);font-size:14.5px}

/* messages */
.cx-msg{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:9px;
  font-size:13.6px;line-height:1.55;margin-bottom:20px}
.cx-msg svg{flex:0 0 17px;width:17px;height:17px;margin-top:1px}
.cx-msg--err{background:#FBE7E5;border:1px solid #F0BFBA;color:#8E1B15}
.cx-msg--ok{background:#E4F3E8;border:1px solid #B7DFC4;color:#0F5C34}
.cx-msg--info{background:#E6EEF9;border:1px solid #C2D6EE;color:#194A85}

/* champs */
.cx-champ{margin-bottom:16px}
.cx-lbl{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  font-size:12.8px;font-weight:600;color:var(--encre-2);margin-bottom:6px}
.cx-lbl a{color:var(--marine);text-decoration:none;font-weight:600;font-size:12.5px}
.cx-lbl a:hover{color:var(--rouge);text-decoration:underline}
.cx-in{width:100%;height:47px;padding:0 14px;border:1.5px solid var(--bord);border-radius:9px;
  background:var(--surface);color:var(--encre);font-family:inherit;font-size:15px;
  transition:border-color .14s,box-shadow .14s}
.cx-in:focus{outline:none;border-color:var(--marine);box-shadow:0 0 0 3px rgba(11,42,82,.11)}
.cx-in.faux{border-color:#C6362C}
.cx-pw{position:relative}
.cx-pw .cx-in{padding-right:46px}
.cx-oeil{position:absolute;top:0;right:0;width:46px;height:47px;border:0;background:none;cursor:pointer;
  color:var(--encre-3);display:flex;align-items:center;justify-content:center;border-radius:0 9px 9px 0}
.cx-oeil:hover{color:var(--marine)}

.cx-case{display:flex;align-items:center;gap:9px;margin:2px 0 20px;font-size:13.6px;color:var(--encre-2)}
.cx-case input{width:16px;height:16px;accent-color:var(--marine);cursor:pointer}
.cx-case label{cursor:pointer}

/* boutons */
.cx-b{display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%;
  height:49px;padding:0 20px;border:1.5px solid transparent;border-radius:9px;
  font-family:inherit;font-size:15px;font-weight:600;cursor:pointer;text-decoration:none;
  transition:background .14s,border-color .14s,color .14s}
.cx-b svg{width:18px;height:18px;flex-shrink:0}
.cx-b:disabled{opacity:.55;cursor:default}
.cx-b--premier{background:var(--marine);color:#fff}
.cx-b--premier:hover:not(:disabled){background:var(--marine-2)}
.cx-b--cle{background:var(--surface);border-color:var(--marine);color:var(--marine)}
.cx-b--cle:hover:not(:disabled){background:#EAF0F8}
.cx-b--tiers{background:var(--surface);border-color:var(--bord-2);color:var(--encre)}
.cx-b--tiers:hover:not(:disabled){border-color:var(--encre-3);background:#FAFBFD}

/* séparateur */
/* « hidden » doit l'emporter sur le display : sans cela le séparateur
   « ou avec vos identifiants » s'affichait alors que le bloc qu'il annonce
   était masqué, et la page semblait amputée. */
.cx-ou[hidden]{display:none}
.cx-ou{display:flex;align-items:center;gap:14px;margin:20px 0;
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--encre-3)}
.cx-ou::before,.cx-ou::after{content:"";flex:1;height:1px;background:var(--bord)}

.cx-note{margin:9px 0 0;font-size:12.8px;line-height:1.55;color:var(--encre-3)}
.cx-note--err{color:#8E1B15}
.cx-retour{margin-top:28px;padding-top:20px;border-top:1px solid var(--bord);
  font-size:13.4px;color:var(--encre-3)}
.cx-retour a{color:var(--marine);text-decoration:none;font-weight:600}
.cx-retour a:hover{color:var(--rouge)}

/* le bloc « clé d'accès » est mis en avant : c'est le chemin le plus court */
.cx-cle{border:1.5px solid var(--bord);border-radius:11px;padding:15px 15px 14px;background:var(--surface);
  margin-bottom:20px}
.cx-cle-t{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:700;color:var(--encre);
  margin-bottom:4px}
.cx-cle-t svg{width:17px;height:17px;color:var(--marine)}
.cx-cle-p{margin:0 0 12px;font-size:12.9px;line-height:1.5;color:var(--encre-2)}
.cx-cle .cx-b{height:45px;font-size:14.5px}

@media (max-width:900px){
  body.cx{display:block}
  .cx-cadre{grid-template-columns:1fr;min-height:100vh;min-height:100dvh}
  .cx-marque{padding:22px 22px 24px;border-right:0;border-bottom:4px solid var(--rouge)}
  .cx-logo{margin-bottom:0}
  .cx-logo img{width:38px;height:38px}
  .cx-mot{margin:22px 0 0}
  .cx-mot h2{font-size:23px;margin-bottom:8px}
  .cx-mot p{font-size:14.5px;max-width:none}
  .cx-liste,.cx-pied{display:none}
  .cx-zone{padding:30px 20px 44px;align-items:flex-start}
  .cx-boite{max-width:440px;margin:0 auto}
  .cx-boite h1{font-size:23px}
}
@media (max-width:420px){
  .cx-marque{padding:18px 17px 20px}
  .cx-zone{padding:26px 17px 40px}
  .cx-mot h2{font-size:21px}
  .cx-in,.cx-oeil{height:46px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE DES CLÉS D'ACCÈS

   Même écriture que la connexion, mais en page pleine : on y arrive déjà
   connecté, pour enregistrer l'appareil que l'on a en main.
   ═══════════════════════════════════════════════════════════════════════════ */
body.cx-page{display:block;background:var(--paper)}
.cx-barre{background:var(--marine);border-bottom:3px solid var(--rouge);
  padding:13px 24px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.cx-barre .cx-logo{margin:0}
.cx-barre-qui{margin-left:auto;display:flex;align-items:center;gap:10px}
.cx-bs{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border-radius:8px;
  border:1.5px solid rgba(255,255,255,.3);color:#fff;background:transparent;text-decoration:none;
  font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer;transition:background .14s,border-color .14s}
.cx-bs:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.55)}
.cx-bs--plein{background:var(--rouge);border-color:var(--rouge)}
.cx-bs--plein:hover{background:var(--rouge-deep);border-color:var(--rouge-deep)}

.cx-col{max-width:660px;margin:0 auto;padding:36px 24px 60px}
.cx-col > h1{margin:0 0 8px;font-size:27px;font-weight:700;letter-spacing:-.02em}
.cx-col > .cx-sous{margin:0 0 26px;font-size:15px;color:var(--encre-2);max-width:60ch}

.cx-carte{background:var(--surface);border:1px solid var(--bord);border-radius:13px;
  padding:20px 22px;margin-bottom:16px}
.cx-carte--phare{border-color:var(--marine);border-left-width:4px}
.cx-carte h2{margin:0;font-size:16px;font-weight:700;letter-spacing:-.01em}
.cx-carte-tete{display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;margin-bottom:14px}
.cx-carte p{margin:0 0 14px;font-size:14px;line-height:1.65;color:var(--encre-2)}
.cx-carte p:last-child{margin-bottom:0}
.cx-carte .cx-b{width:auto;height:44px}

.cx-rangs{display:flex;flex-direction:column;gap:9px}
.cx-rang{display:flex;align-items:center;gap:13px;padding:12px 14px;
  border:1px solid var(--bord);border-radius:10px;background:var(--surface)}
.cx-rang-ic{flex:0 0 34px;height:34px;border-radius:9px;background:#EAF0F8;color:var(--marine);
  display:flex;align-items:center;justify-content:center}
.cx-rang-t{flex:1;min-width:0}
.cx-rang-t b{display:block;font-size:14px;font-weight:600;color:var(--encre)}
.cx-rang-t span{display:block;font-size:12.5px;color:var(--encre-3);margin-top:2px}
.cx-rang form{margin:0}
.cx-retirer{width:36px;height:36px;border:1.5px solid var(--bord);border-radius:8px;background:var(--surface);
  color:var(--encre-3);cursor:pointer;display:flex;align-items:center;justify-content:center}
.cx-retirer:hover{border-color:#C6362C;color:#C6362C}

.cx-vide{padding:22px;border:1px dashed var(--bord-2);border-radius:11px;text-align:center;
  color:var(--encre-3);font-size:13.6px;line-height:1.6}
.cx-vide b{display:block;color:var(--encre-2);font-size:14.5px;margin-bottom:3px}

@media (max-width:640px){
  .cx-barre{padding:11px 16px}
  .cx-barre .cx-logo img{width:34px;height:34px}
  .cx-col{padding:26px 16px 50px}
  .cx-col > h1{font-size:23px}
  .cx-carte{padding:17px 16px}
  .cx-carte .cx-b{width:100%}
}

/* ═══════════════════════════════════════════════════════════════════════════
   LA PAGE S'ÉVEILLE

   Le décor du panneau de marque est un réseau de pistes de circuit imprimé.
   Il se dessine à l'ouverture, ses jonctions respirent, et une impulsion le
   parcourt de temps à autre — l'atelier sous tension, sans un seul dégradé.

   Tout le mouvement passe par « transform » et « opacity », les deux seules
   propriétés que le navigateur anime sans refaire sa mise en page : la page
   reste fluide même sur un poste modeste. Et qui a demandé moins d'animation
   dans son système n'en voit aucune.
   ═══════════════════════════════════════════════════════════════════════════ */

.cx-marque{position:relative;overflow:hidden;isolation:isolate}

/* ── le réseau de pistes ── */
.cx-circuit{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.cx-pistes path{fill:none;stroke:#1D477F;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1400;stroke-dashoffset:1400;
  animation:cx-tracer 2.6s cubic-bezier(.22,.61,.36,1) forwards}
.cx-pistes path:nth-child(2){animation-delay:.12s}
.cx-pistes path:nth-child(3){animation-delay:.24s}
.cx-pistes path:nth-child(4){animation-delay:.36s}
.cx-pistes path:nth-child(5){animation-delay:.48s}
.cx-pistes path:nth-child(6){animation-delay:.60s}
.cx-pistes path:nth-child(n+7){stroke-dasharray:200;stroke-dashoffset:200;animation-duration:1.4s;animation-delay:.9s}

@keyframes cx-tracer{to{stroke-dashoffset:0}}

.cx-noeuds circle{fill:#2A5A9E;opacity:0;transform-box:fill-box;transform-origin:center;
  animation:cx-noeud 4.5s ease-in-out infinite;animation-delay:calc(1.4s + var(--n,0) * .38s)}
.cx-noeuds circle:nth-child(1){--n:0}   .cx-noeuds circle:nth-child(2){--n:1}
.cx-noeuds circle:nth-child(3){--n:2}   .cx-noeuds circle:nth-child(4){--n:3}
.cx-noeuds circle:nth-child(5){--n:4}   .cx-noeuds circle:nth-child(6){--n:5}
.cx-noeuds circle:nth-child(7){--n:6}   .cx-noeuds circle:nth-child(8){--n:7}
.cx-noeuds circle:nth-child(9){--n:8}   .cx-noeuds circle:nth-child(10){--n:9}
.cx-noeuds circle:nth-child(11){--n:10}

@keyframes cx-noeud{
  0%,100%{opacity:.28;transform:scale(1)}
  50%    {opacity:.85;transform:scale(1.5)}
}

/* l'impulsion : un court segment de courant qui remonte une piste */
.cx-impulsion{fill:none;stroke:var(--rouge);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:70 1330;stroke-dashoffset:1400;opacity:.75;
  animation:cx-courant 7s cubic-bezier(.5,0,.5,1) infinite;animation-delay:2.4s}
.cx-impulsion--2{stroke:#3FA9F5;animation-duration:9s;animation-delay:5.2s;opacity:.55}

@keyframes cx-courant{
  0%      {stroke-dashoffset:1400;opacity:0}
  8%      {opacity:.8}
  55%,100%{stroke-dashoffset:-70;opacity:0}
}

/* ── l'entrée en scène, décalée ── */
/* « backwards » plutôt qu'une opacité nulle écrite en dur : si l'animation ne
   démarre pas — navigateur ancien, réglage particulier —, l'élément reste
   visible au lieu de disparaître. Un texte invisible est pire qu'un texte fixe. */
.cx-entre{animation:cx-monte .7s cubic-bezier(.22,.61,.36,1) backwards;
  animation-delay:calc(var(--pas,1) * .09s)}
@keyframes cx-monte{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}

.cx-titre{display:flex;flex-wrap:wrap;gap:0 .32em}
.cx-mot-mot{display:inline-block;
  animation:cx-monte .78s cubic-bezier(.22,.61,.36,1) backwards;
  animation-delay:calc(var(--pas,1) * .09s)}

/* le filet rouge de la petite capitale se trace au lieu d'apparaître */
.cx-k::before{transform-origin:left center;animation:cx-filet .6s cubic-bezier(.22,.61,.36,1) .28s backwards}
@keyframes cx-filet{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* les trois lignes reçoivent un liseré qui glisse au survol */
.cx-liste li{position:relative}
.cx-liste li::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;
  background:var(--rouge);transform:scaleX(0);transform-origin:left center;
  transition:transform .45s cubic-bezier(.22,.61,.36,1)}
.cx-liste li:hover::after{transform:scaleX(1)}
.cx-liste svg{transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.cx-liste li:hover svg{transform:translateX(2px) scale(1.1)}

/* ── l'heure de Montréal, discrète, qui bat ── */
.cx-pied{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.cx-heure{display:inline-flex;align-items:center;gap:7px;color:var(--clair-2);letter-spacing:.08em}
.cx-heure::before{content:"";width:6px;height:6px;border-radius:50%;background:#2ED9A0;
  animation:cx-battement 2.4s ease-in-out infinite}
@keyframes cx-battement{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}

/* ── le formulaire arrive à son tour ── */
.cx-boite > *{animation:cx-monte .62s cubic-bezier(.22,.61,.36,1) backwards}
.cx-boite > *:nth-child(1){animation-delay:.16s}
.cx-boite > *:nth-child(2){animation-delay:.22s}
.cx-boite > *:nth-child(3){animation-delay:.28s}
.cx-boite > *:nth-child(4){animation-delay:.34s}
.cx-boite > *:nth-child(5){animation-delay:.40s}
.cx-boite > *:nth-child(6){animation-delay:.46s}
.cx-boite > *:nth-child(7){animation-delay:.52s}
.cx-boite > *:nth-child(n+8){animation-delay:.58s}

/* ── les champs répondent ── */
.cx-champ{position:relative}
.cx-in{transition:border-color .18s,box-shadow .18s,background .18s}
/* Le filet du champ actif est marine, non rouge : sous un champ de saisie,
   le rouge se lit comme une erreur, pas comme une mise en avant. */
.cx-champ::after{content:"";position:absolute;left:1px;right:1px;bottom:0;height:2px;
  background:var(--marine);border-radius:0 0 9px 9px;
  transform:scaleX(0);transform-origin:center;transition:transform .32s cubic-bezier(.22,.61,.36,1)}
.cx-champ:focus-within::after{transform:scaleX(1)}
.cx-lbl{transition:color .18s}
.cx-champ:focus-within .cx-lbl{color:var(--marine)}

/* ── les boutons ── */
.cx-b{position:relative;overflow:hidden;transition:background .16s,border-color .16s,color .16s,transform .12s}
.cx-b:active:not(:disabled){transform:translateY(1px)}
.cx-b--premier::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.16);
  transform:scaleX(0);transform-origin:left center;transition:transform .45s cubic-bezier(.22,.61,.36,1)}
.cx-b--premier:hover:not(:disabled)::after{transform:scaleX(1)}
.cx-b > *{position:relative;z-index:1}

/* le bloc clé d'accès respire doucement pour attirer l'œil sans crier */
.cx-cle{transition:border-color .2s,box-shadow .2s}
.cx-cle:hover{border-color:var(--marine);box-shadow:0 6px 18px rgba(11,42,82,.09)}
.cx-cle-t svg{animation:cx-empreinte 3.6s ease-in-out infinite}
@keyframes cx-empreinte{0%,100%{opacity:1}50%{opacity:.5}}

/* ── respecter qui préfère le calme ── */
@media (prefers-reduced-motion: reduce){
  .cx-pistes path,.cx-noeuds circle,.cx-impulsion,.cx-entre,.cx-mot-mot,
  .cx-k::before,.cx-boite > *,.cx-heure::before,.cx-cle-t svg{
    animation:none!important;opacity:1!important;transform:none!important;
    stroke-dashoffset:0!important}
  .cx-impulsion{opacity:0!important}
  .cx-champ::after,.cx-b--premier::after,.cx-liste li::after{transition:none}
}

@media (max-width:900px){
  /* sur un téléphone, le décor reste mais s'efface derrière le texte */
  .cx-circuit{opacity:.55}
  .cx-titre{gap:0 .28em}
  .cx-pied{display:none}
}