/* ======================================================
   DESIGN SYSTEM
   Protect Theme
====================================================== */

:root{

/* Couleurs */

--primary:#2E7D32;
--primary-dark:#1B5E20;

--secondary:#43A047;

--accent:#8BC34A;

--success:#4CAF50;

--danger:#E53935;

--warning:#FB8C00;

--dark:#212121;

--text:#424242;

--light:#F7F9FA;

--white:#ffffff;

/* Radius */

--radius-sm:8px;
--radius:16px;
--radius-lg:28px;

/* Ombres */

--shadow-sm:0 4px 12px rgba(0,0,0,.05);

--shadow:0 10px 25px rgba(0,0,0,.08);

--shadow-lg:0 25px 60px rgba(0,0,0,.15);

/* Espacements */

--space-xs:10px;
--space-sm:20px;
--space-md:40px;
--space-lg:80px;
--space-xl:120px;

}

/* Boutons */

.btn{

display:inline-flex;

align-items:center;

justify-content:center;

gap:10px;

padding:16px 34px;

border-radius:var(--radius-sm);

font-weight:700;

transition:.30s;

cursor:pointer;

}

.btn-primary{

background:var(--primary);

color:white;

box-shadow:var(--shadow);

}

.btn-primary:hover{

transform:translateY(-2px);

background:var(--primary-dark);

}

.btn-outline{

border:2px solid var(--primary);

color:var(--primary);

background:white;

}

.btn-outline:hover{

background:var(--primary);

color:white;

}

.card{

background:white;

border-radius:var(--radius);

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

transition:.35s;

padding:40px;

}

.card:hover{

transform:translateY(-8px);

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

}

/* ============================
   Sections
============================ */

.section{

padding:var(--space-xl) 0;

}

.section-title{

max-width:760px;

margin:auto;

text-align:center;

margin-bottom:70px;

}

.section-title span{

display:inline-block;

margin-bottom:15px;

color:var(--primary);

font-weight:700;

text-transform:uppercase;

letter-spacing:2px;

}

.section-title h2{

font-size:44px;

margin-bottom:20px;

}

.section-title p{

font-size:18px;

color:#666;

}

.container{

width:1280px;

max-width:92%;

margin:auto;

}

.grid{

display:grid;

gap:30px;

}

.grid-2{

grid-template-columns:repeat(2,1fr);

}

.grid-3{

grid-template-columns:repeat(3,1fr);

}

.grid-4{

grid-template-columns:repeat(4,1fr);

}

.fade-up{

opacity:0;

transform:translateY(40px);

transition:.8s;

}

.fade-up.visible{

opacity:1;

transform:none;

}