/* ═══════════════════════════════════════════════════
   SOFIA MARNE PORTFOLIO — CSS
   À placer dans : /css/sofia-marne.css (ou /sass/)
   Chargé via functions.php — voir instructions
   ═══════════════════════════════════════════════════ */

:root {
    --sm-noir:     #0a0a0a;
    --sm-noir-2:   #141414;
    --sm-gris:     #1c1c1c;
    --sm-creme:    #f5f0e8;
    --sm-creme-2:  #ede8de;
    --sm-blanc:    #ffffff;
    --sm-accent:   #c9b99a;
    --sm-serif:    'Cormorant Garamond', Georgia, serif;
    --sm-sans:     'Outfit', sans-serif;
}

/* ── Reset spécifique à la page ── */
.p-sofia-marne {
    background: var(--sm-noir);
    color: var(--sm-creme);
    font-family: var(--sm-sans);
    font-weight: 300;
}
.p-sofia-marne h1,
.p-sofia-marne h2,
.p-sofia-marne h3 {
    font-family: var(--sm-serif);
    font-weight: 300;
}
.p-sofia-marne em {
    font-style: italic;
    color: var(--sm-accent);
}
.p-sofia-marne p {
    font-size: .88rem;
    line-height: 1.9;
}

/* ── Éléments communs ── */
.sm-label {
    font-size: .62rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--sm-accent);
    display: block;
    margin-bottom: .75rem;
}
.sm-eyebrow {
    font-size: .65rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(245,240,232,.3);
}
.sm-btn {
    display: inline-block;
    border: .5px solid var(--sm-accent);
    color: var(--sm-creme);
    font-family: var(--sm-sans);
    font-size: .7rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    padding: .9rem 2.2rem;
    text-decoration: none;
    transition: all .3s;
}
.sm-btn:hover {
    background: var(--sm-accent);
    color: var(--sm-noir);
}
.sm-btn--outline {
    border-color: rgba(201,185,154,.4);
}
.sm-btn--dark {
    background: var(--sm-noir);
    border-color: var(--sm-noir);
    color: var(--sm-creme);
}
.sm-btn--full {
    display: block;
    text-align: center;
}

/* ── HERO ── */
.sm-hero {
    min-height: 50vh;
    max-height: 600px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: relative;
}
.sm-hero__left {
    background: var(--sm-noir);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 5rem 3.5rem 4rem;
}
.sm-tag {
    font-size: .65rem;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: var(--sm-accent);
    display: block;
    margin-bottom: 1.5rem;
}
.sm-hero__name {
    font-size: clamp(3.5rem, 6vw, 5.5rem) !important;
    line-height: 1 !important;
    margin-bottom: 1.2rem !important;
    color: var(--sm-creme) !important;
}
.sm-hero__sub {
    font-size: .8rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(245,240,232,.5);
    margin-bottom: 2.5rem;
    line-height: 1.8;
}
.sm-hero__right {
    position: relative;
    overflow: hidden;
}

.sm-hero__placeholder span {
    font-family: var(--sm-serif);
    font-size: 1rem;
    color: rgba(245,240,232,.2);
    letter-spacing: .3em;
    text-transform: uppercase;
}
.sm-hero__img {
    width: 60%;
    height: 60%;
    object-fit: cover;
    display: block;
    float: right;
}
.sm-hero__credit {
    position: absolute;
    bottom: 2.5rem;
    right: 2rem;
    font-family: var(--sm-serif);
    font-style: italic;
    font-size: .9rem;
    color: rgba(245,240,232,.5);
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

/* ── ABOUT ── */
.sm-about {
    background: var(--sm-noir-2);
    padding: 10rem 0;
}
.sm-about__col {
    padding-top: 2rem;
    padding-bottom: 2rem;
}
.sm-about h2 {
    font-size: 2.4rem;
    margin-bottom: 1.2rem;
    color: var(--sm-creme);
}
.about-img{
    width: 220px;
    height: 296px;
    object-fit: cover;
}
.sm-arch {
    width: 220px;
    height: 290px;
    border-radius: 50% 50% 0 0 / 40% 40% 0 0;
    overflow: hidden;
    border: .5px solid rgba(201,185,154,.2);
    margin-bottom: 2rem;
}
.sm-arch__placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #252320 0%, #1a1814 100%);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 1.5rem;
}
.sm-arch__placeholder span {
    font-family: var(--sm-serif);
    font-style: italic;
    font-size: .8rem;
    color: rgba(201,185,154,.35);
    letter-spacing: .1em;
}
.sm-benefits {
    margin-top: 2rem;
    border: .5px solid rgba(201,185,154,.15);
    padding: 1.5rem;
}
.sm-benefit {
    display: flex;
    gap: 1rem;
    padding: .7rem 0;
    border-bottom: .5px solid rgba(201,185,154,.1);
    font-size: .85rem;
    color: rgba(245,240,232,.65);
}
.sm-benefit:last-child { border-bottom: none; }
.sm-benefit__num {
    font-family: var(--sm-serif);
    font-size: .75rem;
    color: var(--sm-accent);
    min-width: 1.5rem;
    flex-shrink: 0;
    padding-top: 2px;
}

/* ── STAT BANNER ── */
.sm-stat-banner {
    background: var(--sm-creme);
    color: var(--sm-noir);
    padding: 4rem 0;
}
.sm-stat { padding: 1rem; }
.sm-stat__num {
    font-family: var(--sm-serif);
    font-size: clamp(3rem, 6vw, 5rem);
    font-weight: 300;
    line-height: 1;
    color: var(--sm-noir);
}
.sm-stat__num span { font-size: 1.5rem; }
.sm-stat__desc {
    font-size: .8rem;
    line-height: 1.7;
    color: rgba(10,10,10,.6);
    max-width: 260px;
}
.sm-stat__quote {
    font-family: var(--sm-serif);
    font-style: italic;
    font-size: 1.3rem;
    color: var(--sm-noir);
    line-height: 1.5;
}

/* ── MY WORK ── */
.sm-work {
    background: var(--sm-noir-2);
    padding: 6rem 0;
}
.sm-work h2 {
    font-size: 2.8rem;
    color: var(--sm-creme);
}
.sm-work-card {
    border: .5px solid rgba(201,185,154,.1);
    background: #1a1a18;
    border-radius: 2rem 2rem .5rem .5rem;
    overflow: hidden;
}
.sm-work-card__img {
    aspect-ratio: 9/16;
    background: linear-gradient(180deg, #252320 0%, #181614 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.sm-work-card__img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10,10,10,.7) 0%, transparent 50%);
}
.sm-play {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: .5px solid rgba(245,240,232,.5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sm-creme);
    font-size: .7rem;
    position: relative;
    z-index: 2;
}
.sm-work-card__label {
    padding: .8rem 1rem;
    font-size: .65rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(245,240,232,.4);
    margin: 0;
}

/* ── PRICING ── */
.sm-pricing {
    background: var(--sm-noir);
    padding: 6rem 0;
}
.sm-pricing h2 {
    font-size: 2.8rem;
    color: var(--sm-creme);
}
.sm-price-card {
    border: .5px solid rgba(201,185,154,.15);
    padding: 2.5rem 2rem;
    position: relative;
    transition: border-color .3s;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.sm-price-card:hover { border-color: rgba(201,185,154,.4); }
.sm-price-card--featured {
    border-color: var(--sm-accent);
    background: rgba(201,185,154,.04);
}
.sm-price-card__badge {
    position: absolute;
    top: -.7rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--sm-accent);
    color: var(--sm-noir);
    font-size: .6rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    padding: .3rem 1rem;
    white-space: nowrap;
}
.sm-price-card__name {
    font-size: .65rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--sm-accent);
    margin: 0 0 .5rem;
}
.sm-price-card__price {
    font-family: var(--sm-serif);
    font-size: 3.2rem;
    font-weight: 300;
    line-height: 1;
    color: var(--sm-creme);
    margin: .5rem 0 .3rem;
}
.sm-price-card__price sup {
    font-size: 1.2rem;
    vertical-align: top;
    margin-top: .5rem;
    display: inline-block;
}
.sm-price-card__type {
    font-family: var(--sm-serif);
    font-style: italic;
    font-size: 1rem;
    color: rgba(245,240,232,.5);
    display: block;
    margin-bottom: 1.5rem;
}
.sm-price-card__features {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
    flex: 1;
}
.sm-price-card__features li {
    font-size: .8rem;
    color: rgba(245,240,232,.6);
    padding: .5rem 0;
    border-bottom: .5px solid rgba(201,185,154,.08);
    display: flex;
    gap: .7rem;
}
.sm-price-card__features li::before {
    content: '—';
    color: var(--sm-accent);
    flex-shrink: 0;
}
.sm-pricing__note {
    text-align: center;
    margin-top: 2rem;
    font-size: .78rem;
    color: rgba(245,240,232,.3);
}

/* ── TESTIMONIALS ── */
.sm-testimonials {
    background: var(--sm-creme);
    color: var(--sm-noir);
    padding: 6rem 0;
}
.sm-testimonials .sm-label { color: rgba(10,10,10,.4); }
.sm-testimonials h2 { font-size: 2.8rem; color: var(--sm-noir); }
.sm-testimonial {
    background: var(--sm-blanc);
    padding: 2rem;
    height: 100%;
    position: relative;
}
.sm-testimonial::before {
    content: '"';
    font-family: var(--sm-serif);
    font-size: 5rem;
    line-height: 1;
    color: rgba(10,10,10,.06);
    position: absolute;
    top: .5rem;
    left: 1.2rem;
}
.sm-testimonial__text {
    font-size: .85rem;
    line-height: 1.8;
    color: rgba(10,10,10,.65);
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
}
.sm-testimonial__author {
    display: flex;
    align-items: center;
    gap: .8rem;
}
.sm-testimonial__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e0d8cc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--sm-serif);
    font-size: .8rem;
    color: rgba(10,10,10,.5);
    flex-shrink: 0;
}
.sm-testimonial__name {
    font-family: var(--sm-serif);
    font-size: .95rem;
    display: block;
    color: var(--sm-noir);
}
.sm-testimonial__brand {
    font-size: .68rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(10,10,10,.4);
}

/* ── HOW IT WORKS ── */
.sm-how {
    background: var(--sm-noir-2);
    padding: 6rem 0;
}
.sm-how h2 { font-size: 2.8rem; color: var(--sm-creme); }
.sm-how__grid {
    border: .5px solid rgba(201,185,154,.12);
}
.sm-how__step {
    padding: 2.5rem 2rem;
    border-right: .5px solid rgba(201,185,154,.12);
}
.sm-how__step:last-child { border-right: none; }
.sm-how__num {
    font-family: var(--sm-serif);
    font-size: 3rem;
    color: rgba(201,185,154,.15);
    line-height: 1;
    margin-bottom: 1rem;
}
.sm-how__step h3 {
    font-size: 1.3rem;
    margin-bottom: .8rem;
    color: var(--sm-creme);
}

/* ── STATS MINI ── */
.sm-stats-mini {
    background: var(--sm-noir);
    padding: 4rem 0;
}
.sm-mini-stat { text-align: center; }
.sm-mini-stat__num {
    font-family: var(--sm-serif);
    font-size: 3.5rem;
    font-weight: 300;
    color: var(--sm-creme);
    line-height: 1;
}
.sm-mini-stat__num span { font-size: 1.5rem; }
.sm-mini-stat p {
    font-size: .75rem;
    color: rgba(245,240,232,.4);
    margin-top: .4rem;
    line-height: 1.5;
}

/* ── CTA CONTACT ── */
.sm-contact {
    background: var(--sm-creme);
    color: var(--sm-noir);
    text-align: center;
    padding: 8rem 2rem;
}
.sm-contact .sm-label { color: rgba(10,10,10,.4); justify-content: center; }
.sm-contact h2 {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    color: var(--sm-noir);
    margin-bottom: 1rem;
    line-height: 1.05;
}
.sm-contact p {
    color: rgba(10,10,10,.55);
    margin-bottom: 2.5rem;
}

/* ── ANIMATIONS SCROLL ── */
.sm-fade {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s ease, transform .7s ease;
}
.sm-fade.sm-visible {
    opacity: 1;
    transform: none;
}

/* ── RESPONSIVE ── */
@media (max-width: 991px) {
    .sm-hero { grid-template-columns: 1fr; }
    .sm-hero__right { min-height: 50vw; }
    .sm-how__step { border-right: none; border-bottom: .5px solid rgba(201,185,154,.12); }
    .sm-how__step:last-child { border-bottom: none; }
}
@media (max-width: 767px) {
    .sm-hero__left { padding: 4rem 1.5rem 3rem; }
    .sm-mini-stat__num { font-size: 2.5rem; }
}

/* ── Work card : image réelle ── */
.sm-work-card__img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}