/* ====================================================================
   LA PAGE DE CONNEXION
   --------------------------------------------------------------------
   Deux colonnes plein écran : le formulaire à gauche, les témoignages à
   droite, et une barre de pied fine en dessous.

   PAS DE BANDEAU NI DE PIED DE PAGE DU SITE ICI. Une page de connexion
   n'a qu'une chose à faire faire ; un menu n'y offrirait que des sorties.
   Le logo en haut à gauche suffit pour revenir à l'accueil.

   Feuille dédiée, chargée uniquement par /login : rien de ce qui suit ne
   peut déborder sur le reste du site.
   ==================================================================== */

/* CETTE PAGE NE CHARGE PLUS LA FEUILLE DU SITE — c'est elle qui traçait
   les deux rails verticaux. Elle apportait aussi `border-box`, dont tout
   ce qui suit dépend : une carte à 432 px avec 32 px de marge intérieure
   en mesurait 498 sans cette ligne. */
.cnx, .cnx *, .cnx *::before, .cnx *::after{ box-sizing:border-box; }

.cnx{
  --c-fond:#000000;
  --c-panneau:#0A0A0B;
  --c-carte:#111113;
  --c-bord:#2E2E2E;
  --c-trait:#1F1F1F;
  --c-encre:#F2F2F3;
  --c-encre-2:#A8A8AE;
  --c-encre-3:#7B7B7B;
  --c-police:"Segoe UI","Segoe UI Variable Text",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  background:var(--c-fond);
  color:var(--c-encre);
  font-family:var(--c-police);
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.cnx__page{
  flex:1;
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:0;
}

/* ---- Colonne gauche ---- */
.cnx__gauche{
  display:flex;
  flex-direction:column;
  padding:46px max(40px, 6vw) 40px;
}
.cnx__marque{
  display:inline-flex; align-items:center; gap:10px;
  color:var(--c-encre); text-decoration:none;
  font-size:22px; font-weight:600; letter-spacing:-.03em;
}
.cnx__marque img{ height:22px; width:auto; display:block; }

/* Le bloc de saisie occupe le centre : la page reste lisible que l'écran
   soit haut ou court. */
.cnx__bloc{ margin:auto 0; max-width:520px; width:100%; padding:48px 0; }

.cnx__titre{
  margin:0 0 10px;
  font-size:clamp(24px, 2.2vw, 30px);
  font-weight:600;
  letter-spacing:-.025em;
  color:var(--c-encre);
}
.cnx__sous{ margin:0 0 34px; font-size:15px; color:var(--c-encre-2); }
.cnx__sous a{ color:var(--c-encre); text-decoration:underline; text-underline-offset:3px; }
.cnx__sous strong{ color:var(--c-encre); font-weight:500; }

.cnx__erreur{
  margin:0 0 22px;
  padding:12px 14px;
  border:1px solid #5A2A2A;
  background:#1A0E0E;
  color:#FFB4B4;
  font-size:14px;
}

.cnx__label{ display:block; margin:0 0 8px; font-size:13.5px; color:var(--c-encre); }
.cnx__ligne{ display:flex; gap:10px; }
.cnx__champ{
  flex:1; min-width:0;
  background:var(--c-carte);
  border:1px solid var(--c-bord);
  border-radius:6px;
  padding:13px 14px;
  font-size:15px;
  font-family:inherit;
  color:var(--c-encre);
}
.cnx__champ::placeholder{ color:var(--c-encre-3); }
.cnx__champ:focus{ outline:none; border-color:var(--c-encre-2); }
.cnx__bouton{
  flex:0 0 auto;
  background:#333333;
  border:1px solid #333333;
  border-radius:6px;
  color:#FFFFFF;
  padding:13px 20px;
  font-size:15px;
  font-family:inherit;
  cursor:pointer;
  transition:background .18s ease;
}
.cnx__bouton:hover{ background:#3F3F46; }

.cnx__renvoi{ margin-top:16px; }
.cnx__renvoi button{
  background:none; border:0; padding:0;
  color:var(--c-encre-2); font-family:inherit; font-size:14px;
  text-decoration:underline; text-underline-offset:3px; cursor:pointer;
}

/* Le séparateur : un trait de chaque côté du mot, sans image. */
.cnx__ou{ display:flex; align-items:center; gap:14px; margin:26px 0; color:var(--c-encre-3); font-size:13px; }
.cnx__ou::before, .cnx__ou::after{ content:""; flex:1; height:1px; background:var(--c-trait); }

.cnx__google{
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:13px 18px;
  border:1px solid var(--c-bord);
  border-radius:6px;
  color:var(--c-encre);
  text-decoration:none;
  font-size:15px;
  transition:background .18s ease;
}
.cnx__google:hover{ background:var(--c-carte); }

.cnx__mentions{ margin:30px 0 0; font-size:12.5px; line-height:1.6; color:var(--c-encre-3); }
.cnx__mentions a{ color:var(--c-encre-2); }

/* L'encart démo, en bas de colonne comme sur la maquette. */
.cnx__demo{
  border:1px solid var(--c-bord);
  border-radius:10px;
  padding:20px 22px;
  max-width:520px;
  display:flex; align-items:center; gap:22px;
}
.cnx__demo div{ display:grid; gap:4px; min-width:0; }
.cnx__demo strong{ font-size:16px; font-weight:600; color:var(--c-encre); }
.cnx__demo span{ font-size:14px; color:var(--c-encre-2); }
.cnx__demoLien{
  margin-left:auto; flex:0 0 auto;
  border:1px solid var(--c-bord); border-radius:6px;
  padding:9px 14px; font-size:14px;
  color:var(--c-encre); text-decoration:none;
}
.cnx__demoLien:hover{ background:var(--c-carte); }

/* ---- Colonne droite ----
   ELLE TOUCHE LE BORD DE L'ÉCRAN. Aucun retrait : ce sont les bords du
   panneau qui coupent les cartes voisines, et cette coupure est ce qui
   dit qu'il y en a d'autres. Un retrait les aurait fait flotter au
   milieu, et le panneau aurait eu l'air d'une boîte posée là. */
.cnx__droite{
  position:relative;
  background:var(--c-panneau);
  overflow:hidden;
  display:flex;
  align-items:center;
  padding:0;
  min-width:0;
}
/* La trame de points, en motif CSS : pas d'image à charger, et elle
   s'adapte à n'importe quelle taille de panneau. */
.cnx__trame{
  position:absolute; inset:0;
  background-image:radial-gradient(circle at center, #1C1C1F 1px, transparent 1px);
  background-size:22px 22px;
  opacity:.85;
}

/* LA PISTE PORTE TOUTES LES CARTES CÔTE À CÔTE, et c'est elle qui bouge.
   Un carrousel qui masquerait les autres cartes ne montrerait qu'un
   encart isolé ; ici on voit toujours la suivante entamée au bord. */
.cnx__cartes{
  position:relative;
  display:flex; align-items:center; gap:26px;
  transition:transform .55s cubic-bezier(.4, 0, .2, 1);
  will-change:transform;
}
.cnx__carte{
  flex:0 0 auto;
  width:clamp(280px, 30vw, 560px);
  margin:0;
  background:var(--c-carte);
  border:1px solid var(--c-trait);
  border-radius:12px;
  padding:30px 32px;
  /* Les voisines restent lisibles en creux : assez pour qu'on devine du
     texte, pas assez pour qu'on se mette à le lire. */
  opacity:.3;
  transition:opacity .45s ease, border-color .45s ease;
}
.cnx__carte.est-avant{ opacity:1; border-color:var(--c-bord); }
.cnx__carte blockquote{
  margin:0;
  font-size:17.5px;
  line-height:1.6;
  color:var(--c-encre);
}
.cnx__carte figcaption{ display:flex; align-items:center; gap:12px; margin-top:30px; }
.cnx__avatar{
  width:38px; height:38px; border-radius:50%;
  background:#26262A; border:1px solid var(--c-bord); flex:0 0 auto;
}
.cnx__carte figcaption strong{ display:block; font-size:14px; font-weight:600; color:var(--c-encre); }
.cnx__carte figcaption small{ display:block; font-size:12.5px; color:var(--c-encre-3); }

/* ---- Pied ---- */
.cnx__pied{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px max(40px, 6vw);
  border-top:1px solid var(--c-trait);
  font-size:13px;
}
.cnx__pied a{ color:var(--c-encre-2); text-decoration:none; }
.cnx__pied a:hover{ color:var(--c-encre); }
.cnx__pied div{ display:flex; align-items:center; gap:22px; color:var(--c-encre-3); }

@media (max-width:900px){
  .cnx__page{ grid-template-columns:1fr; }
  /* Sur téléphone, les témoignages passeraient avant le formulaire s'ils
     restaient dans le flux : on les retire plutôt que de faire défiler
     l'utilisateur pour atteindre ce qu'il est venu faire. */
  .cnx__droite{ display:none; }
  .cnx__gauche{ padding:34px 24px 28px; }
  .cnx__bloc{ padding:34px 0; }
  .cnx__pied{ flex-direction:column; gap:10px; align-items:flex-start; padding:16px 24px; }
}
@media (max-width:600px){
  .cnx__demo{ flex-direction:column; align-items:flex-start; gap:14px; }
  .cnx__demoLien{ margin-left:0; }
}
@media (max-width:520px){
  .cnx__ligne{ flex-direction:column; }
  .cnx__bouton{ width:100%; }
}