/* ============ Layout cleanup (hide site chrome) ============ */
.app-header, .app-footer, header.app-header, footer.app-footer { display:none !important; }

body{
    margin:0; background:#f5f7fb; color:#111827;
    font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
}

/* ============ Page shell ============ */
.body-card{
    max-width:1200px; margin:0 auto; min-height:100vh;
    padding:clamp(12px,2vw,24px);
    display:grid; align-items:center; gap:clamp(16px,2.5vw,32px);
    grid-template-columns: 520px minmax(340px,1fr);
}

/* ============ Left card (form) ============ */
.signup-card{
    background:#fff; border-radius:16px;
    box-shadow:0 10px 30px rgba(16,24,40,.08);
    padding:clamp(16px,2vw,28px);
}

.big-logo{ display:block; margin:0 auto 6px; width:84px; height:auto; }

.signup-card h3{
    margin:4px 0 2px; text-align:center;
    font-weight:800; font-size:clamp(22px,2.2vw,26px);
}
.form-txt{ text-align:center; color:#6b7280; margin-bottom:14px; line-height:1.35; }

/* ============ FORM GRID ============ */
.form{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:14px 16px;
    min-width:0;  /* prevent overflow in grid children */
}
.form > *{ min-width:0; } /* inputs won’t overflow column */

/* Header block spans full width */
.form > div:first-child{ grid-column:1 / -1; }

/* order-based placement (desktop/tablet ≥1025px) */
.form > div:nth-of-type(2){ grid-column:1 / 2; }      /* Nom */
.form > div:nth-of-type(3){ grid-column:2 / 3; }      /* Prénom */
.form > div:nth-of-type(4){ grid-column:1 / 2; }      /* Nom d'utilisateur */
.form > div:nth-of-type(5){ grid-column:2 / 3; }      /* Email */
.form > div:nth-of-type(6){ grid-column:1 / -1; }     /* Mot de passe */
.form > div:nth-of-type(7){ grid-column:1 / -1; }     /* Reçu */
.form > div:nth-of-type(8),
.form > div:nth-of-type(9),
.form > div:nth-of-type(10){ grid-column:1 / -1; }    /* validation blocks */
.form > div:nth-of-type(11){ grid-column:1 / -1; }    /* Submit */

/* labels + controls */
.form-label{
    display:block; margin:2px 0 6px; font-weight:600; color:#374151; font-size:.95rem;
}
.form-control{
    width:100%; padding:12px 14px; border-radius:12px;
    border:1px solid #d1d5db; background:#f9fafb; font-size:.98rem;
    transition:border-color .15s, box-shadow .15s, background .15s;
}
.form-control:focus{
    outline:none; border-color:#2563eb; background:#fff;
    box-shadow:0 0 0 3px rgba(37,99,235,.18);
}

/* password “show” button */
.pass-container{ position:relative; display:flex; align-items:center; }
.pass-container .form-control{ margin-bottom:0; }
.show-btn{
    position:absolute; right:10px; padding:4px 6px; border:0; background:transparent;
    color:#2563eb; font-weight:700; cursor:pointer;
}

/* submit */
.form-btn{
    width:100%; padding:12px 16px; border:0; border-radius:12px;
    background:#2563eb; color:#fff; font-weight:800; font-size:1rem; cursor:pointer;
    transition:background .15s ease, transform .06s ease;
}
.form-btn:hover{ background:#1e4fc1; }
.form-btn:active{ transform:translateY(1px); }

/* errors */
.text-danger, .text-danger.small{ display:block; font-size:.85rem; margin-top:4px; }

/* bottom link */
.signin-link{ text-align:center; margin-top:8px; color:#6b7280; }
.signin-link a{ color:#2563eb; text-decoration:none; font-weight:700; }
.signin-link a:hover{ text-decoration:underline; }

/* ============ Right image panel (slimmer, consistent) ============ */
.img-container{ display:grid; place-items:center; }
.login-img{
    width:100%; height:auto; max-height:64vh; object-fit:cover;
    border-radius:16px; box-shadow:0 10px 30px rgba(16,24,40,.10);
}

/* ============ RESPONSIVE ============ */
/* Collapse to 1 column a bit earlier so it never feels cramped */
@media (max-width:1024px){
    .body-card{ grid-template-columns:1fr; align-items:start; }
    .img-container{ order:-1; }
    .login-img{ max-height:42vh; }
    .form{ grid-template-columns:1fr; gap:12px; }
    /* Force every form block full‑width on small screens */
    .form > div{ grid-column:1 / -1 !important; }
    .signup-card{ max-width:720px; margin:0 auto; }
}

/* Slightly smaller phones */
@media (max-width:560px){
    .signup-card{ padding:14px; }
    .big-logo{ width:72px; }
    .form-label{ font-size:.9rem; }
    .form-control{ padding:11px 12px; }
    /* Optionally hide the image on very small screens:
       .img-container{ display:none; } */
}

/* Ultra small */
@media (max-width:380px){
    .signup-card{ padding:12px; }
}
@media (max-width:768px){
    .img-container{ display:none !important; }
}