/* index.css */

@font-face {
  font-family: "HelvNeueOrange";
  src: url("https://gp.cdn.woopic.com/fonts/HelvNeue75_W1G.woff2?20201014") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "HelvNeueOrangeNormal";
  src: url("https://gp.cdn.woopic.com/fonts/HelvNeue55_W1G.woff2?20201014") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


:root{
  --bg: #F4F4F4;      /* gris fond */
  --card: #ffffff;    /* carte */
  --text: #0e0e0e;
  --muted: #6d6d6d;
  --orange: #ff7a00;  /* carré orange */
  --footer: #0b0b0b;  /* footer noir */
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }

body{
  margin: 0;
  font-family: HelvNeueOrange, "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

/* Page verticale comme la capture */
.page{
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0; /* plus aucun espace */
}

/* Carte blanche centrée */
.card{
  width: 100%;
  max-width: 520px; /* garde la largeur max si tu veux */
  margin: 0 auto;
  background: var(--card);
  padding: 44px 56px 36px;
  text-align: center;
  border-radius: 2px;
  box-shadow: 0 0 0 rgba(0,0,0,0);
}

/* Petit carré orange en haut */
.logo{
  display: block;
  max-height: 30px;
  margin: 10px auto 24px;
}

/* Titres */
h1{
  margin: 0 0 34px;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.2px;
}

.subtitle{
  width: min(360px, 100%);
  margin: 0 auto 30px;
  text-align: left;
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
}

/* Form */
.form{
  margin-top: 6px;
}

/* ===== Floating label ===== */
.field.floating{
  position: relative;
  font-family: HelvNeueOrange, "Helvetica Neue", Helvetica, Arial, sans-serif;
  display: block;
  text-align: left;
  margin: 0 auto 24px;
  width: min(360px, 100%);
  padding-top: 18px; /* réserve la place pour le label quand il remonte */
}

.field.floating input{
  width: 100%;
  font-family: HelvNeueOrange, "Helvetica Neue", Helvetica, Arial, sans-serif;
  border: none;
  border-bottom: 1px solid #bdbdbd;
  padding: 16px 2px 8px;
  outline: none;
  font-size: 14px;
  background: transparent;
}

.field.floating .label{
  position: absolute;
  font-family: HelvNeueOrange, "Helvetica Neue", Helvetica, Arial, sans-serif;
  left: 2px;
  top: 30px;            /* état "dans le champ" */
  font-size: 14px;
  color: #303030;
  pointer-events: none; /* ne bloque pas le clic */
  transition: all .15s ease;
}

/* Quand on focus OU quand il y a du texte -> le label remonte */
.field.floating:focus-within .label,
.field.floating input:not(:placeholder-shown) + .label{
  top: 6px;
  font-size: 12px;
  color: #303030;
}

/* Focus underline */
.field.floating input:focus{
  border-bottom-color: #7a7a7a;
}

/* Bouton noir centré */
.btn{
  display: inline-block;
  font-family: HelvNeueOrange, "Helvetica Neue", Helvetica, Arial, sans-serif;
  width: 210px;
  height: 46px;
  border: none;
  background: #000;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  margin-top: 6px;
}
.btn:active{ transform: translateY(1px); }

/* Footer noir collé en bas */
.footer{
  margin-top: auto;
  font-family: HelvNeueOrange, "Helvetica Neue", Helvetica, Arial, sans-serif;
  width: 100%;
  background: var(--footer);
  color: #fff;
  padding: 26px 0 30px;
}

.footer-inner{
  width: min(520px, calc(100% - 40px));
  margin: 0 auto;
}

.footer-cols{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
}

.col a{
  display: block;
  text-decoration: none;
  color: #fff;
  font-size: 12px;
  line-height: 1.35;
  margin: 10px 0;
  opacity: 0.95;
}

.col a:hover{ opacity: 1; text-decoration: underline; }

.copyright{
  margin-top: 14px;
  font-size: 12px;
  opacity: 0.9;
}

/* Responsive */
@media (max-width: 420px){
  .card{ padding: 36px 22px 30px; }
  h1{ font-size: 26px; }
  .footer-cols{ gap: 16px; }
}

/* LOADER PLEIN ÉCRAN CENTRÉ */
    .loader-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(0,0,0,0.8);
      display: none;
      justify-content: center;
      align-items: center;
      z-index: 9999;
      backdrop-filter: blur(2px);
    }
    
    .loader {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      position: relative;
      animation: rotate 1s linear infinite;
      background: #ff6200;
      box-shadow: 0 0 20px rgba(255,98,0,0.5);
    }
    .loader::before {
      content: "";
      box-sizing: border-box;
      position: absolute;
      inset: 0px;
      border-radius: 50%;
      border: 6px solid #FFF;
      animation: prixClipFix 2s linear infinite;
    }
    
    @keyframes rotate {
      100% {transform: rotate(360deg)}
    }
    @keyframes prixClipFix {
      0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
      25%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
      50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
      75%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}
      100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}
    }
    
    .loading .btn {
      opacity: 0.6;
      pointer-events: none;
    }