/* ==========================================
   ACCOUNT.CSS – LOGIN & REGISTER
   Auth modal, forms, google btn, divider, magic link
   ========================================== */

/* ----------  RESET + BASE  ---------- */
*,
*::before,
*::after { box-sizing:border-box; margin:0; padding:0; }

body {
  padding-top:80px;               /* espace navbar fixe */
  background:rgba(0,0,0,.05);
  line-height:1;
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
              "Helvetica Neue", Arial, sans-serif;
  font-weight:300;
  letter-spacing:.5px;
}
a { color:inherit; text-decoration:none; }

/* ----------  VARIABLES  ---------- */
:root {
  --white:#ffffff;
  --black:#000000;
  --dark-gray:#333333;
  --medium-gray:#cccccc;
  --light-gray:#f5f5f5;
  --text-gray:#777777;
}

/* ----------  NAVBAR (commune)  ---------- */
header {
  position:fixed;
  top:0; left:0; right:0;
  z-index:1000;
  background:var(--white);
  border-bottom:1px solid var(--medium-gray);
}
.navbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  max-width:1600px;
  margin:0 auto;
  padding:15px 40px;
  height:80px;
}
.navbar-left  { flex:0 0 auto; }
.navbar-left .logo {
  height:300px;
  display:block;
  width:auto;
  object-fit:contain;
}
.navbar-center { flex:0 0 auto; width:450px; }
.search-form {
  display:flex;
  align-items:stretch;
  border:1px solid var(--medium-gray);
  background:var(--white);
  height:45px;
}
.search-form input {
  flex:1;
  padding:0 20px;
  border:none;
  background:transparent;
  font-size:.95rem;
  outline:none;
  color:var(--black);
}
.search-form input::placeholder { color:var(--text-gray); }
.search-form button {
  flex:0 0 auto;
  width:50px;
  background:transparent;
  border:none;
  border-left:1px solid var(--medium-gray);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .3s ease;
}
.search-form button:hover { background:var(--light-gray); }
.search-form:focus-within { border-color:var(--dark-gray); }
.navbar-right {
  display:flex;
  gap:30px;
  align-items:center;
}
.icon-link {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:.9rem;
  transition:color .3s ease;
}
.icon-link:hover { color:var(--dark-gray); }
.icon-link.active { font-weight:500; }
.icon-link i { font-size:1.3rem; }
.icon-label { font-size:.85rem; letter-spacing:.5px; }

/* ----------  LOGIN MODAL  ---------- */
.account-container {
  min-height:calc(100vh - 80px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2rem 1rem;
}
.login-modal {
  width:100%;
  max-width:600px;
  background:var(--white);
  padding:2.5rem;
  position:relative;
}
.modal-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:2rem;
}
.modal-header h1 {
  font-size:1.5rem;
  font-weight:300;
  letter-spacing:1px;
}
.close-btn {
  background:transparent;
  border:none;
  font-size:1.5rem;
  color:var(--text-gray);
  cursor:pointer;
  width:30px; height:30px;
  display:flex; align-items:center; justify-content:center;
  transition:color .3s ease;
}
.close-btn:hover { color:var(--black); }

/* ----------  GOOGLE BUTTON  ---------- */
.google-btn {
  width:100%;
  padding:12px 20px;
  border:1px solid var(--medium-gray);
  background:var(--white);
  font-size:.95rem;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:12px;
  transition:all .3s ease;
  letter-spacing:.5px;
}
.google-btn:hover { background:var(--light-gray); }
.google-icon { width:20px; height:20px; }

/* ----------  DIVIDER  ---------- */
.divider {
  position:relative;
  text-align:center;
  margin:2rem 0;
}
.divider::before {
  content:'';
  position:absolute;
  left:0; top:50%;
  width:100%; height:1px;
  background:var(--medium-gray);
}
.divider span {
  position:relative;
  background:var(--white);
  padding:0 1rem;
  color:var(--text-gray);
  font-size:.9rem;
}

/* ----------  FORM  ---------- */
.login-form { margin-top:2rem; }
.form-header { text-align:right; margin-bottom:1.5rem; }
.required-text { font-size:.85rem; color:var(--text-gray); }
.form-group { margin-bottom:1.5rem; }
.form-group label {
  display:block;
  font-size:.9rem;
  color:var(--black);
  margin-bottom:.5rem;
  letter-spacing:.3px;
}
.form-group input {
  width:100%;
  padding:12px 15px;
  border:1px solid var(--medium-gray);
  background:var(--white);
  font-size:.95rem;
  color:var(--black);
  transition:border-color .3s ease;
}
.form-group input:focus { outline:none; border-color:var(--dark-gray); }

/* ----------  PASSWORD INPUT  ---------- */
.password-input { position:relative; }
.password-input input { padding-right:45px; }
.toggle-password {
  position:absolute;
  right:12px; top:50%;
  transform:translateY(-50%);
  background:transparent;
  border:none;
  color:var(--text-gray);
  cursor:pointer;
  font-size:1.1rem;
  transition:color .3s ease;
}
.toggle-password:hover { color:var(--black); }

/* ----------  FORGOT / MAGIC LINK  ---------- */
.forgot-password {
  display:inline-block;
  font-size:.85rem;
  color:var(--black);
  text-decoration:underline;
  margin-bottom:1.5rem;
  transition:color .3s ease;
}
.forgot-password:hover { color:var(--dark-gray); }
.magic-link {
  background:var(--light-gray);
  padding:1.5rem;
  margin:1.5rem 0;
}
.magic-link p {
  font-size:.9rem;
  color:var(--text-gray);
  margin-bottom:.8rem;
  line-height:1.5;
}
.link-btn {
  display:inline-block;
  font-size:.9rem;
  color:var(--black);
  text-decoration:underline;
  transition:color .3s ease;
}
.link-btn:hover { color:var(--dark-gray); }

/* ----------  SUBMIT  ---------- */
.submit-btn {
  width:100%;
  padding:14px 20px;
  background:var(--black);
  color:var(--white);
  border:none;
  font-size:.95rem;
  letter-spacing:1px;
  cursor:pointer;
  transition:background .3s ease;
  margin-top:1.5rem;
}
.submit-btn:hover { background:var(--dark-gray); }

/* ----------  CREATE ACCOUNT  ---------- */
.create-account {
  text-align:center;
  margin-top:2rem;
  padding-top:2rem;
  border-top:1px solid var(--light-gray);
}
.create-account p {
  font-size:.9rem;
  color:var(--text-gray);
  margin-bottom:.5rem;
}
.register-link {
  font-size:.95rem;
  color:var(--black);
  font-weight:400;
  text-decoration:underline;
  transition:color .3s ease;
}
.register-link:hover { color:var(--dark-gray); }

/* ----------  FOOTER  ---------- */
footer {
  background-color:var(--white);
  border-top:1px solid var(--medium-gray);
  padding:40px 20px;
  margin-top:auto;
}
.footer-nav {
  display:flex;
  justify-content:space-evenly;
  align-items:center;
  flex-wrap:wrap;
  gap:20px;
  max-width:1400px;
  margin:0 auto;
  text-transform:lowercase;
}
.footer-nav a {
  font-size:.85rem;
  letter-spacing:1px;
  transition:all .3s ease;
  white-space:nowrap;
}
.footer-nav a:hover {
  color:var(--dark-gray);
  text-decoration:underline;
}
.footer-bottom {
  text-align:right;
  padding:20px 40px;
}
.footer-bottom p {
  margin:0;
  font-size:.65rem;
  color:#000;
  letter-spacing:.5px;
}

/* ----------  RESPONSIVE  ---------- */
@media (max-width:1024px){
  body { padding-top:70px; }
  .navbar { padding:15px 30px; height:70px; }
  .navbar-left .logo { height:250px; }
  .navbar-center { width:350px; }
  .navbar-right { gap:20px; }
  .icon-label { display:none; }
}
@media (max-width:768px){
  body { padding-top:60px; }
  .navbar { padding:12px 20px; height:60px; }
  .navbar-left .logo { height:200px; }
  .navbar-center { width:auto; margin:0 10px; }
  .search-form { border:none; background:transparent; height:auto; }
  .search-form input { display:none; }
  .search-form button {
    border:none; width:auto; padding:8px 12px; background:transparent;
    display:flex; align-items:center; gap:6px; font-size:.65rem;
  }
  .search-form button::after { content:"recherche"; font-size:.65rem; text-transform:lowercase; }
  .navbar-right { gap:15px; }
  .icon-link i { font-size:1.2rem; }
  .footer-nav { flex-direction:column; gap:15px; }
  .footer-bottom { text-align:center; padding:15px 20px; }
}
@media (max-width:480px){
  body { padding-top:55px; }
  .navbar { padding:10px 15px; height:55px; }
  .navbar-left .logo { height:150px; }
  .search-form button { padding:6px 10px; gap:5px; font-size:.6rem; }
  .search-form button::after { font-size:.6rem; }
  .search-form button i { font-size:1rem; }
  .navbar-right { gap:10px; }
  .icon-link i { font-size:1.1rem; }
  .footer-nav a { font-size:.8rem; }
  .footer-bottom p { font-size:.6rem; }
}
@media (max-width:360px){
  body { padding-top:50px; }
  .navbar { height:50px; }
  .navbar-left .logo { height:120px; }
  .search-form button::after { font-size:.55rem; }
}