/* =========================================================
   APPROCHE SIGNATURE — PAGE ÉDITORIALE MARIAGE
   Standalone page CSS
========================================================= */

.signature-page{background:#f7f4ee;color:#171411;overflow:hidden}
.signature-page *{box-sizing:border-box}

/* HERO -------------------------------------------------- */
.signature-hero{position:relative;height:min(88vh,960px);min-height:680px;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden}
.signature-hero .experience-hero-image{position:absolute;inset:0}
.signature-hero .experience-hero-image img{width:100%;height:100%;object-fit:cover;object-position:center center;animation:signatureHeroZoom 22s ease-in-out infinite alternate}
@keyframes signatureHeroZoom{from{transform:scale(1)}to{transform:scale(1.045)}}
.signature-hero .experience-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.22) 0%,rgba(0,0,0,.06) 40%,rgba(0,0,0,.46) 100%)}
.signature-hero .experience-content{position:relative;z-index:2;width:min(1100px,92vw);color:#fff;padding:80px 20px 30px;opacity:0;transform:translateY(24px);animation:signatureReveal 1.3s .15s ease forwards}
@keyframes signatureReveal{to{opacity:1;transform:translateY(0)}}
.signature-kicker{margin:0 0 28px;font:300 .57rem/1.5 'Montserrat',sans-serif;letter-spacing:4px;text-transform:uppercase;opacity:.88}
.signature-hero h1{margin:0;font:400 clamp(3.5rem,7.2vw,7.2rem)/.92 'Playfair Display',serif;letter-spacing:9px;text-transform:uppercase;text-shadow:0 10px 35px rgba(0,0,0,.18)}
.signature-hero h1 em{font-style:italic;text-transform:none;letter-spacing:3px}
.signature-hero-line{margin:32px auto 0;font:italic 400 clamp(1.15rem,2vw,1.65rem)/1.5 'Playfair Display',serif;opacity:.94}
.signature-scroll{display:inline-flex;flex-direction:column;align-items:center;gap:12px;margin-top:48px;color:#fff;text-decoration:none;text-transform:uppercase;font:300 .55rem/1 'Montserrat',sans-serif;letter-spacing:3.5px}
.signature-scroll-line{width:76px;height:1px;background:rgba(255,255,255,.72);transition:transform .5s ease;transform-origin:center}
.signature-scroll:hover .signature-scroll-line{transform:scaleX(1.5)}

/* SHARED EDITORIAL ------------------------------------ */
.section-eyebrow{display:block;margin-bottom:28px;font:300 .57rem/1.4 'Montserrat',sans-serif;letter-spacing:3.5px;text-transform:uppercase;color:#928a80}
.titre-serif{font-family:'Playfair Display',serif;font-weight:400}

/* INTENTION -------------------------------------------- */
.signature-intro{padding:150px 28px 125px;background:#f7f4ee;text-align:center}
.signature-intro .bloc-texte{max-width:850px;margin:0 auto}
.signature-intro .titre-serif{margin:0;font-size:clamp(2.7rem,5.2vw,5.5rem);line-height:1.04;letter-spacing:1px}
.signature-lead{margin:34px auto 0!important;font-size:clamp(1.25rem,2.1vw,1.75rem);line-height:1.65;color:#554e47}
.signature-copy{max-width:680px;margin:52px auto 0!important;color:#5c5650;font-size:.93rem;line-height:2}
.signature-copy p{margin:0 0 22px}

/* IMAGE BETWEEN CHAPTERS ------------------------------- */
.signature-editorial{padding:0 0 145px;display:flex;justify-content:center;background:#f7f4ee}
.signature-editorial .ecrin-image{position:relative;left:auto;transform:none;width:min(1180px,82vw);margin:0 auto;overflow:hidden}
.signature-editorial img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}

/* PRESENCE --------------------------------------------- */
.signature-philosophy{padding:145px 6vw 155px;background:#171411;color:#f8f5ef}
.signature-philosophy-inner{max-width:1360px;margin:auto}
.signature-philosophy .section-eyebrow{color:#a79f95}
.signature-philosophy .titre-serif{margin:0 0 100px;font-size:clamp(3rem,6vw,6.5rem);line-height:.98;letter-spacing:1px}
.signature-columns{display:grid;grid-template-columns:repeat(3,1fr);gap:5vw}
.signature-columns>div{border-top:1px solid rgba(255,255,255,.24);padding:28px 0 0}
.signature-number{display:block;margin-bottom:32px;color:#a79f95;font:300 .57rem/1 'Montserrat',sans-serif;letter-spacing:4px}
.signature-columns h3{margin:0 0 18px;font:400 clamp(1.8rem,2.8vw,2.8rem)/1.1 'Playfair Display',serif}
.signature-columns p{max-width:340px;margin:0;color:rgba(248,245,239,.68);font:300 .9rem/1.9 'Montserrat',sans-serif}

/* EXPERIENCE ------------------------------------------- */
.signature-timeline{padding:155px 28px 140px;background:#f7f4ee;text-align:center}
.signature-timeline .timeline-wrapper{max-width:1100px;margin:auto}
.signature-timeline h2{margin:0;font-size:clamp(3rem,5.6vw,5.8rem);line-height:1.02;letter-spacing:1px}
.signature-timeline .signature-lead{margin-bottom:105px!important}
.signature-timeline .timeline-item{position:relative;max-width:760px;margin:0 auto 72px;padding:0 0 72px;border-bottom:1px solid #ddd6cc}
.signature-timeline .timeline-item:last-child{margin-bottom:0;padding-bottom:0;border-bottom:0}
.signature-timeline .timeline-number{display:block;margin-bottom:17px;color:#9d958c;font:300 .56rem/1 'Montserrat',sans-serif;letter-spacing:4px}
.signature-timeline .timeline-item h3{margin:0 0 15px;font:400 clamp(1.7rem,3vw,2.5rem)/1.15 'Playfair Display',serif}
.signature-timeline .timeline-item p{max-width:600px;margin:0 auto;color:#635c55;font:300 .88rem/1.9 'Montserrat',sans-serif}

/* PORTFOLIO INTRO -------------------------------------- */
.signature-portfolio-intro{padding:170px 28px 105px;background:#e9e2d7;text-align:center}
.signature-portfolio-intro .section-eyebrow{color:#8c8277}
.signature-portfolio-intro h2{margin:0;font:400 clamp(3.2rem,7vw,7rem)/.92 'Playfair Display',serif;letter-spacing:3px;text-transform:uppercase}
.signature-portfolio-intro .portfolio-intro-lead{margin:34px auto 25px;font:italic 400 clamp(1.2rem,2.2vw,1.75rem)/1.6 'Playfair Display',serif;color:#4e4740}
.signature-portfolio-intro>p:not(.portfolio-intro-lead){max-width:680px;margin:0 auto 13px;color:#665e56;font:300 .88rem/1.85 'Montserrat',sans-serif}
.signature-portfolio-link{display:inline-flex;align-items:center;gap:14px;margin-top:42px!important;color:#171411!important;text-decoration:none;text-transform:uppercase;font:300 .56rem/1 'Montserrat',sans-serif;letter-spacing:3.5px}
.signature-portfolio-link .portfolio-link__arrow{width:25px;height:25px;transition:transform .4s ease}
.signature-portfolio-link:hover .portfolio-link__arrow{transform:translateX(6px)}

/* PORTFOLIO GALLERY ------------------------------------ */
.portfolio-gallery{background:#f7f4ee;padding:0 0 80px}
.story-block{margin:0 auto;position:relative}
.story-block--full{width:100%;padding:0 0 105px}
.story-block--full.story-block--inset{width:min(88%,1450px)}
.story-block--edge{padding-left:0;padding-right:0}
.story-block--inset{padding-left:0;padding-right:0}
.story-block--pair{width:min(1180px,82vw);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:42px;padding:30px 0 120px}
.story-block--pair-single{grid-template-columns:minmax(0,700px);justify-content:center}
.story-block--pair-fixed{align-items:start}
.story-block--pair-air{gap:65px}
.story-block--triptych{width:min(1250px,86vw);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:25px;padding:20px 0 130px;align-items:start}
.gallery-item{overflow:hidden;background:#e9e2d7}
.gallery-item img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.22,1,.36,1)}
.gallery-item:hover img{transform:scale(1.025)}
.gallery-item--landscape{width:100%;aspect-ratio:16/10}
.story-block--full .gallery-item--landscape{max-height:86vh}
.story-block--inset .gallery-item--landscape{aspect-ratio:16/9}
.gallery-item--portrait{aspect-ratio:2/3}
.gallery-item--portrait-feature{aspect-ratio:3/4}
.gallery-item--triptych{aspect-ratio:2/3}
.gallery-item--void{background:transparent}
.gallery-item--void img{opacity:1}
.story-block--pair .gallery-item{min-height:0}
.story-block--pair .gallery-item--landscape{aspect-ratio:4/3}
.story-block--final{padding-bottom:0}
.story-block--final .gallery-item{aspect-ratio:16/9;max-height:88vh}
.story-block--pause{padding-top:70px}
.reveal-item{opacity:0;transform:translateY(35px);transition:opacity 1s ease,transform 1s ease}
.reveal-item.is-visible{opacity:1;transform:none}

/* FINAL CTA -------------------------------------------- */
.signature-final-cta{padding:180px 28px 190px;background:#171411;color:#f8f5ef;text-align:center}
.signature-final-cta .section-eyebrow{color:#a79f95}
.signature-final-cta h2{margin:0;font:400 clamp(3rem,6vw,6.5rem)/1 'Playfair Display',serif;letter-spacing:1px}
.signature-final-lead{margin:32px 0 18px;font-size:clamp(1.25rem,2.2vw,1.8rem);color:#ddd4ca}
.signature-final-copy{max-width:620px;margin:0 auto 48px;color:rgba(248,245,239,.62);font:300 .87rem/1.9 'Montserrat',sans-serif}
.btn-cta-premium{display:inline-block;padding:19px 42px;border:1px solid rgba(255,255,255,.45);background:transparent;color:#fff;text-decoration:none;text-transform:uppercase;letter-spacing:4px;font:300 .58rem/1 'Montserrat',sans-serif;transition:all .45s ease}
.btn-cta-premium:hover{background:#f8f5ef;color:#171411;border-color:#f8f5ef;transform:translateY(-2px)}
.signature-final-cta .mention-recommandation{margin:30px 0 0;color:rgba(248,245,239,.42);font:italic .78rem/1.7 'Playfair Display',serif}

/* FADE ------------------------------------------------- */
.fade-in{opacity:0;transform:translateY(24px);transition:opacity .9s ease,transform .9s ease}
.fade-in.visible{opacity:1;transform:none}

/* RESPONSIVE ------------------------------------------ */
@media(max-width:900px){
    .signature-columns{grid-template-columns:1fr;gap:52px}
    .signature-columns p{max-width:none}
    .story-block--pair{width:min(88vw,700px);grid-template-columns:1fr;gap:28px;padding-bottom:80px}
    .story-block--triptych{width:min(88vw,700px);grid-template-columns:1fr;gap:22px;padding-bottom:85px}
    .story-block--triptych .gallery-item{aspect-ratio:4/5}
    .story-block--full.story-block--inset{width:92%}
}

@media(max-width:768px){
    .signature-hero{height:82vh;min-height:590px}
    .signature-hero .experience-content{padding-top:50px}
    .signature-kicker{font-size:.48rem;letter-spacing:2.5px;line-height:1.7}
    .signature-hero h1{font-size:clamp(2.8rem,13vw,5rem);letter-spacing:5px}
    .signature-hero h1 em{letter-spacing:1px}
    .signature-hero-line{font-size:1.08rem;margin-top:25px}
    .signature-scroll{margin-top:38px}
    .signature-intro{padding:105px 24px 95px}
    .signature-intro .titre-serif{font-size:clamp(2.5rem,11vw,4.2rem)}
    .signature-copy{font-size:.82rem;line-height:1.85;margin-top:38px!important}
    .signature-editorial{padding-bottom:95px}
    .signature-editorial .ecrin-image{width:88vw}
    .signature-editorial img{aspect-ratio:4/5}
    .signature-philosophy{padding:105px 24px 115px}
    .signature-philosophy .titre-serif{font-size:clamp(2.5rem,11vw,4.5rem);margin-bottom:65px}
    .signature-timeline{padding:110px 24px 100px}
    .signature-timeline h2{font-size:clamp(2.6rem,11vw,4.5rem)}
    .signature-timeline .signature-lead{margin-bottom:70px!important}
    .signature-timeline .timeline-item{margin-bottom:55px;padding-bottom:55px}
    .signature-portfolio-intro{padding:120px 22px 85px}
    .signature-portfolio-intro h2{font-size:clamp(2.8rem,12vw,5rem);letter-spacing:1px}
    .signature-portfolio-intro .portfolio-intro-lead{font-size:1.2rem}
    .story-block--full{padding-bottom:60px}
    .story-block--full.story-block--inset{width:94%}
    .story-block--pair{width:90vw;padding-bottom:65px;gap:20px}
    .story-block--triptych{width:90vw;padding-bottom:70px}
    .story-block--pause{padding-top:35px}
    .story-block--final .gallery-item{max-height:none;aspect-ratio:4/3}
    .signature-final-cta{padding:115px 24px 125px}
    .signature-final-cta h2{font-size:clamp(2.8rem,11vw,4.8rem)}
    .signature-final-copy{font-size:.8rem}
}


/* =========================================================
   FIX — GALERIE ÉDITORIALE
   Les images doivent conserver leur ratio réel.
   Aucun bloc vide sous les photos.
========================================================= */

.portfolio-gallery .gallery-item {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    overflow: hidden;
}

.portfolio-gallery .gallery-item img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    aspect-ratio: auto !important;
}

/* Les grandes images horizontales restent monumentales,
   mais sans créer de hauteur artificielle. */
.portfolio-gallery .gallery-item--landscape {
    aspect-ratio: auto !important;
    height: auto !important;
}

.portfolio-gallery .story-block--full .gallery-item--landscape,
.portfolio-gallery .story-block--final .gallery-item {
    max-height: none !important;
}

/* Les compositions en grille doivent rester propres. */
.portfolio-gallery .story-block--triptych,
.portfolio-gallery .story-block--pair {
    align-items: start !important;
}

@media (max-width: 768px) {
    .portfolio-gallery .gallery-item,
    .portfolio-gallery .gallery-item--portrait,
    .portfolio-gallery .gallery-item--portrait-feature,
    .portfolio-gallery .gallery-item--triptych,
    .portfolio-gallery .gallery-item--landscape {
        height: auto !important;
        aspect-ratio: auto !important;
    }

    .portfolio-gallery .gallery-item img {
        height: auto !important;
        object-fit: contain !important;
    }
}


/* =========================================================
   TRIPTYQUE ÉDITORIAL — GRANDE IMAGE + 2 IMAGES CENTRÉES
========================================================= */

.portfolio-gallery .story-block--triptych {
    width: min(1320px, 88vw);
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr);
    column-gap: 24px;
    align-items: center;
    padding: 80px 0 150px;
}

/* Grande image à gauche — référence visuelle */
.portfolio-gallery .story-block--triptych .gallery-item:first-child {
    grid-column: 1;
    grid-row: 1;
    height: auto !important;
    min-height: 0;
    aspect-ratio: auto !important;
}

/* Groupe de droite : les 2 images sont volontairement
   plus hautes que la moitié de l'image de gauche. */
.portfolio-gallery .story-block--triptych .gallery-item:nth-child(2),
.portfolio-gallery .story-block--triptych .gallery-item:nth-child(3) {
    grid-column: 2;
    height: auto !important;
    min-height: 0;
    aspect-ratio: 16 / 10 !important;
    align-self: center;
}

.portfolio-gallery .story-block--triptych .gallery-item:nth-child(2) {
    margin-bottom: 12px;
}

.portfolio-gallery .story-block--triptych .gallery-item:nth-child(3) {
    margin-top: 12px;
}

/* Les deux images de droite forment un seul bloc centré
   verticalement par rapport à la grande image. */
.portfolio-gallery .story-block--triptych {
    grid-template-rows: auto;
}

.portfolio-gallery .story-block--triptych .gallery-item:nth-child(2),
.portfolio-gallery .story-block--triptych .gallery-item:nth-child(3) {
    /* on place les deux éléments dans une colonne commune */
}

/* Wrapper visuel de la colonne droite via la hauteur calculée
   par le navigateur : les deux images restent naturelles. */
.portfolio-gallery .story-block--triptych .gallery-item img {
    width: 100%;
    height: auto !important;
    display: block;
    object-fit: cover;
    transition: transform .7s cubic-bezier(.2,.65,.2,1);
}

.portfolio-gallery .story-block--triptych .gallery-item:hover img {
    transform: scale(1.018);
}

@media (max-width: 768px) {
    .portfolio-gallery .story-block--triptych {
        width: min(92vw, 620px);
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 25px 0 90px;
    }

    .portfolio-gallery .story-block--triptych .gallery-item:first-child,
    .portfolio-gallery .story-block--triptych .gallery-item:nth-child(2),
    .portfolio-gallery .story-block--triptych .gallery-item:nth-child(3) {
        width: 100%;
        height: auto !important;
        margin: 0;
    }

    .portfolio-gallery .story-block--triptych .gallery-item img {
        height: auto !important;
        object-fit: contain;
    }
}