/* =================================
IDENTITE VERTS-PATURAGES
================================= */

:root{

--primary:#1b5e20;
--primary-light:#2e7d32;
--accent:#10b981;
--gold:#d4af37;

--soft-bg:#f4f7f6;
--card-bg:#ffffff;

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

--radius:18px;

--shadow-soft:
0 10px 25px rgba(0,0,0,0.08);

--shadow-strong:
0 20px 50px rgba(0,0,0,0.15);

}


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

body{

margin:0;

font-family:
'Segoe UI',
'Inter',
sans-serif;

background:var(--soft-bg);

color:var(--text-dark);

line-height:1.7;

}


*{

box-sizing:border-box;

}

/* =================================
HEADER VERTS-PATURAGES
================================= */

.navbar{

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

padding:14px 30px;

background:

linear-gradient(
135deg,
#1b5e20,
#2e7d32
);

color:white;

position:sticky;
top:0;

z-index:1000;

box-shadow:

0 8px 20px rgba(0,0,0,0.15);

}


/* LOGO */

.logo{

font-size:1.4rem;

font-weight:600;

letter-spacing:0.5px;

}


/* NAV LINKS */

.nav-links{

display:flex;

gap:28px;

list-style:none;

margin:0;
padding:0;

}


.nav-links a{

text-decoration:none;

color:white;

font-size:0.95rem;

position:relative;

transition:0.3s;

}


/* animation underline premium */

.nav-links a::after{

content:"";

position:absolute;

left:0;
bottom:-5px;

width:0;
height:2px;

background:

linear-gradient(
90deg,
#d4af37,
#10b981
);

transition:0.3s;

}


.nav-links a:hover::after{

width:100%;

}


.nav-links a:hover{

opacity:0.85;

}


/* =================================
BURGER
================================= */

.burger{

display:none;

font-size:1.5rem;

background:none;

border:none;

color:white;

cursor:pointer;

}


/* =================================
DARK MODE BUTTON
================================= */

.theme-toggle{

margin-left:15px;

background:

linear-gradient(
135deg,
#10b981,
#22c55e
);

border:none;

padding:8px 12px;

border-radius:12px;

cursor:pointer;

font-size:1rem;

transition:0.3s;

}


.theme-toggle:hover{

transform:translateY(-2px);

box-shadow:

0 8px 20px rgba(0,0,0,0.2);

}


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

@media(max-width:768px){

.burger{

display:block;

}


.nav-links{

position:absolute;

top:65px;
left:0;

width:100%;

background:

linear-gradient(
135deg,
#1b5e20,
#2e7d32
);

flex-direction:column;

max-height:0;

overflow:hidden;

transition:0.3s;

box-shadow:

0 20px 40px rgba(0,0,0,0.25);

}


.nav-links.open{

max-height:350px;

padding-bottom:10px;

}


.nav-links li{

padding:14px 25px;

border-bottom:

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

}

}


/* =================================
DARK MODE HEADER
================================= */

.dark .navbar{

background:

linear-gradient(
135deg,
#14532d,
#166534
);

box-shadow:

0 15px 40px rgba(0,0,0,0.5);

}


.dark .nav-links{

background:

linear-gradient(
135deg,
#14532d,
#166534
);

}


.dark .nav-links a{

color:#e5e7eb;

}


/* =================================
ANIMATION APPARITION
================================= */

.navbar{

animation:slideDown 0.4s ease;

}


@keyframes slideDown{

from{

opacity:0;
transform:translateY(-20px);

}

to{

opacity:1;
transform:translateY(0);

}

}


/* =================================
CONTAINER
================================= */

.pastoral-container{

max-width:1150px;

margin:auto;

padding:50px 20px;

}


/* =================================
HERO SPIRITUEL
================================= */

.hero-pastoral{

height:270px;

background:

linear-gradient(
rgba(15, 82, 18, 0.575),
rgba(3, 71, 45, 0.55)
),

url("images/pasteur-cover.jpg")
center/cover no-repeat;

border-radius:var(--radius);

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

margin-bottom:45px;

position:relative;

overflow:hidden;

}


.hero-pastoral::after{

content:"";

position:absolute;

width:400px;
height:400px;

background:
radial-gradient(
circle,
rgba(212,175,55,0.15),
transparent 60%
);

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

}


.hero-overlay{

text-align:center;

color:rgb(12, 95, 5);

max-width:650px;

padding:20px;

}


.hero-overlay h2{

font-size:2.3rem;

margin-bottom:10px;

font-weight:600;

letter-spacing:0.5px;

}


.hero-overlay p{

opacity:0.9;

font-size:1.05rem;

}


/* =================================
CARTE GENERALE
================================= */

.card{

background:var(--card-bg);

padding:32px;

border-radius:var(--radius);

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

transition:0.3s ease;

margin-bottom:35px;

border:

1px solid rgba(0,0,0,0.03);

}


.card:hover{

transform:translateY(-6px);

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

}


.card h2{

color:var(--primary);

margin-bottom:15px;

font-weight:600;

}


.card h3{

color:var(--primary);

margin-bottom:10px;

}


.card p{

color:var(--text-soft);

}


/* =================================
LISTES
================================= */

.card ul{

padding-left:20px;

margin-top:10px;

}


.card li{

margin-bottom:8px;

color:var(--text-soft);

}


/* =================================
GRID PROFILS
================================= */

.pastoral-grid{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(260px,1fr));

gap:25px;

margin-bottom:40px;

}


/* =================================
PROFIL
================================= */

.profile-card{

text-align:center;

padding:25px;

position:relative;

overflow:hidden;

}


.profile-card::after{

content:"";

position:absolute;

width:160px;
height:160px;

background:

radial-gradient(
circle,
rgba(34,197,94,0.15),
transparent 70%
);

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

}


.profile-card img{

width:100%;

height:260px;

object-fit:cover;

border-radius:14px;

margin-bottom:15px;

box-shadow:

0 12px 30px rgba(0,0,0,0.18);

transition:0.3s;

}


.profile-card:hover img{

transform:scale(1.03);

}


.profile-card h3{

font-size:1.2rem;

margin-bottom:10px;

}


.profile-card p{

font-size:0.95rem;

}


/* =================================
SECTION FINANCES
================================= */

.finances-section{

background:

linear-gradient(
135deg,
rgba(27,94,32,0.04),
rgba(16,185,129,0.05)
);

}


/* =================================
SEPARATION VISUELLE
================================= */

.section-divider{

height:1px;

background:

linear-gradient(
90deg,
transparent,
rgba(0,0,0,0.08),
transparent
);

margin:35px 0;

}


/* =================================
DARK MODE
================================= */

.dark .pastoral-container{

color:#e5e7eb;

}


.dark .card{

background:#1e293b;

color:#e5e7eb;

border:

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

box-shadow:

0 20px 45px rgba(0,0,0,0.45);

}


.dark .card p,
.dark .card li{

color:#94a3b8;

}


.dark .hero-pastoral{

filter:brightness(0.9);

}


.dark .profile-card img{

box-shadow:

0 18px 40px rgba(0,0,0,0.6);

}


/* =================================
ANIMATION SUBTILE
================================= */

.card{

opacity:0;

transform:translateY(20px);

animation:fadeUp 0.6s ease forwards;

}


.card:nth-child(2){

animation-delay:0.1s;

}


.card:nth-child(3){

animation-delay:0.2s;

}


.card:nth-child(4){

animation-delay:0.3s;

}


@keyframes fadeUp{

to{

opacity:1;

transform:translateY(0);

}

}


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

@media(max-width:768px){

.hero-pastoral{

height:200px;

}


.hero-overlay h2{

font-size:1.6rem;

}


.profile-card img{

height:220px;

}

}


@media(max-width:480px){

.pastoral-container{

padding:35px 15px;

}

.card{

padding:25px;

}

}