/* ======================================================
   FRANCIS HUBIN — SCULPTURES
====================================================== */

.page-sculptures {
    background: #f7f5f2;
    color: #302d2a;
}

.sculptures-main {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}


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

.sculptures-hero {
    position: relative;

    width: 100%;
    height: 78vh;
    min-height: 580px;

    overflow: hidden;

    background: #171614;
}

.sculptures-hero > img {
    width: 100%;
    height: 100%;

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

.sculptures-hero-voile {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(10, 9, 8, 0.86) 0%,
            rgba(10, 9, 8, 0.28) 45%,
            rgba(10, 9, 8, 0.04) 75%
        );
}

.sculptures-hero-texte {
    position: absolute;
    z-index: 2;

    right: 7vw;
    bottom: 7vw;
    left: 7vw;

    max-width: 900px;

    color: white;
}

.sculptures-hero-texte h1 {
    margin: 0 0 18px;

    color: white;

    font-size: clamp(48px, 8vw, 94px);
    font-weight: normal;
    line-height: 1;
}

.sculptures-hero-texte > p:last-child {
    max-width: 700px;
    margin: 0;

    color: white;

    font-size: clamp(17px, 2vw, 23px);
    line-height: 1.7;
}

.sur-titre-clair {
    margin: 0 0 12px;

    color: #eee5dc;

    font-size: 12px;
    letter-spacing: 5px;
    text-transform: uppercase;
}


/* ======================================================
   TITRES
====================================================== */

.titre-section {
    max-width: 820px;

    margin: 0 auto 65px;

    text-align: center;
}

.titre-section h2,
.titre-oeuvre-majeure h2 {
    margin: 0 0 18px;

    color: #302d2a;

    font-size: clamp(40px, 6vw, 66px);
    font-weight: normal;
    line-height: 1.08;
}

.titre-section > p:not(.sur-titre):not(.sur-titre-clair) {
    color: #67615b;

    font-size: 18px;
    line-height: 1.8;
}

.matiere {
    color: #8a684d;

    font-size: 16px;
    font-style: italic;
}

.mention {
    color: #82766b;

    font-size: 14px;
    font-style: italic;
}

.prix {
    color: #8a684d;

    font-size: 18px;
    font-weight: bold;
}


/* ======================================================
   INDICATION : PHOTOS CLIQUABLES
====================================================== */

.indication-clic {
    max-width: 760px;

    margin: 0 auto 55px;

    color: #756d65;

    font-size: 15px;
    font-style: italic;
    line-height: 1.6;

    text-align: center;
}


/* ======================================================
   LIENS VERS LES PAGES DÉTAILLÉES
====================================================== */

.lien-oeuvre,
.lien-realisation {
    display: inline-block;

    margin-top: 18px;
    padding: 11px 19px;

    color: #6f523d;

    border: 1px solid #8a684d;

    font-size: 14px;
    text-decoration: none;

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

.lien-oeuvre:hover,
.lien-realisation:hover {
    color: white;
    background: #8a684d;

    transform: translateY(-2px);
}


/* ======================================================
   NOUVELLES ASSUÉTUDES
====================================================== */

.oeuvre-majeure {
    max-width: 1260px;

    margin: 0 auto;

    padding: 80px 35px 30px;
}

/* Van Gogh juste après Les Nouvelles Assuétudes */

.oeuvre-majeure + .section-claire {
    padding-top: 55px;
}

.titre-oeuvre-majeure {
    margin-bottom: 50px;

    text-align: center;
}

.grande-photo {
    display: block;

    width: 100%;
    max-width: 1100px;

    margin: 0 auto;

    overflow: hidden;

    background: #111;
}

.grande-photo img {
    display: block;

    width: 100%;
    height: auto;

    transition: transform 0.5s ease;
}

.grande-photo:hover img {
    transform: scale(1.02);
}

.texte-oeuvre {
    max-width: 800px;

    margin: 55px auto;

    color: #57514b;

    font-size: 18px;
    line-height: 1.85;
}

.texte-oeuvre p {
    margin: 0 0 17px;
}

.vues-secondaires {
    display: grid;

    gap: 24px;

    max-width: 1000px;

    margin: 0 auto;
}

.trois-vues {
    grid-template-columns: repeat(2, 1fr);
}

.vues-secondaires a {
    display: flex;

    align-items: center;
    justify-content: center;

    overflow: hidden;

    background: #ded9d2;
}

.vues-secondaires img {
    width: 100%;
    height: 430px;

    object-fit: contain;

    transition: transform 0.4s ease;
}

.vues-secondaires a:hover img {
    transform: scale(1.025);
}

.video-oeuvre {
    max-width: 900px;

    margin: 55px auto 0;

    padding: 28px;

    background: #24211e;
}

.video-oeuvre h3 {
    margin: 0 0 20px;

    color: white;

    font-size: 22px;
    font-weight: normal;
}

.video-oeuvre video {
    display: block;

    width: 100%;
}


/* ======================================================
   SECTIONS CLAIRES
====================================================== */

.section-claire,
.section-projets,
.section-petites,
.section-etudes {
    padding: 110px 35px 130px;
}

.section-claire {
    background: #eeeae5;
}


/* ======================================================
   VAN GOGH
====================================================== */

.van-gogh-principal {
    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(300px, 0.85fr);

    gap: 55px;

    max-width: 1150px;

    margin: 0 auto 55px;

    align-items: center;
}

.van-gogh-principal > a {
    display: block;

    background: #171614;
}

.van-gogh-principal img {
    display: block;

    width: 100%;
    max-height: 700px;

    object-fit: contain;
}

.texte-technique h3 {
    margin: 0 0 22px;

    font-size: 30px;
    font-weight: normal;
}

.texte-technique p {
    margin: 0 0 16px;

    color: #5e5852;

    line-height: 1.8;
}

.mini-galerie {
    display: grid;

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

    gap: 15px;

    max-width: 1100px;

    margin: 0 auto 90px;
}

.mini-galerie a {
    display: flex;

    height: 280px;

    align-items: center;
    justify-content: center;

    overflow: hidden;

    background: #d8d3cd;
}

.mini-galerie img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    transition: transform 0.4s ease;
}

.mini-galerie a:hover img {
    transform: scale(1.03);
}

.van-gogh-mousse {
    display: grid;

    grid-template-columns:
        minmax(250px, 0.75fr)
        minmax(0, 1.25fr);

    gap: 50px;

    max-width: 1000px;

    margin: 0 auto;

    padding-top: 70px;

    border-top:
        1px solid rgba(48, 45, 42, 0.18);

    align-items: center;
}

.van-gogh-mousse img {
    display: block;

    width: 100%;
    max-height: 550px;

    object-fit: contain;

    background: #171614;
}

.van-gogh-mousse h3 {
    margin: 0 0 20px;

    font-size: 34px;
    font-weight: normal;
}

.van-gogh-mousse p {
    color: #5f5953;

    line-height: 1.8;
}


/* ======================================================
   CRÉATIONS & EXPÉRIMENTATIONS
====================================================== */

.section-sombre {
    padding: 110px 35px 130px;
    background: #1e1c1a;
}

/* Bandeau titre */

.section-sombre .titre-section {
    max-width: 1100px;
    width: calc(100% - 70px);

    margin: 0 auto 55px;

    padding: 34px 30px;

    background: #75685e !important;

    border: none !important;
    box-shadow: none !important;
}

/* MATIÈRES & FORMES */

.section-sombre .titre-section .sur-titre-clair {
    color: #e1d5ca !important;
}

/* Créations & expérimentations */

.section-sombre .titre-section h2 {
    color: #ffffff !important;
}

/* Petit texte explicatif */

.section-sombre .titre-section > p:not(.sur-titre-clair) {
    color: #f0ebe6 !important;
}

/* ======================================================
   CONCEPTION & RÉALISATION
====================================================== */

.section-projets {
    background: #f7f5f2;
}

.projet {
    display: grid;

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

    gap: 55px;

    max-width: 1200px;

    margin: 0 auto 130px;

    align-items: center;
}

.projet-inverse {
    margin-bottom: 0;
}

.projet-texte h3 {
    margin: 0 0 20px;

    font-size: 42px;
    font-weight: normal;
}

.projet-texte p {
    color: #5f5953;

    line-height: 1.8;
}

.projet-images {
    display: grid;

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

    gap: 14px;
}

.projet-images a {
    display: flex;

    height: 300px;

    align-items: center;
    justify-content: center;

    overflow: hidden;

    background: #ded9d2;
}

.projet-images img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    transition: transform 0.4s ease;
}

.projet-images a:hover img {
    transform: scale(1.025);
}

.triptyque-projet {
    display: grid;

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

    gap: 12px;
}

.triptyque-projet figure {
    margin: 0;
}

.triptyque-projet a {
    display: flex;

    height: 390px;

    align-items: center;
    justify-content: center;

    overflow: hidden;

    background: #ded9d2;
}

.triptyque-projet img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}

.triptyque-projet figcaption {
    padding-top: 10px;

    color: #716a63;

    text-align: center;
}


/* ======================================================
   INSPIRATIONS
====================================================== */

.grille-inspirations {
    display: grid;

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

    gap: 40px;

    max-width: 950px;

    margin: 0 auto;
}

.carte-simple {
    padding: 25px;

    background: white;

    text-align: center;

    box-shadow:
        0 12px 35px rgba(42, 35, 30, 0.09);
}

.carte-simple > a {
    display: flex;

    height: 430px;

    align-items: center;
    justify-content: center;

    background: #ded9d2;

    overflow: hidden;
}

.carte-simple img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    transition: transform 0.35s ease;
}

.carte-simple a:hover img {
    transform: scale(1.025);
}

.carte-simple h3 {
    margin: 22px 0 10px;

    color: #302d2a;

    font-size: 25px;
    font-weight: normal;
}

.carte-simple p {
    color: #645e58;

    line-height: 1.7;
}


/* ======================================================
   PETITES PIÈCES
====================================================== */

.section-petites {
    background: #f7f5f2;
}

.petites-grille {
    display: grid;

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

    gap: 30px;

    max-width: 1100px;

    margin: 0 auto;
}

.petite-piece {
    padding: 22px;

    background: white;

    text-align: center;

    box-shadow:
        0 10px 30px rgba(42, 35, 30, 0.08);
}

.petite-piece > a {
    display: flex;

    height: 300px;

    align-items: center;
    justify-content: center;

    overflow: hidden;

    background: #ded9d2;
}

.petite-piece img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    transition: transform 0.35s ease;
}

.petite-piece a:hover img {
    transform: scale(1.025);
}

.petite-piece h3 {
    margin: 20px 0 8px;

    color: #302d2a;

    font-size: 23px;
    font-weight: normal;
}

.petite-piece p {
    color: #645e58;

    line-height: 1.65;
}


/* ======================================================
   ÉTUDES & RECHERCHES
====================================================== */

.section-etudes {
    background: #e8e3dd;
}

.groupe-etude {
    max-width: 1150px;

    margin: 0 auto 105px;
}

.groupe-etude:last-child {
    margin-bottom: 0;
}

.groupe-etude-texte {
    max-width: 720px;

    margin-bottom: 35px;
}

.groupe-etude-texte.centree {
    margin-right: auto;
    margin-left: auto;

    text-align: center;
}

.groupe-etude-texte h3 {
    margin: 0 0 15px;

    color: #302d2a;

    font-size: 32px;
    font-weight: normal;
}

.groupe-etude-texte p {
    color: #645e58;

    line-height: 1.8;
}

.etudes-images {
    display: grid;

    gap: 14px;
}

.etudes-images.quatre {
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
}

.etudes-images.anatomie {
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
}

.etudes-images a {
    display: flex;

    height: 260px;

    align-items: center;
    justify-content: center;

    overflow: hidden;

    background: #d6d0c9;
}

.etudes-images img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    transition: transform 0.35s ease;
}

.etudes-images a:hover img {
    transform: scale(1.03);
}

.groupe-etude-bas-relief {
    display: grid;

    grid-template-columns:
        minmax(250px, 0.8fr)
        minmax(0, 1.2fr);

    gap: 45px;

    align-items: center;
}

.groupe-etude-bas-relief > a {
    display: flex;

    align-items: center;
    justify-content: center;

    overflow: hidden;

    background: #d6d0c9;
}

.groupe-etude-bas-relief img {
    display: block;

    max-width: 100%;
    max-height: 550px;

    object-fit: contain;

    transition: transform 0.35s ease;
}

.groupe-etude-bas-relief a:hover img {
    transform: scale(1.025);
}


/* ======================================================
   TABLETTE
====================================================== */

@media (max-width: 1000px) {

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

    .van-gogh-principal,
    .van-gogh-mousse,
    .projet,
    .groupe-etude-bas-relief {
        grid-template-columns: 1fr;
    }

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

    .triptyque-projet {
        grid-template-columns: 1fr;
    }

    .triptyque-projet a {
        height: 430px;
    }

    .etudes-images.quatre,
    .etudes-images.anatomie {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* ======================================================
   TÉLÉPHONE
====================================================== */
@media (max-width: 650px) {

    .section-sombre .titre-section {
        width: calc(100% - 24px);

        margin-bottom: 35px;

        padding: 26px 18px;
    }

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

.oeuvre-majeure {
    padding:
        55px
        18px
        30px;
}

.oeuvre-majeure + .section-claire {
    padding-top: 40px;
}

    .sculptures-hero {
        height: 68vh;
        min-height: 500px;
    }

    .sculptures-hero-texte {
        right: 22px;
        bottom: 35px;
        left: 22px;
    }

    .sculptures-hero-texte h1 {
        font-size: clamp(42px, 12vw, 62px);
    }

    .oeuvre-majeure,
    .section-claire,
    .section-sombre,
    .section-projets,
    .section-petites,
    .section-etudes {
        padding:
            75px
            18px
            90px;
    }

    .titre-section {
        margin-bottom: 45px;
    }

    .titre-section > p:not(.sur-titre):not(.sur-titre-clair) {
        font-size: 16px;
    }

    .trois-vues,
    .grille-creations,
    .grille-inspirations,
    .petites-grille,
    .projet-images,
    .etudes-images.quatre,
    .etudes-images.anatomie {
        grid-template-columns: 1fr;
    }

    .vues-secondaires img,
    .mini-galerie a,
    .carte-sculpture > a,
    .carte-simple > a,
    .petite-piece > a,
    .projet-images a,
    .triptyque-projet a,
    .etudes-images a {
        height: auto;

        min-height: 280px;
        max-height: 520px;
    }

    .mini-galerie {
        grid-template-columns: 1fr;
    }

    .texte-oeuvre {
        font-size: 17px;
    }

    .projet {
        margin-bottom: 90px;
    }

    .projet-texte h3 {
        font-size: 34px;
    }

    .lien-oeuvre,
    .lien-realisation {
        width: 100%;

        text-align: center;
    }

}


/* ======================================================
   TRÈS PETITS ÉCRANS
====================================================== */

@media (max-width: 390px) {

    .sculptures-hero {
        min-height: 450px;
    }

    .sculptures-hero-texte h1 {
        font-size: 38px;
    }

    .titre-section h2,
    .titre-oeuvre-majeure h2 {
        font-size: 35px;
    }

}

/* Réduction de l'espace entre les grandes œuvres */

.oeuvre-majeure {
    margin-bottom: 40px;
    padding-bottom: 40px;
}

.oeuvre-majeure + .oeuvre-majeure {
    margin-top: 40px;
    padding-top: 40px;
}

@media (max-width: 700px) {

    .oeuvre-majeure {
        margin-bottom: 25px;
        padding-bottom: 25px;
    }

    .oeuvre-majeure + .oeuvre-majeure {
        margin-top: 25px;
        padding-top: 25px;
    }

}
/* ======================================================
   ESPACE ENTRE NOUVELLES ASSUÉTUDES ET VAN GOGH
====================================================== */

.oeuvre-majeure:has(+ .section-claire) {
    padding-bottom: 45px;
}

.oeuvre-majeure + .section-claire {
    padding-top: 45px;
}


/* Téléphone */

@media (max-width: 650px) {

    .oeuvre-majeure:has(+ .section-claire) {
        padding-bottom: 25px;
    }

    .oeuvre-majeure + .section-claire {
        padding-top: 35px;
    }

/* Réduction de l'espace après la section Van Gogh */

.section-claire {
    padding-bottom: 45px;
}

.section-claire + .section-sombre {
    padding-top: 55px;
}

@media (max-width: 700px) {

    .section-claire {
        padding-bottom: 30px;
    }

    .section-claire + .section-sombre {
        padding-top: 40px;
    }

}

}

/* ===== CORRECTION ESPACES ENTRE LES BLOCS ===== */

.section-claire {
    min-height: 0 !important;
    height: auto !important;
    padding-bottom: 30px !important;
}

.section-claire .texte-oeuvre {
    margin-bottom: 0 !important;
}

.section-claire .lien-oeuvre {
    margin-bottom: 0 !important;
}

.section-claire + section {
    margin-top: 0 !important;
}

/* =====================================================
   CONTRASTE — CRÉATIONS & EXPÉRIMENTATIONS
===================================================== */

.section-sombre h2,
.section-sombre h3,
.section-sombre h4 {
    color: #f2f0ec !important;
}

.section-sombre p {
    color: #ddd9d2 !important;
}

.section-sombre a {
    color: #f2f0ec;
}

/* ======================================================
   CORRECTIONS FINALES — PAGE SCULPTURES
====================================================== */


/* ------------------------------------------------------
   1. RÉDUIRE L'ESPACE ENTRE
   LES NOUVELLES ASSUÉTUDES ET VAN GOGH
------------------------------------------------------ */

.page-sculptures .oeuvre-majeure {
    margin-bottom: 0 !important;
}

.page-sculptures .oeuvre-majeure + .section-claire {
    margin-top: 0 !important;
    padding-top: 45px !important;
}


/* ------------------------------------------------------
   2. TOUS LES TITRES DOIVENT DÉFILER NORMALEMENT
   Aucun bandeau ne reste collé à l'écran
------------------------------------------------------ */

.page-sculptures .titre-section,
.page-sculptures .titre-oeuvre-majeure,
.page-sculptures .section-claire .titre-section,
.page-sculptures .section-sombre .titre-section,
.page-sculptures .section-projets .titre-section,
.page-sculptures .section-etudes .titre-section,
.page-sculptures .section-petites .titre-section {
    position: static !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    z-index: auto !important;

    transform: none !important;
}


/* ------------------------------------------------------
   3. CORRECTION DES ÉNORMES BOUTONS "DÉCOUVRIR"
   DANS "UNE FORME, PLUSIEURS VIES"
------------------------------------------------------ */

.page-sculptures .carte-simple > a.lien-oeuvre {
    display: inline-block !important;

    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin-top: 18px !important;
    padding: 11px 19px !important;

    background: transparent !important;

    color: #6f523d !important;

    border: 1px solid #8a684d !important;

    text-decoration: none !important;
}


/* Survol du bouton */

.page-sculptures .carte-simple > a.lien-oeuvre:hover {
    background: #8a684d !important;
    color: #ffffff !important;
}


/* ------------------------------------------------------
   4. LES LIENS-PHOTOS DES CARTES GARDENT
   LEUR GRANDE TAILLE NORMALE
------------------------------------------------------ */

.page-sculptures .carte-simple > a:not(.lien-oeuvre) {
    display: flex;

    width: 100%;
    height: 430px;

    align-items: center;
    justify-content: center;

    overflow: hidden;

    background: #ded9d2;
}


/* ------------------------------------------------------
   TÉLÉPHONE
------------------------------------------------------ */

@media (max-width: 650px) {

    .page-sculptures .oeuvre-majeure + .section-claire {
        padding-top: 30px !important;
    }

    .page-sculptures .carte-simple > a:not(.lien-oeuvre) {
        height: auto;
        min-height: 280px;
        max-height: 520px;
    }

}

/* ======================================================
   CORRECTIONS PAGE SCULPTURES
   Espacements + titres qui restent fixes
====================================================== */


/* ------------------------------------------------------
   1. Réduire l'espace entre
   Nouvelles Assuétudes et Van Gogh
------------------------------------------------------ */

.oeuvre-majeure + .section-claire {
    margin-top: 0 !important;
    padding-top: 45px !important;
}

.oeuvre-majeure {
    margin-bottom: 0 !important;
    padding-bottom: 40px !important;
}


/* ------------------------------------------------------
   2. Empêcher les bandeaux de rester fixes au défilement
------------------------------------------------------ */

.page-sculptures .titre-section,
.page-sculptures .titre-oeuvre-majeure,
.page-sculptures .section-claire .titre-section,
.page-sculptures .section-sombre .titre-section {
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    z-index: auto !important;
}


/* ------------------------------------------------------
   Version téléphone
------------------------------------------------------ */

@media (max-width: 650px) {

    .oeuvre-majeure {
        padding-bottom: 25px !important;
    }

    .oeuvre-majeure + .section-claire {
        padding-top: 30px !important;
    }

}