/* ==========================================================================
   بوعشرية فيزياء — Pages d'authentification (login / register)
   À charger APRÈS assets/theme.css.
   Les noms de classes suivent le contrat déjà posé par assets/main.js :
   .invalid / .valid sur les champs, .error-msg.show, .btn-loading +
   .btn-spinner, .toast*, .modal*.
   ========================================================================== */

/* ---------- 1. Mise en page ---------- */
.auth-wrap{
  min-height:100dvh;
  display:flex; align-items:center; justify-content:center;
  padding:calc(var(--nav-h) + 32px) 20px 48px;
}
.auth-card{
  width:100%; max-width:480px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-l);
  box-shadow:var(--sh-m);
  padding:clamp(26px, 4vw, 40px);
  position:relative; overflow:hidden;
}
/* Filet de marque en tête de carte */
.auth-card::before{
  content:""; position:absolute; inset-block-start:0; inset-inline:0;
  height:3px; background:linear-gradient(90deg, var(--green-brt), var(--brand));
}
.auth-card--wide{ max-width:600px; }

.auth-logo{ height:52px; width:auto; margin:0 auto 20px; }
.auth-card h1{
  font-size:clamp(1.35rem, 1.15rem + .8vw, 1.75rem);
  text-align:center; margin-block-end:6px;
}
.auth-card .sub{
  text-align:center; color:var(--ink-3);
  font-size:var(--fs-sm); line-height:1.6;
  margin-block-end:26px;
}
.auth-footer{
  text-align:center; margin-block-start:22px;
  font-size:var(--fs-sm); color:var(--ink-3);
}
.auth-footer a{ color:var(--brand); font-weight:600; }
.auth-footer a:hover{ text-decoration:underline; }

/* ---------- 2. Champs ---------- */
.field{ margin-block-end:18px; }
.field label{
  display:block; margin-block-end:7px;
  font-family:var(--font-display); font-weight:600;
  font-size:.88rem; color:var(--ink);
}
.field input,
.field select,
.field textarea{
  width:100%;
  padding:12px 15px;
  background:var(--paper);
  border:1.5px solid var(--line);
  border-radius:var(--r-s);
  font-size:.95rem;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.field input::placeholder{ color:var(--ink-3); opacity:.7; }
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  background:var(--surface);
  border-color:var(--brand);
  box-shadow:0 0 0 4px rgba(var(--brand-rgb),.14);
}
.field input:focus-visible,
.field select:focus-visible{ outline:none; }

/* Les numéros de téléphone et les e-mails se lisent de gauche à droite */
.field input[type="tel"],
.field input[type="email"],
.field input[type="password"]{ direction:ltr; text-align:start; }

.field select{
  appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C807D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:left 14px center;
  background-size:17px;
  padding-inline-end:15px; padding-inline-start:40px;
}

/* États posés par setFieldError() dans main.js */
.field input.invalid,
.field select.invalid{ border-color:var(--danger); }
.field input.invalid:focus,
.field select.invalid:focus{ box-shadow:0 0 0 4px rgba(198,54,54,.14); }
.field input.valid,
.field select.valid{ border-color:var(--green); }

.error-msg{
  display:none;
  margin-block-start:6px;
  font-size:.8rem; color:var(--danger);
}
.error-msg.show{ display:flex; align-items:center; gap:6px; }
.error-msg.show::before{
  content:""; width:14px; height:14px; flex-shrink:0;
  background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------- 3. Mot de passe ---------- */
.password-wrap{ position:relative; }
.password-wrap input{ padding-inline-start:46px; }
.toggle-pass{
  position:absolute; inset-inline-start:6px; inset-block-start:50%;
  transform:translateY(-50%);
  width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  background:none; border:none; cursor:pointer;
  color:var(--ink-3); border-radius:8px;
  transition:color .2s var(--ease), background .2s var(--ease);
}
.toggle-pass:hover{ color:var(--brand); background:var(--brand-soft); }
.toggle-pass svg{ width:19px; height:19px; }

.strength-bar{
  height:5px; margin-block-start:9px;
  background:var(--surface-2);
  border-radius:var(--r-pill);
  overflow:hidden;
}
.strength-fill{
  height:100%; width:0;
  border-radius:var(--r-pill);
  background:var(--danger);
  transition:width .3s var(--ease), background .3s var(--ease);
}
.strength-label{
  margin-block-start:6px;
  font-size:.78rem; color:var(--ink-3);
}

/* ---------- 4. Case à cocher ---------- */
.checkbox-field{
  display:flex; align-items:flex-start; gap:11px;
  margin-block-end:20px;
}
.checkbox-field input[type="checkbox"]{
  appearance:none;
  width:20px; height:20px; flex-shrink:0;
  margin-block-start:3px;
  border:1.5px solid var(--line);
  border-radius:6px;
  background:var(--paper);
  cursor:pointer;
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.checkbox-field input[type="checkbox"]:checked{
  background:var(--brand) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/13px no-repeat;
  border-color:var(--brand);
}
.checkbox-field label{
  font-size:.85rem; line-height:1.65;
  color:var(--ink-2); cursor:pointer;
}

/* ---------- 5. Bandeaux d'information ---------- */
.alert{
  display:flex; align-items:flex-start; gap:11px;
  padding:14px 16px;
  border-radius:var(--r-m);
  border:1px solid transparent;
  font-size:var(--fs-sm); line-height:1.65;
  margin-block-end:20px;
}
.alert svg{ width:20px; height:20px; flex-shrink:0; margin-block-start:2px; }
.alert-success{ background:var(--green-soft); border-color:color-mix(in srgb, var(--green) 32%, transparent); color:var(--green); }
.alert-error  { background:color-mix(in srgb, var(--danger) 10%, var(--surface)); border-color:color-mix(in srgb, var(--danger) 32%, transparent); color:var(--danger); }
.alert-warn   { background:color-mix(in srgb, var(--amber) 12%, var(--surface)); border-color:color-mix(in srgb, var(--amber) 34%, transparent); color:var(--amber); }
.hidden{ display:none !important; }

/* ---------- 6. Boutons pleine largeur & chargement ---------- */
.btn-block{ width:100%; }

.btn-loading{ cursor:wait; opacity:.85; }
.btn-spinner{
  width:16px; height:16px;
  border:2px solid currentColor;
  border-block-start-color:transparent;
  border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.link-inline{
  display:inline-block;
  font-size:.85rem; font-weight:600;
  color:var(--brand);
}
.link-inline:hover{ text-decoration:underline; }

/* ---------- 7. Notifications (générées par main.js) ---------- */
.toast-container{
  position:fixed; inset-block-end:20px; inset-inline-end:20px;
  z-index:200;
  display:flex; flex-direction:column; gap:10px;
  max-width:min(360px, calc(100vw - 40px));
}
.toast{
  display:flex; align-items:flex-start; gap:10px;
  padding:13px 15px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-m);
  box-shadow:var(--sh-m);
  font-size:var(--fs-sm); line-height:1.55;
  opacity:0; transform:translateY(12px);
  transition:opacity .22s var(--ease), transform .22s var(--ease);
}
.toast.show{ opacity:1; transform:none; }
.toast svg{ width:19px; height:19px; flex-shrink:0; margin-block-start:1px; }
.toast-success{ border-inline-start:3px solid var(--green); }
.toast-success > svg:first-child{ color:var(--green); }
.toast-error{ border-inline-start:3px solid var(--danger); }
.toast-error > svg:first-child{ color:var(--danger); }
.toast-close{
  margin-inline-start:auto;
  background:none; border:none; cursor:pointer;
  color:var(--ink-3); padding:0;
  display:flex; align-items:center;
}
.toast-close:hover{ color:var(--ink); }
.toast-close svg{ width:16px; height:16px; }

/* ---------- 8. Fenêtre de confirmation (générée par main.js) ---------- */
.modal-overlay{
  position:fixed; inset:0; z-index:210;
  display:flex; align-items:flex-start; justify-content:center;
  padding:24px 20px;
  background:rgba(6,23,25,.55);
  backdrop-filter:blur(3px);
  /* Un formulaire long doit pouvoir défiler : sans cela, le bas de la
     fenêtre — donc le bouton de validation — sort de l'écran. */
  overflow-y:auto;
  overscroll-behavior:contain;
  opacity:0; transition:opacity .2s var(--ease);
}
.modal-overlay.show{ opacity:1; }
.modal-box{
  width:100%; max-width:420px;
  margin:auto;                       /* centre verticalement tant que ça tient */
  background:var(--surface);
  border-radius:var(--r-l);
  box-shadow:var(--sh-m);
  padding:26px;
  text-align:center;
  transform:scale(.96);
  transition:transform .2s var(--ease);
}
/* Le titre reste visible pendant qu'on fait défiler un formulaire long. */
.modal-box .modal-title{
  position:sticky; inset-block-start:-26px;
  background:var(--surface);
  padding-block:6px;
  margin-block-start:-6px;
  z-index:2;
}
/* Et les boutons restent accessibles sans avoir à descendre jusqu'en bas. */
.modal-box .modal-actions{
  position:sticky; inset-block-end:-26px;
  background:var(--surface);
  padding-block:14px 6px;
  margin-block-end:-6px;
  z-index:2;
}
.modal-box .modal-actions::before{
  content:""; position:absolute;
  inset-inline:0; inset-block-start:0;
  height:1px; background:var(--line);
}
.modal-overlay.show .modal-box{ transform:none; }
.modal-icon{
  width:52px; height:52px; margin:0 auto 16px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:color-mix(in srgb, var(--danger) 12%, var(--surface));
  color:var(--danger);
}
.modal-icon svg{ width:25px; height:25px; }
.modal-title{ font-size:1.1rem; margin-block-end:8px; }
.modal-message{ font-size:var(--fs-sm); color:var(--ink-3); margin-block-end:22px; line-height:1.7; }
.modal-actions{ display:flex; gap:10px; }
.modal-actions .btn{ flex:1; }

/* ---------- 9. Responsive ---------- */
@media (max-width:640px){
  .auth-wrap{ padding:calc(var(--nav-h) + 20px) 16px 36px; }
  .auth-card{ padding:24px 20px; border-radius:var(--r-m); }
  .auth-logo{ height:44px; }
  .toast-container{
    inset-inline:16px; inset-block-end:16px;
    max-width:none;
  }
  .modal-actions{ flex-direction:column-reverse; }
  .modal-overlay{ padding:12px; }
  .modal-box{ padding:20px 16px; border-radius:var(--r-m); }
  .modal-box .modal-title{ inset-block-start:-20px; }
  .modal-box .modal-actions{ inset-block-end:-20px; }
}

/* ==========================================================================
   Se souvenir de l'identifiant
   ========================================================================== */
.remember-row{
  margin-block: 4px 18px;
  font-size: .88rem;
}
.remember-row label{
  color: var(--ink-3);
  cursor: pointer;
  user-select: none;
}
.remember-row input:checked + label{ color: var(--ink-2); }