/* =========================================================
   VIRTUS — PAGE PROJET
   VERSION FINALE / POLISH

   Objectifs :
   - rythme et espacements cohérents
   - meilleure lisibilité
   - visuels jamais coupés
   - aucune mise à l'échelle inutile
   - responsive desktop / tablette / mobile
   - composition éditoriale propre
   - compatible avec style.css / global.css
   - aucune règle liée au custom cursor
========================================================= */


/* =========================================================
   01 — VARIABLES PAGE
========================================================= */

:root {

    --project-black: #000000;
    --project-black-soft: #111111;

    --project-white: #f2f2f2;
    --project-white-soft: #d9d9d9;

    --project-red: #ff0000;

    --virtus-blue: #2aa3d4;
    --virtus-pink: #e73191;

    --project-width: 1320px;
    --project-side: 4%;

    --project-radius: 8px;

    --project-gap-xs: 8px;
    --project-gap-sm: 12px;
    --project-gap-md: 20px;
    --project-gap-lg: 32px;

    --section-space:
        clamp(88px, 8vw, 124px);

    --subsection-space:
        clamp(58px, 5.5vw, 82px);

    --text-muted-dark:
        rgba(255, 255, 255, 0.68);

    --text-muted-light:
        rgba(0, 0, 0, 0.66);

}


/* =========================================================
   02 — BASE
========================================================= */

.project-page {
    width: 100%;
    overflow-x: hidden;
    background: var(--project-black);
    font-family: var(--poppins);
}

.project-page *,
.project-page *::before,
.project-page *::after {
    box-sizing: border-box;
}

.container {
    width:
        min(
            calc(100% - 2 * var(--project-side)),
            var(--project-width)
        );

    margin-inline: auto;
}


/* =========================================================
   03 — SECTIONS
========================================================= */

.section {
    position: relative;

    width: 100%;

    padding:
        var(--section-space)
        0;
}

.section--dark {
    background:
        var(--project-black);

    color:
        var(--project-white);
}

.section--light {
    background:
        var(--project-white-soft);

    color:
        var(--project-black-soft);
}


/* =========================================================
   04 — TYPOGRAPHIE
========================================================= */

.eyebrow {
    margin: 0;

    font-family:
        var(--poppins);

    font-size:
        clamp(11px, 0.82vw, 13px);

    font-weight: 500;

    line-height: 1.5;

    letter-spacing:
        0.1em;

    text-transform:
        uppercase;

    opacity:
        0.62;
}


/* titres principaux */

.project-page h1,
.project-page h2,
.project-page h3 {

    margin-top: 0;
}


/* H1 */

.project-page h1 {
    margin-bottom: 0;

    font-family:
        var(--merriweather);

    font-size:
        clamp(
            76px,
            10vw,
            154px
        );

    font-weight: 500;

    line-height:
        0.84;

    letter-spacing:
        -0.052em;
}


/* H2 */

.project-page h2 {
    font-family:
        var(--merriweather);

    font-size:
        clamp(
            44px,
            5vw,
            72px
        );

    font-weight:
        500;

    line-height:
        0.98;

    letter-spacing:
        -0.04em;
}


/* H3 */

.project-page h3 {
    font-family:
        var(--merriweather);

    font-weight:
        500;

    line-height:
        1.15;
}


/* =========================================================
   05 — HERO
========================================================= */

.hero {
    padding-top:
        clamp(140px, 11vw, 175px);

    padding-bottom:
        clamp(72px, 6vw, 96px);
}


/* top */

.hero__top {
    display: grid;

    grid-template-columns:
        minmax(0, 1.42fr)
        minmax(300px, 0.58fr);

    align-items: end;

    gap:
        clamp(44px, 6vw, 92px);

    margin-bottom:
        clamp(42px, 4vw, 60px);
}


/* petit label avant titre */

.hero__top .eyebrow {
    margin-bottom:
        14px;
}


/* description */

.hero__description {
    max-width:
        440px;

    margin:
        0 0 4px;

    color:
        rgba(255, 255, 255, 0.72);

    font-size:
        clamp(14px, 1vw, 16px);

    line-height:
        1.8;
}


/* =========================================================
   06 — META HERO
========================================================= */

.meta-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    column-gap:
        30px;

    row-gap:
        18px;

    margin-bottom:
        28px;

    padding:
        22px 0;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.17);

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.17);
}


.meta-item {
    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 7px;
}


.meta-item span {
    color:
        rgba(255, 255, 255, 0.52);

    font-size:
        11px;

    font-weight:
        500;

    line-height:
        1.4;

    letter-spacing:
        0.09em;

    text-transform:
        uppercase;
}


.meta-item strong {
    color: #fff;

    font-size:
        14px;

    font-weight:
        500;

    line-height:
        1.45;
}


/* =========================================================
   07 — IMAGES
========================================================= */

/*
   Le navigateur doit seulement réduire les images,
   jamais les déformer.

   Pas de filter / transform / translateZ qui pourraient
   rendre certains visuels légèrement flous.
*/

.project-page img {
    max-width: 100%;
    display: block;

    image-rendering: auto;
}


.visual {
    position: relative;

    width: 100%;

    margin: 0;

    overflow: hidden;

    border-radius:
        var(--project-radius);

    background:
        transparent;
}


.visual img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;
    object-position: center;
}


/* ratio naturel */

.natural-image {
    height: auto;
}


.natural-image img {
    width: 100%;
    height: auto;

    object-fit: contain;
}


/* =========================================================
   08 — HERO VISUELS
========================================================= */

.visual--hero {
    aspect-ratio:
        1320 / 742;

    background:
        #0c0c0c;
}


.hero-grid {
    display: grid;

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

    gap:
        var(--project-gap-sm);

    margin-top:
        var(--project-gap-sm);
}


.visual--hero-secondary {
    aspect-ratio:
        656 / 410;

    background:
        #0c0c0c;
}


/* =========================================================
   09 — NAVIGATION PROJET
========================================================= */

.project-nav {
    position: sticky;

    top: 90px;

    z-index: 100;

    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(8, minmax(0, 1fr));

    background:
        rgba(0, 0, 0, 0.96);

    backdrop-filter:
        blur(16px);

    -webkit-backdrop-filter:
        blur(16px);

    border-top:
        1px solid
        rgba(255, 255, 255, 0.12);

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.17);
}


.project-nav a {
    min-height:
        72px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap:
        5px;

    padding:
        10px 8px;

    border-right:
        1px solid
        rgba(255, 255, 255, 0.09);

    color:
        rgba(255, 255, 255, 0.78);

    font-size:
        11px;

    font-weight:
        500;

    line-height:
        1.3;

    letter-spacing:
        0.04em;

    text-align:
        center;

    text-transform:
        uppercase;

    text-decoration:
        none;

    transition:
        color 0.25s ease,
        background-color 0.25s ease;
}


.project-nav a:last-child {
    border-right: none;
}


.project-nav a span {
    color:
        var(--project-red);

    font-size:
        10px;

    line-height:
        1;
}


.project-nav a:hover {
    color: #fff;

    background:
        rgba(255, 255, 255, 0.055);
}


/* =========================================================
   10 — OFFSET ANCRES
========================================================= */

#concept,
#research,
#identity,
#colors,
#photo,
#applications,
#brand,
#website {

    scroll-margin-top:
        80px;
}


/* =========================================================
   11 — TITRES DE SECTION
========================================================= */

.section-header {
    display: grid;

    grid-template-columns:
        28px
        minmax(0, 1fr);

    column-gap:
        18px;

    align-items: start;

    margin-bottom:
        clamp(42px, 4vw, 58px);

    padding-top:
        20px;

    border-top:
        1px solid;
}


.section--dark
.section-header {

    border-top-color:
        rgba(255, 255, 255, 0.16);
}


.section--light
.section-header {

    border-top-color:
        rgba(0, 0, 0, 0.15);
}


.section-number {
    padding-top:
        9px;

    color:
        var(--project-red);

    font-size:
        13px;

    font-weight:
        500;

    line-height:
        1;
}


.section-header .eyebrow {
    margin-bottom:
        8px;
}


/* =========================================================
   12 — INTRO SECTIONS
========================================================= */

.section-intro {
    width:
        min(100%, 660px);

    margin:
        -12px
        0
        clamp(38px, 4vw, 54px)
        46px;

    font-size:
        clamp(14px, 1vw, 16px);

    line-height:
        1.8;

    opacity:
        1;
}


.section--light
.section-intro {

    color:
        var(--text-muted-light);
}


.section--dark
.section-intro {

    color:
        var(--text-muted-dark);
}


/* =========================================================
   13 — CONCEPT
========================================================= */

.concept-gallery {
    width:
        min(100%, 1180px);

    margin:
        0 auto;

    display: flex;

    gap:
        18px;

    overflow-x:
        auto;

    padding:
        0 0 14px;

    scroll-snap-type:
        x mandatory;

    overscroll-behavior-inline:
        contain;

    scrollbar-width:
        thin;

    scrollbar-color:
        rgba(255, 255, 255, 0.32)
        rgba(255, 255, 255, 0.08);
}


.concept-slide {
    flex:
        0 0
        100%;

    margin: 0;

    aspect-ratio:
        16 / 9;

    overflow: hidden;

    border-radius:
        var(--project-radius);

    background:
        #f2f2f2;

    scroll-snap-align:
        start;
}


.concept-slide img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;
}


/* =========================================================
   14 — VEILLE
========================================================= */

.research-grid {
    display: grid;

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

    gap:
        clamp(14px, 1.5vw, 20px);

    align-items: start;
}


.research-axis {
    min-width: 0;

    display: flex;

    flex-direction: column;

    gap:
        12px;
}


.research-axis__visuals {
    display: flex;

    flex-direction: column;

    gap:
        10px;
}


.visual--research {
    aspect-ratio:
        16 / 9;

    background:
        #cacaca;
}


/* =========================================================
   15 — FOOTER VEILLE
========================================================= */

.research-axis__footer {
    min-height:
        72px;

    display: grid;

    grid-template-columns:
        28px
        minmax(0, 1fr)
        94px;

    align-items: center;

    column-gap:
        11px;

    padding-top:
        14px;

    border-top:
        1px solid
        rgba(0, 0, 0, 0.18);
}


.research-axis__number {
    grid-column: 1;

    color:
        rgba(0, 0, 0, 0.52);

    font-size:
        11px;

    line-height:
        1;
}


.research-axis__title {
    grid-column: 2;

    margin: 0;

    font-family:
        var(--merriweather);

    font-size:
        clamp(18px, 1.55vw, 22px);

    font-weight:
        500;

    line-height:
        1.15;

    white-space:
        nowrap;
}


.research-axis__badge-space {
    grid-column: 3;
}


.research-axis__badge {
    grid-column: 3;

    justify-self: end;

    padding:
        8px 11px;

    border-radius:
        999px;

    background:
        var(--project-red);

    color: #fff;

    font-size:
        9px;

    font-weight:
        600;

    line-height:
        1;

    letter-spacing:
        0.04em;

    white-space:
        nowrap;
}


.research-axis--selected
.research-axis__footer {

    border-top-color:
        var(--project-red);
}


/* =========================================================
   16 — CHOIX VEILLE
========================================================= */

.research-choice {
    width:
        min(100%, 640px);

    margin:
        clamp(58px, 6vw, 82px)
        auto
        0;

    padding-top:
        30px;

    border-top:
        1px solid
        rgba(0, 0, 0, 0.17);

    text-align:
        center;
}


.research-choice .eyebrow {
    margin-bottom:
        12px;
}


.research-choice h3 {
    margin:
        0 0 18px;

    font-size:
        clamp(30px, 3vw, 40px);
}


.research-choice p:last-child {
    margin: 0;

    color:
        var(--text-muted-light);

    font-size:
        clamp(14px, 1vw, 16px);

    line-height:
        1.8;
}


/* =========================================================
   17 — SOUS-SECTIONS
========================================================= */

.subsection {
    margin-top:
        var(--subsection-space);

    padding-top:
        32px;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.15);
}


.subsection:first-of-type {
    margin-top: 0;

    padding-top: 0;

    border-top: none;
}


.subsection-header {
    display: flex;

    align-items: baseline;

    gap:
        16px;

    margin-bottom:
        26px;
}


.subsection-header span {
    flex: 0 0 auto;

    color:
        var(--project-red);

    font-size:
        11px;

    font-weight:
        500;
}


.subsection-header h3 {
    margin: 0;

    font-size:
        clamp(26px, 2.25vw, 32px);
}


/* =========================================================
   18 — GRILLES
========================================================= */

.grid {
    display: grid;

    gap:
        var(--project-gap-sm);
}


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


/* =========================================================
   19 — LOGOS
========================================================= */

.visual--logo {
    aspect-ratio:
        430 / 300;

    background:
        #f2f2f2;
}


.visual--construction {
    aspect-ratio:
        1 / 1;

    background:
        #f2f2f2;
}


.visual--identity-master {
    aspect-ratio:
        1320 / 600;

    background:
        #0c0c0c;
}



/* =========================================================
   19.5 — TEXTES IDENTITÉ / EXPLICATIONS
========================================================= */

.identity-text {
    width: min(100%, 720px);

    margin:
        0
        0
        30px
        46px;

    color:
        rgba(255, 255, 255, 0.68);
}


.identity-text--wide {
    width: min(100%, 820px);
}


.identity-text p {
    margin: 0;

    font-family:
        var(--poppins);

    font-size:
        clamp(14px, 1vw, 16px);

    line-height:
        1.8;
}


.identity-text p + p {
    margin-top:
        16px;
}


/* SIGNIFICATION DU LOGO */

.logo-meaning {
    display: grid;

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

    gap:
        14px;
}


.logo-meaning__item {
    min-height:
        260px;

    display:
        flex;

    flex-direction:
        column;

    padding:
        24px;

    border:
        1px solid
        rgba(255, 255, 255, 0.16);

    border-radius:
        var(--project-radius);

    background:
        rgba(255, 255, 255, 0.025);
}


.logo-meaning__number {
    color:
        var(--project-red);

    font-size:
        11px;

    font-weight:
        500;
}


.logo-meaning__item h4 {
    margin:
        auto
        0
        12px;

    padding-top:
        42px;

    font-family:
        var(--merriweather);

    font-size:
        clamp(22px, 2vw, 28px);

    font-weight:
        500;

    line-height:
        1.1;
}


.logo-meaning__item p {
    margin:
        0;

    color:
        rgba(255, 255, 255, 0.64);

    font-family:
        var(--poppins);

    font-size:
        14px;

    line-height:
        1.75;
}


/* EXPLICATION PHOTO */

.photo-explanation {
    width:
        min(100%, 820px);

    display:
        grid;

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

    gap:
        32px;

    margin:
        36px
        0
        0
        46px;

    padding-top:
        24px;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.14);
}


.photo-explanation p {
    margin:
        0;

    color:
        rgba(255, 255, 255, 0.65);

    font-size:
        14px;

    line-height:
        1.75;
}


/* INTRO APPLICATIONS */

.application-intro {
    width:
        min(100%, 690px);

    display:
        grid;

    grid-template-columns:
        150px
        minmax(0, 1fr);

    gap:
        24px;

    margin-bottom:
        26px;
}


.application-intro--spaced {
    margin-top:
        52px;
}


.application-intro span {
    color:
        rgba(0, 0, 0, 0.5);

    font-size:
        10px;

    font-weight:
        600;

    line-height:
        1.5;

    letter-spacing:
        0.08em;
}


.application-intro p {
    margin:
        0;

    color:
        rgba(0, 0, 0, 0.67);

    font-size:
        14px;

    line-height:
        1.75;
}


/* EXPLICATION BRAND SYSTEM */

.brand-explanation {
    width:
        min(100%, 820px);

    display:
        grid;

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

    gap:
        32px;

    margin:
        -8px
        0
        40px
        46px;
}


.brand-explanation p {
    margin:
        0;

    color:
        rgba(255, 255, 255, 0.64);

    font-size:
        14px;

    line-height:
        1.75;
}


/* =========================================================
   20 — PALETTE
========================================================= */

.colors-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap:
        var(--project-gap-sm);
}


.color-card {
    min-height:
        clamp(280px, 25vw, 340px);

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    padding:
        clamp(18px, 1.8vw, 24px);

    border-radius:
        var(--project-radius);

    color:
        #fff;
}


.color-card > span {
    margin-bottom:
        6px;

    font-size:
        11px;

    font-weight:
        500;

    line-height:
        1.4;

    letter-spacing:
        0.06em;

    opacity:
        0.8;
}


.color-card > strong {
    font-family:
        var(--merriweather);

    font-size:
        clamp(22px, 2vw, 28px);

    font-weight:
        500;

    line-height:
        1.2;
}


.color-card > div {
    margin-top:
        28px;

    padding-top:
        15px;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.3);
}


.color-card p {
    margin:
        5px 0 0;

    font-size:
        12px;

    line-height:
        1.5;
}


.color-card--blue {
    background:
        var(--virtus-blue);
}


.color-card--black {
    background:
        #111111;
}


.color-card--pink {
    background:
        var(--virtus-pink);
}


.color-card--gradient {
    background:
        linear-gradient(
            135deg,
            var(--virtus-blue),
            var(--virtus-pink)
        );
}


/* =========================================================
   21 — PHOTO
========================================================= */

.visual--photo {
    aspect-ratio:
        430 / 560;

    background:
        #111;
}


/* =========================================================
   22 — APPLICATIONS
========================================================= */

/*
   Tes fichiers d'affiches font environ 381.61 × 540.

   Important :
   on NE LES ÉTIRE PAS jusqu'à 430px.

   Sur desktop, chaque colonne est donc limitée à
   381.61px afin que le navigateur ne grossisse pas le fichier.
*/

.applications-posters {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 381.61px)
        );

    justify-content:
        space-between;

    gap:
        clamp(22px, 3vw, 60px);

    width: 100%;
}


.visual--poster {
    width: 100%;

    max-width:
        381.61px;

    aspect-ratio:
        381.61 / 540;

    justify-self:
        center;
}


.applications-two {
    display: grid;

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

    gap:
        var(--project-gap-sm);

    margin-top:
        var(--project-gap-sm);
}


.applications-two .visual {
    min-width: 0;
}


.visual--application-wide {
    margin-top:
        var(--project-gap-sm);

    aspect-ratio:
        1320 / 520;
}


/* =========================================================
   23 — BRAND SYSTEM
========================================================= */

.brand-grid {
    display: grid;

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

    gap:
        14px;

    align-items: start;
}


.brand-card {
    width: 100%;

    margin: 0;

    overflow: hidden;

    border-radius:
        var(--project-radius);
}


.brand-card img {
    width: 100%;
    height: auto;

    display: block;

    object-fit: contain;
}


/*
   IMPORTANT :
   réglage validé ensemble.
   Le quatrième mockup remonte de 90px.
*/

.brand-card:last-child {
    transform:
        translateY(-90px);
}


/* =========================================================
   24 — SITE INTERNET
========================================================= */

.website-list {
    display: flex;

    flex-direction: column;

    gap:
        clamp(46px, 5vw, 70px);
}


.website-item {
    width: 100%;
}


.website-item__label {
    display: flex;

    align-items: center;

    gap:
        12px;

    margin-bottom:
        12px;

    padding-bottom:
        10px;

    border-bottom:
        1px solid
        rgba(0, 0, 0, 0.12);
}


.website-item__label span {
    color:
        var(--project-red);

    font-size:
        11px;

    font-weight:
        500;
}


.website-item__label strong {
    font-size:
        12px;

    font-weight:
        500;

    line-height:
        1.4;

    letter-spacing:
        0.07em;

    text-transform:
        uppercase;
}


/* =========================================================
   25 — FIN DU PROJET
========================================================= */

.project-end {
    padding:
        clamp(90px, 8vw, 125px)
        var(--project-side);

    background:
        var(--project-black);

    color: #fff;

    text-align:
        center;
}


.project-end .eyebrow {
    margin-bottom:
        14px;
}


.project-end h2 {
    margin:
        0 0
        clamp(34px, 3vw, 44px);

    font-family:
        var(--merriweather);

    font-size:
        clamp(
            42px,
            5vw,
            70px
        );

    font-weight:
        500;

    line-height:
        0.98;

    letter-spacing:
        -0.035em;
}


.project-end__actions {
    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap:
        12px;
}


.project-end__actions a {
    min-height:
        50px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding:
        0 24px;

    border:
        1px solid
        rgba(255, 255, 255, 0.3);

    border-radius:
        999px;

    color: #fff;

    font-size:
        11px;

    font-weight:
        500;

    line-height:
        1;

    letter-spacing:
        0.04em;

    text-decoration:
        none;

    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}


.project-end__actions a:hover {
    background:
        var(--project-red);

    border-color:
        var(--project-red);

    transform:
        translateY(-2px);
}


/* =========================================================
   26 — GRAND ÉCRAN
========================================================= */

@media (min-width: 1500px) {

    /*
       Empêche la page de devenir trop gigantesque
       sur des écrans très larges.
    */

    .container {
        max-width:
            var(--project-width);
    }

}


/* =========================================================
   27 — PETIT DESKTOP / TABLETTE PAYSAGE
========================================================= */

@media (max-width: 1100px) {

    :root {
        --project-side: 5%;
    }


    /* HERO */

    .hero__top {
        grid-template-columns:
            minmax(0, 1.2fr)
            minmax(280px, 0.8fr);

        gap:
            40px;
    }


    /* NAV */

    .project-nav {
        display: flex;

        overflow-x: auto;

        overscroll-behavior-inline:
            contain;

        scrollbar-width:
            none;
    }


    .project-nav::-webkit-scrollbar {
        display: none;
    }


    .project-nav a {
        flex:
            0 0
            150px;
    }


    /* VEILLE */

    .research-grid {
        gap:
            12px;
    }


    .research-axis__footer {
        grid-template-columns:
            24px
            minmax(0, 1fr)
            auto;

        column-gap:
            8px;
    }


    .research-axis__title {
        font-size:
            18px;
    }


    .research-axis__badge {
        padding:
            7px 8px;

        font-size:
            8px;
    }


    /* APPLICATIONS */

    .applications-posters {
        justify-content:
            center;

        gap:
            22px;
    }

}


/* =========================================================
   28 — TABLETTE
========================================================= */

@media (max-width: 820px) {

    :root {
        --project-side: 5.5%;
    }


    .section {
        padding:
            82px 0;
    }


    /* HERO */

    .hero {
        padding-top:
            120px;

        padding-bottom:
            70px;
    }


    .hero__top {
        grid-template-columns:
            1fr;

        gap:
            26px;

        margin-bottom:
            38px;
    }


    .hero__description {
        max-width:
            620px;
    }


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

        row-gap:
            22px;
    }


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


    /* TITRES */

    .section-intro {
        margin-left:
            46px;
    }


    /* VEILLE */

    .research-grid {
        grid-template-columns:
            1fr;

        gap:
            42px;
    }


    .research-axis {
        gap:
            10px;
    }


    .research-axis__visuals {
        display: grid;

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

        gap:
            10px;
    }


    .research-axis__footer {
        grid-template-columns:
            28px
            minmax(0, 1fr)
            auto;
    }


    .research-axis__title {
        font-size:
            22px;

        white-space:
            normal;
    }


    .research-axis__badge {
        font-size:
            9px;

        padding:
            8px 10px;
    }


    /* LOGO / CONSTRUCTION */

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


    .grid--3 > :last-child {
        grid-column:
            1 / -1;

        width:
            calc(50% - 6px);

        justify-self:
            center;
    }

    .project-nav {
    top: 72px;
    }


    /* PALETTE */

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


    /* APPLICATIONS */

    .applications-posters {
        grid-template-columns:
            repeat(2, minmax(0, 381.61px));

        justify-content:
            center;
    }


    .applications-posters
    .visual--poster:last-child {

        grid-column:
            1 / -1;

        justify-self:
            center;
    }


    .applications-two {
        grid-template-columns:
            1fr;
    }


    /* TEXTES EXPLICATIFS */

    .identity-text {
        margin-left:
            46px;
    }


    .logo-meaning {
        grid-template-columns:
            1fr;
    }


    .logo-meaning__item {
        min-height:
            auto;
    }


    .logo-meaning__item h4 {
        margin-top:
            0;
    }


    .photo-explanation,
    .brand-explanation {

        width:
            calc(100% - 46px);

        margin-left:
            46px;
    }


    .application-intro {
        grid-template-columns:
            120px
            minmax(0, 1fr);
    }


    /* BRAND */

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

        gap:
            10px;
    }


    /*
       Le -60px est uniquement destiné
       à la composition desktop.
       Sur tablette on évite les chevauchements.
    */

    .brand-card:last-child {
        transform:
            none;
    }

}


/* =========================================================
   29 — MOBILE
========================================================= */

@media (max-width: 560px) {

    :root {
        --project-side: 6%;
    }


    .section {
        padding:
            68px 0;
    }


    /* TYPO */

    .eyebrow {
        font-size:
            10px;

        letter-spacing:
            0.085em;
    }


    .project-page h1 {
        font-size:
            clamp(
                58px,
                19vw,
                78px
            );
    }


    .project-page h2 {
        font-size:
            clamp(
                36px,
                11vw,
                46px
            );

        line-height:
            1;
    }


    /* HERO */

    .hero {
        padding-top:
            105px;

        padding-bottom:
            56px;
    }


    .hero__top {
        gap:
            24px;

        margin-bottom:
            34px;
    }


    .hero__description {
        font-size:
            14px;

        line-height:
            1.7;
    }


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

        gap:
            18px 16px;

        padding:
            18px 0;

        margin-bottom:
            18px;
    }


    .meta-item strong {
        font-size:
            13px;
    }


    /* NAV */

    .project-nav a {
        flex:
            0 0
            132px;

        min-height:
            62px;

        font-size:
            10px;
    }


    /* TITRES */

    .section-header {
        grid-template-columns:
            22px
            minmax(0, 1fr);

        column-gap:
            12px;

        margin-bottom:
            34px;

        padding-top:
            16px;
    }


    .section-number {
        padding-top:
            7px;

        font-size:
            11px;
    }


    .section-intro {
        margin:
            -6px
            0
            34px
            34px;

        width:
            calc(100% - 34px);

        font-size:
            14px;

        line-height:
            1.72;
    }


    /* CONCEPT */

    .concept-gallery {
        width:
            100%;

        gap:
            10px;
    }


    /* VEILLE */

    .research-grid {
        gap:
            38px;
    }


    .research-axis__visuals {
        grid-template-columns:
            1fr;

        gap:
            8px;
    }


    .research-axis__footer {
        min-height:
            62px;

        grid-template-columns:
            24px
            minmax(0, 1fr)
            auto;

        padding-top:
            12px;
    }


    .research-axis__title {
        font-size:
            19px;
    }


    .research-axis__badge {
        padding:
            7px 9px;

        font-size:
            8px;
    }


    .research-choice {
        margin-top:
            48px;

        padding-top:
            26px;
    }


    .research-choice h3 {
        font-size:
            30px;
    }


    .research-choice p:last-child {
        font-size:
            14px;
    }


    /* SOUS-SECTIONS */

    .subsection {
        margin-top:
            52px;

        padding-top:
            25px;
    }


    .subsection-header {
        margin-bottom:
            20px;
    }


    .subsection-header h3 {
        font-size:
            25px;
    }


    /* GRILLES */

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


    .grid--3 > :last-child {
        grid-column:
            auto;

        width:
            100%;
    }


    /* PALETTE */

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


    .color-card {
        min-height:
            230px;
    }


    /* APPLICATIONS */

    .applications-posters {
        grid-template-columns:
            1fr;

        gap:
            16px;
    }


    .applications-posters
    .visual--poster {

        width:
            min(100%, 381.61px);

        max-width:
            381.61px;

        justify-self:
            center;
    }


    .applications-posters
    .visual--poster:last-child {

        grid-column:
            auto;
    }


    .applications-two {
        grid-template-columns:
            1fr;

        gap:
            10px;

        margin-top:
            16px;
    }


    .visual--application-wide {
        margin-top:
            10px;
    }


    /* TEXTES EXPLICATIFS */

    .identity-text {
        width:
            calc(100% - 34px);

        margin:
            0
            0
            26px
            34px;
    }


    .identity-text p {
        font-size:
            14px;

        line-height:
            1.72;
    }


    .logo-meaning {
        grid-template-columns:
            1fr;

        gap:
            10px;
    }


    .logo-meaning__item {
        padding:
            20px;
    }


    .photo-explanation,
    .brand-explanation {

        width:
            calc(100% - 34px);

        grid-template-columns:
            1fr;

        gap:
            16px;

        margin:
            28px
            0
            0
            34px;
    }


    .brand-explanation {
        margin-bottom:
            30px;
    }


    .application-intro {
        width:
            100%;

        grid-template-columns:
            1fr;

        gap:
            10px;

        margin-bottom:
            22px;
    }


    .application-intro--spaced {
        margin-top:
            38px;
    }


    /* BRAND */

    .brand-grid {
        grid-template-columns:
            1fr;

        gap:
            12px;
    }


    .brand-card:last-child {
        transform:
            none;
    }


    /* SITE */

    .website-list {
        gap:
            42px;
    }


    /* FIN */

    .project-end {
        padding:
            80px
            var(--project-side);
    }


    .project-end__actions {
        flex-direction:
            column;

        width:
            min(100%, 280px);

        margin:
            0 auto;
    }


    .project-end__actions a {
        width:
            100%;
    }

}


/* =========================================================
   30 — TRÈS PETIT MOBILE
========================================================= */

@media (max-width: 380px) {

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


    .project-nav a {
        flex-basis:
            120px;
    }


    .research-axis__footer {
        grid-template-columns:
            22px
            minmax(0, 1fr);

        row-gap:
            10px;
    }


    .research-axis__badge {
        grid-column:
            2;

        justify-self:
            start;
    }


    .research-axis__badge-space {
        display: none;
    }

}


/* =========================================================
   31 — ACCESSIBILITÉ / MOUVEMENT RÉDUIT
========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior:
            auto;
    }


    .project-nav a,
    .project-end__actions a {

        transition:
            none;
    }

}

/* =========================================================
   FIX STICKY NAVIGATION PROJET
========================================================= */

/* Le CSS global met main en overflow:hidden,
   ce qui empêche le sticky de fonctionner correctement. */

main.project-page {
    overflow: visible !important;
    overflow-x: clip !important;
}


/* Navigation projet toujours visible sous le header */

.project-nav {
    position: sticky !important;

    top: 78px !important;

    z-index: 5000 !important;
}
/* =========================================================
   COHÉRENCE DA — PAGE PROJET V2
========================================================= */
:root {
    --project-width: var(--content-width);
    --project-side: var(--content-gutter);
}

.project-page {
    background: var(--surface-dark);
}

.project-page .container {
    width: min(calc(100% - (var(--content-gutter) * 2)), var(--content-width));
}

.project-page .section {
    padding-top: var(--section-space);
    padding-bottom: var(--section-space);
}

.visual,
.concept-slide,
.brand-card,
.website-card {
    border-radius: 0;
}

.project-nav {
    border-top-color: rgba(255, 255, 255, .12);
    border-bottom-color: rgba(255, 255, 255, .14);
}

.section-header {
    padding-top: 22px;
}

.section-intro {
    line-height: 1.75;
}


/* =========================================================
   FINITION V4 — IMAGE DE FIN PLEINE LARGEUR
========================================================= */
.project-final-image {
    width: 100vw;
    max-width: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #000;
}

.project-final-image img {
    display: block;
    width: 100vw;
    max-width: none;
    height: auto;
    margin: 0;
    object-fit: cover;
}

/* =========================================================
   FINITION V5 — FIN DE PROJET
========================================================= */
.project-end { border-top: 1px solid rgba(255,255,255,.12); }
.project-final-image { width: 100vw !important; margin-left: calc(50% - 50vw) !important; }
.project-final-image img { width: 100% !important; min-width: 100%; }

/* =========================================================
   FINITION V6 — CARROUSEL CONCEPT + COUCHES
========================================================= */
.project-page .interactive-layer {
    z-index: 0;
}

.project-page .hero > *:not(.interactive-layer),
.project-page .section > *:not(.interactive-layer) {
    position: relative;
    z-index: 2;
}

.concept-gallery {
    scrollbar-width: none;
    padding-bottom: 0;
}

.concept-gallery::-webkit-scrollbar {
    display: none;
}

.concept-carousel-ui {
    width: min(100%, 1180px);
    margin: 18px auto 0;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 20px;
}

.concept-carousel-ui__arrows {
    display: flex;
    gap: 9px;
}

.concept-carousel-ui__arrow {
    width: 46px;
    height: 46px;
    border: 1px solid rgba(255,255,255,.32);
    border-radius: 50%;
    background: transparent;
    color: #fff;
    display: grid;
    place-items: center;
    font: 500 20px/1 var(--poppins);
    cursor: none;
    transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}

.concept-carousel-ui__arrow:hover {
    background: #fff;
    color: #000;
    border-color: #fff;
    transform: scale(1.04);
}

.concept-carousel-ui__progress {
    position: relative;
    height: 1px;
    background: rgba(255,255,255,.18);
    overflow: hidden;
}

.concept-carousel-ui__progress span {
    position: absolute;
    inset: 0 auto 0 0;
    width: calc(100% / 7);
    background: rgb(var(--couleur-rouge));
    transform: translateX(0);
    transition: transform .35s cubic-bezier(.2,.7,.2,1);
}

.concept-carousel-ui__status {
    min-width: 74px;
    text-align: right;
    color: rgba(255,255,255,.58);
    font-size: 11px;
    letter-spacing: .14em;
}

.concept-carousel-ui__status strong {
    color: #fff;
    font-weight: 500;
}

.concept-carousel-ui__hint {
    grid-column: 1 / -1;
    margin: -7px 0 0;
    text-align: right;
    color: rgba(255,255,255,.38);
    font-size: 9px;
    letter-spacing: .14em;
    text-transform: uppercase;
}

@media (max-width: 700px) {
    .concept-carousel-ui {
        grid-template-columns: auto 1fr auto;
        gap: 12px;
    }
    .concept-carousel-ui__arrow { width: 40px; height: 40px; }
    .concept-carousel-ui__hint { display: none; }
}

/* =========================================================
   FINITION V7 — PARTICULES SUR L'ENSEMBLE DU PROJET
========================================================= */
.project-page > .section,
.project-page > .project-end {
    position: relative;
    isolation: isolate;
}

.project-page > .section .interactive-layer,
.project-page > .project-end .interactive-layer {
    z-index: 0;
}

.project-page > .project-end > *:not(.interactive-layer) {
    position: relative;
    z-index: 2;
}

/* =========================================================
   V12 — MOBILE SANS REVEAL AU SCROLL
========================================================= */
@media (max-width: 800px) {
    .project-page .project-reveal,
    .project-page .project-reveal.is-project-visible,
    .project-page [class*="project-reveal--delay"] {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
        animation: none !important;
    }
}

.site-admin-shortcut{display:none!important;}