:root{
  --bg:#f2f3f5;
  --card:#ffffff;
  --text:#1b1b1b;
  --muted:#555;
  --border:#d6d6d6;
  --accent:#2a4b7c;
  --maxw: 960px;
}

*{ box-sizing:border-box; }

html{
  background:var(--bg);
}

body{
  margin:0;
  color:var(--text);
  font-family: Georgia, "Times New Roman", Times, serif;
  line-height:1.6;
}

a{
  color:var(--accent);
  text-decoration:none;
}
a:hover{
  text-decoration:underline;
}

.page{
  max-width: var(--maxw);
  margin: 48px auto;
  background: var(--card);
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  border-radius: 8px;
  overflow: hidden;
}

header.site-header{
  padding: 28px 36px 22px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(to bottom, #fafafa, #f3f3f3);
}

.brand h1{
  margin:0;
  font-size: 26px;
  letter-spacing: .2px;
}

.brand .subtitle{
  margin: 6px 0 0;
  font-size: 15px;
  color: var(--muted);
}

nav.site-nav{
  margin-top: 18px;
  display:flex;
  gap: 18px;
  flex-wrap: wrap;
}

nav.site-nav a{
  font-size: 15px;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}

nav.site-nav a:hover{
  border-bottom-color: var(--accent);
}

main{
  padding: 36px;
}

main h1{
  font-size: 28px;
  margin-top:0;
}

main h2{
  font-size: 22px;
  margin-top: 36px;
}

.home-hero{
  display:grid;
  grid-template-columns: 180px 1fr;
  gap: 28px;
  align-items:start;
}

.home-photo{
  width:180px;
  height:220px;
  object-fit: cover;
  object-position: 50% 20%;
  border-radius: 6px;
  border:1px solid var(--border);
  background:#e6e6e6;
}

.home-actions{
  margin-top: 18px;
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
}

.btn{
  padding: 10px 16px;
  border:1px solid var(--accent);
  border-radius: 6px;
  font-size: 15px;
  background: transparent;
}
.btn:hover{
  background: var(--accent);
  color:#fff;
}

footer.site-footer{
  padding: 16px 36px;
  border-top:1px solid var(--border);
  font-size: 13px;
  color: var(--muted);
  background:#fafafa;
}

.content{
  max-width: 780px;
}

.content p{
  margin: 0 0 14px;
}

.content ul{
  margin: 0 0 14px 20px;
}

.content hr{
  border:0;
  border-top:1px solid var(--border);
  margin: 22px 0;
}

nav.site-nav a.active{
  border-bottom-color: var(--accent);
  font-weight: 600;
}

/* --- CV header --- */

.cv-header{
  display: grid;
  grid-template-columns: 1fr 160px;
  gap: 28px;
  align-items: start;
  margin-bottom: 28px;
}

.cv-identite h2{
  margin-top: 0;
}

.cv-photo img{
  width: 160px;
  height: 200px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: #e6e6e6;
}

/* CV typography refinement */
.cv h2{
  margin-top: 32px;
}

.cv-photo{
  margin-top: 7em;
}

@media (max-width: 720px){
  header.site-header{ padding: 18px 18px 14px; }
  main{ padding: 20px 18px; }

  .home-hero{
    grid-template-columns: 1fr;
  }

  .home-photo{
    width: 160px;
    height: 200px;
  }

  .cv-header{
    grid-template-columns: 1fr;
  }

  .cv-photo{
    margin-top: 0; /* ta valeur 7em doit sauter sur mobile */
  }
}

/* --- Page Personnel --- */

.perso-header{
  display: grid;
  grid-template-columns: 1fr 160px;
  gap: 28px;
  align-items: start;
}

.perso-photo img{
  width: 160px;
  height: 200px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: #e6e6e6;
}

@media (max-width: 720px){
  .perso-header{
    grid-template-columns: 1fr;
  }
}
.home-contact{
  margin: 23px 0 30px;
  font-size: 14px;
}

.home-contact-line{
  display: block;
  margin: 12px 0;
}

.home-contact p{
  display: block;
  margin: 6px 0;
}

.home-contact a{
  display: inline-block;
}

.home-contact a:hover{
  text-decoration: underline;
}

.lang-switch{
  margin-top: 14px;
}

.lang-switch a{
  display: inline-block;
  font-size: 18px;
  text-decoration: none;
  line-height: 1;
}