:root {

	--color_blue: hsl(208, 100%, 28%);
	--color_blue_brighter: hsl(208, 80%, 38%);

}

h1,h2,h3 {
	text-wrap: balance;
	hyphens: none;
}

.hero h1 {
	text-shadow: 0.02em 0.02em 0.10em hsla(220,100%,20%,.75);
}

.blog_menu .level1.container {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}

.blog_menu a {
    display: block;
    border: solid 1px var(--color_main_brighter_3);
    background: var(--color_main_creamy_1);
    padding: .5rem 1rem;
}
.blog_menu a.submenu.submenu-active {
    background: var(--color_main_creamy_3);
}

html .header .row {
	align-items: end;
}

html .header span.level1.container  {
	font-family: var(--headline_font_family);
	font-size: 1.5em;
	font-weight: 300;
}

@media all and (min-width: 40em) {
.section.header.is_fixed span.level1.container a{
	font-size: 1rem;
}
.section.header.is_fixed span.mainmenu a.mainmenu {
	padding-top: .15em;
	padding-bottom: .15em;
}
.footer .main_then_sub .level1.container {
    display: flex;
    justify-content: space-between;
}

}

@media (min-width: 60rem) {
.section.footer .row {
    grid-template-columns: repeat(24,1fr);
}
}


html .header span.mainmenu a.mainmenu {
	color: var(--color_blue);
	padding-left: 0;
	padding-right: 0;
	transition: all var(--effect_transition);
}



html .header span.mainmenu a.mainmenu:hover {
	color: var(--color_blue_brighter);
	background: none;
}

.header a.mainmenu-active {
	border-bottom: solid 3px var(--color_main);
}

html .header span.mainmenu a.submenu:hover {
	color: var(--color_main_brighter_1);
	background: none;
}

.header span.mainmenu a.submenu {
	color: var(--color_text);
}

.header span.mainmenu a.submenu-active {
	color: var(--color_main);
}

.header .mainmenu > .container.level2 {
	font-size: 0.8em;
}

.button.picto {
	aspect-ratio: 1/1;
	padding: 2rem;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
}

.footer .footer_icon {
	transition: all var(--effect_transition);
  height: 4rem;
  width: auto;
  display: inline-block;
  margin-right: 2em;
  margin-bottom: 1em;
  max-width: 5rem;
  object-fit: contain;
}

.footer .footer_icon:not(:hover) {
mix-blend-mode: darken;
filter: grayscale(1);
}


.footer .footer_icon.social {height: 1.8rem}

html {
    background-color: var(--color_main_creamy_3);
}

div.footer * {
    color: var(--color_text);
}

div.footer {text-wrap: balance;}
div.footer a:has(img){display: inline-block;}
div.footer h3{font-size: calc(var(--font_scale_headlines) * 1.25em);}

.footer .icon {
    margin-left: inherit;
}
div.button a:hover{
background-color:var(--color_main);
}

html body div.section.header .row div.info {
    display: none;
    position: fixed;
    right: 3vw;
    bottom: 3vw;
		padding: 0;
}

@media (min-width: 40em) {
	html body div.section.header .row div.info {
	  display: block;
	}
}

.header div.info .info_button {
	display: inline-flex;
  width: 3rem;
	background: white;
	padding: .9rem .6rem .6rem .9rem;
	aspect-ratio: 1/1;
	border-radius: 50%;
	box-shadow: 0 .5rem 1rem hsla(0,0%,0%,.1), 0 .25rem .5rem -.25rem hsla(0,0%,0%,.35);
}

div.info .info_button img {
	scale: 1;
	height: 3rem;
	cursor: pointer;
	transition: all var(--effect_transition);
}

div.info .info_button img:hover, div.info input:checked ~ label img {
	scale: 1.2
}

div.info input {
    display: none;
}

div.info .panel {
    transform: scale(0);
    position: absolute;
    width: 20em;
		bottom: 1rem;
    right: 4rem;
    background: white;
    padding: var(--gap);
    border-radius: var(--gap) var(--gap) 0 var(--gap);
    box-shadow: 1em 2em 2em -2.5em hsl(0deg 0% 0% / 50%), 0 0 .5em 0 hsl(0deg 0% 0% / 10%);
    transition: transform var(--effect_transition) 200ms;
    transform-origin: right bottom;
}

div.info input:checked ~ div.panel {
    transform: scale(1);
    transition: transform var(--effect_transition);
}