/* ===============================
   RESET GLOBAL
=================================*/
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Cammron', serif; line-height:1.6; color:#333; background:#f4f4f4; }
a { text-decoration:none; }

/* ===============================
   HEADER
=================================*/
.site-header { display:flex; justify-content:space-between; align-items:center; padding:1rem 2rem; background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.05); position:sticky; top:0; z-index:10; }
.site-header .brand { font-weight:bold; font-size:1.5rem; color:#333; }
.site-nav { display:flex; gap:1rem; }
.site-nav a { color:#333; padding:.5rem; }
.btn { display:inline-block; padding:.8rem 2rem; border-radius:4px; background:#333; color:#fff; text-transform:uppercase; transition:.3s; }
.btn:hover { background:#555; }
.btn--ghost { background:transparent; border:2px solid #fff; color:#fff; }
.btn--ghost:hover { background:#fff; color:#333; }

/* ===============================
   HERO avec collage + overlay
=================================*/
.hero {
  position: relative;
  height: 100vh;
  background: url('assets/img/collage.jpg') center/cover no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
}

.hero-overlay {
  position: absolute;
  inset:0;
  background: rgba(0,0,0,0.4); /* overlay sombre pour lisibilité */
  z-index: 0;
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
  padding: 2rem;
}

.hero h1 { font-size:3rem; margin-bottom:1rem; font-weight:bold; }
.hero .tags { font-size:1.2rem; font-style:italic; margin-bottom:2rem; }
.hero .cta { display:flex; justify-content:center; gap:1rem; flex-wrap:wrap; }

/* ===============================
   SECTIONS CENTRÉES
=================================*/
section { padding:4rem 2rem; text-align:center; max-width:900px; margin:0 auto; }
h2 { font-size:2.5rem; margin-bottom:2rem; font-weight:bold; }
h3 { font-size:1.6rem; margin-bottom:1rem; font-weight:bold; }
p { font-size:1.2rem; margin-bottom:1.5rem; line-height:1.5; }

/* ===============================
   TARIFS
=================================*/
.pricing-grid { display:flex; gap:2rem; justify-content:center; flex-wrap:wrap; }
.pricing-grid article { background:#fff; padding:2rem; border-radius:10px; flex:1 1 300px; text-align:center; }
.pricing-grid article h3 { font-size:2rem; margin-bottom:1rem; }

/* ===============================
   TESTIMONIALS
=================================*/
.testimonials blockquote { font-style:italic; margin-bottom:1rem; }
.testimonials cite { display:block; margin-top:.5rem; font-weight:bold; }

/* ===============================
   FAQ
=================================*/
.faq details { background:#fff; padding:1rem; margin-bottom:1rem; border-radius:5px; text-align:left; max-width:800px; margin-left:auto; margin-right:auto; }

/* ===============================
   CONTACT
=================================*/
.contact .cta { display:flex; justify-content:center; gap:1rem; flex-wrap:wrap; }

/* ===============================
   FOOTER
=================================*/
footer { background:#333; color:#fff; padding:2rem; text-align:center; }

/* ===============================
   RESPONSIVE
=================================*/
@media(max-width:900px){ 
  .pricing-grid{flex-direction:column;} 
  .hero h1 { font-size:2.2rem; }
  .hero .tags { font-size:1rem; }
}