/* ===================================================================
   GLOBAL STYLES
==================================================================== */
* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: 'Arial', sans-serif;
}

section {
}

/* ===================================================================
   HEADER PRINCIPAL (HERO)
==================================================================== */
/* === BASE === */
#hero {
    background-color: #f8f8f8;
    /*background-color: rgba(248, 221, 232, 0.51);*/
    color: #333;
}

.bg {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
    padding: 6em 5em 5em 5em;
    color: #333;
}

.bg h2,
.bg h3 {
    margin: 0;
    padding: 0;
}

/* === STRUCTURE PRINCIPALE === */
.left-side {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
    flex: 1;
}

.left-side span {
    padding: 0 50px;
    background-color: #f8dde8;
    border-radius: 20px;
    margin-right: 10px;
}

.left-side p {
    margin-top: 10em;
}

/* === BOUTONS === */
.buttons {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 1em;
}

.button-blue {
    background-color: #d1e0f4;
    padding: 10px 15px;
    border-radius: 20px;
    transition: 0.2s ease-in-out;
    display: block;
    text-align: left;
    align-items: center;
    gap: 8px;
}

.button-blue:hover {
    background-color: #acc7e8;
}

.button-blue i {
    transform: rotate(45deg);
}

.button-simple {
    text-decoration: underline;
    margin-left: 20px;
}

/* === CASES (projets, cv, à propos) === */
.cases {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    max-width: 50%;
    min-height: 100%;
    flex: 1;
    margin-left: 20px;
}

#case1, #case2, #case3 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    border-radius: 20px;
    padding: 1em 2em;
    background-repeat: no-repeat;
    background-size: cover;
    color: #333;
}

#case1 {
    height: 100%;
    background-image: url("../img/mockups/Mockup-Hironos/mockup-hironos-right.jpg");
    margin-bottom: 20px;
}

#case2 {
    background-image: url("../img/mockups/mockup-CV-right.jpg");
    height: 100%;
}

#case3 {
    height: 100%;
    background-color: #f8dde8;
}

#case1 h2 {
    font-size: 40px;
    line-height: 30px;
    max-width: 60%;
    margin: 0.5em 0 2em 0;
}

#case1 p {
    font-size: 14px;
    max-width: 50%;
}

#case2 h2, #case3 h2 {
    margin-top: 1em;
    line-height: 30px;
}

#case2 p, #case3 p {
    font-size: 14px;
    max-width: 80%;
}

/* === ICONES FLECHES === */
.cases i {
    position: absolute;
    right: 20px;
    bottom: 20px;
    background-color: rgba(255, 255, 255, 0.78);
    padding: 10px 15px;
    border-radius: 50px;
    font-size: 30px;
    transform: rotate(45deg);
}
.projet-card i {
    position: absolute;
    right: 20px;
    top: 35px;
    background-color: rgba(255, 255, 255, 0.78);
    padding: 10px 15px;
    border-radius: 50px;
    font-size: 25px;
    transform: rotate(45deg);
}

/* === SECTIONS SECONDAIRES === */
.bottom-section {
    display: flex;
    gap: 20px;
}

.type {
    display: block;
    padding: 10px 15px;
    border-radius: 15px;
    background-color: white;
}

/* === RESPONSIVE DESIGN === */
@media (max-width: 1024px) {
    .bg {
        flex-direction: column;
        padding: 8em 2em 5em 2em;
    }

    .cases {
        max-width: 100%;
        width: 100%;
    }

    .left-side {
        margin-bottom: 3em;
    }

    #case1 h2 {
        font-size: 32px;
        max-width: 100%;
    }

    #case1 p,
    #case2 p,
    #case3 p {
        max-width: 100%;
    }

    .bottom-section {
        flex-wrap: wrap;
        flex-direction: column;
    }

    .left-side p {
        margin-top: 2em;
    }
}

@media (max-width: 600px) {
    .button-blue,
    .button-simple {
        font-size: 14px;
        padding: 8px 12px;
    }

    .button-simple {
        margin-left: 0;
    }

    .left-side span {
        padding: 0 20px;
    }

    .cases i{
        font-size: 24px;
        right: 10px;
        bottom: 10px;
    }

    .projet-card i {
        font-size: 24px;
        right: 10px;
        top : 20px;
    }
}

/* ===================================================================
   SECTIONS & LAYOUTS GÉNÉRAUX
==================================================================== */
.section {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 1rem 0;
}

.section article {
    flex: 1 1 25%;
    margin: 1rem;
    max-width: 300px;
    text-align: center;
}

.section-img {
    max-width: 100%;
    height: auto;
}

.section hr {
    border: 0;
    height: 1px;
    background: var(--pink);
    width: 100%;
}

#mes-projets {
    padding: 0 2rem;
}

/* Titres des sections */
#under-title,
#mes-projets h2 {
    text-align: left;
}

#under-title {
    margin-bottom: 20px;
}

#work-together {
    width: 100%;
}

/* ===================================================================
   SECTION INTRO
==================================================================== */
.intro {
    padding: 4rem 2rem 2rem 2rem;
    text-align: center;
}

/* ===================================================================
   SECTION "À PROPOS DE MOI"
==================================================================== */
#about-me {
    padding: 2rem;
}
.about-container {
    padding: 3em 2em;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
.about-text {
    text-align: center;
    flex: 1;
    padding: 1rem 7em;
}
.about-image img {
    width: 100%;
    max-width: 600px;
    padding: 1rem;
}


/* ===================================================================
   SECTION "MES PROJETS"
==================================================================== */
#mes-projets {
    padding: 0 2rem 4rem 2rem;
    background-color: #fff;
    text-align: center;
}
#mes-projets h2 {
    font-size: 2.5rem;
    color: #333;
}
.projets-container {
    border-radius: 20px;
    padding: 3em;
    background-color: #f6f6f6;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.875rem;
    margin: 0 auto;
}

/* ===================================================================
   CARTE DE PROJET
==================================================================== */
.projet-card {
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    min-height: 300px;
}

.projet-card img {
    border-radius: 8px;
    width: 100%;
    height: 400px;
    object-fit: cover;
    flex-shrink: 0;
}

.type2 {
    color: #333;
    font-size: 15px;
    margin-bottom: 0;
}

.projet-txt h3 {
    max-width: 70%;
    margin-bottom: 20px;
    text-align: left;
    font-size: 1.75em;
}

.projet-txt p {
    max-width: 70%;
    font-size: 15px;
    color: #6c6c6c;
}

.projet-txt {
    padding: 2em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
}

/* ===================================================================
   SECTIONS "ZONE" (arrière-plan fixe)
==================================================================== */
.zone {
    color: black;
    min-height: 20em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    overflow: hidden;
}
.zonea {
    padding: 3em 5em;
}
.zoneb {
    padding: 0 2em;
    text-align: left;
    align-items: center;
}
.zoneb-content {
    width: 100%;
    background-color: #f8f8f8;
    padding: 1.875rem;
    border-radius: 15px;
}

/* ===================================================================
   TABS (pour la section avec boutons)
==================================================================== */
#registers,
#bodies {
    margin: 0;
    width: 100%;
    font-size: 1rem;
    line-height: 1.4;
}
#registers {
    display: flex;
    justify-content: space-between;
}
#registers button {
    min-height: 50px;
    width: 100%;
    background-color: rgba(250, 250, 250, 0.9);
    border: none;
    padding: 0.1rem 1rem;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
    font-size: 1rem;
}
#registers button:first-of-type {
    border-top-left-radius: 15px;
}
#registers button:last-of-type {
    border-top-right-radius: 15px;
}
#registers button:hover {
    background-color: rgba(255, 255, 255, 0.9);
}
#registers .active-tab {
    background-color: rgba(255, 255, 255, 0.9);
    font-weight: bold;
}
#bodies {
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    padding: 2rem;
    background-color: rgba(255, 255, 255, 0.9);
}

/* ===================================================================
   SECTION DE FIN
==================================================================== */
.end {
    text-align: center;
    padding: 1rem;
}

/* ===================================================================
   MEDIA QUERIES - RESPONSIVE
==================================================================== */
@media (max-width: 768px) {
    /* Ajustement des sections générales */
    #about-me,
    #mes-projets {
        padding: 1.875rem 1.25rem;
    }
    .about-container {
        flex-direction: column;
        text-align: center;
    }
    .about-image,
    .about-text {
        padding: 0.625rem;
        margin: 0 auto;
    }
    .cards-section {
        align-items: center;
    }
    .card {
        margin: 1.25rem auto;
        width: 90%;
        transform: none;
    }
    .card-inner {
        flex-direction: column !important;
        align-items: center;
        text-align: center;
    }
    .card-img {
        width: 100%;
        max-width: 300px;
        margin: 0 auto 1.25rem;
    }
    .card-text {
        width: 100%;
        padding: 0.625rem;
    }
    .card-text h3 {
        font-size: 1.2rem;
    }
    .card-text p {
        font-size: 0.9rem;
    }
    .projets-container {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
    .projet-card img {
        height: auto;
    }

    .projet-card {
        min-height: 0;
        padding: 0;
    }
    .projet-details {
        padding: 0.9375rem;
    }

    .projet-txt {
        padding: 0 0 20px 0;
        width: 100%;
    }

    .projet-txt p {
        max-width: 100%;
    }

    .projets-container {
        display: grid;               /* ou flex */
        grid-template-columns: 1fr;  /* une seule colonne */
    }

    /* on attribue un ordre fixe à chaque enfant pour swapper la 2ᵉ paire */
    .projets-container > article:nth-child(1) { order: 1; }
    .projets-container > article:nth-child(2) { order: 2; }
    .projets-container > article:nth-child(3) { order: 4; } /* texte-Prince */
    .projets-container > article:nth-child(4) { order: 3; } /* carte-Prince */
    .projets-container > article:nth-child(5) { order: 5; }
    .projets-container > article:nth-child(6) { order: 6; }
}


@media (max-width: 600px) {
    .section article {
        flex: 1 1 100%;
        max-width: 100%;
    }
    #registers {
        flex-direction: column;
    }
    #registers button {
        margin-bottom: 0.5rem;
    }
    .zonea,
    .zoneb {
        padding: 2rem 1rem;
    }
}



.zonea {
    background-color: #f8dde8;
}



.about-text .rose {
    color: #F4B9D4;
}

.about-text .gris {
    color: #94addd;
}