/**
 * AB3D 3D Generator - Styles Frontend
 */

/* Variables CSS — Charte "Crépuscule Apicole" Abeille 3D
   Tokens alignés sur le système de styles du site (rework 2026-06-22) :
   boutons & champs 8px, cartes 12px, survol bouton = pêche + texte ardoise. */
:root {
    /* Orange de MARQUE — réservé aux FONDS, bordures, icônes et états actifs.
       Ne JAMAIS l'utiliser comme couleur de texte sur fond clair (2,18:1 sur
       blanc → sous le minimum WCAG AA). */
    --ab3d-primary: #FD9644;          /* Orange accent (primaire) */
    --ab3d-primary-hover: #FAD7A0;    /* Survol bouton plein = pêche (texte → #2B2B2B) */
    --ab3d-primary-soft: #FAD7A0;     /* Pêche (hover doux / fond / sélection) */
    /* Orange de TEXTE accessible (WCAG AA) — à utiliser dès que l'orange est la
       couleur d'un TEXTE sur fond blanc ou crème : 5,08:1 sur #FFF,
       4,78:1 sur #FFF7EC. ⚠️ Insuffisant sur le pêche #FAD7A0 (3,70:1) :
       sur pêche, utiliser l'ardoise --ab3d-text (10,31:1). */
    --ab3d-primary-dark: #A85A12;     /* Orange foncé lisible (texte sur fond clair) */
    --ab3d-accent: #FDD444;           /* Jaune miel complémentaire */
    --ab3d-secondary: #6F6F6F;
    --ab3d-success: #46B450;
    --ab3d-error: #D63638;            /* Rouge danger (icône / accent) */
    --ab3d-error-text: #A02824;       /* Rouge danger (texte) */
    --ab3d-warning: #FD9644;
    --ab3d-cream: #FFF7EC;            /* Crème — surface info / sélection */
    --ab3d-bg: #f8f8f8;
    --ab3d-bg-soft: #E9E3E3;
    --ab3d-border: #E8E8E8;           /* Bordure neutre (cartes) */
    --ab3d-border-field: #D9DCE0;     /* Bordure des champs */
    --ab3d-border-strong: #2B2B2B;
    --ab3d-text: #2B2B2B;             /* Texte principal (ardoise) */
    --ab3d-text-light: #6F6F6F;       /* Texte secondaire */
    --ab3d-radius: 8px;               /* Champs, encarts, blocs */
    --ab3d-radius-btn: 8px;           /* Boutons (charte rework 2026 : 8px) */
    --ab3d-radius-card: 12px;         /* Cartes (charte : 10–12px) */
    --ab3d-shadow: 0 2px 6px rgba(43, 43, 43, 0.08);
    --ab3d-shadow-lg: 0 12px 32px rgba(43, 43, 43, 0.12);
}

/* Container principal — pleine largeur, carte bordée (pas d'ombre décorative, charte §3) */
.ab3d-3d-generator {
    width: 100%;
    max-width: none;
    margin: 2rem 0;
    padding: 2rem;
    background: #fff;
    border: 1px solid var(--ab3d-border);
    border-radius: var(--ab3d-radius-card);
    box-shadow: none;
    box-sizing: border-box;
    /* Charte : Lato pour les textes (Raleway est réservé aux titres du thème). */
    font-family: 'Lato', Helvetica, Arial, sans-serif;
}

/* Titre */
.ab3d-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--ab3d-text);
    margin: 0 0 1.5rem 0;
    text-align: center;
}

/* ============================================================
   v1.18.7 — Bandeau tarifaire (cards horizontales en haut)
   ============================================================ */
.ab3d-pricing-bar {
    display: flex;
    gap: 0.75rem;
    margin: 0 0 1rem 0;
    flex-wrap: wrap;
    justify-content: center;
}

.ab3d-pricing-card {
    flex: 1 1 0;
    min-width: 140px;
    max-width: 240px;
    padding: 1rem 1rem 0.875rem;
    background: #fff;
    border: 1px solid var(--ab3d-border);
    border-radius: var(--ab3d-radius-card);
    text-align: center;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    position: relative;
    box-sizing: border-box;
    user-select: none; /* évite la sélection texte au double-click */
}

/* v1.18.8 — Card cliquable : indique clairement la cliquabilité (cursor + hover) */
.ab3d-pricing-card.is-clickable {
    cursor: pointer;
}
.ab3d-pricing-card.is-clickable:hover:not(.is-active) {
    border-color: var(--ab3d-primary);
    background: var(--ab3d-cream);
    transform: translateY(-1px);
}
.ab3d-pricing-card.is-clickable:focus {
    outline: none;
}
.ab3d-pricing-card.is-clickable:focus-visible {
    box-shadow: 0 0 0 3px rgba(253, 150, 68, 0.35);
    border-color: var(--ab3d-primary);
}
.ab3d-pricing-card.is-clickable:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(253, 150, 68, 0.15);
}

.ab3d-pricing-card.is-active {
    border-color: var(--ab3d-primary);
    background: var(--ab3d-cream);
}

.ab3d-pricing-card.is-active::before {
    /* Petit point coloré qui rappelle l'onglet actif */
    content: '';
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ab3d-primary);
    box-shadow: 0 0 0 3px rgba(253, 150, 68, 0.18);
}

.ab3d-pricing-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0.5rem;
    color: var(--ab3d-primary);
    height: 32px;
}

.ab3d-pricing-icon svg {
    width: 28px;
    height: 28px;
}

.ab3d-pricing-label {
    font-size: 0.85rem;
    color: var(--ab3d-text-light);
    margin-bottom: 0.45rem;
    font-weight: 500;
    line-height: 1.2;
}

.ab3d-pricing-cost {
    line-height: 1;
}

.ab3d-pricing-value {
    font-size: 1.65rem;
    font-weight: 700;
    color: var(--ab3d-primary-dark);
    margin-right: 0.2rem;
    display: inline-block;
    transition: transform 0.2s ease;
}

/* Petit "pop" quand la valeur change suite à un switch moteur/textures */
.ab3d-pricing-value.ab3d-pricing-pop {
    animation: ab3d-pricing-pop 0.4s ease;
}

@keyframes ab3d-pricing-pop {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.25); }
    100% { transform: scale(1); }
}

.ab3d-pricing-unit {
    color: var(--ab3d-text-light);
    font-size: 0.85rem;
}

.ab3d-pricing-texture-note {
    margin: 0 0 1.5rem 0;
    text-align: center;
    color: var(--ab3d-text-light);
    font-size: 0.85rem;
    font-style: italic;
    padding: 0 0.5rem;
}

@media (max-width: 600px) {
    .ab3d-pricing-bar {
        gap: 0.5rem;
    }
    .ab3d-pricing-card {
        min-width: 96px;
        padding: 0.75rem 0.5rem;
    }
    .ab3d-pricing-icon {
        height: 24px;
    }
    .ab3d-pricing-icon svg {
        width: 22px;
        height: 22px;
    }
    .ab3d-pricing-label {
        font-size: 0.75rem;
    }
    .ab3d-pricing-value {
        font-size: 1.3rem;
    }
    .ab3d-pricing-unit {
        font-size: 0.75rem;
    }
}

/* Formulaire */
.ab3d-form-container {
    margin-bottom: 1.5rem;
}

.ab3d-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.ab3d-field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ab3d-field label {
    font-weight: 600;
    color: var(--ab3d-text);
    font-size: 0.9375rem;
}

.ab3d-prompt,
.ab3d-negative-prompt,
.ab3d-art-style {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 1px solid var(--ab3d-border-field);
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    background: #fff;
    color: var(--ab3d-text);
    box-sizing: border-box;
}

.ab3d-prompt {
    min-height: 120px;
    resize: vertical;
    line-height: 1.5;
}

.ab3d-prompt:focus,
.ab3d-negative-prompt:focus,
.ab3d-art-style:focus {
    outline: none;
    border-color: var(--ab3d-primary);
    box-shadow: 0 0 0 3px rgba(253, 150, 68, 0.20);
}

.ab3d-prompt::placeholder,
.ab3d-negative-prompt::placeholder {
    color: var(--ab3d-text-light);
}

/* Compteur de caractères */
.ab3d-char-count {
    text-align: right;
    font-size: 0.8125rem;
    color: var(--ab3d-text-light);
}

.ab3d-char-count.warning {
    color: var(--ab3d-warning);
}

.ab3d-char-count.error {
    color: var(--ab3d-error);
}

/* Bouton submit */
.ab3d-actions {
    margin-top: 0.5rem;
}

.ab3d-submit-btn {
    width: 100%;
    padding: 1rem 1.5rem;
    background: var(--ab3d-primary);
    color: #fff;
    border: 2px solid var(--ab3d-primary);
    border-radius: var(--ab3d-radius-btn);
    font-size: 1.0625rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.ab3d-submit-btn:hover:not(:disabled) {
    background: var(--ab3d-primary-soft);
    border-color: var(--ab3d-primary-soft);
    color: var(--ab3d-text);
}

.ab3d-submit-btn:active:not(:disabled) {
    transform: scale(0.98);
}

.ab3d-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background: var(--ab3d-border);
    border-color: var(--ab3d-border);
    color: var(--ab3d-text-light);
}

/* Spinner */
.ab3d-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: ab3d-spin 0.8s linear infinite;
}

/* v1.16.2 — Spinner DANS le bouton submit en mode chargement :
   le bouton devient gris (disabled) donc le spinner blanc est invisible.
   On le passe en orange doux pour qu'il reste visible. */
.ab3d-submit-btn:disabled .ab3d-spinner,
.ab3d-btn-loading .ab3d-spinner {
    border: 3px solid rgba(253, 150, 68, 0.25); /* primary à 25% */
    border-top-color: var(--ab3d-primary-soft, #FAD7A0);
}

@keyframes ab3d-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Zone de progression */
.ab3d-progress-container {
    margin: 2rem 0;
    padding: 1.5rem;
    background: var(--ab3d-bg);
    border-radius: 8px;
}

.ab3d-progress-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.ab3d-progress-status {
    font-weight: 500;
    color: var(--ab3d-text);
}

.ab3d-progress-percent {
    font-weight: 700;
    color: var(--ab3d-primary-dark);
    font-size: 1.125rem;
}

.ab3d-progress-bar {
    height: 8px;
    background: var(--ab3d-border);
    border-radius: 4px;
    overflow: hidden;
}

.ab3d-progress-fill {
    height: 100%;
    background: var(--ab3d-primary);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.ab3d-progress-step {
    margin: 0.75rem 0 0 0;
    font-size: 0.875rem;
    color: var(--ab3d-text-light);
    text-align: center;
}

/* Zone de résultat */
.ab3d-result-container {
    margin-top: 2rem;
}

.ab3d-result-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ab3d-text);
    margin: 0 0 1rem 0;
    text-align: center;
}

/* Viewer 3D */
.ab3d-viewer-wrapper {
    position: relative;
    width: 100%;
    padding-top: 75%; /* Ratio 4:3 */
    background: linear-gradient(135deg, #1e293b, #334155);
    border-radius: var(--ab3d-radius);
    overflow: hidden;
    box-shadow: var(--ab3d-shadow);
}

.ab3d-model-viewer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    --poster-color: transparent;
}

/* ============================================================
   v1.19.0 — Bouton agrandir / réduire le viewer 3D
   ============================================================ */
.ab3d-viewer-expand-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: rgba(43, 43, 43, 0.55);
    color: #fff;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.18s ease;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}
.ab3d-viewer-expand-btn:hover {
    background: var(--ab3d-primary);
    transform: scale(1.06);
}
.ab3d-viewer-expand-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(253, 150, 68, 0.5);
}
.ab3d-viewer-expand-btn .ab3d-icon-compress { display: none; }

/* État agrandi : le wrapper occupe tout l'écran (overlay plein écran).
   Le wrapper est déplacé en enfant direct de <body> par le JS, donc ce
   position:fixed s'applique par rapport à la racine (pas de stacking context
   parent qui le piégerait). z-index très élevé pour passer au-dessus des
   en-têtes sticky / bannières cookies des thèmes. */
.ab3d-viewer-wrapper.ab3d-viewer-expanded {
    position: fixed;
    inset: 0;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh; /* mobile : exclut les barres d'UI */
    margin: 0;
    padding-top: 0;  /* annule le ratio 4:3 du mode normal */
    border-radius: 0;
    z-index: 2147483000;
    background: #0f172a;
    box-shadow: none;
}
.ab3d-viewer-wrapper.ab3d-viewer-expanded .ab3d-viewer-expand-btn {
    width: 44px;
    height: 44px;
    top: 16px;
    right: 16px;
}
.ab3d-viewer-wrapper.ab3d-viewer-expanded .ab3d-viewer-expand-btn .ab3d-icon-expand { display: none; }
.ab3d-viewer-wrapper.ab3d-viewer-expanded .ab3d-viewer-expand-btn .ab3d-icon-compress { display: inline-flex; }

/* Empêche le défilement de la page derrière le viewer agrandi */
body.ab3d-viewer-lock-scroll { overflow: hidden !important; }

.ab3d-viewer-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    height: 100%;
    color: #fff;
    font-size: 0.9375rem;
}

.ab3d-viewer-loading .ab3d-spinner {
    width: 32px;
    height: 32px;
}

/* Téléchargements */
.ab3d-downloads {
    margin-top: 1.5rem;
    text-align: center;
}

/* .ab3d-download-stl est désormais utilisé uniquement comme icône
   (combiné avec .ab3d-icon-btn dans .ab3d-action-icons). Le style d'icône
   est appliqué via .ab3d-action-icons .ab3d-icon-btn. Pas de style spécifique
   nécessaire ici. */

/* Actions post-génération */
.ab3d-post-actions {
    margin-top: 1.5rem;
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.ab3d-regenerate-btn,
.ab3d-reset-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-radius: var(--ab3d-radius-btn);
    font-weight: 700;
    font-size: 0.9375rem;
    cursor: pointer;
    transition: all 0.2s;
}

/* "Générer une variante" : outline orange (moins agressif que solid) — laisse
   "Imprimer" en solid orange comme CTA principal */
.ab3d-regenerate-btn {
    background: #fff;
    border: 2px solid var(--ab3d-primary);
    color: var(--ab3d-primary-dark);
}

.ab3d-regenerate-btn:hover {
    background: var(--ab3d-primary);
    color: #fff;
}

.ab3d-reset-btn {
    background: #fff;
    border: 2px solid var(--ab3d-text);
    color: var(--ab3d-text);
}

.ab3d-reset-btn:hover {
    background: var(--ab3d-text);
    color: #fff;
}

.ab3d-regenerate-btn svg,
.ab3d-reset-btn svg {
    flex-shrink: 0;
}

/* Zone d'erreur */
.ab3d-error-container {
    margin: 2rem 0;
    padding: 1.5rem;
    background: #FDECEB;
    border: 1px solid #F5C6C0;
    border-radius: 8px;
    text-align: center;
}

.ab3d-error-message {
    color: var(--ab3d-error-text);
    font-weight: 500;
    margin-bottom: 1rem;
}

/* v1.18.6 — sous-ligne dédiée au message de refund affichée en vert sous
   l'erreur pour rassurer l'utilisateur que ses crédits ont été restitués. */
.ab3d-error-message .ab3d-error-text {
    color: var(--ab3d-error-text);
}
.ab3d-error-message .ab3d-error-refund {
    color: #2A4D1E;
    font-weight: 600;
    font-size: 0.95em;
    margin-top: 0.6rem;
    padding: 0.5rem 0.75rem;
    background: #EDF7ED;
    border-left: 3px solid var(--ab3d-success);
    border-radius: 6px;
    text-align: left;
}

/* v1.21.15 — Lien « Mes modèles 3D » INLINE dans le message : simple lien de
   la charte (orange accessible + souligné), pas un bouton. */
.ab3d-error-account-link {
    color: var(--ab3d-primary-dark);
    font-weight: 600;
    text-decoration: underline;
}
.ab3d-error-account-link:hover,
.ab3d-error-account-link:focus-visible {
    color: var(--ab3d-primary);
}

.ab3d-retry-btn {
    padding: 0.625rem 1.25rem;
    background: var(--ab3d-primary);
    border: 2px solid var(--ab3d-primary);
    border-radius: var(--ab3d-radius-btn);
    color: #fff;
    font-weight: 700;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
}

.ab3d-retry-btn:hover {
    background: #fff;
    color: var(--ab3d-primary-dark);
}

/* Message d'erreur général */
.ab3d-error {
    padding: 1rem;
    background: #FDECEB;
    border: 1px solid #F5C6C0;
    border-radius: 8px;
    color: var(--ab3d-error-text);
    text-align: center;
}

.ab3d-error a {
    color: var(--ab3d-error-text);
    font-weight: 600;
}

/* Responsive */
@media (max-width: 640px) {
    .ab3d-3d-generator {
        margin: 1rem;
        padding: 1.25rem;
    }
    
    .ab3d-title {
        font-size: 1.5rem;
    }
    
    .ab3d-prompt {
        min-height: 100px;
    }
    
    .ab3d-download-stl {
        width: 100%;
    }
    
    .ab3d-post-actions {
        flex-direction: column;
    }
    
    .ab3d-regenerate-btn,
    .ab3d-reset-btn {
        width: 100%;
    }
}

/* ========================================
   Onglets
   ======================================== */
.ab3d-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 1.5rem;
    border-radius: 8px;
    background: var(--ab3d-bg);
    padding: 4px;
}

.ab3d-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    background: transparent;
    border: none;
    border-radius: 6px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ab3d-text-light);
    cursor: pointer;
    transition: all 0.2s;
}

.ab3d-tab:hover:not(.ab3d-tab-active):not(.ab3d-tab-disabled) {
    color: var(--ab3d-text);
    background: rgba(255, 255, 255, 0.5);
}

.ab3d-tab-active {
    background: #fff;
    color: var(--ab3d-primary-dark);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.ab3d-tab-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.ab3d-tab svg {
    flex-shrink: 0;
}

/* Formulaires avec onglets */
.ab3d-form {
    display: none;
    flex-direction: column;
    gap: 1.25rem;
}

.ab3d-form-active {
    display: flex;
}

/* ========================================
   Upload d'image
   ======================================== */
.ab3d-image-upload-wrapper {
    position: relative;
}

.ab3d-image-input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}

.ab3d-image-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2.5rem 1.5rem;
    border: 2px dashed var(--ab3d-border);
    border-radius: 8px;
    background: var(--ab3d-bg);
    cursor: pointer;
    transition: all 0.2s;
}

.ab3d-image-dropzone:hover {
    border-color: var(--ab3d-primary);
    background: rgba(253, 150, 68, 0.05);
}

.ab3d-image-dropzone svg {
    color: var(--ab3d-text-light);
    transition: color 0.2s;
}

.ab3d-image-dropzone:hover svg {
    color: var(--ab3d-primary);
}

.ab3d-image-dropzone p {
    margin: 0;
    font-weight: 600;
    color: var(--ab3d-text);
    font-size: 1rem;
}

.ab3d-image-formats {
    font-size: 0.8125rem;
    color: var(--ab3d-text-light);
}

.ab3d-dropzone-active {
    border-color: var(--ab3d-primary);
    background: rgba(253, 150, 68, 0.10);
}

.ab3d-dropzone-active svg {
    color: var(--ab3d-primary);
}

/* Aperçu de l'image */
.ab3d-image-preview {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: var(--ab3d-bg);
}

.ab3d-image-preview img {
    display: block;
    width: 100%;
    max-height: 300px;
    object-fit: contain;
    background: linear-gradient(45deg, #f0f0f0 25%, transparent 25%),
                linear-gradient(-45deg, #f0f0f0 25%, transparent 25%),
                linear-gradient(45deg, transparent 75%, #f0f0f0 75%),
                linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

.ab3d-image-remove {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(214, 54, 56, 0.92); /* --ab3d-error #D63638 semi-transparent */
    border: none;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.ab3d-image-remove:hover {
    background: var(--ab3d-error-text);
    transform: scale(1.1);
}

.ab3d-image-remove svg {
    flex-shrink: 0;
}

/* Texture prompt */
.ab3d-texture-prompt {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 1px solid var(--ab3d-border-field);
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    background: #fff;
    color: var(--ab3d-text);
    box-sizing: border-box;
    resize: vertical;
    min-height: 60px;
    line-height: 1.5;
}

.ab3d-texture-prompt:focus {
    outline: none;
    border-color: var(--ab3d-primary);
    box-shadow: 0 0 0 3px rgba(253, 150, 68, 0.20);
}

.ab3d-texture-prompt::placeholder {
    color: var(--ab3d-text-light);
}

/* Responsive onglets */
@media (max-width: 640px) {
    .ab3d-tabs {
        flex-direction: column;
    }
    
    .ab3d-tab {
        padding: 1rem;
    }
    
    .ab3d-image-dropzone {
        padding: 2rem 1rem;
    }
    
    .ab3d-image-preview img {
        max-height: 200px;
    }
}

/* ========================================
   Bouton Télécharger + icônes d'actions
   ======================================== */
.ab3d-downloads {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
}

/* Wrapper des icônes Imprimer / Régénérer / Nouveau */
.ab3d-action-icons {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* Bouton icône générique (Imprimer / Régénérer / Nouveau) */
.ab3d-action-icons .ab3d-icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--ab3d-icon-size, 36px) + 16px);
    height: calc(var(--ab3d-icon-size, 36px) + 16px);
    padding: 8px;
    background: #fff;
    border: 1px solid var(--ab3d-border);
    border-radius: var(--ab3d-radius);
    color: var(--ab3d-text);
    cursor: pointer;
    transition: all 0.2s;
    /* Reset des styles hérités de .ab3d-print-btn et al. */
    font-size: inherit;
    font-weight: normal;
    gap: 0;
}

.ab3d-action-icons .ab3d-icon-btn:hover {
    background: var(--ab3d-bg);
    border-color: var(--ab3d-primary);
    color: var(--ab3d-primary);
    transform: translateY(-1px);
}

.ab3d-action-icons .ab3d-icon-btn img,
.ab3d-action-icons .ab3d-icon-btn svg {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* L'icône Imprimer reste légèrement mise en avant (couleur primaire) */
/* L'icône Télécharger reste mise en avant (couleur primaire pour attirer l'œil) */
.ab3d-action-icons .ab3d-download-btn {
    border-color: var(--ab3d-primary);
    color: var(--ab3d-primary);
}
.ab3d-action-icons .ab3d-download-btn:hover {
    background: var(--ab3d-primary);
    color: #fff;
}

/* Badge "X crédits" sur l'icône Régénérer */
.ab3d-icon-cost-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--ab3d-primary);
    color: #fff;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    box-sizing: border-box;
    pointer-events: none;
}

.ab3d-print-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    background: var(--ab3d-primary);
    border: 2px solid var(--ab3d-primary);
    border-radius: var(--ab3d-radius-btn);
    color: #fff;
    font-weight: 700;
    font-size: 1.0625rem;
    text-decoration: none;
    transition: all 0.2s;
    cursor: pointer;
}

.ab3d-print-btn:hover {
    background: var(--ab3d-primary-soft);
    border-color: var(--ab3d-primary-soft);
    color: var(--ab3d-text);
    transform: translateY(-1px);
}

.ab3d-print-btn:active {
    transform: translateY(0);
}

.ab3d-print-btn svg {
    flex-shrink: 0;
}

/* v1.21.10 — Encart « préparation en cours » affiché sous le viewer tant que
   les boutons Télécharger / Imprimer sont grisés. Palette encart de la charte. */
.ab3d-preparing-notice {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin: 1.25rem 0 0;
    padding: 0.875rem 1.25rem;
    background: var(--ab3d-cream);
    border: 1px solid #F0C887;
    border-left: 4px solid var(--ab3d-primary);
    border-radius: var(--ab3d-radius);
    color: #8A5A1B;
    font-size: 0.9375rem;
    line-height: 1.5;
    text-align: left;
}
.ab3d-preparing-notice .ab3d-spinner {
    width: 18px;
    height: 18px;
    border-width: 2px;
    border-color: rgba(253, 150, 68, 0.25);
    border-top-color: var(--ab3d-primary);
    flex-shrink: 0;
}

/* ========================================
   Modal d'impression
   ======================================== */
body.ab3d-modal-open {
    overflow: hidden;
}

.ab3d-print-modal,
.ab3d-download-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.ab3d-print-modal-backdrop,
.ab3d-download-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

/* v1.17.0 — Formulaire Multi-vues : grille de 4 zones d'upload */
.ab3d-multiview-help {
    background: var(--ab3d-bg);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    color: var(--ab3d-text-light);
}
.ab3d-multiview-help p { margin: 0; }
.ab3d-multiview-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}
@media (min-width: 720px) {
    .ab3d-multiview-grid { grid-template-columns: repeat(4, 1fr); }
}
.ab3d-multiview-slot {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.ab3d-multiview-slot-label {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--ab3d-text);
    text-align: center;
}
.ab3d-multiview-required {
    color: var(--ab3d-primary-dark, #A85A12);
    margin-left: 0.2rem;
}
.ab3d-multiview-dropzone {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    background: var(--ab3d-bg);
    border: 2px dashed var(--ab3d-border);
    border-radius: 8px;
    cursor: pointer;
    color: var(--ab3d-text-light);
    transition: all 0.2s;
}
.ab3d-multiview-dropzone:hover {
    border-color: var(--ab3d-primary-soft, #FAD7A0);
    background: #fff;
    color: var(--ab3d-text);
}
.ab3d-multiview-dropzone.ab3d-dropzone-active {
    border-color: var(--ab3d-primary, #FD9644);
    background: #fff;
}
.ab3d-multiview-dropzone-label {
    font-size: 0.8125rem;
    font-weight: 500;
}
.ab3d-multiview-preview {
    position: relative;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    background: var(--ab3d-bg);
}
.ab3d-multiview-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ab3d-multiview-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 28px;
    height: 28px;
    padding: 0;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ab3d-multiview-remove:hover {
    background: rgba(0, 0, 0, 0.9);
}

/* v1.17.2 — message d'erreur de validation multi-vues */
.ab3d-multiview-error {
    background: #FDECEB;
    color: var(--ab3d-error-text);
    border: 1px solid #F5C6C0;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    font-size: 0.9375rem;
    font-weight: 500;
    text-align: center;
}
/* Mise en évidence visuelle du slot en erreur (front manquant) */
.ab3d-multiview-slot.ab3d-multiview-slot-error .ab3d-multiview-dropzone {
    border-color: var(--ab3d-error);
    background: #FDECEB;
    color: var(--ab3d-error-text);
    animation: ab3d-multiview-shake 0.4s ease;
}
@keyframes ab3d-multiview-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

/* v1.16.0 — Toggle "Avec textures" dans les deux formulaires.
   Présenté comme une ligne avec checkbox + libellé + indicateur de surcoût. */
.ab3d-texture-toggle {
    margin: 0.5rem 0 1rem;
    padding: 0.75rem 1rem;
    background: var(--ab3d-bg);
    border: 1px solid var(--ab3d-border);
    border-radius: 8px;
}
.ab3d-texture-toggle-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    user-select: none;
    margin: 0;
    font-weight: 500;
    color: var(--ab3d-text);
}
/* Case à cocher custom — identique au reste du site (charte §6) :
   case 18px, bordure #CDD2D8, rayon 5px, cochée = orange + coche blanche.
   Sélecteur scopé + [type] pour PRIMER (par spécificité, pas par !important) sur
   le style de checkbox du thème/Divi (input[type=checkbox]) → reste surchargeable
   depuis style.css. */
.ab3d-3d-generator .ab3d-texture-checkbox[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 1.5px solid #CDD2D8;
    border-radius: 5px;
    background-color: #fff;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s;
    flex: 0 0 auto;
}
.ab3d-3d-generator .ab3d-texture-checkbox[type="checkbox"]:checked {
    background-color: var(--ab3d-primary);
    border-color: var(--ab3d-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l2.8 2.8L12.5 5' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 11px 11px;
}
.ab3d-3d-generator .ab3d-texture-checkbox[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(253, 150, 68, 0.25);
}
.ab3d-texture-toggle-text {
    flex: 1;
}
.ab3d-texture-toggle-cost {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--ab3d-primary-dark, #A85A12);
    background: #fff;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--ab3d-primary, #FD9644);
}

/* v1.14.0 — Modale de choix du format de téléchargement (OBJ/GLB/STL) */
.ab3d-download-modal-content {
    position: relative;
    width: 100%;
    max-width: 560px;
    background: #fff;
    border-radius: var(--ab3d-radius-card);
    padding: 2rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    animation: ab3d-modal-appear 0.3s ease;
}

.ab3d-download-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ab3d-bg);
    border: none;
    border-radius: 50%;
    color: var(--ab3d-text-light);
    cursor: pointer;
    transition: all 0.2s;
}
.ab3d-download-modal-close:hover {
    background: var(--ab3d-border);
    color: var(--ab3d-text);
}

.ab3d-download-modal-content h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ab3d-text);
    margin: 0 0 0.5rem 0;
    text-align: center;
}

.ab3d-download-modal-subtitle {
    text-align: center;
    color: var(--ab3d-text-light);
    margin: 0 0 1.5rem 0;
    font-size: 0.9375rem;
}

.ab3d-download-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.ab3d-download-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 1.25rem 0.75rem;
    background: var(--ab3d-bg);
    border: 2px solid var(--ab3d-border);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--ab3d-text);
    text-align: center;
}
.ab3d-download-option:hover {
    border-color: var(--ab3d-primary, #FD9644);
    background: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.15);
}
.ab3d-download-option-format {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: var(--ab3d-primary-dark, #A85A12);
}
.ab3d-download-option-desc {
    font-size: 0.8125rem;
    color: var(--ab3d-text-light);
    line-height: 1.3;
}

.ab3d-download-loading {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.5rem 1rem 0.5rem;
}

/* v1.16.3 — Barre de progression du téléchargement (même visuel que la
   barre de progression de génération, dans la modale download) */
.ab3d-download-progress {
    background: var(--ab3d-bg);
    padding: 1.25rem;
    border-radius: 8px;
}
.ab3d-download-progress-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}
.ab3d-download-progress-status {
    font-weight: 500;
    color: var(--ab3d-text);
}
.ab3d-download-progress-percent {
    font-weight: 700;
    color: var(--ab3d-primary-dark);
    font-size: 1.125rem;
}
.ab3d-download-progress-bar {
    height: 8px;
    background: var(--ab3d-border);
    border-radius: 4px;
    overflow: hidden;
}
.ab3d-download-progress-fill {
    height: 100%;
    background: var(--ab3d-primary);
    border-radius: 4px;
    transition: width 0.2s ease;
}
.ab3d-download-progress-size {
    margin: 0.75rem 0 0 0;
    font-size: 0.8125rem;
    color: var(--ab3d-text-light);
    text-align: center;
}

/* Bouton annuler */
.ab3d-download-cancel-btn {
    align-self: center;
    padding: 0.5rem 1.5rem;
    background: transparent;
    border: 2px solid var(--ab3d-border);
    border-radius: var(--ab3d-radius-btn);
    color: var(--ab3d-text);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.ab3d-download-cancel-btn:hover {
    background: var(--ab3d-bg);
    border-color: var(--ab3d-text-light);
}

@media (max-width: 480px) {
    .ab3d-download-options {
        grid-template-columns: 1fr;
    }
}

.ab3d-print-modal-content {
    position: relative;
    width: 100%;
    max-width: 600px;
    background: #fff;
    border-radius: var(--ab3d-radius-card);
    padding: 2rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    animation: ab3d-modal-appear 0.3s ease;
    max-height: 90vh;
    overflow-y: auto;
}

@keyframes ab3d-modal-appear {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.ab3d-print-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ab3d-bg);
    border: none;
    border-radius: 50%;
    color: var(--ab3d-text-light);
    cursor: pointer;
    transition: all 0.2s;
}

.ab3d-print-modal-close:hover {
    background: var(--ab3d-border);
    color: var(--ab3d-text);
}

.ab3d-print-modal-content h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ab3d-text);
    margin: 0 0 0.5rem 0;
    text-align: center;
}

.ab3d-print-modal-subtitle {
    text-align: center;
    color: var(--ab3d-text-light);
    margin: 0 0 1.5rem 0;
    font-size: 0.9375rem;
}

/* Champ de hauteur */
.ab3d-print-size-field {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--ab3d-bg);
    border-radius: 8px;
}

.ab3d-print-size-field label {
    display: block;
    font-weight: 600;
    color: var(--ab3d-text);
    margin-bottom: 0.5rem;
    font-size: 0.9375rem;
}

.ab3d-print-size-input {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ab3d-print-size-input input {
    width: 100px;
    padding: 0.75rem 1rem;
    border: 1px solid var(--ab3d-border-field);
    border-radius: 8px;
    font-size: 1.125rem;
    font-weight: 600;
    text-align: center;
    color: var(--ab3d-text);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.ab3d-print-size-input input:focus {
    outline: none;
    border-color: var(--ab3d-primary);
    box-shadow: 0 0 0 3px rgba(253, 150, 68, 0.2);
}

.ab3d-print-size-unit {
    font-weight: 600;
    color: var(--ab3d-text-light);
    font-size: 1rem;
}

.ab3d-print-size-hint {
    margin: 0.5rem 0 0 0;
    font-size: 0.8125rem;
    color: var(--ab3d-text-light);
}

/* v1.20.0 — bouton unique "Commander l'impression" (générateur) */
.ab3d-print-confirm-row {
    margin-top: 0.5rem;
    text-align: center;
}
.ab3d-print-confirm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.85rem 1.5rem;
    background: var(--ab3d-primary);
    color: #fff;
    border: 2px solid var(--ab3d-primary);
    border-radius: var(--ab3d-radius-btn);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, transform 0.15s;
}
.ab3d-print-confirm-btn:hover {
    background: var(--ab3d-primary-soft);
    border-color: var(--ab3d-primary-soft);
    color: var(--ab3d-text);
    transform: translateY(-1px);
}
.ab3d-print-confirm-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(253, 150, 68, 0.45);
}

/* v1.20.0 — bouton unique "Commander l'impression" (Mes modèles) */
.ab3d-account-print-confirm-row {
    margin-top: 0.5rem;
}
.ab3d-account-print-confirm-btn {
    width: 100%;
    justify-content: center;
    gap: 0.5rem;
}

/* Loading dans le modal */
.ab3d-print-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 3rem 1rem;
    color: var(--ab3d-text);
    font-weight: 500;
}

.ab3d-print-loading .ab3d-spinner {
    width: 40px;
    height: 40px;
    border-width: 4px;
    border-color: rgba(253, 150, 68, 0.2);
    border-top-color: var(--ab3d-primary);
}

/* Responsive modal */
@media (max-width: 640px) {
    .ab3d-print-modal-content {
        padding: 1.5rem;
    }
    
    .ab3d-print-modal-content h3 {
        font-size: 1.25rem;
        padding-right: 2rem;
    }
    
    .ab3d-downloads {
        flex-direction: column;
    }

    /* En mobile, les icônes restent en ligne mais centrées sous le bouton */
    .ab3d-action-icons {
        justify-content: center;
    }
}

/* ==========================================================
   PROMPT DE CONNEXION (utilisateurs non connectés)
   Style Abeille 3D — Crépuscule Apicole
   ========================================================== */

.ab3d-login-prompt-wrapper {
    width: 100%;
    max-width: none;
    margin: 2rem 0;
    padding: 0;
    position: relative;
    font-family: inherit;
}

.ab3d-login-prompt {
    position: relative;
    padding: 3rem 2.5rem;
    background: #fff;
    border: 1px solid var(--ab3d-border);
    border-radius: var(--ab3d-radius-card);
    box-shadow: none;
    text-align: center;
}

.ab3d-login-prompt-eyebrow {
    display: inline-block;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #8A5A1B;                   /* texte brun d'encart (charte §10), lisible sur crème */
    text-transform: uppercase;
    letter-spacing: 0.1em;
    background: var(--ab3d-cream);
    border: 1px solid #F0C887;
    padding: 0.375rem 0.875rem;
    border-radius: var(--ab3d-radius-btn);
    margin-bottom: 1.5rem;
}

.ab3d-login-prompt-illustration {
    margin: 0 auto 1.5rem;
    display: flex;
    justify-content: center;
    animation: ab3d-float 6s ease-in-out infinite;
}

@keyframes ab3d-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

.ab3d-login-prompt-headline {
    font-size: 1.875rem;
    font-weight: 600;   /* charte §2 : titres en semibold */
    line-height: 1.25;
    color: var(--ab3d-text);
    margin: 0 0 0.875rem 0;
}

.ab3d-login-prompt-subhead {
    font-size: 1.0625rem;
    color: var(--ab3d-text-light);
    line-height: 1.6;
    margin: 0 auto 2rem auto;
    max-width: 520px;
}

.ab3d-login-prompt-features {
    list-style: none;
    padding: 0;
    margin: 0 auto 2.5rem auto;
    display: inline-flex;
    flex-direction: column;
    gap: 0.75rem;
    text-align: left;
}

.ab3d-login-prompt-features li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9375rem;
    color: var(--ab3d-text);
}

.ab3d-login-prompt-features li svg {
    flex-shrink: 0;
    color: #fff;
    background: var(--ab3d-primary);
    border-radius: 50%;
    padding: 4px;
    width: 24px;
    height: 24px;
    box-sizing: border-box;
}

.ab3d-login-prompt-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Boutons du prompt de connexion — système à 2 niveaux de la charte §4 :
   rayon 8px, graisse 600, bordure 1.5px, transition douce, pas d'ombre.
   NB : la taille de police n'est PAS portée à 20px — le thème exclut
   volontairement les boutons des plugins de cette règle. */
.ab3d-login-prompt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    border-radius: var(--ab3d-radius-btn);
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
    font-size: 1rem;
    border: 1.5px solid var(--ab3d-primary);
    line-height: 1.3;
    cursor: pointer;
    box-sizing: border-box;
}

/* Primaire plein orange */
/* Primaire (charte §4.1) : orange plein → survol pêche + texte ardoise. */
.ab3d-login-prompt-btn-primary {
    background: var(--ab3d-primary);
    border-color: var(--ab3d-primary);
    color: #fff;
}

.ab3d-login-prompt-btn-primary:hover,
.ab3d-login-prompt-btn-primary:focus-visible {
    background: var(--ab3d-primary-soft);
    border-color: var(--ab3d-primary-soft);
    color: var(--ab3d-text);
}

/* Secondaire (charte §4.2) : PÊCHE au repos + texte ardoise, puis le survol
   « s'ouvre » en contour crème. Même système que le bouton secondaire de
   « Mes modèles 3D », pour que les deux zones se ressemblent. */
.ab3d-login-prompt-btn-secondary {
    background: var(--ab3d-primary-soft);
    border-color: var(--ab3d-primary-soft);
    color: var(--ab3d-text);
}

.ab3d-login-prompt-btn-secondary:hover,
.ab3d-login-prompt-btn-secondary:focus-visible {
    background: var(--ab3d-cream);
    border-color: var(--ab3d-primary);
    color: var(--ab3d-primary-dark);
}

/* Page personnalisée admin */
.ab3d-login-page-custom {
    margin: 2rem auto;
}

/* Coût en crédits affiché dans les boutons */
.ab3d-btn-cost {
    margin-left: 0.375rem;
    font-size: 0.85em;
    font-weight: 600;
    opacity: 0.9;
}

/* Prix des packs : HT + TTC */
.ab3d-credit-pack-price .ab3d-pack-price-main {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ab3d-text);
}

.ab3d-credit-pack-price .ab3d-pack-price-main small {
    font-size: 0.625em;
    font-weight: 600;
    color: var(--ab3d-text-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-left: 0.25rem;
}

.ab3d-credit-pack-price .ab3d-pack-price-sub {
    display: block;
    font-size: 0.8125rem;
    color: var(--ab3d-text-light);
    margin-top: 0.25rem;
    font-weight: 500;
}

.ab3d-credit-pack-price .ab3d-pack-price-old {
    display: block;
    font-size: 0.9375rem;
    color: var(--ab3d-text-light);
    text-decoration: line-through;
    margin-bottom: 0.25rem;
    line-height: 1.4; /* hauteur stable, alignée sur le placeholder ci-dessous */
}

/* v1.18.9 — placeholder qui occupe exactement la même hauteur que .ab3d-pack-price-old
   pour qu'une card SANS promo garde le même alignement vertical qu'une card AVEC
   promo (le prix principal et le bouton "Ajouter au panier" restent alignés
   entre toutes les cards d'une même rangée). */
.ab3d-credit-pack-price .ab3d-pack-price-placeholder {
    display: block;
    font-size: 0.9375rem;
    line-height: 1.4;
    margin-bottom: 0.25rem;
    visibility: hidden;        /* invisible mais prend la place */
    pointer-events: none;
}

/* ==========================================================
   BANDEAU CRÉDITS (en haut du générateur)
   ========================================================== */
.ab3d-credits-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--ab3d-cream);
    border: 1px solid #F0C887;
    border-radius: var(--ab3d-radius-card);
    margin-bottom: 1.5rem;
}

.ab3d-credits-banner.ab3d-credits-empty {
    background: #fef0e6;
    border-color: var(--ab3d-error);
}

.ab3d-credits-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.ab3d-credits-icon {
    color: var(--ab3d-primary);
    flex-shrink: 0;
}

.ab3d-credits-banner.ab3d-credits-empty .ab3d-credits-icon {
    color: var(--ab3d-error);
}

.ab3d-credits-label {
    font-weight: 600;
    color: var(--ab3d-text);
}

.ab3d-credits-amount {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ab3d-text);
}

.ab3d-credits-banner.ab3d-credits-empty .ab3d-credits-amount {
    color: var(--ab3d-error);
}

.ab3d-credits-cost {
    font-size: 0.8125rem;
    color: var(--ab3d-text-light);
    margin-left: 0.5rem;
}

.ab3d-credits-recharge-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    background: var(--ab3d-primary);
    color: #fff;
    border: 2px solid var(--ab3d-primary);
    border-radius: var(--ab3d-radius-btn);
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s;
}

.ab3d-credits-recharge-btn:hover {
    background: #fff;
    color: var(--ab3d-primary-dark);
}

.ab3d-no-credits-warning {
    padding: 1rem 1.25rem;
    background: var(--ab3d-cream);
    border: 1px solid #F0C887;
    border-left: 4px solid var(--ab3d-primary);
    border-radius: var(--ab3d-radius);
    color: #8A5A1B;
    margin-bottom: 1.5rem;
    font-size: 0.9375rem;
}

.ab3d-no-credits-warning strong {
    color: #8A5A1B;
    margin-right: 0.5rem;
}

.ab3d-no-credits-warning a {
    color: var(--ab3d-primary-dark);
    font-weight: 700;
    text-decoration: underline;
}

/* ==========================================================
   PACKS DE CRÉDITS [ab3d_credit_packs]
   ========================================================== */
.ab3d-credit-packs {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    margin: 2rem 0;
}

.ab3d-credit-packs.ab3d-cols-1 { grid-template-columns: 1fr; }
.ab3d-credit-packs.ab3d-cols-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); max-width: 700px; margin-left: auto; margin-right: auto; }
.ab3d-credit-packs.ab3d-cols-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.ab3d-credit-packs.ab3d-cols-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.ab3d-credit-pack {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem 1.5rem;
    background: #fff;
    border: 1px solid var(--ab3d-border);
    border-radius: var(--ab3d-radius-card);
    transition: all 0.2s;
}

.ab3d-credit-pack:hover {
    border-color: var(--ab3d-primary);
    transform: translateY(-2px);
    box-shadow: var(--ab3d-shadow-lg);
}

.ab3d-credit-pack-image {
    margin-bottom: 1rem;
    max-width: 120px;
}

.ab3d-credit-pack-image img {
    width: 100%;
    height: auto;
    border-radius: var(--ab3d-radius);
}

.ab3d-credit-pack-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--ab3d-text);
    margin: 0 0 0.75rem 0;
}

.ab3d-credit-pack-credits {
    margin: 0.5rem 0 1rem;
}

.ab3d-credit-pack-amount {
    display: block;
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1;
    color: var(--ab3d-primary-dark);
}

.ab3d-credit-pack-label {
    display: block;
    font-size: 0.95rem;
    color: var(--ab3d-text-light);
    margin-top: 0.2rem;
}

.ab3d-credit-pack-price {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ab3d-text);
    margin: 0.5rem 0 1.25rem;
}

.ab3d-credit-pack-price del {
    color: var(--ab3d-text-light);
    font-weight: 500;
    margin-right: 0.5rem;
}

/* ----------------------------------------------------------------
   En-tête + badges « pricing » des packs (rendu maquette)
   Charte « Crépuscule Apicole » — surchargeable depuis style.css.
   ---------------------------------------------------------------- */
.ab3d-credit-packs-wrap {
    margin: 2rem 0;
}
/* La grille à l'intérieur du wrap ne reprend pas la marge verticale */
.ab3d-credit-packs-wrap .ab3d-credit-packs {
    margin: 0;
}
.ab3d-credit-packs-header {
    text-align: center;
    margin: 0 0 2rem;
}
.ab3d-credit-packs-eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #8A5A1B;
    background: var(--ab3d-cream);
    border: 1px solid #F0C887;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    margin-bottom: 1rem;
}
.ab3d-credit-packs-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--ab3d-text);
    margin: 0 0 0.5rem;
    line-height: 1.15;
}
.ab3d-credit-packs-subtitle {
    font-size: 1rem;
    color: var(--ab3d-text-light);
    max-width: 620px;
    margin: 0 auto;
    line-height: 1.5;
}
.ab3d-credit-packs-subtitle strong {
    color: var(--ab3d-primary-dark);
    font-weight: 700;
}

/* Carte mise en avant (★ Le plus populaire) : bordure orange */
.ab3d-credit-pack--popular {
    border-color: var(--ab3d-primary);
}

/* Badge « ★ Le plus populaire » — haut, centré, à cheval sur la bordure */
.ab3d-credit-pack-popular {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    background: var(--ab3d-primary);
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
}

/* Badge de remise volumique — coin haut droit */
.ab3d-credit-pack-discount {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ab3d-primary-dark);
    background: var(--ab3d-cream);
    border: 1px solid #F0C887;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    line-height: 1.4;
}

/* Pastille « prix au crédit » (crème) — sous le nombre de crédits */
.ab3d-credit-pack-ppc {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ab3d-primary-dark);
    background: var(--ab3d-cream);
    border: 1px solid #F0C887;
    border-radius: 999px;
    padding: 0.3rem 0.9rem;
    margin: 0 0 1rem;
    white-space: nowrap;
}

/* ============================================================
   v1.18.11 — CHECKOUT : masquage de la section shipping vide
   quand le panier ne contient que des packs de crédits.

   Pourquoi : sur certains thèmes (notamment Abeille 3D), même quand
   WooCommerce indique cart_needs_shipping = false, le thème rend
   quand même un wrapper de cellule de grille où l'adresse
   d'expédition aurait dû s'afficher → cadre vide à droite du
   formulaire de facturation.

   La classe body.ab3d-cart-only-packs est ajoutée côté PHP par
   add_body_class_for_packs_only_cart() uniquement sur les pages
   cart / checkout, donc ces règles n'affectent rien ailleurs.

   On cible plusieurs sélecteurs car les thèmes peuvent utiliser
   des structures différentes (Storefront, Astra, OceanWP, etc.).
   ============================================================ */
body.ab3d-cart-only-packs .woocommerce-shipping-fields,
body.ab3d-cart-only-packs .woocommerce-shipping-totals,
body.ab3d-cart-only-packs #ship-to-different-address,
body.ab3d-cart-only-packs .shipping_address {
    display: none !important;
}

/* Sécurité supplémentaire : si le thème laisse un wrapper de grille
   vide (cas Abeille 3D — div parent qui ne se rétracte pas tout
   seul), on masque les <h3> orphelins de la zone shipping. */
body.ab3d-cart-only-packs h3#ship-to-different-address,
body.ab3d-cart-only-packs h3.woocommerce-additional-fields__field-wrapper-title {
    display: none !important;
}

/* Bouton "Ajouter au panier" — style site Abeille 3D */
.ab3d-credit-pack-buy {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background: var(--ab3d-primary);
    color: #fff;
    border: 2px solid var(--ab3d-primary);
    border-radius: var(--ab3d-radius-btn);
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    cursor: pointer;
    /* v1.18.9 — pousse le bouton vers le bas pour que tous les boutons
       d'une rangée de packs s'alignent, peu importe la hauteur du contenu
       au-dessus (image présente ou non, titre sur 1 ou 2 lignes, etc.). */
    margin-top: auto;
}

.ab3d-credit-pack-buy:hover {
    background: var(--ab3d-primary-soft);
    border-color: var(--ab3d-primary-soft);
    color: var(--ab3d-text);
}

.ab3d-credit-pack-unavailable {
    color: var(--ab3d-text-light);
    font-style: italic;
    /* Même comportement d'alignement que .ab3d-credit-pack-buy (cas
       produit indisponible) — garde l'alignement vertical entre cards. */
    margin-top: auto;
}

.ab3d-credit-packs-empty {
    text-align: center;
    color: var(--ab3d-text-light);
    padding: 2rem;
}

/* ==========================================================
   WIDGET SOLDE [ab3d_credit_balance]
   ========================================================== */
.ab3d-credit-balance {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--ab3d-bg);
    border: 1px solid var(--ab3d-border);
    border-radius: var(--ab3d-radius);
    font-size: 0.9375rem;
}

.ab3d-credit-balance-label {
    color: var(--ab3d-text-light);
}

.ab3d-credit-balance-amount {
    font-weight: 700;
    color: var(--ab3d-primary-dark);
}

.ab3d-credit-balance-recharge {
    margin-left: 0.5rem;
    padding: 0.3rem 0.75rem;
    background: var(--ab3d-primary);
    color: #fff;
    border: 2px solid var(--ab3d-primary);
    border-radius: var(--ab3d-radius-btn);
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 700;
    transition: all 0.2s;
}

.ab3d-credit-balance-recharge:hover {
    background: #fff;
    color: var(--ab3d-primary-dark);
}

/* Responsive */
@media (max-width: 640px) {
    .ab3d-credits-banner {
        flex-direction: column;
        align-items: stretch;
    }
    .ab3d-credits-recharge-btn {
        justify-content: center;
    }
    .ab3d-login-prompt {
        padding: 2.25rem 1.25rem;
    }
    .ab3d-login-prompt-headline {
        font-size: 1.5rem;
    }
    .ab3d-login-prompt-subhead {
        font-size: 0.9375rem;
    }
    .ab3d-login-prompt-actions {
        flex-direction: column;
    }
    .ab3d-login-prompt-btn {
        width: 100%;
    }
    .ab3d-btn-cost {
        display: block;
        margin-left: 0;
        margin-top: 0.25rem;
    }
}

/* ==========================================================
   ESPACE CLIENT — Mon compte > Mes modèles 3D
   ========================================================== */
.ab3d-my-account {
    font-family: inherit;
    color: var(--ab3d-text);
}

/* Bandeau crédits */
.ab3d-account-credits {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: var(--ab3d-cream);
    border: 1px solid #F0C887;
    border-radius: var(--ab3d-radius-card);
    margin-bottom: 2rem;
}

.ab3d-account-credits-block {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
}

.ab3d-account-credits-label {
    font-weight: 600;
}

.ab3d-account-credits-amount {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--ab3d-text);
}

.ab3d-account-recharge-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.625rem 1.25rem;
    background: var(--ab3d-primary);
    color: #fff;
    border: 2px solid var(--ab3d-primary);
    border-radius: var(--ab3d-radius-btn);
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s;
}

.ab3d-account-recharge-btn:hover {
    background: #fff;
    color: var(--ab3d-primary-dark);
}

/* Section title + retention info */
.ab3d-account-section-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ab3d-text);
    margin: 1.5rem 0 0.5rem;
}

.ab3d-account-retention-info {
    font-size: 0.875rem;
    color: var(--ab3d-text-light);
    margin: 0 0 1.5rem;
    font-style: italic;
}

.ab3d-account-empty {
    padding: 2rem;
    text-align: center;
    background: var(--ab3d-bg);
    border: 1px dashed var(--ab3d-border);
    /* Rayon de CARTE : ce bloc occupe la place de la liste de cartes. */
    border-radius: var(--ab3d-radius-card);
    color: var(--ab3d-text-light);
}

/* État vide : styles sortis des attributs style="" du PHP pour rester
   surchargeables depuis le style.css du thème (rendu inchangé). */
.ab3d-account-empty-icon {
    display: block;
    margin: 0 auto 1rem;
    color: var(--ab3d-text-light);
}
.ab3d-account-empty-title {
    font-size: 1.0625rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--ab3d-text);
}
.ab3d-account-empty-text {
    margin-top: 0;
    color: var(--ab3d-text-light);
}

/* Liste des tâches */
.ab3d-account-tasks {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.ab3d-account-task {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: 1rem;
    align-items: center;
    padding: 1rem;
    background: #fff;
    border: 1px solid var(--ab3d-border);
    border-radius: var(--ab3d-radius-card);
    transition: border-color 0.2s;
}

.ab3d-account-task.is-available:hover {
    border-color: var(--ab3d-primary);
}

.ab3d-account-task.is-pending {
    background: var(--ab3d-cream);
    border-color: var(--ab3d-primary-soft);
}

/* Cartes « échec » / « expiré » : atténuées par le FOND uniquement.
   L'ancien `opacity: 0.7` s'appliquait à tout le bloc et faisait tomber le
   texte secondaire gris à 2,72:1 (perçu #989898) → sous le minimum WCAG AA.
   Le fond grisé + le libellé de statut suffisent à signaler l'état. */
.ab3d-account-task.is-failed,
.ab3d-account-task.is-unavailable {
    background: var(--ab3d-bg);
}
/* Seule la vignette reste visuellement en retrait (élément non textuel). */
.ab3d-account-task.is-failed .ab3d-account-task-thumb,
.ab3d-account-task.is-unavailable .ab3d-account-task-thumb {
    opacity: 0.7;
}

.ab3d-account-task-thumb {
    width: 80px;
    height: 80px;
    border-radius: var(--ab3d-radius);
    overflow: hidden;
    background: var(--ab3d-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ab3d-account-task-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ab3d-account-task-thumb-placeholder {
    color: var(--ab3d-text-light);
    background: var(--ab3d-bg-soft);
}

/* ============================================================
   v1.19.3 — Thumbnail cliquable (ouvre le viewer 3D) + modale viewer
   ============================================================ */
.ab3d-account-task-thumb.is-viewable {
    position: relative;
    cursor: pointer;
    outline: none;
}
.ab3d-account-task-thumb.is-viewable img {
    transition: transform 0.25s ease, filter 0.25s ease;
}
.ab3d-account-task-thumb.is-viewable:hover img,
.ab3d-account-task-thumb.is-viewable:focus-visible img {
    transform: scale(1.08);
    filter: brightness(0.85);
}
.ab3d-account-thumb-view-hint {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    opacity: 0;
    /* Voile renforcé : l'icône blanche passait à 2,75:1 sur un aperçu clair
       (rendus 3D majoritairement sur fond blanc) → 4,34:1. */
    background: rgba(43, 43, 43, 0.55);
    transition: opacity 0.25s ease;
    pointer-events: none;
}
.ab3d-account-task-thumb.is-viewable:hover .ab3d-account-thumb-view-hint,
.ab3d-account-task-thumb.is-viewable:focus-visible .ab3d-account-thumb-view-hint {
    opacity: 1;
}
.ab3d-account-task-thumb.is-viewable:focus-visible {
    box-shadow: 0 0 0 3px rgba(253, 150, 68, 0.6);
}

/* Modale de prévisualisation 3D */
.ab3d-account-viewer-modal {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
}
.ab3d-account-viewer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.82);
    cursor: pointer;
}
.ab3d-account-viewer-content {
    position: relative;
    width: min(900px, 100%);
    height: min(80vh, 720px);
    background: #0f172a;
    border-radius: var(--ab3d-radius-card);
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.ab3d-account-viewer-modal.is-maximized {
    padding: 0;
}
.ab3d-account-viewer-modal.is-maximized .ab3d-account-viewer-content {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
    max-width: none;
}
.ab3d-account-viewer-stage {
    position: absolute;
    inset: 0;
}
.ab3d-account-model-viewer {
    width: 100%;
    height: 100%;
    --poster-color: #1e293b;
    background: linear-gradient(135deg, #1e293b, #334155);
}

/* v1.19.5 — overlay de chargement opaque pendant le changement de modèle.
   Garantit que l'ancien modèle ne reste pas visible avant le chargement du
   nouveau (en plus du poster natif de model-viewer). */
.ab3d-account-viewer-stage::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #1e293b, #334155);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease;
    z-index: 2;
    pointer-events: none;
}
.ab3d-account-viewer-modal.is-loading .ab3d-account-viewer-stage::after {
    opacity: 1;
    visibility: visible;
}
.ab3d-account-viewer-loading-spinner {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #fff;
    font-size: 0.95rem;
    pointer-events: none;
}
.ab3d-account-viewer-modal.is-loading .ab3d-account-viewer-loading-spinner {
    display: flex;
}
.ab3d-account-viewer-toolbar {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 5;
    display: flex;
    gap: 8px;
}
.ab3d-account-viewer-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: rgba(43, 43, 43, 0.6);
    color: #fff;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.18s ease;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}
.ab3d-account-viewer-btn:hover {
    background: var(--ab3d-primary);
    transform: scale(1.06);
}
.ab3d-account-viewer-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(253, 150, 68, 0.5);
}
.ab3d-account-viewer-expand .ab3d-icon-compress { display: none; }
.ab3d-account-viewer-modal.is-maximized .ab3d-account-viewer-expand .ab3d-icon-expand { display: none; }
.ab3d-account-viewer-modal.is-maximized .ab3d-account-viewer-expand .ab3d-icon-compress { display: inline-flex; }

@media (max-width: 600px) {
    .ab3d-account-viewer-modal { padding: 0; }
    .ab3d-account-viewer-content { width: 100vw; height: 100dvh; border-radius: 0; }
}

.ab3d-account-task-info {
    min-width: 0;
}

.ab3d-account-task-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.8125rem;
    color: var(--ab3d-text-light);
    margin-bottom: 0.25rem;
}

.ab3d-account-task-type {
    background: var(--ab3d-primary-soft);
    color: var(--ab3d-text);
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-weight: 600;
}

/* Reproduit le rendu hérité : évite que la date parte au style du thème si
   celui-ci cible les <span> de l'espace client avec une spécificité forte. */
.ab3d-account-task-date {
    color: var(--ab3d-text-light);
}

.ab3d-account-task-prompt {
    margin: 0 0 0.5rem;
    color: var(--ab3d-text);
    font-size: 0.9375rem;
    line-height: 1.4;
}

.ab3d-account-task-status {
    display: inline-block;
    font-size: 0.8125rem;
    font-weight: 600;
}

.ab3d-account-task-status.is-ok      { color: var(--ab3d-primary-dark); }
.ab3d-account-task-status.is-pending { color: var(--ab3d-primary-dark); }
/* Rouge de TEXTE (#A02824) et non le rouge d'icône (#D63638) : sur le fond
   #f8f8f8 de la carte en échec, #D63638 ne donnait que 4,45:1 (< AA). */
.ab3d-account-task-status.is-failed  { color: var(--ab3d-error-text); }
.ab3d-account-task-status.is-expired { color: var(--ab3d-text-light); }

/* Actions */
.ab3d-account-task-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.ab3d-account-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    border-radius: var(--ab3d-radius-btn);
    font-weight: 700;
    font-size: 0.875rem;
    text-decoration: none;
    cursor: pointer;
    border: 2px solid;
    transition: all 0.2s;
    line-height: 1.3;
}

.ab3d-account-btn-primary {
    background: var(--ab3d-primary);
    color: #fff;
    border-color: var(--ab3d-primary);
}
.ab3d-account-btn-primary:hover {
    background: var(--ab3d-primary-soft);
    color: var(--ab3d-text);
    border-color: var(--ab3d-primary-soft);
}

.ab3d-account-btn-secondary {
    background: #fff;
    color: var(--ab3d-primary-dark);
    border-color: var(--ab3d-primary);
}
.ab3d-account-btn-secondary:hover {
    background: var(--ab3d-primary);
    color: #fff;
}

.ab3d-account-btn-link {
    background: transparent;
    border-color: transparent;
    color: var(--ab3d-text-light);
    padding: 0.5rem;
}
/* Action « Supprimer » : palette danger de la charte §4.3
   (texte #A02824 + contour danger doux #E2A3A1). */
.ab3d-account-btn-link:hover {
    color: var(--ab3d-error-text);
    border-color: #E2A3A1;
}

/* Bouton "Réessayer" sur tâches stuck */
.ab3d-account-btn-retry {
    margin-left: 0.5rem;
    padding: 0.25rem 0.625rem;
    font-size: 0.8125rem;
    font-weight: 600;
    background: #fff;
    color: var(--ab3d-primary-dark);
    border: 1px solid var(--ab3d-primary);
    border-radius: var(--ab3d-radius-btn);
    cursor: pointer;
    transition: all 0.2s;
}
.ab3d-account-btn-retry:hover {
    background: var(--ab3d-primary);
    color: #fff;
}
.ab3d-account-btn-retry:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Pagination */
.ab3d-account-pagination {
    margin-top: 1.5rem;
    text-align: center;
}
.ab3d-account-pagination .page-numbers {
    display: inline-block;
    padding: 0.4rem 0.75rem;
    margin: 0 0.125rem;
    border: 1px solid var(--ab3d-border);
    border-radius: var(--ab3d-radius-btn);
    color: var(--ab3d-text);
    text-decoration: none;
}
.ab3d-account-pagination .page-numbers.current {
    background: var(--ab3d-primary);
    color: #fff;
    border-color: var(--ab3d-primary);
}

/* v1.21.11 — Modale de message (remplace les alert() du navigateur) */
.ab3d-account-message-modal {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    box-sizing: border-box;
}
.ab3d-account-message-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    cursor: pointer;
}
.ab3d-account-message-modal-content {
    position: relative;
    background: #fff;
    padding: 2rem;
    border-radius: var(--ab3d-radius-card);
    max-width: 460px;
    width: calc(100% - 2rem);
    box-shadow: var(--ab3d-shadow-lg);
    text-align: center;
    animation: ab3d-modal-appear 0.3s ease;
}
.ab3d-account-message-modal-close {
    position: absolute;
    top: 0.5rem;
    right: 0.75rem;
    width: 36px;
    height: 36px;
    background: var(--ab3d-bg);
    border: none;
    border-radius: 50%;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    color: var(--ab3d-text-light);
    transition: all 0.2s;
}
.ab3d-account-message-modal-close:hover {
    background: var(--ab3d-border);
    color: var(--ab3d-text);
}
/* Pastille d'alerte : palette « avertissement » de la charte */
.ab3d-account-message-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: var(--ab3d-cream);
    border: 1px solid #F0C887;
    color: var(--ab3d-primary);
}
.ab3d-account-message-modal-content h3 {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
    color: var(--ab3d-text);
}
.ab3d-account-message-text {
    margin: 0 0 1.5rem;
    color: var(--ab3d-text-light);
    line-height: 1.5;
}
/* Les 2 boutons (Annuler / action) doivent être RIGOUREUSEMENT identiques en
   hauteur. Le thème impose une bordure 1.5px au secondaire et 2px au primaire :
   en flex, `align-items: stretch` (défaut) égalise les hauteurs, et
   `box-sizing: border-box` rend la hauteur indépendante de l'épaisseur de
   bordure. Aucun !important nécessaire → reste surchargeable. */
.ab3d-account-message-actions {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.ab3d-account-message-actions .ab3d-account-btn {
    justify-content: center;
    min-width: 150px;
    min-height: 42px;
    box-sizing: border-box;
}

/* Modale impression */
.ab3d-account-print-modal,
.ab3d-account-download-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ab3d-account-print-modal-backdrop,
.ab3d-account-download-modal-backdrop {
    position: absolute;
    inset: 0;
    /* Aligné sur le backdrop des modales du générateur (voile + flou). */
    background: rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

/* v1.14.0 — Modale de choix du format de téléchargement (Mon Compte) */
.ab3d-account-download-modal-content {
    position: relative;
    background: #fff;
    padding: 2rem;
    border-radius: var(--ab3d-radius-card);
    max-width: 540px;
    width: calc(100% - 2rem);
    box-shadow: var(--ab3d-shadow-lg);
    max-height: 90vh;
    overflow-y: auto;
    /* Même apparition que les modales du générateur (keyframes partagées). */
    animation: ab3d-modal-appear 0.3s ease;
}
.ab3d-account-download-modal-close {
    position: absolute;
    top: 0.5rem;
    right: 0.75rem;
    width: 36px;
    height: 36px;
    background: var(--ab3d-bg);
    border: none;
    border-radius: 50%;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    /* Aligné sur les croix des modales du générateur (repos gris + fondu). */
    color: var(--ab3d-text-light);
    transition: all 0.2s;
}
.ab3d-account-download-modal-close:hover {
    background: var(--ab3d-border);
    color: var(--ab3d-text);
}
.ab3d-account-download-modal-content h3 {
    margin: 0 0 0.5rem;
    font-size: 1.5rem;
    text-align: center;
    color: var(--ab3d-text);
}
.ab3d-account-download-modal-subtitle {
    text-align: center;
    color: var(--ab3d-text-light);
    margin-bottom: 1.5rem;
}
.ab3d-account-download-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}
.ab3d-account-download-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 1.25rem 0.75rem;
    background: var(--ab3d-bg);
    border: 2px solid var(--ab3d-border);
    border-radius: var(--ab3d-radius-card);
    cursor: pointer;
    transition: all 0.2s;
    color: var(--ab3d-text);
    text-align: center;
}
.ab3d-account-download-option:hover {
    border-color: var(--ab3d-primary);
    background: #fff;
    transform: translateY(-2px);
}
.ab3d-account-download-option-format {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: var(--ab3d-primary-dark);
}
.ab3d-account-download-option-desc {
    font-size: 0.8125rem;
    color: var(--ab3d-text-light);
    line-height: 1.3;
}
.ab3d-account-download-loading {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.5rem 1rem 0.5rem;
}
@media (max-width: 480px) {
    .ab3d-account-download-options {
        grid-template-columns: 1fr;
    }
}
.ab3d-account-print-modal-content {
    position: relative;
    background: #fff;
    padding: 2rem;
    border-radius: var(--ab3d-radius-card);
    max-width: 540px;
    width: calc(100% - 2rem);
    box-shadow: var(--ab3d-shadow-lg);
    max-height: 90vh;
    overflow-y: auto;
    /* Même apparition que les modales du générateur (keyframes partagées). */
    animation: ab3d-modal-appear 0.3s ease;
}
.ab3d-account-print-modal-close {
    position: absolute;
    top: 0.5rem;
    right: 0.75rem;
    width: 36px;
    height: 36px;
    background: var(--ab3d-bg);
    border: none;
    border-radius: 50%;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    /* Aligné sur les croix des modales du générateur (repos gris + fondu). */
    color: var(--ab3d-text-light);
    transition: all 0.2s;
}
.ab3d-account-print-modal-close:hover {
    background: var(--ab3d-border);
    color: var(--ab3d-text);
}
.ab3d-account-print-modal-content h3 {
    margin: 0 0 0.5rem;
    font-size: 1.5rem;
    text-align: center;
    color: var(--ab3d-text);
}
.ab3d-account-print-modal-subtitle {
    text-align: center;
    color: var(--ab3d-text-light);
    margin-bottom: 1.5rem;
}
.ab3d-account-print-size-field {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--ab3d-bg);
    border-radius: var(--ab3d-radius);
}
.ab3d-account-print-size-field label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--ab3d-text);
}
.ab3d-account-print-size-input {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.ab3d-account-print-size-input input {
    width: 100px;
    padding: 0.625rem;
    border: 1px solid var(--ab3d-border-field);
    border-radius: 8px;
    font-weight: 600;
    color: var(--ab3d-text);
    text-align: center;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.ab3d-account-print-size-input input:focus {
    outline: none;
    border-color: var(--ab3d-primary);
    box-shadow: 0 0 0 3px rgba(253, 150, 68, 0.2);
}
.ab3d-account-print-size-unit {
    font-weight: 600;
    color: var(--ab3d-text-light);
}
.ab3d-account-print-size-hint {
    font-size: 0.8125rem;
    color: var(--ab3d-text-light);
    margin: 0.5rem 0 0;
}

.ab3d-account-print-loading {
    text-align: center;
    padding: 2rem;
    color: var(--ab3d-text);
    font-weight: 500;
}
.ab3d-account-print-loading .ab3d-spinner {
    width: 40px;
    height: 40px;
    border-width: 4px;
    border-color: rgba(253, 150, 68, 0.2);
    border-top-color: var(--ab3d-primary);
    margin: 0 auto 1rem;
    display: block;
}

/* Responsive */
@media (max-width: 640px) {
    .ab3d-account-task {
        grid-template-columns: 64px 1fr;
        grid-template-rows: auto auto;
    }
    .ab3d-account-task-actions {
        grid-column: 1 / -1;
        justify-content: stretch;
    }
    .ab3d-account-task-actions .ab3d-account-btn {
        flex: 1;
        justify-content: center;
    }
    .ab3d-account-task-thumb {
        width: 64px;
        height: 64px;
    }
    .ab3d-account-credits {
        flex-direction: column;
        align-items: stretch;
    }
    .ab3d-account-recharge-btn {
        justify-content: center;
    }
}

/* ============================================================
 *   v1.13.0 — Sélecteur de moteur (Meshy / Tripo / ...)
 *   Affiché en haut du formulaire de génération quand au moins
 *   2 moteurs sont actifs.
 * ============================================================ */
.ab3d-engine-selector {
    border: 1px solid var(--ab3d-border, #e0e0e0);
    border-radius: var(--ab3d-radius, 8px);
    padding: 0.75rem 1rem;
    margin: 0 0 1rem 0;
    background: #fafafa;
}
.ab3d-engine-selector-legend {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ab3d-text, #2B2B2B);
    padding: 0 0.5rem;
}
.ab3d-engine-selector-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.5rem;
}
.ab3d-engine-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--ab3d-border, #e0e0e0);
    border-radius: var(--ab3d-radius, 8px);
    background: #fff;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    user-select: none;
}
.ab3d-engine-option:hover {
    border-color: var(--ab3d-primary, #FD9644);
    background: var(--ab3d-cream, #FFF7EC);
}
/* Option sélectionnée = carte surlignée (charte §7 : bordure orange + fond crème) */
.ab3d-engine-option:has(input[type="radio"]:checked) {
    border-color: var(--ab3d-primary, #FD9644);
    background: var(--ab3d-cream, #FFF7EC);
}
.ab3d-engine-option input[type="radio"] {
    margin: 0;
    accent-color: var(--ab3d-primary, #FD9644);
}
.ab3d-engine-option input[type="radio"]:checked + .ab3d-engine-option-label {
    color: var(--ab3d-primary-dark, #A85A12);
    font-weight: 600;
}
.ab3d-engine-option-label {
    font-size: 0.9375rem;
    color: var(--ab3d-text, #2B2B2B);
}
.ab3d-engine-option-cost {
    font-size: 0.8125rem;
    color: var(--ab3d-text-light, #6F6F6F);
    font-variant-numeric: tabular-nums;
}
@media (max-width: 600px) {
    .ab3d-engine-selector-options {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ============================================================
 *   v1.13.10 — État "preparing" pour les boutons Télécharger
 *   et Imprimer (Tripo en cours de convert_model).
 *   Le bouton est visible mais grisé + spinner overlay + click désactivé.
 * ============================================================ */
.ab3d-btn-preparing {
    opacity: 0.55;
    cursor: progress !important;
    pointer-events: none;
    position: relative;
}
/* Spinner overlay sur les boutons en état preparing */
.ab3d-btn-preparing::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    animation: ab3d-prep-spin 0.85s linear infinite;
    pointer-events: none;
}
/* Pour le bouton icône (Télécharger), le spinner reste centré et l'icône
 * en dessous reste visible mais atténuée. */
.ab3d-icon-btn.ab3d-btn-preparing::after {
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border-color: rgba(43, 43, 43, 0.2);
    border-top-color: var(--ab3d-primary, #FD9644);
}
/* Pour le gros bouton Imprimer (sur fond orange/primary), le spinner blanc */
.ab3d-print-btn.ab3d-btn-preparing::after {
    border-color: rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
}
@keyframes ab3d-prep-spin {
    to { transform: rotate(360deg); }
}