/* ====================================================================
   LA PAGE DE CONNEXION
   --------------------------------------------------------------------
   Deux colonnes plein écran : le formulaire sur fond blanc à gauche, une
   photo à droite avec les témoignages posés dessus, 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 mot en haut à gauche suffit pour revenir à l'accueil — et il tombe
   exactement là où le bandeau pose le sien.

   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 PAS LA FEUILLE DU SITE, d'où cette ligne : tout ce
   qui suit suppose `border-box`. Sans elle, un champ à 100 % plus ses
   marges intérieures déborde de sa colonne. */
.cnx, .cnx *, .cnx *::before, .cnx *::after{ box-sizing:border-box; }

/* ---- LE DOCUMENT NE REBONDIT PAS ----
   Sur iOS, tirer la page au-delà de sa fin la fait revenir en élastique et
   découvre le fond du navigateur — sur un écran de connexion, cela donne
   l'impression que quelque chose a lâché. Trois lignes s'y opposent :
   `overscroll-behavior` coupe le rebond et l'enchaînement au parent, la
   hauteur est fixée à la fenêtre, et c'est le bloc intérieur qui défile —
   jamais le document. `100dvh` suit la barre d'adresse quand elle se
   rétracte, là où `100vh` laisserait un trou. */
html{
  height:100%;
  overscroll-behavior:none;
  /* Le zoom automatique du texte en mode paysage change les tailles sans
     prévenir : ce que l'on a mesuré ici n'est plus ce qui s'affiche. */
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

.cnx{
  --c-fond:#FFFFFF;
  --c-carte:#F6F6F7;
  --c-bord:#E4E4E7;
  --c-bord-fort:#D2D2D8;
  --c-encre:#131315;
  --c-encre-2:#56565E;
  --c-encre-3:#82828B;
  --c-police:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  background:var(--c-fond);
  color:var(--c-encre);
  font-family:var(--c-police);
  margin:0;
  height:100dvh;
  min-height:100dvh;
  overflow:hidden;
  overscroll-behavior:none;
  display:flex;
  flex-direction:column;
}

/* C'est LUI qui défile, et lui seul. */
.cnx__page{
  flex:1;
  min-height:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

/* ---- Colonne gauche ---- */
.cnx__gauche{
  display:flex;
  flex-direction:column;
  background:var(--c-fond);
  /* 16,5 px en haut et 16 sur le côté : la position du mot dans la barre du
     site sur téléphone, relevée sur la page servie. Les paliers plus larges
     sont plus bas. */
  padding:16.5px 16px 28px;
}
.cnx__marque{
  align-self:flex-start;
  color:var(--c-encre); text-decoration:none;
  font-family:'Montserrat',var(--c-police);
  font-size:21px; font-weight:600; letter-spacing:-.095em;
  /* `line-height:1` comme dans le bandeau : sans elle la boîte du mot fait
     22,5 px au lieu de 19, et le mot ne se pose pas sur la même ligne. */
  line-height:1;
}

/* LA MARQUE TOMBE OÙ CELLE DU BANDEAU TOMBE, palier par palier — ce sont
   ceux du site, relevés sur la page servie et non lus dans la feuille :
   768 px pour le passage au bandeau de bureau, 992 pour son corps de 19. */
@media (min-width:768px){
  /* (64 − 20) / 2 : le mot de 20 px, centré comme dans la barre du site. */
  .cnx__gauche{ padding:22px 32px 40px; }
  .cnx__pied{ padding-left:32px; padding-right:32px; }
  .cnx__marque{ font-size:20px; }
}
@media (min-width:992px){
  .cnx__marque{ font-size:22px; }
  /* (64 − 22) / 2 : le mot grandit, son sommet remonte d'autant. */
  .cnx__gauche{ padding-top:21px; }
}
/* Au-delà de 1600, le bandeau centre son contenu : `(largeur − 1600)/2 + 32`.
   Cette colonne fait la moitié de la page, donc « 200 % » y vaut la largeur
   de la page — la même expression, dite depuis l'endroit où l'on est.
   `200%` ET NON `100vw` : l'unité de fenêtre compte la barre de défilement,
   et quelques pixels suffisent à ce que le mot ne retombe pas au même
   endroit d'une page à l'autre. */
@media (min-width:901px){
  .cnx__gauche{ padding-left:max(32px, calc((200% - 1600px) / 2 + 32px)); }
  .cnx__pied{   padding-left:max(32px, calc((100% - 1600px) / 2 + 32px)); }
}

/* 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:40px 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 #F0C8C4;
  background:#FDECEA;
  color:#B3261E;
  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; }

/* ---- LES CHAMPS NE FONT PAS ZOOMER LE TÉLÉPHONE ----
   Sous 16 px, iOS agrandit la page à la mise au point du champ et ne la
   réduit pas en sortant : la mise en page se retrouve décalée pour le
   reste de la visite. Seize pixels, et il n'a plus de raison d'intervenir.
   C'est la raison d'être de cette taille, pas un choix d'esthétique — ne
   pas la baisser. */
.cnx__champ, .cnx__bouton, .cnx__google{ font-size:16px; }

.cnx__champ{
  flex:1; min-width:0;
  background:var(--c-fond);
  border:1px solid var(--c-bord-fort);
  border-radius:8px;
  padding:13px 14px;
  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); }
.cnx__bouton{
  flex:0 0 auto;
  background:var(--c-encre);
  border:1px solid var(--c-encre);
  border-radius:8px;
  color:#FFFFFF;
  padding:13px 22px;
  font-family:inherit;
  cursor:pointer;
  transition:background .18s ease;
}
.cnx__bouton:hover{ background:#2C2C31; }

.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-bord); }

.cnx__google{
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:13px 18px;
  border:1px solid var(--c-bord-fort);
  border-radius:8px;
  color:var(--c-encre);
  text-decoration:none;
  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 : le texte à gauche, le lien à droite. */
.cnx__demo{
  border:1px solid var(--c-bord);
  border-radius:12px;
  padding:20px 22px;
  max-width:520px;
  display:flex; align-items:center; gap:22px;
  background:var(--c-carte);
}
.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-fort); border-radius:8px;
  padding:9px 14px; font-size:14px;
  background:var(--c-fond);
  color:var(--c-encre); text-decoration:none;
}
.cnx__demoLien:hover{ background:var(--c-carte); }

/* ---- Colonne droite : la photo, et les témoignages posés dessus ----
   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. */
.cnx__droite{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  padding:0;
  min-width:0;
  background:#1A1512 url("/assets/studio-home-yoga.jpg") center / cover no-repeat;
}
/* UN VOILE, ET IL SERT À QUELQUE CHOSE. La photo est chaude et inégale :
   selon l'endroit où tombe une carte, son ombre portée disparaît dans un
   fond clair ou s'y perd. Le voile ramène toute la surface dans la même
   plage sombre, et les cartes blanches s'en détachent partout. */
.cnx__trame{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,16,14,.46) 0%, rgba(20,16,14,.30) 45%, rgba(20,16,14,.52) 100%);
}

/* LA PISTE PORTE TOUTES LES CARTES CÔTE À CÔTE, et c'est elle qui bouge.
   Un carrousel qui masquerait les autres 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;
  /* La mesure se prend sur la MOITIÉ DROITE de l'écran, pas sur l'écran
     entier : une largeur en `vw` donnerait une carte occupant l'essentiel
     du panneau, et les voisines n'auraient plus de quoi dépasser. */
  width:clamp(280px, 30vw, 560px);
  margin:0;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(255,255,255,.7);
  border-radius:14px;
  padding:30px 32px;
  box-shadow:0 18px 50px rgba(0,0,0,.22);
  opacity:.42;
  transition:opacity .45s ease;
}
.cnx__carte.est-avant{ opacity:1; }
.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:#DEDEE2; 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{
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px;
  border-top:1px solid var(--c-bord);
  background:var(--c-fond);
  font-size:13px;
  /* L'encoche du bas sur iPhone : sans cette réserve, la barre passe sous
     le trait d'accueil. */
  padding-bottom:calc(16px + env(safe-area-inset-bottom, 0px));
}
.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, la photo passerait avant le formulaire si elle restait
     dans le flux : on la retire plutôt que de faire défiler l'utilisateur
     jusqu'à ce qu'il est venu faire. */
  .cnx__droite{ display:none; }
  .cnx__bloc{ padding:34px 0; }
  .cnx__pied{ flex-direction:column; gap:10px; align-items:flex-start; }
}
@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%; }
}