/* ═══════════════════════════════════════════════════════════
   auth.css — Guide des Pratiques Efficaces v2.0
   Design cohérent avec main.css (mêmes variables, même famille)
═══════════════════════════════════════════════════════════ */

/* Les variables du site sont héritées de main.css.
   On redéfinit uniquement ce qui est spécifique à l'auth. */

/* ── Layout page ── */
.auth-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f0f5ff;
  font-family: var(--font-main, 'Inter', sans-serif);
  position: relative;
  overflow-x: hidden;
}

/* Bulles décoratives */
.auth-page::before,
.auth-page::after {
  content: '';
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  opacity: .07;
}
.auth-page::before {
  width: 700px; height: 700px;
  background: radial-gradient(circle, #1a4fa3, transparent);
  top: -200px; right: -180px;
  animation: authFloat 14s ease-in-out infinite;
}
.auth-page::after {
  width: 500px; height: 500px;
  background: radial-gradient(circle, #0ea5e9, transparent);
  bottom: -150px; left: -100px;
  animation: authFloat 18s ease-in-out infinite reverse;
}
@keyframes authFloat {
  0%,100% { transform: translate(0,0) scale(1); }
  50%      { transform: translate(15px,-20px) scale(1.04); }
}

/* ── Mini navbar auth ── */
.auth-topbar {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(26,79,163,.08);
}
.auth-topbar-brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  text-decoration: none;
  color: var(--primary, #1a4fa3);
  font-weight: 700;
  font-size: 1rem;
}
.auth-topbar-brand .logo-icon {
  width: 38px; height: 38px;
  background: linear-gradient(135deg, #1a4fa3, #0ea5e9);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  color: #fff;
  box-shadow: 0 3px 10px rgba(26,79,163,.25);
  flex-shrink: 0;
}
.auth-topbar-nav {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}
.auth-topbar-nav a {
  font-size: .85rem;
  color: var(--text-medium, #475569);
  font-weight: 500;
  text-decoration: none;
  transition: color .2s;
}
.auth-topbar-nav a:hover { color: #1a4fa3; }

/* ── Corps principal ── */
.auth-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem 3rem;
  position: relative;
  z-index: 1;
}

/* ── Card centrale ── */
.auth-card {
  width: 100%;
  max-width: 460px;
  background: #fff;
  border-radius: var(--radius-xl, 32px);
  box-shadow: 0 20px 60px rgba(26,79,163,.12), 0 4px 16px rgba(0,0,0,.06);
  border: 1px solid rgba(26,79,163,.08);
  overflow: hidden;
  position: relative;
}

/* ── Vues animées ── */
.auth-view {
  display: none;
  padding: 2.5rem;
}
.auth-view.active { display: block; animation: authSlideIn .22s ease; }
@keyframes authSlideIn {
  from { opacity:0; transform:translateX(10px); }
  to   { opacity:1; transform:translateX(0); }
}

/* ── En-tête de vue ── */
.auth-view-header { margin-bottom: 1.75rem; }
.auth-back-btn {
  background: #f0f5ff;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: #64748b;
  font-size: .88rem;
  margin-bottom: .85rem;
  transition: all .2s;
}
.auth-back-btn:hover { background: #e0eaff; color: #1a4fa3; border-color: #1a4fa3; }
.auth-view-title {
  font-size: 1.55rem;
  font-weight: 800;
  color: #1e293b;
  margin: 0 0 .35rem;
  line-height: 1.2;
}
.auth-view-sub {
  font-size: .88rem;
  color: #64748b;
  margin: 0;
}

/* ── Vue "choix méthode" ── */
.auth-choose-title {
  text-align: center;
  margin-bottom: 1.75rem;
}
.auth-choose-title h1 { font-size: 1.55rem; font-weight: 800; color:#1e293b; margin:0 0 .35rem; }
.auth-choose-title p  { font-size: .9rem; color:#64748b; margin:0; }

/* Bouton Google */
.btn-google {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: .75rem;
  padding: .9rem 1.5rem;
  background: #fff;
  border: 2px solid #e2e8f0;
  border-radius: var(--radius-md, 14px);
  font-size: .94rem;
  font-weight: 600;
  color: #1e293b;
  cursor: pointer;
  font-family: inherit;
  transition: all .22s;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
  margin-bottom: .85rem;
}
.btn-google:hover:not(:disabled) {
  border-color: #4285F4;
  box-shadow: 0 4px 20px rgba(66,133,244,.18);
  transform: translateY(-1px);
  background: #fafbff;
}
.btn-google .google-svg { width:20px; height:20px; flex-shrink:0; }

/* Bouton Email */
.btn-email {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: .75rem;
  padding: .9rem 1.5rem;
  background: linear-gradient(135deg, #1a4fa3, #3a6fc0);
  border: none;
  border-radius: var(--radius-md, 14px);
  font-size: .94rem;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  transition: all .22s;
  box-shadow: 0 4px 16px rgba(26,79,163,.28);
}
.btn-email:hover {
  background: linear-gradient(135deg, #153d82, #1a4fa3);
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(26,79,163,.38);
}

/* Divider */
.auth-divider {
  display: flex; align-items: center; gap: 1rem;
  color: #94a3b8; font-size: .78rem; font-weight: 600;
  margin: 1rem 0;
}
.auth-divider::before,.auth-divider::after {
  content:''; flex:1; height:1px; background:#e2e8f0;
}

/* ── Formulaires ── */
.auth-field { margin-bottom: 1.1rem; }

.auth-field > label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .83rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: .42rem;
}

.auth-field .required { color: #ef4444; }

.auth-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  border: 1.5px solid #e2e8f0;
  border-radius: var(--radius-md, 14px);
  background: #fff;
  transition: all .2s;
  overflow: hidden;
}
.auth-input-wrap:focus-within {
  border-color: #1a4fa3;
  box-shadow: 0 0 0 3px rgba(26,79,163,.1);
}
.auth-input-wrap.is-error {
  border-color: #ef4444;
}
.auth-input-wrap.is-error:focus-within {
  box-shadow: 0 0 0 3px rgba(239,68,68,.1);
}
.auth-input-icon {
  position: absolute; left: 1rem;
  color: #94a3b8; font-size: .88rem; pointer-events:none; z-index:1;
}
.auth-input-wrap input {
  flex:1; border:none; outline:none;
  padding: .78rem 1rem .78rem 2.6rem;
  font-size: .9rem;
  font-family: inherit;
  color: #1e293b;
  background: transparent;
  width: 100%;
}
.auth-input-wrap input::placeholder { color: #94a3b8; }
.auth-input-eye {
  background: none; border: none;
  padding: .5rem .85rem; cursor: pointer;
  color: #94a3b8; font-size: .88rem;
  transition: color .2s; flex-shrink:0;
}
.auth-input-eye:hover { color: #1a4fa3; }

/* Erreur champ */
.auth-field-err {
  display: block;
  font-size: .76rem;
  color: #ef4444;
  margin-top: .3rem;
  min-height: 1em;
}

/* Indicateur force mot de passe */
.auth-pwd-strength {
  display: none;
  align-items: center;
  gap: .75rem;
  margin-top: .5rem;
}
.auth-pwd-bar-track {
  flex:1; height:4px;
  background:#e2e8f0;
  border-radius:99px; overflow:hidden;
}
#pwdStrengthBar {
  height:100%; border-radius:99px; width:0%;
  transition: width .35s ease, background .3s;
}
#pwdStrengthLabel {
  font-size:.76rem; font-weight:600;
  min-width:55px; text-align:right;
}

/* Checkbox */
.auth-check {
  display:flex; align-items:center; gap:.6rem; margin:.7rem 0;
}
.auth-check input[type="checkbox"] {
  width:16px; height:16px; accent-color:#1a4fa3; cursor:pointer; flex-shrink:0;
}
.auth-check label {
  font-size:.83rem; color:#64748b; cursor:pointer;
}

/* Lien "mot de passe oublié" */
.auth-forgot-link {
  font-size:.79rem; font-weight:500; color:#1a4fa3; font-weight:400;
}
.auth-forgot-link:hover { text-decoration:underline; }

/* ── Bouton d'action principal ── */
.auth-btn-primary {
  width:100%;
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.88rem 1.5rem;
  background: linear-gradient(135deg, #1a4fa3, #3a6fc0);
  border:none; border-radius:var(--radius-md, 14px);
  font-size:.92rem; font-weight:700;
  color:#fff; cursor:pointer; font-family:inherit;
  margin-top:.5rem;
  box-shadow: 0 4px 16px rgba(26,79,163,.28);
  transition: all .22s;
  letter-spacing:.01em;
}
.auth-btn-primary:hover:not(:disabled) {
  transform:translateY(-2px);
  box-shadow: 0 8px 24px rgba(26,79,163,.38);
  filter:brightness(1.06);
}
.auth-btn-primary:disabled { opacity:.6; cursor:not-allowed; transform:none; }

/* ── Alertes ── */
.auth-alert {
  display:none; gap:.6rem; align-items:flex-start;
  padding:.8rem 1rem;
  border-radius:var(--radius-sm, 8px);
  font-size:.83rem; line-height:1.55;
  margin-bottom:1rem;
  border:1px solid transparent;
}
.auth-alert.show { display:flex; }
.auth-alert i { flex-shrink:0; margin-top:.1rem; }
.auth-alert--error   { background:rgba(239,68,68,.06);   border-color:rgba(239,68,68,.22);   color:#b91c1c; }
.auth-alert--success { background:rgba(16,185,129,.06);  border-color:rgba(16,185,129,.22);  color:#065f46; }
.auth-alert--info    { background:rgba(26,79,163,.06);   border-color:rgba(26,79,163,.18);   color:#1a4fa3; }
.auth-alert--warning { background:rgba(245,158,11,.06);  border-color:rgba(245,158,11,.22);  color:#92400e; }

/* ── Liens de navigation dans la card ── */
.auth-switch { text-align:center; font-size:.83rem; color:#64748b; margin-top:1rem; }
.auth-link { color:#1a4fa3; font-weight:600; text-decoration:none; }
.auth-link:hover { text-decoration:underline; }
.auth-home-link {
  display:flex; align-items:center; justify-content:center; gap:.45rem;
  font-size:.8rem; color:#94a3b8; margin-top:1.2rem;
  text-decoration:none; transition:color .2s;
}
.auth-home-link:hover { color:#1a4fa3; }

/* ── Vue succès ── */
.auth-success-view {
  text-align:center; padding:1.5rem 0;
}
.auth-success-icon {
  font-size:3.2rem; color:#10b981;
  margin-bottom:.85rem;
  animation: successPop .5s cubic-bezier(.175,.885,.32,1.275);
}
@keyframes successPop {
  0% { transform:scale(0); opacity:0; }
  60%{ transform:scale(1.2); }
  100%{transform:scale(1);   opacity:1; }
}
.auth-success-view h2 { font-size:1.3rem; font-weight:800; color:#1e293b; margin:0 0 .45rem; }
.auth-success-view p  { font-size:.88rem; color:#64748b; margin:0 0 1.5rem; }
.auth-progress-bar {
  height:4px; background:#e2e8f0;
  border-radius:99px; overflow:hidden;
}
#successProgressFill {
  height:100%;
  background: linear-gradient(90deg,#10b981,#34d399);
  border-radius:99px; width:0%;
}

/* ── Spinner ── */
.btn-spin { display:flex; align-items:center; gap:.5rem; }
.hidden   { display:none !important; }
@keyframes spin { to { transform:rotate(360deg); } }
.fa-spin { animation: spin .8s linear infinite; }

/* ── Toast notification ── */
.auth-toast {
  position:fixed; bottom:2rem; right:2rem;
  background:#fff; border-radius:var(--radius-md, 14px);
  padding:.85rem 1.2rem;
  box-shadow: 0 10px 40px rgba(0,0,0,.12);
  display:flex; align-items:center; gap:.7rem;
  font-size:.86rem; font-weight:500; color:#1e293b;
  max-width:330px; z-index:99999;
  opacity:0; transform:translateY(16px) scale(.96);
  transition:all .3s cubic-bezier(.175,.885,.32,1.275);
  pointer-events:none;
  border-left:4px solid #6366f1;
}
.auth-toast.show { opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.auth-toast.toast--success { border-left-color:#10b981; }
.auth-toast.toast--error   { border-left-color:#ef4444; }
.auth-toast.toast--warning { border-left-color:#f59e0b; }
.toast-icon { font-size:1rem; flex-shrink:0; }
.auth-toast.toast--success .toast-icon { color:#10b981; }
.auth-toast.toast--error   .toast-icon { color:#ef4444; }
.auth-toast.toast--warning .toast-icon { color:#f59e0b; }
.auth-toast .toast-icon    { color:#6366f1; }

/* ── Modal ── */
.auth-modal {
  position:fixed; inset:0;
  background:rgba(0,0,0,.45);
  z-index:9999;
  display:none; align-items:center; justify-content:center;
  padding:1rem;
  backdrop-filter:blur(4px);
}
.auth-modal.active { display:flex; }
.auth-modal-box {
  background:#fff;
  border-radius:var(--radius-xl, 32px);
  max-width:520px; width:100%;
  max-height:82vh; overflow-y:auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.15);
  animation: authSlideIn .22s ease;
}
.auth-modal-header {
  display:flex; justify-content:space-between; align-items:center;
  padding:1.4rem 1.5rem 0;
}
.auth-modal-header h3 { font-size:1.05rem; font-weight:700; color:#1e293b; margin:0; }
.auth-modal-close {
  background:none; border:none; font-size:1.3rem; cursor:pointer;
  color:#64748b; width:30px; height:30px;
  display:flex; align-items:center; justify-content:center;
  border-radius:7px; transition:all .15s; line-height:1;
}
.auth-modal-close:hover { background:#f0f5ff; color:#1e293b; }
.auth-modal-body { padding:1.2rem 1.5rem; }
.auth-modal-body h4 { font-size:.92rem; font-weight:700; color:#1a4fa3; margin:1rem 0 .35rem; }
.auth-modal-body h4:first-child { margin-top:0; }
.auth-modal-body p { font-size:.85rem; color:#64748b; line-height:1.65; margin:0; }
.auth-modal-footer {
  display:flex; gap:.75rem; padding:1rem 1.5rem 1.5rem; justify-content:flex-end;
}
.auth-modal-footer .auth-btn-primary { width:auto; padding:.62rem 1.4rem; font-size:.86rem; }
.auth-btn-secondary {
  padding:.62rem 1.4rem;
  background:#f0f5ff; border:1px solid #e2e8f0;
  border-radius:var(--radius-sm, 8px);
  font-size:.86rem; font-weight:500; color:#64748b;
  cursor:pointer; font-family:inherit;
  transition:all .2s;
}
.auth-btn-secondary:hover { background:#e2e8f0; color:#1e293b; }

/* ── Footer de la page auth ── */
.auth-footer {
  position:relative; z-index:1;
  text-align:center;
  padding:1.5rem 1rem .75rem;
  font-size:.76rem; color:#94a3b8;
}
.auth-footer nav { display:flex; justify-content:center; gap:1.5rem; margin-top:.4rem; }
.auth-footer nav a { color:#94a3b8; font-size:.76rem; transition:color .2s; }
.auth-footer nav a:hover { color:#1a4fa3; }

/* ── Séparateur accent ── */
.auth-card-accent {
  height: 4px;
  background: linear-gradient(90deg, #1a4fa3, #0ea5e9, #8b5cf6);
  border-radius: 4px 4px 0 0;
}

/* ── Responsive ── */
@media (max-width: 520px) {
  .auth-card { border-radius: var(--radius-lg, 22px); }
  .auth-view { padding: 2rem 1.4rem; }
  .auth-topbar { padding: .85rem 1.25rem; }
  .auth-topbar-nav { gap: 1rem; }
  .auth-topbar-nav a:not(:last-child) { display:none; }
  .auth-toast { bottom:1rem; right:1rem; left:1rem; max-width:none; }
  .auth-modal-footer { flex-direction:column-reverse; }
  .auth-modal-footer .auth-btn-primary,
  .auth-modal-footer .auth-btn-secondary { width:100%; text-align:center; justify-content:center; }
}

/* ── CTA "Connectez-vous" (sur pages protégées) ── */
.auth-cta-section {
  background: linear-gradient(135deg, #f0f5ff, #e8f0fe);
  border: 2px dashed rgba(26,79,163,.2);
  border-radius: var(--radius-xl, 32px);
  padding: 3rem 2rem;
  text-align: center;
  margin: 2rem 0;
}
.auth-cta-icon { font-size:3rem; margin-bottom:1rem; }
.auth-cta-section h3 { font-size:1.3rem; font-weight:800; color:#1e293b; margin-bottom:.6rem; }
.auth-cta-section p  { font-size:.9rem; color:#64748b; max-width:500px; margin:0 auto 1.5rem; line-height:1.7; }
.auth-cta-btns {
  display:flex; gap:.85rem; justify-content:center; flex-wrap:wrap;
}
.auth-cta-btn-primary {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.75rem 1.6rem;
  background:linear-gradient(135deg,#1a4fa3,#3a6fc0);
  color:#fff; border-radius:var(--radius-md, 14px);
  font-size:.9rem; font-weight:700;
  text-decoration:none;
  box-shadow:0 4px 16px rgba(26,79,163,.28);
  transition:all .22s;
}
.auth-cta-btn-primary:hover {
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(26,79,163,.38);
  text-decoration:none; color:#fff;
}
.auth-cta-btn-secondary {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.75rem 1.6rem;
  background:#fff; color:#1a4fa3;
  border:2px solid #1a4fa3;
  border-radius:var(--radius-md, 14px);
  font-size:.9rem; font-weight:600;
  text-decoration:none;
  transition:all .22s;
}
.auth-cta-btn-secondary:hover { background:#f0f5ff; text-decoration:none; }
.auth-cta-benefits {
  display:flex; gap:1.5rem; justify-content:center; flex-wrap:wrap;
  margin-top:1.5rem;
}
.auth-cta-benefit {
  display:flex; align-items:center; gap:.4rem;
  font-size:.8rem; color:#64748b; font-weight:500;
}
.auth-cta-benefit i { color:#10b981; font-size:.78rem; }

/* ── Badge "Membre" sur les modules ── */
.gpe-member-badge {
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.2rem .65rem; border-radius:50px;
  font-size:.72rem; font-weight:700;
  background:linear-gradient(135deg,rgba(26,79,163,.1),rgba(14,165,233,.1));
  color:#1a4fa3;
  border:1px solid rgba(26,79,163,.18);
  text-transform:uppercase; letter-spacing:.05em;
}
.gpe-member-badge i { font-size:.68rem; }

/* ════════════════════════════════════════════════════
   CTA "Contenu réservé" — version enrichie (pages privées)
════════════════════════════════════════════════════ */
.auth-cta-section.premium {
  background: linear-gradient(135deg, #1a4fa3 0%, #3a6fc0 50%, #0ea5e9 100%);
  border: none;
  color: #fff;
  position: relative; overflow: hidden;
}
.auth-cta-section.premium::before {
  content: '';
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Ccircle cx='25' cy='25' r='3'/%3E%3C/g%3E%3C/svg%3E");
}
.auth-cta-section.premium > * { position: relative; z-index: 1; }
.auth-cta-section.premium h3 { color: #fff; font-size: 1.45rem; }
.auth-cta-section.premium p  { color: rgba(255,255,255,.85); }
.auth-cta-section.premium .auth-cta-btn-primary {
  background: #fff;
  color: #1a4fa3;
  box-shadow: 0 4px 20px rgba(0,0,0,.15);
}
.auth-cta-section.premium .auth-cta-btn-primary:hover { background: #f0f5ff; color: #1a4fa3; }
.auth-cta-section.premium .auth-cta-btn-secondary {
  background: rgba(255,255,255,.15);
  color: #fff;
  border-color: rgba(255,255,255,.4);
}
.auth-cta-section.premium .auth-cta-btn-secondary:hover {
  background: rgba(255,255,255,.28); color: #fff;
}
.auth-cta-section.premium .auth-cta-benefit { color: rgba(255,255,255,.8); }
.auth-cta-section.premium .auth-cta-benefit i { color: #fbbf24; }

/* Bandeau compact "membres uniquement" */
.auth-member-ribbon {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .4rem 1rem;
  background: linear-gradient(135deg, #f59e0b, #f97316);
  color: #fff; font-size: .78rem; font-weight: 800;
  border-radius: 50px;
  text-transform: uppercase; letter-spacing: .06em;
  box-shadow: 0 2px 10px rgba(245,158,11,.3);
  margin-bottom: 1.25rem;
}
.auth-member-ribbon i { font-size: .82rem; }

/* Grille avantages membre (plus grande) */
.auth-cta-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .75rem;
  margin: 1.5rem auto 0;
  max-width: 500px;
  text-align: left;
}
.auth-cta-feature {
  display: flex; align-items: flex-start; gap: .6rem;
  font-size: .82rem;
}
.auth-cta-feature-icon {
  width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem;
  background: rgba(255,255,255,.15);
}
.auth-cta-feature-text { color: rgba(255,255,255,.9); line-height: 1.4; }
.auth-cta-feature-text strong { display: block; font-weight: 700; color: #fff; }

/* Responsive CTA */
@media (max-width: 540px) {
  .auth-cta-section { padding: 2.25rem 1.25rem; }
  .auth-cta-features { grid-template-columns: 1fr; }
  .auth-cta-benefits { gap: .85rem; }
}