/* =============================================
   GRID
   ============================================= */
 
.container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 0 20px;
}
 
.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
}
 
[class*="col-"] {
    min-height: 1px;
    padding: 0 10px;
    box-sizing: border-box;
}
 
.col-1  { width: 8.33%; }
.col-2  { width: 16.66%; }
.col-3  { width: 25%; }
.col-4  { width: 33.33%; }
.col-5  { width: 41.66%; }
.col-6  { width: 50%; }
.col-7  { width: 58.33%; }
.col-8  { width: 66.66%; }
.col-9  { width: 75%; }
.col-10 { width: 83.33%; }
.col-11 { width: 91.66%; }
.col-12 { width: 100%; }
 
/* =============================================
   VARIABLES
   ============================================= */
 
:root {
    --Black: rgb(60, 60, 58);
    --white: rgb(239, 239, 239);
    --Green: rgba(210, 235, 151, 1);
    --Purple: rgba(236, 221, 254, 1);
    --Orange: rgba(245, 85, 9, 1);
 
    --Sous-titre-font: "Neutronic-Rounded";
    --Sous-titre-size: 20px;
    --Sous-titre-weight: 800;
    --Sous-titre-margin: 0;
    --Sous-titre-color: var(--Black);
 
    --Titre-font: "Neutronic-Rounded";
    --Titre-size: 36px;
    --Titre-weight: 800;
    --Titre-margin: 0;
 
    --Text-font: "Geist";
    --Text-size: 16px;
    --Text-weight: 700;
    --Text-margin: 0;
    --Text-color: var(--Black);
 
    --headline-5-font: "Geist";
    ---headline-5-size: 16px;
    --headline-5-weight: 700;
    --headline-5-color: var(--white);
}
 
/* =============================================
   BASE
   ============================================= */
 
html {
    overflow-x: hidden;
    box-sizing: border-box;
}
 
*, *::before, *::after {
    box-sizing: inherit;
}
 
body {
    background-color: var(--white);
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    width: 100%;
}
 
img, video, iframe {
    max-width: 100%;
    height: auto;
    display: block;
}
 
/* =============================================
   TYPOGRAPHIE
   ============================================= */
 
h1 {
    font-family: var(--Titre-font);
    font-size: clamp(24px, 5vw, 36px);
    font-weight: var(--Titre-weight);
    margin: var(--Titre-margin);
    line-height: 1.15;
    margin-bottom: 10px;
    color: var(--Orange);
}
 
h2 {
    font-family: var(--Sous-titre-font);
    font-size: clamp(18px, 3vw, 26px);
    font-weight: var(--Sous-titre-weight);
    margin: var(--Sous-titre-margin);
    line-height: 1.2;
    margin-bottom: 10px;
    color: var(--Black);
}
 
h3 {
    font-family: var(--Text-font);
    font-size: var(--Text-size);
    font-weight: var(--Text-weight);
    margin: var(--Text-margin);
}
 
h4 {
    font-family: var(--Headline-4-font);
    font-size: var(--Headline-4-size);
    font-weight: var(--Headline-4-weight);
    margin: var(--Headline-4-margin);
    color: var(--white);
}
 
h5 {
    font-family: var(--headline-5-font);
    font-size: var(---headline-5-size);
    font-weight: var(--headline-5-weight);
    color: var(--headline-5-color);
}
 
p {
    font-family: var(--Text-font);
    font-size: clamp(12px, 2vw, 16px);
}
 
/* =============================================
   HEADER & NAVIGATION
   ============================================= */
 
.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 80px;
    border-bottom: 2px solid var(--Black);
    position: relative;
}
 
nav ul {
    display: flex;
    list-style: none;
    gap: 50px;
    margin: 0;
    padding: 0;
}
 
nav .btn-text {
    text-decoration: none;
    font-family: var(--Text-font);
    color: var(--Text-color);
    font-weight: 900;
}
 
nav a:hover {
    text-decoration: underline;
    color: var(--Orange);
    font-weight: 900;
}
 
.burger {
    display: none;
    font-size: 24px;
    cursor: pointer;
}
 
/* =============================================
   BOUTONS
   ============================================= */
 
.btn-1 {
    display: inline-block;
    text-decoration: none;
    color: var(--white);
    background-color: var(--Orange);
    font-family: var(--Text-font);
    padding: 8px 24px;
    border-radius: 50px;
    margin-bottom: 40px;
    white-space: nowrap;
}
 
.btn-1:hover { animation: stretchBounce 0.5s forwards; }
 
@keyframes stretchBounce {
    0%   { padding-right: 24px; }
    60%  { padding-right: 48px; }
    80%  { padding-right: 36px; }
    100% { padding-right: 40px; }
}
 
.button-demo { margin-top: 20px; }
.button-demo:hover {
    transition: all 0.3s ease;
    transform: translateY(-3px);
}
 
/* =============================================
   HERO
   ============================================= */
 
.cover-page {
    background-color: var(--Green);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
 
.hero {
    padding: 200px 80px;
    background-color: var(--Green);
    border-bottom: 2px solid var(--Black);
}
 
.hero-main {
    display: flex;
    justify-content: center;
    padding: 0;
}
 
/* =============================================
   STATS
   ============================================= */
 
.stats {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}
 
/* =============================================
   MES PROJETS
   ============================================= */
 
.mes-projets {
    padding: 44px 80px 30px;
    overflow: hidden;
    background-color: var(--white);
    border-bottom: 2px solid var(--Black);
}
 
.text-mes-projets {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 150px;
}
 
.btn-mes-projets {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 150px;
}
 
/* =============================================
   SCROLLING TRACK
   ============================================= */
 
.track {
    overflow: hidden;
    border: 1px solid #ddd;
    padding: 12px 0;
    background: var(--Purple);
    border-bottom: 2px solid var(--Black);
}
 
.track span {
    font-family: var(--Sous-titre-font);
    font-size: var(--Sous-titre-size);
    color: var(--Sous-titre-color);
    font-weight: var(--Sous-titre-weight);
}
 
.track-2 {
    overflow: hidden;
    width: 100%;
    padding: 20px 0;
}
 
.track-2 img {
    height: 300px;
    width: auto;
    max-width: none;
    border-radius: 16px;
}
 
.items {
    display: flex;
    gap: 2rem;
    white-space: nowrap;
    width: max-content;
    animation: scroll 30s linear infinite;
    align-items: center;
}
 
.track-2 .items { animation-duration: 20s; }
.items:hover { animation-play-state: paused; }
 
@keyframes scroll {
    from { transform: translateX(0%); }
    to   { transform: translateX(-50%); }
}
 
/* =============================================
   CV
   ============================================= */
 
.cv {
    background-color: var(--white);
    background-image: url(IMG/FORMES\ FOND\ 1.png);
    background-repeat: no-repeat;
    padding: 90px 144px 30px;
}
 
.photo-cv { display: flex; align-items: center; flex-wrap: wrap; }
.presentation-cv { margin-bottom: 40px; }
 
/* =============================================
   PARCOURS
   ============================================= */
 
.parcours {
    background-color: var(--white);
    border-bottom: 2px solid var(--Black);
    display: flex;
    padding: 30px 144px 50px;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}
 
.text-parcours {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 80px;
}
 
.line { position: absolute; }
 
/* =============================================
   À PROPOS
   ============================================= */
 
.a-propos {
    background-color: var(--Purple);
    background-image: url(IMG/FORMES\ FOND\ 1.png);
    background-repeat: no-repeat;
    padding: 90px 144px 50px;
    border-bottom: 2px solid var(--Black);
}
 
.photo-expo { display: flex; justify-content: center; align-items: center; }
 
.sous-titre {
    display: inline-block;
    background-color: var(--Beige);
    color: var(--Green-1);
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: bold;
    font-size: 14px;
}
 
/* =============================================
   RÉSUMÉ / DESCRIPTION / GALERIE
   ============================================= */
 
.resume {
    background-color: var(--Green);
    padding: 40px 144px 15px;
    border-bottom: 2px solid var(--Black);
}
 
.description { background-color: var(--white); padding: 90px 144px 44px; }
 
.galerie-projets {
    background-color: var(--white);
    padding: 0 144px 44px;
    border-bottom: 2px solid var(--Black);
}
 
.galerie-projets .visuel-global-lua { padding-bottom: 40px; }
 
/* =============================================
   PAGE LUA
   ============================================= */
 
.voir-site {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: var(--Purple);
    padding: 30px 144px 0;
    border-bottom: 2px solid var(--Black);
}
 
.existant, .inspiration, .moodboard, .design-system, .mockup { padding-top: 50px; }
 
.mockup-pub-lua { width: 100%; max-width: 100%; height: auto; }
 
/* =============================================
   PAGE PROJETS
   ============================================= */
 
.titre-projet {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 50px 50px 0;
    background-color: var(--white);
}
 
.note { background-color: var(--Green); padding: 40px 144px 15px; border-bottom: 2px solid var(--Black); }
.cards-projets-1 { background-color: var(--white); padding: 40px 144px 20px; }
.cards-projets-2 { background-color: var(--white); padding: 40px 144px; border-bottom: 2px solid var(--Black); }
 
.card {
    position: relative;
    width: 300px;
    height: 450px;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    flex-shrink: 0;
}
 
.card:hover { transform: translateY(-5px); box-shadow: 0 8px 20px var(--Black); }
 
.card img { width: 100%; height: 100%; object-fit: cover; display: block; }
 
.overlay {
    position: absolute;
    bottom: -80px;
    left: 0;
    width: 100%;
    height: 90px;
    background: var(--Orange);
    display: flex;
    align-items: center;
    padding-left: 25px;
    transition: bottom 0.3s ease;
    border-radius: 18px;
    box-sizing: border-box;
}
 
.overlay h1 { color: var(--white); margin: 0; }
.card:hover .overlay { bottom: 0; }
 
/* =============================================
   DÉCORATION
   ============================================= */
 
.deco { padding: 190px 110px; background-color: white; }
 
.titre-deco > h1, .titre-deco > h3 { display: flex; flex-direction: column; text-align: center; }
.elements-deco { display: flex; flex-direction: column; text-align: center; }
 
/* =============================================
   FOOTER
   ============================================= */
 
.footer {
    background: var(--Green);
    padding: 30px 20px;
}
 
.footer > .container > .row {
    align-items: flex-start;
}
 
.logo-footer {
    display: flex;
    justify-content: center;
    align-items: center;
}
 
.logo-footer a { padding: 20px; }
 
.info-footer {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
}
 
/* Les 3 blocs Contacts / Réseaux / Sommaire */
.Contact, .reseaux, .sommaire {
    padding-left: 30px;
    padding-right: 30px;
}
 
.footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-family: var(--Text-font);
    font-weight: 900;
}
 
.footer a {
    font-family: var(--Text-font);
    color: var(--Black);
    text-decoration: none;
    font-size: 14px;
}
 
.footer a:hover { color: var(--Orange); }
 
.footer p {
    font-family: var(--Titre-font);
    color: var(--Orange);
    font-weight: 900;
    margin: 0 0 8px 0;
}
 
/* =============================================
   TABLETTE (≤ 1024px)
   ============================================= */
 
@media (max-width: 1024px) {
 
    [class*="col-"] {
        flex-basis: 100%;
        max-width: 100%;
        width: 100%;
    }
 
    .col-4, .col-3, .col-2, .col-1 {
        flex-basis: 50%;
        max-width: 50%;
        width: 50%;
    }
 
    .resume, .description, .galerie-projets,
    .voir-site, .note, .cards-projets-1, .cards-projets-2,
    .parcours, .cv, .a-propos {
        padding-left: 60px;
        padding-right: 60px;
    }
 
    .text-mes-projets, .btn-mes-projets, .text-parcours {
        padding-left: 40px;
        padding-right: 40px;
    }
}
 
/* =============================================
   MOBILE (≤ 768px)
   ============================================= */
 
@media (max-width: 768px) {
 
    /* Toutes les colonnes en pleine largeur — SAUF dans le footer */
    [class*="col-"]:not(.footer [class*="col-"]) {
        flex-basis: 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        min-height: 0;
        padding: 0;
        margin: 8px 0;
    }
 
    .container { padding: 0 16px; width: 100%; }
 
    /* --- Header --- */
    .header { padding: 14px 16px; }
    .burger { display: block; }
 
    nav {
        position: absolute;
        top: 64px;
        left: 0;
        right: 0;
        background: white;
        width: 100%;
        display: none;
        flex-direction: column;
        text-align: center;
        z-index: 100;
        border-bottom: 2px solid var(--Black);
    }
 
    nav ul { flex-direction: column; gap: 20px; padding: 20px 0; }
    nav.active { display: flex; }
    .btn-login, .btn-sign-up { display: none; }
 
    /* --- Hero --- */
    .hero { padding: 40px 16px; }
    .logo-hero { max-width: 80%; margin: 0 auto; }
 
    /* --- Stats --- */
    .stats { flex-direction: column; gap: 16px; }
 
    /* --- Mes projets --- */
    .mes-projets { padding: 40px 16px; }
    .text-mes-projets, .btn-mes-projets { padding: 0; }
 
    /* --- Carrousel images --- */
    .track-2 img { height: 160px; }
 
    /* --- CV --- */
    .cv { padding: 40px 16px; }
 
    /* --- Parcours --- */
    .parcours { padding: 30px 16px 40px; flex-direction: column; }
    .text-parcours { padding: 0; }
 
    /* --- À propos --- */
    .a-propos { padding: 40px 16px; }
    .photo-expo { flex-wrap: wrap; gap: 16px; }
    .text-expo { padding: 0; }
 
    /* --- Résumé / Description / Galerie --- */
    .resume      { padding: 30px 16px 20px; }
    .description { padding: 40px 16px; }
    .galerie-projets { padding: 0 16px 30px; }
 
    /* --- Voir site --- */
    .voir-site { padding: 24px 16px 0; }
 
    /* --- Note & Cards --- */
    .note            { padding: 30px 16px 20px; }
    .cards-projets-1 { padding: 24px 16px 12px; }
    .cards-projets-2 { padding: 12px 16px 24px; }
 
    .card { width: 100%; height: auto; aspect-ratio: 2 / 3; flex-shrink: 1; }
 
    /* --- Titre projet --- */
    .titre-projet { padding: 30px 16px 0; }
 
    /* --- Décoration --- */
    .deco { padding: 60px 16px; }
 
    /* =============================================
       FOOTER MOBILE
       Logo centré en haut
       Contacts pleine largeur en dessous
       Réseaux + Sommaire côte à côte en bas
       ============================================= */
 
    .footer { padding: 30px 16px; }
 
    /* Les 2 col-6 du footer passent en 100% */
    .footer .col-6 {
        flex-basis: 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        padding: 0;
        margin: 0;
    }
 
    /* Logo centré */
    .logo-footer {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 8px;
        margin-bottom: 20px;
        width: 100%;
    }
 
    .logo-footer a { padding: 8px; }
 
    /* Zone info : colonne */
    .info-footer {
        width: 100%;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        gap: 0;
    }
 
    /* La row des 3 blocs */
    .info-footer .row {
        flex-direction: column !important;
        align-items: center;
        width: 100%;
        gap: 0;
    }
 
    /* Contacts : pleine largeur, centré */
    .Contact {
        width: 100%;
        text-align: center;
        padding: 0;
        margin-bottom: 20px;
    }
 
    /* Réseaux + Sommaire : côte à côte */
    .reseaux, .sommaire {
        width: 50% !important;
        flex-basis: 50% !important;
        max-width: 50% !important;
        text-align: center;
        padding: 0;
        display: inline-block;
    }
 
    /* Wrapper pour Réseaux + Sommaire côte à côte */
    .info-footer .row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center;
    }
 
    /* Contacts reprend toute la largeur */
    .Contact {
        flex-basis: 100% !important;
        width: 100% !important;
    }
}
 
/* =============================================
   TRÈS PETIT MOBILE (≤ 360px)
   ============================================= */
 
@media (max-width: 360px) {
 
    h1 { font-size: 22px; }
    h2 { font-size: 18px; }
    p  { font-size: 12px; }
 
    .header { padding: 12px; }
    .hero   { padding: 40px 12px; }
 
    .track-2 img { height: 130px; }
 
    .a-propos, .cv, .parcours,
    .resume, .description, .galerie-projets,
    .voir-site, .note, .cards-projets-1, .cards-projets-2,
    .mes-projets, .deco, .titre-projet {
        padding-left: 12px;
        padding-right: 12px;
    }
}