*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --font-family: Verdana, Geneva, Tahoma, sans-serif;
    --heightlogo: 72px;
    
    /* Variables de la grille */
    --padding-inline: 1rem;
    --max-width-content: 1200px;
    
    /* Couleurs */
    --clr-white: hsl(0, 0%, 100%);
    --clr-whitehr: hsl(0, 0%, 90%);
    --clr-yellowgreen: hsl(70, 70%, 54%);
    --clr-orange: hsl(14, 84%, 54%);
    --clr-green: hsl(158, 39%, 22%);
    --clr-txt: hsl(0, 0%, 20%);
    --clr-txtlight: hsl(0, 0%, 40%);
}

body {
    line-height: 1.6;
    color: var(--clr-txt);
    background-color: var(--white);
    font-family: var(--font-family);
}

h1 { font-size: clamp(1.5rem, 1.333rem + 0.741vw, 2rem);}
h2 { font-size: clamp(1.25rem, 1.083rem + 0.741vw, 1.75rem);}
h3 { font-size: clamp(1rem, 0.833rem + 0.741vw, 1.5rem);}

a {
    color: inherit;
}

a:hover, a:focus {
    text-decoration: none;
}

img {
    max-width: 100%;
}

body:nth-child(2){
    margin-top: calc(var(--heightlogo) + 2rem + 4px);
}

/* -------------------------------------------------- MA GRILLE PRINCIPAL */
.content-grid {
    display: grid;
    grid-template-columns: [full-width-start] minmax(var(--padding-inline), 1fr) [content-start] min(100% - ( var(--padding-inline) * 2), var(--max-width-content)) [content-end] minmax(var(--padding-inline), 1fr) [full-width-end];
}

.content-grid > * {
    grid-column: content;
}

.full-width > * {
    grid-column: full-width;
}