/* =========================================================
   PAGE NOS RÉFÉRENCES
   Fichier : references.css
   ========================================================= */


/* =========================================================
   INTRODUCTION
   ========================================================= */

.references-intro {
    padding:
        clamp(50px, 7vw, 90px)
        clamp(20px, 5vw, 80px)
        clamp(35px, 5vw, 60px);
}

.references-intro-contenu {
    width: min(100%, 1100px);
    margin-inline: auto;
}

.references-surtitre {
    margin: 0 0 10px;
    color: var(--couleur-orange, #ff5000);
    font-size: clamp(0.8rem, 1vw, 0.95rem);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.references-intro h1 {
    margin: 0;
    color: var(--couleur-bleu, #0a142f);
    font-size: clamp(2.2rem, 5vw, 4.5rem);
    line-height: 1;
}

.references-introduction {
    max-width: 850px;
    margin: clamp(20px, 3vw, 30px) 0 0;
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    line-height: 1.7;
}


/* =========================================================
   CHIFFRES CLÉS
   ========================================================= */

.references-chiffres {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(12px, 2vw, 24px);
    width: min(calc(100% - 40px), 1100px);
    margin-inline: auto;
    padding-bottom: clamp(35px, 5vw, 60px);
}

.reference-chiffre {
    flex: 1 1 240px;
    padding: clamp(20px, 3vw, 30px);
    border-top: 3px solid var(--couleur-orange, #ff5000);
    background: rgb(10 20 47 / 4%);
}

.reference-chiffre strong,
.reference-chiffre span {
    display: block;
}

.reference-chiffre strong {
    margin-bottom: 8px;
    color: var(--couleur-bleu, #0a142f);
    font-size: clamp(1.2rem, 2vw, 1.6rem);
}

.reference-chiffre span {
    line-height: 1.5;
}


/* =========================================================
   NAVIGATION PAR ANNÉE
   ========================================================= */

.references-navigation {
    width: min(calc(100% - 40px), 1100px);
    margin-inline: auto;
    padding:
        clamp(20px, 3vw, 30px)
        clamp(20px, 3vw, 30px);
    border-radius: 12px;
    background: var(--couleur-bleu, #0a142f);
}

.references-navigation p {
    margin: 0 0 15px;
    color: #fff;
    font-weight: 700;
}

.references-navigation-liens {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.references-navigation a {
    padding: 7px 12px;
    border: 1px solid rgb(255 255 255 / 25%);
    border-radius: 100px;
    color: #fff;
    font-size: 0.9rem;
    text-decoration: none;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.references-navigation a:hover,
.references-navigation a:focus-visible {
    border-color: var(--couleur-orange, #ff5000);
    background: var(--couleur-orange, #ff5000);
    transform: translateY(-2px);
}


/* =========================================================
   LISTE GÉNÉRALE
   ========================================================= */

.references-liste {
    width: min(calc(100% - 40px), 1100px);
    margin-inline: auto;
    padding:
        clamp(40px, 6vw, 70px)
        0
        clamp(60px, 8vw, 100px);
}


/* =========================================================
   GROUPE PAR ANNÉE
   ========================================================= */

.references-annee {
    scroll-margin-top: 30px;
}

.references-annee + .references-annee {
    margin-top: clamp(45px, 7vw, 80px);
}

.references-annee-entete {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px 20px;
    padding-bottom: 14px;
    border-bottom: 3px solid var(--couleur-orange, #ff5000);
}

.references-annee-entete h2 {
    margin: 0;
    color: var(--couleur-bleu, #0a142f);
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 1;
}

.references-annee-entete span {
    color: rgb(10 20 47 / 65%);
    font-size: 0.9rem;
    font-weight: 600;
}


/* =========================================================
   UNE RÉFÉRENCE
   ========================================================= */

.references-annee-liste {
    border-right: 1px solid rgb(10 20 47 / 10%);
    border-bottom: 1px solid rgb(10 20 47 / 10%);
    border-left: 1px solid rgb(10 20 47 / 10%);
    border-radius: 0 0 12px 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgb(10 20 47 / 6%);
}

.reference {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(18px, 3vw, 35px);
    align-items: flex-start;
    padding: clamp(20px, 3vw, 30px);
    background: #fff;
}

.reference + .reference {
    border-top: 1px solid rgb(10 20 47 / 10%);
}

.reference-client {
    flex: 1 1 220px;
}

.reference-projet {
    flex: 2 1 360px;
}

.reference-mission {
    flex: 0 1 190px;
}

.reference-label {
    margin: 0 0 7px;
    color: rgb(10 20 47 / 50%);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.reference-client h3,
.reference-projet p {
    margin: 0;
}

.reference-client h3 {
    color: var(--couleur-bleu, #0a142f);
    font-size: 1rem;
    line-height: 1.45;
}

.reference-projet p {
    line-height: 1.6;
}

.reference-mission span {
    display: inline-block;
    padding: 7px 11px;
    border-radius: 100px;
    background: rgb(255 80 0 / 10%);
    color: var(--couleur-orange, #ff5000);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.3;
}


/* =========================================================
   SURVOL
   ========================================================= */

@media (hover: hover) {
    .reference {
        transition: background-color 0.2s ease;
    }

    .reference:hover {
        background: rgb(10 20 47 / 2.5%);
    }
}