/* ===================================================
   ECOBLEU – CSS OFFICIEL (VERSION STABLE)
   =================================================== */

:root{
  --blue-dark:#0b3c5d;
  --blue-main:#1f6f8b;
  --blue-soft:#e6f2f7;
  --gray-text:#334155;
  --gray-light:#e5e7eb;
  --radius:16px;
}

body{
  background:#f8fafc;
  color:var(--gray-text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Conteneur global */
.ecb-wrap{
  max-width:1100px;
  margin:0 auto;
  padding:24px;
}

/* HERO */
.ecb-hero{
  background:linear-gradient(135deg,var(--blue-dark),var(--blue-main));
  color:#fff;
  padding:28px;
  border-radius:var(--radius);
  box-shadow:0 20px 40px rgba(0,0,0,.15);
  margin-bottom:32px;
}
.ecb-hero h1{
  margin:0 0 10px;
  font-size:32px;
}
.ecb-hero p{
  margin:0;
  font-size:16px;
  opacity:.95;
}

/* ESCALe CARD */
.ecb-card{
  background:#fff;
  border-radius:var(--radius);
  padding:22px;
  margin-bottom:28px;
  border:1px solid var(--gray-light);
  box-shadow:0 10px 30px rgba(0,0,0,.08);
}
.ecb-card h2{
  margin-top:0;
  font-size:22px;
  color:var(--blue-dark);
}
.ecb-meta{
  font-size:14px;
  color:#64748b;
  margin-bottom:14px;
}

/* TEXTE */
.ecb-card p{
  line-height:1.65;
  margin-bottom:14px;
}

/* LIENS */
.ecb-links{
  font-size:14px;
  margin-bottom:16px;
}
.ecb-links a{
  color:var(--blue-main);
  text-decoration:none;
  border-bottom:1px solid var(--blue-soft);
}
.ecb-links a:hover{
  border-bottom-color:var(--blue-main);
}

/* GALERIE IMAGES */
.ecb-media{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:12px;
}
.ecb-media img{
  width:100%;
  height:120px;
  object-fit:cover;
  border-radius:12px;
  border:1px solid var(--gray-light);
}

/* RESPONSIVE */
@media(max-width:600px){
  .ecb-hero h1{font-size:24px;}
  .ecb-media img{height:160px;}
}