*,
::before,
::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
    /* Colors */
    --black: #1a1a1a;
    --white: #f8f8f8;

    /* Fonts */
    --base-font: jubilat, serif;
    --accent-font : franklin-gothic-urw, sans-serif;

    /* Font-size */
    /* Pour les caltuler : Exemple sur la maquette un texte est en 72px. Par défaut le texte en 1em = 16px donc : 72/16 = 4.5 donc 4.5em */
    --fs-10: 0.62rem;
    --fs-12: 0.75rem;
    --fs-13: 0.81rem;
    --fs-14: 0.875rem;
    --fs-15: 0.94rem;
    --fs-16: 1rem;
    --fs-17: 1.06rem;
    --fs-18: 1.125rem;
    --fs-19: 1.188rem;
    --fs-20: 1.25rem;
    --fs-22: 1.375rem;
    --fs-24: 1.5rem;
    --fs-26: 1.625rem;
    --fs-28: 1.75rem;
    --fs-30: 1.87rem;
    --fs-32: 2rem;
    --fs-35: 2.187rem;
    --fs-40: 2.5rem;
    --fs-42: 2.625rem;
    --fs-44: 2.75rem;
    --fs-50: 3.125rem;
    --fs-53: 3.312rem;
    --fs-58: 3.62rem;
    --fs-60: 3.75rem;
    --fs-64: 4rem;
    --fs-72: 4.5rem;
    --fs-74: 4.625rem;
    --fs-75: 4.625rem;
    --fs-80: 5rem;
    --fs-85: 5.31rem;

    /* borders */
    --border: 3px solid var(--black);
    --border-mobile: 2px solid var(--black);

}
/* Global & utilies */
body {
    max-width: 1100px;
    margin: 0 auto;
    background-color: var(--white);
    font-family: var(--base-font);
    color: var(--black);
}
@media (max-width: 1115px) {
    body {
        padding: 15px;
    }
}

/* Header */
header {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    grid-template-rows: .8fr 3fr .8fr;
    margin-bottom: 20px;
}
.header__date, .header__newspaper-number-small {
    font-family: var(--accent-font);
    font-weight: 700;
    font-size: var(--fs-16);
}
.header__date {
    align-self: end;
    text-transform: uppercase;
}
.header__newspaper-name-prefixe, .header__newspaper-subname {
    font-weight: 600;
    font-size: var(--fs-40);
    text-transform: uppercase;
    letter-spacing: .4rem;
}
.header__newspaper-name-prefixe {
    align-self: end;
    justify-self: center;
    translate: 0 50%;
    background-color: var(--white);
    padding: 0 10px;
}
.header__newspaper-number-small {
    text-align: right;
    align-self: end;
}
.header__left-pannel, .header__right-pannel {
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    padding: 15px;
    border-top: var(--border);
}
.header__newspaper-number-big {
    align-self: end;
    font-weight: 500;
    font-size: var(--fs-58);
    width: 100%;
    text-align: center;
    border-bottom: var(--border);
}
.header__weather {
    text-align: center;
}
.header__weather__title, .header__latest-title{
    font-weight: 600;
    font-size: var(--fs-24);
    text-transform: uppercase;
}
.header__weather__txt, .header__latest-txt{
    font-family: var(--accent-font);
    font-weight: 400;
    font-size: var(--fs-15);
}
.newspaper-name-container{
    border-top: var(--border);
    border-left: var(--border);
    border-right: var(--border);
    padding: 15px;
    text-align: center;
}
.header__newspaper-name{
    font-weight: 500;
    font-size: var(--fs-85);
    letter-spacing: .7rem;
    text-transform: uppercase;
}
.header__latest-title, .header__latest-txt {
    text-align: center;
}
.header__latest-title {
    padding-top: 33px;
    border-bottom: var(--border);
}
.header__latest-txt {
    align-self: center;
}
.header__newspaper-punchline{
    grid-column: 1 / 4;
    grid-row: 3 / 4;
    font-family: var(--accent-font);
    font-weight: 400;
    font-size: var(--fs-20);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: var(--border);
    border-bottom: var(--border);
}
@media (max-width: 965px) {
    .header__newspaper-name-prefixe, .header__newspaper-subname {
        font-size: var(--fs-30);
    }
    .header__date, .header__newspaper-number-small {
        font-size: var(--fs-12);
    }
    .header__newspaper-number-big {
        font-size: var(--fs-35);
    }
    .header__weather__title, .header__latest-title {
        font-size: var(--fs-16);
    }
    .header__weather__txt, .header__latest-txt{
        font-size: var(--fs-12);
    }
    .header__newspaper-name {
        font-size: var(--fs-60);
    }
    .header__newspaper-punchline {
        font-size: var(--fs-15);
    }
}
@media (max-width: 710px) {
    header {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(5, 0fr);
    }
    .header__date {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }
    .header__newspaper-number-small {
        width: 100%;
        text-align: right;
    }
    .header__newspaper-name-prefixe {
        grid-column: 1 / 3;
        grid-row: 2 / 3;
        translate: 0 0;
        font-size: var(--fs-20);
        width: 100%;
        text-align: center;
        border-top: var(--border);
        padding-top: 5px;
    }
    .header__left-pannel {
        grid-column: 1 / 2;
        grid-row: 4 / 5;
        border-right: var(--border);
    }
    .header__weather {
        grid-column: 1 / 2;
        grid-row: 1 / 3;
        display: grid;
    }
    .header__newspaper-number-big {
        display: none;
    }
    .newspaper-name-container {
        grid-column: 1 / 3;
        grid-row: 3 / 4;
        border: none;
        padding: 0 15px 5px;
    }
    .header__newspaper-name {
        font-size: var(--fs-30);
    }
    .header__newspaper-subname {
        font-size: var(--fs-20);
    }
    .header__right-pannel {
        grid-column: 2 / 3;
        grid-row: 4 / 5;
    }
    .header__latest-title {
        border: none;
        padding: 0;
    }
    .header__latest-txt {
        align-self: start;
    }
    .header__newspaper-punchline {
        grid-column: 1 / 3;
        grid-row: 5 / 6;
        text-align: center;
    }
}






/* Main */

.article__image {
    width: 100%;
}
.article__inner {
    display: flex;
    justify-content: space-between;
}
.article__first-part {
    flex-basis: 0;
    flex-grow: 3;
    column-count: 3;
    gap: 20px;
    padding-right: 10px;
}
.article__title {
    font-family: var(--accent-font);
    font-weight: 700;
    font-size: var(--fs-75);
    text-transform: uppercase;
    text-align: center;
}
.article__lead{
    font-family: var(--accent-font);
    font-weight: 400;
    font-size: var(--fs-32);
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 20px;
}
.article__hook{
    font-family: var(--base-font);
    font-weight: 600;
    font-size: var(--fs-16);
    margin-bottom: 10px;
    line-height: 1.3;
    text-align: justify;
}
.article__paragraph{
    font-family: var(--base-font);
    font-weight: 200;
    font-size: var(--fs-16);
    line-height: 1.3;
    text-align: justify;
}
.article__quote{
    font-family: var(--accent-font);
    font-weight: 400;
    font-size: var(--fs-22);
}
.first-page__aside{
    border-left: var(--border);
    padding-left: 10px;
    flex-basis: 0;
    flex-grow: 1;
}
.aside__title{
    font-family: var(--base-font);
    font-weight: 600;
    font-size: var(--fs-28);
    text-align: left;
    text-transform: none;
    margin-bottom: 15px;
}
.article__paragraph--first::first-letter{
    font-weight: 500;
    font-size: 2.6rem;
    line-height: 1;
    float: left;
}
.article__paragraph:not(.article__paragraph:last-of-type) {
    margin-bottom: 10px;
}
@media (max-width: 965px) {
    .article__first-part {
        column-count: 2;
    }
    .article__title {
        font-size: var(--fs-53);
    }
    .article__lead {
        font-size: var(--fs-24);
    }
    .article__hook, .article__paragraph {
        font-size: var(--fs-15);
    }
    .article__quote {
        font-size: var(--fs-18);
    }
    .aside__title {
        font-size: var(--fs-22);
    }
    .article__paragraph--first::first-letter{
        font-size: 1.8rem;
        line-height: 1;
    }
}
@media (max-width: 710px) {
    .article__first-part {
        column-count: 0.7;
        padding-right: 0px;
    }
    .article__inner {
        flex-direction: column;
    }
    .first-page__aside {
        border: none;
        padding-left: 0px;
        margin-top: 20px;
    }
}