/* ================================================================
   REBOUNDLY — auth.css
   Feuille dédiée aux deux pages d'entrée : connexion.html et
   inscription.html.

   Pourquoi une feuille à part plutôt que style.css : ces pages n'ont
   ni nav, ni cartes, ni modales. Elles partagent le vocabulaire visuel
   (sable/brique, Gothic Neo/SF Pro) et rien d'autre — les
   faire dépendre du CSS de l'app obligerait à neutraliser la moitié de
   ses règles.
   ================================================================ */

:root{
  /* fonds */
  --sable:#EDDCD0;
  --surface:#FFFFFF;
  --surface-2:#F7EFE8;
  --bordure:#DCC9BB;
  --bordure-forte:#C9B3A2;
  /* textes */
  --encre:#33313F;
  --encre-2:#48465A;
  --sourdine:#5E5A69;
  /* accent unique — brique = action ; brique-text = titres sur sable (AA) */
  --brique:#C52F3E;
  --brique-hover:#A32330;
  --brique-text:#9B2330;
  --brique-voile:#F9E7E6;
  /* statuts : lagune = « a répondu », le rebound */
  --lagune:#2892A9;
  --repondu:#2892A9;
  --repondu-voile:#D7EEF3;
  --attente:#7A4F14;
  --attente-voile:#F5EADA;
  --stoppe:#5E5A69;
  --stoppe-voile:#EFEBE9;
  /* typo — SF Pro Display (titres) + SF Pro Text (corps/UI). Polices système.
     Gothic Neo n’est pas en tête : sa coupe Heavy n’a pas le latin étendu (é, ç, è…). */
  --display:"SF Pro Display","SF Pro Text",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --serif:var(--display);
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  /* formes */
  --r-card:10px;
  --r-btn:8px;
  --r-ctl:8px;
  --r-badge:6px;
  --ombre:0 1px 2px rgba(51,49,63,.05);
  --sidebar-w:216px;

  /* alias — anciens noms, plus aucune hex hors palette */
  --ink:var(--encre);
  --ink-deep:var(--encre);
  --ink-light:var(--encre-2);
  --paper:var(--sable);
  --paper-dim:var(--surface-2);
  --card:var(--surface);
  --field:var(--surface);
  --gold:var(--brique);
  --gold-dim:var(--brique-hover);
  --gold-text:var(--brique);
  --rust:var(--brique-hover);
  --moss:var(--repondu);
  --text-muted:var(--sourdine);
  --text-on-ink:var(--surface);
  --text-on-ink-dim:var(--sourdine);
  --line:var(--bordure);
  --line-soft:var(--bordure);
  --hover-wash:var(--surface-2);

  --ease:cubic-bezier(.22,.9,.24,1);
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}
body{
  font-family:var(--sans);
  font-size:16px;
  background:var(--sable);
  color:var(--encre);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1{
  font-family:var(--display);font-weight:900;letter-spacing:-.01em;line-height:1.05;
}
h2{
  font-family:var(--display);font-weight:700;letter-spacing:-.005em;line-height:1.15;
}
h3{font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:0;line-height:1.25;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;}
.hidden{display:none!important;}
:focus-visible{outline:2px solid var(--brique);outline-offset:2px;}

/* ---- structure : formulaire à gauche, preuve à droite ----
   Le formulaire occupe la colonne de gauche parce que c'est là que
   l'œil arrive et que c'est la seule chose à faire sur cette page.
   Le panneau de droite rappelle à quoi on s'inscrit ; il disparaît
   en premier quand la place manque. */
.auth-layout{display:grid;grid-template-columns:1fr 1fr;min-height:100%;}

/* ---- colonne formulaire ---- */
.auth-form-side{
  background:var(--sable);
  display:flex;flex-direction:column;
  padding:40px clamp(24px,5vw,72px);
  overflow-y:auto;
}
.auth-brand{display:inline-flex;align-items:center;padding:16px 0;}
.auth-brand img{display:block;width:140px;height:45px;}

.auth-body{flex:1;display:flex;flex-direction:column;justify-content:center;padding:48px 0;}
.auth-inner{width:100%;max-width:400px;margin:0 auto;}

.auth-kicker{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-weight:500;font-size:13px;letter-spacing:0;text-transform:uppercase;color:var(--sourdine);margin-bottom:18px;}
.auth-inner h1{font-size:clamp(32px,3.4vw,48px);line-height:1.05;letter-spacing:-.01em;margin-bottom:12px;max-width:17ch;}
.auth-inner h1 em{font-style:italic;font-weight:900;color:var(--brique-text);}
.auth-lead{font-size:16px;color:var(--encre-2);line-height:1.6;margin-bottom:32px;max-width:62ch;}

/* ---- consentement CGU (inscription uniquement) ----
   Juste avant le submit email : emplacement habituel. Google vérifie
   la même case via cguAccepteeOuBloque() avant de continuer. */
.auth-consent{display:flex;align-items:flex-start;gap:10px;margin:4px 0 18px;cursor:pointer;}
.auth-consent input{margin-top:2px;flex-shrink:0;width:22px;height:22px;accent-color:var(--brique);cursor:pointer;}
.auth-consent span{font-size:13px;color:var(--sourdine);line-height:1.5;}
.auth-consent a{color:var(--brique);text-decoration:underline;text-underline-offset:2px;}

/* ---- boutons ---- */
.btn-google{
  width:100%;display:flex;align-items:center;justify-content:center;gap:12px;
  background:var(--surface);color:var(--encre);border:1px solid var(--bordure-forte);
  font-family:var(--sans);font-size:15px;font-weight:600;line-height:1;padding:12px 20px;border-radius:var(--r-btn);cursor:pointer;
  transition:background .14s ease,border-color .14s ease;
}
.btn-google:hover{background:var(--surface-2);border-color:var(--bordure-forte);}
.btn-google svg{width:18px;height:18px;flex-shrink:0;}

.btn-submit{
  width:100%;background:var(--brique);color:var(--surface);
  font-family:var(--sans);font-size:15px;font-weight:600;line-height:1;padding:12px 20px;border-radius:var(--r-btn);border:1px solid transparent;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:10px;
  transition:background .14s ease,border-color .14s ease;
}
.btn-submit:hover:not(:disabled){background:var(--brique-hover);}
.btn-submit:disabled{opacity:.45;cursor:not-allowed;}
.btn-submit .spin{
  width:15px;height:15px;border-radius:50%;flex-shrink:0;
  border:2px solid var(--brique-voile);border-top-color:var(--surface);
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

.auth-sep{display:flex;align-items:center;gap:14px;margin:26px 0;font-family:var(--sans);font-weight:500;font-size:13px;letter-spacing:0;text-transform:none;color:var(--sourdine);}
.auth-sep::before,.auth-sep::after{content:'';flex:1;height:1px;background:var(--bordure);}

/* ---- champ ---- */
.auth-field{margin-bottom:16px;}
.auth-field label{display:block;font-size:13px;font-weight:500;color:var(--sourdine);margin-bottom:7px;}
.auth-field input{
  width:100%;padding:11px 13px;border-radius:var(--r-btn);
  border:1px solid var(--bordure-forte);background:var(--surface);
  font-family:inherit;font-size:16px; /* 16px : en dessous, iOS zoome au focus */
  color:var(--encre);
  transition:border-color .14s ease,background .14s ease;
}
.auth-field input::placeholder{color:var(--sourdine);}
.auth-field input:focus{outline:none;border-color:var(--brique);box-shadow:0 0 0 3px var(--brique-voile);}
.auth-field input[aria-invalid="true"]{border-color:var(--brique);}
.auth-field input[aria-invalid="true"]:focus{box-shadow:0 0 0 3px var(--brique-voile);}

/* Message d'erreur rattaché au champ, pas relégué en bas du
   formulaire : l'utilisateur doit voir quoi corriger sans chercher. */
.field-error{font-size:12.5px;color:var(--rust);margin-top:7px;min-height:1px;}

/* Mot explicatif quand l'app renvoie ici sur une session invalide (voir le
   filet 401 dans auth.js). Ton neutre, pas une alerte rouge : l'utilisateur
   n'a rien fait de mal, il doit juste se reconnecter. */
.auth-notice{
  font-size:13px;line-height:1.55;color:var(--encre);
  background:var(--attente-voile);border:1px solid var(--bordure);
  border-radius:var(--r-card);padding:11px 14px;margin:-16px 0 26px;
}

.auth-switch{font-size:14px;color:var(--sourdine);margin-top:28px;padding-top:24px;border-top:1px solid var(--bordure);}
.auth-switch a{color:var(--brique);font-weight:500;border-bottom:1px solid transparent;transition:border-color .14s ease;}
.auth-switch a:hover{border-bottom-color:var(--brique);}

.auth-legal{font-size:12px;color:var(--text-muted);margin-top:20px;line-height:1.5;}
.auth-mobile-proof{display:none;margin-top:12px;text-align:center;font-size:13.5px;font-weight:500;color:var(--encre-2);}
.auth-back{
  font-family:var(--sans);font-size:13px;font-weight:500;
  color:var(--sourdine);
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:10px 4px;
  transition:background .14s ease,border-color .14s ease;gap:8px;
}
.auth-back:hover{color:var(--encre);}

/* ---- écran « regarde ta boîte mail » ----
   Remplace le formulaire au lieu d'ajouter une ligne de statut
   sous un bouton : après l'envoi, le formulaire n'a plus rien à
   faire à l'écran et sa présence laisse croire qu'il faut recommencer. */
.auth-sent{text-align:left;}
.sent-icon{
  width:52px;height:52px;border-radius:var(--r-card);background:var(--brique-voile);color:var(--brique);
  display:flex;align-items:center;justify-content:center;margin-bottom:22px;
}
.sent-icon .ic{width:22px;height:22px;}
.auth-sent h1{margin-bottom:12px;}
.sent-address{
  font-family:var(--mono);font-size:12.5px;color:var(--encre);
  background:var(--surface);border:1px solid var(--bordure);
  padding:12px 15px;border-radius:var(--r-btn);margin:20px 0;word-break:break-all;
}
.sent-hint{font-size:14px;color:var(--sourdine);margin-bottom:8px;}
.btn-text{background:none;border:none;padding:0;padding-left:0;cursor:pointer;font-family:var(--sans);font-size:15px;font-weight:600;color:var(--brique);}
.btn-text:hover{text-decoration:underline;}
.btn-text:disabled{opacity:.45;cursor:not-allowed;}

/* ---- colonne preuve ---- */
.auth-proof-side{
  background:var(--surface);
  border-left:1px solid var(--bordure);
  color:var(--encre);
  display:flex;flex-direction:column;justify-content:center;
  padding:56px clamp(28px,4.5vw,64px);
  position:relative;overflow:hidden;
}
.proof-glow{display:none;}
.auth-proof-side > *:not(.proof-glow){position:relative;z-index:1;}

.proof-title{font-family:var(--display);font-weight:700;font-size:clamp(25px,2.6vw,34px);line-height:1.15;letter-spacing:-.005em;color:var(--encre);max-width:16ch;margin-bottom:14px;}
.proof-title em{font-style:italic;font-weight:900;color:var(--brique);}
.proof-sub{font-size:16px;color:var(--encre-2);max-width:42ch;margin-bottom:36px;}

.proof-card{background:var(--surface);border:1px solid var(--bordure);border-radius:var(--r-card);overflow:hidden;box-shadow:var(--ombre);margin-bottom:8px;}
.proof-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;background:var(--surface-2);border-bottom:1px solid var(--bordure);}
.proof-card-head strong{font-size:15px;color:var(--encre);font-weight:700;}
.proof-badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--sans);font-weight:500;font-size:12.5px;padding:4px 9px;border-radius:var(--r-badge);background:var(--repondu-voile);color:var(--repondu);border:1px solid var(--bordure);white-space:nowrap;}
.proof-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex:none;}
.proof-steps{padding:6px 18px 16px;}
.pstep{display:grid;grid-template-columns:10px 46px 1fr auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--bordure);}
.pstep:last-child{border-bottom:none;}
.pstep .node{width:8px;height:8px;border-radius:50%;background:var(--brique);}
.pstep.off .node{background:var(--bordure-forte);border:none;}
.pstep .when{font-family:var(--mono);font-size:12.5px;color:var(--sourdine);}
.pstep .what{font-size:14px;color:var(--encre);}
.pstep.off .what{color:var(--sourdine);text-decoration:line-through;text-decoration-color:var(--bordure-forte);}
.pstate{font-family:var(--sans);font-weight:500;font-size:12.5px;padding:4px 9px;border-radius:var(--r-badge);border:1px solid var(--bordure);white-space:nowrap;}
.pstate.on{background:var(--attente-voile);color:var(--attente);}
.pstate.no{background:var(--stoppe-voile);color:var(--stoppe);}

.proof-points{list-style:none;margin-top:32px;display:flex;flex-direction:column;gap:12px;}
.proof-points li{display:flex;gap:11px;font-size:14px;color:var(--encre-2);}
.proof-points li::before{content:'—';color:var(--bordure-forte);flex-shrink:0;font-size:14px;line-height:1.7;}

/* ---- responsive ----
   Sous 900px : on masque la colonne preuve. Sur mobile la page auth
   doit rester une tâche (se connecter / s'inscrire), pas un deuxième
   pitch commercial qui pousse les liens utiles hors du fold. */
@media(max-width:900px){
  .auth-layout{grid-template-columns:1fr;}
  .auth-proof-side{display:none;}
  .auth-body{padding:36px 0;}
  .auth-mobile-proof{display:block;}
}
@media(max-width:560px){
  .auth-form-side{padding:28px 20px;}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;}
}