/* ==================================================
   VARIABLES STRUCTURE
================================================== */
:root {
  --header-height: 78px;
  --services-height: 44px;
  --footer-height: 30px;

  --sidebar-width-desktop: 260px;
  --sidebar-width-mobile: 140px;
}

/* ==================================================
   RESET / BASE
================================================== */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: #f8f8f8;
  color: #222;
}

a {
  color: #333;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ==================================================
   HEADER FIXE (PROPRE)
================================================== */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  z-index: 1000;

  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 0 30px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

header .logo {
  font-size: 1.4em;
  font-weight: bold;
}

header nav ul {
  list-style: none;
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0;
}

/* ==================================================
   COLONNES FIXES
================================================== */
.sidebar-left,
.sidebar-right {
  position: fixed;
  top: var(--header-height);
  bottom: calc(var(--services-height) + var(--footer-height));
  width: var(--sidebar-width-desktop);

  background: #fff;
  padding: 16px;
  overflow-y: auto;

  box-shadow: 0 0 8px rgba(0,0,0,0.12);
  z-index: 500;
}

.sidebar-left { left: 0; }
.sidebar-right { right: 0; }

.sidebar-left img.logo-agence {
  width: 160px;
  display: block;
  margin: 0 auto 15px;
}

.sidebar-left img.photo-interlocuteur {
  width: 100%;
  max-width: 220px;
  display: block;
  margin: 0 auto 15px;
  border-radius: 6px;
}

/* ==================================================
   ZONE CENTRALE
================================================== */
.main-container {
  margin-top: var(--header-height);
  margin-left: var(--sidebar-width-desktop);
  margin-right: var(--sidebar-width-desktop);
}

/* ==================================================
   SLIDER
================================================== */
.slider-container {
  position: relative;
  width: 100%;
  height: calc(
    100vh
    - var(--header-height)
    - var(--services-height)
    - var(--footer-height)
  );
  overflow: hidden;
}

.slider {
  position: relative;
  width: 100%;
  height: 100%;
}

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}

.slide.active {
  opacity: 1;
  z-index: 2;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==================================================
   OVERLAY SLIDE (LOGO + TEXTE)
================================================== */
.slide-overlay {
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
  z-index: 10;
}

.slide-overlay img.logo-slide {
  width: 180px;
  max-width: 80%;
  opacity: 0;
  animation: logoFadeZoom 6s ease-in-out infinite;
}

.slide-overlay p {
  margin-top: 14px;
  font-size: 1.5em;
  font-weight: 500;
  color: #fff;
  text-shadow: 2px 2px 8px rgba(0,0,0,0.7);
  opacity: 0;
  animation: textFade 6s ease-in-out infinite;
}

@keyframes logoFadeZoom {
  0%   { opacity: 0; transform: scale(0.95); }
  20%  { opacity: 1; transform: scale(1); }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.05); }
}

@keyframes textFade {
  0%   { opacity: 0; transform: translateY(10px); }
  25%  { opacity: 1; transform: translateY(0); }
  70%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ==================================================
   DOTS
================================================== */
.slider-dots {
  position: absolute;
  bottom: 18px;
  width: 100%;
  text-align: center;
  z-index: 10;
}

.slider-dots span {
  width: 12px;
  height: 12px;
  margin: 0 5px;
  display: inline-block;
  background: rgba(255,255,255,0.6);
  border-radius: 50%;
  cursor: pointer;
}

.slider-dots span.active {
  background: #fff;
}

/* ==================================================
   BARRE SERVICES
================================================== */
.services-bar {
  position: fixed;
  bottom: var(--footer-height);
  left: 0;
  right: 0;
  height: var(--services-height);

  background: #333;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;

  z-index: 900;
}

.services-bar button {
  padding: 8px 14px;
  background: #555;
  border: none;
  border-radius: 5px;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
}

.services-bar button:hover {
  background: #777;
}

/* ==================================================
   FOOTER FIXE
================================================== */
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--footer-height);

  background: #000;
  color: #fff;
  text-align: center;
  font-size: 0.8em;
  line-height: var(--footer-height);

  z-index: 800;
}

/* ==================================================
   SERVICES – VIEWER PDF DANS LE SLIDE
================================================== */
#services-viewer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: none;
  z-index: 2000;
}

#services-viewer {
  position: absolute;
  top: var(--header-height);
  left: var(--sidebar-width-desktop);
  width: calc(100vw - (2 * var(--sidebar-width-desktop)));
  height: calc(
    100vh
    - var(--header-height)
    - var(--services-height)
    - var(--footer-height)
  );

  background: #fff;
  display: flex;
  flex-direction: column;
}

.services-toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 8px 12px;
  background: #f5f5f5;
  border-bottom: 1px solid #ccc;
}

.services-toolbar button,
.services-toolbar a {
  background: #555;
  color: #fff;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  text-decoration: none;
}

.services-toolbar button:hover,
.services-toolbar a:hover {
  background: #777;
}

#services-frame {
  flex: 1;
  width: 100%;
  border: none;
}

/* ==================================================
   RESPONSIVE
================================================== */
@media (max-width: 768px) {
  .sidebar-left,
  .sidebar-right {
    width: var(--sidebar-width-mobile);
  }

  .main-container {
    margin-left: var(--sidebar-width-mobile);
    margin-right: var(--sidebar-width-mobile);
  }

  #services-viewer {
    left: var(--sidebar-width-mobile);
    width: calc(100vw - (2 * var(--sidebar-width-mobile)));
  }

  .slide-overlay img.logo-slide {
    width: 140px;
  }

  .slide-overlay p {
    font-size: 1.2em;
  }
}

/* =====================================
   OVERLAY MENU HAUT (RGPD / CONTACT / ETC)
===================================== */

#menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: none;
  z-index: 3000;
}

/* exactement la zone du slide */
#menu-overlay-content {
  position: absolute;
  top: var(--header-height);
  left: var(--sidebar-width-desktop);
  width: calc(100vw - (2 * var(--sidebar-width-desktop)));
  height: calc(
    100vh
    - var(--header-height)
    - var(--services-height)
    - var(--footer-height)
  );
  background: #fff;
  display: flex;
  flex-direction: column;
}

/* barre du haut */
.menu-overlay-toolbar {
  padding: 8px 12px;
  background: #333;
  text-align: right;
}

.menu-overlay-toolbar button {
  background: #555;
  color: #fff;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
}

/* PDF */
#menu-overlay-pdf {
  flex: 1;
  width: 100%;
  border: none;
  overflow-y: auto;
  max-height: 100%;
}

/* HTML */
#menu-overlay-html {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  max-height: 100%;
}

/* =====================================
   OVERLAY MENU HAUT (RGPD / CONTACT / ETC)
===================================== */

#menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: none;
  z-index: 3000;
}

/* exactement la zone du slide */
#menu-overlay-content {
  position: absolute;
  top: var(--header-height);
  left: var(--sidebar-width-desktop);

  width: calc(100vw - (2 * var(--sidebar-width-desktop)));

  height: calc(
    100vh
    - var(--header-height)
    - var(--services-height)
    - var(--footer-height)
  );

  max-height: calc(
    100vh
    - var(--header-height)
    - var(--services-height)
    - var(--footer-height)
  );

  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
}

/* barre du haut */
.menu-overlay-toolbar {
  padding: 8px 12px;
  background: #333;
  text-align: right;
}

.menu-overlay-toolbar button {
  background: #555;
  color: #fff;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
}

/* PDF */
#menu-overlay-pdf {
  flex: 1;
  width: 100%;
  border: none;
}

/* HTML */
#menu-overlay-html {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}
.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 20px;
}

.checkbox-grid label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: normal;
}
/* ===== COLONNE GAUCHE – AGENT PREMIUM ===== */

.agent-card-left {
  text-align: center;
}

.agent-photo-left {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 50%;
  margin: 10px auto 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.agent-name-left {
  font-weight: bold;
  font-size: 1.05em;
  margin-bottom: 4px;
}

.agent-title-left {
  font-size: 0.85em;
  color: #666;
  margin-bottom: 12px;
}

.agent-contact-left p {
  margin: 5px 0;
  font-size: 0.9em;
}

.agent-contact-left a {
  color: #222;
  text-decoration: none;
}

.agent-contact-left a:hover {
  text-decoration: underline;
}
/* ===== CONTENEUR BIENS (TAILLE SLIDE) ===== */
.biens-container {
  height: calc(
    100vh
    - var(--header-height)
    - var(--services-height)
    - var(--footer-height)
  );
  overflow-y: auto;
  padding-bottom: 20px;
}

/* Scroll discret */
.biens-container::-webkit-scrollbar {
  width: 6px;
}

.biens-container::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.2);
  border-radius: 3px;
}
/* =========================
   SIDEBAR – RÉSEAUX SOCIAUX
========================= */
.sidebar-right iframe {
  width: 100%;
  border: none;
  border-radius: 6px;
}

.social-block {
  margin-top: 25px;
  text-align: center;
}

.social-block h2 {
  margin-bottom: 12px;
  font-size: 1.1em;
}

.social-icons {
  display: flex;
  justify-content: center;
  gap: 18px;
}

.social-icons img {
  width: 36px;
  height: 36px;
  transition: transform .2s ease, opacity .2s ease;
}

.social-icons a:hover img {
  transform: scale(1.1);
  opacity: 0.85;
}
/* ===============================
   DERNIERS BIENS – HOME
================================ */

.latest-biens {
  padding: 20px 30px;
  background: #fff;
}

.latest-biens h2 {
  margin-bottom: 12px;
  font-size: 1.3em;
}

.latest-scroll {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 10px;
  scroll-behavior: smooth;
}

.latest-scroll::-webkit-scrollbar {
  height: 6px;
}

.latest-scroll::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.25);
  border-radius: 3px;
}

.latest-card {
  text-decoration: none;
  color: inherit;
  flex: 0 0 auto;
}

.latest-card-inner {
  width: 220px;
  background: #000;
  border-radius: 6px;
  overflow: hidden;
}

.latest-photo {
  position: relative;
  height: 140px;
}

.latest-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.latest-info {
  background: #111;
  color: #fff;
  padding: 10px;
}

.latest-info strong {
  display: block;
  font-size: .95em;
}

.latest-info span {
  display: block;
  font-size: .8em;
}

.latest-info .prix {
  font-weight: bold;
  margin-top: 4px;
}
/* ===============================
   DERNIERS BIENS – HOME
================================ */

.home-derniers-biens {
  background:#f4f4f4;
  padding:20px 30px;
}

.home-derniers-biens h2 {
  margin:0 0 15px;
  font-size:1.3em;
}

.derniers-biens-scroll {
  display:flex;
  gap:15px;
  overflow-x:auto;
  padding-bottom:10px;
  scroll-snap-type:x mandatory;
}

.derniers-biens-scroll::-webkit-scrollbar {
  height:6px;
}
.derniers-biens-scroll::-webkit-scrollbar-thumb {
  background:#bbb;
  border-radius:3px;
}

.dernier-bien-card {
  min-width:220px;
  background:#fff;
  border-radius:6px;
  overflow:hidden;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
  text-decoration:none;
  color:#000;
  scroll-snap-align:start;
}

.dernier-bien-photo {
  position:relative;
  height:140px;
}

.dernier-bien-photo img {
  width:100%;
  height:100%;
  object-fit:contain;
  background:#000;
}

.dernier-bien-info {
  padding:10px;
}

.dernier-bien-info strong {
  display:block;
  font-size:.95em;
}

.dernier-bien-info span {
  font-size:.85em;
  color:#555;
}

.dernier-bien-info .prix {
  font-weight:bold;
  margin-top:4px;
  color:#000;
}
/* ===============================
   DERNIERS BIENS – OVERLAY & BADGES
================================ */

.dernier-bien-card {
  min-width:220px;
  background:#fff;
  border-radius:6px;
  overflow:hidden;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
  text-decoration:none;
  color:#000;
}

.dernier-bien-photo {
  position:relative;
  height:150px;
  overflow:hidden;
}

.dernier-bien-photo img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* BADGES – alignés sur "Nos biens" */
.dernier-bien-photo .badges {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
}

/* OVERLAY FLOTTANT */
/* ===============================
   DERNIERS BIENS – OVERLAY HOVER
================================ */

.dernier-bien-overlay {
  position:absolute;
  inset:0;
  padding:12px;
  background:rgba(0,0,0,0.7);
  color:#fff;

  display:flex;
  flex-direction:column;
  justify-content:flex-end;

  opacity:0;
  transform:translateY(8px);
  transition:all .25s ease;
  z-index:2;
}

/* Apparition au survol */
.dernier-bien-card:hover .dernier-bien-overlay {
  opacity:1;
  transform:translateY(0);
}

/* Mobile : toujours visible */
@media (max-width: 768px) {
  .dernier-bien-overlay {
    opacity:1;
    transform:none;
    background:linear-gradient(
      to top,
      rgba(0,0,0,.85),
      rgba(0,0,0,.15)
    );
  }
}

.dernier-bien-overlay strong {
  display:block;
  font-size:.9em;
}

.dernier-bien-overlay span {
  display:block;
  font-size:.8em;
}

.dernier-bien-overlay .prix {
  font-weight:bold;
  margin-top:2px;
}
/* ===============================
   CORRECTION MASQUE BARRE SERVICES
================================ */

.home-derniers-biens {
  padding-bottom: calc(var(--services-height) + 20px);
}
/* ===============================
   BADGES – GLOBAL
================================ */

.badge {
  color:#fff;
  font-size:.7em;
  padding:5px 8px;
  border-radius:4px;
  font-weight:600;
  letter-spacing:.4px;
  text-transform:uppercase;
}

/* Couleurs */
.badge-neuf { background:#c9a227; }
.badge-nouveaute { background:#1e88e5; }
.badge-coupdecoeur { background:#e53935; }
.badge-exclusivite { background:#6a1b9a; }
.badge-vendu,
.badge-loue { background:#424242; }
.badge-souscompromis { background:#ef6c00; }
.badge-baisseprix { background:#00897b; }
.badge-urgent { background:#d32f2f; }
.bien-meta {
  font-size: .8em;
  opacity: .9;
  margin-top: 2px;
}
.search-box select {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.95em;
}
/* =========================================
   FIX FINAL – PHOTOS BIENS (NE JAMAIS COUPER)
========================================= */

/* Conteneur photo */
.latest-photo,
.dernier-bien-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  overflow: hidden;
}

/* Image toujours redimensionnée */
.latest-photo img,
.dernier-bien-photo img {
  width: auto !important;
  height: auto !important;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain !important;
}
/* =========================================
   FIX FINAL – PHOTOS "NOS BIENS"
   (REDIMENSIONNEMENT AUTOMATIQUE)
========================================= */

/* Cadre photo dans Nos biens */
.biens-container .bien-photo,
.biens-container .bien-image,
.biens-container .card-photo,
.biens-container .bien-visuel {
  width: 100%;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  overflow: hidden;
}

/* Image toujours contenue dans le cadre */
.biens-container img {
  width: auto !important;
  height: auto !important;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain !important;
}
/* =====================
   BOUTONS ACTION PDF
===================== */
.pdf-actions {
  text-align: right;
  margin-bottom: 12px;
}

.pdf-actions button,
.pdf-actions a {
  display: inline-block;
  padding: 6px 12px;
  margin-left: 6px;
  font-size: 11px;
  background: #111;
  color: #fff;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  text-decoration: none;
}

.pdf-actions button:hover,
.pdf-actions a:hover {
  background: #333;
}

/* NE PAS IMPRIMER LES BOUTONS */
@media print {
  .pdf-actions {
    display: none;
  }
}