.bio_container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(2rem, 3vw, 1rem);       /* ↓ was 5–6rem, now closer */
    padding-inline: clamp(3rem, 8vw, 10rem);
    min-height: 100vh;
    color: #f15a24;
    background:white;
}

.bio_container a {
    align-items: center;
    justify-content: space-between;
    margin-top: 3rem ;
}

.text-content
{
    flex: 1 1 56ch;
    max-width: 70ch;
    min-width: 0;
}


.text-content p {
    font-size: clamp(1rem, 1vw, 1.1rem);
    line-height: 1.6;
}


/* right column */
.image-content {
    flex: 0 0 clamp(26rem, 36vw, 42rem);   /* ↑ increased from ~24rem */
    display: flex;
    justify-content: flex-end;
    min-width: 0;
}

/* responsive image sizing */
.image-content img {
    display: block;
    /*width: 75%;*/
    width: 85%;
    height: auto;
    max-height: 85vh;
    object-fit: cover;
}


.titre1
{
    text-align: left;
    font-weight: 400;
    font-size: clamp(1.2rem, 1.5vw, 4rem);
    margin-bottom: 2rem;
    font-family: "Anton SC", sans-serif;
    line-height: 1.1;
    color: #f15a24;
}

.contenu
{
    font-weight: 400;
    font-family: "Epilogue", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    color: white;

}

.bio_container .contenu
{
    color: #f15a24;

}

.projects__head {
    margin: 0 0 clamp(2rem, 4vw, 3rem) 0;
    padding-top: clamp(4rem, 5vw, 9rem);
    padding-right: clamp(2rem, 3vw, 4rem);
    padding-left: clamp(1rem, 2vw, 2rem);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    text-align: right;
}

.projects__head h2 {
    font-family: "Anton SC", sans-serif;
    font-weight: 400;
    letter-spacing: 0.5px;
    font-size: clamp(2.5rem, 6vw, 5rem);
    text-transform: uppercase;
    color: #fff;
    margin: 0;
    line-height: 1.1;
    text-align: right;
}

.projects__hint {
    margin: 0;
    font-family: "Epilogue", system-ui, sans-serif;
    font-size: clamp(1rem, 1.8vw, 1.2rem);
    color: rgba(255, 255, 255, 0.7);
    text-align: right;
}


.projects .contenu
{
    font-size: clamp(0.75rem, 1vw, 1rem);

}

.project1 .contenu
{
    justify-content: flex-start; /* ⬅️ aligns to the left for normal layout */

}


/* inverted layout alignment */
.projet1.invert contenu {
    justify-content: flex-end; /* ➡️ aligns to the right for inverted layout */
}


.container_projet {
    display: grid;
    grid-template-columns: 40% 60%; /* text smaller, video bigger */
    gap: clamp(1.5rem, 4vw, 6rem);
    padding-left: clamp(1rem, 3vw, 2rem); /* 👈 reduced left padding */
    padding-right: 0; /* flush video on the right */
    min-height: 0;
    align-items: center;
    width: 100%;
    max-width: none;
    margin:0;
}

.projet1
{
    /*background: #21222a;*/
    /*padding-top: clamp(2rem, 5vh, 3rem);*/
    /*padding-bottom: clamp(2rem, 5vh, 3rem);*/
}

/*.projet1 *:last-child {*/
/*    margin-bottom: 0;*/
/*}*/


.wrap {
    /*padding-inline: clamp(1rem, 6vw, 10rem);*/
    padding-block: clamp(1.5rem, 4vw, 4rem);
    /*min-height: 100vh;*/
    min-height: 0;
    display: grid;
    place-items: center;
}

.projet1.wrap {
    padding-right: 0;
    padding-inline: 0 !important;   /* nuke both sides; we’ll pad text only *//* kill the right inset from .wrap for this section only */
}


.text-content-projet h1
{
    font-size: clamp(2.5rem, 6vw, 4rem);
    margin-bottom: 1rem;
    color: #f15a24;
}

.text-content-projet p {
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    line-height: 1.6;
    color: #f15a24;
    max-width: 70ch;
}


.projet1 .container_projet {
    display: flex;
	justify-content: space-between;
    align-items: center;
    max-width: none;
    margin: 0;
    padding: 0;               /* remove side insets */
    gap: clamp(2rem, 6vw, 4rem);
}


.projet1 .video-content {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
	max-width: 50%;
}

/* 4) Your video wrapper: keep it inside its column and hide sub-pixel creep */
.video-wrapper {
    width: 100%;
    max-width: 100%;                   /* instead of none */
    aspect-ratio: 16 / 9;
    position: relative;
    box-sizing: border-box;
}


/* 5) Fill the wrapper with the player */
.video-wrapper iframe {
    /*position: absolute;*/
    inset: 0;
    width: 100%;
    /*height:100%;*/
    display: block;                    /* removes inline-gap quirks */
    border: 0;
}

/* Default: text left, video right */
.projet1 .text-content-projet { order: 1; }
.projet1 .video-content { order: 2; }

/* Inverted section: video left, text right */
.projet1.invert .text-content-projet { order: 2; }
.projet1.invert .video-content { order: 1; }

/* Default layout: text left */
.projet1 .text-content-projet {
    padding-left: clamp(3rem, 8vw, 5rem);
    padding-right: 0;
}

/* Reversed layout: text right */
.projet1.reverse .text-content-projet,
.projet1.invert .text-content-projet {
    padding-right: clamp(3rem, 8vw, 5rem);
    padding-left: 0;
}

.projects
{
    padding-right: 0;
    margin: 0;
}

/* chip container under project description */
.project__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.8rem;
    padding: 0;
    list-style: none;
}

/* chip style */
.project__chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: "Epilogue", system-ui, sans-serif;
    font-size: 0.7rem;
    line-height: 1;
    padding: 0.4rem 0.65rem;
    border-radius: 999px;
    color: #fff;
    background: rgba(241, 90, 36, 0.15);
    border: 1px solid rgba(241, 90, 36, 0.35);
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

/* hover interaction */
.project__chip:hover {
    background: rgba(241, 90, 36, 0.25);
    border-color: rgba(241, 90, 36, 0.6);
    transform: translateY(-2px);
}


/* Make the text column a flex stack so we can align its contents */
    .text-content-projet{
        display: flex;
        flex-direction: column;

    }

/* Default (video right): left-align text + chips */
.projet1 .text-content-projet{
    align-items: flex-start;
    text-align: left;
}
.projet1 .project__chips{
    justify-content: flex-start;
}

/* Inverted (video left): right-align text + chips */
.projet1.invert .text-content-projet{
    align-items: flex-end;
    text-align: right;
}
.projet1.invert .project__chips{
    justify-content: flex-end;
}

/* Fix the small typos you had */
.projet1 .titre1{
    margin: 0;
}
.projet1.invert .titre1{
    margin: 0;
}



/*!* tablet & below: give more room and keep side-by-side a bit longer *!*/
/*@media (max-width: 1024px) {*/
/*    .image-content img {*/
/*        width: min(48vw, 480px);*/
/*        max-height: 65vh;*/
/*    }*/
/*}*/

/*!* mobile: stack, text first then image *!*/
/*@media (max-width: 820px) {*/
/*    .container {*/
/*        flex-direction: column;*/
/*        align-items: flex-start;   !* left-align text *!*/
/*        min-height: auto;*/
/*    }*/

/*    .text-content {*/
/*        padding-right: 0;*/
/*    }*/

/*    .image-content {*/
/*        width: 100%;*/
/*        justify-content: center;   !* center the image when stacked *!*/
/*        margin-top: 1rem;*/
/*    }*/

/*    .image-content img {*/
/*        width: min(92vw, 420px);*/
/*        max-height: 60vh;*/
/*    }*/
/*}*/

/*@media (max-width: 860px) {*/
/*    .container {*/
/*        grid-template-columns: 1fr;*/
/*        text-align: center;*/
/*        padding: 2rem;*/
/*    }*/

/*    .video-wrapper {*/
/*        max-width: 100%;*/
/*        margin-top: 2rem;*/
/*    }*/

/*    .text-content p {*/
/*        margin-inline: auto;*/
/*    }*/
/*}*/

/* =========================
   Projects: mobile stacking
   ========================= */

/* ============= 1) Room for the video on mid screens ============= */
/* Narrow desktops / large tablets: keep row layout but favor video */
@media (max-width: 1440px) {
    .projet1 .container_projet {
        gap: clamp(1.25rem, 3.5vw, 2.25rem);
    }

    /* Let the video take more of the row */
    .projet1 .video-content {
        flex-basis: 62%;     /* was ~50% */
    }
    .projet1 .text-content-projet {
        flex-basis: 38%;
    }

    /* Ease typography a bit so titles don’t bully the video */
    .projet1 .text-content-projet h1 {
        font-size: clamp(2.1rem, 4.8vw, 3.2rem);
        line-height: 1.08;
    }
    .projet1 .text-content-projet p {
        font-size: clamp(.95rem, 1.35vw, 1.1rem);
    }
}

/* ⇢ when you stack (same breakpoint you used to stack: 1180px) */
@media (max-width: 1180px) {
    /* center the text column regardless of normal/invert variants */
    .projet1 .text-content-projet,
    .projet1.invert .text-content-projet,
    .projet1.reverse .text-content-projet {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        align-items: center;     /* because it's a flex column */
        max-width: 70ch;         /* keep a nice readable line length */
        width: 100%;
    }

    /* make sure the children also center */
    .projet1 .text-content-projet > * {
        margin-left: auto;
        margin-right: auto;
    }

    /* chips centered under the copy */
    .projet1 .project__chips {
        justify-content: center;
    }

    /* (optional) give the title/copy a tiny tighter scale here */
    .projet1 .text-content-projet h1 {
        text-align: center;
    }
    .projet1 .text-content-projet p {
        text-align: center;
    }
}


/* You already have a phone breakpoint ~860px;
   these two just *lead into* that behavior more gracefully. */


/* Tweak point: adjust 860px to taste (900–768 also common) */
@media (max-width: 860px){

    /* stack; video first, text second */
    .projet1 .container_projet{
        display:flex;
        flex-direction: column;
        align-items: stretch;
        gap: clamp(0.75rem, 3.5vw, 1.25rem);
        padding: 0 clamp(1rem, 5vw, 2rem);
    }

    .projet1 .video-content,
    .projet1.invert .video-content{
        order: 1;
        max-width: 100%;
        margin: 0;
        padding: 0;
    }

    /*.projet1 .text-content-projet,*/
    /*.projet1.invert .text-content-projet{*/
    /*    order: 2;*/
    /*    padding: 0;*/
    /*    display:flex;*/
    /*    flex-direction: column;*/
    /*    align-items: flex-start;   !* ✅ keep left-aligned on mobile *!*/
    /*    text-align: left;*/
    /*    gap: clamp(0.35rem, 1.8vw, 0.6rem); !* control spacing h1 / p / chips *!*/
    /*}*/

    .projet1 .text-content-projet,
    .projet1.invert .text-content-projet{
        order: 2;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: center;    /* ✅ center the text horizontally */
        text-align: center;     /* ✅ center text lines */
        gap: clamp(0.35rem, 1.8vw, 0.6rem);
    }


    /* keep chips aligned with text */
    /*.projet1 .project__chips,*/
    /*.projet1.invert .project__chips{*/
    /*    justify-content: flex-start;*/
    /*}*/

    .projet1 .project__chips,
    .projet1.invert .project__chips{
        justify-content: center; /* ✅ center the tags below text */
    }


    /* fluid video */
    .projet1 .video-wrapper{
        width: 100%;
        max-width: 100%;
        aspect-ratio: 16/9;
    }
    .projet1 .video-wrapper iframe{
        width:100%;
        height:100%;
        display:block;
        border:0;
    }

    /* fluid type */
    .text-content-projet h1{
        font-size: clamp(1.6rem, 8vw, 2.4rem);
        line-height: 1.12;
        margin: 0;
    }
    .text-content-projet .contenu{
        font-size: clamp(0.95rem, 4.2vw, 1.05rem);
        line-height: 1.6;
        margin: 0;
        max-width: 60ch;
    }
    .project__chip{
        font-size: clamp(0.75rem, 3.4vw, 0.9rem);
        padding: 0.38rem 0.68rem;
    }
}


/* Optional: extra-small phones */
@media (max-width: 520px){
    .text-content-projet .contenu{
        max-width: 100%;
    }
    .project__chips{
        gap: 0.35rem;
    }

    .text-content-projet{
        align-items: center;
        text-align: center;
    }
    .project__chips{ justify-content: center; }

}

/* ===========================
   BIO SECTION – RESPONSIVE
   =========================== */

:root{
    --bio-pad-x: clamp(24px, 6vw, 96px);    /* left/right padding */
    --bio-gap:   clamp(24px, 5vw, 56px);    /* space between text & image */
}

/* Shell */
.bio_container{
    display: grid;
    grid-template-columns: 1.05fr .95fr;   /* text a touch wider than image */
    align-items: center;
    gap: var(--bio-gap);
    padding: clamp(48px, 8vw, 120px) var(--bio-pad-x);
    color: #f15a24;
    background: #fff;                      /* you had white here */
}

/* LEFT: text column */
.text-content{
    max-width: 66ch;                       /* readable; prevents pushing the image */
    min-width: 0;
}

.titre1{
    margin: 0 0 clamp(16px, 2vw, 24px) 0;
}

.titre1 h1{
    /* brand font/weight inherited from you */
    font-family: "Anton SC", sans-serif;
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: .5px;
    color: #f15a24;

    /* scales across breakpoints, prefers shrinking over wrapping */
    font-size: clamp(1.8rem, 5.5vw, 3.6rem);
    overflow-wrap: anywhere;               /* long words safe */
    word-break: normal;
    margin: 0;
}

.contenu{
    font-family: "Epilogue", system-ui, sans-serif;
    font-weight: 400;
    color: #f15a24;
    line-height: 1.6;
    /* shrink a bit with viewport, but don’t go tiny */
    font-size: clamp(1rem, 1.35vw, 1.2rem);
}



/* RIGHT: image column */
.image-content{
    min-width: 0;
    display: flex;
    justify-content: flex-end;
}

.image-content img{
    display: block;
    width: min(42vw, 560px);               /* fluid but capped */
    max-height: 78vh;                      /* don’t overwhelm viewport */
    height: auto;
    object-fit: cover;
}

/* ===========================
   BREAKPOINTS
   =========================== */
/* Tablet-Portrait & down: stack and put the image UNDER the text+button */
@media (max-width: 900px) {
    .bio_container {
        /*display: flex;              !* keep flex so we can control order *!*/
        /*flex-direction: column;     !* stack *!*/
        /*align-items: center;        !* center the stack *!*/
        /*justify-content: center;*/
        /*gap: 2rem;*/
        /*text-align: center;*/
        /*padding-inline: clamp(1.25rem, 5vw, 2rem);*/

        display: flex;
        flex-direction: column;
        align-items: flex-start;    /* ⬅️ left-align stack horizontally */
        justify-content: center;
        gap: 2rem;
        text-align: left;           /* ⬅️ left-align text */
        padding-inline: clamp(1.25rem, 5vw, 2rem);
    }

    /* Make both children full-width and remove fixed flex-basis */
    .bio_container .text-content,
    .bio_container .image-content {
        width: 100%;
        max-width: 820px;           /* nice readable line-length */
        flex: none;                 /* ⬅️ CRUCIAL: cancels the desktop flex-basis */
    }

    /* Ensure order: text (with the button inside) first, image second */
    .bio_container .text-content { order: 1; }
    .bio_container .image-content { order: 2; }

    /* Center the CTA button that’s inside .text-content */
    .bio_container .cta-modern {
        margin: 1.5rem auto 0;
        display: inline-flex;       /* keeps its pill shape */
    }

    /* Scale the image nicely when stacked */
    .bio_container .image-content img {
        width: min(92vw, 520px);
        height: auto;
    }

    /* Comfortable reading size on this tier */
    .bio_container .text-content p {
        font-size: clamp(0.92rem, 1.9vw, 1.05rem);
    }

    .bio_container .image-content  {
        /*align-content: center;*/
        justify-content: center;
    }

    /*.bio_container .cta-modern {*/
    /*    margin: 2rem auto 0;*/
    /*    display: block;*/
    /*    justify-content: center;*/
    /*}*/
}

/* Mobile: smaller spacing and controls */
@media (max-width: 560px) {
    .bio_container { gap: 1.5rem; }

    .bio_container .text-content { max-width: 95%; }
    .bio_container .text-content p { font-size: clamp(0.85rem, 3.2vw, 0.95rem); }

    .bio_container .image-content img {
        width: min(96vw, 420px);
    }

    /*.bio_container .cta-modern {*/
    /*    */
    /*    font-size: 0.85rem;*/
    /*    padding: 0.75rem 1.25rem;*/
    /*}*/

    .bio_container .cta-modern {
        margin: 2rem auto 0;
        display: block;
        justify-content: center;
    }
}