*,
*::before,
*::after {
 box-sizing:border-box;
 padding:0;
 margin:0;
 background:none;
 text-decoration:none;
 outline:none;
 font-family:inherit;
 font-size:inherit;
 line-height:inherit;
 font-weight:inherit;
 color:inherit;
 -webkit-font-smoothing:antialiased;
 -moz-osx-font-smoothing:grayscale;
}

:root {
 --c-bg: hsl(0,0%,100%);
 --c-text: hsl(0,0%,10%);
 --c-gray: hsl(0,0%,50%);
 --c-gray-light: hsl(0,0%,95%);
 --f-family: Arial , -apple-system, system-ui, BlinkMacSystemFont, Helvetica, sans-serif;
 --f-size: 15px;
 --f-height: 22px;
 --f-weight: 400;
 --f-scale-s: 0.79;
 --f-scale-l: 1.424;
 --f-scale-xl: 2.52;
 --l-narrower: 9rem;
 --l-narrow: 18rem;
 --l-regular: 24rem;
 --l-wide: 36rem;
 font-size:var(--f-height);
 font-family:var(--f-family);
 font-weight:var(--f-weight);
 background:var(--c-bg);
 color:var(--c-text)
}

body {
 font-family:var(--f-family);
 font-weight:var(--f-weight);
 font-size:var(--f-size);
 line-height:var(--f-height)
}

h2
{
 font-size:calc(var(--f-size) * var(--f-scale-l));
 line-height:1.3rem;
 padding-bottom:.35rem;
 font-weight:600
}



/* Gestion du header */

.header {
 padding:1.25rem 1.5rem; /* 20px, 24px */
 position:sticky;
 top:0;
 z-index:9999;
 background:var(--c-bg); /* hsl(0,0%,100%); */
 border-bottom:1px solid var(--c-gray-light); /* hsl(0,0%,95%); */
 display:flex;
 justify-content:space-between;
}
.site-tagline {
 color:var(--c-gray); /* hsl(0,0%,50%); */
 margin-left:0.5rem /* 8px */
}
@media (max-width: 499px) {
 .site-tagline {
  display:none
 }
}

button {
 cursor:pointer;
 display:inline-block;
 border:none;
 margin:0;
 background:none;
 color:var(--c-gray)
}
button:hover {
 color:var(--c-gray-light)
}



/* Gestion des blocs */

.headline {
 padding:1.5rem;
 display:grid;
 margin-bottom:2rem;
 grid-template-columns:repeat(2,auto-fit, minmax(9rem, 1fr) );;
 grid-gap:1.5rem;
}

.intro {
 margin-bottom:2rem;
 max-width:var(--l-regular);
 font-size:calc(var(--f-size) * var(--f-scale-xl));
 line-height:2rem;
}

.intro-subtitle {
 display:block;
 border:none;
 margin-top:1rem;
 max-width:var(--l-regular);
 font-size:calc(var(--f-size) * var(--f-scale-l));
 line-height:1.4rem;
 color:var(--c-gray);
}

.presentation-block {
 padding:1.5rem;
 display:grid;
 margin-bottom:1rem;
 grid-template-columns:repeat(auto-fit, minmax(13rem, 1fr) );;
 grid-gap:1.5rem;
}

.presentation {
 display:block;
 border:none;
 margin-bottom:1rem;
 max-width:var(--l-regular);
 font-size:calc(var(--f-size) * var(--f-scale-l));
 line-height:1.4rem;
}




/* Gestion des listes */

.grid {
 padding:1.5rem;
 display:grid;
 margin-bottom: 3rem;
 grid-template-columns:repeat(auto-fit, minmax(13rem, 1fr));
 grid-gap:3rem
}
.list-container {
 padding:1rem 0rem;
}
.list-header {
 margin-bottom:1.5rem
}
.list-category {
 display:inline
}
.list-category {
 font-size:calc(var(--f-size) * var(--f-scale-l));
 line-height:1.3rem;
 padding-top:.35rem;
 padding-bottom:.35rem
}
.list {
 list-style:none;
 margin:1rem 0 0
}
.item-name {
 margin:1rem 0 0;
 position:relative
}
.item-name::before {
 content:"";
 position:absolute;
 top:-0.5rem;
 right:0;
 left:0;
 height:1px;
 background:var(--c-gray-light)
}
.subtitle-item-name {
 font-size:calc(var(--f-size) * var(--f-scale-s));
 line-height:.8rem;
 padding-top:.1rem;
 padding-bottom:.1rem;
 color:var(--c-gray)
}



/* Gestion des images */

.img-figure {
 margin-bottom:0frem;
}
.img-wrapper {
 position:relative;
 overflow: hidden;
}
.img {
 display:block;
 width:100%;
 height:auto;
 position:absolute;
 top:0;
 right:0;
 bottom:0;
 left:0
}
.img-container {
 padding:1rem;
 background:var(--c-bg-light)
}
@media(min-width: 600px) {
.img-container {
  padding:2rem
 }
}



/* Gestion du footer */

footer {
 margin-top:1rem;
 padding:1.25rem 1.5rem;
 border-top:1px solid var(--c-gray-light);
 text-align:center
}
footer a {
 font-size:calc(var(--f-size) * var(--f-scale-m));
 line-height:.8rem;
 padding-top:.1rem;
 padding-bottom:.1rem;
 margin:0 .15rem;
}

a:link {
  text-decoration: underline;
}