/* Reset de base */
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background: #6da7e7;
  color: #333;
}

.titre_index {
  text-align: center;
  margin-top: 30px;
  font-size: 2.2rem;
  color: #fff;
  letter-spacing: 1px;
}

.main-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* =========================
  RESET & BASE
  ========================= */
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background: #6da7e7;
  color: #333;
}

.titre_index {
  text-align: center;
  margin-top: 30px;
  font-size: 2.2rem;
  color: #fff;
  letter-spacing: 1px;
}

.main-container {display:flex;flex-direction:column;align-items:center;width:100%;}
.container {width:100%;max-width:1400px;margin:0 auto;}

/* =========================
  WELCOME
  ========================= */
.welcome-container {
  background:#5899da;
  border-radius:10px;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
  padding:24px;
  margin-bottom:32px;
  text-align:center;
  color:#fff;
}
.welcome-title {display:flex;align-items:center;justify-content:center;gap:18px;margin-top:10px;}
.welcome-image {width:48px;height:48px;border-radius:50%;object-fit:cover;}

/* =========================
  LAYOUT 3 COLONNES
  ========================= */
.main-flex-container {display:flex;justify-content:space-between;align-items:flex-start;gap:32px;width:100%;margin-bottom:40px;}
.left-block,.center-block,.right-block {background:#f4f8fc;border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,.07);padding:18px 14px;}
.left-block,.right-block {flex:1 1 300px;min-width:260px;max-width:340px;}
.center-block {flex:2 1 500px;min-width:340px;max-width:700px;}

/* TITRES */
.restaurants-header-container h2,.events-title h2 {font-size:1.3rem;color:#2c3e50;margin:0 0 16px;text-align:center;}

/* =========================
  RESTAURANTS / HEBERGEMENT
  ========================= */
.restaurants-container {margin-bottom:16px;display:flex;flex-direction:column;gap:28px;padding:10px 0;}
.restaurant-card {background:#fff;border-radius:16px;box-shadow:0 6px 24px rgba(0,0,0,.08);padding:22px 22px 26px;border:1px solid #e3eaf3;transition:box-shadow .2s,border-color .2s;display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;}
.restaurant-card:hover {box-shadow:0 10px 32px rgba(0,0,0,.13);border-color:#b6d0f5;}
.restaurant-image {width:170px;height:170px;border-radius:18px;object-fit:cover;box-shadow:0 4px 14px rgba(0,0,0,.1);}
.restaurant-details {width:100%;line-height:1.55;font-size:1.02rem;color:#2c3e50;}
.restaurant-details p {margin:6px 0;}
.restaurant-details strong {display:block;margin-bottom:4px;}
.restaurant-details strong {color:#4177b6;font-weight:600;}
.btn-show-all {background:#5899da;color:#fff;border:none;border-radius:6px;padding:8px 16px;cursor:pointer;font-size:1rem;margin-top:8px;transition:background .2s;}
.btn-show-all:hover {background:#4177b6;}

/* =========================
  EVENEMENTS
  ========================= */
.events-container {background:transparent;box-shadow:none;padding:0;}
.events-header {margin-bottom:18px;}
.events-title {display:flex;align-items:center;justify-content:center;gap:10px;}
.header-image {width:38px;height:38px;border-radius:50%;object-fit:cover;}
.events {display:flex;flex-direction:column;gap:28px;padding:10px 0;}
.event {background:#fff;border-radius:16px;box-shadow:0 6px 24px rgba(0,0,0,.08);padding:24px 22px;border:1px solid #e3eaf3;transition:box-shadow .2s,border-color .2s;position:relative;margin:0;display:flex;flex-direction:column;align-items:center;}
.event:hover {box-shadow:0 10px 32px rgba(0,0,0,.13);border-color:#b6d0f5;}
.event-image {width:100%;max-width:340px;height:180px;object-fit:cover;border-radius:12px;margin:14px auto 18px;display:block;box-shadow:0 2px 8px rgba(0,0,0,.07);} 
.event p {margin:0 0 10px;font-size:1.05rem;color:#2c3e50;line-height:1.6;}
.event strong {color:#4177b6;font-weight:600;}
.details-button,.facebook-share {background:#4267B2;color:#fff;border:none;border-radius:6px;padding:7px 14px;cursor:pointer;font-size:.95rem;margin-top:8px;transition:background .2s;}
.details-button:hover,.facebook-share:hover {background:#365899;}

/* =========================
  COMMERCANTS
  ========================= */
.commercants-container {margin-bottom:16px;display:flex;flex-direction:column;gap:28px;padding:10px 0;}
.commercant-card {background:#fff;border-radius:16px;box-shadow:0 6px 24px rgba(0,0,0,.08);padding:22px 22px 26px;border:1px solid #e3eaf3;transition:box-shadow .2s,border-color .2s;display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;}
.commercant-card:hover {box-shadow:0 10px 32px rgba(0,0,0,.13);border-color:#b6d0f5;}
.commercant-image {width:170px;height:170px;border-radius:18px;object-fit:cover;box-shadow:0 4px 14px rgba(0,0,0,.1);} 
.commercant-details {width:100%;line-height:1.55;font-size:1.02rem;color:#2c3e50;}
.commercant-details p {margin:6px 0;}
.commercant-details strong {display:block;margin-bottom:4px;color:#4177b6;font-weight:600;}

/* =========================
  RESPONSIVE
  ========================= */
@media (max-width:1100px){
  .main-flex-container{flex-direction:column;gap:24px;}
  .left-block,.center-block,.right-block{max-width:100%;min-width:0;}
}