/* ============================================================================
   CONNEXION — la feuille partagée et la page /login
   ----------------------------------------------------------------------------
   Repris du site de production, où ce dessin est validé : la modale qui devient
   une feuille remontant du bas sur téléphone, les boutons de fournisseur avec
   leurs logos officiels, la salle en deux panneaux de la page de connexion.
   Les GABARITS sont déjà identiques entre production et atelier (vérifié fichier
   par fichier) : seules les règles manquaient ici, les deux pages s'affichant
   sans aucun style.

   CE QUI CHANGE : la version d'origine peint son panneau d'accroche en nuit,
   avec un halo bleu soutenu et un titre blanc. L'atelier est clair de bout en
   bout — le panneau reprend donc la bande grise du système, son halo passe de
   30 % à 10 % et le titre revient à l'encre. La composition, les mesures, les
   rythmes et les logos ne bougent pas.

   Les couleurs ne sont plus écrites en dur : chaque valeur d'origine a été
   traduite en jeton du socle (`--bg-card` → `--c-surface`, `--muted-l` →
   `--c-ink-2`, `--beam` → `--c-action`…), pour que la connexion suive le thème
   comme le reste du site.
   ========================================================================== */

/* --- 1 · La feuille de connexion, partagée par tout le site ----------------- */
/* Elle s'ouvre par-dessus la fenêtre des tarifs : « S'abonner » sans être
   connecté doit montrer la connexion, pas la laisser derrière. */
/* ZONE RÉELLEMENT VUE — voir app.js. Sur iPhone un élément fixé se place dans le
   cadre de mise en page, qui passe sous la barre d'adresse en haut et sous la
   barre d'outils en bas : une couche à `inset:0` glisse dessous, et le bouton de
   fermeture avec elle. Les deux mesures valent 0 partout ailleurs. */
.modal-overlay{position:fixed;top:var(--klat-vue-haut,0px);bottom:var(--klat-dock-bas,0px);
  left:0;right:0;z-index:1000;display:flex;
  align-items:center;align-items:safe center;justify-content:center;padding:var(--s-5);
  background:var(--c-scrim);backdrop-filter:blur(4px);overflow-y:auto;overscroll-behavior:contain}
/* 9700 : AU-DESSUS DE TOUT (11/09/2026, constat du propriétaire). La fenêtre des
   offres est à 9600 et les feuilles de vente à 9400 : à 9500, la connexion demandée
   depuis la fenêtre s'ouvrait DERRIÈRE elle — l'utilisateur voyait les offres, ne
   pouvait rien saisir, et son clic semblait sans effet. Une demande de connexion est
   toujours la dernière surface ouverte : elle passe donc devant. */
.modal-overlay.is-auth{z-index:9700}
.modal-overlay.is-sheet{z-index:8500}
/* Le geste reste DANS la carte : sans confinement, arrivé en bout de course il
   pousse l'écran du dessous (12/09/2026, constat du propriétaire). */
.modal-card{position:relative;width:100%;max-width:440px;max-height:100%;
  overflow-y:auto;overscroll-behavior:contain;padding:var(--s-6);
  border:1px solid var(--c-line);border-radius:var(--r-3);
  background:var(--c-surface);color:var(--c-ink)}
.modal-card h2{font-size:var(--fs-4);font-weight:var(--fw-title);
  line-height:var(--lh-tight);margin-bottom:var(--s-2)}
.modal-card .sub{font-size:var(--fs-1);color:var(--c-ink-2);
  line-height:var(--lh-body)}
.modal-close{position:absolute;top:var(--s-3);inset-inline-end:var(--s-4);
  display:grid;place-items:center;width:36px;height:36px;padding:0;cursor:pointer;
  border:0;border-radius:var(--r-2);background:none;color:var(--c-ink-2);
  font-size:23px;line-height:1}
.modal-close:hover{background:var(--c-surface-2);color:var(--c-ink)}
/* La poignée n'existe que sur téléphone, où la carte devient une feuille. */
.modal-sheet-handle{display:none;flex-shrink:0;width:40px;height:4px;
  margin:0 auto var(--s-3);border-radius:var(--r-pill);background:var(--c-line)}
@media (max-width:640px){
  .modal-overlay.is-auth,.modal-overlay.is-sheet{align-items:flex-end;padding:0}
  /* `:not(.kf-sort)` : pendant la sortie (chantier D, section 0 de vente.css),
     cette règle ne doit pas se disputer l'animation avec celle du conteneur
     commun — elles ont la même spécificité, et c'est alors l'ORDRE des feuilles
     qui trancherait. Écartée explicitement, le résultat ne dépend plus de rien. */
  .modal-overlay.is-auth:not(.kf-sort) .modal-card,
  .modal-overlay.is-sheet:not(.kf-sort) .modal-card{
    /* 92 % du VOILE, jamais 92vh : `vh` vaut la fenêtre barres repliées, donc la
       carte descendait sous la barre du navigateur et s'y faisait mordre. Le voile,
       lui, est déjà borné à la zone réellement vue (--klat-vue-haut/--klat-dock-bas).
       Même règle que la feuille de vente (vente.css). */
    max-width:100%;max-height:92%;padding:var(--s-2) var(--s-5) var(--s-5);
    border-radius:24px 24px 0 0;
    animation:modal-sheet-up .3s cubic-bezier(.22,1,.36,1)}
  .modal-overlay.is-auth .modal-sheet-handle,
  .modal-overlay.is-sheet .modal-sheet-handle{display:block}
  .modal-overlay.is-auth .modal-close,
  .modal-overlay.is-sheet .modal-close{top:var(--s-4)}
  /* Ancrée en bas : elle s'en va par le bas (vente.css, section 0). La
     spécificité (0,4,0) passe devant la règle d'entrée quel que soit l'ordre
     de chargement des feuilles — aucun !important. */
  .modal-overlay.is-auth.kf-sort > .kfeuille-panneau,
  .modal-overlay.is-sheet.kf-sort > .kfeuille-panneau{animation-name:kf-sortie-bas}}
@keyframes modal-sheet-up{from{transform:translateY(100%)}to{transform:translateY(0)}}
/* Mouvement refusé : la carte apparaît sans glisser. Les deux autres coquilles
   (.klsheet, .klpm-panel) portaient déjà cette garde, celle-ci l'avait perdue. */
@media (prefers-reduced-motion:reduce){
  .modal-overlay.is-auth .modal-card,
  .modal-overlay.is-sheet .modal-card{animation:none}
}

/* --- 2 · Boutons de fournisseur -------------------------------------------- */
/* Google, Apple, Microsoft et Facebook, avec leurs logos officiels en couleurs
   de marque : ces SVG sont déjà dans les gabarits, ils n'ont jamais eu de
   règles pour les tenir. Hauteur 54 px — la mesure d'origine. */
.btn-google,.btn-social{display:flex;align-items:center;justify-content:center;
  gap:var(--s-2);width:100%;height:54px;padding:var(--s-3);cursor:pointer;
  border:1.5px solid var(--c-line-strong);border-radius:var(--r-2);
  background:var(--c-surface);color:var(--c-ink);
  font-family:inherit;font-size:var(--fs-2);font-weight:var(--fw-ui);
  box-shadow:var(--sh-1);
  transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
.btn-google:hover,.btn-social:hover{border-color:var(--c-action);
  background:var(--c-surface-2)}
.btn-google:focus-visible,.btn-social:focus-visible{outline:2px solid var(--c-focus);
  outline-offset:2px}
.btn-google:disabled,.btn-social:disabled{opacity:.6;cursor:not-allowed}
.btn-google svg,.btn-social svg{flex-shrink:0}
.btn-google + .btn-social,.btn-social + .btn-social{margin-top:var(--s-2)}
.google-cgu-note{margin:var(--s-2) 0 0;font-size:var(--fs-0);
  color:var(--c-ink-2);text-align:center;line-height:var(--lh-body)}

/* Rond d'accroche affiché quand la feuille s'ouvre depuis un moment précis
   (« votre vidéo est prête ») plutôt que depuis un bouton « Connexion ». */
.auth-context-icon{display:grid;place-items:center;width:44px;height:44px;
  margin:0 auto var(--s-3);border-radius:var(--r-pill);
  background:var(--c-action-soft)}
.auth-context-icon svg{width:22px;height:22px;color:var(--c-action)}

/* --- 3 · Bandeau d'erreur, deux tons ---------------------------------------- */
/* `is-blocked` = fenêtre surgissante bloquée par le navigateur : ce n'est pas
   une erreur de la personne, le ton est celui de l'avertissement. */
.auth-banner{display:flex;align-items:flex-start;gap:var(--s-2);
  margin:var(--s-4) 0;padding:var(--s-3);border-radius:var(--r-2);
  font-size:var(--fs-1);line-height:var(--lh-body);text-align:start}
.auth-banner svg{flex:none;width:18px;height:18px;margin-top:2px}
.auth-banner p{margin:0}
.auth-banner.is-error{background:var(--c-danger-soft);
  border:1px solid color-mix(in srgb,var(--c-danger) 35%,transparent);
  color:var(--c-danger)}
.auth-banner.is-blocked{background:var(--c-warn-soft);
  border:1px solid color-mix(in srgb,var(--c-warn) 35%,transparent);
  color:var(--c-warn)}

/* --- 4 · Connexion en cours ------------------------------------------------- */
.auth-connecting{display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:var(--s-8) 0 var(--s-6);text-align:center}
.auth-connecting-spinner{width:36px;height:36px;border-radius:50%;
  border:3px solid var(--c-line);border-top-color:var(--c-action);
  animation:auth-spin .7s linear infinite}
@media (prefers-reduced-motion:reduce){
  .auth-connecting-spinner{animation-duration:2.4s}}
@keyframes auth-spin{to{transform:rotate(360deg)}}
.auth-connecting p.title{margin:var(--s-4) 0 0;font-size:var(--fs-2);
  font-weight:var(--fw-title);color:var(--c-ink)}
.auth-connecting p.sub{margin:var(--s-1) 0 0;font-size:var(--fs-1);
  color:var(--c-ink-2)}

/* --- 5 · La page /login : une salle, deux panneaux -------------------------- */
.proj .auth-stage{position:relative;overflow:hidden;
  padding:var(--s-7) 0 var(--s-9)}
/* Les halos d'origine sont à 34 % et 14 % de bleu sur fond nuit. En clair, la
   même intensité écraserait la page : 7 % et 4 %, mesurés pour rester une
   présence et non une couleur. */
.proj .auth-stage::before{content:"";position:absolute;inset:0;
  pointer-events:none;
  background:radial-gradient(1100px 640px at 18% -18%,color-mix(in srgb,var(--c-action) 7%,transparent),transparent 62%),
    radial-gradient(700px 460px at 88% 112%,color-mix(in srgb,var(--c-action) 4%,transparent),transparent 60%)}
.proj .auth-stage .wrap{position:relative;
  width:100%;max-width:calc(var(--w-content) + 2*var(--gutter));
  margin-inline:auto;padding-inline:var(--gutter)}
.proj .auth-hall{display:grid;max-width:1010px;margin:0 auto;
  border:1px solid var(--c-line);border-radius:var(--r-3);overflow:hidden;
  box-shadow:var(--sh-2)}
@media (min-width:880px){
  .proj .auth-hall{grid-template-columns:5fr 6fr}}

/* Panneau d'accroche — nuit en production, bande grise du système ici. */
.proj .auth-beam{position:relative;display:flex;flex-direction:column;
  justify-content:center;padding:var(--s-8) var(--s-7);
  background:var(--c-bg-2);border-bottom:1px solid var(--c-line)}
@media (min-width:880px){
  .proj .auth-beam{border-bottom:0;border-inline-end:1px solid var(--c-line)}}
.proj .auth-beam::before{content:"";position:absolute;inset:0;
  pointer-events:none;
  background:radial-gradient(560px 420px at 22% 0%,color-mix(in srgb,var(--c-action) 10%,transparent),transparent 65%)}
.proj .auth-beam > *{position:relative}
.proj .ab-icon{width:38px;height:auto;margin-bottom:var(--s-5)}
.proj .ab-title{font-size:clamp(1.5rem,2.4vw,2rem);font-weight:var(--fw-title);
  letter-spacing:var(--ls-title);line-height:var(--lh-tight);
  color:var(--c-ink);margin-bottom:var(--s-4)}
.proj .ab-lead{font-size:var(--fs-2);line-height:var(--lh-body);
  color:var(--c-ink-2);max-width:340px}
.proj .auth-beam .hero-sur{display:block;margin-bottom:var(--s-3);
  font-size:var(--fs-0);font-weight:var(--fw-ui);letter-spacing:.08em;
  text-transform:uppercase;color:var(--c-ink-2)}
.proj .auth-beam .reassure{display:grid;gap:var(--s-2);margin-top:var(--s-5);
  font-size:var(--fs-1);color:var(--c-ink-2)}
.proj .auth-beam .reassure > div{display:flex;align-items:center;gap:var(--s-2)}
.proj .auth-beam .reassure svg{flex:none;width:16px;height:16px;
  color:var(--c-action)}

/* Carte du formulaire — la zone de décision, toujours sur surface pleine. */
.proj .auth-card{background:var(--c-surface);color:var(--c-ink);
  padding:var(--s-8) var(--s-7) var(--s-6)}
.proj h2.auth-title{font-size:var(--fs-5);font-weight:var(--fw-title);
  letter-spacing:var(--ls-title);line-height:var(--lh-tight);
  color:var(--c-ink);margin-bottom:var(--s-5)}
.proj .auth-sub{font-size:var(--fs-1);color:var(--c-ink-2);
  line-height:var(--lh-body);margin:calc(-1 * var(--s-3)) 0 var(--s-5)}

/* Boutons de fournisseur de la page : même dessin que ceux de la feuille. */
.proj .abtn{display:flex;align-items:center;justify-content:center;gap:var(--s-2);
  width:100%;min-height:48px;padding:0 var(--s-4);cursor:pointer;
  border:1.5px solid var(--c-line-strong);border-radius:var(--r-2);
  background:var(--c-surface);color:var(--c-ink);
  font-family:inherit;font-size:var(--fs-2);font-weight:var(--fw-ui);
  transition:border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.proj .abtn + .abtn{margin-top:var(--s-2)}
.proj .abtn:hover{border-color:var(--c-action);color:var(--c-action)}
.proj .abtn:focus-visible{outline:2px solid var(--c-focus);outline-offset:2px}
.proj .abtn svg{flex:none}

.proj .auth-email-toggle{display:block;width:100%;margin-top:var(--s-3);
  padding:var(--s-2) 0 0;cursor:pointer;border:0;background:none;
  font-family:inherit;font-size:var(--fs-1);font-weight:var(--fw-ui);
  color:var(--c-action);text-align:center}
.proj .auth-email-toggle:hover{text-decoration:underline}
.proj .auth-email-toggle:focus-visible{outline:2px solid var(--c-focus);
  outline-offset:2px}
.proj .auth-div{display:flex;align-items:center;gap:var(--s-3);
  margin:var(--s-4) 0 var(--s-3);font-size:var(--fs-0);letter-spacing:.08em;
  text-transform:uppercase;color:var(--c-ink-2)}
.proj .auth-div::before,.proj .auth-div::after{content:"";flex:1;height:1px;
  background:var(--c-line)}
.proj .auth-note{margin-bottom:var(--s-4);font-size:var(--fs-1);
  line-height:var(--lh-body);color:var(--c-ink-2)}

/* Champ e-mail et mot de passe : l'icône à gauche, l'œil à droite, le texte
   entre les deux — d'où les 40 px et 44 px de retrait. */
.proj .field{position:relative;margin-bottom:var(--s-3)}
.proj .field > svg{position:absolute;inset-inline-start:14px;top:50%;
  transform:translateY(-50%);width:18px;height:18px;
  color:var(--c-ink-2);pointer-events:none}
.proj .field input{width:100%;min-height:48px;padding:0 44px 0 40px;
  border:1.5px solid var(--c-line-strong);border-radius:var(--r-2);
  background:var(--c-bg-2);color:var(--c-ink);
  font-family:inherit;font-size:var(--fs-2)}
.proj .field input::placeholder{color:var(--c-ink-3)}
.proj .field input:focus{outline:2px solid var(--c-focus);outline-offset:1px;
  background:var(--c-surface)}
.proj .field-eye{position:absolute;inset-inline-end:6px;top:50%;
  transform:translateY(-50%);display:flex;align-items:center;
  justify-content:center;width:36px;height:36px;cursor:pointer;
  border:0;border-radius:var(--r-2);background:none;color:var(--c-ink-2)}
.proj .field-eye:hover{color:var(--c-ink)}
.proj .field-eye:focus-visible{outline:2px solid var(--c-focus)}
.proj .field-eye svg{width:18px;height:18px}
.proj .auth-hint{margin:calc(-1 * var(--s-1)) 0 var(--s-3);
  font-size:var(--fs-0);color:var(--c-ink-2)}
.proj .auth-forgot{margin:var(--s-1) 0 0;text-align:end}
.proj .auth-forgot a{font-size:var(--fs-1);font-weight:var(--fw-ui);
  color:var(--c-action);text-decoration:none}
.proj .auth-forgot a:hover{text-decoration:underline}
.proj .auth-cgu{margin-top:var(--s-4);font-size:var(--fs-0);
  line-height:var(--lh-body);color:var(--c-ink-2);text-align:center}
.proj .auth-alt{margin-top:var(--s-5);padding-top:var(--s-4);
  border-top:1px solid var(--c-line);text-align:center;
  font-size:var(--fs-1);color:var(--c-ink-2)}
.proj .auth-alt a{font-weight:var(--fw-ui);color:var(--c-action);
  text-decoration:none}
.proj .auth-alt a:hover{text-decoration:underline}

/* --- 6 · Boutons de la page ------------------------------------------------- */
.proj .btn{display:inline-flex;align-items:center;justify-content:center;
  gap:var(--s-2);min-height:var(--control-h);padding-inline:var(--s-5);
  cursor:pointer;border:1px solid transparent;border-radius:var(--r-2);
  font-family:inherit;font-size:var(--fs-1);font-weight:var(--fw-ui);
  text-decoration:none;
  transition:background var(--t-fast) var(--ease)}
.proj .btn-beam{background:var(--c-action);color:var(--c-on-action)}
.proj .btn-beam:hover{background:var(--c-action-hover)}
.proj .btn-full{width:100%}