/* ============================================================
   GLOBAL.CSS — BAYS IMMOBILIER
   Variables, reset, typographie, utilitaires communs
   ============================================================ */

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

/* VARIABLES */
:root {
  --white:       #FFFFFF;
  --cream:       #F5F0EB;
  --beige-light: #EDE5DC;
  --taupe:       #C4AF9A;
  --gold:        #B9A189;
  --gold-dark:   #8B7355;
  --darker-gold: #A68B73;
  --light-gold:  #E5D4C1;
  --text:        #1a1a1a;
  --text-mid:    #6B5A47;
  --text-light:  #9A8878;
  --text-secondary: #6b6b6b;
  --black:       #1a1a1a;
  --border:      rgba(185,161,137,0.25);
  --border-light:#e8e8e8;
  --shadow:      0 6px 32px rgba(58,46,34,0.09);
  --shadow-hov:  0 16px 56px rgba(58,46,34,0.16);
  --shadow-sm:   0 2px 8px rgba(0,0,0,.08);
  --shadow-md:   0 4px 16px rgba(0,0,0,.12);
  --shadow-lg:   0 8px 32px rgba(0,0,0,.16);
  --transition:  0.32s cubic-bezier(0.4,0,0.2,1);
  --font:        Times New Roman, Times, serif;
}

/* BASE */
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--white);
  color: var(--text);
  line-height: 1.75;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a   { text-decoration: none; color: inherit; }
h1, h2, h3, h4 {
  font-family: var(--font);
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* TYPOGRAPHIE SECTIONS */
.section-label {
  display: block;
  font-size: 0.60rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.85rem;
}
.section-title {
  font-family: var(--font);
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.22;
}
.section-divider {
  width: 34px; height: 1px;
  background: var(--gold);
  margin: 1rem auto;
}

/* BOUTONS COMMUNS */
.btn-gold {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  background: var(--gold);
  color: var(--white);
  border: 2px solid var(--gold);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: all var(--transition);
  cursor: pointer;
}
.btn-gold:hover {
  background: var(--gold-dark);
  border-color: var(--gold-dark);
  transform: translateY(-2px);
  color: var(--white);
}
.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  background: transparent;
  color: var(--text);
  border: 2px solid var(--border);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: all var(--transition);
  cursor: pointer;
}
.btn-outline:hover {
  border-color: var(--gold);
  color: var(--gold);
  transform: translateY(-2px);
}

/* CONTAINER */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* SOCIAL BUTTONS */
.social-btn {
  width: 48px; height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 20px;
  border: 2px solid rgba(255,255,255,.3);
  transition: all 0.6s cubic-bezier(.4,0,.2,1);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(15px);
  box-shadow: 0 4px 15px rgba(255,255,255,.1);
}
.social-btn::before {
  content: ;
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  transform: translate(-50%,-50%);
  transition: width .4s, height .4s;
  z-index: 0;
}
.social-btn i { position: relative; z-index: 1; transition: transform .3s ease; }
.social-btn:hover i { transform: scale(1.15); }
.social-btn:hover::before { width: 120%; height: 120%; }
.social-btn.instagram { color: #E4405F; border-color: #E4405F; }
.social-btn.instagram::before { background: linear-gradient(45deg,#F58529,#DD2A7B,#8134AF,#515BD4); }
.social-btn.instagram:hover { color: #fff; border-color: transparent; }
.social-btn.facebook { color: #1877F2; border-color: #1877F2; }
.social-btn.facebook::before { background: #1877F2; }
.social-btn.facebook:hover { color: #fff; border-color: transparent; }
.social-btn.youtube { color: red; border-color: red; }
.social-btn.youtube::before { background: red; }
.social-btn.youtube:hover { color: #fff; border-color: transparent; }
.social-btn.x-twitter { color: #000; border-color: rgba(255,255,255,.5); }
.social-btn.x-twitter::before { background: #000; }
.social-btn.x-twitter:hover { color: #fff; border-color: transparent; }
.social-btn.linkedin { color: #0A66C2; border-color: #0A66C2; }
.social-btn.linkedin::before { background: #0A66C2; }
.social-btn.linkedin:hover { color: #fff; border-color: transparent; }
.social-btn.google-maps { color: #4285F4; border-color: #4285F4; }
.social-btn.google-maps::before { background: linear-gradient(45deg,#4285F4,#34A853,#FBBC05,#EA4335); }
.social-btn.google-maps:hover { color: #fff; border-color: transparent; }

/* FOOTER CREDIT */
.footer-credit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,.9);
}
.footer-credit a {
  color: #dc3545;
  text-decoration: none;
  font-weight: 600;
  transition: all .3s ease;
}
.footer-credit a:hover { color: #ff4757; text-decoration: underline; }
.heart {
  display: inline-block;
  width: 14px; height: 14px;
  position: relative;
  animation: heartbeat 1.5s ease-in-out infinite;
}
.heart::before, .heart::after {
  content: "";
  position: absolute;
  top: 0;
  width: 7px; height: 11px;
  background: #dc3545;
  border-radius: 7px 7px 0 0;
}
.heart::before { left: 7px; transform: rotate(-45deg); transform-origin: 0 100%; }
.heart::after  { left: 0;  transform: rotate(45deg);  transform-origin: 100% 100%; }
@keyframes heartbeat {
  0%,100% { transform: scale(1); }
  10%,30% { transform: scale(1.1); }
  20%,40% { transform: scale(1); }
}

/* RESPONSIVE BASE */
@media (max-width: 768px) {
  .container { padding: 0 16px; }
  .footer-credit { flex-direction: column; gap: 4px; font-size: 12px; }
  .social-btn { width: 44px; height: 44px; font-size: 18px; }
}
@media (max-width: 480px) {
  .container { padding: 0 12px; }
  .social-btn { width: 42px; height: 42px; font-size: 16px; }
}