/* ==========================================================================
   Blog « Le Journal » — page liste (prestablog, override grid-for-1-7_page-all)
   Source design : maquette-blog-soann.html
   Base Manrope · display Montserrat 300 CAPS · accent #4b524e · gris #f6f6f6
   ========================================================================== */

/* --- Intégration PrestaShop : sortie du container (full-bleed) ------------ */
body#module-prestablog-blog {
    overflow-x: hidden
}

#module-prestablog-blog #wrapper {
    background: #fff
}

/* le fil d'ariane du thème doublonne avec .sj-crumb (sous le hero) */
#module-prestablog-blog .breadcrumb {
    display: none
}

#module-prestablog-blog .sj {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw)
}

/* --- Design tokens -------------------------------------------------------- */
.sj {
    --ink-strong: #1a1a1a;
    --ink: #232323;
    --muted: #5f5f5f;
    --meta: #6f6a63;
    --stone: #4b524e;
    --stone-2: #3a403d;
    --cream: #f6f6f6;
    --line: #e6e3dd;
    --paper: #fff;
    --ease: cubic-bezier(.16, 1, .3, 1);
    background: var(--paper);
    color: var(--ink);
    font-family: "Manrope", sans-serif;
}

.sj h1, .sj h2, .sj h3, .sj p, .sj ul, .sj figure {
    margin: 0;
    padding: 0
}

.sj ul {
    list-style: none
}

.sj a {
    text-decoration: none;
    color: inherit
}

.sj img {
    display: block;
    max-width: 100%
}

.sj a:focus-visible {
    outline: 2px solid var(--stone);
    outline-offset: 4px
}

/* conteneur large des articles */
.sj-wrap {
    max-width: 1500px;
    margin: 0 auto;
    padding-inline: clamp(20px, 4vw, 48px)
}

/* ---- fil d'ariane ---- */
.sj-crumb {
    font: 500 11px/1 "Montserrat", sans-serif;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--meta);
    padding: 22px 0 0;
    display: flex;
    gap: 9px;
    align-items: center
}

.sj-crumb a:hover {
    color: var(--stone)
}

.sj-crumb .dot {
    color: #c9c4ba
}

/* ---- masthead / kicker ---- */
.sj-kicker {
    font: 600 11px/1 "Montserrat", sans-serif;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--stone)
}

.sj-title {
    font: 300 clamp(32px, 4.6vw, 50px)/1.06 "Montserrat", sans-serif;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-strong);
    margin-top: 14px
}

.sj-standfirst {
    font: 300 clamp(16px, 1.8vw, 20px)/1.6 "Rokkitt", serif;
    color: var(--muted);
    max-width: 56ch;
    margin: 18px auto 0
}

.sj-rule {
    display: block;
    width: 44px;
    height: 1px;
    background: var(--stone);
    opacity: .6;
    margin: 30px auto 0
}

/* ---- HERO « Le Journal » ---- */
.sj-hero {
    position: relative;
    color: #fff;
    text-align: center;
    min-height: clamp(420px, 56vh, 600px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    background: linear-gradient(rgba(22, 20, 19, .40), rgba(22, 20, 19, .60)),
    url("https://soann-joaillerie-paris.fr/modules/homeeditor/uploads/hero/accueil-soann.jpg") center/cover no-repeat
}

.sj-hero .sj-kicker {
    color: rgba(255, 255, 255, .85);
    text-shadow: 0 1px 14px rgba(0, 0, 0, .4)
}

/* titre serif Playfair, casse normale (masthead de journal) */
.sj-hero .sj-title {
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 500;
    text-transform: none;
    letter-spacing: .005em;
    font-size: clamp(44px, 7vw, 88px);
    line-height: 1.05;
    color: #fff;
    margin-top: 14px;
    text-shadow: 0 2px 30px rgba(0, 0, 0, .34)
}

.sj-hero .sj-standfirst {
    color: rgba(255, 255, 255, .86);
    text-shadow: 0 1px 16px rgba(0, 0, 0, .4)
}

.sj-hero .sj-rule {
    background: rgba(255, 255, 255, .7);
    opacity: 1
}

/* ---- labels de section ---- */
.sj-band {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: clamp(48px, 6vw, 72px) 0 28px
}

.sj-band-label {
    font: 600 12px/1 "Montserrat", sans-serif;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ink);
    white-space: nowrap
}

.sj-band-line {
    flex: 1;
    height: 1px;
    background: var(--line)
}

.sj-band-count {
    font: 500 12px/1 "Montserrat", sans-serif;
    letter-spacing: .04em;
    color: var(--meta);
    white-space: nowrap
}

/* ---- méta / lien partagés ---- */
.sj-meta {
    font: 500 11px/1 "Montserrat", sans-serif;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--meta)
}

.sj-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: 600 11.5px/1 "Montserrat", sans-serif;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--stone)
}

.sj-ar {
    transition: transform .35s var(--ease)
}

.sj-card:hover .sj-ar, .sj-row:hover .sj-ar {
    transform: translateX(5px)
}

/* ---- GRILLE DE CARTES (2 colonnes) ---- */
.sj-duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(26px, 3vw, 46px);
    row-gap: clamp(46px, 4.5vw, 70px)
}

.sj-card {
    display: flex;
    flex-direction: column;
    height: 100%
}

.sj-card-media {
    aspect-ratio: 16/10;
    overflow: hidden;
    background: var(--cream)
}

.sj-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s var(--ease)
}

.sj-card:hover .sj-card-media img {
    transform: scale(1.045)
}

.sj-card-title {
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    font-size: clamp(18px, 1.9vw, 21px);
    line-height: 1.45 !important;
    color: var(--ink);
    margin: 30px 0 0 !important;
    transition: color .3s var(--ease)
}

.sj-card:hover .sj-card-title {
    color: var(--stone)
}

.sj-card-desc {
    font-family: "Manrope", sans-serif;
    font-size: 14.5px;
    line-height: 1.78 !important;
    color: var(--muted);
    margin: 18px 0 0 !important
}

.sj-card-foot {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: auto;
    padding-top: 24px
}

/* ---- LISTE (la suite des articles) ---- */
.sj-list {
    border-top: 1px solid var(--line)
}

.sj-row {
    display: grid;
    grid-template-columns: 140px 1fr auto;
    gap: 30px;
    align-items: center;
    padding: 26px 0;
    border-bottom: 1px solid var(--line)
}

.sj-row-media {
    width: 140px;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: var(--cream)
}

.sj-row-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s var(--ease)
}

.sj-row:hover .sj-row-media img {
    transform: scale(1.05)
}

.sj-row-title {
    font: 400 clamp(18px, 2vw, 22px)/1.3 "Montserrat", sans-serif;
    color: var(--ink);
    margin-top: 10px;
    transition: color .3s var(--ease)
}

.sj-row:hover .sj-row-title {
    color: var(--stone)
}

.sj-row-desc {
    font: 400 14px/1.6 "Manrope", sans-serif;
    color: var(--muted);
    margin-top: 9px;
    max-width: 64ch
}

.sj-row-ar {
    font-size: 20px;
    color: var(--stone);
    opacity: .5;
    transition: transform .35s var(--ease), opacity .3s
}

.sj-row:hover .sj-row-ar {
    opacity: 1;
    transform: translateX(5px)
}

/* ---- bande « prise de rendez-vous » (reprise de l'accueil) ---- */
.sj .container-appointment {
    position: relative;
    isolation: isolate;
    background: #f3e4cb url("../img/ECRIN-back.jpg") center/cover no-repeat;
    text-align: center;
    box-sizing: border-box;
    padding: clamp(54px, 7vw, 78px) 20px;
    margin-top: clamp(58px, 7vw, 90px)
}

/* light veil so the black text stays readable over the photo */
.sj .container-appointment::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: rgba(255, 255, 255, .28)
}

.sj .sub-appointment {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.sj .container-appointment .appointment-title {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: clamp(19px, 2.2vw, 23px);
    line-height: 1.25;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #000;
    margin: 0;
    max-width: 560px
}

.sj .container-appointment p {
    font-family: "Rokkitt", serif;
    font-weight: 300;
    font-size: 18px;
    line-height: 1.5;
    color: #000;
    margin: 26px auto;
    max-width: 620px
}

.sj .container-appointment .button {
    background-color: #4b524e;
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    line-height: 1.2;
    letter-spacing: .1em;
    text-transform: uppercase;
    border: none;
    border-radius: 0;
    padding: 14px 30px;
    text-decoration: none;
    display: inline-block;
    transition: background-color .3s
}

.sj .container-appointment .button:hover {
    background-color: #777;
    color: #fff
}

/* ---- pagination du module dans la DA ---- */
.sj .prestablog_pagination, .sj #blog_pagination_1-7 {
    text-align: center;
    margin-top: clamp(40px, 5vw, 60px);
    font-family: "Montserrat", sans-serif
}

/* ---- reveal ---- */
.sj .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
    transition-delay: calc(var(--i, 0) * 55ms)
}

.sj .reveal.is-in {
    opacity: 1;
    transform: none
}

/* ---- responsive ---- */
@media (max-width: 900px) {
    .sj-duo {
        grid-template-columns: 1fr;
        gap: 34px
    }

    .sj-row {
        grid-template-columns: 104px 1fr;
        gap: 20px
    }

    .sj-row-media {
        width: 104px
    }

    .sj-row-ar {
        display: none
    }

    .sj-row-desc {
        display: none
    }
}

@media (max-width: 520px) {
    .sj-row {
        grid-template-columns: 84px 1fr;
        gap: 16px;
        padding: 20px 0
    }

    .sj-row-media {
        width: 84px
    }
}

@media (prefers-reduced-motion: reduce) {
    .sj .reveal {
        opacity: 1;
        transform: none;
        transition: none
    }

    .sj * {
        transition: none !important;
        animation: none !important
    }
}