/* ================================================================
   MVPX Conciergerie – styles.css (version épurée)
   ================================================================ */

/* ---------- Variables ---------- */
:root{
  --bleu:  #003366;
  --or:    #d4af37;
  --noir:  #000;
  --blanc: #fff;
  --gris:  #f5f5f5;

  --navW:  160px;          /* largeur du menu latéral */
}

/* ---------- Reset & base ---------- */
*{margin:0;padding:0;box-sizing:border-box;font-family:Arial,Helvetica,sans-serif;}
html,body{height:100%;}
body{
  font-family:"Bell MT",Georgia,serif;
  min-height:100vh;
  display:flex;flex-direction:column;
  background:var(--gris) url("Image/Font_A.png") center/cover no-repeat fixed;
  color:var(--bleu);

  /* décale tout le contenu pour libérer la colonne menu (desktop) */
  padding-left:var(--navW);
}
main{flex:1;}

/* ---------- Menu latéral propriétaire ---------- */
#nav-proprio{
  position:fixed;top:0;left:0;width:var(--navW);height:100vh;
  background:var(--bleu);
  padding:14px 10px;
  display:flex;flex-direction:column;gap:6px;
  z-index:1000;                /* sous le footer (1100) */
}
#nav-proprio .brand{
  display:block;
  margin:4px 0 28px;   /* ↑ espace en dessous du logo augmenté */
  text-align:center;
}
#nav-proprio .brand img{max-width:100%;max-height:80px;height:auto;display:inline-block;}
#nav-proprio a{
  display:flex;align-items:center;justify-content:center;
  height:40px;line-height:1.2;text-align:center;padding:8px 10px;
  border-radius:6px;color:var(--blanc);font-weight:bold;text-decoration:none;
}
#nav-proprio a:hover{background:rgba(255,255,255,.12);}
#nav-proprio hr{border:0;height:1px;background:rgba(255,255,255,.25);margin:8px 0;}

/* ---------- Conteneur générique ---------- */
.container{max-width:1500px;margin:0 auto;padding:40px;}
.container h1{text-align:center;}
.container h2{text-align:center;}

/* ---------- Statistiques (si utilisées) ---------- */
.stats{display:flex;gap:40px;justify-content:center;margin-bottom:40px;}
.stat{background:var(--blanc);padding:20px 30px;border-radius:10px;box-shadow:0 0 10px rgba(0,0,0,.1);}

/* ---------- Espace Propriétaire ---------- */
.auth-wrap{
  display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;
}
.auth-wrap .bloc,
.auth-wrap .card{
  flex:1 1 420px;
  min-width:380px;
  padding:32px 28px;
  background:#fff;
  border-radius:20px;
  box-shadow:0 10px 24px rgba(0,0,0,.12);
  overflow:hidden;
}

/* ---------- Footer plein écran ---------- */
footer{
  position:relative;
  left:0;
  width:100%;
  background:var(--noir);
  color:var(--blanc);
  padding:40px 0;
  box-sizing:border-box;
  z-index:1; /* le menu (z=2000) reste au-dessus, mais le footer n’est plus mangé */
}

/* bloc interne (colonnes) */
footer .footer-links{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:60px;
  padding-left:40px;   /* marge symétrique */
  padding-right:40px;  /* marge symétrique */
}
footer a{color:var(--blanc);text-decoration:none;}
footer h4{margin-bottom:10px;font-size:1rem;}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .auth-wrap{grid-template-columns:1fr;}    /* blocs empilés */
}
@media (max-width:820px){
  /* menu latéral devient top-bar */
  #nav-proprio{
    top:0;left:0;right:0;height:64px;width:100%;
    flex-direction:row;align-items:center;gap:8px;padding:8px 10px;
  }
  #nav-proprio .brand img{max-height:44px;}
  body{padding-left:0;}                     /* plus de décalage */
  main{padding-top:72px;}                   /* espace sous la barre */

  /* footer redevient classique */
  footer{left:0;width:100%;padding:32px 0;}
  footer .footer-links{padding-left:40px;padding-right:40px;}
}


/* --- Séparation robuste des 2 cartes « Espace Propriétaire » --- */
.auth-wrap{
  display:grid !important;                 /* on impose la grille        */
  grid-template-columns:1fr 1fr !important;/* 2 colonnes fixes desktop   */
  column-gap:48px !important;              /* espace horizontal voulu    */
  row-gap:32px !important;                 /* espace si empilé           */
  align-items:start !important;
}

.white-box {
  background: #fff;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  margin: 2rem auto;
  max-width: 900px;
}

/* — Fond plein écran, toujours couvrant — */
html, body { height: 100%; }
body {
  /* remplace l'URL par ton image si besoin */
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  /* si tu veux un effet fixe: décommente la ligne suivante */
  /* background-attachment: fixed; */
  min-height: 100vh;
}

/* — Conteneur principal — */
.container { padding: 24px; }

/* — Boîte blanche lisible — */
.white-box {
  background: #fff;
  padding: 28px;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
  margin: 22px auto;       /* espace vertical entre boîtes */
  max-width: 980px;
}

/* plus besoin de .stack : on peut l’ignorer ou laisser sans effet */
.stack > .section + .section { margin-top: 0; } /* neutralisé */

.section { /* respiration interne */
  scroll-margin-top: 80px; /* utile si tu as un header fixe */
}

/* — Typo & titres — */
.kicker { font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: #0b4a6f; margin: 0 0 6px; }
h1 { font-size: 28px; margin: 0 0 8px; line-height: 1.2; }
h2 { font-size: 22px; margin: 0 0 10px; line-height: 1.25; }
h3 { font-size: 18px; margin: 0 0 6px; }
.section p { margin: 6px 0 10px; line-height: 1.55; }

/* — Boutons — */
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }
.btn, .btn-secondary {
  display: inline-block; padding: 10px 14px; border-radius: 8px; text-decoration: none;
}
.btn { background:#0b4a6f; color:#fff; }
.btn:hover { filter: brightness(1.05); }
.btn-secondary { background:#e9f2f7; color:#0b4a6f; }

/* — Cartes — */
.cards { list-style:none; padding:0; margin:0; display:grid; gap:12px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .cards { grid-template-columns: repeat(3, 1fr); } }
.card { background:#f8fbfd; border:1px solid #e6eef3; border-radius:10px; padding:14px; }

/* — Encadré chiffres — */
.highlight { background:#f6fafe; border:1px solid #dbe9f3; border-radius:10px; padding:12px; }
.note { color:#5a6a75; font-size: 14px; }

/* — Étapes — */
.etapes { padding-left: 18px; }
.etapes li { margin-bottom: 6px; }

/* — Petits utilitaires — */
.small { font-size: 14px; }
.visually-hidden { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }






/* Correctif : le menu reste au-dessus du footer */
/* ====== Sous-menus latéraux ====== */
#nav-proprio .menu{ list-style:none; margin:0; padding:0; }
#nav-proprio .menu > li{ position:relative; }
#nav-proprio .menu > li > a{
  display:flex; align-items:center; justify-content:center;
  height:44px; padding:8px 10px;
  border-radius:6px; color:#fff; font-weight:bold; text-decoration:none;
}
#nav-proprio .menu > li > a:hover{ background:rgba(255,255,255,.12); }

#nav-proprio .has-sub > a::after{ content:"›"; margin-left:6px; }

#nav-proprio .submenu{
  list-style:none; margin:0; padding:8px;
  position:absolute; top:0; left:160px;
  min-width:200px;
  background:linear-gradient(#063d70,#083a66);
  border-radius:10px; display:none; z-index:3000;
}
#nav-proprio .submenu li a{
  display:block; padding:10px; border-radius:6px;
  color:#fff; text-decoration:none; text-align:left;
}
#nav-proprio .submenu li a:hover{ background:rgba(255,255,255,.12); }

#nav-proprio .has-sub:hover > .submenu,
#nav-proprio .has-sub:focus-within > .submenu{ display:block; }

@media (max-width:820px){
  #nav-proprio .submenu{ display:none !important; }
  #nav-proprio .has-sub > a::after{ content:""; }
}

/* Le footer passe sous le menu (ne recouvre plus la colonne gauche) */
footer, #footer, .site-footer{
  z-index:1 !important;
  position:relative; /* utile si le footer était encore en 'static' */
}