/* ==========================================================================
   Page Originaux - catégorie produit Woo « Originaux ».
   Layout volontairement plus solennel que la galerie portraits :
   pas de rotations, gabarit symétrique, gros visuels contemplatifs.
   ========================================================================== */

.mdm-originaux { padding-bottom: 60px; }

/* - Header - */
.mdm-originaux__header {
    padding: 60px var(--m-page-padding) 50px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.mdm-originaux__header-inner {
    position: relative;
    z-index: 2;
    max-width: 720px;
    margin-inline: auto;
}

.mdm-originaux__header-blob {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    filter: blur(60px);
    opacity: .35;
}

.mdm-originaux__header-blob--rose { left: 15%; top: 20px; width: 240px; height: 240px; }
.mdm-originaux__header-blob--mint { left: 70%; top: 30px; width: 220px; height: 220px; }

.mdm-originaux__eyebrow {
    display: block;
    font-family: var(--m-font-hand);
    font-size: 24px;
    color: var(--m-gold);
    margin-bottom: 8px;
}

.mdm-originaux__title {
    font-family: var(--m-font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(2.5rem, 4vw + 1rem, 4.5rem);
    color: var(--m-ink);
    margin: 0 0 16px;
    line-height: 1;
}

.mdm-originaux__lead {
    font-family: var(--m-font-body);
    font-size: 16px;
    color: var(--m-ink-2);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* - Grille des cards (2 colonnes desktop, 1 mobile) - */
.mdm-originaux__grid-wrap {
    padding: 20px var(--m-page-padding) 60px;
}

.mdm-originaux__grid {
    max-width: 1100px;
    margin-inline: auto;
    /* Mur de galerie style Pinterest via CSS Columns natif :
       chaque card prend sa hauteur naturelle, et la card suivante
       comble naturellement le vide sous une card plus courte.
       Ordre des cards : « en colonnes » (1,3,5 a gauche / 2,4,6 a
       droite), pas en lignes - compromis assume vs JS Masonry. */
    column-count: 2;
    column-gap: 40px;
}

@media (max-width: 700px) {
    .mdm-originaux__grid { column-count: 1; column-gap: 28px; }
}

.mdm-original-card {
    /* Empeche qu'une card soit coupee entre 2 colonnes (cas typique
       d'une card en bas de colonne 1 qui deborderait en haut de col 2). */
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 40px;
}

@media (max-width: 700px) {
    .mdm-original-card { margin-bottom: 28px; }
}

/* - Card œuvre originale - */
.mdm-original-card {
    background: #fff;
    border-radius: 14px;
    box-shadow: var(--m-paper-shadow);
    overflow: hidden;
    transition: transform .25s var(--m-ease), box-shadow .25s var(--m-ease);
}

.mdm-original-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px -12px rgba(74, 56, 50, .25);
}

.mdm-original-card.is-sold { opacity: .7; }

.mdm-original-card__link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.mdm-original-card__media {
    position: relative;
    overflow: hidden;
    background: rgba(74, 56, 50, .04);
}

/* Mur de galerie : on force l'aspect-ratio DIRECTEMENT sur l'image
   (au lieu du parent). L'image dicte sa propre hauteur, le parent
   .media s'y adapte. Plus simple et plus robuste qu'agir sur le
   parent (qui se heurte au ratio intrinseque des <img>).
   Option B : rapprochement vers le carre pour reequilibrer
   surfaces portraits vs paysages.
   Portrait 5/6 : un peu moins dominant que 4/5
   Paysage  4/3 : un peu plus present que 3/2
   Carre    1/1 : reference. */
.mdm-original-card__media[data-orient="portrait"]  .mdm-original-card__img { aspect-ratio: 5 / 6; }
.mdm-original-card__media[data-orient="landscape"] .mdm-original-card__img { aspect-ratio: 4 / 3; }
.mdm-original-card__media[data-orient="square"]    .mdm-original-card__img { aspect-ratio: 1 / 1; }
/* Fallback portrait si data-orient absent */
.mdm-original-card__media .mdm-original-card__img { aspect-ratio: 4 / 5; }

.mdm-original-card__img {
    /* width:100% + aspect-ratio (defini par data-orient ci-dessous)
       = l'image dicte sa propre hauteur, qui dimensionne le parent.
       object-fit:cover croppe la source si son ratio differe de
       l'aspect-ratio cible. */
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform .4s var(--m-ease);
}

.mdm-original-card:hover .mdm-original-card__img {
    transform: scale(1.03);
}

/* Watermark visuel CSS : signature discrete en bas a droite. Note :
   le watermark "vrai" sera applique a l'image elle-meme via Imagick
   (cf. inc/originaux.php) pour proteger le download direct. Celui-ci
   est juste une signature visuelle complementaire. */
.mdm-original-card__watermark {
    position: absolute;
    bottom: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: rgba(74, 56, 50, .55);
    color: rgba(255, 248, 241, .9);
    font-family: var(--m-font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .05em;
    border-radius: 999px;
    backdrop-filter: blur(4px);
}

.mdm-original-card__watermark svg { opacity: .85; }

.mdm-original-card__badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--m-ink);
    color: var(--m-cream);
    padding: 4px 12px;
    font-family: var(--m-font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
    border-radius: 999px;
}

.mdm-original-card__body {
    padding: 18px 22px 22px;
}

.mdm-original-card__title {
    font-family: var(--m-font-display);
    font-style: italic;
    font-weight: 400;
    font-size: 24px;
    color: var(--m-ink);
    margin: 0 0 6px;
    line-height: 1.15;
}

.mdm-original-card__desc {
    font-family: var(--m-font-body);
    font-size: 13px;
    color: var(--m-ink-2);
    line-height: 1.5;
    margin: 0 0 16px;
}

.mdm-original-card__footer {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    border-top: 1px dashed rgba(74, 56, 50, .15);
    padding-top: 14px;
    gap: 12px;
}

.mdm-original-card__price {
    font-family: var(--m-font-display);
    font-style: italic;
    font-size: 22px;
    color: var(--m-gold);
    font-weight: 500;
}

.mdm-original-card__price del { color: var(--m-ink-2); font-size: 16px; opacity: .6; }

.mdm-original-card__cta {
    font-family: var(--m-font-body);
    font-size: 13px;
    color: var(--m-ink);
    font-weight: 500;
    border-bottom: 1px solid var(--m-ink);
    padding-bottom: 1px;
    transition: color .15s, border-color .15s;
}

.mdm-original-card:hover .mdm-original-card__cta {
    color: var(--m-gold);
    border-bottom-color: var(--m-gold);
}

.mdm-originaux__empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: var(--m-ink-2);
    font-style: italic;
    font-size: 16px;
}

/* - CTA bas de page - */
.mdm-originaux__cta-bottom {
    text-align: center;
    padding: 50px var(--m-page-padding) 40px;
    max-width: 640px;
    margin-inline: auto;
}

.mdm-originaux__cta-title {
    font-family: var(--m-font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.5rem, 2vw + 1rem, 2.25rem);
    color: var(--m-ink);
    margin: 0 0 12px;
    line-height: 1.2;
}

.mdm-originaux__cta-text {
    font-size: 15px;
    color: var(--m-ink-2);
    margin: 0 0 24px;
    line-height: 1.6;
}

.mdm-originaux__cta-button {
    background: var(--m-ink);
    color: var(--m-cream);
    padding: 16px 28px;
    border-radius: var(--m-radius-pill);
    font-family: var(--m-font-body);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: transform var(--m-fast), box-shadow var(--m-fast);
}

.mdm-originaux__cta-button:hover {
    color: var(--m-cream);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -8px rgba(74, 56, 50, .45);
}

/* ==========================================================================
   Page produit single - œuvre originale
   ========================================================================== */

.mdm-original-single { padding: 50px 0 80px; }

.mdm-original-single__inner {
    max-width: 1100px;
    margin-inline: auto;
    padding: 0 var(--m-page-padding);
}

.mdm-original-single__back {
    display: inline-block;
    margin-bottom: 28px;
    font-family: var(--m-font-body);
    font-size: 13px;
    color: var(--m-ink-2);
    text-decoration: none;
    transition: color .15s;
}

.mdm-original-single__back:hover { color: var(--m-gold); }

.mdm-original-single__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 56px;
    align-items: start;
}

@media (max-width: 900px) {
    .mdm-original-single__layout { grid-template-columns: 1fr; gap: 32px; }
}

/* - Visuel principal - */
.mdm-original-single__media {
    position: relative;
    background: #fff;
    padding: 18px;
    border-radius: 8px;
    box-shadow: var(--m-paper-shadow);
}

.mdm-original-single__media-link {
    display: block;
    position: relative;
    cursor: zoom-in;
    overflow: hidden;
    border-radius: 4px;
}

.mdm-original-single__img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform .4s var(--m-ease);
}

.mdm-original-single__media-link:hover .mdm-original-single__img {
    transform: scale(1.02);
}

.mdm-original-single__zoom-hint {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(74, 56, 50, .85);
    color: rgba(255, 248, 241, .95);
    font-family: var(--m-font-body);
    font-size: 12px;
    border-radius: 999px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s, transform .2s;
}

.mdm-original-single__media-link:hover .mdm-original-single__zoom-hint {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.mdm-original-single__sold-badge {
    position: absolute;
    top: 28px;
    left: 28px;
    background: var(--m-ink);
    color: var(--m-cream);
    padding: 8px 16px;
    font-family: var(--m-font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
    border-radius: 999px;
    z-index: 2;
}

.mdm-original-single__main {
    position: relative;
}

/* ==========================================================================
   Carrousel des vues secondaires (image principale + galerie WC)
   - Sous l'image principale, une rangee de vignettes scroll-snap.
   - Au clic, l'image principale change pour la vue selectionnee.
   - La vignette active a une bordure doree.
   - Fleches gauche/droite pour faire defiler la rangee si elle deborde.
   ========================================================================== */
.mdm-original-gallery {
    position: relative;
    display: grid;
    grid-template-columns: 32px 1fr 32px;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
}

.mdm-original-gallery__nav {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(74, 56, 50, .15);
    background: var(--m-cream);
    color: var(--m-ink);
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .15s;
    padding: 0;
    align-self: center;
    justify-self: center;
}
.mdm-original-gallery__nav:hover {
    background: var(--m-ink);
    color: var(--m-cream);
    border-color: var(--m-ink);
    transform: scale(1.05);
}
.mdm-original-gallery__nav--prev svg { transform: rotate(180deg); }

.mdm-original-gallery__track {
    display: flex;
    gap: 10px;
    list-style: none;
    padding: 4px 0;
    margin: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none; /* Firefox */
}
.mdm-original-gallery__track::-webkit-scrollbar { display: none; }

.mdm-original-gallery__item {
    flex: 0 0 auto;
    margin: 0;
    scroll-snap-align: start;
}

.mdm-original-gallery__thumb {
    display: block;
    width: 80px;
    height: 80px;
    padding: 0;
    border: 2px solid transparent;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    transition: transform .15s, border-color .2s, box-shadow .15s;
    position: relative;
}
.mdm-original-gallery__thumb img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}
.mdm-original-gallery__thumb:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px -4px rgba(74, 56, 50, .3);
}
.mdm-original-gallery__item.is-active .mdm-original-gallery__thumb {
    border-color: var(--m-gold);
    box-shadow: 0 0 0 1px var(--m-gold);
}

/* - Bloc info - */
.mdm-original-single__eyebrow {
    display: block;
    font-family: var(--m-font-hand);
    font-size: 22px;
    color: var(--m-gold);
    margin-bottom: 8px;
}

.mdm-original-single__title {
    font-family: var(--m-font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(2rem, 3vw + 1rem, 3rem);
    color: var(--m-ink);
    margin: 0 0 16px;
    line-height: 1.05;
}

.mdm-original-single__short {
    font-family: var(--m-font-body);
    font-size: 16px;
    color: var(--m-ink-2);
    line-height: 1.6;
    margin: 0 0 24px;
}

.mdm-original-single__price-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 0;
    border-top: 1px dashed rgba(74, 56, 50, .2);
    border-bottom: 1px dashed rgba(74, 56, 50, .2);
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.mdm-original-single__price {
    font-family: var(--m-font-display);
    font-style: italic;
    font-size: 32px;
    color: var(--m-gold);
    font-weight: 500;
    line-height: 1;
}

.mdm-original-single__price del { color: var(--m-ink-2); font-size: 22px; opacity: .6; }

.mdm-original-single__unique {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--m-font-body);
    font-size: 12px;
    color: var(--m-ink-2);
    text-transform: uppercase;
    letter-spacing: .15em;
    background: rgba(216, 168, 95, .1);
    padding: 6px 12px;
    border-radius: 999px;
}

.mdm-original-single__unique svg {
    transform: rotate(-12deg);
}

.mdm-original-single__shipping {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: rgba(205, 239, 216, .35);
    border-left: 3px solid #69ae7d;
    padding: 12px 14px;
    border-radius: 4px;
    margin-bottom: 24px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--m-ink);
}

.mdm-original-single__shipping strong { display: block; margin-bottom: 2px; }

.mdm-original-single__shipping-icon {
    color: #69ae7d;
    flex-shrink: 0;
    margin-top: 1px;
}

/* - Bouton acheter - */
.mdm-original-single__form { margin-bottom: 28px; }

.mdm-original-single__buy {
    background: var(--m-ink);
    color: var(--m-cream);
    border: none;
    padding: 16px 28px;
    border-radius: var(--m-radius-pill);
    font-family: var(--m-font-body);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: transform var(--m-fast), box-shadow var(--m-fast);
}

.mdm-original-single__buy:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -8px rgba(74, 56, 50, .45);
}

/* Bloc "deja dans le panier" : remplace le bouton Acquerir
   apres ajout. CTA primaire "Voir le panier" reutilise le
   style .mdm-original-single__buy (coherent visuellement).
   Lien secondaire "Voir d'autres oeuvres" plus discret. */
.mdm-original-single__in-cart {
    margin-bottom: 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
}

.mdm-original-single__in-cart-msg {
    margin: 0;
    padding: 10px 14px;
    background: rgba(196, 123, 123, .12);
    border-left: 3px solid var(--m-rose, #c47b7b);
    border-radius: 4px;
    font-size: 14px;
    color: var(--m-ink);
}

.mdm-original-single__continue {
    color: var(--m-ink);
    text-decoration: none;
    font-size: 13px;
    opacity: .75;
    transition: opacity var(--m-fast);
    padding: 4px 0;
}

.mdm-original-single__continue:hover {
    opacity: 1;
    text-decoration: underline;
}

.mdm-original-single__sold-out {
    background: rgba(74, 56, 50, .04);
    border-radius: 8px;
    padding: 18px;
    text-align: center;
    margin-bottom: 28px;
}

.mdm-original-single__sold-out p {
    margin: 0 0 8px;
    font-family: var(--m-font-display);
    font-style: italic;
    font-size: 18px;
    color: var(--m-ink);
}

.mdm-original-single__quote {
    font-family: var(--m-font-body);
    font-size: 13px;
    color: var(--m-ink);
    text-decoration: none;
    border-bottom: 1px solid var(--m-ink);
    padding-bottom: 1px;
}

.mdm-original-single__quote:hover { color: var(--m-gold); border-bottom-color: var(--m-gold); }

/* - Description longue - */
.mdm-original-single__description {
    margin: 0 0 32px;
    font-family: var(--m-font-body);
    font-size: 15px;
    line-height: 1.7;
    color: var(--m-ink);
}

.mdm-original-single__description p { margin: 0 0 1em; }
.mdm-original-single__description p:last-child { margin-bottom: 0; }

/* - Bloc détails - */
.mdm-original-single__details {
    background: linear-gradient(135deg, #FDECEF 0%, #FFF8F1 100%);
    border-radius: 8px;
    padding: 22px 26px;
}

.mdm-original-single__details-title {
    font-family: var(--m-font-display);
    font-style: italic;
    font-weight: 400;
    font-size: 22px;
    color: var(--m-ink);
    margin: 0 0 14px;
}

.mdm-original-single__details-list {
    margin: 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 10px 18px;
}

.mdm-original-single__details-list dt {
    font-family: var(--m-font-body);
    font-size: 12px;
    color: var(--m-gold);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 600;
    align-self: center;
}

.mdm-original-single__details-list dd {
    margin: 0;
    font-family: var(--m-font-body);
    font-size: 14px;
    color: var(--m-ink);
    line-height: 1.5;
}

/* - Lightbox CSS pure (declenche par data-mdm-zoom + JS minimal) - */
.mdm-lightbox {
    position: fixed; inset: 0; z-index: 99999;
    background: rgba(74, 56, 50, .92);
    display: flex; align-items: center; justify-content: center;
    padding: 30px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
    cursor: zoom-out;
}

.mdm-lightbox.is-open {
    opacity: 1;
    pointer-events: auto;
}

.mdm-lightbox__img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    box-shadow: 0 20px 60px -10px rgba(0, 0, 0, .6);
    animation: mdm-lightbox-pop .25s ease;
}

@keyframes mdm-lightbox-pop {
    from { transform: scale(.96); opacity: .8; }
    to   { transform: scale(1); opacity: 1; }
}

.mdm-lightbox__close {
    position: absolute;
    top: 20px; right: 24px;
    background: rgba(255, 248, 241, .15);
    color: var(--m-cream);
    border: none;
    width: 40px; height: 40px;
    border-radius: 50%;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s;
}

.mdm-original-single__layout :where(.mdm-form-grid--2) { grid-template-columns: 1fr; }

/* Mention PI discrete sous la fiche œuvre. */
.mdm-original-single__rights {
    margin-top: var(--m-space-md);
    padding-top: var(--m-space-sm);
    border-top: 1px solid rgba(0, 0, 0, .06);
    font-size: var(--m-fs-caption);
    line-height: 1.5;
    color: var(--m-ink-2);
    opacity: .8;
}