/*
Theme Name: Monde Primaire
Description: Thème minimaliste sur mesure pour le projet Monde Primaire (WooCommerce).
Author: Axel
Version: 0.6.0
Text Domain: monde-primaire
Domain Path: /languages
*/

/* ==========================================================================
   Polices auto-hébergées (Source Serif 4 variable pour les titres,
   Inter light/regular pour le texte courant — jamais de graisse > 500,
   conformément à DESIGN.md)
   ========================================================================== */

@font-face {
    font-family: 'Inter';
    src: url('assets/fonts/inter-light-latin.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter';
    src: url('assets/fonts/inter-light-latin-ext.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+2113;
}

@font-face {
    font-family: 'Inter';
    src: url('assets/fonts/inter-latin.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter';
    src: url('assets/fonts/inter-latin-ext.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+2113;
}

/* Police variable : un seul fichier par sous-ensemble couvre toute la plage 300–700. */
@font-face {
    font-family: 'Source Serif 4';
    src: url('assets/fonts/source-serif-4-latin.woff2') format('woff2');
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Source Serif 4';
    src: url('assets/fonts/source-serif-4-latin-ext.woff2') format('woff2');
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+2113;
}

/* ==========================================================================
   Variables — tokens du design system DESIGN.md (couleurs, typographie,
   espacements, rayon), Source Serif 4 pour les titres et Inter pour le texte
   ========================================================================== */

:root {
    /* Couleurs — palette strictement monochrome (DESIGN.md) : pas de couleur en dur
       ailleurs que dans ces variables. L'accent, c'est le noir. */
    --mp-color-bg: #ffffff;
    --mp-color-text: #1a1a1a;
    --mp-color-accent: var(--mp-color-text);
    --mp-color-border: #e5e5e5;
    --mp-color-text-muted: #767676;
    --mp-color-surface: #fafafa;
    /* Voile du mini-panier : le noir doux de --mp-color-text à faible opacité. */
    --mp-color-overlay: rgba(26, 26, 26, 0.2);

    /* Bandeau de notifications système — seule entorse au monochrome de DESIGN.md,
       strictement réservée aux messages d'erreur/alerte. Rouge volontairement
       désaturé pour rester compatible avec la sobriété du reste de l'interface. */
    --mp-color-notice-bg: #fbf0f0;
    --mp-color-notice-border: #e6cccc;
    --mp-color-notice-text: #7a2e2e;

    /* Typographies — Source Serif 4 pour les titres (400 max), Inter pour le reste. */
    --mp-font-title: 'Source Serif 4', Georgia, serif;
    --mp-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --mp-font-weight-light: 300;
    --mp-font-weight-regular: 400;
    --mp-font-weight-medium: 500;
    --mp-h1-size: clamp(1.75rem, 5vw, 3rem);
    --mp-h2-size: clamp(1.375rem, 4vw, 2rem);
    --mp-h3-size: clamp(1.125rem, 3vw, 1.5rem);
    --mp-line-height-heading: 1.2;
    --mp-line-height-body: 1.6;

    /* Espacements — échelle base 8px, aucune valeur en dur ailleurs. */
    --mp-space-1: 0.5rem;
    --mp-space-2: 1rem;
    --mp-space-3: 1.5rem;
    --mp-space-4: 2.5rem;
    --mp-space-5: 4rem;
    --mp-space-6: 7rem;

    /* Rayon — aucun (direction "maison de luxe" : traits fins, pas d'aplats, pas d'ombres). */
    --mp-radius: 0;

    /* Mise en page */
    --mp-container-max-width: 72rem;
    --mp-container-padding: var(--mp-space-2);
    --mp-content-max-width: 38rem;

    /* En-tête */
    --mp-header-height: 64px;

    /* Carte produit */
    --mp-card-aspect-ratio: 3 / 4;

    /* Mini-panier (DESIGN.md §Mini-panier) */
    --mp-cart-panel-width: 420px;
    --mp-cart-thumb-size: 88px;
}

@media (min-width: 768px) {
    :root {
        --mp-container-padding: var(--mp-space-4);
        --mp-header-height: 80px;
    }
}

/* ==========================================================================
   Base (mobile first)
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--mp-color-bg);
    color: var(--mp-color-text);
    font-family: var(--mp-font-body);
    font-weight: var(--mp-font-weight-light);
    line-height: var(--mp-line-height-body);
    font-size: 15px;
}

h1,
h2,
h3 {
    font-family: var(--mp-font-title);
    font-weight: var(--mp-font-weight-regular);
    line-height: var(--mp-line-height-heading);
    margin: 0 0 var(--mp-space-3);
}

h1 {
    font-size: var(--mp-h1-size);
}

h2 {
    font-size: var(--mp-h2-size);
}

h3 {
    font-size: var(--mp-h3-size);
}

/* Label de section, jamais un vrai titre de lecture : majuscules espacées. */
h4 {
    font-family: var(--mp-font-title);
    font-size: 1rem;
    font-weight: var(--mp-font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    line-height: var(--mp-line-height-heading);
    margin: 0 0 var(--mp-space-2);
}

p {
    margin: 0 0 var(--mp-space-3);
}

/* — lien de corps de texte (niveau 3) : soulignement fin, sans majuscules — */
a {
    color: var(--mp-color-accent);
    text-decoration: underline;
    text-underline-offset: 0.3em;
    text-decoration-thickness: 1px;
}

a:hover {
    text-decoration: none;
}

:focus-visible {
    outline: 2px solid var(--mp-color-accent);
    outline-offset: 2px;
}

::selection {
    background: color-mix(in srgb, var(--mp-color-accent) 30%, transparent);
}

.site-title {
    font-family: var(--mp-font-title);
    font-weight: var(--mp-font-weight-medium);
    margin: 0;
}

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

.primary-menu a {
    font-family: var(--mp-font-body);
    font-weight: var(--mp-font-weight-medium);
    color: var(--mp-color-text);
}

.primary-menu a:hover,
.primary-menu a[aria-current='page'] {
    color: var(--mp-color-accent);
}

.primary-menu a[aria-current='page'] {
    text-decoration: underline;
    text-underline-offset: 0.3em;
    text-decoration-thickness: 1px;
}

.container {
    max-width: var(--mp-container-max-width);
    margin: 0 auto;
    padding: 0 var(--mp-container-padding);
}

/* — règle horizontale — */
.hr {
    height: 1px;
    border: 0;
    margin: var(--mp-space-4) 0;
    background: var(--mp-color-border);
}

/* Séparateur de section : aligné sur la largeur du contenu, pas sur celle de l'écran.
   Pas de marge propre : .mp-section porte déjà --space-5/--space-6 en padding haut ET
   bas, une marge ici s'ajouterait par-dessus et doublerait l'espace entre sections. */
.hr.container {
    max-width: calc(var(--mp-container-max-width) - var(--mp-container-padding) * 2);
    margin: 0 auto;
    padding: 0;
}

/* — boutons / CTA (niveau 1 : bouton fantôme, DESIGN.md §Liens et CTA) — */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-family: var(--mp-font-body);
    font-weight: var(--mp-font-weight-medium);
    font-size: 13px;
    line-height: 1.2;
    color: var(--mp-color-text);
    background: transparent;
    border: 1px solid transparent;
    padding: 0.875rem var(--mp-space-4);
    border-radius: var(--mp-radius);
    transition: background-color 0.25s ease, color 0.25s ease;
}

.btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.btn-primary {
    color: var(--mp-color-accent);
    border-color: var(--mp-color-accent);
}

.btn-primary:hover {
    color: var(--mp-color-bg);
    background: var(--mp-color-accent);
}

/* — lien secondaire (niveau 2) : plus de chrome bouton, soulignement fin — */
.btn-ghost {
    display: inline;
    color: var(--mp-color-accent);
    background: none;
    border: 0;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 0.3em;
    text-decoration-thickness: 1px;
    transition: none;
}

.btn-ghost:hover {
    color: var(--mp-color-accent);
    background: none;
    text-decoration: none;
}

.btn-icon {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: var(--mp-radius);
    color: var(--mp-color-text);
}

/* — tags — */
.tag {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    letter-spacing: 0.02em;
    padding: 3px 10px;
    border-radius: var(--mp-radius);
}

.tag-outline {
    border: 1px solid var(--mp-color-accent);
    color: var(--mp-color-accent);
}

.mp-archive-badge {
    display: block;
    font-family: var(--mp-font-body);
    font-weight: var(--mp-font-weight-medium);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--mp-color-text-muted);
}

/* — champ (newsletter) — */
.input {
    width: 100%;
    min-height: 36px;
    padding: 6px 10px;
    font: inherit;
    font-size: 14px;
    color: var(--mp-color-text);
    caret-color: var(--mp-color-accent);
    background: transparent;
    border: 1px solid var(--mp-color-border);
    border-radius: var(--mp-radius);
}

.input:hover {
    border-color: color-mix(in srgb, var(--mp-color-text) 45%, transparent);
}

.input:focus-visible {
    border-color: var(--mp-color-accent);
    outline-offset: 0;
}

/* — filtre segmenté (catégories boutique) — */
.seg {
    display: inline-flex;
    flex-wrap: wrap;
    overflow: hidden;
    border: 1px solid var(--mp-color-border);
    border-radius: var(--mp-radius);
}

.seg a {
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    font-size: 13px;
    font-family: var(--mp-font-body);
    color: var(--mp-color-text);
    text-decoration: none;
    border-left: 1px solid var(--mp-color-border);
}

.seg a:first-child {
    border-left: 0;
}

.seg a:hover {
    color: var(--mp-color-text);
    background: color-mix(in srgb, var(--mp-color-text) 7%, transparent);
}

.seg a[aria-current='page'] {
    color: var(--mp-color-accent);
    box-shadow: inset 0 0 0 1px var(--mp-color-accent);
}

/* ==========================================================================
   Bandeau de notifications système
   Rendu par mp_render_global_notices() sur wp_body_open, donc premier enfant de
   <body> : en position:fixed il survole tout le reste, header sticky compris, sans
   décaler la mise en page au chargement.
   ========================================================================== */

.mp-notices {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    /* Au-dessus de tout : header (50), mini-panier (95), lightbox (100). */
    z-index: 110;
}

.mp-notices__item {
    display: flex;
    align-items: center;
    gap: var(--mp-space-1);
    padding-left: var(--mp-container-padding);
    padding-right: var(--mp-container-padding);
    background: var(--mp-color-notice-bg);
    border-bottom: 1px solid var(--mp-color-notice-border);
    color: var(--mp-color-notice-text);
    font-family: var(--mp-font-body);
    font-size: 0.875rem;
    line-height: var(--mp-line-height-body);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

/* Une confirmation ne doit pas s'afficher en rouge : retour au monochrome. */
.mp-notices__item--success {
    background: var(--mp-color-surface);
    border-bottom-color: var(--mp-color-border);
    color: var(--mp-color-text);
}

.mp-notices__item.is-dismissed {
    opacity: 0;
    transform: translateY(-100%);
}

.mp-notices__text {
    flex: 1;
    margin: 0;
    padding: var(--mp-space-1) 0;
}

.mp-notices__close {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Zone tactile 44×44 imposée par DESIGN.md §Mobile, marge négative pour que la
       croix reste alignée sur la marge du conteneur malgré cette zone élargie. */
    width: 44px;
    height: 44px;
    margin-right: calc(var(--mp-space-1) * -1);
    padding: 0;
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;
}

.mp-notices__close svg {
    width: 16px;
    height: 16px;
}

@media (prefers-reduced-motion: reduce) {
    .mp-notices__item {
        transition: none;
    }
}

/* ==========================================================================
   En-tête
   ========================================================================== */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--mp-color-bg);
    border-bottom: 1px solid transparent;
    transition: border-color 0.25s ease;
}

/* La bordure basse n'apparaît qu'une fois la page scrollée (classe posée en JS). */
.site-header.is-scrolled {
    border-bottom-color: var(--mp-color-border);
}

.site-header__inner {
    max-width: var(--mp-container-max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--mp-space-2);
    height: var(--mp-header-height);
    padding: 0 var(--mp-container-padding);
}

.site-header__start {
    display: flex;
    align-items: center;
    gap: var(--mp-space-4);
    justify-self: start;
}

/* Burger : 2 traits fins (pas 3), zone tactile 44×44 même si le tracé est fin. */
.mp-burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--mp-color-text);
    cursor: pointer;
}

.mp-burger__line {
    display: block;
    width: 20px;
    height: 1px;
    background: currentColor;
}

.primary-menu {
    display: none;
    flex-wrap: wrap;
    gap: var(--mp-space-3);
    list-style: none;
    margin: 0;
    padding: 0;
}

.primary-menu a {
    text-decoration: none;
}

@media (min-width: 768px) {
    .mp-burger {
        display: none;
    }

    .primary-menu {
        display: flex;
    }
}

.site-branding {
    display: flex;
    align-items: center;
    gap: var(--mp-space-2);
    justify-self: center;
}

/* Le logo est la pastille graphique de la marque (continuité avec Instagram/TikTok) :
   hauteur contrainte, largeur libre — pas de recadrage forcé en cercle, la pastille est
   déjà circulaire dans le fichier source. */
.site-branding .custom-logo-link {
    display: flex;
    flex: none;
}

.site-branding .custom-logo {
    width: auto;
    height: 40px;
    object-fit: contain;
}

@media (min-width: 768px) {
    .site-branding .custom-logo {
        height: 48px;
    }
}

/* Le titre du site garde une taille fixe modeste, indépendante de l'échelle h1.
   Masqué visuellement sur mobile (pas en display:none, pour rester accessible aux
   lecteurs d'écran et aux moteurs de recherche) : la pastille seule tient dans le
   header mobile. Réapparaît à côté de la pastille dès le desktop. */
h1.site-title,
p.site-title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (min-width: 768px) {
    h1.site-title,
    p.site-title {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        clip: auto;
        font-family: var(--mp-font-title);
        font-size: 1.125rem;
        font-weight: var(--mp-font-weight-regular);
        line-height: 1.1;
        white-space: nowrap;
    }
}

p.site-title a {
    text-decoration: none;
    color: var(--mp-color-text);
}

.site-header-actions {
    display: flex;
    align-items: center;
    gap: var(--mp-space-2);
    justify-self: end;
}

/* Barre du haut trop étroite sur mobile pour porter aussi le sélecteur de langue en
   plus du burger, du titre et des icônes compte/panier : il reste disponible dans le
   panneau de menu mobile (voir .mp-mobile-menu__footer). */
.site-header-actions .lang-switcher {
    display: none;
}

@media (min-width: 768px) {
    .site-header-actions .lang-switcher {
        display: flex;
    }
}

/* Format "FR / EN", jamais de drapeau. La langue active se distingue par la couleur, plus
   le soulignement fin qui marque déjà la page courante dans la navigation. */
.lang-switcher {
    display: flex;
    align-items: center;
}

.lang-switcher__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Pas de min-width : 44px par lien étalerait le groupe d'icônes du header, que le
       design veut serré. La hauteur suffit à la zone tactile, le padding à la largeur. */
    min-height: 44px;
    padding: 0 var(--mp-space-1);
    text-decoration: none;
    color: var(--mp-color-text-muted);
    font-size: 0.75rem;
}

.lang-switcher__link.is-current {
    color: var(--mp-color-text);
    text-decoration: underline;
    text-underline-offset: 0.3em;
    text-decoration-thickness: 1px;
}

/* La langue inactive ne prend jamais le soulignement au survol : il reste le marqueur
   de la langue en cours, pas un effet de lien. */
.lang-switcher__link:hover,
.lang-switcher__link:focus-visible {
    color: var(--mp-color-text);
}

.lang-switcher__sep {
    /* --mp-color-border (#e5e5e5) serait illisible sur un glyphe de 0.75rem : la barre
       reste en gris texte, la hiérarchie est portée par le soulignement de l'actif. */
    color: var(--mp-color-text-muted);
    font-size: 0.75rem;
    line-height: 1;
}

.account-link,
.cart-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    color: var(--mp-color-text);
}

.account-link svg,
.cart-link svg {
    width: 18px;
    height: 18px;
}

.cart-count {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    border-radius: var(--mp-radius);
    background: var(--mp-color-accent);
    color: var(--mp-color-bg);
    font-size: 0.65rem;
    line-height: 16px;
    text-align: center;
    font-weight: var(--mp-font-weight-medium);
}

/* ==========================================================================
   Mini-panier latéral (DESIGN.md §Mini-panier)
   Rendu en pied de page par mp_render_cart_drawer(), donc enfant direct de <body> :
   aucun ancêtre position:sticky ne peut piéger son contexte d'empilement.
   ========================================================================== */

.mp-cart-overlay {
    position: fixed;
    inset: 0;
    z-index: 94;
    background: var(--mp-color-overlay);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.mp-cart-overlay.is-open {
    opacity: 1;
}

/* [hidden] est retiré par le JS avant l'ouverture pour que la transition d'opacité
   ait bien lieu (un élément en display:none ne transitionne pas). */
.mp-cart-overlay[hidden] {
    display: none;
}

.mp-cart {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 95;
    width: 100%;
    display: flex;
    flex-direction: column;
    background: var(--mp-color-bg);
    border-left: 1px solid var(--mp-color-border);
    padding: var(--mp-space-3) var(--mp-space-4);
    /* Même grammaire d'animation que le menu mobile, en miroir (depuis la droite). */
    transform: translateX(100%);
    transition: transform 0.35s ease;
}

.mp-cart.is-open {
    transform: translateX(0);
}

@media (min-width: 768px) {
    .mp-cart {
        width: var(--mp-cart-panel-width);
        /* Garde-fou de mise en page : le panneau ne colle jamais au bord gauche. */
        max-width: calc(100% - 3rem);
    }
}

/* — en-tête : libellé + croix fine, filet 1px en dessous — */
.mp-cart__header {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--mp-space-2);
    border-bottom: 1px solid var(--mp-color-border);
}

.mp-cart__title {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.75rem;
    color: var(--mp-color-text-muted);
}

/* Croix nue : ni cadre, ni fond, ni bordure — seulement le trait (DESIGN.md). */
.mp-cart__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    /* Compense la zone tactile pour que le trait s'aligne sur le bord du panneau. */
    margin-right: calc(var(--mp-space-2) * -1);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--mp-color-text);
    cursor: pointer;
}

.mp-cart__close svg {
    width: 18px;
    height: 18px;
}

/* Le contenu est la zone remplacée par les fragments WooCommerce : c'est lui qui porte
   la colonne flex interne, pour que seule la liste défile et que le pied reste collé. */
.mp-cart__contents {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* — liste des articles — */
.mp-cart__list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    list-style: none;
    margin: 0;
    padding: 0;
}

.mp-cart__item {
    display: flex;
    gap: var(--mp-space-2);
    padding: var(--mp-space-3) 0;
    border-bottom: 1px solid var(--mp-color-border);
}

/* Le filet sépare deux articles : le dernier n'en porte pas, le pied a déjà le sien. */
.mp-cart__item:last-child {
    border-bottom: 0;
}

.mp-cart__thumb {
    flex: none;
    width: var(--mp-cart-thumb-size);
    aspect-ratio: 1;
    background: var(--mp-color-surface);
}

.mp-cart__thumb a {
    display: block;
    height: 100%;
}

.mp-cart__thumb img {
    width: 100%;
    height: 100%;
    /* contain : les formats naturels des œuvres ne sont jamais amputés. */
    object-fit: contain;
}

.mp-cart__item-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--mp-space-1);
    min-width: 0;
}

.mp-cart__item-title {
    font-family: var(--mp-font-title);
    font-size: 1rem;
    font-weight: var(--mp-font-weight-regular);
    line-height: var(--mp-line-height-heading);
}

.mp-cart__item-title a {
    color: var(--mp-color-text);
    text-decoration: none;
}

.mp-cart__item-price {
    color: var(--mp-color-text-muted);
    font-size: 0.875rem;
}

/* Lien texte discret — jamais une croix rouge ni une corbeille (DESIGN.md). */
.mp-cart__remove {
    margin-top: var(--mp-space-1);
    color: var(--mp-color-text-muted);
    font-size: 0.75rem;
    text-decoration: underline;
    text-underline-offset: 0.3em;
    text-decoration-thickness: 1px;
    cursor: pointer;
}

.mp-cart__remove:hover,
.mp-cart__remove:focus-visible {
    color: var(--mp-color-text);
}

/* — pied collé en bas — */
.mp-cart__footer {
    flex: none;
    padding-top: var(--mp-space-3);
    border-top: 1px solid var(--mp-color-border);
}

.mp-cart__subtotal {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: 0;
}

.mp-cart__shipping-note {
    margin: var(--mp-space-1) 0 0;
    color: var(--mp-color-text-muted);
    font-size: 0.75rem;
}

/* CTA d'achat : le seul bouton plein du panneau, inversé au hover (DESIGN.md §Liens et CTA). */
.mp-cart__checkout {
    display: block;
    margin-top: var(--mp-space-3);
    padding: 0.875rem var(--mp-space-4);
    border: 1px solid var(--mp-color-text);
    border-radius: var(--mp-radius);
    background: var(--mp-color-text);
    color: var(--mp-color-bg);
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.75rem;
    transition: background 0.25s ease, color 0.25s ease;
}

.mp-cart__checkout:hover,
.mp-cart__checkout:focus-visible {
    background: transparent;
    color: var(--mp-color-text);
}

/* Lien secondaire centré : pas de second bouton plein concurrent. */
.mp-cart__view {
    display: block;
    margin-top: var(--mp-space-2);
    color: var(--mp-color-text);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.75rem;
    text-decoration: underline;
    text-underline-offset: 0.3em;
    text-decoration-thickness: 1px;
}

.mp-cart__view:hover,
.mp-cart__view:focus-visible {
    text-decoration: none;
}

/* — état vide : centré verticalement par margin:auto dans la colonne flex — */
.mp-cart__empty {
    margin: auto;
    text-align: center;
}

.mp-cart__empty-message {
    margin: 0 0 var(--mp-space-3);
    font-family: var(--mp-font-title);
    font-size: var(--mp-h3-size);
    line-height: var(--mp-line-height-heading);
}

/* CTA fantôme (DESIGN.md §Liens et CTA, niveau 2). */
.mp-cart__empty-cta {
    display: inline-block;
    padding: 0.875rem var(--mp-space-4);
    border: 1px solid var(--mp-color-text);
    border-radius: var(--mp-radius);
    background: transparent;
    color: var(--mp-color-text);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.75rem;
    transition: background 0.25s ease, color 0.25s ease;
}

.mp-cart__empty-cta:hover,
.mp-cart__empty-cta:focus-visible {
    background: var(--mp-color-text);
    color: var(--mp-color-bg);
}

/* — panneau de menu mobile plein écran — */
.mp-mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: var(--mp-space-5);
    background: var(--mp-color-bg);
    padding: var(--mp-space-4) var(--mp-container-padding);
    transform: translateX(-100%);
    transition: transform 0.35s ease;
    overflow-y: auto;
}

.mp-mobile-menu.is-open {
    transform: translateX(0);
}

.mp-mobile-menu__close {
    align-self: flex-end;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--mp-color-text);
    cursor: pointer;
}

.mp-mobile-menu__close svg {
    width: 18px;
    height: 18px;
}

.mp-mobile-menu__nav {
    display: flex;
    flex-direction: column;
    gap: var(--mp-space-3);
    list-style: none;
    margin: 0;
    padding: 0;
}

.mp-mobile-menu__nav a {
    display: inline-block;
    font-family: var(--mp-font-title);
    font-size: var(--mp-h2-size);
    font-weight: var(--mp-font-weight-regular);
    text-decoration: none;
    color: var(--mp-color-text);
}

.mp-mobile-menu__nav a[aria-current='page'] {
    text-decoration: underline;
    text-underline-offset: 0.3em;
    text-decoration-thickness: 1px;
}

/* Sélecteur de langue et liens compte/panier sur une même ligne, calés à gauche comme
   les liens de navigation au-dessus. */
.mp-mobile-menu__footer {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mp-space-3);
    padding-top: var(--mp-space-4);
    border-top: 1px solid var(--mp-color-border);
}

/* Le padding du premier lien décalerait "FR" par rapport aux liens de nav au-dessus. */
.mp-mobile-menu__footer .lang-switcher__link:first-child {
    padding-left: 0;
}

.mp-mobile-menu__links {
    display: flex;
    align-items: center;
    gap: var(--mp-space-3);
}

.mp-mobile-menu__links a {
    display: flex;
    align-items: center;
    min-height: 44px;
    text-decoration: none;
    color: var(--mp-color-text);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.75rem;
}

@media (min-width: 768px) {
    .mp-mobile-menu {
        display: none;
    }
}

/* ==========================================================================
   Pied de page
   ========================================================================== */

.site-footer {
    border-top: 1px solid var(--mp-color-border);
}

.site-footer__newsletter {
    padding: var(--mp-space-5) var(--mp-container-padding);
}

/* Bloc centré, DESIGN.md §Bloc newsletter : titre, texte, champ et bouton sur le même
   axe vertical, largeur max 38rem. */
.mp-newsletter {
    max-width: var(--mp-content-max-width);
    margin: 0 auto;
    text-align: center;
}

.mp-newsletter p {
    color: var(--mp-color-text-muted);
}

/* Le formulaire est rendu par le plugin Brevo (shortcode [sibwp_form]) : les <p> qu'il
   génère autour du champ et du bouton sont neutralisés pour ne garder que notre gap. */
.mp-newsletter form p {
    margin: 0;
}

.mp-newsletter form {
    display: flex;
    flex-direction: column;
    gap: var(--mp-space-3);
    margin-top: var(--mp-space-3);
}

.mp-newsletter input.sib-email-area {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 0 var(--mp-space-2);
    font: inherit;
    font-size: 15px;
    color: var(--mp-color-text);
    background: transparent;
    border: 1px solid var(--mp-color-border);
    border-radius: var(--mp-radius);
}

.mp-newsletter input.sib-email-area:focus-visible {
    border-color: var(--mp-color-text);
    outline: 2px solid var(--mp-color-accent);
    outline-offset: 2px;
}

.mp-newsletter input.sib-default-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font: inherit;
    font-weight: var(--mp-font-weight-medium);
    font-size: 13px;
    color: var(--mp-color-text);
    background: transparent;
    border: 1px solid var(--mp-color-text);
    border-radius: var(--mp-radius);
    padding: 0.875rem 2.5rem;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.mp-newsletter input.sib-default-btn:hover {
    color: var(--mp-color-bg);
    background: var(--mp-color-text);
}

/* Messages de succès/erreur du plugin : texte simple, pas de fond ni de bordure. */
.mp-newsletter #error-message,
.mp-newsletter #success-message,
.mp-newsletter .sib-form-message-panel {
    margin-top: var(--mp-space-3);
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    font-size: 13px;
    color: var(--mp-color-text-muted);
}

.site-footer__bottom {
    max-width: var(--mp-container-max-width);
    margin: 0 auto;
    padding: var(--mp-space-4) var(--mp-container-padding);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--mp-space-4);
}

.site-footer__legal {
    font-size: 13px;
    color: var(--mp-color-text-muted);
}

.site-footer__socials {
    display: flex;
    align-items: center;
    gap: var(--mp-space-3);
    justify-self: end;
}

.site-footer__socials a {
    color: var(--mp-color-text);
    display: flex;
}

/* ==========================================================================
   Sections et grille produit
   ========================================================================== */

.mp-section {
    max-width: var(--mp-container-max-width);
    margin: 0 auto;
    padding: var(--mp-space-4) var(--mp-container-padding);
}

@media (min-width: 768px) {
    .mp-section {
        padding: var(--mp-space-5) var(--mp-container-padding);
    }
}

.mp-section__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--mp-space-4);
    margin-bottom: var(--mp-space-3);
    text-align: center;
}

/* Flexbox plutôt que grid : une ligne pleine (3 cartes desktop) occupe exactement
   100% de la largeur, donc justify-content:center n'a d'effet visible que sur une
   ligne incomplète — qui est ainsi toujours centrée, y compris une grille à 1 ou 2
   produits qui ne tient que sur une seule ligne (DESIGN.md §Cartes produit). */
.product-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--mp-space-2);
}

.product-grid > .product-card {
    flex: 0 1 100%;
}

/* Boutique, catégories et archives : lieu de parcours et de comparaison, 2 colonnes
   dès le mobile (DESIGN.md §Colonnes de grille). La homepage, lieu de contemplation,
   garde 1 colonne mobile via la règle par défaut ci-dessus. */
@media (max-width: 767px) {
    .product-grid--cols-2 > .product-card {
        flex: 0 1 calc(50% - (var(--mp-space-2) / 2));
    }
}

.product-card__link {
    display: flex;
    flex-direction: column;
    gap: var(--mp-space-1);
    color: var(--mp-color-text);
    text-decoration: none;
}

/* Ratio posé en custom property par section (--mp-card-ratio, sur .product-grid — voir
   front-page.php / archives.php) : les œuvres d'une même section partagent un format,
   ce ratio calculé fait donc disparaître les marges. --mp-card-aspect-ratio (3/4) reste
   le repli par défaut hors de ce calcul. object-fit:contain + le fond ci-dessous restent
   en place comme filet de sécurité pour les petits écarts encore sous la tolérance
   (DESIGN.md §Cartes produit). */
.product-card__image {
    aspect-ratio: var(--mp-card-ratio, var(--mp-card-aspect-ratio));
    overflow: hidden;
    background: var(--mp-color-surface);
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-card__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Mode de repli pour une section aux formats hétérogènes (DESIGN.md §Cartes produit) :
   pas de ratio commun imposé, hauteur commune et largeur intrinsèque à la place —
   aucun vide vertical, les titres/prix restent à la même hauteur d'une carte à l'autre.
   Sur mobile 1 colonne (homepage), la notion de hauteur commune ne s'applique pas :
   chaque image garde simplement son format naturel en pleine largeur. Réservé au
   DESKTOP pour les grilles 2 colonnes (boutique/catégories/archives, ci-dessous) :
   des largeurs variables y désaligneraient les cellules. */
.product-grid--common-height .product-card__image {
    aspect-ratio: auto;
    width: 100%;
    height: auto;
}

.product-grid--common-height .product-card__image img {
    width: 100%;
    height: auto;
}

@media (min-width: 768px) {
    .product-grid--common-height .product-card {
        flex: 0 0 auto;
    }

    .product-grid--common-height .product-card__image {
        width: auto;
        height: 20rem;
    }

    .product-grid--common-height .product-card__image img {
        width: auto;
        height: 100%;
    }
}

/* Mobile 2 colonnes (boutique, catégories, archives) : le mode hauteur commune
   ci-dessus est réservé au desktop, ses largeurs variables désalignant les cellules
   en 2 colonnes. On revient donc au ratio commun standard des cartes, forcé à 1:1
   puisqu'aucun ratio homogène n'a pu être détecté pour ce mode (DESIGN.md §Ratio
   d'image). Chaque cellule d'une même ligne a ainsi exactement la même hauteur,
   image calée en haut. */
@media (max-width: 767px) {
    .product-grid--common-height.product-grid--cols-2 .product-card__image {
        aspect-ratio: 1 / 1;
        width: 100%;
        height: auto;
    }

    .product-grid--common-height.product-grid--cols-2 .product-card__image img {
        width: 100%;
        height: 100%;
    }
}

.product-card__tag {
    align-self: flex-start;
}

/* Toujours réservé dans le DOM (voir product-card.php) pour que titres et prix
   s'alignent horizontalement entre cartes avec et sans label, DESIGN.md §Cartes
   produit. Masqué visuellement, pas retiré du flux : la hauteur reste occupée. */
.product-card__tag--hidden {
    visibility: hidden;
}

/* Hauteur réservée pour 2 lignes (line-height 1.25) : un titre court et un titre sur
   deux lignes occupent le même espace, prix/"Épuisé" restent alignés d'une carte à
   l'autre (DESIGN.md §Ratio d'image, combiné à l'emplacement réservé du label ARCHIVE
   ci-dessus). */
.product-card__title {
    font-family: var(--mp-font-title);
    font-weight: var(--mp-font-weight-medium);
    font-size: 18px;
    margin: 0;
    line-height: 1.25;
    min-height: calc(1.25em * 2);
}

.product-card__price {
    margin: 0;
    font-family: var(--mp-font-body);
    font-size: 15px;
    color: var(--mp-color-text);
}

.product-card__price--muted {
    color: var(--mp-color-text-muted);
}

/* Hover desktop uniquement : (hover: hover) exclut le tap tactile, qui n'a pas
   d'équivalent hover (DESIGN.md §Mobile). */
@media (hover: hover) {
    .product-card__link:hover .product-card__image img {
        opacity: 0.85;
    }
}

.mp-section__cta {
    margin-top: var(--mp-space-4);
    text-align: center;
}

/* Groupes de catégorie au sein de la section "Œuvres disponibles" : blocs d'une même
   section (DESIGN.md §Espacements), pas une rupture de section à part entière. */
.mp-category-group + .mp-category-group {
    margin-top: var(--mp-space-4);
}

/* Sur-titre discret (ex. "DERNIÈRE SORTIE", "ARCHIVES") : jamais un vrai titre de
   lecture, cf. h4 DESIGN.md §Typographie. */
.mp-eyebrow {
    font-family: var(--mp-font-body);
    font-weight: var(--mp-font-weight-medium);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--mp-color-text-muted);
    margin: 0;
}

/* Section Archives : bloc éditorial centré, sans grille produit (DESIGN.md
   §Homepage — Archives). Les filets remplacent le <hr> qui séparait auparavant
   cette section de la précédente : le padding de .mp-section fait déjà l'espace,
   pas de marge supplémentaire à ajouter. */
.mp-archives-block {
    border-top: 1px solid var(--mp-color-border);
    border-bottom: 1px solid var(--mp-color-border);
}

.mp-archives-block__inner {
    max-width: var(--mp-content-max-width);
    margin: 0 auto;
    text-align: center;
}

.mp-archives-block__inner .mp-eyebrow {
    margin-bottom: var(--mp-space-3);
}

.mp-archives-block__text {
    font-family: var(--mp-font-title);
    font-size: 1.125rem;
    color: var(--mp-color-text);
    margin: 0 0 var(--mp-space-4);
}

/* ==========================================================================
   Boucle produits native WooCommerce (boutique, catégories, produits apparentés)
   Le conteneur de boucle et chaque carte sont surchargés (woocommerce/loop/loop-start.php,
   loop-end.php, content-product.php) pour réutiliser .product-grid et .product-card :
   il ne reste ici que ce qui est propre à la boutique (barre d'outils, tri, pagination,
   en-tête d'archive). Le style de la carte elle-même vit avec .product-card, plus haut.
   ========================================================================== */

/* Barre d'outils : filtre segmenté à gauche, tri à droite.
   Les styles natifs WooCommerce flottent ces éléments, d'où les remises à zéro. */
.mp-shop-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--mp-space-3);
    margin-bottom: var(--mp-space-4);
}

.mp-shop-toolbar .seg {
    margin-right: auto;
}

.woocommerce .mp-shop-toolbar .woocommerce-ordering {
    float: none;
    margin: 0;
}

.woocommerce .woocommerce-ordering {
    font-size: 13px;
    color: var(--mp-color-text-muted);
    margin: 0;
}

.woocommerce .woocommerce-ordering select {
    font: inherit;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--mp-color-text);
    background: transparent;
    border: 1px solid var(--mp-color-border);
    border-radius: var(--mp-radius);
    padding: 5px 8px;
}

.woocommerce-products-header {
    margin-bottom: var(--mp-space-4);
}

/* Sans préfixe .woocommerce : réutilisé tel quel sur le <h1> de la page Archives
   (Page classique, pas de contexte boutique). */
.page-title {
    text-align: center;
}

.woocommerce-products-header .term-description {
    max-width: var(--mp-content-max-width);
    font-size: 16px;
    line-height: 1.7;
    color: var(--mp-color-text-muted);
}

/* Sans préfixe .woocommerce : réutilisé tel quel sur la page Archives (Page classique,
   pas de contexte boutique). */
nav.woocommerce-pagination ul {
    border: 0;
    display: flex;
    gap: var(--mp-space-2);
    justify-content: center;
    margin-top: var(--mp-space-4);
}

nav.woocommerce-pagination ul li {
    border: 0;
}

nav.woocommerce-pagination ul li a,
nav.woocommerce-pagination ul li span {
    border: 1px solid var(--mp-color-border);
    border-radius: var(--mp-radius);
    padding: 6px 12px;
    font-size: 13px;
}

@media (min-width: 768px) {
    .product-grid {
        gap: var(--mp-space-4);
    }

    .product-grid > .product-card {
        flex: 0 1 calc(33.333% - (var(--mp-space-4) * 2 / 3));
    }
}

/* ==========================================================================
   Fiche produit
   ========================================================================== */

.woocommerce-breadcrumb {
    font-size: 13px;
    color: var(--mp-color-text-muted);
    margin: 0 0 var(--mp-space-4);
}

/* Deux colonnes (galerie / résumé) dès le desktop, empilées sur mobile. Conteneur dédié
   (mp_product_columns_start()/end(), functions.php), distinct du conteneur racine
   WooCommerce qui héberge aussi "Dans la même série" : nécessaire pour que
   position:sticky sur la galerie (plus bas) reste bornée à ces deux colonnes et ne
   déborde jamais sur les sections suivantes (DESIGN.md §Rythme vertical et galerie
   collante). */
.mp-product-columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--mp-space-4);
}

.woocommerce div.product div.images,
.woocommerce div.product div.summary {
    width: auto;
    min-width: 0;
    float: none;
    margin: 0;
}

/* Galerie fiche produit (DESIGN.md §Galerie d'images) : sans conteneur visible — aucun
   fond, aucune bordure, aucune ombre, les images remplissent leur zone à leur ratio
   naturel. Base mobile : carrousel horizontal balayable via scroll-snap natif (pas de
   JS requis pour le swipe). Empilement vertical pleine largeur en desktop, cf. media
   query plus bas. Séparées par --mp-space-2, sans filet entre elles. */
.mp-gallery {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: var(--mp-space-2);
}

.mp-gallery__item {
    flex: 0 0 100%;
    scroll-snap-align: center;
    display: block;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: zoom-in;
}

.mp-gallery__img {
    display: block;
    width: 100%;
    height: auto;
}

.mp-gallery__dots {
    display: flex;
    justify-content: center;
    gap: var(--mp-space-1);
    margin-top: var(--mp-space-2);
}

.mp-gallery__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mp-color-border);
}

.mp-gallery__dot.is-active {
    background: var(--mp-color-text);
}

.mp-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100;
    background: var(--mp-color-bg);
    align-items: center;
    justify-content: center;
    padding: var(--mp-space-4);
}

.mp-lightbox.is-visible {
    display: flex;
}

/* Plus de préfixe ".woocommerce div.product div.images" : mp-theme.js déplace la
   lightbox en enfant direct de <body> à l'initialisation, pour échapper au contexte
   d'empilement piégeant créé par "div.images" en position:sticky sur desktop (cf.
   commentaire dans mp-theme.js). L'image n'étant plus descendante de "div.images", le
   reset WooCommerce ".woocommerce div.product div.images img{width:100%}" ne la cible
   plus : un simple sélecteur de classe suffit désormais. */
.mp-lightbox__img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    cursor: zoom-in;
    -webkit-user-drag: none;
    /* Le geste tactile est entièrement piloté par mp-theme.js (pointer events) : sans
       ça, le navigateur intercepte le glissé pour son propre scroll/pinch-zoom. */
    touch-action: none;
    transition: transform 0.15s ease;
}

/* Zoom (DESIGN.md §Galerie d'images) : mp-theme.js pose transform-origin au point
   cliqué puis "translate(...) scale(...)" — un transform ne modifie pas la mise en
   page, donc aucun changement de display/width/height/overflow n'est nécessaire ici.
   Pendant un glissé actif, la transition est coupée pour rester réactive au pointeur. */
.mp-lightbox.is-dragging .mp-lightbox__img {
    cursor: grabbing;
    transition: none;
}

.mp-lightbox__close {
    position: absolute;
    top: var(--mp-space-2);
    right: var(--mp-space-2);
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    color: var(--mp-color-text);
    cursor: pointer;
}

.woocommerce div.product div.summary {
    display: flex;
    flex-direction: column;
}

.woocommerce div.product .product_title {
    margin: 0 0 var(--mp-space-2);
}

/* Description courte : sous-titre juste sous le titre (placé par hook, priorité 6). */
.woocommerce div.product .woocommerce-product-details__short-description {
    font-size: 14px;
    color: var(--mp-color-text-muted);
    margin: 0 0 var(--mp-space-4);
}

.woocommerce div.product .woocommerce-product-details__short-description p:last-child {
    margin-bottom: 0;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
    font-family: var(--mp-font-title);
    font-weight: var(--mp-font-weight-medium);
    font-size: 28px;
    color: var(--mp-color-text);
    margin: 0 0 var(--mp-space-4);
}

/* État "Épuisé" (DESIGN.md §État "Épuisé") : remplace le prix, deux lignes empilées. */
.mp-out-of-stock {
    display: block;
    font-family: var(--mp-font-title);
    font-weight: var(--mp-font-weight-medium);
    font-size: 28px;
    color: var(--mp-color-text);
}

.mp-out-of-stock-note {
    display: block;
    font-size: 13px;
    color: var(--mp-color-text-muted);
    margin-top: var(--mp-space-1);
}

/* Flux normal, pas de flex : le sélecteur de quantité est définitivement masqué (voir
   plus bas), il ne reste donc qu'un seul élément visible (le bouton). Un plugin tiers
   (capture d'email alternative) injecte un div supplémentaire après le bouton — en
   flex avec gap, cet enfant imprévu désalignait le calcul flex:1 du CTA (largeur
   inférieure à celle de la description courte, DESIGN.md §Ordre des éléments). En
   flux normal, le bouton passe en width:100% ci-dessous : sa largeur ne dépend plus
   du nombre ou du type d'enfants du formulaire. Pas de margin-top ici : .summary est
   display:flex, les marges ne fusionnent jamais entre flex-items (contrairement au
   flux normal) — un margin-top ici s'additionnerait au margin-bottom de la
   description courte au lieu de s'y superposer, doublant l'écart avant le CTA
   (DESIGN.md §Rythme vertical et galerie collante : un seul --space-4, pas deux). */
.woocommerce div.product form.cart {
    margin: 0;
}

/* Aucun sélecteur de quantité (DESIGN.md §Bloc d'achat : les œuvres s'achètent une par
   une). Le champ existe toujours dans le DOM (type="hidden", posé nativement par
   WooCommerce via woocommerce_is_sold_individually — functions.php), mais son
   conteneur ne doit jamais s'afficher. */
.woocommerce div.product form.cart div.quantity {
    display: none;
}

/* Le bouton d'ajout au panier est le seul bouton plein du site (DESIGN.md §Liens et
   CTA) : fond noir, texte blanc, inversion au hover/focus. Sélectionné par classe
   seule (pas d'ancrage sur form.cart) pour s'appliquer aussi à la barre d'achat fixe
   mobile, qui rend une copie de ce bouton hors du formulaire. Les 3 classes
   (.single_add_to_cart_button.button.alt) sont nécessaires pour dépasser la
   spécificité du style violet par défaut de WooCommerce (.woocommerce button.button.alt). */
.woocommerce .single_add_to_cart_button.button.alt {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-family: var(--mp-font-body);
    font-weight: var(--mp-font-weight-medium);
    font-size: 13px;
    line-height: 1.2;
    padding: 0.875rem var(--mp-space-4);
    color: var(--mp-color-bg);
    background: var(--mp-color-text);
    border: 1px solid var(--mp-color-text);
    border-radius: var(--mp-radius);
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.woocommerce .single_add_to_cart_button.button.alt:hover,
.woocommerce .single_add_to_cart_button.button.alt:focus-visible {
    color: var(--mp-color-text);
    background: transparent;
}

/* Requête d'ajout au panier en cours. Marqué par une classe et non par l'attribut
   disabled : le style WooCommerce par défaut (button.button.alt:disabled[disabled])
   est plus spécifique que la règle ci-dessus et repeindrait le bouton en violet. */
.woocommerce .single_add_to_cart_button.button.alt.is-loading {
    opacity: 0.6;
    cursor: progress;
}

/* Bloc livraison (DESIGN.md §Bloc livraison) : pictogramme fil de fer + liste compacte
   des conditions, directement sous le CTA. Centré dans sa colonne (justify-content +
   text-align) : une seule règle, sans media query, donc valable mobile et desktop par
   construction. */
.mp-delivery-conditions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--mp-space-2);
    margin-top: var(--mp-space-3);
}

.mp-delivery-conditions svg {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
}

.mp-delivery-conditions ul {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
}

.mp-delivery-conditions li {
    font-size: 13px;
    line-height: 1.6;
    color: var(--mp-color-text-muted);
}

/* Description détaillée du produit : toujours visible, plus d'accordéon (DESIGN.md
   §Ordre des éléments). Le filet reprend le rôle de séparateur de section tenu
   auparavant par le conteneur de l'accordéon. margin-top est l'espace "entre les
   blocs" (DESIGN.md §Rythme vertical) ; padding-top n'a qu'à séparer le filet du
   titre qui suit, pas à redoubler ce même espace. */
.mp-product-description {
    max-width: var(--mp-content-max-width);
    margin-top: var(--mp-space-4);
    padding-top: var(--mp-space-2);
    border-top: 1px solid var(--mp-color-border);
    font-size: 15.5px;
    line-height: 1.75;
    color: var(--mp-color-text);
}

/* .summary est display:flex : chaque enfant direct (dont .mp-product-description) forme
   son propre contexte de formatage, la margin-bottom du dernier <p> (contenu admin via
   wpautop, non maîtrisé) ne fusionne donc jamais avec l'extérieur — elle s'ajoutait au
   margin-top de .mp-shipping-info au lieu de s'y superposer, doublant l'écart avant
   "Livraison soignée" par rapport à celui avant "L'œuvre" (même bug que la description
   courte / CTA plus haut, DESIGN.md §Rythme vertical). */
.mp-product-description > *:last-child {
    margin-bottom: 0;
}

/* Bloc "Livraison soignée" (DESIGN.md §Bloc livraison) : toujours visible, indiscernable
   de "L'œuvre" au-dessus — même niveau de titre (h3 simple, sans classe ni style
   dédié) et mêmes propriétés de texte reprises telles quelles de .mp-product-description
   (taille, interligne, couleur), pas seulement un titre similaire. Même rythme
   margin-top/padding-top que .mp-product-description, pour la même raison. */
.mp-shipping-info {
    max-width: var(--mp-content-max-width);
    margin-top: var(--mp-space-4);
    padding-top: var(--mp-space-2);
    border-top: 1px solid var(--mp-color-border);
    font-size: 15.5px;
    line-height: 1.75;
    color: var(--mp-color-text);
}

.mp-shipping-info h3 {
    margin: 0 0 var(--mp-space-1);
}

.mp-shipping-info p {
    margin: 0;
}

/* Barre d'achat fixe mobile (DESIGN.md §Bloc d'achat) : apparaît une fois le CTA
   d'origine hors du champ de vision (mp-theme.js), masquée en desktop plus bas. */
.mp-sticky-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mp-space-2);
    padding: var(--mp-space-2) var(--mp-container-padding);
    background: var(--mp-color-bg);
    border-top: 1px solid var(--mp-color-border);
    transform: translateY(100%);
    transition: transform 0.25s ease;
}

.mp-sticky-bar.is-visible {
    transform: translateY(0);
}

.mp-sticky-bar__price {
    font-family: var(--mp-font-title);
    font-weight: var(--mp-font-weight-medium);
    font-size: 18px;
    color: var(--mp-color-text);
}

/* .button.alt nécessaires : la règle de base (.woocommerce .single_add_to_cart_button.
   button.alt, 3 classes) pose width:100%, plus spécifique que ce sélecteur sans elles
   (2 classes) — sans ce complément, width:100% l'emportait et le bouton débordait du
   viewport mobile en plus du prix à côté de lui. */
.mp-sticky-bar .single_add_to_cart_button.button.alt {
    flex: 0 0 auto;
    width: auto;
    padding: 0.75rem var(--mp-space-3);
}

/* Espace réservé en bas de la PAGE (pas seulement de div.product, qui se termine bien
   avant le pied de page) tant que la barre est visible, pour ne jamais masquer de
   contenu (DESIGN.md §Bloc d'achat) — pied de page compris. 80px et non 72px : la barre
   mesure réellement ~74,6px (2 × padding 16px + bouton + bordure), un espace trop juste
   laissait ses derniers pixels chevaucher le bas du pied de page (mesuré en DOM réel). */
body.mp-sticky-bar-visible {
    padding-bottom: 80px;
}

/* "Dans la même série" couvre toute la largeur, sous les deux colonnes. Classes réelles
   rendues par WooCommerce pour les ventes incitatives (up-sells.php) : "upsells
   products", pas "related" (produits apparentés automatiques, supprimés — DESIGN.md
   §Dans la même série). Frère de .mp-product-columns, pas un item de sa grille (voir
   plus haut) : margin-top recrée l'espacement qu'apportait auparavant le row-gap de
   grille entre les deux colonnes et cette section. */
.woocommerce div.product .upsells.products {
    margin-top: var(--mp-space-4);
    border-top: 1px solid var(--mp-color-border);
    padding-top: var(--mp-space-5);
}

.upsells.products h2 {
    margin-bottom: var(--mp-space-4);
    text-align: center;
}

/* "Dans la même série" (DESIGN.md) — mobile : plus de slider. Les œuvres invisibles
   d'un carrousel sans indice de défilement sont une mauvaise UX ; grille 2 colonnes,
   autant de lignes que nécessaire, tout est visible sans interaction. La dernière
   carte d'une ligne incomplète (nombre impair d'œuvres) est centrée via
   :last-child:nth-child(odd) ci-dessous, sans calcul JS ni PHP. */
.upsells.products .product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--mp-space-2);
}

.upsells.products .product-grid > .product-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: calc(50% - (var(--mp-space-2) / 2));
    margin-inline: auto;
}

@media (min-width: 768px) {
    /* align-items:start évite que .summary soit étiré à la hauteur de .images (grille en
       stretch par défaut) quand la galerie est plus haute que le résumé — source du vide
       résiduel entre le contenu et le CTA (DESIGN.md §Espaces blancs). */
    .mp-product-columns {
        grid-template-columns: 1fr 1fr;
        gap: var(--mp-space-4) calc(var(--mp-space-4) * 1.2);
        align-items: start;
    }

    /* Desktop : images empilées verticalement pleine largeur de colonne, plus de
       carrousel (DESIGN.md §Galerie d'images). */
    .mp-gallery {
        flex-direction: column;
        overflow-x: visible;
        scroll-snap-type: none;
    }

    .mp-gallery__item {
        flex: 0 0 auto;
        scroll-snap-align: none;
    }

    .mp-gallery__dots {
        display: none;
    }

    /* Galerie collante (DESIGN.md §Rythme vertical et galerie collante) : comble le
       vide sous une œuvre à image unique pendant que la colonne de droite défile.
       Posée uniquement sur une galerie à une seule image (voir la classe conditionnelle
       dans product-image.php) — un des trois garde-fous imposés par DESIGN.md, avec
       "desktop uniquement" (satisfait par cette media query) et le décalage tenant
       compte du header sticky (top ci-dessous). */
    .images.mp-gallery--sticky {
        position: sticky;
        top: calc(var(--mp-header-height) + var(--mp-space-3));
    }

    .mp-sticky-bar {
        display: none;
    }

    /* "Dans la même série" desktop : ligne unique, jamais de retour à la ligne. Repasse
       en flex (la grille 2 colonnes ci-dessus est mobile uniquement) et neutralise les
       propriétés posées par la grille mobile sur les cartes pour qu'elles n'interfèrent
       pas avec le flex-grow ci-dessous. */
    .upsells.products .product-grid {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: safe center;
    }

    /* Largeur de base 1/5 identique à avant, mais flex-grow:1 remplace flex-grow:0 :
       avec 5 cartes la base seule remplit déjà 100% (aucune croissance visible), avec
       moins de 5 le flex-grow répartit l'espace restant entre les cartes présentes —
       la ligne occupe toujours exactement la largeur du bloc deux colonnes du haut de
       la fiche, jamais de marge résiduelle de part et d'autre (revirement assumé de la
       règle précédente, DESIGN.md §Dans la même série). Cas limite : avec une seule
       carte, elle s'étire sur toute la largeur de la ligne. */
    .upsells.products .product-grid > .product-card {
        flex: 1 0 calc(
            (var(--mp-container-max-width) - (2 * var(--mp-container-padding)) - (4 * var(--mp-space-4)))
            / 5
        );
        grid-column: auto;
        max-width: none;
        margin-inline: 0;
    }

    /* Même spécificité que la règle mobile (:last-child:nth-child(odd), quatre classes +
       deux pseudo-classes des deux côtés) : sans ce doublon exact, la règle mobile
       l'emporterait quand même en desktop sur un nombre impair de cartes (la spécificité
       ignore les media queries) et empêcherait la dernière carte de croître avec les
       autres via flex-grow. */
    .upsells.products .product-grid > .product-card:last-child:nth-child(odd) {
        grid-column: auto;
        max-width: none;
        margin-inline: 0;
    }
}