/* ============================================
   AZUR ACCESS — Feuille de style principale
   ============================================ */

:root{
  --bg: #241511;
  --bg-panel: #2c1a15;
  --bg-panel-2: #1a0f0c;
  --gold: #c9a15a;
  --gold-bright: #e6c77d;
  --cream: #ede4d6;
  --stone: #a5907d;
  --line: rgba(201,161,90,0.22);
  --line-strong: rgba(201,161,90,0.4);
  --shadow: 0 30px 60px -20px rgba(0,0,0,0.5);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--cream);
  font-family:'Inter',sans-serif;
  font-weight:300;
  overflow-x:hidden;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
main{flex:1;}
.serif{font-family:'Fraunces',serif;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit; cursor:pointer;}

/* Fond subtil */
body::before{
  content:"";
  position:fixed; inset:0;
  background:radial-gradient(ellipse at 50% 0%, rgba(230,199,125,0.06), transparent 55%);
  pointer-events:none;
  z-index:0;
}

.wrap{max-width:1180px; margin:0 auto; padding:0 40px;}

/* ============ HEADER / NAVIGATION ============ */
header{
  position:fixed; top:0; left:0; right:0; z-index:50;
  background:linear-gradient(to bottom, rgba(26,15,12,0.92), rgba(26,15,12,0.4));
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  transition:background .4s ease;
}
header.solid{background:rgba(26,15,12,0.96);}
nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 40px; max-width:1240px; margin:0 auto;
}
.logo{
  font-family:'Fraunces',serif; font-size:1.35rem; letter-spacing:0.18em;
  font-weight:500; color:var(--gold-bright);
}
.logo span{color:var(--cream); font-weight:300;}
.nav-links{display:flex; gap:38px; font-size:0.78rem; letter-spacing:0.12em; text-transform:uppercase;}
.nav-links a{color:var(--stone); transition:color .3s ease; position:relative; padding:6px 0;}
.nav-links a:hover, .nav-links a.active{color:var(--gold-bright);}
.nav-links a.active::after{
  content:""; position:absolute; bottom:0; left:0; right:0; height:1px; background:var(--gold);
}
.nav-cta{
  border:1px solid var(--line-strong); padding:10px 22px; font-size:0.72rem;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--gold);
  transition:all .3s ease;
}
.nav-cta:hover{background:var(--gold); color:var(--bg-panel-2); border-color:var(--gold);}

.burger{display:none; background:none; border:none; color:var(--gold-bright); font-size:1.5rem;}

/* ============ BOUTONS ============ */
.btn-primary{
  display:inline-block; background:var(--gold); color:var(--bg-panel-2);
  padding:15px 34px; font-size:0.78rem; letter-spacing:0.14em; text-transform:uppercase;
  transition:all .35s ease; border:1px solid var(--gold); font-weight:500;
}
.btn-primary:hover{background:transparent; color:var(--gold-bright);}
.btn-ghost{
  display:inline-block; padding:15px 34px; font-size:0.78rem; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--cream); border:1px solid var(--line-strong);
  transition:all .35s ease;
}
.btn-ghost:hover{border-color:var(--gold); color:var(--gold-bright);}

/* ============ HERO ============ */
.hero{
  position:relative; min-height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding:120px 20px 60px;
}
.eyebrow{
  font-size:0.75rem; letter-spacing:0.35em; text-transform:uppercase;
  color:var(--gold); margin-bottom:28px; opacity:0;
  animation:fadeUp 1s ease forwards .3s;
}
.hero h1{
  font-family:'Fraunces',serif; font-weight:400; font-size:clamp(3rem, 9vw, 7.4rem);
  letter-spacing:0.01em; line-height:0.95; color:var(--gold-bright);
  opacity:0; animation:fadeUp 1.1s ease forwards .5s;
}
.hero h1 em{font-style:italic; font-weight:300; color:var(--cream);}
.hero p.lead{
  max-width:520px; margin:32px auto 0; font-size:1.02rem; line-height:1.75;
  color:var(--stone); opacity:0; animation:fadeUp 1.1s ease forwards .8s;
}
.hero-cta{
  margin-top:44px; display:flex; gap:18px; opacity:0; flex-wrap:wrap; justify-content:center;
  animation:fadeUp 1.1s ease forwards 1.05s;
}
@keyframes fadeUp{
  from{opacity:0; transform:translateY(18px);}
  to{opacity:1; transform:translateY(0);}
}

.coastline{width:min(900px, 86vw); margin-top:70px; opacity:0; animation:fadeIn 1.5s ease forwards 1.3s;}
@keyframes fadeIn{ to{opacity:1;} }
.coastline path{
  fill:none; stroke:var(--gold); stroke-width:1;
  stroke-dasharray:1400; stroke-dashoffset:1400;
  animation:draw 3.2s cubic-bezier(.65,0,.35,1) forwards 1.4s;
  opacity:0.75;
}
@keyframes draw{ to{stroke-dashoffset:0;} }
.coastline circle{fill:var(--gold-bright); opacity:0; animation:dotIn .6s ease forwards 4.2s;}
@keyframes dotIn{ to{opacity:1;} }

.scroll-hint{
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%);
  font-size:0.65rem; letter-spacing:0.3em; text-transform:uppercase;
  color:var(--stone); display:flex; flex-direction:column; align-items:center; gap:10px;
}
.scroll-hint::after{
  content:""; width:1px; height:40px; background:linear-gradient(var(--gold), transparent);
  animation:scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse{ 0%,100%{opacity:.3;} 50%{opacity:1;} }

/* ============ PAGE HEADER (autre que hero) ============ */
.page-header{
  padding:180px 0 80px; text-align:center; border-bottom:1px solid var(--line);
}
.page-header .eyebrow{opacity:1; animation:none; margin-bottom:20px;}
.page-header h1{
  font-family:'Fraunces',serif; font-weight:400;
  font-size:clamp(2.5rem, 6vw, 4.5rem); color:var(--gold-bright); line-height:1;
}
.page-header p{
  max-width:600px; margin:24px auto 0; color:var(--stone); line-height:1.8;
}

/* ============ SECTIONS ============ */
.section{padding:130px 0; position:relative; z-index:1;}
.section.compact{padding:80px 0;}
.label{
  font-size:0.72rem; letter-spacing:0.32em; text-transform:uppercase;
  color:var(--gold); margin-bottom:22px; display:flex; align-items:center; gap:16px;
}
.label::before{content:""; width:34px; height:1px; background:var(--gold);}
.label.center{justify-content:center;}

/* ============ MANIFESTO ============ */
.manifesto{display:flex; gap:80px; align-items:flex-start;}
.manifesto-lead{flex:1.1;}
.manifesto-lead h2{
  font-family:'Fraunces',serif; font-weight:400; font-size:clamp(1.8rem,3.3vw,2.6rem);
  line-height:1.28; color:var(--cream);
}
.manifesto-lead h2 em{color:var(--gold-bright); font-style:italic;}
.manifesto-side{flex:0.8; font-size:0.98rem; line-height:1.9; color:var(--stone); padding-top:8px;}
.stats{display:flex; gap:52px; margin-top:44px; flex-wrap:wrap;}
.stat-num{font-family:'Fraunces',serif; font-size:2.4rem; color:var(--gold-bright);}
.stat-label{font-size:0.68rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--stone); margin-top:6px;}

/* ============ BIENS (cards) ============ */
.prop-head{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:58px; flex-wrap:wrap; gap:20px;}
.prop-head h2{font-family:'Fraunces',serif; font-weight:400; font-size:clamp(1.8rem,3vw,2.6rem); color:var(--cream);}
.prop-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:2px; background:var(--line);}
.prop-grid.two{grid-template-columns:repeat(2,1fr);}
.prop-card{background:var(--bg); position:relative; overflow:hidden; display:block;}
.prop-img-wrap{position:relative; overflow:hidden;}
.prop-img{
  height:340px; background-size:cover; background-position:center;
  filter:saturate(0.75) brightness(0.7);
  transition:filter .6s ease, transform .8s ease;
}
.prop-card:hover .prop-img{filter:saturate(0.95) brightness(0.85); transform:scale(1.04);}
/* Filigrane subtil */
.prop-img-wrap::after{
  content:"AZUR ACCESS";
  position:absolute; bottom:14px; right:16px;
  font-family:'Fraunces',serif; font-size:0.65rem; letter-spacing:0.3em;
  color:rgba(237,228,214,0.5); pointer-events:none;
}
.prop-tag{
  position:absolute; top:20px; left:20px; font-size:0.65rem; letter-spacing:0.15em;
  text-transform:uppercase; color:var(--gold-bright); border:1px solid var(--gold);
  padding:6px 14px; background:rgba(26,15,12,0.6); z-index:2;
}
.prop-body{padding:26px 8px 10px;}
.prop-body h3{font-family:'Fraunces',serif; font-weight:400; font-size:1.3rem; color:var(--cream); margin-bottom:6px;}
.prop-loc{font-size:0.78rem; color:var(--stone); margin-bottom:14px; letter-spacing:0.06em;}
.prop-specs{display:flex; gap:16px; font-size:0.75rem; color:var(--stone); margin-bottom:14px;}
.prop-specs span{display:inline-flex; align-items:center; gap:6px;}
.prop-price{font-family:'Fraunces',serif; font-size:1.15rem; color:var(--gold-bright);}

/* ============ FILTRES ============ */
.filters{
  display:grid; grid-template-columns:repeat(5, 1fr) auto; gap:0;
  border:1px solid var(--line); margin-bottom:60px;
}
.filters select, .filters input{
  background:transparent; border:none; border-right:1px solid var(--line);
  padding:18px 20px; color:var(--cream); font-family:inherit; font-size:0.85rem;
  appearance:none; -webkit-appearance:none;
}
.filters select{cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23c9a15a' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 20px center; padding-right:44px;}
.filters select option{background:var(--bg-panel-2); color:var(--cream);}
.filters input::placeholder{color:var(--stone);}
.filters button{
  background:var(--gold); color:var(--bg-panel-2); border:none; padding:0 36px;
  font-size:0.75rem; letter-spacing:0.14em; text-transform:uppercase; font-weight:500;
  transition:background .3s ease;
}
.filters button:hover{background:var(--gold-bright);}

/* ============ VALEURS ============ */
.values{background:var(--bg-panel);}
.values-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:60px; margin-top:60px;}
.value-num{font-family:'Fraunces',serif; font-style:italic; font-size:1rem; color:var(--gold);}
.value h3{font-family:'Fraunces',serif; font-weight:400; font-size:1.5rem; margin:18px 0 14px; color:var(--cream);}
.value p{font-size:0.92rem; line-height:1.8; color:var(--stone);}

/* ============ CONTACT ============ */
.contact-cta-section{text-align:center;}
.contact-cta-section h2{
  font-family:'Fraunces',serif; font-weight:400; font-size:clamp(2.2rem,5vw,3.8rem);
  color:var(--gold-bright); line-height:1.1;
}
.contact-cta-section p{max-width:480px; margin:26px auto 0; color:var(--stone); line-height:1.8;}
.contact-cta-section .btn-primary{margin-top:46px;}

/* Contact page grid */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:80px;}
.contact-info h2{font-family:'Fraunces',serif; font-weight:400; font-size:2.2rem; color:var(--cream); margin-bottom:30px;}
.contact-info p{color:var(--stone); line-height:1.9; margin-bottom:20px;}
.contact-block{margin-top:36px; padding-top:32px; border-top:1px solid var(--line);}
.contact-block .l{font-size:0.7rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold); margin-bottom:8px;}
.contact-block .v{color:var(--cream); font-size:1.05rem;}
.contact-block .v a:hover{color:var(--gold-bright);}

.form-group{margin-bottom:22px;}
.form-group label{display:block; font-size:0.7rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold); margin-bottom:8px;}
.form-group input, .form-group textarea, .form-group select{
  width:100%; background:transparent; border:none; border-bottom:1px solid var(--line-strong);
  padding:12px 0; color:var(--cream); font-family:inherit; font-size:1rem;
  transition:border-color .3s ease;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus{
  outline:none; border-color:var(--gold);
}
.form-group textarea{resize:vertical; min-height:120px;}
.form-group select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23c9a15a' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right center;}
.form-group select option{background:var(--bg-panel-2); color:var(--cream);}
.form-note{font-size:0.78rem; color:var(--stone); line-height:1.6; margin:20px 0;}
.form-note a{color:var(--gold); text-decoration:underline;}
.form-consent{display:flex; gap:12px; align-items:flex-start; font-size:0.82rem; color:var(--stone); margin-bottom:24px;}
.form-consent input{width:auto; margin-top:4px;}

/* ============ FICHE BIEN ============ */
.bien-hero{padding-top:120px;}
.bien-gallery{
  display:grid; grid-template-columns:2fr 1fr; grid-template-rows:1fr 1fr;
  gap:4px; height:70vh; max-height:640px;
}
.bien-gallery .g1{grid-row:span 2; background-size:cover; background-position:center; position:relative;}
.bien-gallery .g2, .bien-gallery .g3{background-size:cover; background-position:center; position:relative;}
.bien-gallery > div::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, transparent 60%, rgba(26,15,12,0.4));
}
.bien-content{display:grid; grid-template-columns:2fr 1fr; gap:80px; margin-top:80px;}
.bien-title-block h1{font-family:'Fraunces',serif; font-weight:400; font-size:clamp(2rem,4vw,3.2rem); color:var(--gold-bright); line-height:1.1;}
.bien-title-block .loc{font-size:0.9rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--stone); margin-top:12px;}
.bien-price{font-family:'Fraunces',serif; font-size:2.2rem; color:var(--cream); margin-top:20px;}
.bien-description{margin-top:40px; color:var(--stone); line-height:1.9; font-size:1rem;}
.bien-description p{margin-bottom:18px;}
.bien-sidebar{padding:32px; background:var(--bg-panel); border:1px solid var(--line); position:sticky; top:100px; align-self:start;}
.bien-sidebar h3{font-family:'Fraunces',serif; font-weight:400; font-size:1.3rem; color:var(--gold-bright); margin-bottom:20px;}
.bien-key-facts{list-style:none; margin:30px 0;}
.bien-key-facts li{display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--line); font-size:0.9rem;}
.bien-key-facts li:last-child{border-bottom:none;}
.bien-key-facts .k{color:var(--stone); text-transform:uppercase; font-size:0.7rem; letter-spacing:0.15em;}
.bien-key-facts .v{color:var(--cream); font-family:'Fraunces',serif;}

/* ============ FOOTER ============ */
footer{
  border-top:1px solid var(--line); padding:70px 0 30px; margin-top:60px;
  font-size:0.85rem; color:var(--stone); background:var(--bg-panel-2);
}
.footer-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:60px; margin-bottom:50px;}
.footer-col h4{font-family:'Fraunces',serif; font-weight:400; color:var(--gold-bright); font-size:1rem; margin-bottom:20px; letter-spacing:0.05em;}
.footer-col ul{list-style:none;}
.footer-col li{margin-bottom:10px;}
.footer-col a{transition:color .3s ease;}
.footer-col a:hover{color:var(--gold-bright);}
.footer-col p{line-height:1.7;}
.footer-bottom{
  border-top:1px solid var(--line); padding-top:26px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; font-size:0.78rem;
}

/* ============ COOKIE BANNER ============ */
.cookie-banner{
  position:fixed; bottom:20px; left:20px; right:20px; max-width:520px; margin:0 auto;
  background:var(--bg-panel); border:1px solid var(--line-strong); padding:24px 28px;
  z-index:100; box-shadow:var(--shadow); font-size:0.85rem; color:var(--cream);
  transform:translateY(150%); transition:transform .5s cubic-bezier(.65,0,.35,1);
}
.cookie-banner.show{transform:translateY(0);}
.cookie-banner h4{font-family:'Fraunces',serif; font-weight:400; color:var(--gold-bright); font-size:1.1rem; margin-bottom:10px;}
.cookie-banner p{color:var(--stone); line-height:1.6; margin-bottom:18px;}
.cookie-banner p a{color:var(--gold); text-decoration:underline;}
.cookie-actions{display:flex; gap:10px; flex-wrap:wrap;}
.cookie-actions button{
  padding:10px 20px; font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase;
  border:1px solid var(--line-strong); background:transparent; color:var(--cream);
  transition:all .3s ease;
}
.cookie-actions button.accept{background:var(--gold); color:var(--bg-panel-2); border-color:var(--gold);}
.cookie-actions button.accept:hover{background:var(--gold-bright); border-color:var(--gold-bright);}
.cookie-actions button.reject:hover{border-color:var(--gold); color:var(--gold-bright);}

/* ============ 404 ============ */
.error-page{
  min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:120px 20px 60px;
}
.error-page .num{
  font-family:'Fraunces',serif; font-size:clamp(6rem,18vw,14rem); color:var(--gold-bright);
  line-height:1; font-style:italic; font-weight:300;
}
.error-page h2{font-family:'Fraunces',serif; font-weight:400; font-size:2rem; color:var(--cream); margin-top:20px;}
.error-page p{color:var(--stone); margin-top:20px; max-width:400px; line-height:1.8;}
.error-page .btn-primary{margin-top:40px;}

/* ============ MENTIONS / TEXTES LÉGAUX ============ */
.legal{padding:160px 0 100px;}
.legal .wrap{max-width:820px;}
.legal h1{font-family:'Fraunces',serif; font-weight:400; font-size:clamp(2rem,4vw,3rem); color:var(--gold-bright); margin-bottom:16px;}
.legal .updated{font-size:0.8rem; color:var(--stone); margin-bottom:40px; letter-spacing:0.1em; text-transform:uppercase;}
.legal h2{font-family:'Fraunces',serif; font-weight:400; font-size:1.5rem; color:var(--cream); margin:44px 0 16px;}
.legal h3{font-family:'Fraunces',serif; font-weight:400; font-size:1.15rem; color:var(--gold); margin:30px 0 12px;}
.legal p, .legal li{color:var(--stone); line-height:1.9; margin-bottom:14px; font-size:0.96rem;}
.legal ul{padding-left:24px; margin-bottom:16px;}
.legal a{color:var(--gold); text-decoration:underline;}
.legal a:hover{color:var(--gold-bright);}
.legal .placeholder{background:rgba(201,161,90,0.08); border-left:2px solid var(--gold); padding:4px 10px; font-style:italic; color:var(--gold-bright);}

/* ============ PROTECTION IMAGES ============ */
img, .prop-img, .bien-gallery > div, .g1, .g2, .g3{
  -webkit-user-select:none;
  -moz-user-select:none;
  user-select:none;
  -webkit-user-drag:none;
  -khtml-user-drag:none;
  -moz-user-drag:none;
  -o-user-drag:none;
  user-drag:none;
  pointer-events:auto;
}
img{-webkit-touch-callout:none;}

/* ============ RESPONSIVE ============ */
@media(max-width:900px){
  .nav-links, .nav-cta{display:none;}
  .burger{display:block;}
  header.mobile-open .nav-links{
    display:flex; flex-direction:column; position:absolute; top:100%; left:0; right:0;
    background:var(--bg-panel-2); padding:30px 40px; gap:24px;
    border-top:1px solid var(--line);
  }
  .manifesto{flex-direction:column; gap:40px;}
  .prop-grid, .prop-grid.two{grid-template-columns:1fr;}
  .values-grid{grid-template-columns:1fr; gap:44px;}
  .section{padding:90px 0;}
  .wrap{padding:0 24px;}
  nav{padding:20px 24px;}
  .filters{grid-template-columns:1fr 1fr; }
  .filters button{grid-column:span 2;}
  .footer-grid{grid-template-columns:1fr 1fr; gap:40px;}
  .contact-grid{grid-template-columns:1fr; gap:60px;}
  .bien-gallery{grid-template-columns:1fr; height:auto;}
  .bien-gallery .g1{grid-row:span 1; height:50vh;}
  .bien-gallery .g2, .bien-gallery .g3{height:200px;}
  .bien-content{grid-template-columns:1fr; gap:50px;}
  .bien-sidebar{position:static;}
}

@media(max-width:500px){
  .footer-grid{grid-template-columns:1fr;}
  .stats{gap:32px;}
  .filters{grid-template-columns:1fr;}
  .filters button{grid-column:span 1;}
}

/* Respect prefers-reduced-motion */
@media(prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:0.01ms !important;
    transition-duration:0.01ms !important;
  }
}
