/*
 * MAX Products v3 — styles tableau cours pièces + single CPT.
 * Refonte 26/05/2026 : vraie <table> HTML avec sticky-left mobile, scroll horizontal.
 * Aligné sur le design system europiecedor.fr (Plus Jakarta Sans, marine + or + cream).
 */

.maxprod-grid,
.maxprod-single {
    --maxprod-marine: #0F2744;
    --maxprod-or: #C9A24A;
    --maxprod-or-clair: #D9B766;
    --maxprod-or-fonce: #A6852E;
    --maxprod-vert-ok: #2C7A4B;
    --maxprod-corail: #D85A4A;
    --maxprod-cream: #FAF7F0;
    --maxprod-gris-1: #F7F6F2;
    --maxprod-gris-3: #B8B5AD;
    --maxprod-text: #4A4742;
    --maxprod-label: #6E6A62;
    --maxprod-line: rgba(15, 39, 68, 0.10);
    --maxprod-line-strong: rgba(15, 39, 68, 0.20);
    --maxprod-radius: 6px;
    --maxprod-radius-lg: 12px;
    --maxprod-shadow-sm: 0 2px 8px rgba(15, 39, 68, 0.05);
    --maxprod-ease: cubic-bezier(0.25, 1, 0.5, 1);

    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    color: var(--maxprod-text);
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
}
.maxprod-grid *,
.maxprod-grid *::before,
.maxprod-grid *::after,
.maxprod-single *,
.maxprod-single *::before,
.maxprod-single *::after { box-sizing: border-box; }

/* ============ Bar live ============ */
.maxprod-grid__bar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 14px;
}
.maxprod-live {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: #fff;
    border: 1px solid var(--maxprod-line);
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    color: var(--maxprod-marine);
    box-shadow: var(--maxprod-shadow-sm);
}
.maxprod-live::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--maxprod-vert-ok);
    box-shadow: 0 0 0 0 rgba(46, 190, 126, 0.65);
    animation: maxprod-pulse 2.4s var(--maxprod-ease) infinite;
}
@keyframes maxprod-pulse {
    0% { box-shadow: 0 0 0 0 rgba(46, 190, 126, 0.5); }
    70% { box-shadow: 0 0 0 9px rgba(46, 190, 126, 0); }
    100% { box-shadow: 0 0 0 0 rgba(46, 190, 126, 0); }
}

/* ============ Hint scroll horizontal (mobile/tablet) ============ */
.maxprod-scroll-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 0 10px;
    padding: 8px 14px;
    background: rgba(201, 162, 74, 0.08);
    border: 1px dashed rgba(166, 133, 46, 0.35);
    border-radius: 8px;
    color: var(--maxprod-or-fonce);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-align: center;
}
.maxprod-scroll-hint__arrow {
    display: inline-block;
    font-size: 16px;
    font-weight: 800;
    color: var(--maxprod-or-fonce);
    animation: maxprod-arrow-pulse 1.6s ease-in-out infinite;
}
.maxprod-scroll-hint__arrow:first-child { animation-delay: 0s; }
.maxprod-scroll-hint__arrow:last-child  { animation-delay: 0.8s; }
@keyframes maxprod-arrow-pulse {
    0%, 100% { transform: translateX(0); opacity: 0.55; }
    50%      { transform: translateX(3px); opacity: 1; }
}
.maxprod-scroll-hint__arrow:first-child { animation-name: maxprod-arrow-pulse-left; }
@keyframes maxprod-arrow-pulse-left {
    0%, 100% { transform: translateX(0); opacity: 0.55; }
    50%      { transform: translateX(-3px); opacity: 1; }
}

/* ============ Wrapper scrollable horizontal ============ */
.maxprod-table-wrap {
    overflow-x: auto;
    overflow-y: visible;
    background: #fff;
    -webkit-overflow-scrolling: touch;
    position: relative;
    /* Touch behavior : laisser le browser gérer pan-x ET pan-y (pour que swipe vertical sur table scrolle la page) */
    touch-action: pan-x pan-y;
    /* Empêcher le gesture "back" navigateur au bout du scroll horizontal */
    overscroll-behavior-x: contain;
    /* Scrollbar fine visible sur mobile pour signaler la scrollabilité */
    scrollbar-width: thin;
    scrollbar-color: rgba(15, 39, 68, 0.35) rgba(15, 39, 68, 0.05);
}
/* Encadrement du wrap — desktop ≥1024px seulement (mobile = full-bleed pour gagner espace latéral) */
@media (min-width: 1024px) {
    .maxprod-table-wrap {
        border: 1px solid var(--maxprod-line);
        border-radius: var(--maxprod-radius-lg);
        box-shadow: var(--maxprod-shadow-sm);
    }
}
.maxprod-table-wrap:focus-visible {
    outline: 2px solid var(--maxprod-or-clair);
    outline-offset: 2px;
}

/* Scrollbar WebKit (iOS, Chrome, Safari) — toujours visible sur mobile */
.maxprod-table-wrap::-webkit-scrollbar {
    height: 8px;
    -webkit-appearance: none;
}
.maxprod-table-wrap::-webkit-scrollbar-track {
    background: rgba(15, 39, 68, 0.05);
    border-radius: 0 0 var(--maxprod-radius-lg) var(--maxprod-radius-lg);
}
.maxprod-table-wrap::-webkit-scrollbar-thumb {
    background: rgba(15, 39, 68, 0.35);
    border-radius: 4px;
}
.maxprod-table-wrap::-webkit-scrollbar-thumb:hover {
    background: rgba(15, 39, 68, 0.55);
}

/* Pas de gradient indicateur "scroll dispo" — le hint texte au-dessus du tableau suffit. */

/* ============ Table HTML stricte ============ */
.maxprod-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 560px;
    font-variant-numeric: tabular-nums;
    margin: 0;
}
.maxprod-table.has-prime { min-width: 640px; }

/* Header */
.maxprod-table thead th {
    background: linear-gradient(180deg, #e8f1f9 0%, #d6e7f5 100%);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--maxprod-marine);
    padding: 14px 16px;
    text-align: left;
    line-height: 1.3;
    white-space: nowrap;
    border-bottom: 1px solid var(--maxprod-line-strong);
}
.maxprod-table thead th.maxprod-th--num { text-align: right; }
.maxprod-table thead th.maxprod-th--img { width: 70px; padding: 14px 0 14px 16px; }

/* Body cells */
.maxprod-table tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--maxprod-line);
    vertical-align: middle;
    white-space: nowrap;
    font-size: 14px;
    color: var(--maxprod-text);
    background: #fff;
}
.maxprod-table tbody tr:last-child td { border-bottom: 0; }
.maxprod-table tbody tr:hover td { background: var(--maxprod-gris-1); }
.maxprod-cell--num { text-align: right; }

/* Image */
.maxprod-th--img,
.maxprod-cell--img {
    width: 84px;
    min-width: 84px;
    max-width: 84px;
    padding: 8px 0 8px 16px !important;
}
.maxprod-cell--img img,
.maxprod-img-placeholder {
    width: 56px;
    height: 56px;
    object-fit: contain;
    border-radius: 4px;
    background: #fff;
    display: block;
    flex-shrink: 0;
}
.maxprod-img-placeholder { background: var(--maxprod-gris-1); }

/* Nom */
.maxprod-cell--name {
    padding-left: 8px !important;
    white-space: normal;
}
.maxprod-name,
.maxprod-name-link {
    display: block;
    /* max-width sur le <a>/<span> car table-layout: auto ignore max-width sur <td> */
    max-width: 150px;
    font-size: 14.5px;
    font-weight: 800;
    color: var(--maxprod-marine);
    line-height: 1.2;
    letter-spacing: -0.015em;
    text-decoration: none;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
}
.maxprod-name-link:hover { color: var(--maxprod-or-fonce); }

/* Poids sous le nom (info statique : brut + or fin) */
.maxprod-name-weight {
    display: block;
    margin-top: 3px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--maxprod-label);
    letter-spacing: 0;
    line-height: 1.3;
    white-space: normal;
    font-variant-numeric: tabular-nums;
}

/* Achat prominent (couleur or-fonce) */
.maxprod-cell--buy strong {
    font-size: 15px;
    font-weight: 800;
    color: var(--maxprod-or-fonce);
    letter-spacing: -0.01em;
}
/* Vente net (marine fort) */
.maxprod-cell--sell strong {
    font-size: 15px;
    font-weight: 800;
    color: var(--maxprod-marine);
    letter-spacing: -0.01em;
}

/* Prime */
.maxprod-cell--prime { font-weight: 700; color: var(--maxprod-label); }
.maxprod-cell--prime.is-up { color: var(--maxprod-vert-ok); }
.maxprod-cell--prime.is-down { color: var(--maxprod-corail); }

/* ============ Sticky-left : image + nom (mobile/tablet) ============ */
.maxprod-table thead th:nth-child(1),
.maxprod-table thead th:nth-child(2),
.maxprod-table tbody td:nth-child(1),
.maxprod-table tbody td:nth-child(2) {
    position: sticky;
    z-index: 1;
}

/* Header sticky : fond gradient opaque */
.maxprod-table thead th:nth-child(1) {
    left: 0;
    z-index: 3;
}
.maxprod-table thead th:nth-child(2) {
    left: 84px;
    z-index: 3;
}

/* Body sticky : fond blanc opaque */
.maxprod-table tbody td:nth-child(1) {
    left: 0;
    z-index: 1;
}
.maxprod-table tbody td:nth-child(2) {
    left: 84px;
    z-index: 1;
}

/* Pas de compositing layer transform — créait des artefacts visuels sur iOS Safari (ombre qui suit). */
.maxprod-table tbody tr:hover td:nth-child(1),
.maxprod-table tbody tr:hover td:nth-child(2) {
    background: var(--maxprod-gris-1);
}

/* ============ Desktop ≥1024px : pas de scroll, sticky désactivé ============ */
@media (min-width: 1024px) {
    .maxprod-table { min-width: 0; }
    .maxprod-table.has-prime { min-width: 0; }
    .maxprod-scroll-hint { display: none; }
    .maxprod-table-wrap::-webkit-scrollbar { display: none; }
    /* Sticky désactivée → séparateur col 2 inutile en desktop */
    .maxprod-table thead th:nth-child(2)::after,
    .maxprod-table tbody td:nth-child(2)::after { display: none; }
    .maxprod-table thead th:nth-child(2),
    .maxprod-table tbody td:nth-child(2) { border-right: 0; }

    .maxprod-table thead th:nth-child(1),
    .maxprod-table thead th:nth-child(2),
    .maxprod-table tbody td:nth-child(1),
    .maxprod-table tbody td:nth-child(2) {
        position: static;
        box-shadow: none;
    }
    .maxprod-table tbody td { padding: 14px 16px; font-size: 14.5px; }
    .maxprod-cell--name { white-space: nowrap; }
    .maxprod-name,
    .maxprod-name-link {
        display: inline;
        max-width: none;
        white-space: nowrap;
        font-size: 15px;
    }
    .maxprod-cell--buy strong,
    .maxprod-cell--sell strong { font-size: 16px; }
}

/* ============ Mobile compact (<480px) ============ */
@media (max-width: 479px) {
    .maxprod-table { min-width: 520px; }
    .maxprod-table.has-prime { min-width: 600px; }
    .maxprod-table tbody td { padding: 10px 12px; font-size: 13px; }
    .maxprod-table thead th { padding: 12px 12px; font-size: 10.5px; }
    .maxprod-name,
    .maxprod-name-link { max-width: 130px; font-size: 13.5px; }
    .maxprod-cell--buy strong,
    .maxprod-cell--sell strong { font-size: 14px; }
    .maxprod-th--img,
    .maxprod-cell--img {
        width: 72px;
        min-width: 72px;
        max-width: 72px;
        padding: 6px 0 6px 12px !important;
    }
    .maxprod-cell--img img,
    .maxprod-img-placeholder { width: 48px; height: 48px; }
    .maxprod-table tbody td:nth-child(2),
    .maxprod-table thead th:nth-child(2) { left: 72px; }
}

/* ============================================================
 * Bascule TABLE (desktop ≥1024px) / CARTES ACCORDÉON (mobile <1024px)
 * Refonte cartes 29/05/2026 — accordéon natif <details>, achat/vente repliés.
 * ============================================================ */
.maxprod-grid { interpolate-size: allow-keywords; } /* permet l'anim de hauteur "auto" sur <details> */

.maxprod-table-wrap { display: none; }          /* masquée par défaut (mobile) */
.maxprod-cards { display: flex; flex-direction: column; gap: 12px; }

@media (min-width: 1024px) {
    .maxprod-table-wrap { display: block; }
    .maxprod-cards { display: none; }
}

/* ---- Carte accordéon (<details>) ---- */
.maxprod-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--maxprod-line);
    border-radius: var(--maxprod-radius-lg);
    overflow: hidden;
    box-shadow: var(--maxprod-shadow-sm);
    transition: box-shadow .25s ease, border-color .25s ease;
}
.maxprod-card::before {
    content: "";
    position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--maxprod-or);
    transform: scaleY(0); transform-origin: top;
    transition: transform .28s cubic-bezier(.25, 1, .5, 1);
}
.maxprod-card[open] { box-shadow: 0 8px 24px rgba(15, 39, 68, .12); border-color: rgba(201, 162, 74, .5); }
.maxprod-card[open]::before { transform: scaleY(1); }

/* Déclencheur = en-tête + pied, cliquable (toggle natif) */
.maxprod-card__trigger { display: block; cursor: pointer; list-style: none; }
.maxprod-card__trigger::-webkit-details-marker { display: none; }
.maxprod-card__trigger:focus-visible { outline: 2px solid var(--maxprod-or-clair); outline-offset: -2px; }

/* En-tête : image + nom/poids + cotation (en grand) */
.maxprod-card__head { display: flex; align-items: center; gap: 12px; padding: 14px; }
.maxprod-card__thumb {
    width: 48px; height: 48px; flex: 0 0 48px;
    border-radius: 11px; background: var(--maxprod-cream); border: 1px solid var(--maxprod-line);
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.maxprod-card__thumb img,
.maxprod-card__thumb .maxprod-img-placeholder { width: 42px; height: 42px; object-fit: contain; display: block; }
.maxprod-card__id { min-width: 0; flex: 1; }
.maxprod-card__name {
    display: block; font-size: 18px; font-weight: 800; line-height: 1.22;
    color: var(--maxprod-marine); letter-spacing: -0.02em;
}
.maxprod-card__weight {
    display: block; margin-top: 3px; font-size: 12px; font-weight: 600;
    color: var(--maxprod-label); line-height: 1.3; font-variant-numeric: tabular-nums;
}
.maxprod-card__cot { margin-left: auto; text-align: right; flex: 0 0 auto; padding-left: 8px; }
.maxprod-card__cot-lab {
    display: block; font-size: 9px; font-weight: 800; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--maxprod-label); white-space: nowrap;
}
.maxprod-card__cot-val {
    display: block; margin-top: 1px; font-size: 24px; font-weight: 800; line-height: 1.02;
    color: var(--maxprod-marine); letter-spacing: -0.025em; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.maxprod-card__eu { font-size: 14px; font-weight: 700; }

/* Pied : CPoR + prime + chevron (même ligne, pas de ligne en plus) */
.maxprod-card__foot {
    display: flex; align-items: center; gap: 8px; padding: 0 14px 12px;
    font-size: 11px; color: var(--maxprod-label); font-variant-numeric: tabular-nums;
}
.maxprod-card__cpor { margin-right: auto; }
.maxprod-card__cpor b { color: var(--maxprod-text); font-weight: 700; }
.maxprod-card__prime {
    flex: 0 0 auto; padding: 2px 9px; border-radius: 100px; font-size: 11px; font-weight: 700;
    white-space: nowrap; color: var(--maxprod-label); background: rgba(15, 39, 68, .06);
}
.maxprod-card__prime.is-up { color: var(--maxprod-vert-ok); background: rgba(44, 122, 75, .12); }
.maxprod-card__prime.is-down { color: var(--maxprod-corail); background: rgba(216, 90, 74, .12); }
.maxprod-card__chev {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%; color: var(--maxprod-or-fonce);
    background: rgba(201, 162, 74, .12); font-size: 10px; line-height: 1;
    transition: transform .28s cubic-bezier(.25, 1, .5, 1), background .2s ease;
}
.maxprod-card__trigger:hover .maxprod-card__chev { background: rgba(201, 162, 74, .22); }
.maxprod-card[open] .maxprod-card__chev { transform: rotate(180deg); }

/* Bloc révélé : achat/vente — animation de hauteur via ::details-content (dégrade en snap sinon) */
.maxprod-card::details-content {
    block-size: 0; overflow: hidden;
    transition: block-size .32s cubic-bezier(.25, 1, .5, 1), content-visibility .32s allow-discrete;
}
.maxprod-card[open]::details-content { block-size: auto; }
.maxprod-card__prices { display: flex; border-top: 1px solid var(--maxprod-line); }
.maxprod-card__cell { flex: 1; padding: 14px; text-align: center; }
.maxprod-card__cell + .maxprod-card__cell { border-left: 1px solid var(--maxprod-line); }
.maxprod-card__cell--buy { background: rgba(201, 162, 74, 0.09); }
.maxprod-card__plab {
    display: block; margin-bottom: 4px; font-size: 10px; font-weight: 800; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--maxprod-label);
}
.maxprod-card__cell--buy .maxprod-card__plab { color: var(--maxprod-or-fonce); }
.maxprod-card__pval {
    display: block; font-size: 22px; font-weight: 800; line-height: 1;
    color: var(--maxprod-marine); letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.maxprod-card__cell--buy .maxprod-card__pval { color: var(--maxprod-or-fonce); }

/* Lien fiche CPT (révélé au dépli) */
.maxprod-card__fiche {
    display: block; text-align: center; padding: 11px 14px;
    border-top: 1px solid var(--maxprod-line);
    font-size: 12.5px; font-weight: 700; color: var(--maxprod-marine); text-decoration: none;
}
.maxprod-card__fiche:hover { color: var(--maxprod-or-fonce); background: rgba(201, 162, 74, .05); }

/* ============ Inline price (shortcode [max_product_price]) ============ */
.maxprod-inline-price {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 800;
    color: var(--maxprod-marine);
    font-variant-numeric: tabular-nums;
}
.maxprod-inline-price--prime { color: var(--maxprod-vert-ok); }
.maxprod-inline-price small {
    font-weight: 500;
    font-size: 0.8em;
    color: var(--maxprod-label);
    margin-left: 2px;
}

/* ============ Single page produit ============ */
.maxprod-single {
    max-width: 920px;
    margin: 0 auto;
    padding: 48px 24px 64px;
}

.maxprod-breadcrumb {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 12.5px;
    color: var(--maxprod-label);
    margin-bottom: 16px;
}
.maxprod-breadcrumb a {
    color: var(--maxprod-marine);
    text-decoration: none;
    font-weight: 600;
}
.maxprod-breadcrumb a:hover { text-decoration: underline; }
.maxprod-breadcrumb span:not(:last-child) { color: var(--maxprod-gris-3); }

.maxprod-single__title {
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 900;
    color: var(--maxprod-marine);
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin: 0 0 8px;
}

.maxprod-single__meta {
    font-size: 14px;
    color: var(--maxprod-label);
    margin: 0 0 32px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: baseline;
}
.maxprod-single__meta strong {
    color: var(--maxprod-marine);
    font-weight: 700;
}
.maxprod-single__ref {
    margin-left: auto;
    font-size: 12px;
    letter-spacing: 0.05em;
}

.maxprod-single__quote {
    background: #fff;
    border: 1px solid var(--maxprod-line);
    border-radius: var(--maxprod-radius-lg);
    padding: 24px;
    margin-bottom: 32px;
    box-shadow: var(--maxprod-shadow-sm);
}
.maxprod-quote__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
@media (min-width: 640px) {
    .maxprod-quote__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .maxprod-quote__grid { grid-template-columns: repeat(4, 1fr); }
}

.maxprod-quote__cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px;
    background: var(--maxprod-cream);
    border-radius: var(--maxprod-radius);
    border: 1px solid var(--maxprod-line);
}
.maxprod-quote__label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--maxprod-label);
}
.maxprod-quote__val {
    font-size: 28px;
    font-weight: 900;
    color: var(--maxprod-marine);
    letter-spacing: -0.02em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.maxprod-quote__val--buy { color: var(--maxprod-or-fonce); }
.maxprod-quote__val--intl { color: var(--maxprod-label); font-weight: 700; }
.maxprod-quote__sub {
    font-size: 12px;
    color: var(--maxprod-label);
    margin-top: 2px;
}
.maxprod-quote__cell--prime.is-up .maxprod-quote__val { color: var(--maxprod-vert-ok); }
.maxprod-quote__cell--prime.is-down .maxprod-quote__val { color: var(--maxprod-corail); }

.maxprod-quote__fresh {
    margin: 16px 0 0;
    font-size: 12px;
    color: var(--maxprod-label);
    font-style: italic;
}

.maxprod-single__content {
    font-size: 16.5px;
    line-height: 1.7;
    color: var(--maxprod-text);
}
.maxprod-single__content h2 {
    color: var(--maxprod-marine);
    font-size: clamp(22px, 2.5vw, 28px);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 40px 0 14px;
    line-height: 1.2;
}
.maxprod-single__content p {
    margin: 0 0 1em;
}
.maxprod-single__content strong {
    color: var(--maxprod-marine);
    font-weight: 700;
}

/* ============ Single quote — bloc dual (cote bourse / cote refus) ============ */
.maxprod-quote__dual {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
@media (min-width: 640px) {
    .maxprod-quote__dual { grid-template-columns: repeat(2, 1fr); }
}
.maxprod-quote__cell--dual { padding: 20px; }
.maxprod-quote__cell--dual .maxprod-quote__val { margin: 4px 0; }
.maxprod-quote__intl-line {
    margin: 16px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--maxprod-line);
    font-size: 13px;
    color: var(--maxprod-label);
}