@font-face { font-family: 'Poppins'; font-weight: 400; font-style: normal; font-display: swap; src: url(assets/fonts/poppins-400.woff2) format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 600; font-style: normal; font-display: swap; src: url(assets/fonts/poppins-600.woff2) format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 700; font-style: normal; font-display: swap; src: url(assets/fonts/poppins-700.woff2) format('woff2'); }

:root {
    --text: #14161a;
    --misc: #fe5603;
}

* {
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
}

body {
    margin: 0;
    border-top: 4px solid var(--misc);
    background: #fff;
    color: var(--text);
    font-family: 'Poppins', sans-serif;
    font-size: 1.6rem;
}

.hub-header {
    padding: 40px 20px 0;
    text-align: center;
}

.hub-logo {
    margin: 0;
}

.hub-logo img {
    display: block;
    width: min(414px, 80%);
    height: auto;
    margin: 0 auto;
}

.hub-intro {
    max-width: 864px;
    margin: 40px auto 48px;
    padding: 0 20px;
    font-size: 1.5rem;
    line-height: normal;
}

.hub-intro p {
    margin: 0 0 1.4em;
}

.hub-intro p:last-child {
    margin-bottom: 0;
}

.hub-panels {
    display: grid;
}

.panel {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    min-height: 340px;
    padding: 40px 20px;
    overflow: hidden;
    color: #fff;
    text-align: center;
}

.panel::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--overlay);
}

.panel > * {
    position: relative;
    z-index: 1;
}

.panel .panel-photo {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.panel-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.panel-logo {
    display: block;
    max-width: 280px;
    height: auto;
}

.panel-label {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 600;
    line-height: normal;
}

.panel-label::after {
    content: "";
    display: block;
    width: 16px;
    height: 1px;
    margin: 10px auto 0;
    background: #fff;
}

.panel-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    border: 1px solid #fff;
    border-radius: 70px;
    background: rgba(0, 0, 0, .32);
    color: #fff;
    font-size: 1.6rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s ease-in-out;
}

.panel-link img {
    display: block;
    transition: transform .2s ease-in-out;
}

.panel-link:hover,
.panel-link:focus-visible {
    background: rgba(0, 0, 0, .6);
}

.panel-link:hover img,
.panel-link:focus-visible img {
    transform: translate(2px, 2px);
}

.panel--comellink { --overlay: rgba(254, 86, 3, .78); }
.panel--bankable { --overlay: rgba(4, 57, 151, .52); }
.panel--wearepublic { --overlay: rgba(130, 0, 67, .86); }
.panel--lelab { --overlay: rgba(140, 82, 255, .76); }

@media (min-width: 960px) {
    /* Page tenant dans la fenêtre : panneaux à la largeur de la fenêtre, en-tête réduit pour occuper la hauteur restante */
    :root {
        --pw: calc(100vw / 1440);
        --px: min(var(--pw), calc((100vh - 4px - 365 * var(--pw)) / 515));
    }

    html,
    body {
        height: 100%;
        overflow: hidden;
    }

    body {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: calc(16 * var(--px));
    }

    main {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: calc(100vh - 4px);
    }

    .hub-header {
        position: absolute;
        top: 4px;
        left: 0;
        right: 0;
        padding: calc(58 * var(--px)) 0 0;
    }

    .hub-logo img {
        width: calc(414 * var(--px));
    }

    .hub-intro {
        width: calc(864 * var(--px));
        max-width: none;
        margin: calc(58 * var(--px) + 86 * var(--px) + 40 * var(--px)) auto 0;
        padding: 0;
        font-size: calc(15 * var(--px));
    }

    .hub-panels {
        position: relative;
        display: block;
        --px: var(--pw);
        width: 100%;
        height: calc(365 * var(--pw));
        margin-top: auto;
        padding: 0;
    }

    .panel {
        position: absolute;
        top: 0;
        display: block;
        min-height: 0;
        height: calc(365 * var(--px));
        padding: 0;
        gap: 0;
    }

    .panel-logo {
        position: absolute;
        max-width: none;
    }

    .panel-label {
        position: absolute;
        top: calc(203 * var(--px));
        width: calc(300 * var(--px));
        margin-left: calc(-150 * var(--px));
        font-size: calc(18 * var(--px));
    }

    .panel-link {
        position: absolute;
        top: calc(296 * var(--px));
        transform: translateX(-50%);
        font-size: calc(16 * var(--px));
    }

    .panel--comellink {
        left: 0;
        width: calc(360 * var(--px));
        clip-path: polygon(0 0, 100% 0, 91.667% 100%, 0 100%);
    }
    .panel--bankable {
        left: calc(330 * var(--px));
        width: calc(390 * var(--px));
        clip-path: polygon(7.692% 0, 100% 0, 92.308% 100%, 0 100%);
    }
    .panel--wearepublic {
        left: calc(690 * var(--px));
        width: calc(390 * var(--px));
        clip-path: polygon(7.692% 0, 100% 0, 92.308% 100%, 0 100%);
    }
    .panel--lelab {
        left: calc(1050 * var(--px));
        width: calc(390 * var(--px));
        clip-path: polygon(7.692% 0, 100% 0, 100% 100%, 0 100%);
    }

    /* Cadrage des photos (px de la maquette, relatifs à chaque panneau) */
    .panel .panel-photo {
        inset: auto;
        overflow: hidden;
    }
    .panel--comellink .panel-photo { left: calc(-208 * var(--px)); top: calc(-50 * var(--px)); width: calc(762 * var(--px)); height: calc(465 * var(--px)); }
    .panel--comellink .panel-photo img { position: absolute; width: 101.71%; height: 125.08%; left: 1.44%; top: -7.41%; }
    .panel--bankable .panel-photo { left: calc(-483 * var(--px)); top: calc(-56.6 * var(--px)); width: calc(1388 * var(--px)); height: calc(478 * var(--px)); }
    .panel--wearepublic .panel-photo { left: calc(-168 * var(--px)); top: calc(-50 * var(--px)); width: calc(762 * var(--px)); height: calc(465 * var(--px)); }
    .panel--wearepublic .panel-photo img { position: absolute; width: 101.71%; height: 125.08%; left: -1.71%; top: -2.03%; }
    .panel--lelab .panel-photo { left: calc(44 * var(--px)); top: calc(-14 * var(--px)); width: calc(316 * var(--px)); height: calc(379 * var(--px)); }

    /* Logos, labels et boutons : positions du centre dans la maquette */
    .panel--comellink .panel-logo { left: calc(32 * var(--px)); top: calc(112 * var(--px)); width: calc(276 * var(--px)); }
    .panel--comellink .panel-label { left: calc(170 * var(--px)); }
    .panel--comellink .panel-link { left: calc(170 * var(--px)); }

    .panel--bankable .panel-logo { left: calc(55 * var(--px)); top: calc(101 * var(--px)); width: calc(281 * var(--px)); }
    .panel--bankable .panel-label { left: calc(195.5 * var(--px)); }
    .panel--bankable .panel-link { left: calc(195.2 * var(--px)); }

    .panel--wearepublic .panel-logo { left: calc(125 * var(--px)); top: calc(38 * var(--px)); width: calc(153 * var(--px)); }
    .panel--wearepublic .panel-label { left: calc(193.5 * var(--px)); }
    .panel--wearepublic .panel-link { left: calc(193.2 * var(--px)); }

    .panel--lelab .panel-logo { left: calc(93 * var(--px)); top: calc(59 * var(--px)); width: calc(205 * var(--px)); }
    .panel--lelab .panel-label { left: calc(194.5 * var(--px)); }
    .panel--lelab .panel-link { left: calc(194.2 * var(--px)); }
}