/* ==========================================================================
   Pages CMS "Pierres précieuses" — styles mutualisés
   Chargé uniquement sur les pages pierres (voir templates/cms/page-gemstone.tpl)
   Source design : test/Maquette-page-*.html
   ========================================================================== */

/* --- Intégration PrestaShop ------------------------------------------------
   Le contenu CMS est rendu dans le container Bootstrap du layout : on fait
   "déborder" .gem-page sur toute la largeur du viewport (full-bleed). */
body#cms {
    overflow-x: hidden
}

#cms #wrapper {
    background: #FBF7F0 !important;
    padding-top: 153px !important
}

.gem-page {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw)
}

/* anchors: keep sections visible below the fixed header */
.gem-page section[id] {
    scroll-margin-top: 170px
}

/* --- Design tokens --------------------------------------------------------- */
.gem-page {
    --noir: #4B524E;
    --ink: #16120D;
    --paper: #FBF7F0;
    --cream: #F3EBDD;
    --txt-d: #EFE7D7;
    --muted-d: #A89C86;
    --muted: #7C7263;
    --gold: #C6A15B;
    --gold-2: #E3C68A;
    --gold-deep: #9B7A3C;
    --line-d: rgba(231, 222, 204, .16);
    --line: #E7DECC;
    --disp: 'Bodoni Moda', Didot, serif;
    --sans: 'Jost', system-ui, sans-serif;
    --maxw: 1440px;
    /* accents surchargés par pierre via .gem--<slug> (voir fin de fichier) */
    --accent: #8A6A2E;
    --accent-2: #8A6A2E;
    --accent-soft: #D2A85B
}

.gem-page * {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

.gem-page {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-weight: 300;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden
}

.gem-page img, .gem-page video {
    display: block;
    max-width: 100%
}

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

.gem-page h1, .gem-page h2, .gem-page h3 {
    font-family: var(--disp);
    font-weight: 500;
    line-height: 1.04;
    letter-spacing: -.01em
}

.gem-page .wrap {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 40px
}

.gem-page .eyebrow {
    font-size: 11px;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: var(--gold-deep)
}

.gem-page .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6em;
    font-size: 12px;
    letter-spacing: .2em;
    text-transform: uppercase;
    padding: 16px 32px;
    border: 1px solid currentColor;
    background: transparent;
    cursor: pointer;
    transition: .5s cubic-bezier(.2, .7, .3, 1);
    color: var(--ink)
}

.gem-page .btn--fill {
    background: var(--gold);
    border-color: var(--gold);
    color: #1a1408
}

.gem-page .btn--fill:hover {
    background: var(--gold-2);
    border-color: var(--gold-2)
}

.gem-page .btn--line-d {
    color: var(--ink);
    border-color: var(--ink)
}

.gem-page .btn--line-d:hover {
    background: var(--ink);
    color: var(--paper)
}

.gem-page .btn--line-l {
    color: #fff;
    border-color: rgba(255, 255, 255, .55)
}

.gem-page .btn--line-l:hover {
    background: #fff;
    color: var(--ink)
}

.gem-page .ul {
    font-size: 12px;
    letter-spacing: .2em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--gold);
    padding-bottom: 4px;
    color: var(--gold-deep)
}

.gem-page .ul:hover {
    color: var(--ink)
}

.gem-page .reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 1s ease, transform 1s cubic-bezier(.2, .7, .3, 1)
}

.gem-page .reveal.in {
    opacity: 1;
    transform: none
}

/* hero */
.gem-page .hero {
    position: relative;
    height: calc(100vh - 153px);
    min-height: 620px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: #100D0A
}

.gem-page .hero img {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
    filter: brightness(.58) saturate(1.12)
}

.gem-page .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--hero-grad, linear-gradient(180deg, rgba(16, 13, 10, .5) 0%, rgba(16, 13, 10, .18) 36%, rgba(16, 13, 10, .82) 100%))
}

.gem-page .hero .wrap {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-bottom: 9vh;
    color: #fff
}

.gem-page .hero .eyebrow {
    color: var(--accent-soft)
}

.gem-page .hero h1 {
    font-size: clamp(40px, 6.4vw, 104px);
    color: #fff;
    margin: 18px 0 22px;
    font-weight: 500;
    max-width: 15ch;
    text-shadow: 0 2px 30px rgba(0, 0, 0, .4)
}

.gem-page .hero p {
    color: #F2EADb;
    font-size: 18px;
    max-width: 430px;
    margin-bottom: 30px
}

.gem-page .hero .row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap
}

.gem-page .scrollcue {
    position: absolute;
    left: 40px;
    bottom: 28px;
    z-index: 3;
    font-size: 10px;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: #E7D9bd;
    display: flex;
    align-items: center;
    gap: 12px
}

.gem-page .scrollcue::before {
    content: "";
    width: 46px;
    height: 1px;
    background: var(--gold-2);
    transform-origin: left;
    animation: gem-cue 2.6s infinite
}

@keyframes gem-cue {
    0%, 100% {
        transform: scaleX(.3)
    }
    50% {
        transform: scaleX(1)
    }
}

/* manifeste */
.gem-page .mani {
    padding: clamp(70px, 9vw, 140px) 0;
    background: var(--noir);
    color: var(--txt-d)
}

.gem-page .mani .wrap {
    display: grid;
    grid-template-columns:1.1fr .9fr;
    gap: clamp(40px, 5vw, 90px);
    align-items: center
}

.gem-page .mani .eyebrow {
    color: var(--accent-soft);
    display: block;
    margin-bottom: 16px
}

.gem-page .mani h2 {
    font-size: clamp(28px, 3.4vw, 50px);
    color: #fff;
    margin-bottom: 22px;
    max-width: 16ch
}

.gem-page .mani p {
    color: #CBC0A8;
    font-size: 16.5px;
    margin-bottom: 16px;
    max-width: 50ch
}

.gem-page .mani .quote {
    font-family: var(--disp);
    font-style: italic;
    font-size: clamp(24px, 2.8vw, 38px);
    color: var(--accent-soft);
    margin-top: 30px;
    line-height: 1.2
}

.gem-page .mani .mimg {
    position: relative;
    aspect-ratio: 4/5;
    overflow: hidden
}

.gem-page .mani .mimg img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

@media (max-width: 860px) {
    .gem-page .mani .wrap {
        grid-template-columns:1fr
    }

    .gem-page .mani .mimg {
        aspect-ratio: 4/3
    }
}

/* criteres */
.gem-page .crit {
    padding: clamp(64px, 8vw, 116px) 0
}

.gem-page .crit .head {
    text-align: center;
    margin-bottom: 46px
}

.gem-page .crit .head .eyebrow {
    display: block;
    margin-bottom: 12px
}

.gem-page .crit .head h2 {
    font-size: clamp(28px, 3.6vw, 50px)
}

.gem-page .crit .head p {
    color: var(--muted);
    max-width: 46ch;
    margin: 12px auto 0
}

.gem-page .critgrid {
    display: grid;
    grid-template-columns:repeat(4, 1fr);
    gap: clamp(16px, 2vw, 28px);
    max-width: 1180px;
    margin: 0 auto
}

.gem-page .crc {
    border-top: 2px solid var(--accent);
    padding: 22px 4px 0
}

.gem-page .crc .n {
    font-family: var(--disp);
    font-size: 13px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--accent)
}

.gem-page .crc h3 {
    font-family: var(--disp);
    font-size: 21px;
    font-weight: 500;
    margin: 8px 0 10px
}

.gem-page .crc p {
    color: var(--muted);
    font-size: 14px
}

@media (max-width: 860px) {
    .gem-page .critgrid {
        grid-template-columns:1fr 1fr
    }
}

@media (max-width: 520px) {
    .gem-page .critgrid {
        grid-template-columns:1fr
    }
}

/* trio facts */
.gem-page .trio {
    padding: clamp(60px, 7vw, 110px) 0;
    background: var(--noir);
    color: var(--txt-d);
    text-align: center
}

.gem-page .trio .head {
    margin-bottom: 46px
}

.gem-page .trio .head .eyebrow {
    display: block;
    margin-bottom: 12px;
    color: var(--accent-soft)
}

.gem-page .trio .head h2 {
    color: #fff;
    font-size: clamp(26px, 3.2vw, 46px)
}

.gem-page .triogrid {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: clamp(20px, 3vw, 48px);
    max-width: 1000px;
    margin: 0 auto
}

.gem-page .trc .big {
    font-family: var(--disp);
    font-size: clamp(28px, 3.4vw, 44px);
    color: var(--accent-soft);
    line-height: 1.1
}

.gem-page .trc p {
    color: #CBC0A8;
    font-size: 14.5px;
    margin-top: 12px;
    max-width: 30ch;
    margin-left: auto;
    margin-right: auto
}

@media (max-width: 700px) {
    .gem-page .triogrid {
        grid-template-columns:1fr;
        gap: 32px
    }
}

/* feature ring (piece mise en avant — optionnelle) */
.gem-page .feature {
    padding: clamp(64px, 8vw, 120px) 0
}

.gem-page .feature .wrap {
    display: grid;
    grid-template-columns:1.05fr .95fr;
    gap: clamp(34px, 5vw, 76px);
    align-items: center
}

.gem-page .fgal {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 12px
}

.gem-page .fgal .cell {
    aspect-ratio: 1;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line)
}

.gem-page .fgal .cell.big {
    grid-column: 1 / -1;
    aspect-ratio: 16/11
}

.gem-page .fgal img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.gem-page .feature .eyebrow {
    display: block;
    margin-bottom: 12px;
    color: var(--accent)
}

.gem-page .feature h2 {
    font-size: clamp(28px, 3.4vw, 46px);
    margin-bottom: 6px
}

.gem-page .feature .price {
    font-family: var(--disp);
    font-size: 24px;
    color: var(--ink);
    margin-bottom: 16px
}

.gem-page .feature p {
    color: var(--muted);
    font-size: 16px;
    margin-bottom: 24px;
    max-width: 46ch
}

.gem-page .feature .row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap
}

@media (max-width: 860px) {
    .gem-page .feature .wrap {
        grid-template-columns:1fr
    }
}

/* faq */
.gem-page .faq {
    background: var(--cream)
}

.gem-page .faq .wrap {
    padding-top: clamp(56px, 7vw, 96px);
    padding-bottom: clamp(56px, 7vw, 96px)
}

.gem-page .faq .eyebrow {
    display: block;
    margin-bottom: 10px
}

.gem-page .faq h2 {
    font-size: clamp(28px, 3.6vw, 48px);
    margin: 0 0 28px
}

.gem-page .acc {
    border-top: 1px solid var(--line);
    max-width: 900px
}

.gem-page .acc details {
    border-bottom: 1px solid var(--line)
}

.gem-page .acc summary {
    list-style: none;
    cursor: pointer;
    padding: 22px 0;
    display: flex;
    justify-content: space-between;
    gap: 18px;
    font-family: var(--disp);
    font-size: 21px
}

.gem-page .acc summary::-webkit-details-marker {
    display: none
}

.gem-page .acc .plus {
    color: var(--accent);
    font-size: 22px;
    transition: .3s
}

.gem-page .acc details[open] .plus {
    transform: rotate(45deg)
}

.gem-page .acc .ans {
    padding: 0 0 24px;
    color: var(--muted);
    font-size: 16px;
    max-width: 800px
}

/* origines */
.gem-page .origin {
    padding: clamp(64px, 8vw, 116px) 0;
    background: var(--noir);
    color: var(--txt-d)
}

.gem-page .origin .head {
    text-align: center;
    margin-bottom: 48px
}

.gem-page .origin .head .eyebrow {
    display: block;
    margin-bottom: 12px;
    color: var(--accent-soft)
}

.gem-page .origin .head h2 {
    color: #fff;
    font-size: clamp(28px, 3.6vw, 50px)
}

.gem-page .origin .head p {
    color: #CBC0A8;
    max-width: 54ch;
    margin: 12px auto 0;
    font-size: 15.5px
}

.gem-page .ogrid {
    display: grid;
    grid-template-columns:repeat(5, 1fr);
    gap: clamp(14px, 1.8vw, 26px);
    max-width: 1180px;
    margin: 0 auto
}

.gem-page .og {
    border-top: 1px solid var(--line-d);
    padding-top: 18px
}

.gem-page .og .reg {
    font-family: var(--disp);
    font-size: 20px;
    color: #fff;
    font-weight: 500;
    display: block
}

.gem-page .og .ctry {
    font-size: 10px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--accent-soft);
    margin: 7px 0 9px;
    display: block
}

.gem-page .og p {
    color: #A89C86;
    font-size: 13px
}

@media (max-width: 860px) {
    .gem-page .ogrid {
        grid-template-columns:1fr 1fr;
        gap: 24px
    }
}

@media (max-width: 520px) {
    .gem-page .ogrid {
        grid-template-columns:1fr
    }
}

/* pierre du mois */
.gem-page .month {
    padding: clamp(58px, 7vw, 104px) 0;
    text-align: center
}

.gem-page .month .eyebrow {
    display: block;
    margin-bottom: 12px;
    color: var(--accent)
}

.gem-page .month h2 {
    font-size: clamp(26px, 3.2vw, 44px);
    margin-bottom: 16px
}

.gem-page .month p {
    color: var(--muted);
    max-width: 58ch;
    margin: 0 auto 8px;
    font-size: 16px
}

.gem-page .month .tags {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 26px
}

.gem-page .month .tag {
    border: 1px solid var(--accent);
    color: var(--accent);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 9px 18px;
    border-radius: 999px
}

/* rdv band */
.gem-page .rdvb {
    position: relative;
    isolation: isolate;
    background: #F3E4CB;
    overflow: hidden;
    display: flex;
    align-items: center;
    min-height: clamp(440px, 50vw, 600px)
}

.gem-page .rdvb .bgimg {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center
}

.gem-page .rdvb::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(243, 228, 203, 0) 40%, rgba(243, 228, 203, .7) 58%, rgba(243, 228, 203, .96) 74%)
}

.gem-page .rdvb .txt {
    position: relative;
    z-index: 2;
    margin-left: auto;
    width: min(50%, 580px);
    padding: clamp(40px, 5vw, 80px) clamp(40px, 6vw, 96px) clamp(40px, 5vw, 80px) 0;
    display: flex;
    flex-direction: column
}

.gem-page .rdvb .eyebrow {
    color: var(--gold-deep)
}

.gem-page .rdvb h2 {
    font-size: clamp(30px, 3.4vw, 52px);
    color: var(--ink);
    margin: 14px 0 18px;
    line-height: 1.06;
    max-width: 16ch;
    font-weight: 500
}

.gem-page .rdvb h2 em {
    font-style: italic;
    color: var(--gold-deep)
}

.gem-page .rdvb p {
    color: #6f6450;
    max-width: 440px;
    margin-bottom: 32px;
    font-size: 17px
}

.gem-page .rdvb .btn {
    align-self: flex-start
}

.gem-page .rdvb .note {
    margin-top: 24px;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #8a7d66
}

@media (max-width: 820px) {
    .gem-page .rdvb {
        flex-direction: column;
        min-height: 0
    }

    .gem-page .rdvb .bgimg {
        position: relative;
        height: auto;
        width: 100%;
        aspect-ratio: 1500/677
    }

    .gem-page .rdvb::after {
        display: none
    }

    .gem-page .rdvb .txt {
        width: 100%;
        margin: 0;
        padding: clamp(30px, 7vw, 46px) 24px clamp(38px, 8vw, 54px)
    }
}

.gem-page .btn:focus-visible, .gem-page a:focus-visible, .gem-page button:focus-visible {
    outline: 2px solid var(--gold-deep);
    outline-offset: 2px
}

/* ==========================================================================
   Accents par pierre — classe .gem--<slug> posée sur .gem-page
   --accent      : bordures, numéros, tags, plus de la FAQ
   --accent-soft : eyebrows et titres sur fonds sombres
   --hero-grad   : voile du hero (optionnel, tinté selon la pierre)
   ========================================================================== */
.gem--diamants-de-couleur {
    --accent: #8A6A2E;
    --accent-2: #8A6A2E;
    --accent-soft: #D2A85B
}

.gem--emeraude {
    --accent: #1F6B4C;
    --accent-2: #1F6B4C;
    --accent-soft: #54B98C
}

.gem--rubis {
    --accent: #A01B33;
    --accent-2: #D24A60;
    --accent-soft: #E0728A;
    --hero-grad: linear-gradient(180deg, rgba(55, 8, 16, .52) 0%, rgba(20, 6, 9, .18) 36%, rgba(14, 5, 7, .82) 100%)
}

.gem--saphir {
    --accent: #1E3E73;
    --accent-2: #1E3E73;
    --accent-soft: #5E8FD6
}

.gem--spinelle {
    --accent: #8A1E3C;
    --accent-2: #8A1E3C;
    --accent-soft: #D76A82
}

.gem--tourmaline {
    --accent: #1E6E66;
    --accent-2: #1E6E66;
    --accent-soft: #54B8AC
}

.gem--saphir-rose {
    --accent: #9E3B6B;
    --accent-2: #9E3B6B;
    --accent-soft: #DD83AE
}

.gem--grenat {
    --accent: #2E6B3F;
    --accent-2: #2E6B3F;
    --accent-soft: #5FAE6E
}

.gem--tanzanite {
    --accent: #3A2F7A;
    --accent-2: #3A2F7A;
    --accent-soft: #7E70CE
}