:root {
  --bleu-fonce: #17325D;
  --or: #C7A243;
  --gris-clair: #E6E6E6;
  --gris-fonce: #222222;
  --font-principale: 'Montserrat', Arial, sans-serif;
  --font-secondaire: 'Open Sans', Arial, sans-serif;
}
body { font-family: var(--font-secondaire); color: var(--gris-fonce); margin: 0; background: #F5F5F3;}
header { background: #fff; box-shadow: 0 2px 6px #eee; padding: 20px 0; text-align: center;}
nav { margin-top: 10px;}
nav a { color: var(--bleu-fonce); text-decoration: none; margin: 0 18px; font-family: var(--font-principale); font-weight: bold;}
nav a:hover { color: var(--or);}
h1 { color: var(--bleu-fonce); font-family: var(--font-principale); font-size: 2.5em; margin-top: 40px;}
.subtitle { color: var(--or); font-size: 1.2em; letter-spacing: 2px;}
.section { max-width: 800px; margin: 40px auto; background: #fff; border-radius: 20px; box-shadow: 0 2px 10px #e6e6e6; padding: 40px; }
.btn { background: var(--or); color: #fff; padding: 15px 40px; border-radius: 30px; border: none; font-size: 1.1em; font-family: var(--font-principale);}
.btn:hover { background: var(--bleu-fonce);}
footer { background: #17325D; color: #fff; text-align: center; padding: 18px 0; font-size: 1em; margin-top: 40px;}
.logo-img {
  display: block;
  margin: 0 auto;
  height: 250px;
  width: auto;
}


@media (max-width: 600px) {
  .btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 14px 20px;
    font-size: 1em;
    text-align: center;
    margin-top: 20px;
  }

  .section {
    padding: 20px;
    margin: 20px auto;
    border-radius: 12px;
  }
  
  .logo-img {
    height: 100px;
  }
  

  h1 {
    font-size: 1.6em;
  }

  nav a {
    display: inline-block;
    margin: 0 8px;
    font-size: 0.95em;
  }
  
}

img.linkedin-icon {
  height: 20px;
  width: auto;
  max-height: 20px;
  max-width: 100%;
  vertical-align: middle;
  margin-right: 6px;
  display: inline-block;
}