/* =====================================
DESIGN SYSTEM PREMIUM
===================================== */

:root{

 --primary:#14532d;
 --primary-light:#2e7d32;
 --accent:#10b981;
 --gold:#d4af37;

 --card-bg:#ffffff;

 --text-dark:#1f2937;
 --text-soft:#6b7280;

 --radius:20px;
 --transition:0.35s ease;

 --shadow-soft:0 15px 35px rgba(0,0,0,0.06);
 --shadow-strong:0 25px 60px rgba(0,0,0,0.15);

}


/* =====================================
BASE
===================================== */

body{

 margin:0;
 font-family:'Segoe UI', sans-serif;
 color:var(--text-dark);

 /* pas de background ici pour laisser agir le global */

}


/* =====================================
NAVBAR PREMIUM
===================================== */

.navbar{

 display:flex;
 justify-content:space-between;
 align-items:center;

 padding:1.3rem 2rem;

 background:
 linear-gradient(
 135deg,
 var(--primary),
 var(--primary-light)
 );

 color:white;

 position:sticky;
 top:0;
 z-index:999;

 box-shadow:var(--shadow-soft);

}

.logo{

 font-size:1.6rem;
 font-weight:bold;
 letter-spacing:1px;

}

.nav-links{

 list-style:none;
 display:flex;
 gap:2.2rem;

}

.nav-links a{

 text-decoration:none;
 color:white;
 font-weight:600;
 position:relative;

}

.nav-links a::after{

 content:"";
 width:0;
 height:2px;

 background:#c8e6c9;

 position:absolute;
 left:0;
 bottom:-5px;

 transition:var(--transition);

}

.nav-links a:hover::after{

 width:100%;

}


/* =====================================
HERO LOCALISATION PREMIUM +
===================================== */

.hero-localisation{

 position:relative;

 height:460px;

 display:flex;

 align-items:center;

 justify-content:center;

 text-align:center;

 overflow:hidden;

 background:

 linear-gradient(
 rgba(0,0,0,0.55),
 rgba(20,83,45,0.85)
 ),

 url("eglise.jpg")

 center/cover no-repeat;

}


/* effet lumière premium */

.hero-localisation::before{

 content:"";

 position:absolute;

 width:600px;
 height:600px;

 background:

 radial-gradient(
 circle,
 rgba(255,255,255,0.15),
 transparent 60%
 );

 top:-150px;
 right:-150px;

 opacity:0.6;

}


/* effet halo vert */

.hero-localisation::after{

 content:"";

 position:absolute;

 width:500px;
 height:500px;

 background:

 radial-gradient(
 circle,
 rgba(16,185,129,0.15),
 transparent 60%
 );

 bottom:-150px;
 left:-150px;

}


/* contenu hero */

.hero-overlay{

 position:relative;

 max-width:750px;

 padding:45px;

 border-radius:18px;

 background:

 rgba(255,255,255,0.06);

 backdrop-filter:blur(8px);

 box-shadow:

 0 25px 60px rgba(0,0,0,0.35);

}


.hero-overlay h2{

 font-size:2.8rem;

 margin-bottom:12px;

 letter-spacing:1px;

 font-weight:700;

 color:white;

}


.hero-overlay p{

 font-size:1.2rem;

 opacity:0.95;

 color:#e8f5e9;

}


/* animation douce */

.hero-overlay{

 animation:fadeHero 1.2s ease;

}

@keyframes fadeHero{

 from{

  opacity:0;
  transform:translateY(25px);

 }

 to{

  opacity:1;
  transform:translateY(0);

 }

}

/* =====================================
SECTIONS PREMIUM
===================================== */

.about-section,
.vision-section{

 max-width:1100px;

 margin:80px auto;

 padding:0 20px;

}

/* =====================================
CARTES PREMIUM +
===================================== */

.about-section .container,
.vision-section .container{

 background:var(--card-bg);

 padding:3rem;

 border-radius:22px;

 box-shadow:

 0 20px 60px rgba(0,0,0,0.08);

 position:relative;

 overflow:hidden;

}


/* décor subtil */

.about-section .container::before,
.vision-section .container::before{

 content:"";

 position:absolute;

 width:220px;
 height:220px;

 background:

 radial-gradient(
 circle,
 rgba(16,185,129,0.07),
 transparent
 );

 border-radius:50%;

 top:-80px;
 right:-80px;



 border-radius:50%;

 top:-60px;
 right:-60px;
};



.about-section .container:hover,
.vision-section .container:hover{

 transform:translateY(-6px);

 box-shadow:var(--shadow-strong);

}

/* =====================================
TITRES PREMIUM
===================================== */

section h2{

 font-size:2rem;

 color:var(--primary);

 margin-bottom:18px;

 position:relative;

 font-weight:700;

 letter-spacing:0.5px;

}

section h2::after{

 content:"";

 width:90px;

 height:4px;

 background:

 linear-gradient(
 90deg,
 var(--gold),
 var(--accent)
 );

 display:block;

 margin-top:10px;

 border-radius:10px;

}

/* =====================================
IMAGE EGLISE
===================================== */

.church-image-container{

 margin:3rem 0;

 display:flex;

 justify-content:center;

}

.church-image{

 width:850px;

 max-width:100%;

 max-height:600px;

 border-radius:var(--radius);

 object-fit:cover;

 box-shadow:var(--shadow-strong);

 border:3px solid var(--gold);

 transition:var(--transition);

}

.church-image:hover{

 transform:scale(1.03);

 box-shadow:0 30px 70px rgba(20,83,45,0.25);

}


/* =====================================
MAP PREMIUM
===================================== */

.map-section{

 max-width:1100px;

 margin:80px auto;

 padding:0 20px;

}

.map-section h2{

 text-align:center;

 font-size:2rem;

 color:var(--primary);

 margin-bottom:2rem;

}


/* controls premium */

.map-controls{

 display:flex;

 gap:12px;

 flex-wrap:wrap;

 justify-content:center;

 margin-bottom:25px;

}


.map-controls input,
#locationSelect{

 padding:12px;

 border-radius:14px;

 border:1px solid #ddd;

 transition:var(--transition);

 min-width:220px;

}


.map-controls input:focus{

 outline:none;

 border-color:var(--primary);

 box-shadow:
 0 0 0 3px rgba(20,83,45,0.2);

}


.map-controls button{

 padding:12px 22px;

 border:none;

 border-radius:50px;

 background:
 linear-gradient(
 135deg,
 var(--primary),
 var(--accent)
 );

 color:white;

 font-weight:600;

 cursor:pointer;

 transition:var(--transition);

}


.map-controls button:hover{

 transform:translateY(-4px);

 box-shadow:var(--shadow-soft);

}


/* =====================================
MAP PREMIUM +
===================================== */

#mapPublic{

 height:520px;

 border-radius:22px;

 overflow:hidden;

 box-shadow:

 0 30px 80px rgba(0,0,0,0.25);

 border:

 1px solid rgba(255,255,255,0.08);

}


/* =====================================
FOOTER PREMIUM
===================================== */

footer{

 background:
 linear-gradient(
 135deg,
 var(--primary),
 var(--primary-light)
 );

 color:white;

 text-align:center;

 padding:2.5rem;

 margin:80px 20px 20px;

 border-radius:var(--radius);

 box-shadow:var(--shadow-soft);

}


/* =====================================
RESPONSIVE
===================================== */

@media(max-width:900px){

 .church-image{

  max-height:400px;

 }

}


@media(max-width:768px){

 .hero-localisation{

  height:300px;

 }

 .hero-overlay h2{

  font-size:1.8rem;

 }

 #mapPublic{

  height:420px;

 }

}


@media(max-width:480px){

 .hero-localisation{

  height:260px;

 }

 #mapPublic{

  height:340px;

 }

}