/* Portail SIM (index) — 2 univers uniquement */

.top{
  padding:34px 0 10px;
  text-align:center;
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  letter-spacing:.3px;
  font-size:1.15rem;
}
.dot{
  width:10px;height:10px;border-radius:999px;
  background: linear-gradient(135deg,var(--accent-intervention),var(--accent-nature));
}
.h1{
  margin:14px 0 0;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
}

.portal{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px;
  margin:22px 0 12px;
}
@media (max-width: 900px){
  .portal{grid-template-columns:1fr}
}

.pick{
  position:relative;
  min-height: 360px;
  border-radius: calc(var(--radius) + 2px);
  overflow:hidden;
  border:1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.pick:hover{ transform: translateY(-2px); box-shadow: 0 22px 70px rgba(15,23,42,.16); }
.pick:active{ transform: translateY(0px); }

.pick .bg{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
  opacity:.34;
  filter: saturate(1.05) contrast(1.04);
}
.pick .veil{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.70));
}

/* Sur le portail : on veut une image "plus présente" pour la carte Nature */
.pick.naturePick .bg{ opacity:.58; }
.pick.naturePick .veil{
  background: linear-gradient(180deg, rgba(255,255,255,.80), rgba(255,255,255,.58));
}

.pick .inner{
  position:relative;
  height:100%;
  padding:22px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:14px;
}

.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:fit-content;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.70);
  font-size:.85rem;
  line-height:1.25;
  color:var(--muted);
  margin: 0 auto;
  text-align:center;
  max-width: 52ch;
  /*
    Objectif : aligner les titres + descriptions des 2 cartes.
    La pastille “Intervention” est plus longue et passe souvent sur 2 lignes.
    On réserve donc une hauteur équivalente sur les 2 pastilles.
  */
  min-height: 48px;
}

.logo{
  display:block;
  width: 210px;
  max-width: 75%;
  margin: 18px auto 26px;
}

.title{
  margin:0;
  font-size: 1.35rem;
  letter-spacing:.2px;
  text-align:left;
}
.desc{
  margin:8px 0 0;
  max-width: 56ch;
  color:var(--muted);
  line-height: 1.45;
  text-align:left;
}

.ctaRow{
  display:flex;
  justify-content:center;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 16px;
  border-radius: 14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.78);
  font-weight:650;
}

.btnPrimary{
  border-color: transparent;
  color:white;
}
.btnPrimary.intervention{ background: linear-gradient(135deg, rgba(198,40,40,.95), rgba(198,40,40,.72)); }
.btnPrimary.nature{ background: linear-gradient(135deg, rgba(47,133,90,.95), rgba(47,133,90,.72)); }

.note{
  margin: 10px auto 0;
  max-width: 85ch;
  text-align:center;
  color:var(--muted);
  background: rgba(255,255,255,.60);
  border:1px solid var(--line);
  border-radius: 16px;
  padding: 14px 16px;
}