/* ========== Palette propre à l’index (autonome) ========== */
:root{
  --blue-light:#3b82f6; --blue-dark:#2563eb;

  --bg-body:#f0f2f5; --bg-main:#ffffff;
  --bg-input:#ffffff; --bg-sidebar-alt:#f3f4f6;
  --text-main:#333; --text-muted:#555;

  --border-light:#e5e7eb; --shadow-main:rgba(0,0,0,.08);

  --fade-bg:#eaeef3;
}
:root.dark{
  --bg-body:#121212; --bg-main:#1e1e1e;
  --bg-input:#111111; --bg-sidebar-alt:#222;
  --text-main:#e5e5e5; --text-muted:#cbd5e1;
  --border-light:#333; --shadow-main:rgba(0,0,0,.5);
  --fade-bg:#121212;
}

/* ========== Base ========== */
body {
  margin:0; padding:0;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background:var(--bg-body); color:var(--text-main);
  display:flex; flex-direction:column; align-items:center; min-height:100vh;
}

header {
  padding:1.5rem 2rem; text-align:center; font-family:'Courier New', Courier, monospace;
  user-select:none; width:100%; max-width:1000px; box-sizing:border-box; margin-top:1rem;
}
header img { max-width:100%; height:auto; display:block; margin:0 auto; }

main { flex:1; width:100%; }

footer { flex-shrink:0; padding:1rem; text-align:center; font-size:.9rem; color:var(--text-muted); background:transparent; }
#site-footer a { margin:0 .5rem; text-decoration:none; color:var(--text-muted); transition:color .2s ease; }
#site-footer a:hover { color:var(--text-main); text-decoration:underline; }

/* ========== MISE EN PAGE ========== */
.flex-container {
  display:flex; gap:2rem; align-items:flex-start; width:100%; max-width:1000px;
  margin:0 auto; padding:1rem; box-sizing:border-box;
}
.intro-container, #login-container { flex:1; }

.mobile-only{ display:none; } .desktop-only{ display:block; }

/* ========== Formulaire & boutons ========== */
#login-container{
  background:var(--bg-main); padding:2rem; border-radius:12px;
  box-shadow:0 4px 12px var(--shadow-main);
  width:100%; max-width:400px; display:flex; flex-direction:column; gap:1rem;
  border:1px solid var(--border-light);
}
#login-container h2 { text-align:center; margin-bottom:1rem; color:var(--text-main); }

#login-container input,
#login-container select,
#login-container button{
  padding:.6rem; font-size:1rem; border-radius:8px; border:1px solid var(--border-light);
  width:100%; box-sizing:border-box; background:var(--bg-input); color:var(--text-main);
}
#login-container button{ background:var(--blue-light); color:#fff; border:none; cursor:pointer; transition:background-color .3s; }
#login-container button:hover{ background:var(--blue-dark); }

.errorMessage{ color:#ef4444; min-height:1.5em; font-weight:600; text-align:center; margin-top:.5rem; }

#codePostalInput.hidden, #communeInput.hidden{ display:none !important; }

.form-buttons { display:flex; justify-content:space-between; gap:1rem; margin-top:1.2rem; }
.account-buttons { margin-top:1rem; display:flex; gap:1rem; justify-content:center; }

.button-secondary{
  display:inline-block; padding:.5rem 1rem; text-align:center;
  background:var(--bg-sidebar-alt); color:var(--text-main); border:1px solid var(--border-light);
  text-decoration:none; border-radius:5px; transition:background .2s ease;
}
.button-secondary:hover{ filter:brightness(1.03); }

/* ========== bloc d’intro + fade ========== */
#intro-text{ margin:1em; position:relative; }
.text-wrapper{ position:relative; max-height:none; overflow:visible; }
.intro-preview{ position:relative; max-height:9em; overflow:hidden; }
#intro-full{ max-height:0; overflow:hidden; transition:max-height .6s ease, opacity .6s ease; opacity:0; }
#intro-full.expanded{ max-height:500px; opacity:1; }

/* le fade suit le thème (via --fade-bg) */
#fade-overlay{
  position:absolute; bottom:0; left:0; right:0; height:4em;
  background:linear-gradient(to bottom, rgba(0,0,0,0), var(--fade-bg));
  pointer-events:none; transition:opacity .4s ease;
}

/* CTA "Lire plus" */
#readMoreBtn{
  display:block; margin:1em auto 0;
  background:none; border:none; color:#4a76a8; font-weight:bold; cursor:pointer; font-size:1em;
  transition:opacity .4s ease, transform .4s ease;
}

/* ==== Bouton thème (fixe coin) ==== */
.theme-btn{
  position:fixed; top:12px; right:12px;  /* ← passe à left:12px si tu le veux à gauche */
  width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.7); border:1px solid rgba(0,0,0,.2);
  border-radius:999px; cursor:pointer; font-size:18px; line-height:1; z-index:9999; backdrop-filter:blur(4px);
}
:root.dark .theme-btn{ background:rgba(0,0,0,.18); border-color:rgba(255,255,255,.25); }
.theme-btn:hover{ opacity:.9; }

/* Responsive */
@media (max-width:600px){
  .flex-container{ flex-direction:column; align-items:center; }
  .desktop-only{ display:none; }
  .mobile-only{ display:block; width:90%; max-width:400px; margin:1rem 0 auto; text-align:center; }
  .mobile-only .button-secondary{ display:inline-block; }
}