@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;400;700&display=swap');

:root{
  --color-primary: #146772;
  --color-text: #002B30;
  --color-sand: #E6DCCF;
  --color-seafoam: #7FCED6;
}

*{box-sizing:border-box}
body{
  background-color:#eaf0f6;
  font-family:'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  margin:40px;
  color:var(--color-text);
}
h1{
  text-align:center;
  color:#34495e;
  margin-bottom:24px;
  font-weight:700;
}

.filterbar{
  max-width:1250px; /* élargi encore de 100px */
  margin:0 auto 24px auto;
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
}
.filterbar select,
.filterbar button{
  padding:10px 12px;
  border:1px solid #cfd8e3;
  border-radius:10px;
  background:white;
  cursor:pointer;
  font-family:inherit;
}
.filterbar button{ background:var(--color-primary); color:white; border:none; }
.filterbar label{ font-weight:600; }

.container{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  max-width:1250px; /* élargi encore de 100px */
  margin:0 auto;
}
.item{
  background:#fff;
  padding:15px;
  box-shadow:0 2px 6px rgba(0,0,0,0.1);
  border-radius:12px;
  transition:transform .3s ease, box-shadow .3s ease;
  position:relative;
}
.item:hover{ transform:scale(1.03); box-shadow:0 6px 12px rgba(0,0,0,0.15); }
.icon{
  font-size:2em;
  position:absolute;
  top:5px;  /* emoji remonté de 10px */
  right:15px;
}
.item h2{
  margin-top:0;
  font-size:1.1em;
  color:var(--color-primary);
}
.item p{
  font-size:0.92em;
  margin:8px 0 12px;
  color:#566;
}
.item small{
  display:block;
  color:#7a8b9a;
  margin-top:6px;
  font-size:0.8em;
}
.item a{
  text-decoration:none;
  color:#2c3e50;
  font-weight:700;
  font-size:0.95em;
}
.item a:hover{
  color:var(--color-primary);
  text-decoration:underline;
}

@media (max-width: 900px){
  .container{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 600px){
  body{ margin:20px; }
  .container{ grid-template-columns:1fr; }
  .icon{ position:static; margin-bottom:10px; }
}