/* ============================================================
   GLG Maison Tropic Concept — glg-shared.css
   CSS commun à index.php ET modeles-maisons-guadeloupe.php
   ============================================================ */

/* ── TOKENS ───────────────────────────────────────────────── */
:root {
  --black:      #0E0E0E;
  --blue:       #24c1db;
  --blue-mid:   #3fc7c8;
  --blue-green: #0fdc8f;
  --gold:       #E8C9A0;
  --gray:       #DADADA;
  --ivory:      #FAF9F6;
  --gradient-vertical:      linear-gradient(0deg, #0fdc8f 0%, #3fc7c8 50%, #24c1db 100%);
  --gradient-vertical-dark: linear-gradient(0deg, rgba(15,220,143,.6) 0%, rgba(63,199,200,.6) 50%, rgba(36,193,219,.6) 100%);
}

/* ── BASE ─────────────────────────────────────────────────── */
body {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--black);
  color: var(--ivory);
  padding-bottom: 80px;
}
h1, h2, h3, h4 {
  font-family: 'Montserrat', sans-serif;
  text-shadow: 0 2px 8px rgba(0,0,0,.7);
}
.h2 { color: var(--blue); font-weight: bold; text-transform: uppercase; }
.h3 { color: var(--blue-green); font-weight: 200; }
a { color: var(--gold); text-shadow: 0 1px 6px rgba(0,0,0,.7); }
a:hover { opacity: .85; }

/* ── UTILITAIRES ──────────────────────────────────────────── */
.section     { padding: 64px 0; }
.glass       { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(8px); }
.border-soft { border: 1px solid rgba(255,255,255,.08); }
.text-muted  { color: var(--gray) !important; }
.shadow-soft { box-shadow: 0 20px 40px rgba(0,0,0,.25); }
.chip        { background: rgba(205,170,125,.12); color: var(--gold); border: 1px solid rgba(205,170,125,.3); }
.divider     { height: 1px; background: linear-gradient(90deg, transparent, rgba(205,170,125,.4), transparent); }
.gallery img { aspect-ratio: 4/3; object-fit: cover; }

/* ── BOUTONS ──────────────────────────────────────────────── */
.btn-primary {
  background: var(--gradient-vertical);
  border: none; color: var(--ivory); font-weight: 600;
  transition: all .3s ease;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(36,193,219,.4);
  color: var(--ivory);
}
.btn-outline-gold { border: 1px solid var(--gold); color: var(--gold); }
.btn-outline-gold:hover { background: var(--gold); color: var(--black); }

/* ── NAVBAR ───────────────────────────────────────────────── */
.navbar {
  background: var(--gradient-vertical-dark) !important;
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(0,0,0,.3);
}

/* ── ICÔNES ───────────────────────────────────────────────── */
.fas, .fab { margin-right: 5px; }
.fa-phone-alt, .fa-envelope, .fa-paper-plane { color: var(--blue); }
.fa-home, .fa-rocket { color: var(--gold); }
.fa-palette, .fa-drafting-compass, .fa-file-contract, .fa-hard-hat { font-size: 1.2em; }

/* ── RÉSEAUX SOCIAUX (sticky mobile) ─────────────────────── */
.social-sticky-mobile {
  position: fixed; bottom: 80px; right: 15px; z-index: 1040;
  background: var(--gradient-vertical);
  width: 50px; height: 50px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(36,193,219,.5);
  cursor: pointer; transition: all .3s ease;
}
.social-sticky-mobile:hover { transform: scale(1.1); box-shadow: 0 6px 30px rgba(36,193,219,.7); }
.social-sticky-mobile i { color: var(--ivory); font-size: 20px; }

.social-menu-mobile {
  position: fixed; bottom: 140px; right: 15px; z-index: 1039;
  display: none; flex-direction: column; gap: 10px;
  animation: slideUp .3s ease;
}
.social-menu-mobile.active { display: flex; }
.social-menu-mobile a {
  width: 45px; height: 45px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; transition: all .3s ease;
  box-shadow: 0 4px 15px rgba(0,0,0,.3);
}
.social-menu-mobile a:hover { transform: translateY(-3px); box-shadow: 0 6px 25px rgba(0,0,0,.5); }
.social-menu-mobile a.facebook  { background: #1877F2; color: white; }
.social-menu-mobile a.instagram { background: linear-gradient(45deg,#f09433,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888); color: white; }
.social-menu-mobile a.linkedin  { background: #0A66C2; color: white; }
.social-menu-mobile a i { font-size: 20px; }

/* Réseaux sociaux desktop (footer) */
.social-links { display: flex; gap: 15px; align-items: center; }
.social-links a {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; transition: all .3s ease;
  box-shadow: 0 4px 15px rgba(0,0,0,.2);
}
.social-links a:hover { transform: translateY(-3px); box-shadow: 0 6px 25px rgba(0,0,0,.4); }
.social-links a.facebook  { background: #1877F2; color: white; }
.social-links a.instagram { background: linear-gradient(45deg,#f09433,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888); color: white; }
.social-links a.linkedin  { background: #0A66C2; color: white; }
.social-links a i { font-size: 18px; }

@media (min-width: 992px) {
  .social-sticky-mobile, .social-menu-mobile { display: none !important; }
}

/* ── ANIMATIONS ───────────────────────────────────────────── */
@keyframes slideUp {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes workerWalk {
  0%  { left:0; transform:scaleX(1); }
  48% { left:calc(100% - 80px); transform:scaleX(1); }
  50% { left:calc(100% - 80px); transform:scaleX(-1); }
  98% { left:0; transform:scaleX(-1); }
  100%{ left:0; transform:scaleX(1); }
}
@keyframes workerBounce {
  0%,100%{ transform:translateY(0) scaleX(1); }
  25%    { transform:translateY(-5px) scaleX(1); }
  50%    { transform:translateY(0) scaleX(-1); }
  75%    { transform:translateY(-5px) scaleX(-1); }
}
@keyframes progressBar { 0%,100%{width:0%} 50%{width:100%} }
@keyframes textPulse   { 0%,100%{opacity:.6} 50%{opacity:1} }
@keyframes houseGlow   { 0%,100%{filter:drop-shadow(0 0 5px rgba(36,193,219,.3))} 50%{filter:drop-shadow(0 0 15px rgba(36,193,219,.6))} }
@keyframes glgGlow     { 0%,100%{text-shadow:0 2px 8px rgba(205,170,125,.5)} 50%{text-shadow:0 2px 20px rgba(205,170,125,.9),0 0 30px rgba(205,170,125,.5)} }
@keyframes dustRise    { 0%{transform:translateY(0) scale(1);opacity:0} 20%{opacity:.6} 100%{transform:translateY(-30px) scale(0);opacity:0} }

.worker       { animation: workerWalk 15s ease-in-out infinite, workerBounce .5s ease-in-out infinite; }
.progress-bar { animation: progressBar 15s ease-in-out infinite; }
.info-text    { animation: textPulse 2s ease-in-out infinite; }
.house-left   { animation: houseGlow 4s ease-in-out infinite; }
.glg-logo     { animation: glgGlow 4s ease-in-out infinite 2s; }

/* ── FOOTER ───────────────────────────────────────────────── */
footer a:hover { opacity: .8; transform: translateX(5px); }
footer .social-links:hover { transform: translateY(-5px) scale(1.1); box-shadow: 0 8px 25px rgba(36,193,219,.5); }

/* ── MODAL ÉTUDE GRATUITE ─────────────────────────────────── */
#modalEtude .modal-content {
  background: linear-gradient(180deg,rgba(14,14,14,.98),rgba(14,14,14,.95));
  border: 2px solid rgba(36,193,219,.3);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
#modalEtude .modal-header {
  border-bottom: 2px solid rgba(36,193,219,.2);
  background: var(--gradient-vertical-dark);
  border-radius: 14px 14px 0 0;
}
#modalEtude .form-control:focus,
#modalEtude .form-select:focus {
  border-color: var(--blue) !important;
  box-shadow: 0 0 0 3px rgba(36,193,219,.2) !important;
  background: rgba(36,193,219,.05) !important;
}
#modalEtude .form-check-input:checked {
  background-color: var(--blue);
  border-color: var(--blue);
}
.modal.fade .modal-dialog { transform: scale(.8); transition: transform .3s ease-out; }
.modal.show .modal-dialog { transform: scale(1); }

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 991px) {
  .navbar .container { justify-content: center !important; }
  .navbar-brand { margin: 0 auto; }
  footer h2, footer h4, footer .h2, footer .h4, footer .h5 { text-align: center !important; }
}
@media (max-width: 768px) {
  .worker-animation-container { height: 80px !important; }
  .worker { font-size: 35px !important; }
  .house-left { font-size: 40px !important; }
  .glg-logo { font-size: 18px !important; }
}
@media (max-width: 575px) {
  .navbar-brand img { max-width: 140px; }
  footer h4, footer .h4, footer .h5 { font-size: 1rem !important; }
}

/* ══════════════════════════════════════════════════════════
   LIGHTBOX — zoom image carousel
══════════════════════════════════════════════════════════ */

/* Curseur loupe sur les images cliquables */
.lightbox-trigger {
  cursor: zoom-in;
}

/* Icône loupe au hover — via .lb-zoom-hint dans le HTML */
.lb-zoom-hint {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(14,14,14,.6);
  backdrop-filter: blur(4px);
  box-shadow: 0 4px 20px rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  color: rgba(255,255,255,.9);
  opacity: 0;
  transition: opacity .2s;
  z-index: 5;
  pointer-events: none;
}
.card-carousel:hover .lb-zoom-hint { opacity: 1; }

/* Overlay */
#glgLightboxOverlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,.96);
  backdrop-filter: blur(14px);
  align-items: center;
  justify-content: center;
  animation: lbFadeIn .25s ease;
}
#glgLightboxOverlay.active { display: flex; }

@keyframes lbFadeIn { from{opacity:0} to{opacity:1} }
@keyframes lbImgIn  { from{opacity:0;transform:scale(.94)} to{opacity:1;transform:scale(1)} }

/* Wrapper image */
#glgLbImgWrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%; height: 100%;
  padding: 70px 80px 90px;
}
#glgLbImg {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 20px 80px rgba(0,0,0,.7);
  animation: lbImgIn .3s ease;
  user-select: none;
  -webkit-user-drag: none;
}

/* Fermer */
#glgLbClose {
  position: absolute; top: 18px; right: 20px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  color: #FAF9F6; width: 44px; height: 44px; border-radius: 50%;
  font-size: 1.1rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s; z-index: 10001; backdrop-filter: blur(6px);
}
#glgLbClose:hover { background: rgba(255,255,255,.22); transform: scale(1.1); }

/* Prev / Next */
#glgLbPrev, #glgLbNext {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15);
  color: #FAF9F6; width: 52px; height: 52px; border-radius: 50%;
  font-size: 1.1rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s; z-index: 10001; backdrop-filter: blur(6px);
}
#glgLbPrev { left: 16px; }
#glgLbNext { right: 16px; }
#glgLbPrev:hover, #glgLbNext:hover {
  background: rgba(36,193,219,.3);
  border-color: rgba(36,193,219,.5);
  transform: translateY(-50%) scale(1.08);
}
#glgLbPrev.lb-hidden, #glgLbNext.lb-hidden { opacity: 0; pointer-events: none; }

/* Légende */
#glgLbCaption {
  position: absolute; bottom: 48px; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,.75); font-family: 'Inter',sans-serif;
  font-size: .82rem; letter-spacing: .06em; text-align: center;
  background: rgba(14,14,14,.6); padding: 6px 18px; border-radius: 20px;
  backdrop-filter: blur(6px); white-space: nowrap;
  max-width: 90vw; overflow: hidden; text-overflow: ellipsis;
}

/* Dots */
#glgLbCounter {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px; align-items: center;
}
.lb-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,.3); transition: background .2s, transform .2s;
}
.lb-dot.lb-dot-active { background: #24c1db; transform: scale(1.35); }

/* Mobile */
@media (max-width: 600px) {
  #glgLbImgWrap  { padding: 60px 10px 80px; }
  #glgLbPrev     { left: 6px; width: 40px; height: 40px; font-size: .9rem; }
  #glgLbNext     { right: 6px; width: 40px; height: 40px; font-size: .9rem; }
  #glgLbCaption  { font-size: .72rem; bottom: 40px; }
}