/* ==========================================================================
   Page produit « Mug personnalisé »
   Gabarit aligné sur la fiche affiche : avis en haut, visuel bord à bord,
   badge stock overlay, titre petit dessous, onglets (mobile), barre sticky.
   Mobile-first strict (375px), 2 colonnes en desktop ≥1024.
   ========================================================================== */

.page-mug {
    max-width: 1180px;
    margin: 0 auto;
    /* Padding-bottom = place pour la barre sticky mobile (fixée en bas). */
    padding: 8px 0 96px;
}

/* Le bouton « Voir le rendu avec un encadrement » de l'upload-zone n'a pas de
   sens sur le mug (pas de cadre) → masqué. */
.page-mug .p-upload-zone-see-frame { display: none !important; }

/* L'upload-zone (.p-upload-zone-section.container) vit dans l'onglet 1 Photo.
   Le tunnel gère déjà son padding latéral → on neutralise celui du .container
   interne pour éviter un double padding (upload-zone rétrécie sur mobile). */
.page-mug-tunnel .p-upload-zone-section.container {
    max-width: none;
    padding-inline: 0;
}

/* Comportement upload-zone :
   - APRÈS génération : la vue initiale (clickarea) disparaît et la vue history
     apparaît (miniatures + bouton « Autre photo ») → géré nativement par
     l'upload-zone (data-state), sur PC ET mobile.
   - AVANT génération : contrairement aux affiches IA (qui masquent la zone en
     mobile car l'import passe SEULEMENT par le sticky), sur le mug on GARDE la
     zone d'upload visible en mobile, avec sa clickarea (label for=upload-input)
     cliquable. Le mug propose ainsi 3 points d'entrée : visuel d'exemple, sticky
     « Importer ma photo », et la zone d'upload. */
@media (max-width: 1023px) {
    .page-mug .p-upload-zone-section:has([data-upload-zone][data-state="initial"]) {
        display: block !important;
    }
    .page-mug .p-upload-zone-clickarea {
        display: block !important;
    }
}

.page-mug-cols {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Fil d'Ariane collé au contenu : pas d'espace au-dessus ni en dessous
   (le partial ajoute margin-top + padding-bottom par défaut). */
.page-mug-visual .p-breadcrumb { margin-top: 0; }
.page-mug-visual .p-breadcrumb .p-breadcrumb-list { padding-bottom: 0; }

/* --------------------------------------------------------------------------
   COLONNE VISUELLE
   -------------------------------------------------------------------------- */
.page-mug-visual {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Avis : reproduit EXACTEMENT le comportement des fiches produit, où product.js
   déplace les avis en overlay dans l'image avec le badge « Avis Google » réduit
   au logo (cf. product.css → .p-format-selector-preview > .p-hero-reviews).
   Ici pas de JS : on rend directement l'overlay dans le mockup. */
.page-mug-reviews {
    position: absolute;
    top: var(--sp-3, 12px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    margin: 0;
    text-align: center;
}
.page-mug-reviews .p-reviews-meta {
    flex-wrap: nowrap;
}
/* Badge « Avis Google » réduit au logo (texte masqué via font-size:0) —
   identique à product.css. */
.page-mug-reviews .p-reviews-source {
    margin-left: var(--sp-1, 4px);
    padding: 0;
    background: none;
    border: none;
    font-size: 0;
}

/* Conteneur mockup : porte les overlays communs (avis, stock, progression). */
.page-mug-mockup {
    position: relative;
    width: 100%;
}

/* Carrousel : mug BORD À BORD (pleine largeur) mais MOINS HAUT que l'image
   portrait → on coupe le haut (l'espace vide au-dessus du mug) via un conteneur
   plus court + object-fit:cover. Fond identique aux fiches produit. */
.page-mug-carousel {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 4.4; /* cadre par défaut (peut être surchargé par slide) */
    background: var(--c-surface-alt);
    overflow: hidden;
}
.page-mug-carousel-track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease;
}
.page-mug-slide {
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
/* Boîte au ratio RÉEL de l'image (1572/2192) : pleine largeur, donc plus HAUTE
   que le slide → elle déborde. On la décale vers le haut (top négatif) pour
   COUPER le haut vide de l'image ; le slide (overflow:hidden) masque le surplus.
   Les zones d'impression (%) restent calées sur cette boîte = sur l'image. */
.page-mug-slide-inner {
    position: absolute;
    left: 0;
    /* Décalage vertical PAR SLIDE (--mug-shift, défini en inline) : remonte
       l'image pour couper le haut vide, sans couper le bas du mug. */
    top: var(--mug-shift, -14%);
    width: 100%;
    /* Ratio de l'image PAR SLIDE (les 2 mockups n'ont pas le même ratio). */
    aspect-ratio: var(--mug-ratio, 1572 / 2192);
    /* Container query : le texte du caption (cqw) devient proportionnel à la
       taille du mug → cohérent sur tous les mockups. */
    container-type: inline-size;
    /* Agrandissement + décalage horizontal du mug PAR SLIDE (image + zones
       ensemble → restent calées). Défaut : scale 1, nudge 0. Origin centre →
       grandit symétriquement (ombre préservée). Débordement masqué (overflow). */
    transform: translateX(var(--mug-nudge-x, 0)) scale(var(--mug-scale, 1));
    transform-origin: center center;
}

.page-mug-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Dots de navigation du carrousel. */
.page-mug-carousel-dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 4;
}
.page-mug-carousel-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: rgba(0, 0, 0, 0.25);
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}
.page-mug-carousel-dot.is-active {
    background: var(--color-green);
    transform: scale(1.2);
}

/* Bouton flip anse droite/gauche (bas-droite de la slide). */
.page-mug-flip {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border: none;
    border-radius: 999px;
    background: rgba(251, 246, 239, 0.94);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16);
    color: var(--color-green);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease;
}
.page-mug-flip-label { line-height: 1; }
.page-mug-flip:hover { transform: scale(1.08); }
.page-mug-flip:active { transform: scale(0.96); }

/* Bouton « Recadrer » (mode photo) : overlay HAUT-DROITE du mockup, même style
   que le flip (pilule crème). Zone libre : pas de conflit avec avis/flip/stock. */
.page-mug-crop-btn {
    position: absolute;
    /* Coin HAUT-DROITE de la zone d'impression du mug (calé sur mug1, slide
       active). left = bord droit de la zone ; top = haut de la zone. */
    left: 62%;
    top: 37%;
    transform: translate(-50%, -50%);
    z-index: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(251, 246, 239, 0.96);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    color: var(--color-green);
    cursor: pointer;
    transition: transform 0.15s ease;
}
.page-mug-crop-btn:hover { transform: translate(-50%, -50%) scale(1.1); }
.page-mug-crop-btn:active { transform: translate(-50%, -50%) scale(0.94); }
.page-mug-crop-btn[hidden] { display: none; }

/* ===== Modale de recadrage de la photo (mode photo) ===== */
.page-mug-crop-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.55);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}
.page-mug-crop-modal[hidden] { display: none; }
.page-mug-crop-dialog {
    width: 100%;
    max-width: 420px;
    background: var(--color-bg-card, #FBF6EF);
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.page-mug-crop-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 12px;
    color: var(--color-text);
}
.page-mug-crop-close {
    border: none;
    background: none;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    color: var(--color-text-soft);
}
/* Zone de preview carrée : la photo y est déplaçable / zoomable. */
.page-mug-crop-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 12px;
    background: #000;
    cursor: grab;
    touch-action: none;
    user-select: none;
}
.page-mug-crop-stage:active { cursor: grabbing; }
.page-mug-crop-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-origin: center center;
    pointer-events: none;
}
.page-mug-crop-zoom-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-soft);
}
.page-mug-crop-zoom-row input[type="range"] { flex: 1; accent-color: var(--color-green); }
.page-mug-crop-actions {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}
.page-mug-crop-cancel,
.page-mug-crop-apply {
    flex: 1;
    padding: 12px;
    border-radius: 10px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid var(--color-border);
}
.page-mug-crop-cancel { background: #fff; color: var(--color-text-soft); }
.page-mug-crop-apply { background: var(--color-green); color: #fff; border-color: var(--color-green); }
body.has-mug-crop-open { overflow: hidden; }

/* Mode « anse à gauche » : on met l'IMAGE du mug en miroir (scaleX -1) et la
   zone d'impression passe à la position miroir. Le visuel dedans reste À
   L'ENDROIT (on ne le flippe pas). */
.page-mug-slide-inner.is-flipped .page-mug-photo {
    transform: scaleX(-1);
}
.page-mug-slide-inner.is-flipped {
    /* !important pour battre le --mug-print-left défini en style inline. */
    --mug-print-left: var(--mug-print-left-mirror) !important;
}

/* Zone d'impression : conteneur transparent. Le fond coloré (et sa forme) vit
   dans .page-mug-print-bg ; l'avatar est PAR-DESSUS (jamais clippé). */
.page-mug-print-overlay {
    position: absolute;
    left: var(--mug-print-left);
    top: var(--mug-print-top);
    width: var(--mug-print-width);
    height: var(--mug-print-height);
    z-index: 1;
    /* Pas d'overflow:hidden ici : l'étoile/rond ne doivent pas rogner l'avatar. */
    /* Simulation SUBLIMATION céramique : à l'impression les couleurs sortent
       plus sombres, moins saturées et légèrement plus ternes/chaudes que sur
       écran (le jaune vif → moutarde, cf. retours atelier). On reproduit ce
       rendu sur l'APERÇU pour éviter la déception « c'est moins flashy ». Le
       fichier envoyé à l'atelier (compose()) reste en couleur d'origine — on ne
       touche QUE l'aperçu. Le texte (page-mug-caption) est hors zone → intact.
       Réglages empiriques (proche des previews Printful/Vistaprint) :
         brightness 0.90 = assombrit ; saturate 0.80 = désature ;
         contrast 0.94 = adoucit ; sepia 0.06 = léger virage chaud/terne. */
    filter: brightness(0.9) saturate(0.8) contrast(0.94) sepia(0.06);
}

/* Fond coloré + FORME (rectangle par défaut, rond ou étoile via data-shape). */
.page-mug-print-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: 4px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.15);
}
/* Rond : cercle parfait (on force un carré centré pour ne pas ovaliser). */
.page-mug-print[data-shape="rond"] .page-mug-print-bg {
    border-radius: 50%;
    box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.15);
}
/* Étoile : clip-path 5 branches. Pas d'ombre inset (clip-path la masque). */
.page-mug-print[data-shape="etoile"] .page-mug-print-bg {
    border-radius: 0;
    box-shadow: none;
    clip-path: polygon(
        50% 0%, 61% 35%, 98% 35%, 68% 57%,
        79% 91%, 50% 70%, 21% 91%, 32% 57%,
        2% 35%, 39% 35%
    );
}
/* Cœur : masque SVG (courbes de Bézier → cœur parfaitement lisse, scalable).
   Le rectangle coloré (background-color inline) est masqué par la forme cœur.
   mask conserve la couleur choisie, contrairement à un clip-path polygonal
   qui rendait les bosses anguleuses. */
.page-mug-print[data-shape="coeur"] .page-mug-print-bg {
    border-radius: 0;
    box-shadow: none;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 29.6'%3E%3Cpath d='M16 29.6l-2.3-2.1C5.4 20 0 15.1 0 9.1 0 4.2 3.8.4 8.6.4c2.7 0 5.3 1.3 7.4 3.3C18.1 1.7 20.7.4 23.4.4 28.2.4 32 4.2 32 9.1c0 6-5.4 10.9-13.7 18.4L16 29.6z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 29.6'%3E%3Cpath d='M16 29.6l-2.3-2.1C5.4 20 0 15.1 0 9.1 0 4.2 3.8.4 8.6.4c2.7 0 5.3 1.3 7.4 3.3C18.1 1.7 20.7.4 23.4.4 28.2.4 32 4.2 32 9.1c0 6-5.4 10.9-13.7 18.4L16 29.6z'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* Fond transparent (« Aucun fond ») : AUCUNE couleur ni ombre visible, quelle
   que soit la forme (rond/étoile/rectangle). !important pour battre le style
   inline (background-color) ET la règle [data-shape="rond"] (ombre inset). */
.page-mug-print[data-shape] .page-mug-print-bg.is-transparent {
    background: transparent !important;
    box-shadow: none !important;
}

/* Zone de clic invisible plein cadre : le visuel d'exemple est déjà affiché
   dessous, un clic dessus ouvre le sélecteur de fichier (import). Pas de texte
   ni d'icône (le visuel EST le call-to-action, comme les affiches IA). */
.page-mug-print-clickarea {
    position: absolute;
    inset: 0;
    border: none;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    z-index: 2;
}

/* Contenu réel : avatar détouré centré dans le carré de couleur.
   Padding minimal → le visuel occupe quasi toute la zone. */
.page-mug-print-content {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-sizing: border-box;
}
.page-mug-print-img {
    width: 100%;
    height: 100%;
    /* Avatar détouré (PNG transparent) : visible ENTIER → contain.
       Le PNG OpenAI a des marges internes → on agrandit légèrement pour que
       l'avatar remplisse mieux la zone d'impression. */
    object-fit: contain;
    transform: scale(1.10);
}
/* Mode « corps entier » (footballeur / hide_decor) : le personnage est en pied
   (tête → pieds). On NE l'agrandit PAS (sinon tête/pieds coupés) et on le REDUIT
   un peu pour laisser de la marge sur le corps du mug → personnage plus petit,
   entier, bien centré. */
.page-mug-print.is-fullbody .page-mug-print-img {
    transform: scale(1);
}

/* ===== MODE BANNER : frise (tête d'animal répétée + émojis). Pas de fond
   coloré, pas de forme, pas de texte. La frise occupe toute la zone. ===== */
.page-mug-print.is-banner-mode .page-mug-print-bg {
    background: transparent !important;
    box-shadow: none !important;
}

/* ===== MODE PHOTO : la photo REMPLIT la forme (découpée), pas de fond coloré.
   La découpe (rond/cœur/étoile) est appliquée au CONTENU (le conteneur clippe
   la photo), et la photo est en cover + transform (recadrage {scale,tx,ty}). ===== */
.page-mug-print.is-photo-mode .page-mug-print-bg {
    /* Pas de fond coloré derrière une photo qui remplit la forme. */
    background: transparent !important;
    box-shadow: none !important;
}
.page-mug-print.is-photo-mode .page-mug-print-content {
    overflow: hidden;
}
.page-mug-print.is-photo-mode .page-mug-print-img {
    object-fit: cover;      /* la photo remplit la forme */
    transform: none;        /* le crop JS pose son propre transform */
}
/* Découpes de forme appliquées au CONTENU en mode photo (mêmes formes que -bg). */
.page-mug-print.is-photo-mode[data-shape="rond"] .page-mug-print-content {
    border-radius: 50%;
}
.page-mug-print.is-photo-mode[data-shape="etoile"] .page-mug-print-content {
    clip-path: polygon(
        50% 0%, 61% 35%, 98% 35%, 68% 57%,
        79% 91%, 50% 70%, 21% 91%, 32% 57%,
        2% 35%, 39% 35%
    );
}
.page-mug-print.is-photo-mode[data-shape="coeur"] .page-mug-print-content {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 29.6'%3E%3Cpath d='M16 29.6l-2.3-2.1C5.4 20 0 15.1 0 9.1 0 4.2 3.8.4 8.6.4c2.7 0 5.3 1.3 7.4 3.3C18.1 1.7 20.7.4 23.4.4 28.2.4 32 4.2 32 9.1c0 6-5.4 10.9-13.7 18.4L16 29.6z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 29.6'%3E%3Cpath d='M16 29.6l-2.3-2.1C5.4 20 0 15.1 0 9.1 0 4.2 3.8.4 8.6.4c2.7 0 5.3 1.3 7.4 3.3C18.1 1.7 20.7.4 23.4.4 28.2.4 32 4.2 32 9.1c0 6-5.4 10.9-13.7 18.4L16 29.6z'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* Forme « aucune » en mode photo : photo rectangulaire à COINS ARRONDIS
   (style polaroid). Rayon en % de la zone → visible à toute taille. */
.page-mug-print.is-photo-mode[data-shape="aucune"] .page-mug-print-content {
    border-radius: 7%;
}

/* Texte SUR LE MUG (noir), positionné juste SOUS la zone colorée.
   Le top = top de la zone + sa hauteur. La largeur suit la zone colorée. */
.page-mug-caption {
    position: absolute;
    /* Centré sur le MILIEU de la zone. Largeur BORNÉE à la zone d'impression
       (--mug-print-width) : le texte ne doit PAS déborder bord à bord comme avant
       (ça ne représentait pas le rendu imprimé, cf. aperçu panier borné). Le JS
       (fitMugCaption) réduit la police si une ligne dépasse cette largeur. */
    left: calc(var(--mug-print-left) + var(--mug-print-width) / 2);
    /* +2% : descend le texte pour qu'il ne touche pas le personnage (l'avatar
       déborde en bas via scale(1.10)), remonté d'un poil vs +3% (calage fiche). */
    top: calc(var(--mug-print-top) + var(--mug-print-height) + 2%);
    transform: translateX(-50%);
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: #000;
    line-height: 1.05;
    max-width: var(--mug-print-width);
    white-space: nowrap; /* titre + sous-titre sur 1 seule ligne chacun */
}
/* Perso simple corps entier (footballeur) : texte à une position FIXE (calée),
   centré sur ce point, taille propre. Écrase le top auto (sous la zone). */
.page-mug-caption.is-fullbody {
    top: var(--mug-text-top, 66%);
    transform: translate(-50%, -50%);
}
.page-mug-caption.is-fullbody .page-mug-caption-1 {
    font-size: var(--mug-cap-fb, 4.6cqw);
}

.page-mug-caption-1 {
    /* Bebas Neue : condensée « poster ». */
    font-family: 'Bebas Neue', var(--font-sans), sans-serif;
    font-weight: 400;
    /* Taille proportionnelle au mug, par slide (--mug-cap1). */
    font-size: var(--mug-cap1, 7cqw);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.page-mug-caption-2 {
    font-family: 'Bebas Neue', var(--font-sans), sans-serif;
    font-weight: 400;
    font-size: var(--mug-cap2, 4.4cqw);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    /* Même noir que le titre (#000, hérité de .page-mug-caption). */
    color: #000;
    margin-top: 1%;
}
.page-mug-caption-1:empty,
.page-mug-caption-2:empty { display: none; }

/* Police du texte pilotée par data-mug-caption-font sur .page-mug-caption
   (choix client). Display (Bebas) = défaut ci-dessus. Les autres surchargent
   font-family + casse + graisse pour un rendu fidèle à l'écran. */
.page-mug-caption[data-mug-caption-font="sans"] .page-mug-caption-1,
.page-mug-caption[data-mug-caption-font="sans"] .page-mug-caption-2 {
    font-family: 'Inter', var(--font-sans), sans-serif;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
}
.page-mug-caption[data-mug-caption-font="serif"] .page-mug-caption-1,
.page-mug-caption[data-mug-caption-font="serif"] .page-mug-caption-2 {
    font-family: 'Lora', Georgia, serif;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}
.page-mug-caption[data-mug-caption-font="hand"] .page-mug-caption-1,
.page-mug-caption[data-mug-caption-font="hand"] .page-mug-caption-2 {
    font-family: 'Dancing Script', cursive;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}
/* Léger boost de taille (cursive un peu plus fine). */
.page-mug-caption[data-mug-caption-font="hand"] .page-mug-caption-1 { font-size: calc(var(--mug-cap1, 7cqw) * 1.15); }
.page-mug-caption[data-mug-caption-font="hand"] .page-mug-caption-2 { font-size: calc(var(--mug-cap2, 4.4cqw) * 1.15); }

/* Ligne masquée via le toggle (data-off). */
.page-mug-caption-1[data-off="1"],
.page-mug-caption-2[data-off="1"] { display: none; }

/* ===== Sélecteur de police (chips fins, 4 colonnes) ===== */
.page-mug-fonts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-bottom: 12px;
}
.page-mug-font {
    padding: 7px 4px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: #fff;
    color: var(--color-text);
    font-size: 13px;
    line-height: 1.1;
    cursor: pointer;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: border-color 0.12s ease, background 0.12s ease;
}
.page-mug-font.is-selected {
    border-color: var(--color-green);
    background: var(--color-bg-card, #FBF6EF);
    box-shadow: inset 0 0 0 1px var(--color-green);
    font-weight: 600;
}

/* ===== Toggle afficher/masquer une ligne ===== */
.page-mug-textfield-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.page-mug-text-toggle {
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    line-height: 0;
}
.page-mug-text-toggle-track {
    display: inline-block;
    width: 40px;
    height: 22px;
    border-radius: 999px;
    background: var(--color-border);
    position: relative;
    transition: background 0.15s ease;
}
.page-mug-text-toggle-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform 0.15s ease;
}
.page-mug-text-toggle.is-on .page-mug-text-toggle-track { background: var(--color-green); }
.page-mug-text-toggle.is-on .page-mug-text-toggle-knob { transform: translateX(18px); }

/* Piège connu : display:flex écrase [hidden]. On force la cache sur les
   éléments concernés (zone d'impression + caption texte). */
.page-mug-print-content[hidden],
.page-mug-caption[hidden],
.page-mug-print [hidden] { display: none !important; }

/* Badge stock : le partial (context 'stage') se positionne lui-même en overlay
   bas-gauche via .p-stock-badge-stage (position:absolute). Notre wrapper est un
   simple conteneur neutre → le badge s'ancre au .page-mug-mockup (relative). */
.page-mug-stock { display: contents; }

/* Overlay de génération : rendu 100% IDENTIQUE aux affiches IA.
   L'élément porte AUSSI la classe .p-before-after-overlay (dégradé multicolore
   animé + sparkles + barre dorée). Ici on gère seulement le positionnement
   (plein cadre du mockup, comme l'IA) et la visibilité (.is-generating). */
.page-mug-generating.p-before-after-overlay {
    position: absolute;
    inset: 0;
    left: 0; top: 0;
    width: 100%; height: 100%;
    border-radius: var(--radius-lg, 12px);
}
/* Visible pendant la génération : on retire l'attribut hidden via .is-generating
   (le CSS bat le [hidden] par !important, comme le reste de la page mug). */
.page-mug-mockup.is-generating .page-mug-generating[hidden] { display: flex !important; }

/* Titre petit sous le visuel (comme la fiche affiche) */
.page-mug-title-small {
    font-family: var(--font-display, 'Fraunces', serif);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.15;
    margin: 4px 16px 0;
    color: var(--color-text);
}

/* --------------------------------------------------------------------------
   COLONNE TUNNEL
   -------------------------------------------------------------------------- */
.page-mug-tunnel {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 0 16px;
}

/* Onglets d'étapes — MOBILE uniquement */
.page-mug-tabs {
    display: flex;
    gap: 6px;
    background: var(--color-bg-soft);
    padding: 4px;
    border-radius: 12px;
}
.page-mug-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 6px;
    border: none;
    background: transparent;
    border-radius: 9px;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-soft);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.page-mug-tab.is-on {
    background: #fff;
    color: var(--color-text);
    box-shadow: var(--shadow-soft);
}
.page-mug-tab-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-border);
    color: var(--color-text-soft);
    font-size: 11px;
}
.page-mug-tab.is-on .page-mug-tab-num {
    background: var(--color-green);
    color: #fff;
}

/* Étapes */
.page-mug-step-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 12px;
}
.page-mug-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--color-green);
    color: #fff;
    font-size: 12px;
}
.page-mug-step-optional {
    font-weight: 400;
    color: var(--color-text-muted);
    font-size: 13px;
}

/* Sous-champs de l'étape Fond (Forme / Couleur) */
.page-mug-subfield {
    margin-bottom: 16px;
}
.page-mug-subfield-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text-soft);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 8px;
}

/* Sélecteur de forme (Rectangle / Rond / Étoile / Aucune) — 4 boutons. */
.page-mug-shapes {
    display: flex;
    gap: 8px;
}
.page-mug-shape {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 4px;
    background: var(--color-bg-card);
    border: 2px solid var(--color-border);
    border-radius: 12px;
    cursor: pointer;
    font: inherit;
    transition: border-color 0.15s ease, transform 0.1s ease;
}
.page-mug-shape:hover { transform: translateY(-2px); }
.page-mug-shape.is-selected { border-color: var(--color-green); background: #fff; }
.page-mug-shape-name {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
}
/* Icônes de forme (aperçu visuel du contour). */
.page-mug-shape-icon {
    width: 30px;
    height: 30px;
    background: var(--color-text-soft);
}
.page-mug-shape-icon-coeur {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 29.6'%3E%3Cpath d='M16 29.6l-2.3-2.1C5.4 20 0 15.1 0 9.1 0 4.2 3.8.4 8.6.4c2.7 0 5.3 1.3 7.4 3.3C18.1 1.7 20.7.4 23.4.4 28.2.4 32 4.2 32 9.1c0 6-5.4 10.9-13.7 18.4L16 29.6z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 29.6'%3E%3Cpath d='M16 29.6l-2.3-2.1C5.4 20 0 15.1 0 9.1 0 4.2 3.8.4 8.6.4c2.7 0 5.3 1.3 7.4 3.3C18.1 1.7 20.7.4 23.4.4 28.2.4 32 4.2 32 9.1c0 6-5.4 10.9-13.7 18.4L16 29.6z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.page-mug-shape-icon-rond { border-radius: 50%; }
.page-mug-shape-icon-etoile {
    clip-path: polygon(
        50% 0%, 61% 35%, 98% 35%, 68% 57%,
        79% 91%, 50% 70%, 21% 91%, 32% 57%,
        2% 35%, 39% 35%
    );
}
/* « Aucune » : carré vide (contour pointillé, pas de fond plein) = pas de fond. */
.page-mug-shape-icon-aucune {
    background: transparent;
    border: 2px dashed var(--color-text-muted);
    border-radius: 4px;
    box-sizing: border-box;
}
.page-mug-shape.is-selected .page-mug-shape-icon { background: var(--color-green); }
/* L'icône « aucune » sélectionnée : contour vert, toujours sans fond plein. */
.page-mug-shape.is-selected .page-mug-shape-icon-aucune {
    background: transparent;
    border-color: var(--color-green);
}

/* ===== Sélecteur d'émoji (mode banner) : mêmes chips que les formes ===== */
.page-mug-emojis {
    display: flex;
    gap: 8px;
}
.page-mug-emoji {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 4px;
    background: var(--color-bg-card);
    border: 2px solid var(--color-border);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.1s ease;
}
.page-mug-emoji:hover { transform: translateY(-2px); }
.page-mug-emoji.is-selected { border-color: var(--color-green); background: #fff; }
.page-mug-emoji-icon {
    width: 30px;
    height: 30px;
    background: var(--color-text-soft);
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: contain; mask-size: contain;
}
.page-mug-emoji.is-selected .page-mug-emoji-icon { background: var(--color-green); }
.page-mug-emoji-icon-coeur {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 29.6'%3E%3Cpath d='M16 29.6l-2.3-2.1C5.4 20 0 15.1 0 9.1 0 4.2 3.8.4 8.6.4c2.7 0 5.3 1.3 7.4 3.3C18.1 1.7 20.7.4 23.4.4 28.2.4 32 4.2 32 9.1c0 6-5.4 10.9-13.7 18.4L16 29.6z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 29.6'%3E%3Cpath d='M16 29.6l-2.3-2.1C5.4 20 0 15.1 0 9.1 0 4.2 3.8.4 8.6.4c2.7 0 5.3 1.3 7.4 3.3C18.1 1.7 20.7.4 23.4.4 28.2.4 32 4.2 32 9.1c0 6-5.4 10.9-13.7 18.4L16 29.6z'/%3E%3C/svg%3E");
}
.page-mug-emoji-icon-etoile {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.9 7.1.6-5.4 4.7 1.6 7-6.2-3.8-6.2 3.8 1.6-7L2 9.5l7.1-.6z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.9 7.1.6-5.4 4.7 1.6 7-6.2-3.8-6.2 3.8 1.6-7L2 9.5l7.1-.6z'/%3E%3C/svg%3E");
}
.page-mug-emoji-icon-patte {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='16' rx='6' ry='5'/%3E%3Cellipse cx='5.5' cy='8.5' rx='2.4' ry='3'/%3E%3Cellipse cx='10' cy='5' rx='2.4' ry='3'/%3E%3Cellipse cx='14' cy='5' rx='2.4' ry='3'/%3E%3Cellipse cx='18.5' cy='8.5' rx='2.4' ry='3'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='16' rx='6' ry='5'/%3E%3Cellipse cx='5.5' cy='8.5' rx='2.4' ry='3'/%3E%3Cellipse cx='10' cy='5' rx='2.4' ry='3'/%3E%3Cellipse cx='14' cy='5' rx='2.4' ry='3'/%3E%3Cellipse cx='18.5' cy='8.5' rx='2.4' ry='3'/%3E%3C/svg%3E");
}
.page-mug-emoji-icon-os {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6' y='9.5' width='12' height='5' rx='1'/%3E%3Ccircle cx='6' cy='9' r='3'/%3E%3Ccircle cx='6' cy='15' r='3'/%3E%3Ccircle cx='18' cy='9' r='3'/%3E%3Ccircle cx='18' cy='15' r='3'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6' y='9.5' width='12' height='5' rx='1'/%3E%3Ccircle cx='6' cy='9' r='3'/%3E%3Ccircle cx='6' cy='15' r='3'/%3E%3Ccircle cx='18' cy='9' r='3'/%3E%3Ccircle cx='18' cy='15' r='3'/%3E%3C/svg%3E");
}
.page-mug-emoji-colors { display: flex; gap: 8px; flex-wrap: wrap; }

/* ===== Motif quinconce (mode banner) : têtes + émojis en damier ===== */
/* Grille positionnée en JS (renderBanner) : chaque élément a left/top/size en px. */
.page-mug-banner {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.page-mug-banner-head {
    position: absolute;
    object-fit: contain;
}
.page-mug-banner-emoji {
    position: absolute;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: contain; mask-size: contain;
}

/* Sélecteur de couleur (pastilles) */
.page-mug-colors {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.page-mug-color {
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    background: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px transparent;
    transition: box-shadow 0.15s ease, transform 0.1s ease;
}
.page-mug-color:hover { transform: scale(1.06); }
.page-mug-color.is-selected { box-shadow: 0 0 0 2px var(--color-green); }
.page-mug-color-swatch {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

/* Champs texte */
.page-mug-textfields {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.page-mug-textfield {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-soft);
}
/* Wrapper input + croix (position relative pour ancrer la croix). */
.page-mug-textfield-input {
    position: relative;
    display: block;
}
.page-mug-textfield input {
    font: inherit;
    /* iOS zoome automatiquement sur un input dont la taille de police est
       < 16px. On force 16px pour désactiver ce zoom pénible au focus mobile. */
    font-size: 16px;
    font-weight: 400;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 38px 10px 12px; /* place à droite pour la croix */
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: #fff;
    color: var(--color-text);
}
.page-mug-textfield input:focus {
    outline: none;
    border-color: var(--color-green);
}
/* Croix : vide le champ d'un coup. Masquée si le champ est vide (via JS). */
.page-mug-textfield-clear {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 50%;
    background: var(--color-bg-soft);
    color: var(--color-text-soft);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.page-mug-textfield-clear:hover {
    background: var(--color-border);
    color: var(--color-text);
}
.page-mug-textfield-clear[hidden] { display: none; }
.page-mug-textfield-note { font-size: 12px; margin: 0; }

/* Réassurance */
.page-mug-trust {
    list-style: none;
    padding: 16px;
    margin: 0;
    background: var(--color-bg-soft);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.page-mug-trust li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--color-text-soft);
}
.page-mug-trust svg { color: var(--color-green); flex-shrink: 0; }

/* CTA (partagé sticky mobile + slot desktop) */
.page-mug-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 15px;
    background: var(--color-green);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, opacity 0.15s ease;
}
.page-mug-cta:disabled { opacity: 0.55; cursor: not-allowed; }
.page-mug-cta:not(:disabled):hover { background: var(--color-green-dark); }

/* Bascule des 2 états de la barre sticky (upload / cta). */
.page-mug-sticky[data-mug-sticky-state="upload"] [data-mug-sticky-cta] { display: none; }
.page-mug-sticky[data-mug-sticky-state="cta"] [data-mug-sticky-upload] { display: none; }
/* Réassurance visible UNIQUEMENT à l'état upload (comme les affiches IA). */
.page-mug-sticky[data-mug-sticky-state="upload"] .p-sticky-buy-reassurance { display: flex; }
.page-mug-sticky[data-mug-sticky-state="cta"] .p-sticky-buy-reassurance { display: none; }

/* Le CTA « Importer ma photo » utilise désormais la classe .p-sticky-buy-cta
   (état upload) → dégradé vert + reflet + barre de progression 100% hérités du
   sticky-buy IA. Plus de style .page-mug-cta--full custom. */

/* Loader d'ajout au panier : la compo de l'image d'impression (A4) prend ~1-2s.
   Pendant ce temps on masque le contenu du bouton et on affiche un spinner, ce
   qui bloque visuellement le double-clic et signale le traitement en cours. */
.page-mug-cta-spinner {
    display: none;
    width: 20px;
    height: 20px;
    border: 2.5px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}
/* Loader appliqué au bouton ATC (data-mug-cta), qu'il soit .page-mug-cta ou
   .p-sticky-buy-cta (iso IA). */
[data-mug-cta].is-loading { pointer-events: none; opacity: 0.85; }
[data-mug-cta].is-loading > :not(.page-mug-cta-spinner) { visibility: hidden; }
[data-mug-cta].is-loading .page-mug-cta-spinner {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.page-mug-cta { position: relative; }

/* --------------------------------------------------------------------------
   BARRE STICKY D'ACHAT (mobile : fixée en bas de l'écran)
   -------------------------------------------------------------------------- */
/* Layout (position fixée, fond, largeur, centrage, padding) hérité de
   .p-sticky-buy + .p-sticky-buy-inner.container appliqués dans le HTML —
   rendu identique au sticky-buy des affiches perso. Le bloc prix utilise
   désormais la structure IA (.p-sticky-buy-price*), plus de style prix mug. */

/* Le slot desktop reçoit la barre sticky en desktop (masqué en mobile). */
.page-mug-buy-slot { display: none; }

/* --------------------------------------------------------------------------
   ≥768px : plus d'onglets, toutes les étapes empilées et visibles.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
    .page-mug-tabs { display: none; }
    .page-mug-step[data-mug-panel][hidden] { display: block; }
    .page-mug-step { margin-bottom: 4px; }
}

/* --------------------------------------------------------------------------
   Desktop ≥1024 : 2 colonnes, visuel sticky, barre d'achat inline (slot).
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
    .page-mug { padding: 16px 24px 48px; }
    .page-mug-cols {
        flex-direction: row;
        align-items: flex-start;
        gap: 48px;
    }
    .page-mug-visual {
        flex: 1;
        position: sticky;
        top: 90px;
        max-width: 460px;
    }
    .page-mug-mockup.is-photo { max-width: 380px; margin: 0 auto; }
    .page-mug-title-small { text-align: center; margin-inline: 0; }
    .page-mug-tunnel {
        flex: 1;
        max-width: 480px;
        padding: 0;
    }

    /* Le slot d'achat DOIT être visible en desktop : c'est lui qui reçoit la
       barre sticky (prix + bouton ATC) déplacée par le JS. Sans ça, le bouton
       « Ajouter au panier » n'apparaît jamais sur PC. */
    .page-mug-buy-slot { display: block; }

    /* En desktop, la barre sticky devient un CTA inline dans le slot du tunnel :
       on annule le position:fixed hérité de .p-sticky-buy (sélecteur à 2 classes
       pour battre la spécificité de .p-sticky-buy) et on remet le flux normal. */
    .page-mug-sticky.p-sticky-buy {
        position: static;
        background: none;
        border: none;
        box-shadow: none;
        backdrop-filter: none;
        padding: 0;
    }
    /* Prix + CTA sur une ligne dans le slot desktop. On annule aussi le
       max-width/padding de .container hérité par l'inner (2 classes). */
    .page-mug-sticky-inner.p-sticky-buy-inner {
        flex-direction: row;
        align-items: center;
        gap: 12px;
        max-width: none;
        padding-inline: 0;
    }
}