/* ========================================
   RESET
======================================== */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    font-family: Arial, Helvetica, sans-serif;

    color: #171717;

    background: #f2f0eb;
}


/* ========================================
   VARIABLES
======================================== */

:root {
    --black: #242424;
    --white: #f7f7f5;
    --petrol: #1d4652;
    --petrol-dark: #133640;
    --grey: #444446;

    --max-width: 1150px;

    --chain-length: clamp(72px, 6vw, 96px);
}


/* ========================================
   HEADER
======================================== */

.header {
    height: 76px;

    display: flex;

    justify-content: space-between;
    align-items: stretch;

    position: sticky;

    top: 0;

    z-index: 100;

    background: var(--black);
}


/* ========================================
   IDENTITE
======================================== */

.identity {
    display: flex;

    align-items: center;

    gap: 22px;

    min-width: 325px;

    padding: 0 30px;

    background: var(--white);

    text-decoration: none;

    color: var(--black);
}

.identity-name {
    font-size: 27px;

    letter-spacing: 1px;

    white-space: nowrap;
}


/* ========================================
   ICONE PROFIL
======================================== */

.profile-icon {
    width: 40px;
    height: 52px;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 4px;
}

.profile-head {
    width: 24px;
    height: 24px;

    border-radius: 50%;

    background: #5d5d5d;
}

.profile-body {
    width: 23px;
    height: 23px;

    border-radius: 7px 7px 3px 3px;

    background: #5d5d5d;
}


/* ========================================
   NAVIGATION
======================================== */

.navigation {
    display: flex;
}

.navigation a {
    min-width: 110px;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 0 18px;

    border-left: 6px solid var(--black);

    background: #424244;

    color: white;

    text-decoration: none;

    text-transform: uppercase;

    font-size: 14px;

    letter-spacing: 1px;

    transition: 0.2s;
}

.navigation a:hover {
    background: #646466;
}


/* ========================================
   HERO
======================================== */

.hero {
    min-height: 390px;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    padding: 60px 25px;

    text-align: center;
}

.section-label {
    margin: 0 0 12px;

    font-size: 12px;

    font-weight: bold;

    letter-spacing: 3px;
}

.hero h1 {
    margin: 0;

    max-width: 800px;

    font-size: clamp(
        38px,
        6vw,
        68px
    );

    line-height: 1;
}

.hero-description {
    max-width: 670px;

    margin: 28px auto;

    line-height: 1.7;

    color: #555;
}

.hero-button {
    display: inline-block;

    padding: 13px 23px;

    border-radius: 8px;

    background: var(--black);

    color: white;

    text-decoration: none;

    font-weight: bold;

    transition: 0.2s;
}

.hero-button:hover {
    transform: translateY(-2px);

    background: #343434;
}


/* ========================================
   portfolio
======================================== */

.portfolio {
    position: relative;

    min-height: 800px;

    overflow: visible;

    padding:
        65px
        25px
        100px;

    /*
       Fond bleu pétrole texturé, volontairement discret :
       - lumière douce en haut
       - ombres diffuses sur les côtés / bas
       - micro-trame horizontale quasi invisible
       Pas de motif géométrique marqué ni de dégradé flashy.
    */
    background-color: var(--petrol);

    background-image:
        radial-gradient(
            110% 72% at 50% -8%,
            rgba(255, 255, 255, 0.065) 0%,
            rgba(255, 255, 255, 0.018) 38%,
            transparent 66%
        ),

        radial-gradient(
            80% 62% at 8% 78%,
            rgba(4, 24, 30, 0.24) 0%,
            transparent 68%
        ),

        radial-gradient(
            82% 66% at 94% 70%,
            rgba(4, 24, 30, 0.20) 0%,
            transparent 70%
        ),

        repeating-linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.010) 0px,
            rgba(255, 255, 255, 0.010) 1px,
            rgba(0, 0, 0, 0.010) 1px,
            rgba(0, 0, 0, 0.010) 2px,
            transparent 2px,
            transparent 6px
        );

    box-shadow:
        inset 0 75px 120px rgba(3, 20, 26, 0.10),
        inset 0 -95px 140px rgba(3, 20, 26, 0.18);
}


/* ========================================
   SEPARATEURS DECORATIFS DU PORTFOLIO
======================================== */

.portfolio::before,
.portfolio::after {
    content: "";

    position: absolute;
    left: 0;

    width: 100%;
    height: 64px;

    z-index: 5;

    pointer-events: none;

    background:
        linear-gradient(
            to bottom,
            transparent calc(50% - 0.5px),
            var(--black) calc(50% - 0.5px),
            var(--black) calc(50% + 0.5px),
            transparent calc(50% + 0.5px)
        ),

        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 54'%3E%3Cg fill='%23242424' stroke='%23242424' stroke-width='2'%3E%3Ccircle cx='78' cy='27' r='3'/%3E%3Ccircle cx='91' cy='27' r='5'/%3E%3Crect x='101' y='22' width='10' height='10' transform='rotate(45 106 27)'/%3E%3Cpath d='M120 6 L137 27 L120 48 L103 27 Z' fill='none' stroke-width='5'/%3E%3Crect x='129' y='22' width='10' height='10' transform='rotate(45 134 27)'/%3E%3Ccircle cx='149' cy='27' r='5'/%3E%3Ccircle cx='162' cy='27' r='3'/%3E%3C/g%3E%3C/svg%3E")
        center / 264px 60px
        no-repeat;

    filter:
        drop-shadow(
            0 2px 1px
            rgba(0, 0, 0, 0.12)
        );
}

.portfolio::before {
    top: 0;

    transform:
        translateY(-50%);
}

.portfolio::after {
    bottom: 0;

    transform:
        translateY(50%);
}


/* ========================================
   TITRE PORTFOLIO
======================================== */

.portfolio-title {
    max-width: 750px;

    margin:
        0 auto
        55px;

    text-align: center;

    color: white;
}

.portfolio-title h2 {
    margin: 0;

    font-size: clamp(
        36px,
        5vw,
        55px
    );
}

.portfolio-title > p:last-child {
    color: rgba(
        255,
        255,
        255,
        0.75
    );
}

.section-label-light {
    color: #b8d6dc;
}


/* ========================================
   GRILLE PROJETS
======================================== */

.projects-grid {
    max-width: 1080px;

    margin: auto;

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    column-gap: clamp(60px, 7vw, 105px);
    row-gap: clamp(70px, 8vw, 115px);

    align-items: start;

    padding: 20px 0;
}


/* ========================================
   ENSEMBLE PANNEAU + CHAINES
======================================== */

.project-hanger {
    min-width: 0;
}


/* ========================================
   CHAINES
======================================== */

.project-chains {
    height: var(--chain-length);

    display: flex;

    justify-content: space-between;
    align-items: center;

    padding:
        0
        22%;

    margin-bottom: -2px;

    position: relative;

    z-index: 1;

    pointer-events: none;
}

.chain-slot {
    width: 28px;
    height: 100%;

    display: flex;

    align-items: center;
    justify-content: center;

    position: relative;
}

.chain-slot img {
    position: absolute;

    left: 50%;
    top: 50%;

    width: var(--chain-length);

    max-width: none;

    display: block;

    transform:
        translate(-50%, -50%)
        rotate(90deg);

    transform-origin: center;

    filter:
        drop-shadow(
            5px 6px 5px
            rgba(0, 0, 0, 0.36)
        );
}


/* ========================================
   PANNEAU
======================================== */

.project-panel {
    position: relative;

    display: block;

    width: 100%;

    text-decoration: none;

    color: #17100c;

    filter:
        drop-shadow(
            0 18px 16px
            rgba(0, 0, 0, 0.28)
        );

    transition:
        transform 0.20s,
        filter 0.20s;
}

.project-panel-bg {
    width: 100%;
    height: auto;

    display: block;

    pointer-events: none;

    user-select: none;
}

.project-panel:hover {
    transform:
        translateY(-6px)
        rotate(-0.2deg)
        scale(1.01);

    filter:
        brightness(1.025)
        drop-shadow(
            0 24px 20px
            rgba(0, 0, 0, 0.33)
        );
}

.project-panel:active {
    transform:
        translateY(-2px)
        scale(1.004);
}


/* ========================================
   CONTENU SUR 4 PLANCHES
======================================== */

.project-panel-content {
    position: absolute;

    inset: 0;

    z-index: 2;

    display: grid;

    grid-template-rows:
        repeat(
            4,
            1fr
        );
}

.panel-plank {
    min-width: 0;

    padding:
        0
        9%;

    position: relative;
}

.panel-plank--top {
    display: flex;

    flex-direction: column;

    justify-content: center;
}

.panel-plank--description {
    display: flex;

    align-items: center;
}

.panel-plank--spacer {
    pointer-events: none;
}

.panel-plank--technologies {
    display: flex;

    align-items: center;
}

.project-number {
    margin-bottom: 5px;

    font-size: clamp(
        9px,
        0.8vw,
        12px
    );

    font-weight: bold;

    letter-spacing: 2px;

    opacity: 0.58;
}

.project-panel h3 {
    margin: 0;

    max-width: 88%;

    font-size: clamp(
        20px,
        2.1vw,
        30px
    );

    line-height: 1;
}

.project-panel p {
    margin: 0;

    max-width: 94%;

    font-size: clamp(
        12px,
        1.15vw,
        16px
    );

    line-height: 1.35;
}

.project-arrow {
    position: absolute;

    top: 50%;
    right: 9%;

    transform:
        translateY(-50%);

    font-size: clamp(
        17px,
        1.8vw,
        23px
    );

    font-weight: bold;
}


/* ========================================
   TECHNOLOGIES
======================================== */

.technologies {
    display: flex;

    flex-wrap: wrap;

    gap: 7px;
}

.technologies span {
    padding:
        5px
        9px;

    border:
        1px solid
        rgba(
            0,
            0,
            0,
            0.35
        );

    border-radius: 50px;

    font-size: clamp(
        9px,
        0.9vw,
        12px
    );

    background:
        rgba(
            255,
            255,
            255,
            0.14
        );
}


/* ========================================
   CONTACT
======================================== */

.contact {
    max-width: var(--max-width);

    margin: auto;

    padding:
        100px
        25px;

    display: grid;

    grid-template-columns:
        0.8fr
        1.2fr;

    gap: 70px;
}

.contact h2 {
    margin: 0;

    font-size: clamp(
        36px,
        5vw,
        55px
    );
}

.contact-intro > p:last-child {
    line-height: 1.7;

    color: #555;
}


/* ========================================
   FORMULAIRE
======================================== */

.contact-form {
    display: flex;

    flex-direction: column;

    gap: 20px;
}

.form-row {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 20px;
}

.contact-form label {
    display: flex;

    flex-direction: column;

    gap: 8px;

    font-size: 14px;

    font-weight: bold;
}

.contact-form input,
.contact-form textarea,
.contact-form select {
    width: 100%;

    padding:
        14px
        15px;

    border:
        1px solid
        #bcbcbc;

    border-radius: 9px;

    background: white;

    font:
        inherit;
}

.contact-form textarea {
    resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
    outline:
        2px solid
        var(--petrol);

    outline-offset: 2px;
}


/* ========================================
   BOUTON CONTACT
======================================== */

.contact-form button {
    height: 50px;

    border: none;

    border-radius: 9px;

    background: var(--black);

    color: white;

    font:
        inherit;

    font-weight: bold;

    cursor: pointer;

    transition: 0.2s;
}

.contact-form button:hover {
    background: #343434;
}


/* ========================================
   FOOTER
======================================== */

footer {
    padding: 30px;

    text-align: center;

    background: var(--black);

    color: #bdbdbd;
}


/* ========================================
   RESPONSIVE TABLETTE
======================================== */

@media (
    max-width: 850px
) {

    :root {
        --chain-length: clamp(64px, 11vw, 88px);
    }

    .header {
        height: auto;

        flex-direction: column;
    }

    .identity {
        min-width: 0;

        height: 76px;

        justify-content: center;
    }

    .navigation {
        width: 100%;
    }

    .navigation a {
        flex: 1;

        min-width: 0;

        height: 55px;

        border-left: 2px solid black;
    }

    .projects-grid {
        grid-template-columns: 1fr;

        max-width: 620px;

        row-gap: 55px;
    }

    .contact {
        grid-template-columns: 1fr;
    }
}


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

@media (
    max-width: 550px
) {

    :root {
        --chain-length: 58px;
    }

    .identity {
        padding:
            0
            15px;
    }

    .identity-name {
        font-size: 21px;
    }

    .navigation a {
        padding:
            0
            5px;

        font-size: 12px;
    }

    .project-chains {
        padding:
            0
            20%;
    }

    .panel-plank {
        padding:
            0
            8%;
    }

    .project-panel h3 {
        font-size: clamp(
            18px,
            6vw,
            24px
        );
    }

    .project-panel p {
        font-size: 12px;

        line-height: 1.25;
    }

    .technologies {
        gap: 5px;
    }

    .technologies span {
        padding:
            4px
            7px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }
}