/* =========================
   Variables
========================= */
:root{
  --blue:#2f74b9;
  --blue-dark:#1f3f6b;
  --orange:#f59a2a;

  --page-max: 1120px;
  --content-max: 980px;
}

/* =========================
   Reset / Base
========================= */
*{
  box-sizing:border-box;
}

html, body{
  height:100%;
}

body{
  margin:0;
  font-family: "Segoe UI", Roboto, Arial, Helvetica, sans-serif;
  color:var(--blue-dark);
  background:#ffffff;
  line-height:1.5;
}

/* =========================
   Bandeau haut
========================= */
.topbar{
  background:var(--blue);
  padding:14px 18px;
}

.topbar__inner{
  max-width: var(--page-max);
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:18px;
}

.brand{
  display:inline-flex;
  align-items:center;
  text-decoration:none;
}

.brand__logo{
  height:66px;
  width:auto;
  display:block;
}

.topbar__title{
  margin:0;
  flex:1;
  text-align:center;
  color:#ffffff;
  font-size:28px;
  font-weight:600;
  letter-spacing:.2px;
}

/* =========================
   Page & Sections
========================= */
.page{
  max-width: var(--page-max);
  margin:0 auto;
  padding:40px 22px 70px;
}

.content{
  max-width: var(--content-max);
}

/* Espacement entre sections */
.section{
  margin-top:56px;
}

/* Pas d’espace avant la première section */
.section:first-of-type{
  margin-top:0;
}

/* =========================
   Titres
========================= */
h1{
  margin:0 0 16px;
  font-size:44px;
  font-weight:700;
  color:var(--blue);
}

h2{
  margin:0 0 18px;
  font-size:22px;
  font-weight:500;
  color:var(--orange);
}

/* =========================
   Texte
========================= */
p{
  margin:0 0 16px;
  font-size:15px;
}

strong{
  font-weight:700;
}

/* =========================
   Listes
========================= */
.list{
  margin:8px 0 18px 18px;
  padding:0;
}

.list li{
  margin:6px 0;
  font-size:15px;
}

/* Liste très indentée (Qui sommes-nous ?) */
.list--indented{
  margin-left:78px;
}

/* =========================
   Responsive
========================= */
@media (max-width: 900px){

  .topbar__inner{
    flex-wrap:wrap;
  }

  .topbar__title{
    text-align:left;
    font-size:20px;
  }

  h1{
    font-size:34px;
  }

  h2{
    font-size:20px;
  }

  .list--indented{
    margin-left:28px;
  }
}