/*
    diamond.diams.com, refonte 2026 (03/11/2026) : habillage du moteur de diamants sur le modele du site www
    (planches M1 et M2, palette neutre). Feuille chargee apres diams.css : elle ne remplace rien dans diams.css,
    elle redefinit les regles concernees. La base de police reste 10px (les em de diams.css ne bougent pas) ;
    toutes les tailles ci-dessous sont en px.
    Polices : les memes que le theme du site (Source Sans 3, Marcellus), servies depuis css/fonts/.
*/

@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/source-sans/source-sans-3-latin-300-normal.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/source-sans/source-sans-3-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/source-sans/source-sans-3-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/source-sans/source-sans-3-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Marcellus'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/marcellus/marcellus-latin-400-normal.woff2') format('woff2'); }

:root {
    --diams-ink: #141414;
    --diams-muted: #5c5c5a;
    --diams-eyebrow: #55524d;
    --diams-line: #e3e3e1;
    --diams-frame: #cfcfcc;
    --diams-soft: #f5f5f4;
    --diams-head: #0e0e0e;
    --diams-head-muted: #b9b5ad;
    --diams-head-line: #2a2a2a;
    --diams-foot: #141414;
    --diams-foot-muted: #a9a59d;
    --diams-foot-line: #2e2e2e;
    --diams-sans: 'Source Sans 3', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --diams-serif: Marcellus, Georgia, 'Times New Roman', serif;
}

/* ---------- Base ---------- */
body, html {
    color: var(--diams-ink);
    font-family: var(--diams-sans);
    font-weight: 400;
}

main {
    padding-bottom: 64px;
}

.wrapper-content,
main.search-page .wrapper-content:not(.results) {
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    max-width: 1280px;
    padding-left: 24px;
    padding-right: 24px;
}

h1, h2, h3, .title {
    color: var(--diams-ink);
    font-family: var(--diams-serif);
    font-weight: 400;
    letter-spacing: 0;
}

h2 a, h3 a {
    color: var(--diams-ink);
}

p {
    color: var(--diams-ink);
    font-size: 15px;
    line-height: 1.6;
}

strong {
    color: var(--diams-muted);
}

/* ---------- En-tete : bandeau noir, logo blanc, retour au site, langue et devise ---------- */
.wrapper > header {
    background: var(--diams-head);
    border-bottom: 1px solid var(--diams-head-line);
    color: #ffffff;
    text-align: left;
}

header div.wrapper-content {
    margin-bottom: 0;
}

.wrapper > header > .wrapper-content {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 16px 32px;
    min-height: 84px;
    min-width: auto;
}

.wrapper > header > .wrapper-content > a {
    align-items: center;
    display: flex;
    gap: 14px;
    order: 0;
}

.wrapper > header > .wrapper-content > a::after {
    border-left: 1px solid var(--diams-head-line);
    color: var(--diams-head-muted);
    content: 'Diamond search engine';
    font-family: var(--diams-sans);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .14em;
    line-height: 1.6;
    padding-left: 14px;
    text-transform: uppercase;
    white-space: nowrap;
}

html:lang(fr) .wrapper > header > .wrapper-content > a::after { content: 'Moteur de recherche de diamants'; }
html:lang(de) .wrapper > header > .wrapper-content > a::after { content: 'Diamant-Suchmaschine'; }

.logo,
header .logo {
    display: block;
    height: 36px;
    margin: 0;
    width: auto;
}

header .topbar-link {
    margin-left: auto;
    order: 1;
    position: static;
}

header .topbar-link a,
.topbar-link a {
    background: none;
    border-radius: 0;
    color: var(--diams-head-muted);
    display: block;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .14em;
    padding: 0;
    text-transform: uppercase;
}

header .topbar-link a::before {
    content: '\2190\00a0';
}

header .topbar-link a:hover,
.topbar-link a:hover {
    background: none;
    color: #ffffff;
}

header .topbar,
.topbar {
    align-items: center;
    background: transparent;
    display: flex;
    gap: 10px;
    min-height: auto;
    order: 2;
    padding: 0;
    position: static;
}

header .topbar .lang,
header .topbar .currency {
    margin: 0;
}

header .topbar .dropdown dt div {
    background: transparent;
    border: 1px solid var(--diams-head-line);
    border-radius: 0;
    box-sizing: border-box;
    color: #ffffff;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .14em;
    line-height: 20px;
    min-height: 42px;
    padding: 10px 32px 10px 12px;
    text-transform: uppercase;
}

header .topbar .dropdown dt div:hover {
    background: var(--diams-head-line);
}

header .topbar .dropdown dt div::after {
    border-top-color: #ffffff;
    margin-top: -2px;
    top: 50%;
}

header .topbar .dropdown dd ul {
    background: var(--diams-head);
    border: 1px solid var(--diams-head-line);
    border-radius: 0;
    color: #ffffff;
    font-size: 13px;
    letter-spacing: .06em;
    top: 2px;
}

header .topbar .dropdown dd ul li div {
    border-radius: 0;
    color: #ffffff;
    padding: 8px 12px;
}

header .topbar .dropdown dd ul li div:hover {
    background: var(--diams-head-line);
}

/* ---------- Formes : rangee sobre sous l'en-tete (toutes les pages sauf le choix de la forme) ---------- */
header .navigation,
.navigation {
    background: #ffffff;
    border-bottom: 1px solid var(--diams-line);
    color: var(--diams-ink);
    padding: 0;
}

header .navigation ul li a {
    color: var(--diams-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}

header .navigation ul li a:hover,
header .navigation ul li a.active {
    color: var(--diams-ink);
}

header .navigation ul li a span {
    border-bottom: 2px solid transparent;
    padding: 8px 0 12px;
    text-align: center;
}

header .navigation ul li a:hover span,
header .navigation ul li a.active span {
    border-color: var(--diams-ink);
}

header .navigation ul li a .image {
    margin: 0;
    min-height: auto;
}

header .navigation ul li a .image svg {
    display: block;
    fill: currentColor;
    height: 34px;
    width: 34px;
}

@media (min-width: 880px) {
    header .navigation ul.owl-carousel {
        display: flex;
        gap: 8px;
        justify-content: space-between;
        margin: 0 auto;
        max-width: 1280px;
        padding: 14px 24px 0;
    }

    header .navigation ul.owl-carousel li {
        margin: 0;
    }

    header .navigation ul.owl-carousel li a {
        gap: 2px;
        min-width: 96px;
        padding: 6px 10px 0;
    }
}

@media (max-width: 879px) {
    header .navigation {
        padding: 12px 0 8px;
    }

    header .navigation ul li a .image svg {
        margin: 0 auto;
    }

    .owl-prev::after,
    .owl-next::after {
        filter: grayscale(1) brightness(.25);
    }
}

/* Page du choix de la forme : la rangee de l'en-tete est masquee, les formes sont les tuiles de la page */
body.page-forme header .navigation {
    display: none;
}

/* ---------- Criteres : bande gris tres clair, quatre listes ---------- */
.diamond {
    background: var(--diams-soft);
    border-bottom: 1px solid var(--diams-line);
    min-height: auto;
    padding: 22px 0 24px;
}

.diamond .wrapper-content,
.fixed .diamond .wrapper-content {
    padding: 0 24px;
}

.fixed .diamond {
    box-shadow: 0 1px 0 var(--diams-line);
    padding: 12px 0;
}

.search-light {
    margin: 0;
    min-height: auto;
}

.search-light span label {
    color: var(--diams-eyebrow);
    font-family: var(--diams-sans);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .14em;
    padding: 0 0 8px;
    text-transform: uppercase;
}

.search-light span label i {
    background: transparent;
    border: 1px solid var(--diams-frame);
    border-radius: 50%;
    box-sizing: border-box;
    color: var(--diams-eyebrow);
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
    height: 20px;
    line-height: 18px;
    margin: 0;
    text-align: center;
    top: 0;
    width: 20px;
}

.search-light span label i:hover {
    border-color: var(--diams-ink);
    color: var(--diams-ink);
}

.search-light .dropdown dt div {
    background: #ffffff;
    border: 1px solid var(--diams-ink);
    border-radius: 0;
    box-sizing: border-box;
    color: var(--diams-ink);
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    min-height: 48px;
    padding: 12px 40px 12px 14px;
}

.search-light .dropdown dt div:hover {
    background: #ffffff;
}

.search-light .dropdown dd ul {
    background: #ffffff;
    border: 1px solid var(--diams-ink);
    border-radius: 0;
    color: var(--diams-ink);
    font-size: 14px;
    top: 2px;
}

.search-light .dropdown dd ul li div {
    border-radius: 0;
    color: var(--diams-ink);
    padding: 8px 12px;
}

.search-light .dropdown dd ul li div:hover {
    background: var(--diams-soft);
}

@media (min-width: 768px) {
    .search-light {
        gap: 24px;
    }

    .search-light > span {
        margin: 0;
        max-width: none;
        padding: 0;
        width: 25%;
    }

    .search-light .dropdown dt div::after {
        margin-top: -6px;
        top: 50%;
    }
}

@media (max-width: 767px) {
    div .diamond .wrapper-content,
    .fixed div.diamond .wrapper-content {
        padding: 0 16px;
    }

    div.search-light {
        gap: 6px;
    }

    div.search-light > span {
        background: #ffffff;
        border: 1px solid var(--diams-ink);
        flex: 1 1 0;
        max-width: none;
        padding: 0;
        width: auto;
    }

    div.search-light span label {
        font-size: 10px;
        letter-spacing: .08em;
        padding: 4px 6px;
    }
}

/* ---------- Fil d'Ariane et titre ---------- */
nav.breadcrumb {
    color: var(--diams-muted);
    font-size: 12px;
    letter-spacing: .06em;
    line-height: 1.6;
    padding-top: 22px;
}

nav.breadcrumb li {
    color: var(--diams-muted);
}

nav.breadcrumb li + li::before {
    color: var(--diams-frame);
}

nav.breadcrumb a {
    color: var(--diams-muted);
    text-decoration: none;
}

nav.breadcrumb a:hover {
    color: var(--diams-ink);
    text-decoration: underline;
}

main .header {
    text-align: left;
}

main.search-page .header .wrapper-content {
    align-items: baseline;
    display: grid;
    gap: 6px 32px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding-bottom: 8px;
    padding-top: 18px;
}

h1,
main .header h1 {
    color: var(--diams-ink);
    font-family: var(--diams-serif);
    font-size: 40px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.1;
    margin: 0;
    padding: 0;
}

main .header h1::after {
    display: none;
}

main.search-page .header p {
    color: var(--diams-muted);
    font-size: 16px;
    grid-column: 1 / -1;
    line-height: 1.65;
    margin: 6px 0 0;
    max-width: 780px;
    text-align: left;
}

main.search-page .header p b,
main.search-page .header p strong {
    color: var(--diams-ink);
    font-weight: 600;
}

main .header .result-info,
.result-info {
    color: var(--diams-eyebrow);
    font-size: 11.5px;
    font-weight: 600;
    grid-column: 2;
    justify-self: end;
    letter-spacing: .14em;
    opacity: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

body.page-forme main .header h1 {
    font-size: 52px;
}

/* ---------- Cartes des etapes (carats, couleurs, puretes) ---------- */
main.search-page .wrapper-content:not(.results) > ul {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
    justify-content: start;
    margin: 0;
    padding: 20px 0 8px;
}

main.search-page ul li {
    display: block;
    float: none;
    margin: 0;
    padding: 0;
    width: auto !important;
}

main.search-page ul li article,
main.search-page ul li .article {
    align-items: center;
    background: #ffffff;
    border: 1px solid var(--diams-line);
    border-radius: 0;
    box-shadow: none;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
    justify-content: flex-start;
    margin: 0;
    padding: 24px 16px 20px;
    position: relative;
    text-align: center;
    transition: border-color .15s linear;
    width: 100%;
}

main.search-page ul li article::before {
    display: none;
}

main.search-page ul li article:hover,
main.search-page ul li .article:hover {
    background: #ffffff;
    border: 1px solid var(--diams-ink);
}

main.search-page ul li article header {
    align-items: center;
    background: transparent;
    border: 0;
    color: inherit;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 8px;
    text-align: center;
}

main.search-page ul li article figure {
    align-items: center;
    background: transparent;
    border-radius: 0;
    display: flex;
    height: auto;
    justify-content: center;
    margin: 0 0 4px;
    position: static;
    transform: none;
    width: auto;
}

main.search-page ul li article figure img {
    margin: 0;
    max-height: 90px;
    max-width: 100%;
}

main.search-page .size ul li article figure img,
main.search-page .step4 ul li article figure img {
    filter: grayscale(1) brightness(.55);
}

main.search-page ul li article h2 {
    color: var(--diams-ink);
    font-family: var(--diams-serif);
    font-size: 19px;
    line-height: 1.2;
    margin: 0;
    padding: 0;
}

main.search-page ul li article h2 a,
main.search-page ul li article:hover a {
    color: var(--diams-ink);
    text-decoration: none;
}

main.search-page ul li article strong,
main.search-page ul li article p {
    color: var(--diams-muted);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
    max-width: none;
    min-height: auto;
}

main.search-page ul li article strong:empty {
    display: none;
}

main.search-page ul li article button,
main.search-page ul li article:hover button {
    background: #ffffff;
    border: 1px solid var(--diams-ink);
    border-radius: 0;
    color: var(--diams-ink);
    cursor: pointer;
    font-family: var(--diams-sans);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .12em;
    margin: 8px 0 0;
    padding: 10px 18px;
    text-transform: uppercase;
    transition: none;
}

main.search-page ul li article button:hover,
main.search-page ul li article:hover button:hover {
    background: var(--diams-ink);
    color: #ffffff;
}

main.search-page .hover-info {
    background: var(--diams-ink);
    border-radius: 0;
    font-family: var(--diams-sans);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
}

.color.clarity article:hover .hover-info {
    opacity: .94;
}

/* Page du choix de la forme : neuf tuiles avec les pictogrammes du site */
body.page-forme main.search-page .step1 > ul.main-page {
    gap: 16px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 28px 0 8px;
}

@media (min-width: 640px) {
    body.page-forme main.search-page .step1 > ul.main-page {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    body.page-forme main.search-page .step1 > ul.main-page {
        grid-template-columns: repeat(9, minmax(0, 1fr));
    }
}

body.page-forme ul.main-page li article {
    gap: 12px;
    padding: 26px 8px 22px;
}

body.page-forme ul.main-page li article figure svg {
    color: var(--diams-ink);
    display: block;
    fill: currentColor;
    height: 56px;
    width: 56px;
}

body.page-forme ul.main-page li article h2 {
    font-family: var(--diams-sans);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .14em;
    line-height: 1.4;
    text-transform: uppercase;
}

body.page-forme ul.main-page li article:hover h2 a {
    text-decoration: underline;
}

body.page-forme ul.main-page li article button {
    display: none;
}

/* ---------- Textes de la page : deux colonnes, titres en Marcellus ---------- */
.text-description,
main.search-page .text-description {
    box-sizing: border-box;
    color: var(--diams-ink);
    font-size: 15px;
    line-height: 1.6;
    margin: 0 auto;
    max-width: 1280px;
    padding: 44px 24px 24px;
    text-align: left;
}

@media (min-width: 900px) {
    .text-description {
        column-count: 2;
        column-gap: 64px;
    }
}

.text-description h2 {
    break-after: avoid;
    break-inside: avoid;
    color: var(--diams-ink);
    font-family: var(--diams-serif);
    font-size: 28px;
    font-weight: 400;
    line-height: 1.15;
    margin: 0 0 14px;
    padding: 0;
    text-align: left;
}

.text-description h2 + p {
    break-inside: avoid;
}

.text-description p {
    color: var(--diams-ink);
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 14px;
    max-width: none;
}

.text-description p:last-of-type {
    margin-bottom: 28px;
}

.text-description ul {
    break-inside: avoid;
    color: var(--diams-ink);
    display: block;
    font-size: 15px;
    line-height: 1.6;
    list-style: disc;
    margin: 0 0 18px;
    padding: 0 0 0 20px;
}

main.search-page .text-description ul li,
.text-description ul li {
    display: list-item;
    float: none;
    margin: 0 0 6px;
    padding: 0 0 0 4px;
    width: auto;
}

.text-description strong,
.text-description b {
    color: var(--diams-ink);
    font-weight: 600;
}

.text-description a {
    color: var(--diams-ink);
    text-decoration: underline;
}

/* ---------- Liste des pierres ---------- */
.result-list .wrapper-content.results {
    padding-bottom: 24px;
    padding-top: 8px;
}

table,
table#list {
    border: 0;
    border-collapse: collapse;
    border-spacing: 0;
    border-top: 1px solid var(--diams-ink);
    font-weight: 400;
    width: 100%;
}

table th {
    background-color: transparent;
    border-bottom: 1px solid var(--diams-line);
    color: var(--diams-muted);
    font-family: var(--diams-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    padding: 14px 12px;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

table th:hover {
    color: var(--diams-ink);
}

table tbody tr,
table tbody tr:nth-child(even) {
    background: transparent;
}

table tbody tr:hover {
    background: var(--diams-soft);
}

table td {
    border-bottom: 1px solid var(--diams-line);
    color: var(--diams-ink);
    font-size: 14px;
    line-height: 1.4;
    padding: 14px 12px;
    vertical-align: middle;
    white-space: nowrap;
}

table td.picto {
    padding: 8px 0 8px 4px;
    width: 40px;
}

table td.picto img {
    display: block;
    filter: grayscale(1) brightness(.55);
    width: 28px !important;
}

table td a {
    color: var(--diams-ink);
}

table td.titre a {
    font-weight: 600;
    text-decoration: none;
}

table td.titre a:hover {
    text-decoration: underline;
}

table th[style] {
    text-align: left !important;
}

table td.priceHT {
    color: var(--diams-ink);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    text-align: left;
}

table td.certificate,
table td.certificate a {
    color: var(--diams-muted);
}

table td.certificate,
table td.no-certificate {
    text-align: left;
}

table td.certificate a,
table td.no-certificate a {
    padding: 0;
}

table td.status {
    text-align: left;
}

table tr.in-stock .status span,
table tr.no-stock .status span {
    border-radius: 0;
    display: inline-block;
    font-family: var(--diams-sans);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .12em;
    line-height: 1;
    padding: 6px 9px;
    text-align: center;
    text-transform: uppercase;
}

table tr.in-stock .status span {
    background: var(--diams-ink);
    border: 1px solid var(--diams-ink);
    color: #ffffff;
}

table tr.no-stock .status span {
    background: transparent;
    border: 1px solid var(--diams-frame);
    color: var(--diams-muted);
}

/* ---------- Fiche du diamant (page/detail.php) ---------- */
.page-detail main > .header {
    background: var(--diams-soft);
    border-bottom: 1px solid var(--diams-line);
}

.page-detail main > .header .wrapper-content {
    padding-bottom: 14px;
    padding-top: 14px;
}

.page-detail .button.back,
.page-detail button.back {
    background: none;
    border: 1px solid var(--diams-ink);
    border-radius: 0;
    color: var(--diams-ink);
    display: inline-block;
    float: none;
    font-family: var(--diams-sans);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .12em;
    padding: 10px 18px;
    text-transform: uppercase;
}

.page-detail .button.back:hover,
.page-detail button.back:hover {
    background: var(--diams-ink);
    color: #ffffff;
}

/* Deux colonnes : visuel a gauche (5/12), contenu a droite (7/12) */
.page-detail main.detail > .content > .wrapper-content {
    column-gap: 56px;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    padding: 36px 20px 48px;
}

.page-detail .detail .col-left,
.page-detail .detail .col-right {
    float: none;
    min-width: 0;
    padding: 0;
    text-align: left;
    width: auto;
}

/* Visuel de la taille (rendus bleus images/fiche/<forme>.webp, sinon images/<forme>.png), cadre blanc */
.page-detail .detail .col-left figure.diams-pierre {
    background: #ffffff;
    border: 1px solid var(--diams-line);
    float: none;
    margin: 0;
    padding: 28px 28px 20px;
    text-align: center;
}

.page-detail .detail .col-left figure.diams-pierre img {
    display: block;
    height: auto;
    margin: 0 auto;
    max-width: 400px;
    width: 100%;
}

.page-detail .detail .col-left figure.diams-pierre figcaption {
    color: var(--diams-muted);
    font-size: 13px;
    line-height: 1.5;
    margin-top: 16px;
}

/* Lien vers le certificat GIA */
.page-detail .detail .col-left a.certificate-image {
    align-items: center;
    background: #ffffff;
    border: 1px solid var(--diams-frame);
    clear: none;
    color: var(--diams-ink);
    display: flex;
    font-size: 14px;
    font-weight: 600;
    gap: 16px;
    letter-spacing: .02em;
    margin: 16px 0 0;
    padding: 14px 18px;
    text-decoration: none;
}

.page-detail .detail .col-left a.certificate-image:hover {
    border-color: var(--diams-ink);
}

.page-detail .detail .col-left a.certificate-image img {
    height: auto;
    margin: 0;
    width: 64px;
}

.page-detail .detail .col-left a.certificate-image span::after {
    color: var(--diams-muted);
    content: "\2197";
    font-weight: 400;
    margin-left: 8px;
}

/* Colonne droite : titre, prix et bouton d'abord, description et caracteristiques ensuite */
.page-detail .detail .col-right {
    display: flex;
    flex-direction: column;
}

.page-detail .detail .col-right > header {
    background: transparent;
    border: 0;
    order: 1;
    padding: 0;
}

.page-detail .detail .col-right > div.price {
    order: 2;
}

.page-detail .detail .col-right > .action {
    order: 3;
}

.page-detail .detail .col-right > .description {
    order: 4;
}

.page-detail .detail .col-right > h2.diams-caracteristiques {
    order: 5;
}

.page-detail .detail .col-right > .technical-data {
    order: 6;
}

.page-detail .detail h1 {
    font-size: 36px;
    line-height: 1.15;
    margin: 0 0 8px;
}

.page-detail .detail .sku {
    color: var(--diams-muted);
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* Prix et disponibilite */
.page-detail .detail div.price {
    border: 0;
    align-items: center;
    border-top: 1px solid var(--diams-line);
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    margin-top: 22px;
    overflow: visible;
    padding: 22px 0 0;
}

.page-detail .detail div.price > div:last-child {
    float: none;
    margin: 0;
    order: -1;
}

.page-detail .detail div.price span.price {
    color: var(--diams-ink);
    display: block;
    font-size: 34px;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    line-height: 1;
}

.page-detail .detail div.price span.price i {
    color: var(--diams-muted);
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    margin-left: 6px;
}

.page-detail .detail .stock,
.page-detail .detail .stock > div {
    float: none;
    font-size: 10px;
    margin: 0;
    padding: 0;
}

.page-detail .detail .stock span,
.page-detail .detail .stock.in-stock span {
    border: 1px solid var(--diams-frame);
    color: var(--diams-muted);
    font-family: var(--diams-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    line-height: 1;
    padding: 7px 10px;
    text-transform: uppercase;
}

.page-detail .detail .stock:not(.in-stock) span.out-stock {
    display: inline-block;
}

.page-detail .detail .stock.in-stock span.in-stock {
    background: var(--diams-ink);
    border-color: var(--diams-ink);
    color: #ffffff;
    display: inline-block;
}

/* Bouton de commande */
.page-detail .detail .action {
    padding: 22px 0 0;
    text-align: left;
}

.page-detail .detail .action .share {
    display: none;
}

.page-detail .detail .action form {
    display: block;
}

.page-detail .detail .action button,
.page-detail .detail button.add-to-cart,
.page-detail .detail button.add-to-cart:hover {
    background: var(--diams-ink);
    border: 1px solid var(--diams-ink);
    border-radius: 0;
    color: #ffffff;
    cursor: pointer;
    float: none;
    font-family: var(--diams-sans);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .16em;
    margin: 0;
    max-width: 320px;
    padding: 18px 36px;
    text-transform: uppercase;
    width: 100%;
}

.page-detail .detail button.add-to-cart:hover {
    background: #333333;
    border-color: #333333;
}

/* Description */
.page-detail .detail .description {
    padding: 30px 0 0;
}

.page-detail .detail .description p {
    color: var(--diams-muted);
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
    max-width: 660px;
}

.page-detail .detail .description p a {
    color: var(--diams-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Caracteristiques en deux colonnes */
.page-detail .detail h2.diams-caracteristiques {
    color: var(--diams-ink);
    font-family: var(--diams-serif);
    font-size: 22px;
    font-weight: 400;
    margin: 36px 0 4px;
    padding: 0;
}

.page-detail .detail .technical-data {
    column-gap: 40px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    overflow: visible;
    padding: 0;
}

.page-detail .detail .technical-data .col {
    float: none;
    width: auto;
}

.page-detail .detail .technical-data dl {
    border-bottom: 1px solid var(--diams-line);
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr);
    margin: 0;
    padding: 9px 0;
    width: auto;
}

.page-detail .detail .technical-data dt,
.page-detail .detail .technical-data dd {
    border: 0;
    display: block;
    margin: 0;
    padding: 0;
}

.page-detail .detail .technical-data dt {
    color: var(--diams-eyebrow);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    line-height: 20px;
    text-align: left;
    text-transform: uppercase;
}

.page-detail .detail .technical-data dd {
    color: var(--diams-ink);
    font-size: 15px;
    font-weight: 400;
    line-height: 20px;
}

/* Diamants similaires */
.page-detail .result-list .results {
    border-top: 1px solid var(--diams-line);
    padding: 24px 20px 40px;
}

.page-detail .result-list h2 {
    color: var(--diams-ink);
    font-family: var(--diams-serif);
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 0;
    margin: 8px 0 16px;
}

/* ---------- Pied de page (page/footer.php) ---------- */
footer.diams-pied {
    background: var(--diams-foot);
    color: #ffffff;
    font-size: 13px;
    line-height: 2;
}

footer.diams-pied .wrapper-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-bottom: 28px;
    padding-top: 36px;
}

footer.diams-pied .diams-pied-haut {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 20px 40px;
    justify-content: space-between;
}

footer.diams-pied .diams-pied-marque {
    align-items: center;
    display: flex;
    gap: 14px;
}

footer.diams-pied .diams-pied-marque img {
    display: block;
    height: 28px;
    width: auto;
}

footer.diams-pied .diams-pied-marque span {
    border-left: 1px solid var(--diams-foot-line);
    color: var(--diams-foot-muted);
    font-size: 11px;
    letter-spacing: .14em;
    line-height: 1.6;
    padding-left: 14px;
    text-transform: uppercase;
}

footer.diams-pied ul {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 28px;
    list-style: none;
    margin: 0;
    padding: 0;
}

footer.diams-pied ul li {
    float: none;
    margin: 0;
    padding: 0;
    width: auto;
}

footer.diams-pied a {
    color: #ffffff;
    text-decoration: none;
}

footer.diams-pied a:hover {
    text-decoration: underline;
}

footer.diams-pied .diams-pied-mention {
    border-top: 1px solid var(--diams-foot-line);
    color: var(--diams-foot-muted);
    font-size: 12px;
    line-height: 1.6;
    margin: 0;
    max-width: none;
    padding-top: 18px;
}

footer.diams-pied .diams-pied-mention a {
    color: var(--diams-foot-muted);
    text-decoration: underline;
}

/* ---------- Surtitre des etapes et pictogramme des cartes de carats (retours du 03/11/2026) ---------- */
.diams-etape {
    color: var(--diams-muted);
    font-family: var(--diams-sans);
    font-size: 11.5px;
    font-weight: 600;
    grid-column: 1 / -1;
    letter-spacing: .14em;
    line-height: 1.4;
    margin: 0 0 2px;
    text-transform: uppercase;
}

main.search-page .size ul li article figure svg {
    color: var(--diams-ink);
    display: block;
    fill: currentColor;
    height: 44px;
    width: 44px;
}

table td.picto svg {
    color: var(--diams-ink);
    display: block;
    fill: currentColor;
    height: 26px;
    width: 26px;
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
    .wrapper > header > .wrapper-content {
        gap: 12px 16px;
        min-height: 64px;
        padding-bottom: 12px;
        padding-top: 12px;
    }

    .wrapper > header > .wrapper-content > a::after {
        display: none;
    }

    .logo,
    header .logo {
        height: 30px;
        margin: 0;
    }

    header .topbar-link {
        flex-basis: 100%;
        margin-left: 0;
        order: 3;
    }

    header .topbar {
        margin-left: auto;
    }

    header .topbar .dropdown dt div {
        min-height: 38px;
        padding: 8px 28px 8px 10px;
    }

    h1,
    main .header h1,
    body.page-forme main .header h1 {
        font-size: 30px;
    }

    .text-description h2 {
        font-size: 24px;
    }

    .result-list .wrapper-content.results {
        overflow-x: auto;
    }

    main.search-page .wrapper-content:not(.results) > ul {
        gap: 12px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.page-forme main.search-page .step1 > ul.main-page {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    footer.diams-pied .diams-pied-haut {
        align-items: flex-start;
        flex-direction: column;
    }

    /* Fiche du diamant : une colonne, titre puis image, prix et bouton, certificat, description, caracteristiques */
    .page-detail main.detail > .content > .wrapper-content {
        grid-template-columns: minmax(0, 1fr);
        padding: 20px 16px 32px;
        row-gap: 0;
    }

    .page-detail .detail .col-left,
    .page-detail .detail .col-right {
        display: contents;
    }

    .page-detail .detail .col-right > header {
        order: 1;
    }

    .page-detail .detail .col-left figure.diams-pierre {
        margin-top: 20px;
        order: 2;
    }

    .page-detail .detail .col-right > div.price {
        order: 3;
    }

    .page-detail .detail .col-right > .action {
        order: 4;
    }

    .page-detail .detail .col-left a.certificate-image {
        margin-top: 20px;
        order: 5;
    }

    .page-detail .detail .col-right > .description {
        order: 6;
    }

    .page-detail .detail .col-right > h2.diams-caracteristiques {
        order: 7;
    }

    .page-detail .detail .col-right > .technical-data {
        order: 8;
    }

    .page-detail .detail .col-left figure.diams-pierre {
        padding: 20px 20px 16px;
    }

    .page-detail .detail .col-left figure.diams-pierre img {
        max-width: 240px;
    }

    .page-detail .detail h1 {
        font-size: 28px;
    }

    .page-detail .detail div.price span.price {
        font-size: 30px;
    }

    .page-detail .detail .action button,
    .page-detail .detail button.add-to-cart {
        max-width: none;
    }

    .page-detail .detail .technical-data {
        grid-template-columns: minmax(0, 1fr);
    }

    .page-detail .result-list .results {
        padding: 20px 16px 32px;
    }
}

/* 04/11/2026, essai : rangee des neuf pictogrammes de l en-tete retiree, le bloc des criteres et le bandeau la remplacent */
header .navigation{display:none}

/* 04/11/2026, essai sur la copie de test : video de la taille sur la fiche (patch-moteur-13) */
.page-detail .detail .col-left figure.diams-pierre--video{padding:0;overflow:hidden}
.page-detail .detail .col-left figure.diams-pierre--video video{display:block;width:100%;max-width:none;height:auto;margin:0}
.page-detail .detail .col-left figure.diams-pierre--video figcaption{margin:0;padding:12px 16px 14px;background:#fff;border-top:1px solid var(--diams-line)}

/* 04/11/2026, essai sur la copie de test : fenetre d'aide du bandeau (?) au nouveau gabarit (patch-moteur-17) */
.popin{background:rgba(20,20,20,.62)}
.popin .container{background:#fff;box-shadow:0 24px 64px rgba(0,0,0,.35);top:5%;bottom:5%;left:50%;right:auto;width:min(92vw,760px);transform:translateX(-50%) scale(.97)}
.popin.show .container{transform:translateX(-50%) scale(1)}

/* 04/11/2026 : pied de page du moteur aligne sur celui de www.diams.com (patch-moteur-21) */
footer.diams-pied { background: var(--diams-foot); color: var(--diams-foot-muted); font-family: var(--diams-sans); font-size: 16px; line-height: 1.5; padding: 0; }
footer.diams-pied .diams-pied-contenu { max-width: 1200px; margin: 0 auto; padding: 30px 24px 8px; }
footer.diams-pied .diams-pied-lettre { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; margin: 0 0 34px; }
footer.diams-pied .diams-pied-lettre-form { display: flex; width: 100%; max-width: 380px; margin: 0; }
footer.diams-pied .diams-pied-lettre-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
footer.diams-pied .diams-pied-lettre-form input[type="email"] { flex: 1 1 auto; min-width: 0; width: auto; height: 46px; border: 1px solid #ffffff; border-radius: 0; background: #ffffff; color: #141414; font: inherit; font-size: 15px; padding: 0 14px; margin: 0; float: none; box-shadow: none; }
footer.diams-pied .diams-pied-lettre-form button { flex: none; display: inline-flex; align-items: center; height: 46px; border: 1px solid #141414; border-radius: 0; background: #ffffff; color: #141414; font: inherit; font-weight: 600; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; padding: 0 18px; margin: 0; float: none; width: auto; cursor: pointer; }
footer.diams-pied .diams-pied-lettre-form button:hover { background: #141414; color: #ffffff; border-color: #ffffff; }
footer.diams-pied .diams-pied-lettre-note { margin: 0; max-width: 440px; text-align: right; font-size: 17px; line-height: 1.45; color: var(--diams-foot-muted); }
footer.diams-pied .diams-pied-lettre-note a { color: #ffffff; text-decoration: underline; }
footer.diams-pied .diams-pied-lettre-message { margin: 0; max-width: 440px; text-align: right; font-size: 15px; line-height: 1.4; color: #ffffff; padding: 8px 12px; border: 1px solid var(--diams-foot-muted); }
footer.diams-pied .diams-pied-lettre-message.est-erreur { border-color: #d9a1a1; color: #f3d6d6; }
footer.diams-pied .diams-pied-colonnes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px 20px; }
footer.diams-pied .diams-pied-colonne h3 { font-family: var(--diams-serif); font-weight: 400; font-size: 27px; line-height: 1.1; color: #ffffff; margin: 0 0 22px; letter-spacing: .01em; text-transform: none; }
footer.diams-pied .diams-pied-colonne ul { display: block; list-style: none; margin: 0; padding: 0; }
footer.diams-pied .diams-pied-colonne li { float: none; width: auto; margin: 0 0 10px; padding: 0; line-height: 1.45; }
footer.diams-pied .diams-pied-colonne a { color: #ffffff; font-size: 14px; text-decoration: none; }
footer.diams-pied .diams-pied-colonne a:hover { text-decoration: underline; }
footer.diams-pied .diams-pied-societe { text-align: center; }
footer.diams-pied .diams-pied-societe p { margin: 0 0 13px; font-size: 18px; line-height: 1.5; color: var(--diams-foot-muted); }
footer.diams-pied .diams-pied-copyright { display: block; text-align: center; font-size: 12px; line-height: 1.45; color: var(--diams-foot-muted); padding: 14px 24px 18px; max-width: 1000px; margin: 0 auto; }
@media (max-width: 900px) {
    footer.diams-pied .diams-pied-colonnes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    footer.diams-pied .diams-pied-societe { grid-column: 1 / -1; }
    footer.diams-pied .diams-pied-lettre { align-items: stretch; }
    footer.diams-pied .diams-pied-lettre-form { max-width: none; }
    footer.diams-pied .diams-pied-lettre-note, footer.diams-pied .diams-pied-lettre-message { max-width: none; text-align: left; }
}
@media (max-width: 560px) {
    footer.diams-pied .diams-pied-contenu { padding: 24px 18px 6px; }
    footer.diams-pied .diams-pied-colonnes { grid-template-columns: minmax(0, 1fr); gap: 22px; }
    footer.diams-pied .diams-pied-colonne h3 { font-size: 24px; margin-bottom: 14px; }
    footer.diams-pied .diams-pied-lettre-form button { padding: 0 12px; font-size: 13px; }
}

/* patch-moteur-22 (04/11/2026) : la barre des criteres suit le titre de la page (demande de Ramon, 17 h 16) et se colle en haut au defilement */
main.search-page > .search { position: sticky; top: 0; z-index: 900; }
main.search-page > .search .diamond, .fixed main.search-page > .search .diamond { animation: none; box-shadow: none; padding: 22px 0 24px; position: static; width: auto; }
.fixed main.search-page { padding-top: 0 !important; }
main.search-page > .search.est-collee .diamond { box-shadow: 0 1px 0 var(--diams-line); padding: 12px 0; }

/* patch-moteur-24 (04/11/2026) : barre des criteres en fond noir, comme l'en-tete (demande de Ramon, 17 h 46) */
.diamond { background: var(--diams-head); border-bottom: 1px solid var(--diams-head-line); }
.search-light span label { color: var(--diams-head-muted); }
.search-light span label i { border-color: rgba(255, 255, 255, .4); color: var(--diams-head-muted); }
.search-light span label i:hover { border-color: #ffffff; color: #ffffff; }
.search-light .dropdown dt div { border-color: #ffffff; }
main.search-page > .search.est-collee .diamond { box-shadow: 0 1px 0 var(--diams-head-line); }
@media (max-width: 768px) { div.search-light span label { color: var(--diams-eyebrow); } }

/* patch-moteur-25 (04/11/2026) : barre des criteres sur mobile, deux listes par rangee avec leur libelle, leur bouton « ? » et leur fleche (demande de Ramon, 17 h 59) ; collee en haut, les libelles se replient */
@media (max-width: 768px) {
  div.search-light { display: flex; flex-wrap: wrap; gap: 12px 10px; }
  div.search-light > span { background: transparent; border: 0; flex: 0 0 calc(50% - 5px); max-width: none; padding: 0; position: static; width: calc(50% - 5px); }
  div.search-light span label { align-items: center; box-sizing: border-box; color: var(--diams-head-muted); display: flex; font-size: 10px; justify-content: space-between; letter-spacing: .1em; padding: 0 0 6px; position: static; text-align: left; transform: none; width: auto; }
  div.search-light span label i { display: inline-block; flex: 0 0 auto; margin-left: 6px; }
  div.search-light .dropdown dt { opacity: 1; }
  div.search-light .dropdown dt div { background: #ffffff; border: 1px solid #ffffff; color: var(--diams-ink); font-size: 14px; line-height: 22px; min-height: 44px; padding: 11px 34px 11px 12px; position: relative; }
  div.search-light .dropdown dt div::after { background: url("/rapnet/images/svg/left-arrow.svg") no-repeat; border: 0; content: ""; height: 12px; margin-top: -6px; position: absolute; right: 10px; top: 50%; transform: rotate(270deg); width: 12px; }
  div.search-light .dropdown dd ul { font-size: 14px; }
  main.search-page > .search.est-collee div.search-light { gap: 8px 10px; }
  main.search-page > .search.est-collee div.search-light span label { display: none; }
  main.search-page > .search.est-collee div.search-light .dropdown dt div { min-height: 40px; padding: 9px 34px 9px 12px; }
}