/* ═══ GAMO Hôtel — styles de la page linkedin ═══ */

  :root {
    --sky:#3A9BD5; --sky-light:#EBF6FD; --sky-dark:#1A6FA3;
    --sky-deep:#0D4E78; --text:#0F2A3D; --border:rgba(58,155,213,0.18);
    --brand: #0A66C2; --brand2: #084f96;
  }
  * { margin:0; padding:0; box-sizing:border-box; }
  body { font-family:'DM Sans',sans-serif; background:#f8fafc; color:var(--text); min-height:100vh; }

  /* NAV */
  nav {
    position:fixed; top:0; left:0; right:0; z-index:1000;
    background:rgba(255,255,255,0.96); backdrop-filter:blur(12px);
    border-bottom:1px solid var(--border);
    display:flex; align-items:center; justify-content:space-between;
    padding:0 5%; height:68px;
  }
  .nav-logo { text-decoration:none; display:flex; align-items:center; }
  .nav-links { display:flex; align-items:center; gap:22px; list-style:none; }
  .nav-links a { font-size:15px; font-weight:500; color:var(--sky-dark); text-decoration:none; transition:color 0.2s; }
  .nav-links a:hover { color:var(--sky); }
  .btn-nav { background:var(--sky)!important; color:white!important; padding:9px 20px!important; border-radius:30px!important; font-size:14px!important; }
  @media(max-width:768px) { .nav-links { display:none; } }

  /* HERO BANNER */
  .hero {
    margin-top:68px;
    background: linear-gradient(135deg, #0A66C2 0%, #084f96 100%);
    padding: 56px 5% 44px;
    text-align:center;
    position:relative;
    overflow:hidden;
  }
  .hero::before {
    content:''; position:absolute; inset:0;
    background: radial-gradient(circle at 30% 50%, rgba(255,255,255,0.08) 0%, transparent 60%);
  }
  .hero-icon {
    width:80px; height:80px;
    background:rgba(255,255,255,0.15);
    border:2px solid rgba(255,255,255,0.3);
    border-radius:20px;
    display:inline-flex; align-items:center; justify-content:center;
    margin-bottom:20px;
    position:relative;
  }
  .hero h1 { font-family:'Playfair Display',serif; font-size:clamp(28px,4vw,44px); font-weight:700; color:white; margin-bottom:8px; }
  .hero .handle { font-size:16px; color:rgba(255,255,255,0.75); margin-bottom:6px; }
  .hero .url { font-size:13px; color:rgba(255,255,255,0.5); }

  /* MAIN CONTENT */
  .container { max-width:680px; margin:0 auto; padding:48px 5% 72px; }

  /* CONSTRUCTION CARD */
  .construction-card {
    background:white;
    border-radius:20px;
    padding:40px 36px;
    text-align:center;
    border:1px solid var(--border);
    box-shadow:0 4px 24px rgba(0,0,0,0.06);
    margin-bottom:24px;
  }
  .construction-badge {
    display:inline-flex; align-items:center; gap:8px;
    background:#e8f0f9;
    color:var(--brand);
    font-size:12px; font-weight:600;
    padding:6px 16px; border-radius:20px;
    text-transform:uppercase; letter-spacing:0.8px;
    margin-bottom:20px;
    border:1px solid rgba(10,102,194,0.2);
  }
  .construction-icon { font-size:48px; margin-bottom:16px; display:block; }
  .construction-card h2 {
    font-family:'Playfair Display',serif;
    font-size:24px; font-weight:700;
    color:var(--text); margin-bottom:12px;
  }
  .construction-card p {
    font-size:15px; color:#5a7a90;
    line-height:1.75; margin-bottom:24px;
  }

  /* PROGRESS BAR */
  .progress-wrap { text-align:left; margin-bottom:8px; }
  .progress-label { font-size:12px; color:#5a7a90; margin-bottom:6px; display:flex; justify-content:space-between; }
  .progress-bar {
    height:6px; background:#e8eef2; border-radius:4px; overflow:hidden;
  }
  .progress-fill {
    height:100%; width:25%;
    background: linear-gradient(135deg, #0A66C2 0%, #084f96 100%);
    border-radius:4px;
    animation: fill 2s ease forwards;
  }
  @keyframes fill { from { width:0; } to { width:25%; } }

  /* CTA BUTTONS */
  .cta-group { display:flex; flex-direction:column; gap:12px; margin-top:28px; }
  .btn-wa {
    display:flex; align-items:center; justify-content:center; gap:10px;
    background:#25D366; color:white;
    padding:14px 24px; border-radius:12px;
    font-size:15px; font-weight:500;
    text-decoration:none; transition:all 0.2s;
  }
  .btn-wa:hover { background:#1da851; transform:translateY(-1px); }
  .btn-home {
    display:flex; align-items:center; justify-content:center; gap:8px;
    background:var(--sky-light); color:var(--sky-dark);
    padding:13px 24px; border-radius:12px;
    font-size:14px; font-weight:500;
    text-decoration:none; transition:all 0.2s;
    border:1px solid var(--border);
  }
  .btn-home:hover { background:var(--sky); color:white; }

  /* OTHER SOCIALS */
  .other-socials {
    background:white; border-radius:16px;
    padding:24px 28px; border:1px solid var(--border);
    margin-bottom:24px;
  }
  .other-socials h3 {
    font-size:14px; font-weight:600; color:var(--text);
    margin-bottom:16px; text-align:center;
  }
  .socials-row {
    display:flex; align-items:center; justify-content:center; gap:10px;
  }
  .social-btn {
    width:40px; height:40px; border-radius:10px;
    display:inline-flex; align-items:center; justify-content:center;
    text-decoration:none; transition:all 0.2s; font-size:13px;
    color:white;
  }
  .social-btn:hover { transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,0.15); }
  .s-fb  { background:#1877F2; }
  .s-tw  { background:#000; }
  .s-ig  { background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
  .s-li  { background:#0A66C2; }
  .s-wa  { background:#25D366; }
  .s-yt  { background:#FF0000; }

  /* INFO CARD */
  .info-card {
    background:var(--sky-light);
    border-left:4px solid var(--sky);
    border-radius:0 12px 12px 0;
    padding:16px 20px;
    font-size:13px; color:var(--sky-dark);
    line-height:1.7;
  }

  /* FOOTER */
  footer{background:var(--sky-deep);color:white;padding:40px 5% 24px;}
  .footer-grid {
    display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 48px; margin-bottom: 48px;
    max-width: 1100px; margin-left: auto; margin-right: auto;
  }
  .footer-logo {
    font-family: 'Playfair Display', serif;
    font-size: 24px; font-weight: 700; color: white;
    margin-bottom: 14px;
  }
  .footer-logo span { color: var(--gold); }
  .footer-desc { font-size: 14px; color: rgba(255,255,255,0.6); line-height: 1.7; margin-bottom: 20px; }
  .footer-contacts a {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; color: rgba(255,255,255,0.75);
    text-decoration: none; margin-bottom: 8px;
    transition: color 0.2s;
  }
  .footer-contacts a:hover { color: white; }
  .footer-col h4 {
    font-size: 12px; font-weight: 500;
    text-transform: uppercase; letter-spacing: 1px;
    color: var(--sky-mid); margin-bottom: 18px;
  }
  .footer-col ul { list-style: none; }
  .footer-col ul li { margin-bottom: 10px; }
  .footer-col ul a {
    font-size: 14px; color: rgba(255,255,255,0.65);
    text-decoration: none; transition: color 0.2s;
  }
  .footer-col ul a:hover { color: white; }
  .footer-bottom{border-top:1px solid rgba(255,255,255,0.1);padding-top:20px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;max-width:1100px;margin:0 auto;}
  .footer-bottom p{font-size:12px;color:rgba(255,255,255,0.4);}
  .footer-legals { display: flex; gap: 20px; }
  .footer-legals a { font-size: 12px; color: rgba(255,255,255,0.4); text-decoration: none; }
  .footer-legals a:hover { color: rgba(255,255,255,0.8); }
  @media (max-width: 768px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
  }
  .wa-float {
    position:fixed; bottom:24px; right:24px; z-index:9999;
    background:#25D366; color:white; padding:12px 20px;
    border-radius:50px; font-size:14px; font-weight:500;
    text-decoration:none; box-shadow:0 4px 16px rgba(37,211,102,0.4);
    display:flex; align-items:center; gap:8px; transition:transform 0.2s;
  }
  .wa-float:hover { transform:translateY(-2px); }

  /* ═══ POSITIONNEMENT DÉFINITIF — TOPBAR + NAV + BODY ═══ */
  .topbar { position:fixed!important; top:0!important; left:0!important; right:0!important; z-index:1001!important; height:72px!important; }
  nav { top:72px!important; }
  body { padding-top:140px!important; }
  @media(max-width:640px){
    .topbar{display:none!important;}
    nav{top:0!important;}
    body{padding-top:68px!important;}
  }
  
  /* ═══ COMPTEUR DE VISITES ═══ */
  .visit-counter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: rgba(255,255,255,0.45);
    margin-top: 6px;
  }
  .visit-counter svg { opacity: 0.5; flex-shrink: 0; }
  .visit-counter span { font-variant-numeric: tabular-nums; }