@media (max-width: 900px) {

    .hero {
        min-height: 70vh;
    }

    .hero h1 {
        font-size: 3.2rem;
    }

}

/* ==========================================================
   BANDEAU DU PROCESSUS
========================================================== */

@media (max-width: 1050px) {

    .process-strip__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 2rem;
    }

    .process-item:nth-child(2) {
        border-right: none;
    }

    .process-item:nth-child(3) {
        padding-left: 0;
    }
}

@media (max-width: 650px) {

    .process-strip {
        padding: 1rem 0;
    }

    .process-strip__grid {
        grid-template-columns: 1fr;
        row-gap: 0;
    }

    .process-item,
    .process-item:first-child,
    .process-item:nth-child(3),
    .process-item:last-child {
        padding: 1.5rem 0;
        border-right: none;
        border-bottom: 1px solid rgba(201, 106, 44, 0.4);
    }

    .process-item:last-child {
        border-bottom: none;
    }
}

/* ==========================================================
   SERVICES PREVIEW
========================================================== */

@media (max-width: 900px) {

    .services-preview__inner {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .services-preview__content {
        max-width: 600px;
    }

}

@media (max-width: 600px) {

    .services-preview {
        padding: 4rem 0;
    }

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

    .service-card {
        min-height: 210px;
    }

}

/* ==========================================================
   IMPACT
========================================================== */

@media (max-width:1100px){

    .impact__inner{

        grid-template-columns:1fr;

        gap:4rem;

    }

    .impact__stats{

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

        gap:3rem;

    }

    .stat{

        border:none !important;

    }

}
@media (max-width:700px){

    .impact__intro{

        flex-direction:column;

        text-align:center;

    }

    .impact__stats{

        grid-template-columns:1fr;

    }

}

/* ==========================================================
   PROJECTS SHOWCASE
========================================================== */

@media (max-width: 900px) {

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

    .projects-showcase__image {
        min-height: 430px;
    }

    .projects-showcase__content {
        min-height: 500px;
        padding: 4rem 2rem;
    }

}

@media (max-width: 600px) {

    .projects-showcase__image {
        min-height: 300px;
    }

    .projects-showcase__content {
        min-height: auto;
        padding: 3.5rem 1.5rem;
    }

    .projects-showcase__content h2 {
        font-size: 2.4rem;
    }

    .projects-showcase__navigation {
        gap: 1.2rem;
    }

    .projects-showcase__watermark {
        width: 170px;
    }

}

/* ==========================================================
   CTA BANNER
========================================================== */

@media (max-width:950px){

    .cta-banner__inner{

        grid-template-columns:1fr;

        text-align:center;

    }

    .cta-banner__left{

        flex-direction:column;

    }

    .cta-banner .btn{

        justify-self:center;

    }

}

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

@media (max-width: 1000px) {

    .site-footer__main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 650px) {

    .site-footer {
        padding-top: 3.5rem;
    }

    .site-footer__main {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .site-footer__brand {
        padding-right: 0;
    }

    .site-footer__column {
        padding-left: 0;
    }

    .site-footer__column::before {
        display: none;
    }

    .site-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .site-footer__legal {
        flex-direction: column;
        gap: 0.75rem;
    }

}

/* ==========================================================
   HERO DES PAGES INTÉRIEURES
========================================================== */

@media (max-width: 900px) {

    .page-hero {
        min-height: 500px;
    }

    .page-hero__overlay {
        background:
            linear-gradient(
                90deg,
                rgba(5, 7, 7, 0.96) 0%,
                rgba(5, 7, 7, 0.82) 65%,
                rgba(5, 7, 7, 0.35) 100%
            );
    }

    .page-hero__content {
        max-width: 620px;
        padding: 140px 0 80px;
    }

}

@media (max-width: 600px) {

    .page-hero {
        min-height: 560px;
        align-items: flex-end;
    }

    .page-hero__image {
        object-position: 65% center;
    }

    .page-hero__overlay {
        background:
            linear-gradient(
                0deg,
                rgba(5, 7, 7, 0.98) 0%,
                rgba(5, 7, 7, 0.82) 62%,
                rgba(5, 7, 7, 0.35) 100%
            );
    }

    .page-hero__content {
        padding: 130px 0 60px;
    }

    .page-hero h1 {
        font-size: clamp(2.6rem, 12vw, 3.8rem);
        line-height: 1.02;
    }

    .page-hero__description {
        font-size: 1rem;
        line-height: 1.65;
    }

}

/* ==========================================================
   NOTRE HISTOIRE
========================================================== */

@media (max-width: 900px) {

    .story-section {
        grid-template-columns: 1fr;
    }

    .story-section__content {
        padding: 70px 40px;
    }

    .story-section__content::after {
        display: none;
    }

    .story-section__text {
        max-width: 680px;
        margin: 0 auto;
    }

    .story-section__image {
        min-height: 420px;
    }

    .story-section__image::before {
        display: none;
    }

}

@media (max-width: 600px) {

    .story-section__content {
        padding: 55px 24px;
    }

    .story-section h2 {
        font-size: clamp(2.4rem, 11vw, 3.4rem);
    }

    .story-section__text p:not(.section-label) {
        font-size: 1rem;
    }

    .story-section__image {
        min-height: 320px;
    }

}

/* ==========================================================
   NOS ENGAGEMENTS
========================================================== */

@media (max-width: 1000px) {

    .commitments-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 600px) {

    .commitments-section {
        padding: 4rem 0;
    }

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

    .commitment-card {
        min-height: 270px;
    }

}

/* ==========================================================
   PROCESSUS DES SERVICES
========================================================== */

@media (max-width: 1100px) {

    .service-process__grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 1rem;
    }

    .service-process__arrow {
        display: none;
    }

    .service-step {
        padding: 0 1rem;
    }

}

@media (max-width: 800px) {

    .service-process__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2.5rem 1rem;
    }

    .service-step::before {
        display: none;
    }

}

@media (max-width: 520px) {

    .service-process {
        padding: 3.5rem 0 4rem;
    }

    .service-process__grid {
        grid-template-columns: 1fr;
    }

    .service-step {
        padding: 0;
    }

}

/* ==========================================================
   SERVICES CONCRETS
========================================================== */

@media (max-width: 1000px) {

    .services-concrete__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 650px) {

    .services-concrete {
        padding: 4rem 0;
    }

    .services-concrete__grid {
        grid-template-columns: 1fr;
    }

    .concrete-service-card {
        min-height: 220px;
    }

    .concrete-service-card__content {
        min-height: 220px;
        grid-template-columns: 48px 1fr;
        padding: 1.6rem;
    }

}

/* ==========================================================
   MATÉRIAUX ACCEPTÉS
========================================================== */

@media (max-width: 1050px) {

    .accepted-materials__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .accepted-material:nth-child(4)::after,
    .accepted-material:nth-child(8)::after {
        display: none;
    }

    .accepted-material:nth-child(-n + 4) {
        border-bottom: 1px solid rgba(30, 30, 30, 0.08);
    }

}

@media (max-width: 600px) {

    .accepted-materials {
        padding: 4rem 0 3rem;
    }

    .accepted-materials__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .accepted-material:nth-child(even)::after {
        display: none;
    }

    .accepted-material {
        border-bottom: 1px solid rgba(30, 30, 30, 0.08);
    }

    .accepted-material:nth-last-child(-n + 2) {
        border-bottom: none;
    }

}

/* ==========================================================
   HERO MATÉRIAUX
========================================================== */

@media (max-width:800px){

    .materials-hero{

        min-height:420px;

    }

    .materials-hero h1{

        font-size:clamp(2.6rem,9vw,4rem);

    }

    .materials-hero p{

        font-size:1rem;

    }

}

/* ==========================================================
   PHILOSOPHIE DES MATÉRIAUX
========================================================== */

@media (max-width: 850px) {

    .materials-philosophy {
        grid-template-columns: 1fr;
    }

    .materials-philosophy__content {
        padding: 60px 40px;
    }

    .materials-philosophy__text {
        width: 100%;
        max-width: 680px;
        margin: 0 auto;
    }

    .materials-philosophy__image {
        min-height: 360px;
    }

}

@media (max-width: 600px) {

    .materials-philosophy__content {
        padding: 50px 24px;
    }

    .materials-philosophy__image {
        min-height: 280px;
    }

}

/* ==========================================================
   CATÉGORIES DE MATÉRIAUX
========================================================== */

@media (max-width:1100px){

    .materials-categories__grid{

        grid-template-columns:repeat(3,1fr);

    }

    .material-category{

        border-bottom:1px solid rgba(0,0,0,.08);

    }

    .material-category::after{

        display:none;

    }

}

@media (max-width:700px){

    .materials-categories__grid{

        grid-template-columns:1fr;

    }

}
/* ==========================================================
   TRANSFORMATION DES MATÉRIAUX
========================================================== */

@media (max-width: 1100px) {

    .material-transformations__grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .transformation-group {
        padding: 0;
    }

    .transformation-group:not(:last-child)::after {
        top: auto;
        right: 0;
        bottom: -1.5rem;
        left: 0;

        width: auto;
        height: 1px;
    }

}

@media (max-width: 650px) {

    .transformation-group {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .transformation-arrow {
        margin: 0;

        transform: rotate(90deg);
    }

    .transformation-step img {
        aspect-ratio: 16 / 10;
    }

}

/* ==========================================================
   ÉVALUATION D’UN MATÉRIAU
========================================================== */

@media (max-width: 950px) {

    .material-evaluation__inner {
        grid-template-columns: 1fr 1fr;
    }

    .material-evaluation__button {
        grid-column: 1 / -1;
        justify-self: center;
    }

}

@media (max-width: 650px) {

    .material-evaluation__inner {
        grid-template-columns: 1fr;
        gap: 2rem;

        padding: 2rem 1.5rem;
    }

    .material-evaluation__intro {
        grid-template-columns: 60px 1fr;

        padding-right: 0;
        padding-bottom: 2rem;

        border-right: none;
        border-bottom: 1px solid rgba(30, 30, 30, 0.12);
    }

    .material-evaluation__icon {
        font-size: 3rem;
    }

    .material-evaluation__button {
        grid-column: auto;
        width: 100%;
        min-width: 0;
    }

}

/* ==========================================================
   RÉALISATIONS AVANT / APRÈS
========================================================== */

@media (max-width: 1000px) {

    .materials-results__grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .result-pair {
        max-width: 720px;
        margin: 0 auto;
    }

}

/* ==========================================================
   CTA FINAL MATÉRIAUX
========================================================== */

@media (max-width: 750px) {

    .materials-final-cta__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.75rem;
    }

    .materials-final-cta__button {
        width: 100%;
        justify-content: center;
    }

}

@media (max-width: 520px) {

    .result-pair {
        grid-template-columns: 1fr;
        gap: 0.8rem;
    }

    .result-pair__arrow {
        margin: -0.2rem auto;

        transform: rotate(90deg);
    }

}

/* ==========================================================
   HERO NOS PROJETS
========================================================== */

@media (max-width: 850px) {

    .projects-hero {
        min-height: 460px;
    }

    .projects-hero__overlay {
        background:
            linear-gradient(
                90deg,
                rgba(242, 237, 229, 0.98) 0%,
                rgba(242, 237, 229, 0.94) 55%,
                rgba(242, 237, 229, 0.45) 100%
            );
    }

    .projects-hero__content {
        max-width: 500px;
    }

}

@media (max-width: 600px) {

    .projects-hero {
        min-height: 430px;
    }

    .projects-hero > img {
        object-position: 65% center;
    }

    .projects-hero__overlay {
        background:
            linear-gradient(
                90deg,
                rgba(242, 237, 229, 0.98) 0%,
                rgba(242, 237, 229, 0.93) 72%,
                rgba(242, 237, 229, 0.68) 100%
            );
    }

    .projects-hero h1 {
        font-size: clamp(3.2rem, 16vw, 4.7rem);
    }

    .projects-hero p {
        max-width: 330px;
        font-size: 1.45rem;
    }

}

/* ==========================================================
   STATISTIQUES PROJETS
========================================================== */

@media (max-width: 750px) {

    .projects-stats__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .project-stat:nth-child(2)::after,
    .project-stat:nth-child(4)::after {
        display: none;
    }

    .project-stat:nth-child(-n + 2) {
        border-bottom: 1px solid rgba(201, 106, 44, 0.25);
    }

}

@media (max-width: 450px) {

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

    .project-stat {
        min-height: 95px;
    }

    .project-stat::after {
        display: none;
    }

    .project-stat:not(:last-child) {
        border-bottom: 1px solid rgba(201, 106, 44, 0.25);
    }

}

/* ==========================================================
   RÉALISATIONS
========================================================== */

@media (max-width: 850px) {

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

}

@media (max-width: 560px) {

    .projects-realizations {
        padding: 4rem 0;
    }

    .project-realization-card {
        grid-template-columns: 1fr;
        gap: 1.25rem;

        padding: 2rem 1.5rem;

        text-align: center;
    }

    .project-realization-card p {
        margin: 0 auto;
    }

}

/* ==========================================================
   PROJETS EN VEDETTE
========================================================== */

@media (max-width: 900px) {

    .featured-projects__slider {
        grid-template-columns: 1fr;
    }

    .featured-projects__image {
        min-height: 420px;
    }

    .featured-projects__content {
        padding: 3rem;
    }

}

@media (max-width: 600px) {

    .featured-projects {
        padding: 4rem 0;
    }

    .featured-projects__image {
        min-height: 300px;
    }

    .featured-projects__content {
        padding: 2rem 1.5rem;
    }

    .featured-projects__content h2 {
        font-size: 2.5rem;
    }

}

/* ==========================================================
   HERO CARRIÈRE
========================================================== */

@media (max-width: 850px) {

    .career-hero {
        min-height: 540px;
    }

    .career-hero__overlay {
        background:
            linear-gradient(
                90deg,
                rgba(8, 8, 8, 0.96) 0%,
                rgba(8, 8, 8, 0.88) 55%,
                rgba(8, 8, 8, 0.35) 100%
            );
    }

    .career-hero__content {
        width: min(470px, 100%);
    }

}

@media (max-width: 600px) {

    .career-hero {
        min-height: 600px;
        align-items: flex-end;
    }

    .career-hero__image {
        object-position: 62% center;
    }

    .career-hero__overlay {
        background:
            linear-gradient(
                0deg,
                rgba(8, 8, 8, 0.98) 0%,
                rgba(8, 8, 8, 0.88) 55%,
                rgba(8, 8, 8, 0.25) 100%
            );
    }

    .career-hero__container {
        padding-bottom: 3rem;
    }

    .career-hero h1 {
        font-size: clamp(3.4rem, 16vw, 4.8rem);
    }

    .career-hero h2 {
        font-size: 1.55rem;
    }

    .career-hero p {
        font-size: 0.95rem;
    }

}

/* ==========================================================
   VALEURS CARRIÈRE
========================================================== */

@media (max-width: 900px) {

    .career-values__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .career-value:nth-child(2)::after,
    .career-value:nth-child(4)::after {
        display: none;
    }

    .career-value:nth-child(-n + 2) {
        border-bottom: 1px solid rgba(30, 30, 30, 0.1);
    }

}

@media (max-width: 560px) {

    .career-values {
        padding: 4rem 0 3.5rem;
    }

    .career-values__grid {
        grid-template-columns: 1fr;
    }

    .career-value {
        min-height: auto;
        padding: 2rem 1rem;
    }

    .career-value::after {
        display: none;
    }

    .career-value:not(:last-child) {
        border-bottom: 1px solid rgba(30, 30, 30, 0.1);
    }

}

/* ==========================================================
   POURQUOI TRAVAILLER CHEZ PHÉNIX
========================================================== */

@media (max-width: 850px) {

    .career-benefits {
        grid-template-columns: 1fr;
    }

    .career-benefits__content {
        padding: 4rem 2.5rem;
    }

    .career-benefits__text {
        width: 100%;
        max-width: 650px;
        margin: 0 auto;
    }

    .career-benefits__image {
        min-height: 380px;
    }

}

@media (max-width: 560px) {

    .career-benefits__content {
        padding: 3.5rem 1.5rem;
    }

    .career-benefits__image {
        min-height: 280px;
    }

    .career-benefits__list li {
        padding-left: 2rem;
    }

}

/* ==========================================================
   POSTES OUVERTS
========================================================== */

@media (max-width: 950px) {

    .career-job {
        grid-template-columns: 60px 1fr auto;
        gap: 0.7rem;

        padding: 1.25rem;
    }

    .career-job h3 {
        padding: 0;
    }

    .career-job__location,
    .career-job__type {
        grid-column: 2;

        padding: 0;
    }

    .career-job__button {
        grid-column: 3;
        grid-row: 1 / span 3;
    }

    .career-job > *::after {
        display: none;
    }

}

@media (max-width: 650px) {

    .career-jobs {
        padding: 4rem 0;
    }

    .career-job {
        grid-template-columns: 48px 1fr;
        gap: 0.8rem;

        padding: 1.5rem;
    }

    .career-job__location,
    .career-job__type {
        grid-column: 2;
    }

    .career-job__button {
        grid-column: 1 / -1;
        grid-row: auto;

        width: 100%;
        min-width: 0;
        margin-top: 0.5rem;
    }

}

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

@media (max-width: 850px) {

    .contact-hero {
        min-height: 500px;
    }

    .contact-hero__overlay {
        background:
            linear-gradient(
                90deg,
                rgba(8, 8, 8, 0.97) 0%,
                rgba(8, 8, 8, 0.90) 55%,
                rgba(8, 8, 8, 0.35) 100%
            );
    }

}

@media (max-width: 600px) {

    .contact-hero {
        min-height: 580px;
        align-items: flex-end;
    }

    .contact-hero__image {
        object-position: 66% center;
    }

    .contact-hero__overlay {
        background:
            linear-gradient(
                0deg,
                rgba(8, 8, 8, 0.98) 0%,
                rgba(8, 8, 8, 0.88) 58%,
                rgba(8, 8, 8, 0.22) 100%
            );
    }

    .contact-hero__container {
        padding-bottom: 3rem;
    }

    .contact-hero h1 {
        font-size: clamp(3.3rem, 16vw, 4.8rem);
    }

    .contact-hero h2 {
        font-size: 1.5rem;
    }

    .contact-hero p {
        font-size: 0.95rem;
    }

}

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

@media (max-width: 850px) {

    .contact-section__grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .contact-section__form-column {
        padding-right: 0;
        padding-bottom: 3rem;

        border-right: none;
        border-bottom: 1px solid rgba(30, 30, 30, 0.12);
    }

}

@media (max-width: 560px) {

    .contact-section {
        padding: 4rem 0;
    }

    .contact-form__submit {
        width: 100%;
    }

    .contact-detail {
        grid-template-columns: 44px 1fr;
        gap: 1rem;
    }

    .contact-detail__icon {
        width: 42px;
        height: 42px;
    }

}