/* ---------- navigation ---------- */

.top{
  border-bottom: 2px solid var(--line);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 50;
}
.nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .8rem 1.25rem;
  max-width: 1080px;
  margin: 0 auto;
}
.nav-links{
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 1.4rem;
  align-items: center;
  font-size: .95rem;
}
@media (min-width: 760px){
  .nav-links{ display: flex; }
}

/* ---------- héro ---------- */

.hero{
  padding: 3.5rem 0 3rem;
  overflow: hidden;
}
.hero-grid{
  display: grid;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 880px){
  .hero{ padding: 5rem 0 4rem; }
  .hero-grid{
    grid-template-columns: 1.15fr 1fr;
    gap: 3rem;
  }
  .hero-art{ order: 2; }
}

/* ---------- section problème / réponse ---------- */

.probleme{
  padding: 3rem 0;
  border-top: 2px solid var(--line);
}
.section-head{
  margin-bottom: 2rem;
}
.pr-table{
  display: grid;
  gap: .9rem;
}
.pr-row{
  display: grid;
  gap: .2rem;
}
@media (min-width: 760px){
  .pr-row{
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
  }
  .pr-problem{ font-weight: 600; font-size: 1.1rem; }
}

/* ---------- espaces ---------- */

.espaces{
  padding: 3rem 0;
  border-top: 2px solid var(--line);
}
.cards{
  display: grid;
  gap: 1.1rem;
}
@media (min-width: 760px){
  .cards{
    grid-template-columns: 1fr 1fr;
    gap: 1.3rem;
  }
}
@media (min-width: 1000px){
  .cards{ grid-template-columns: repeat(4, 1fr); }
  .card{ display: flex; flex-direction: column; }
  .card .role{ min-height: 3.2rem; }
}

/* ---------- Solis ---------- */

.solis{
  padding: 3rem 0;
  border-top: 2px solid var(--line);
}
.solis-grid{
  display: grid;
  gap: 2rem;
}
@media (min-width: 880px){
  .solis-grid{
    grid-template-columns: 1.1fr 1fr;
    gap: 3rem;
    align-items: start;
  }
}

/* ---------- sans connexion ---------- */

.offline{
  padding: 3rem 0;
  border-top: 2px solid var(--line);
}

/* ---------- appel à l'inscription ---------- */

.cta{
  padding: 3rem 0;
  border-top: 2px solid var(--line);
}

/* ---------- footer ---------- */

.footer-grid{
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  gap: 1.4rem;
}
@media (min-width: 760px){
  .footer-grid{ grid-template-columns: 1fr auto; align-items: start; }
}