/* Minified CSS: Variables, Reset, and Accessibility */:root{--primary:#2E0EF1;--bg-color:#f8f4e3;--text-color:#000;--dot-size:1.25rem;--dot-border-width:.125rem;--spacing-small:.2rem;--spacing-s:.5rem;--spacing-m:1rem;--spacing-paraph:1.5rem;--spacing-xl:2rem;--spacing-xxl:4rem;--sb-size:12px;--subtitle-family:var(--subtitle-family);--body-family:Arial,Helvetica,sans-serif;--compressed:scaleY(.7);--opa:.5;}*{margin:0;padding:0;box-sizing:border-box;}html{scroll-behavior:smooth;}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}*,*::before,*::after,#lightbox-overlay,#lightbox-overlay img,#lightbox-close,#formations,#formations .container-pdf,#formations .pdf-content p{animation-duration:0s!important;transition-duration:0s!important;}.hero-button,.hero-button::after,.title,.hero-image,#contact .container-form input,#contact .container-form textarea,#contact .container-btn button{transition:none!important;}.team-card,.team-card:hover{transition:none!important;transform:none!important;}}html,body{scroll-behavior:smooth;overflow-x:hidden;}body{width:100%;height:max-content;position:relative;background:var(--bg-color);color:var(--text-color);font-family:var(--body-family);}body::-webkit-scrollbar{width:var(--sb-size)}body::-webkit-scrollbar-track{background:var(--bg-color);border-radius:3px;}body::-webkit-scrollbar-thumb{background:var(--primary);border-radius:3px;}@supports not selector(::-webkit-scrollbar){body{scrollbar-color:var(--primary) var(--bg-color);}}h1,h2,h3,h4,h5,h6,button,label,.hero-button,.subtitle,.pdf-content p{color:var(--primary);}a,li{text-decoration:none;color:var(--primary);list-style:none;}.skip-link{position:absolute;top:-9999px;left:-9999px;}.skip-link:focus{position:static;background:#000;color:#fff;padding:.5em;}.hero-button:focus-visible,.social-link:focus-visible,.social-link:hover,.toc-list li a:focus-visible,.skills-list li a:focus-visible,.lightbox-trigger:focus-visible,.lightbox-close:focus-visible,.container-pdf a:focus-visible,.team-card:focus-visible,#contact .container-btn button[type="submit"]:focus-visible{outline:3px solid var(--primary);outline-offset:2px;}.container-form input:focus-visible,.container-form textarea:focus-visible{border-color:var(--primary);outline:3px solid var(--primary);outline-offset:2px;box-shadow:0 4px 10px rgba(0,0,0,.1);}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;clip:rect(0 0 0 0);overflow:hidden;white-space:nowrap;}

/* ================================================
    SECTION GLOBAL
================================================= */
#hero, #sommaire, #about, #skills, #project1, #project2, #project3, #project4, #project5, #formations, #team, #contact {
    position: relative;
    display: grid;
    grid-template-columns: 15% 85%;
    height: min-content;
    overflow: hidden;
}
#hero {
    grid:
        "sidebar hero-content" 1fr
        / 10% 90%;
}
#sommaire {
    grid:
        "sidebar table-of-contents" 1fr
        / 10% 90%;
}
#about, #skills, #project1, #project2, #project3, #project4, #project5, #formations, #team, #contact {
    grid:
        "sidebar container-principale" 1fr
        / 10% 90%;
    height: min-content;
}
    .side {
        grid-area: sidebar;
    }
    .container-principale {
        position: relative;
    }
    .container-principale h2 {
        text-transform: uppercase;
    }
    img {
        opacity: var(--opa);
    }

.npt {
    display:none;
}

/* ================================================
   SIDEBAR
================================================= */
.sidebar {
    grid-area: sidebar;
    position: fixed;
    width: 10%;
    height: 100%;
    text-transform: uppercase;
    border-right: 3px solid var(--primary);
    background-color: var(--bg-color);
    padding: var(--spacing-xl) 1vh;
    display: grid;
    grid:
        "nav-top" 15%
        "nav-mid" 70%
        "nav-bottom" 15%
        / 1fr;
    z-index: 9999;
}
.nav-top, .nav-mid, .nav-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.nav-top a, .nav-bottom a {
    position: relative;
    padding: var(--spacing-small) 0;
} 
    .nav-top a::after, .nav-bottom a::after {
        position: absolute;
        content: '';
        bottom: 0;
        left: 0;
        height: 2px;
        width: 0;
        background-color: var(--primary);
        transition: width .2s ease-in-out;
    }
    .nav-top a:hover::after, .nav-bottom a:hover::after {
        width: 100%;    
    }
    .nav-top ul {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        text-align: right;
        height: 100%;
    }
    .nav-top ul li:first-child {
        font-weight: 600;
    }
    .nav-mid ul {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;        
        pointer-events: auto;
    }
            .nav-mid a.dot {
                position: relative;
                display: block;
                width: var(--dot-size);
                height: var(--dot-size);
                border: 2px solid var(--primary);
                background-color: var(--bg-color);
                border-radius: 50%;
                /* text-indent: -9999px; */
                transition: background-color .2s linear;
            }
            .nav-mid a.dot:hover, .nav-mid a.dot.active {
                background-color: var(--primary);
            }

            /* TOOLTIPS */
                .nav-mid a.dot::before {
                    content: attr(aria-label);
                    width: auto;
                    color: var(--bg-color);
                    position: absolute;
                    left: calc(100% + 10px);
                    top: 50%;
                    transform: translateY(-50%);
                    white-space: nowrap;
                    background-color: var(--primary);
                    padding: var(--spacing-m) var(--spacing-paraph);
                    border-radius: 6px;
                    font-size: var(--spacing-m);
                    opacity: 0;
                    pointer-events: none;
                    transition: opacity 0.2s ease-in-out;
                    z-index: 10;
                }
                .nav-mid a.dot:hover::before {
                    opacity: 1;
                }
            /* TRAITS DECORATIFS */
            .nav-mid a.dot::after {
                position: absolute;
                content: '';
                top: 0;
                left: 50%;
                width: 2px;
                height: 400%;
                background-color: var(--primary);
                z-index: -2;
            }
            .nav-mid a.dot-end::after {
                height: 100%;
            }

    .nav-bottom {
        display: flex;
        justify-content: center;
        height: 100%; 
        text-align: right;   
        font-weight: 500;
    }
/* =========================================================
    HERO
========================================================== */
/* ---------- Contenu central de la Hero ---------------- */
.hero-content {
    grid-area: hero-content;
    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    grid:
        "hero-left hero-right" 1fr
        / 50% 50%;
    z-index: 2;
}
    .hero-left, .hero-right {
        display: flex;
        flex-direction: column;
    }
/* ------------ En position absolute -------------- */
.hero-image, .title {
    position: absolute;
    left: 50%;
    text-align: center;
}
    .hero-image {
        top: 70%;
        left: 40%;
        transform: translateX(-50%) translateY(-50%);        
        width: 35%;
        height: 50%;
        background: transparent;
        border-radius: 8px;
        z-index: 9999;
    }
    .hero-image img {
        opacity: .07;
    }
    #heroModel {
        width: 100%;
        height: 100%;
        background: transparent;
        display: block;
        filter: brightness(1.1) hue-rotate(55deg);
    }
    .title {
        position: absolute;
        top: 5vh;
        white-space: nowrap;
        font-family: var(--title-family);
        transform: var(--compressed) translateX(-50%);
        font-size: clamp(4vw, 8vw, 10vw);
        letter-spacing: -2px;
        z-index: 3;
    }
/* --------- Gauche ------------- */
.hero-left {
    grid-area: hero-left;
    justify-content: flex-end;
    text-align: right;
    padding: 25% 50% 25% 15%;
}
    .social {
        height: 40%;
    }
        .hero-left .name {
            display: flex;
            font-size: 1.5rem;
            font-weight: bold;
            text-transform: uppercase;
            transform: var(--compressed);
            letter-spacing: -2px;
        }
        .social-title {
            display: flex;
            opacity: .9;
            font-size: var(--spacing-m);
            text-transform: uppercase;
            transform: var(--compressed);
        }
        .social-icons {
            display: flex;
            /* padding-top: var(--spacing-xxl); */
            justify-content: flex-start;
            align-items: flex-end;
        }
            .social-link {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 30px;
                height: 30px;
                padding: var(--spacing-small);
                font-weight: bold;
                text-decoration: none;
                border-radius: 50%;
                font-size: 0.8rem;
                margin-right: var(--spacing-m);
                margin-top: var(--spacing-xl);
            } 
/* --------- Droite ----------- */
.hero-right {
    height: min-content;
    padding: 45% 20% 0% 15%;
    grid-area: hero-right;
    align-items: flex-start;
    justify-content: flex-end;
    text-align: left;
}
    .social-right {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 75%;
    }
        .hero-right .subtitle {
            font-size: var(--spacing-m);
            line-height: 1.4;
            color: var(--text-color);
        }
        .hero-paragraphe {
            padding-bottom: var(--spacing-paraph);
        }
                .paraph-space {
                    margin-top: var(--spacing-small);
                }
        .hero-button {
            width: min-content;
            white-space: nowrap;
            position: relative;
            display: inline-flex;
            align-items: center;
            padding: 10px 20px;
            background-color: transparent;
            border: 2px solid var(--primary);
            text-decoration: none;
            font-size: var(--spacing-m);
            font-weight: bold;
            border-radius: 4px;
        }
            .hero-button::after {
                position: absolute;
                content: '';
                bottom: 0;
                left: 0;
                height: 100%;
                width: 0;
                background-color: var(--primary);
                transition: width .3s linear;
                z-index: -2;
            }
            .hero-button:hover::after {
                width: 100%;   
            }
            .hero-button:hover {
                color: var(--bg-color);
            }
            .hero-button .arrow {
                margin-left: 8px;
                font-size: 1.2rem;
            }

/* =============================
   SOMMAIRE
================================ */
#sommaire {
    padding: 2rem;
}
.table-of-contents {
    grid-area: table-of-contents;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 10% 20%;
}

.toc-title {
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 2rem;
}
    .toc-upper {
        font-weight: 300;
        font-size: 3rem;
        letter-spacing: 2px;
    }
    .toc-bold {
        font-weight: 900;
        font-size: clamp(3rem, 8vw, 6rem);
        display: block;
        margin-top: 0.2rem;
    }
.toc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
    .toc-list {
        list-style: none;
        font-weight: bold;
        padding: 0;
        margin: 0;
        position: relative;
        z-index: 1;
        background-image: repeating-linear-gradient(to bottom, transparent, transparent 34px, #4426f1 34px, #4426f1 35px);
        background-repeat: repeat-y;
        background-size: 100% 35px;
        padding-left: 0;
    }
        .toc-list li {
            display: flex;
            align-items: center;
            font-size: var(--spacing-paraph);
            height: 35px;
            position: relative;
            z-index: 2;
            padding-right: var(--spacing-m);
            font-family: var( --subtitle-family);
        }
            .toc-list li span {
                margin-right: var(--spacing-m);
                width: 2rem;
                display: inline-block;
            }
            .toc-list li a {
                text-decoration: none;
                padding: 0.25rem 0;
                display: block;
                flex: 1;
            }
/* ================================================
   ABOUT
================================================= */
#about .container-principale {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-areas: "about-left about-right";
}
.about-left { 
    grid-area: about-left;
    padding: 5% 10% 0 10%;
}

.about-left .toc-title, .about-left .paragraphe:first-of-type {
    margin-top: var(--spacing-xl);
}
.about-left .paragraphe {
    padding-right: 20%;
}
.about-left .paragraphe p {
    padding-top: var(--spacing-m);
}
.about-right { 
    grid-area: about-right;
    padding: 0 10% 5% 5%;
}

    .goal {
        display: flex;
        margin-top: var(--spacing-xl);
    }
        .number {
            position: relative;
            background-color: var(--primary);
            color: white;
            height: fit-content;
            padding: 10px;
            font-size: var(--spacing-xl);
            margin-right: var(--spacing-paraph);
        }    
        .number::after {
            position: absolute;
            content: '';
            top: 0;
            left: 50%;
            width: var(--dot-border-width);
            height: 350%;
            background-color: var(--primary);
            z-index: -2;
        }
            .text h3 {
                font-size: var(--spacing-xl);
                margin-bottom: var(--spacing-m);
            }
            .text p {
                padding: var(--spacing-small) 0;
                font-size: 1rem;
                color: var(--text-color);
            }

/* ================================================
   SKILLS
================================================= */
#skills .container-principale {
    padding: 10% 15%;
}

/* ================================================
   PROJET - GLOBAL
================================================= */
.project .container-principale {
    padding: 5%;
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
        "project-imagesOne desc-imagesOne"
        "desc-imagesTwo project-imagesTwo";
}
.project-imagesOne {
    grid-area: project-imagesOne;
    padding-right: 10%;
}
.project-imagesTwo {
    grid-area: project-imagesTwo;
}
.desc-imagesOne {
    grid-area: desc-imagesOne;
}
.desc-imagesTwo {
    grid-area: desc-imagesTwo;
}
.project-imagesOne img, .project-imagesTwo img {
    width: 100%;
    border-radius: 8px;
    display: block;
    height: auto;
    transition: transform .2s linear;
    padding: var(--spacing-s) 0;
}
.project-imagesOne img:hover, .project-imagesTwo img:hover {
    transform: scale(1.06);
}
    .project h3 {
        text-transform: uppercase;
    }
    figcaption {
        font-size: var(--sb-size);
    }
    figcaption, aside p {
        padding-top: var(--spacing-m);
    }
    .desc-detail {
        padding: 0 var(--spacing-paraph) var(--spacing-s) 0;
    }
    aside p a {
        font-weight: bold;
    }
/* ================================================
   PROJET - Lightbox
================================================= */
#lightbox-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.3s ease-in-out;
}
#lightbox-overlay.active {
    display: flex;
    padding-left: var(--spacing-xxl);
}
    #lightbox-overlay img {
        max-width: 80vw;
        height: auto;
        object-fit: contain;
        border-radius: 8px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
        transition: transform 0.3s ease;
        opacity: 1;
    }
    .lightbox-trigger {
        cursor: pointer;        
    }
#lightbox-close {
    position: absolute;
    top: 3rem;
    right: 3rem;
    font-size: 2rem;
    background: none;
    border: none;
    color: var(--primary);
    cursor: pointer;
    z-index: 1001;
    font-weight: bold;
    transition: transform 0.2s ease;
}
#lightbox-close:hover {
    transform: scale(1.2);
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ================================================
   FORMATIONS
================================================= */
#formations .container-principale {
    display: grid;
    grid:
        "formations-left formations-right" 1fr
        / 50% 50%;
    padding: 3%;
}
.formations-left {
    grid-area: formations-left;
    display: grid;
    grid:
        "toc-title" 20%
        "paragraphe" 60%
        "container-pdf" 20%;
}
    .formations-left .toc-title { grid-area: toc-title; }
    .formations-left .paragraphe {
        grid-area: paragraphe;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        color: var(--text-color);
    }

.formations-left .paragraphe, .container-pdf {
    padding-right: var(--spacing-xxl);
}

.container-pdf { 
    grid-area: container-pdf;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
    .pdf-content {
        flex-grow: 1;

    }
    .pdf-content .align-left {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-start;
    }
    .pdf-content .align-right, .parah-bottom {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-end;
    }
    .parah-top {
        padding-right: var(--spacing-m);
    }
    .parah-bottom {
        padding-left: 0;
    }
    .align-right {
        text-align: right;
    }
    .pdf-content p {
        font-weight: bold;
        padding-bottom: var(--spacing-m);
        text-transform: uppercase;
    }

.formations-right {
    grid-area: formations-right;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
    /* .formations-right .goal:first-of-type {
        margin-top: 0;
    } */
    .formations-right .number {
        margin-bottom: var(--spacing-xl);
    }
    .formations-right .text h2 {
        padding-top: var(--spacing-xl);
    }
    .formations-right .text p {
        margin-top: var(--spacing-m);
        font-size: 1rem;
        color: var(--text-color);
    }
        .number-one::after {
            height: 500%;
        }
        .number-two::after {
            height: 400%;
        }
        .number-three::after {
            height: 300%;
        }
/* ====================================================
   MON EQUIPE
==================================================== */
#team .container-principale {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 5%;
}
.team-grid {
    height: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    justify-items: stretch;
    align-items: stretch;
    gap: var(--spacing-paraph);
}
    .grid-cell {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    /* STYLE DES CARTES */
    .team-card {
        width: 80%;
        height: 90%;
        border-radius: 12px;
        box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
        overflow: hidden;
        transition: transform 0.2s ease;
        text-align: left;
        display: grid;
        grid:
            "team-img" 50%
            "info" 50%
            / 1fr;
    }
        .team-card:hover {
            transform: translateY(-6px);
        }
        .team-img {
            grid-area: team-img;
            width: 100%;
            height: 100%;
            aspect-ratio: 1 / 1;
            object-fit: cover;
            border: 1PX solid var(--primary);
            opacity: .6;
        }
        .info {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: space-between;
            height: 100%;
            padding: var(--spacing-m);
            grid-area: info;
        }
            .info .name, .info .role {
                text-transform: uppercase;
                letter-spacing: 1px;
            }
            .info .name {
                font-weight: bold;
                font-size: var(--spacing-m);
                margin-bottom: 0.4rem;
                color: var(--text-color);
            }
            .info .role {
                padding: var(--spacing-s) 0;
                font-size: 0.9rem;
                color: var(--text-color);
            }

/* ================================================
   CONTACT
================================================= */
#contact {
    padding: 5%;
    position: relative;
}
#contact .container-principale {
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    flex-direction: column;
}
#contact .toc-upper {
    display: flex;
    justify-content: flex-end;
}
    #contact form {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-paraph);
    }
    #contact .container-form {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-small);
    }
        .container-form label {
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-size: var(--spacing-m);
            color: var(--primary);
        }
        .container-form input, .container-form textarea {
            border: 1px solid #333;
            border-radius: 10px;
            padding: 0.8rem var(--spacing-m);
            font-size: var(--spacing-m);
            font-family: inherit;
            background-color: var(--bg-color);
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
            resize: none;
        }
        .container-form input:focus, .container-form textarea:focus {
            border-color: var(--primary);
            outline: none;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }

/* Bouton */
#contact .container-btn {
  display: flex;
  justify-content: flex-end;
}
    .container-btn button[type="submit"] {
        color: var(--primary);
        transition: color 0.2s ease, transform 0.2s ease;
        cursor: pointer;
        text-transform: uppercase;
        outline: none;
    }

    #contact .container-btn button[type="submit"]:hover {
        color: var(--bg-color);
    }
    .share-btn {
        cursor: pointer;
        position: absolute;
        bottom: 5vh;
        left: 11vw;
        width: min-content;
    }

/* ========================
   MEDIA QUERIES
========================= */
/* Mobile base Portrait */
@media (orientation: portrait) {
    /* ===== SIDEBAR ===== */
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 10%;
        border-right: none;
        border-bottom: 3px solid var(--primary);
        padding: var(--spacing-m);
        padding-left: var(--spacing-paraph);
        display: grid;
        grid: "nav-top nav-bottom" / 70% 30%;
        grid-template-areas: "nav-top nav-bottom";
        align-items: center;
        justify-items: center;
        overflow: hidden;
        z-index: 9999;
    }
        .nav-top, .nav-bottom {
            display: flex;
            flex-direction: row;
            justify-content: space-evenly;
            align-items: center;
            box-sizing: content-box;
            height: 100%;
            width: 100%;
            text-align: left;
        }
            .nav-top ul {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                width: 100%;
            }
        .nav-mid {
            display: none;
        }
    #sommaire, #about, #skills, #project1, #project2, #project3, #project4, #project5, #formations, #team, #contact {
        display: flex;
        padding: 0;
        width: 100%;
        height: min-content;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
    }
    /* ===== HERO ===== */    
    #hero {
        grid:
        "sidebar" 10%
        "hero-content" 90% / 1fr;   
    }
    /* ===== ABSOLUTE ===== */
    .title {
        top: var(--spacing-m);
        font-size: clamp(8vw, 11vw, 15vw);
    }
    .hero-image {
        top: 30%;
        width: 50%;
        height: 30%;
    }
    /* ===== ABSOLUTE - FIN ===== */
    .hero-content {
        grid:
            "hero-left" 30%
            "hero-right" 70% / 1fr;
    }
        .hero-paragraphe {
            padding: 0 var(--spacing-xxl) var(--spacing-paraph) 0;
        }
        .hero-left {
            padding: 30% 10% 0 15%;
        }
        .social-icons {
            padding-top: 0;
            display: flex;
            align-items: flex-end;
            justify-content: flex-start;
            flex-direction: column;            
            width: 100%;
            height: 100%;
        }
        .social-link {
            padding: var(--spacing-m);
            margin-top: 0;
            margin-bottom: var(--spacing-xl);
        }
            .social {
                height: 100%;
                width: 100%;
            }
            .fa-2xl {
                font-size: var(--spacing-xl);
            } 
        .hero-right {
            padding: 5% 15% 0 15%;
        }            
            .social-right {
                height: 100%;
                width: 100%;
                justify-content: space-evenly;
            }
/* ========== SOMMAIRE ======== */
.table-of-contents {
    justify-content: space-between;
    padding: 10%;
}
    .toc-grid {
        grid-template-rows: 1fr 1fr;
        grid-template-columns: 1fr;
    }
    .toc-list li {
        font-size: var(--spacing-m);
        height: 35px;
        padding: var(--spacing-m) 0;
    }
/* ========== COMPETENCES ======== */    
    #skills .toc-upper, #skills .toc-bold, #formations .toc-upper, #formations .toc-bold  {
        font-size: var(--spacing-paraph);
    }
    #skills .container-principale {
        padding: 10%;
    }
/* ========== ABOUT ======== */
    #about .container-principale, #formations .container-principale {
        grid-template-columns: 100%;

    }
    #about .container-principale {
        grid-template-areas:
            "about-left"
            "about-right";        
    }
        .about-left .paragraphe {
            padding-right: 0;
        }
            .about-left .paragraphe:first-of-type {
                margin-top: var(--spacing-m);
            }
        .parah-bottom {
            padding: var(--spacing-xl) 0;
        }
        .about-right .number {
            height: 400%;
        }
        .goal {
            display: flex;
            align-items: flex-start;
            margin-top: var(--spacing-xl);
        }
            .goal .text h3 {
                padding: 0;
            }
/* ========== PROJET ======== */
.project .container-principale {
    grid-template-columns: 1fr;
    grid-template-rows: 1.7fr 1fr 2fr 1fr;
    grid-template-areas:
        "desc-imagesOne"
        "project-imagesOne"
        "desc-imagesTwo"
        "project-imagesTwo";
}
    .project-imagesOne, .project-imagesTwo {
        padding: 0;
    }    
        .project h3 {
            font-size: var(--spacing-xl);
            text-transform: uppercase;
        }
            .grid-cell {
                justify-content: center;
            }
/* ========== LIGHTBOX ======== */
    #lightbox-close {
        top: 15%;
        right: var(--spacing-paraph);
    }
    #lightbox-overlay img {
        max-width: 85vw;
        height: auto;
    }
    #lightbox-overlay.active {
        padding-left: 0;
    }
/* ========== EQUIPE ======== */
    .team-card {
        height: auto;
        width: 70%;
    }
    #team-title .toc-bold {
        margin-bottom: var(--spacing-xl);
    }
/* ========== FORMATIONS ======== */    
    #formations .container-principale {
        grid:
            "formations-left" 40%
            "formations-right" 60%;
    }  
        .formations-left {
            height: min-content;
            grid:
                "toc-title" 15%
                "paragraphe" 65%
                "container-pdf" 20%;
        }
        .formations-right {
            padding: var(--spacing-m) 0;
        }
            .formations-left .paragraphe, .container-pdf {
                padding: var(--spacing-m);
            }
            .formations-left .toc-title {
                padding-left: var(--spacing-m);
            }
        .formations-right .text p {
            padding: 0;
            margin-top: var(--spacing-m);
        }
            .number-big::after {
                height: 500%;
            }
/* ========== FOOTER ======== */     
    #contact .container-principale {
        width: 100%;
        padding: var(--spacing-xl);
    }
        #contact .toc-upper {
            font-size: 2rem;
        }

}
/* Grand mobile Landscape */
@media (orientation: landscape) and (min-width: 701px) and (max-width: 960px) {
    .hero-left, .hero-right, .table-of-contents, #skills .container-principale {
        height: min-content;
    }
    .sidebar {
        width: min-content;
        padding: var(--spacing-m) var(--spacing-s);
    }
        .nav-mid a.dot::after {
            height: 200%;
        }
        .nav-mid a.dot-end::after {
            height: 0%;
        }
        .nav-mid a.dot::before {
            font-size: var(--spacing-s);
        }
        .hero-left {
            padding: 40% 15% 0% 15%;
        }
            .social {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                justify-content: space-between;
            }
        .hero-right {
            padding: 40% 15% 0% 0%;
        }
            .social-right {
                align-items: flex-end;
            }
                .hero-paragraphe {
                    margin: var(--spacing-paraph) 0;
                    padding-bottom: 0;
                }       
                .hero-button {
                    width: min-content;
                }

        .table-of-contents, #skills .container-principale {
            padding: 5%;
        }
            .toc-grid {
                white-space: nowrap;
            }

        #about .container-principale {
            grid-template-columns: 40% 60%;
        }
                .about-left .paragraphe {
                    padding-right: 0;
                }
            .about-right {
                padding: 0 10% 5% 0;
            }

        #skills .toc-list li {
            font-size: var(--spacing-m);
        }
        
        .projet .container-principale {
            grid:
                "project-imagesOne desc-imagesOne" 35%
                "desc-imagesTwo desc-imagesOne" 10%
                "desc-imagesTwo project-imagesTwo" auto
                / 50% 50%
            }
            .desc-detail {
                padding-right: var(--spacing-s);
            }
        #formations .container-principale {
            grid: "formations-left formations-right" 1fr / 40% 60%;
        }
            .formations-left {
                grid:
                    "toc-title" 10%
                    "paragraphe" 60%
                    "container-pdf" 30%;
            }
                #formations .toc-upper {
                    font-size: 2rem;
                }
                #formations .toc-bold {
                    font-size: clamp(2rem, 5vw, 4rem);
                }
                .formations-left .paragraphe {
                    display: flex;
                    align-items: flex-start;
                    flex-direction: column;
                    justify-content: space-evenly;
                    padding: var(--spacing-xxl) 0 0 var(--spacing-paraph)
                }
                .container-pdf {
                    display: flex;
                    align-items: center;
                    flex-direction: column;
                    text-align: center;
                    justify-content: flex-end;
                    padding: var(--spacing-xxl) 0 0 0;
                }
                     .align-right {
                        text-align: left;
                    }
                    #formations .parah-bottom {
                        padding: var(--spacing-xl) var(--spacing-xl) 0 0;
                    }
    #team .container-principale {
        padding: 10% 10% 10% 18%;
    }
    #contact .hero-button {
        width: 100%;
        display: flex;
        justify-content: center;
    }
       
    /* LIGHTBOX */
    #lightbox-overlay.active {
        align-items: center;
        justify-content: center;
        padding-top: 10%;
        padding-left: 0;
    }
}
/* Petit mobile Landscape */
@media (orientation: landscape) and (max-width: 700px) {
    .project .container-principale, .hero-content, .table-of-contents, #skills .container-principale, .hero-content, .sidebar, #hero, #sommaire, #about, #skills, #project1, #project2, #project3, #project4, #project5, #formations, #team, #contact {
        height: min-content;
    }
    /* LIGHTBOX */
        #lightbox-overlay img {
            max-width: 80vw;
            height: auto;
        }
        #lightbox-overlay.active {
            align-items: center;
            justify-content: center;
            padding-top: 10%;
            padding-left: 0;
        }
        #lightbox-close {
            top: 20%;
            right: 2rem;
        }
    /* section */
    #hero, #sommaire, #about, #skills, #project1, #project2, #project3, #project4, #project5, #formations, #team, #contact {
        position: relative;
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: 15% 85%;
        overflow: hidden;
    }
    /* nav */
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        max-height: 18vh;
        border-right: none;
        border-bottom: 3px solid var(--primary);
        padding: var(--spacing-m);
        display: grid;
        grid: "nav-top nav-bottom" / 70% 30%;
        grid-template-areas: "nav-top nav-bottom";
        align-items: center;
        justify-items: center;
        overflow: hidden;
        z-index: 9999;
    }
        .nav-top, .nav-bottom {
            display: flex;
            flex-direction: row;
            justify-content: space-evenly;
            align-items: center;
            box-sizing: content-box;
            height: 100%;
            width: 100%;
            text-align: left;
        }
            .nav-top ul {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                width: 100%;
            }
        .nav-mid {
            display: none;
        }
        .nav-mid a.dot::after {
            height: 200%;
        }
        .nav-mid a.dot-end::after {
            height: 0%;
        }
    /* section hero */
    .hero-content {
        grid:
            "hero-left" 65%
            "hero-right" 35% / 1fr;
    }
    .hero-left {
        padding: 15%;
        height: auto;
    }
    .hero-right {
        padding: 5% 15%;
        height: auto;
        display: flex;
        justify-content: flex-start;
        flex-direction: column;
    }
    .hero-right .hero-button {
        display: none;
    }
    .title {
        top: 18vh;
    }
    /* index */
    .table-of-contents, #skills .container-principale {
        padding: 5%;
    }
    .toc-list li {
        font-size: var(--spacing-m);
        white-space: nowrap;
    }
    /* a propos */
    #about .container-principale {
        grid-template-columns: 40% 60%;
    }
        .about-left {
            padding: 0 5% 0 10%
        }
            .about-left .toc-upper {
                font-size: 2rem;
            }
            .about-left .toc-bold  {
                font-size: clamp(5rem, 15vw, 5rem);
            }
            .about-left .paragraphe {
                padding-right: var(--spacing-s);
            }
                .about-left .paragraphe p {
                    padding-top: var(--spacing-paraph);
                }
        .about-right {
            padding: 0 10% 5% 0%;
        }
            .number::after {
                height: 450%;
            }

    /*  PROJET */
    .project .container-principale {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
        grid-template-areas:
        "desc-imagesOne"
        "project-imagesOne"
        "desc-imagesTwo"
        "project-imagesTwo";
    }
        .project-imagesOne, .project-imagesTwo {
            padding: 5% 0;
        }
        .project aside {
            padding: 5% 0;
        }
            .project h3 {
                font-size: var(--spacing-xl);
                text-transform: uppercase;
            }
                .grid-cell {
                    justify-content: center;
                }

    #formations .container-principale {
        display: grid;
        grid: "formations-left formations-right" 1fr / 40% 60%;
    }
                .formations-left {
                grid:
                    "toc-title" 10%
                    "paragraphe" 60%
                    "container-pdf" 30%;
            }
                #formations .toc-upper {
                    font-size: 2rem;
                }
                #formations .toc-bold {
                    font-size: clamp(2rem, 5vw, 4rem);
                }
                .formations-left .paragraphe {
                    display: flex;
                    align-items: flex-start;
                    flex-direction: column;
                    justify-content: flex-start;
                    padding-right: var(--spacing-paraph);
                }
                .formations-left .parah-top, .formations-left .parah-bottom {
                    padding-right: var(--spacing-paraph);
                    
                }
                .formations-left .parah-top p, .formations-left .parah-bottom p {
                    padding-top: var(--spacing-m);
                }
                .container-pdf {
                    display: flex;
                    align-items: center;
                    flex-direction: column;
                    text-align: center;
                    justify-content: flex-end;
                    padding: var(--spacing-xxl) 0 0 0;
                }
                .pdf-content {
                    flex-grow: 0;
                }
                     .align-right {
                        text-align: left;
                    }
                    #formations .parah-bottom {
                        padding: var(--spacing-xl) var(--spacing-xl) 0 0;
                    }
            .formations-right .number::after {
                height: 500%;
            }
            .formations-right .text p {
                font-size: .8rem;
            }

    #team .container-principale {
        padding: 10%;
    }
    #contact .hero-button {
        width: 100%;
        display: flex;
        justify-content: center;
    }

}
/* Tablette et petit pc Portrait */
@media (orientation: portrait) and (min-height: 960px) {
    .hero-left {
        padding: 25% 10% 0 15%;
    }
    .hero-right {
        padding: 10% 15% 0 15%;
    }
    .project .container-principale {
        grid-template-rows: 1fr 1fr 1fr 1fr;
    }
    .team-grid {
        padding: var(--spacing-xl);
    }
}

/* Tablette et petit pc Landscape */
@media (orientation: landscape) and (min-width: 901px) and (max-width: 1200px) {

}

/* Ordinateur portable et grand PC */
@media (min-width: 1201px) {

}