/* ----------------------------------------------------
   EuroSDIS — Register (CSS épuré & consolidé)
   ---------------------------------------------------- */

/* Webfonts */
@import url("https://fonts.googleapis.com/css?family=Maven+Pro:400,700");
@import url("https://fonts.googleapis.com/css2?family=Public+Sans:wght@100;500;700&display=swap");

/* Polices locales */
@font-face{ font-family:'Marianne-Bold';    src:url('fonts/Marianne-Bold.woff') format('woff'); }
@font-face{ font-family:'Marianne-Regular'; src:url('fonts/Marianne-Regular.woff') format('woff'); }
@font-face{ font-family:'Marianne-Medium';  src:url('fonts/Marianne-Medium.woff') format('woff'); }

/* --------- Variables --------- */
:root{
  --ff-base:'Public Sans',sans-serif;
  --ff-ui:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;

  /* Couleurs */
  --bg:#FFFFFF;
  --panel:#F6F6F6;
  --text:#333333;
  --muted:#666666;

  --surface:#E5E5E5;    /* fond inputs & CTA inactif */
  --line:#3A3A3A;       /* soulignement (ligne foncée) */
  --placeholder:#BBBBBB;
  --blue:#000091;       /* liens */
  --red:#CE0500;        /* erreurs */

  /* Effets */
  --radius:12px;
  --shadow:0 3px 8px rgba(0,0,0,.24);
  --focus:0 0 0 3px rgba(0,0,0,.12);
  --ease:cubic-bezier(.2,.8,.2,1);

  /* Échelle UI (overrides plus bas) */
  --ui-scale:1;
}

/* --------- Base --------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ font-size:16px; }

body{
  font-family:var(--ff-base);
  background:var(--bg);
  color:var(--text);
  margin:0;

  display:grid;                 /* contenu + footer fixé */
  grid-template-rows:1fr auto;

  min-height:100svh;
  padding:clamp(24px,6vh,80px) 12px;

  user-select:none;
}

/* --------- Carte centrale --------- */
.container{
  background:var(--panel);
  border-radius:0;
  padding:22px 18px;
  box-shadow:var(--shadow);
  text-align:center;

  width:100%;
  max-width:350px;
  margin:0;

  justify-self:center;
  align-self:center;
}

/* --------- Logo --------- */
.logo-container{ margin-bottom:16px; }
.logo{
  display:block;
  width:150px;                  /* grossira via --ui-scale */
  max-width:100%;
  height:auto;
  margin-inline:auto;
}

/* --------- Typo & texte --------- */
h1{
  font-size:1.05rem;
  color:var(--text);
  margin:0 0 8px 0;
}
p{
  font-family:var(--ff-base);
  font-size:.95rem;
  color:var(--muted);
  margin:0 0 20px 0;
  line-height:1.55;
}
p a{ color:var(--text); text-decoration:none; font-family:var(--ff-base); }
p a:hover{ text-decoration:underline; }

/* --------- AUTH — Inputs 283×43 + CTA --------- */
.auth{
  --g1:var(--muted);
  --g2:#929292;
  --g3:var(--surface);
  --g4:var(--line);
  text-align:center;
}

/* Typo dédiée */
.auth .label,
.auth .hint,
.auth .error-msg,
.auth .cta,
.auth .input-shell input{ font-family:var(--ff-ui); }

/* Champ */
.auth .field{
  position:relative;
  width:283px;
  display:inline-block;
  overflow:visible;
  margin:0 auto 10px;
  text-align:left;
}

/* Textes de champ */
.auth .label,
.auth .hint,
.auth .error-msg{
  font-size:9px;
  line-height:1.35;
  font-weight:400;
  margin:0;
  text-align:left;
}
.auth .label{ color:var(--text); margin-bottom:4px; }
.auth .hint{ color:var(--g1); margin-bottom:6px; }

/* Barre d’erreur externe */
.auth .error-bar{
  position:absolute; top:0; bottom:0; left:-8px;
  width:3px; background:var(--red);
  transform:scaleY(0); transform-origin:top;
  transition:transform .18s var(--ease);
  z-index:0;
}
.auth .field.error .error-bar{ transform:scaleY(1); }

/* Shell input 283×43 */
.auth .input-shell{
  position:relative;
  width:283px; height:43px;
  background:var(--g3);
  border-radius:3px 3px 0 0;
  display:flex; align-items:center;
  padding:0 10px;
  transition:box-shadow .2s var(--ease);
}
.auth .input-shell:focus-within{ box-shadow:var(--focus); }
.auth .input-shell input{
  appearance:none; width:100%; height:100%;
  background:transparent; border:0; outline:0;
  font-size:14px; color:var(--text);
}
.auth .input-shell input::placeholder{ color:var(--placeholder); }

.auth .underline{
  position:absolute; left:0; right:0; bottom:0;
  height:2px; background:var(--g4);
  transition:background-color .15s var(--ease);
}

/* États d’erreur */
.auth .field.error .label{ color:var(--red); }
.auth .field.error .underline{ background:var(--red); }

/* Messages d’erreur */
.auth .error-msg{
  display:none; color:var(--red);
  opacity:0; transform:translateY(-3px);
  gap:8px;
}
.auth .err-ico{
  width:14px; height:14px; border-radius:50%;
  background:var(--red); color:#fff;
  display:grid; place-items:center; font-size:10px; line-height:1;
}
.auth .err-ico::before{ content:"×"; transform:translateY(-.5px); }
.auth .field.error .error-msg{
  display:flex; animation:auth-fadeIn .18s var(--ease) forwards;
}

/* Animations */
@keyframes auth-fadeIn{ to{ opacity:1; transform:none; } }
@keyframes auth-shake{
  0%,100%{ transform:translateX(0); }
  20%{ transform:translateX(-3px); }
  40%{ transform:translateX(3px); }
  60%{ transform:translateX(-2px); }
  80%{ transform:translateX(2px); }
}
.auth .input-shell.shake{ animation:auth-shake .28s var(--ease); }

/* CTA 283×43 */
.auth .buttons{ margin-top:12px; }
.auth .cta{
  width:283px; height:43px;
  border:0; border-radius:0;
  background:var(--surface); color:#929292;
  font-weight:500; font-size:14px; letter-spacing:.1px;
  transition:
    transform .15s var(--ease),
    box-shadow .15s var(--ease),
    background-color .12s var(--ease),
    color .12s var(--ease);
  cursor:not-allowed;
}
.auth .cta.active{ background:var(--blue); color:#fff; cursor:pointer; }
.auth .cta.active:hover{ transform:translateY(-1px); box-shadow:0 8px 16px rgba(0,0,0,.12); }
.auth .cta.active:active{ transform:translateY(0);  box-shadow:0 4px 10px rgba(0,0,0,.16); }

/* Accessibilité : réduire animations */
@media (prefers-reduced-motion:reduce){
  .auth .input-shell,.auth .cta{ transition:none; }
  .auth .input-shell.shake{ animation:none; }
}

/* --------- Liens sous le formulaire (register) --------- */
/* Markup conseillé :
<div class="auth-links">
  <a class="back-link" href="index.php">Retour à la connexion</a>
  <p class="next"><a href="license_request.php">Faire une demande de licence</a></p>
</div>
   – ou –
<div class="auth-links">
  <a class="back-link" href="index.php">Déjà un compte ? Se connecter</a>
  <p class="signup">Besoin d’aide ? <a href="help.php">Support</a></p>
</div>
*/
.auth-links{
  width:283px;
  margin:8px auto 0;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  flex-wrap:nowrap;
  font-family:var(--ff-ui);
  font-size:9px;
  line-height:1.35;
}
.auth-links p{
  margin:0;
  text-align:right;
  font-size:inherit;
  line-height:inherit;
}
/* gauche : lien retour / connexion — bleu souligné, non coupé */
.auth-links .back-link{
  color:var(--blue);
  text-decoration:underline;
  white-space:nowrap;
  flex:0 0 auto;
}
/* droite : appel à l’action secondaire — gris */
.auth-links .next,
.auth-links .signup{ color:var(--muted); flex:1 1 auto; min-width:0; white-space:normal; }
.auth-links .next a,
.auth-links .signup a{ color:var(--muted); text-decoration:underline; white-space:nowrap; }

/* --------- Responsif largeur --------- */
@media (max-width:380px){
  .container{ max-width:92vw; padding:18px 14px; }
}

/* --------- Responsif hauteur (écrans courts) --------- */
@media (max-height:720px){
  body{ padding-block:clamp(8px,2vh,16px); }
  .container{ padding:16px 14px; }
  .logo-container{ margin-bottom:10px; }
  .auth .field{ margin-bottom:8px; }
  .auth .buttons{ margin-top:10px; }
}

/* =======================================================
   OVERRIDES — ZOOM PLUS FORT (mise à l’échelle responsive)
   ======================================================= */
@media (min-width:992px)  and (min-height:780px) { :root{ --ui-scale:1.35; } }
@media (min-width:1200px) and (min-height:850px) { :root{ --ui-scale:1.50; } }
@media (min-width:1400px) and (min-height:900px){ :root{ --ui-scale:1.50; } }
@media (min-width:1600px) and (min-height:1000px){ :root{ --ui-scale:1.60; } }
@media (min-width:1900px) and (min-height:1200px){ :root{ --ui-scale:1.40; } }

/* Application de l’échelle */
.container{
  max-width:calc(350px * var(--ui-scale));
  padding:calc(22px * var(--ui-scale)) calc(18px * var(--ui-scale));
}
.logo{ width:calc(150px * var(--ui-scale)); }

.auth .field{
  width:calc(283px * var(--ui-scale));
  margin:0 auto calc(10px * var(--ui-scale));
}
.auth .input-shell{
  width:calc(283px * var(--ui-scale));
  height:calc(43px * var(--ui-scale));
  padding:0 calc(10px * var(--ui-scale));
}
.auth .input-shell input{ font-size:calc(14px * var(--ui-scale)); }
.auth .underline{ height:max(2px, calc(2px * var(--ui-scale))); }

.auth .buttons{ margin-top:calc(12px * var(--ui-scale)); }
.auth .cta{
  width:calc(283px * var(--ui-scale));
  height:calc(43px * var(--ui-scale));
  font-size:calc(14px * var(--ui-scale));
}
.auth .label,.auth .hint,.auth .error-msg{ font-size:calc(9px * var(--ui-scale)); }
p{ font-size:calc(.95rem * var(--ui-scale)); }

/* Liens sous formulaire à l’échelle */
.auth-links{
  width:calc(283px * var(--ui-scale));
  margin:calc(8px * var(--ui-scale)) auto 0;
  gap:calc(12px * var(--ui-scale));
  font-size:calc(9px * var(--ui-scale));
}

/* Écrans très étroits : permettre retour à la ligne contrôlé */
@media (max-width:340px){
  .auth-links{ flex-wrap:wrap; justify-content:flex-start; }
}

/* Remplace l'underline par un vrai border-bottom */
.auth .input-shell{
  border-bottom: 2px solid var(--line);   /* était .underline background */
}
.auth .underline{ display:none; }         /* span non utilisé, on le cache */

/* États d’erreur */
.auth .field.error .input-shell{ border-bottom-color: var(--red); }