*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
    margin:0;
    background:#030507 url("background.png") center top/cover fixed no-repeat;
    color:#111;
    font-family:Arial,Helvetica,sans-serif;
    min-height:100vh;
}

body:before{
    content:"";
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.24);
    pointer-events:none;
}

.page{
    position:relative;
    z-index:1;
    max-width:1050px;
    margin:auto;
    padding:25px 28px 60px;
}

/* =========================
   LOGO GP.PNG
   ========================= */

header.logo{
    width:100%;
    text-align:center;
    margin:0 0 18px;
    padding:0;
    line-height:0;
    overflow:hidden;
}

header.logo img[src="gp.png"]{
    display:block;
    width:420px;
    height:auto;
    max-width:90%;
    margin:0 auto;
}

/* =========================
   DESKTOP
   ========================= */

.layout{
    display:grid;
    grid-template-columns:150px minmax(330px,1fr) 82px;
    gap:24px;
    align-items:start;
}

.leftnav{
    padding-top:4px;
}

.navitem{
    display:block;
    text-decoration:none;
    margin-bottom:13px;
    line-height:1.05;
}

.navitem strong{
    display:block;
    font-size:18px;
    font-weight:500;
}

.navitem span{
    display:block;
    font-size:9px;
    line-height:1.2;
    color:#eee;
}

.cyan strong{color:#27aee4}
.orange strong{color:#f17847}
.peach strong{color:#f39a8b}
.pink strong{color:#ef5a83}
.green strong{color:#9dc43d}

/* ARTICLES */

.feed{
    max-width:500px;
    margin:auto;
}

.card{
    background:rgba(248,248,244,.97);
    border:1px solid rgba(0,0,0,.15);
    border-radius:6px;
    margin-bottom:18px;
    padding:9px 12px 11px;
    box-shadow:0 3px 12px rgba(0,0,0,.35);
}

.card-title{
    font-size:11px;
    font-weight:700;
    margin-bottom:7px;
}

.content,.card p{
    font-size:11px;
    line-height:1.45;
}

.excerpt{
    font-size:11px;
    font-weight:700;
    margin:7px 0;
    color:#444;
}

.post-image{
    display:block;
    width:100%;
    max-height:430px;
    object-fit:cover;
    margin-bottom:8px;
}

.post-date{
    font-size:8px;
    color:#777;
    margin-top:10px;
}

.source{
    text-align:right;
    font-size:8px;
    color:#777;
    margin-top:4px;
}

.card a{color:#315c7a}

/* BOUTONS */

.rightnav{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    padding-top:5px;
}

.circle{
    width:45px;
    height:45px;
    border-radius:50%;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    text-decoration:none;
    background:radial-gradient(circle at 50% 35%,#f5d4c8 0 16%,#222 17% 38%,#111 39%);
    border:2px solid rgba(235,235,205,.8);
    box-shadow:0 2px 8px #000;
}

.circle:nth-child(2){
    background:radial-gradient(circle at 50% 35%,#d5e7ed 0 17%,#6d4650 18% 38%,#111 39%);
}

.circle:nth-child(3){
    background:radial-gradient(circle at 50% 35%,#d9b1a2 0 17%,#6a5d58 18% 38%,#111 39%);
}

.circle:nth-child(4){
    background:radial-gradient(circle at 50% 35%,#c8d5e0 0 17%,#374b60 18% 38%,#111 39%);
}

.circle span{
    font-size:7px;
    color:#111;
    background:#e8e8d2;
    border-radius:7px;
    padding:1px 5px;
    margin-bottom:-4px;
}

/* FOOTER */

footer{
    margin-top:30px;
    color:#ddd;
    font-size:10px;
    display:flex;
    justify-content:space-between;
    opacity:.8;
}

footer a{color:#ddd}

/* =========================
   MOBILE
   ========================= */

@media (max-width:760px){

    body{
        background-attachment:scroll;
        overflow-x:hidden;
    }

    .page{
        width:100%;
        max-width:none;
        padding:10px 9px 35px;
    }

    /* GP.PNG : VRAIMENT PETIT */
    header.logo{
        margin:0 0 7px;
        height:auto;
    }

    header.logo img[src="gp.png"]{
        width:185px !important;
        max-width:185px !important;
        height:auto !important;
        margin:0 auto !important;
    }

    /* BOUTONS JUSTE SOUS LE LOGO */

    .rightnav{
        order:-1;
        flex-direction:row;
        justify-content:center;
        align-items:center;
        gap:7px;
        padding:0;
        margin:0 0 16px;
    }

    .circle{
        width:40px;
        height:40px;
        flex:0 0 40px;
    }

    /* UNE SEULE COLONNE PRINCIPALE */

    .layout{
        display:flex;
        flex-direction:column;
        width:100%;
        gap:15px;
    }

    /* MENU */

    .leftnav{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:12px 14px;
        width:100%;
        padding:0 7px;
    }

    .navitem{
        margin:0;
    }

    .navitem strong{
        font-size:17px;
    }

    .navitem span{
        font-size:9px;
        line-height:1.2;
    }

    /* ARTICLES PLUS LARGES */

    .feed{
        width:100%;
        max-width:none;
        margin:0;
    }

    .card{
        width:100%;
        margin-bottom:14px;
        padding:11px 12px;
        border-radius:7px;
    }

    .card-title{
        font-size:13px;
    }

    .content,.card p,.excerpt{
        font-size:12px;
        line-height:1.5;
    }

    .post-image{
        width:100%;
        max-width:100%;
        height:auto;
        max-height:none;
        object-fit:contain;
    }

    .post-date,.source{
        font-size:9px;
    }

    footer{
        margin-top:20px;
        font-size:9px;
    }
}

/* PETITS TELEPHONES */

@media (max-width:380px){

    .page{
        padding-left:7px;
        padding-right:7px;
    }

    header.logo img[src="gp.png"]{
        width:165px !important;
        max-width:165px !important;
    }

    .rightnav{
        gap:5px;
        margin-bottom:14px;
    }

    .circle{
        width:38px;
        height:38px;
        flex-basis:38px;
    }

    .leftnav{
        gap:10px;
    }

    .navitem strong{
        font-size:16px;
    }

    .navitem span{
        font-size:8px;
    }

    .card{
        padding:10px 11px;
    }
}