@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@500;600;800&family=Quicksand:wght@400;500;600;700&display=swap');
:root{--bleu:#00243c;--bleu2:#13395c;--txt:#eef3f8;--mut:#b6c3d3;--rad:16px;--sh:0 10px 30px rgba(0,0,0,.18)}
*{box-sizing:border-box}html,body{margin:0;padding:0;scroll-behavior:smooth}
body{font-family:'Quicksand',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;color:var(--txt);background:linear-gradient(180deg,#061a2d 0%,#00243c 45%,#143e66 100%);line-height:1.7}
h1,h2,h3,h4,strong,.title{font-family:'Rubik','Quicksand',system-ui;letter-spacing:.2px}
a{color:inherit;text-decoration:none}img{max-width:100%;display:block}
.skip{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip:focus{left:12px;top:12px;width:auto;height:auto;background:#000;color:#fff;padding:8px 10px;border-radius:8px}
.nav{position:sticky;top:0;z-index:50;background:linear-gradient(90deg, rgba(4,17,31,.95), rgba(11,45,79,.92));backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.08)}
.nav .inner{display:flex;align-items:center;justify-content:space-between;padding:10px 6vw}
.nav .brand{display:flex;align-items:center;gap:12px}
.nav .brand img{width:58px;height:58px;filter:drop-shadow(0 0 14px rgba(255,136,0,.35))}
.nav .brand b{font-weight:800;color:#fff}
.nav .menu{display:flex;gap:20px}
.nav .menu a{color:#fff;font-weight:700;opacity:.95}
.nav .menu a:hover{opacity:1}
.cta{padding:10px 16px;border-radius:999px;background:#fff;color:#0b2d4f;font-weight:800;border:2px solid transparent}
.cta:hover{transform:translateY(-1px);box-shadow:var(--sh)}
.hero{min-height:88vh;display:grid;place-items:center;color:#fff;text-align:center;padding:10vh 4vw;background:#0b2d4f url('./assets/photos/hero.jpg') center/cover no-repeat;position:relative}
.hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.55))}
.hero > .container{position:relative;z-index:1}
.hero h1{font-size:clamp(32px,5.6vw,70px);margin:0 0 12px;text-shadow:0 4px 16px rgba(0,0,0,.45)}
.hero p{font-size:clamp(16px,2.1vw,22px);opacity:.98;margin:6px 0 20px}
.hero .buttons{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn{padding:12px 18px;border-radius:14px;border:1px solid rgba(255,255,255,.25);color:#fff;font-weight:700;background:rgba(255,255,255,.10)}
.btn:hover{background:rgba(255,255,255,.18);transform:translateY(-1px)}
.container{width:clamp(280px,92vw,1160px);margin:0 auto}
.section{padding:80px 0}
.title{font-size:clamp(24px,3.4vw,40px);margin:0 0 10px;color:#fff}
.subtitle{color:var(--mut);margin:0 0 28px}
.badge,.kicker{display:inline-block;background:rgba(255,255,255,.1);color:#fff;padding:6px 10px;border-radius:999px;font-weight:800;font-size:12px;letter-spacing:.5px;border:1px solid rgba(255,255,255,.2)}
.grid2{display:grid;grid-template-columns:1.15fr .85fr;gap:32px;align-items:center}
.card{background:rgba(255,255,255,.06);border-radius:var(--rad);box-shadow:var(--sh);padding:24px;border:1px solid rgba(255,255,255,.12)}
.banner{height:52vh;border-radius:var(--rad);background-position:center;background-size:cover;display:grid;place-items:center;color:#fff;text-align:center;padding:10vh 3vw;position:relative;overflow:hidden}
.banner::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg, rgba(11,45,79,.1), rgba(11,45,79,.55))}
.banner .inner{position:relative;z-index:1}.banner h3{font-size:clamp(22px,3.4vw,38px);margin:0 0 8px}
.gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.tile{grid-column:span 12;border-radius:18px;min-height:340px;position:relative;overflow:hidden;background-position:center;background-size:cover}
.tile .label{position:absolute;left:14px;bottom:12px;color:#fff;font-weight:800;text-shadow:0 2px 8px rgba(0,0,0,.45)}
.contactgrid{display:grid;grid-template-columns:1.1fr .9fr;gap:22px}
.input,textarea{width:100%;padding:14px;border-radius:12px;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.15);color:#fff}
textarea{min-height:140px}.form .cta{background:#fff;color:#0b2d4f}
.footer{padding:42px 6vw;background:#0e3961;color:#fff;margin-top:34px}
.footer a{color:#fff;text-decoration:underline}
.footer .brand img{width:100px;height:100px;filter:drop-shadow(0 0 14px rgba(255,136,0,.35))}
@media (max-width:980px){.grid2,.contactgrid{grid-template-columns:1fr}.banner{height:auto}.gallery .tile{grid-column:span 12}}
.reveal{opacity:0;transform:translateY(16px);transition:.5s ease}.reveal.on{opacity:1;transform:none}
.features{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;margin:24px 0 6px}
.feature{grid-column:span 6;display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.icowrap{width:42px;height:42px;border-radius:999px;display:grid;place-items:center;flex:0 0 42px;background:linear-gradient(180deg,#0e3961,#154f82);box-shadow:0 6px 16px rgba(0,0,0,.18)}
.icowrap svg{width:22px;height:22px}
.feature h4{margin:0 0 4px 0;font-size:16px}
.feature p{margin:0;font-size:14px;color:var(--mut)}
@media (max-width:900px){.feature{grid-column:span 12}}
.mapwrap{border-radius:16px;overflow:hidden;box-shadow:var(--sh);border:1px solid rgba(255,255,255,.12)}
.mapwrap iframe{width:100%;height:360px;border:0;display:block}

/* Brand chip behind logo for contrast */
.nav .brand{padding:6px 10px;border-radius:14px;}


/* Hover zoom on visuals (except hero) */
.banner, .tile { transition: transform .5s ease, box-shadow .5s ease; }
.banner:hover, .tile:hover { transform: scale(1.035); box-shadow: 0 18px 40px rgba(0,0,0,.28); }

.tile[style*="padel1.jpg"] {
  background-size: cover;
  background-position: center 65% !important;
  transform: scale(1.1);
}

/* Show full image for Padel tile */
.tile-full{
  background-size: contain !important;
  background-repeat: no-repeat;
  background-position: center center !important;
  transform: none !important;
}

/* ==== BLUE21: Padel as full-width background ==== */
#padel.section{
  position:relative;
  background-image:url('./assets/photos/padel1.jpg');
  background-size:cover;
  background-position:top center; /* keep left player's head & smash visible */
  background-repeat:no-repeat;
  color:#fff;
}
#padel.section::before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(14,57,97,.55), rgba(14,57,97,.85));
  pointer-events:none;
}
#padel .container{position:relative; z-index:1;}
#padel .card, #padel .subtitle, #padel .title, #padel ul{ text-shadow:0 2px 10px rgba(0,0,0,.35); }
#padel .features .feature{ background:rgba(0,0,0,.25); border-color:rgba(255,255,255,.18); }
#padel .icowrap{ background:linear-gradient(180deg, rgba(14,57,97,.9), rgba(21,79,130,.9)); }

/* Stronger subtitle size for '5 pistes...' already set inline; ensure mobile scales nicely */
@media (max-width: 540px){
  .hero{min-height:72vh;padding:12vh 4vw}
  .title{font-size:clamp(22px,6vw,32px)}
  .subtitle{font-size:clamp(14px,4.2vw,18px)}
  .nav .menu{gap:12px}
  .cta{padding:10px 14px}
  .grid2{gap:18px}
  /* Padel spacing on mobile for readability */
  #padel.section{padding:64px 0}
  #padel .features .feature{grid-column:span 12;padding:12px}
  #padel .subtitle[style]{font-size:1.25em !important}
}

/* Disable hover zoom on touch devices to avoid sticky zoom */
@media (hover:none){
  .banner, .tile { transform:none !important; box-shadow:none !important; }
  .banner:hover, .tile:hover { transform:none !important; box-shadow:none !important; }
}

/* Ensure '¡HOLA PADEL!' side image keeps larger ratio on small tablets too */
@media (max-width: 900px){
  #a-propos .grid2{grid-template-columns:1fr !important}
}

/* ==== BLUE25: Hotfix iPhone/mobile (hero + menu + overflow) ==== */
html,body{overflow-x:hidden}
@media (max-width: 540px){
  .nav .inner{
    padding:8px max(4vw, env(safe-area-inset-left) + 8px)
            8px max(4vw, env(safe-area-inset-right) + 8px);
  }
  .nav .menu{
    display:flex; gap:14px; white-space:nowrap;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    padding-bottom:6px; scrollbar-width:none;
  }
  .nav .menu::-webkit-scrollbar{display:none}
  .nav .cta{display:none}
  .hero{
    min-height:60vh;
    padding:10vh 4vw 8vh;
    background-position:center 60%; /* focus lower area (bodega) */
  }
  .hero::after{
    background:linear-gradient(180deg,
      rgba(11,45,79,.35) 0%,
      rgba(11,45,79,.65) 55%,
      rgba(11,45,79,.85) 100%);
  }
  .hero .container{max-width:88vw}
  .hero h1{font-size:clamp(26px,7.2vw,34px); letter-spacing:.2px}
  .hero p{font-size:clamp(14px,4.3vw,18px)}
  #padel.section{background-position:center 24%}
}

@media (max-width: 380px){
  .hero{ background-position:center 64%; min-height:62vh; }
}

/* BLUE28 footer logo bigger */
.footer .brand img{width:150px !important;height:150px !important;filter:none}

/* BLUE28 hero image recentered on mobile */
@media (max-width: 767px){
  .hero{
    background-position:70% center !important;
    background-size:cover !important;
  }
}

/* BLUE29 footer exact logo blue */
footer, .footer { background-color:#10365A !important; }

/* BLUE29 hero image mobile recentered fully right */
@media (max-width: 767px){
  .hero{
    background-position:100% center !important;
    background-size:cover !important;
  }
}

/* BLUE30 footer unify color + remove logo spacing */
.footer{background-color:#10365A !important;background-image:none !important;}
.footer .brand img{display:none !important}

/* BLUE38 – tiny colored social icons inline in footer */
.footer .social-colored{ margin-left:12px }
.footer .social-colored a{ margin-left:8px; display:inline-block; vertical-align:middle }
.footer .social-colored svg{ border-radius:4px; box-shadow:0 1px 3px rgba(0,0,0,.2) }
@media (max-width:600px){
  .footer small{ display:block; margin-bottom:6px }
  .footer .social-colored{ display:block; margin:8px 0 0 }
}

/* BLUE39 — Safe visibility fallback */
.no-js .section{display:block!important;opacity:1!important;visibility:visible!important}
.section{opacity:1}

/* BLUE41 reinforce visibility */
.reveal,.reveal.on{opacity:1!important;transform:none!important;filter:none!important}
.section{display:block!important}

/* BLUE51 – hide brand text in nav */
.nav .brand{ display:none !important }

/* BLUE52 – Mise en avant du message de construction */
.hero .construction {
  color: #ffffff !important;
  font-weight: 800 !important;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* BLUE53 – hide brand text in top nav robustly */
header .brand, .nav .brand, .topbar .brand { display:none !important }

/* BLUE53 – boost construction message visibility */
.hero .construction{
  color:#ffffff !important;
  font-weight:800 !important;
  font-size:clamp(18px, 3.8vw, 36px) !important;
  line-height:1.2;
  display:inline-block;
  background:rgba(0,0,0,.35);
  padding:10px 14px;
  border-radius:10px;
  text-shadow:0 2px 6px rgba(0,0,0,.5);
}
@media (max-width:600px){
  .hero .construction{ font-size:clamp(18px, 5.2vw, 28px) !important; padding:8px 12px }
}

/* BLUE54 – Aération Contact & Accès */
.contact-section p,
.contact-section div,
.contact-section li { margin-bottom: 12px; }
.contact-section h3 { margin-bottom: 18px; }

/* BLUE54 – Construction: plus visible, responsive iPhone */
.hero .construction{
  color:#ffffff !important;
  font-weight: 900 !important;
  font-size: clamp(20px, 5.2vw, 40px) !important; /* plus gros, s'adapte au mobile */
  line-height:1.15;
  display:inline-block;
  background: rgba(0,0,0,.40);
  padding: 10px 14px;
  border-radius: 12px;
  text-shadow: 0 2px 8px rgba(0,0,0,.55);
}
@media (max-width: 600px){
  .hero .construction{
    font-size: clamp(18px, 6.2vw, 28px) !important;
    padding: 9px 12px;
  }
}

/* BLUE55 – Aération Contact & Accès (robuste) */
:where(section[id*="contact"], section[id*="accès"], section[id*="acces"], .contact-section){
  line-height: 1.6;
}
:where(section[id*="contact"], section[id*="accès"], section[id*="acces"], .contact-section) > * + *{
  margin-top: 12px;
}
:where(section[id*="contact"], section[id*="accès"], section[id*="acces"], .contact-section) p + p{
  margin-top: 12px;
}
:where(section[id*="contact"], section[id*="accès"], section[id*="acces"], .contact-section) h3{
  margin: 0 0 18px;
}
:where(section[id*="contact"], section[id*="accès"], section[id*="acces"], .contact-section) strong{
  display:block; margin-bottom:6px; font-weight:700;
}

/* BLUE55 – Compteur horizontal */
.countdown{
  display:flex; flex-wrap:wrap; gap:20px; justify-content:center; align-items:stretch;
  margin-top: 12px;
}
.countdown .unit{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-width:86px; padding:10px 12px; border-radius:10px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
}
.countdown .value{ font-size: clamp(22px, 5.4vw, 36px); font-weight:800; line-height:1 }
.countdown .label{ font-size: 12px; opacity:.9; margin-top:6px; text-transform:uppercase; letter-spacing:.04em }

@media (max-width: 520px){
  .countdown{ gap:12px }
  .countdown .unit{ min-width:74px; padding:8px 10px }
  .countdown .value{ font-size: clamp(20px, 6vw, 28px) }
  .countdown .label{ font-size: 11px }
}

/* BLUE57 – Compteur en une seule ligne horizontale */
.countdown{
  display:flex;
  flex-wrap:nowrap !important; /* empêche retour à la ligne */
  justify-content:center;
  gap:16px;
  overflow-x:auto; /* sécurité mobile */
}
.countdown .unit{
  flex:0 0 auto; /* taille fixe, pas de rétrécissement automatique */
  min-width:70px;
  padding:8px 10px;
  border-radius:8px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
  display:flex; flex-direction:column; align-items:center;
}
.countdown .value{
  font-size: clamp(20px, 4.5vw, 32px);
  font-weight:800;
}
.countdown .label{
  font-size: 12px;
  margin-top:4px;
  text-transform:uppercase;
}
@media (max-width:480px){
  .countdown{ gap:10px }
  .countdown .unit{ min-width:60px; padding:6px 8px }
  .countdown .value{ font-size: clamp(18px, 5vw, 24px) }
  .countdown .label{ font-size:11px }
}

/* BLUE58 – Countdown strictly one line */
#countdown, .countdown{
  display:flex !important;
  flex-wrap:nowrap !important;
  justify-content:center;
  align-items:stretch;
  gap:16px;
  overflow-x:auto; /* avoids wrap on small screens */
}
#countdown > *, .countdown > *{
  flex:0 0 auto;
  min-width:70px;
  padding:8px 10px;
  border-radius:8px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
  display:flex; flex-direction:column; align-items:center;
}
#countdown .value, .countdown .value{
  font-size: clamp(20px, 4.5vw, 32px);
  font-weight:800;
  line-height:1;
}
#countdown .label, .countdown .label{
  font-size: 12px;
  margin-top:4px;
  text-transform:uppercase;
  letter-spacing:.03em;
}
@media (max-width:480px){
  #countdown, .countdown{ gap:10px }
  #countdown > *, .countdown > *{ min-width:60px; padding:6px 8px }
  #countdown .value, .countdown .value{ font-size: clamp(18px, 5vw, 24px) }
  #countdown .label, .countdown .label{ font-size:11px }
}

/* BLUE61 – Contact section redesign */
.contact-wrapper{
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  margin-top:20px;
}
.contact-info{ flex:1 1 300px; }
.contact-box{
  background:rgba(255,255,255,0.06);
  padding:20px;
  border-radius:10px;
  line-height:1.6;
}
.contact-box p{ margin:8px 0; }
.contact-box strong{ display:block; margin-top:12px; font-weight:700; }
.contact-map{ flex:1 1 350px; min-height:350px; }
@media (max-width:768px){
  .contact-wrapper{ flex-direction:column; }
}

/* BLUE62 – Contact form section */
.contact-form-section{
  margin:40px auto;
  padding:20px;
  max-width:600px;
}
.contact-form label{ display:block; margin-top:12px; font-weight:600; }
.contact-form input, .contact-form textarea{
  width:100%; padding:10px; margin-top:6px;
  border:1px solid #ccc; border-radius:6px;
  font-size:15px;
}
.contact-form button{
  margin-top:16px; padding:12px 20px;
  background:#0b2d4f; color:#fff; border:none; border-radius:6px;
  font-weight:600; cursor:pointer;
}
.contact-form button:hover{ background:#154070; }