/* En-tête partagé. Son chrome reste sombre partout, y compris quand le CV
   passe en thème clair : sinon le texte hérité du thème se perdrait sur le
   fond du bandeau. Une page qui veut d'autres couleurs redéfinit les --e-*. */

html{--h-entete:54px}

.entete-site{
  --e-fond: rgba(4, 7, 7, .82);
  --e-ligne: #214854;
  --e-texte: #dbe3e5;
  --e-vif: #80caf7;

  position:sticky;
  top:0;
  z-index:60;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:0 clamp(14px, 3vw, 28px);
  min-height:54px;
  background:var(--e-fond);
  border-bottom:1px solid var(--e-ligne);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  font-family:'Cinzel', Georgia, 'Times New Roman', serif;
}

.entete-site .marque{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:16px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--e-texte);
  text-decoration:none;
  white-space:nowrap;
}
.entete-site .marque:hover{color:#fff}

.lune-marque{
  width:13px;
  height:13px;
  border-radius:50%;
  background:var(--e-vif);
  box-shadow:inset -4px 1px 0 0 var(--e-fond);
  flex:none;
}

.menu-site{display:flex;gap:clamp(14px, 2.6vw, 30px)}

.menu-site a{
  position:relative;
  font-size:13px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--e-texte);
  text-decoration:none;
  padding:6px 0;
  opacity:.8;
  transition:opacity .2s, color .2s;
}
.menu-site a:hover{opacity:1;color:#fff}
.menu-site a:focus-visible{outline:2px solid var(--e-vif);outline-offset:4px;border-radius:2px}

.menu-site a.ici{opacity:1;color:var(--e-vif)}
.menu-site a.ici::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:1px;
  background:var(--e-vif);
}

.burger{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:40px;
  height:36px;
  padding:0;
  background:transparent;
  border:1px solid var(--e-ligne);
  border-radius:3px;
  cursor:pointer;
}
.burger span{
  display:block;
  width:18px;
  height:1.5px;
  margin:0 auto;
  background:var(--e-texte);
  transition:transform .22s, opacity .18s;
}
.burger:hover{border-color:var(--e-vif)}
.burger:focus-visible{outline:2px solid var(--e-vif);outline-offset:2px}

@media (max-width: 720px){
  .entete-site{flex-wrap:wrap}
  .burger{display:flex;order:2}

  .menu-site{
    order:3;
    flex-basis:100%;
    flex-direction:column;
    gap:0;
    max-height:0;
    overflow:hidden;
    transition:max-height .28s ease;
  }
  .entete-site.ouvert .menu-site{max-height:60vh}

  .menu-site a{
    padding:14px 2px;
    font-size:14px;
    border-top:1px solid var(--e-ligne);
    opacity:.92;
  }
  .menu-site a.ici::after{display:none}
  .menu-site a.ici{padding-left:12px;border-left:2px solid var(--e-vif)}

  .entete-site.ouvert .burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .entete-site.ouvert .burger span:nth-child(2){opacity:0}
  .entete-site.ouvert .burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
}

@media (prefers-reduced-motion: reduce){
  .menu-site,
  .burger span{transition:none}
}

@media print{
  .entete-site{display:none !important}
}