/* ----- RESET ----- */
* { margin:0; padding:0; box-sizing:border-box; }
body { 
    font-family:"Open Sans", sans-serif; 
    line-height:1.6; 
    color:#2B2B2B; 
    background:#F6F6F6; 
    /* Suppression du blocage de sélection (user-select) pour conformité droit information */
}
a { text-decoration:none; color:inherit; }
img { display:block; max-width:100%; height:auto; }

.container { width:90%; max-width:1100px; margin:0 auto; }

/* HEADER */
header { background:#fff; box-shadow:0 2px 5px rgba(0,0,0,0.05); position:sticky; top:0; z-index:10; }
.header-content { display:flex; justify-content:space-between; align-items:center; padding:1rem 0; }
.logo { height:36px; }
nav ul { list-style:none; display:flex; gap:1.5rem; }
nav ul li a { font-weight:600; color:#2B2B2B; }
nav ul li a:hover { color:#5C8D89; }

/* HERO */
.hero {
  background: linear-gradient(135deg, #C4DAD2 0%, #5C8D89 100%);
  text-align: center;
  padding: 5rem 1rem;
  color: #2B2B2B;
}
.hero h1 { font-size:2.2rem; margin-bottom:1rem; }
.hero p { max-width:600px; margin:0 auto 2rem; }
.btn, .btn-outline { padding:0.8rem 1.5rem; border-radius:50px; font-weight:600; transition:0.3s; cursor:pointer; }
.btn { background:#2B2B2B; color:#fff; border: 2px solid transparent;}
.btn:hover { background:#5C8D89; }
.btn-outline { border:2px solid #2B2B2B; color:#2B2B2B; }
.btn-outline:hover { background:#2B2B2B; color:#fff; }
.cta-buttons { display:flex; justify-content:center; gap:1rem; align-items: baseline;}

/* ABOUT */
.about { text-align:center; padding:4rem 0; }
.about h2 { font-size:1.8rem; margin-bottom:1rem; }
.about p { max-width:700px; margin:0 auto 1.5rem; }
.values { display:flex; justify-content:center; gap:2rem; list-style:none; font-weight:600; }

/* SERVICES */
.services { text-align:center; padding:4rem 0; }
.service-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:2.4rem;
  margin:2rem 0;
}
.service-item {
  background:#fff;
  padding:2.2rem;
  border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,0.06);
  transition:transform .2s ease, box-shadow .2s ease;
}
.service-item:hover {
  transform:translateY(-4px);
  box-shadow:0 8px 20px rgba(0,0,0,0.10);
}
.service-item h3 { margin-bottom:0.8rem; font-size:1.15rem; }
.service-item p { margin-bottom:0.8rem; }
.service-item em { color:#444; }
.service-item ul { margin:0; padding-left:1.2rem; line-height:1.5; text-align:left; }
.note-legale {
  margin-top:3rem;
  font-size:0.85rem;
  opacity:0.75;
  text-align:center;
}

/* FAQ */
.faq { text-align:left; padding:3rem 0; }
.faq h2 { text-align:center; margin-bottom:2rem; font-size:1.8rem; }
.faq-item { margin-bottom:1.5rem; background:#fff; padding:1.5rem; border-radius:10px; box-shadow:0 2px 8px rgba(0,0,0,0.04); }
.faq-item h3 { font-size:1.05rem; margin-bottom:0.4rem; }

/* TARIFS */
.pricing { text-align:center; padding:4rem 0; }

/* CONTACT */
.contact { text-align:center; padding:4rem 0; }
.contact-form { display:flex; flex-direction:column; gap:1rem; max-width:500px; margin:2rem auto; }
.contact-form input, .contact-form textarea { padding:0.8rem; border-radius:8px; border:1px solid #CCC; }
.contact-form button { border:none; }

.success { color:green; margin-bottom:1rem; }
.error { color:red; margin-bottom:1rem; }

.contact-info a:hover { color:#5C8D89; }

/* FOOTER */
footer { background:#2B2B2B; color:#fff; text-align:center; padding:1rem; font-size:0.9rem; }

/* ----- RESPONSIVE MOBILE ----- */
@media (max-width:768px) {
  nav ul {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 0.5rem;
    padding: 0.5rem 0;
  }
  nav ul li { flex: 0 0 auto; }
  nav { position: static; width: 100%; box-shadow: none; transform: none; }
  .burger { display: none; }
  .hero h1 { font-size: 1.6rem; }
  .hero p { font-size: 1rem; }
  header img.logo { display: none !important; visibility: hidden; opacity: 0; width: 0; height: 0; margin: 0; padding: 0; }
}

@media (min-width: 900px) {
  .service-grid { grid-template-columns: repeat(2, 1fr); gap: 3rem; }
  .service-item { max-width: 600px; margin-left: auto; margin-right: auto; }
}
@media (min-width: 1400px) {
  .service-grid { gap: 4rem; }
  .service-item { max-width: 650px; }
} 

/* STYLES ARTICLE */
.avis-google {
  background-color: #222;
  border-radius: 8px;
  color: #fff;
  padding: 0.8rem 1.6rem;
  display: inline-block;
  font-weight: 500;
  margin-top: 1.4rem;
  transition: background-color .2s ease, transform .2s ease;
}
.avis-google:hover { background-color: #444; transform: translateY(-2px); }
.article-main-content { padding: 4rem 0; }
.article-title { text-align: center; margin-bottom: 2rem; font-size: 2.2rem; color: #4A6B69; font-weight: 700; }
.calendar-table { width: 100%; border-collapse: collapse; margin: 2rem 0; }
.calendar-table th, .calendar-table td { border: 1px solid #C4DAD2; padding: 12px; text-align: left; }
.calendar-table th { background-color: #5C8D89; color: #fff; font-weight: 600; }
.info-box { background-color: #F0F0F0; padding: 1.5rem; margin: 3rem 0; border-radius: 8px; border-left: 5px solid #5C8D89; }
.about-mnc { margin-top: 2.5rem; }
.info-box .btn-outline { margin-top: 1rem; display: inline-block; }
main .btn { display: inline-block; margin-top: 1.5rem; }
.article-main-content h2 { margin-top: 2rem; margin-bottom: 1rem; padding-top: 1rem; border-bottom: 1px solid #eee; padding-bottom: 0.5rem; }
.article-main-content h3 { margin-top: 1.5rem; margin-bottom: 0.8rem; font-size: 1.25rem; }
.services, .about, .pricing, .contact { padding: 3rem 0; }
.info-box.info-box-danger { border-left: 5px solid #E67E22; background-color: #FEF7F0; }
.info-box-danger h3 { color: #D35400; }

/* BANDEAU PRO */
.promo-banner-pro {
  background-color: #5C8D89; color: #FFFFFF; text-align: center; padding: 0.9rem 0;
  font-size: 1.05rem; font-weight: 700; box-shadow: 0 3px 6px rgba(0,0,0,0.15); border-top: 1px solid #4A6B69;
}
.promo-banner-pro .container { display: flex; justify-content: center; align-items: center; gap: 15px; flex-wrap: wrap; }
.btn-promo-pro {
  background-color: #2B2B2B; color: #fff; padding: 6px 18px; border-radius: 50px;
  text-transform: uppercase; font-size: 0.9rem; font-weight: 700; transition: background-color 0.3s ease;
  white-space: nowrap; border: 2px solid #2B2B2B;
}
.btn-promo-pro:hover { background-color: #fff; color: #2B2B2B; border: 2px solid #fff; }
@media (max-width: 600px) {
  .promo-banner-pro .container { flex-direction: column; gap: 8px; }
  .promo-banner-pro { font-size: 1rem; padding: 0.7rem 0; }
}