/**
 * Styles d'intégration avec le plugin Admin Tools
 * 
 * @package Toolbox
 * @version 1.0.0
 */

/* Intégration des shortcodes du plugin */
.toolbox-plugin-shortcode {
    margin: 1rem 0;
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.toolbox-plugin-shortcode .do_api_tester_front {
    padding: 1.5rem;
}

/* Styles pour les formulaires d'outils */
.toolbox-plugin-shortcode .tool-form {
    background: var(--color-gray-50);
    padding: 1.5rem;
    border-radius: var(--border-radius-md);
    margin-bottom: 1rem;
}

.toolbox-plugin-shortcode .form-group {
    margin-bottom: 1rem;
}

.toolbox-plugin-shortcode .form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
}

.toolbox-plugin-shortcode .form-control {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-base);
    transition: border-color var(--transition-fast);
}

.toolbox-plugin-shortcode .form-control:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 124, 186, 0.1);
}

/* Styles pour les résultats */
.toolbox-plugin-shortcode .job-result {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--border-radius-md);
    padding: 1rem;
    margin-top: 1rem;
}

.toolbox-plugin-shortcode .job-result.success {
    border-color: var(--color-success);
    background: rgba(40, 167, 69, 0.05);
}

.toolbox-plugin-shortcode .job-result.error {
    border-color: var(--color-danger);
    background: rgba(220, 53, 69, 0.05);
}

.toolbox-plugin-shortcode .job-result.processing {
    border-color: var(--color-warning);
    background: rgba(255, 193, 7, 0.05);
}

/* Styles pour les médias */
.toolbox-plugin-shortcode .result-media {
    margin: 1rem 0;
    text-align: center;
}

.toolbox-plugin-shortcode .result-media img {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-md);
}

.toolbox-plugin-shortcode .result-media video {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-md);
}

.toolbox-plugin-shortcode .result-media audio {
    width: 100%;
    margin: 1rem 0;
}

/* Styles pour les actions */
.toolbox-plugin-shortcode .job-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

/* On utilise les classes .btn globales, on enlève les spécificités ici */
.toolbox-plugin-shortcode .job-actions .btn {
    flex: 1;
    min-width: 120px;
}

/* Styles pour le statut des jobs */
.toolbox-plugin-shortcode .job-status {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    margin-bottom: 1rem;
}

.toolbox-plugin-shortcode .job-status.success {
    background: var(--color-success);
    color: white;
}

.toolbox-plugin-shortcode .job-status.error {
    background: var(--color-danger);
    color: white;
}

.toolbox-plugin-shortcode .job-status.processing {
    background: var(--color-warning);
    color: var(--color-gray-900);
}

.toolbox-plugin-shortcode .job-status.pending {
    background: var(--color-info);
    color: white;
}

/* Styles pour les crédits */
.toolbox-plugin-shortcode .credit-info {
    background: var(--color-primary);
    color: white;
    padding: 1rem;
    border-radius: var(--border-radius-md);
    margin-bottom: 1rem;
    text-align: center;
}

.toolbox-plugin-shortcode .credit-info .credit-amount {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    display: block;
}

.toolbox-plugin-shortcode .credit-info .credit-label {
    font-size: var(--font-size-sm);
    opacity: 0.9;
}

/* Styles pour les messages d'erreur */
.toolbox-plugin-shortcode .error-message {
    background: var(--color-danger);
    color: white;
    padding: 1rem;
    border-radius: var(--border-radius-md);
    margin: 1rem 0;
}

.toolbox-plugin-shortcode .error-message .error-icon {
    margin-right: 0.5rem;
}

/* Styles pour les messages de succès */
.toolbox-plugin-shortcode .success-message {
    background: var(--color-success);
    color: white;
    padding: 1rem;
    border-radius: var(--border-radius-md);
    margin: 1rem 0;
}

.toolbox-plugin-shortcode .success-message .success-icon {
    margin-right: 0.5rem;
}

/* Styles pour les messages d'information */
.toolbox-plugin-shortcode .info-message {
    background: var(--color-info);
    color: white;
    padding: 1rem;
    border-radius: var(--border-radius-md);
    margin: 1rem 0;
}

.toolbox-plugin-shortcode .info-message .info-icon {
    margin-right: 0.5rem;
}

/* Styles pour les messages d'avertissement */
.toolbox-plugin-shortcode .warning-message {
    background: var(--color-warning);
    color: var(--color-gray-900);
    padding: 1rem;
    border-radius: var(--border-radius-md);
    margin: 1rem 0;
}

.toolbox-plugin-shortcode .warning-message .warning-icon {
    margin-right: 0.5rem;
}

/* Styles pour les progress bars */
.toolbox-plugin-shortcode .progress {
    width: 100%;
    height: 8px;
    background: var(--color-gray-200);
    border-radius: var(--border-radius-full);
    overflow: hidden;
    margin: 1rem 0;
}

.toolbox-plugin-shortcode .progress-bar {
    height: 100%;
    background: var(--color-primary);
    border-radius: var(--border-radius-full);
    transition: width var(--transition-normal);
}

.toolbox-plugin-shortcode .progress-bar.success {
    background: var(--color-success);
}

.toolbox-plugin-shortcode .progress-bar.error {
    background: var(--color-danger);
}

.toolbox-plugin-shortcode .progress-bar.warning {
    background: var(--color-warning);
}

/* Styles pour les spinners */
.toolbox-plugin-shortcode .spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-gray-300);
    border-radius: 50%;
    border-top-color: var(--color-primary);
    animation: spin 1s ease-in-out infinite;
}

.toolbox-plugin-shortcode .spinner-large {
    width: 40px;
    height: 40px;
    border-width: 4px;
}

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

/* Styles pour les tooltips */
.toolbox-plugin-shortcode .tooltip {
    position: absolute;
    background: var(--color-gray-900);
    color: white;
    padding: 0.5rem 0.75rem;
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-sm);
    z-index: 1000;
    pointer-events: none;
}

.toolbox-plugin-shortcode .tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: var(--color-gray-900) transparent transparent transparent;
}

/* Styles pour les modals */
.toolbox-plugin-shortcode .modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.toolbox-plugin-shortcode .modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.toolbox-plugin-shortcode .modal-content {
    background: white;
    border-radius: var(--border-radius-lg);
    padding: 2rem;
    max-width: 90%;
    max-height: 90%;
    overflow: auto;
    position: relative;
}

.toolbox-plugin-shortcode .modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--color-gray-600);
}

.toolbox-plugin-shortcode .modal-close:hover {
    color: var(--color-gray-900);
}

/* Styles responsives */
@media (max-width: 768px) {
    .toolbox-plugin-shortcode .job-actions {
        flex-direction: column;
    }
    
    .toolbox-plugin-shortcode .job-actions .btn {
        flex: none;
        width: 100%;
    }
    
    .toolbox-plugin-shortcode .modal-content {
        margin: 1rem;
        padding: 1rem;
    }
}

/* Styles pour les animations */
.toolbox-plugin-shortcode .fade-in {
    animation: fadeIn 0.3s ease-in;
}

.toolbox-plugin-shortcode .slide-in {
    animation: slideIn 0.3s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Styles pour les états de chargement */
.toolbox-plugin-shortcode .loading {
    opacity: 0.6;
    pointer-events: none;
}

.toolbox-plugin-shortcode .loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid var(--color-gray-300);
    border-radius: 50%;
    border-top-color: var(--color-primary);
    animation: spin 1s ease-in-out infinite;
}

/* Styles pour les notifications */
.toolbox-plugin-shortcode .notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background: var(--color-white);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-lg);
    padding: 1rem;
    z-index: 1001;
    max-width: 400px;
    animation: slideInRight 0.3s ease-out;
}

.toolbox-plugin-shortcode .notification.success {
    border-left: 4px solid var(--color-success);
}

.toolbox-plugin-shortcode .notification.error {
    border-left: 4px solid var(--color-danger);
}

.toolbox-plugin-shortcode .notification.warning {
    border-left: 4px solid var(--color-warning);
}

.toolbox-plugin-shortcode .notification.info {
    border-left: 4px solid var(--color-info);
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ==========================================================================
   PAGE RÉSULTAT JOB - Styles pour les classes générées par le plugin
   Les classes .do-result-* sont générées par le shortcode [do_job_result]
   On utilise les classes génériques de main.css autant que possible
   ========================================================================== */

/* Masquer le titre de page WordPress (le shortcode gère déjà le titre) et supprimer tout espace */
body.page-resultat-job .page-header,
body.page-resultat-job .page-title,
body.page-template-page-resultat-job-php .page-header,
body.page-template-page-resultat-job-php .page-title,
.page-content:has(.do-result-page) .page-header,
.page-content:has(.do-result-page) .page-title {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    border: none !important;
    line-height: 0 !important;
}

/* Réduire l’espace en haut (page-article a padding 3xl par défaut) */
body.page-resultat-job .page-article,
body.page-template-page-resultat-job-php .page-article,
article:has(.do-result-page) {
    padding-top: var(--spacing-md, 16px) !important;
}

@media (max-width: 768px) {
    body.page-resultat-job .page-article,
    body.page-template-page-resultat-job-php .page-article,
    article:has(.do-result-page) {
        padding-top: var(--spacing-sm, 8px) !important;
    }
    .do-result-page {
        padding-top: var(--spacing-sm, 8px) !important;
    }
}

/* Supprimer la border en bas du header global uniquement sur cette page */
body.page-resultat-job header.site-header,
body.page-template-page-resultat-job-php header.site-header,
.page-content:has(.do-result-page) ~ header.site-header,
.page-content:has(.do-result-page) + header.site-header {
    border-bottom: none !important;
}

/* Fallback : supprimer la border si .do-result-page est présent n'importe où */
.page-content .do-result-page ~ * header.site-header,
article:has(.do-result-page) ~ header.site-header {
    border-bottom: none !important;
}

/* --- Conteneur principal --- */
.do-result-page {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: var(--spacing-lg, 24px) !important;
}

/* --- Header --- */
.do-result-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: var(--spacing-md, 16px) !important;
    padding-bottom: 0 !important;
    border-bottom: none !important; /* Supprimé comme demandé */
    margin-bottom: 0 !important;
}

.do-result-header__left {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg, 24px);
    min-width: 0;
    width: 100%; /* Pour que le titre soit centré sur toute la largeur du contenu */
}

/* Bouton retour - Style .btn-outline du template (taille compacte), sans aucun héritage lien */
.do-result-page .do-result-back,
.do-result-back,
a.do-result-back {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--spacing-xs) !important;
    padding: var(--spacing-xs) var(--spacing-md) !important;
    border: 2px solid var(--primary-color) !important;
    border-radius: var(--border-radius-md) !important;
    background-color: transparent !important;
    color: var(--primary-color) !important;
    font-weight: 600 !important;
    font-size: var(--font-size-sm, 14px) !important;
    text-decoration: none !important;
    text-decoration-line: none !important;
    text-decoration-style: none !important;
    text-decoration-thickness: 0 !important;
    text-decoration-color: transparent !important;
    text-underline-offset: unset !important;
    border-bottom: 2px solid var(--primary-color) !important;
    box-shadow: none !important;
    transition: all var(--transition-normal) !important;
    align-self: flex-start;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.do-result-page .do-result-back:hover,
.do-result-page .do-result-back:focus,
.do-result-back:hover,
.do-result-back:focus,
a.do-result-back:hover,
a.do-result-back:focus {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    transform: translateY(-2px) !important;
}

.do-result-page .do-result-back:visited,
.do-result-back:visited,
a.do-result-back:visited {
    color: var(--primary-color) !important;
    background-color: transparent !important;
    text-decoration: none !important;
}

.do-result-back span,
.do-result-back span::after,
.do-result-back span::before {
    text-decoration: none !important;
    text-decoration-line: none !important;
    text-decoration-thickness: 0 !important;
}

.do-result-back::after,
.do-result-back::before {
    content: none !important;
    display: none !important;
    text-decoration: none !important;
    text-decoration-thickness: 0 !important;
}

/* Forcer l’apparence bouton (pas lien) dans le contexte page Résultat Job */
body.page-resultat-job .do-result-back,
body.page-resultat-job .page-content a.do-result-back,
body.page-template-page-resultat-job-php .do-result-back,
body.page-template-page-resultat-job-php .page-content a.do-result-back,
.page-content:has(.do-result-page) .do-result-back,
.page-content:has(.do-result-page) a.do-result-back {
    text-decoration: none !important;
    text-decoration-line: none !important;
    text-decoration-style: none !important;
    text-decoration-thickness: 0 !important;
    color: var(--primary-color) !important;
    background-color: transparent !important;
    border-bottom: 2px solid var(--primary-color) !important;
    box-shadow: none !important;
}

body.page-resultat-job .do-result-back:hover,
body.page-resultat-job .do-result-back:focus,
body.page-resultat-job .page-content a.do-result-back:hover,
body.page-resultat-job .page-content a.do-result-back:focus,
body.page-template-page-resultat-job-php .do-result-back:hover,
body.page-template-page-resultat-job-php .do-result-back:focus,
.page-content:has(.do-result-page) .do-result-back:hover,
.page-content:has(.do-result-page) .do-result-back:focus {
    text-decoration: none !important;
    text-decoration-line: none !important;
    text-decoration-thickness: 0 !important;
    color: #ffffff !important;
    background-color: var(--primary-color) !important;
    border-bottom-color: var(--primary-color) !important;
}

body.page-resultat-job .do-result-back:visited,
body.page-resultat-job .page-content a.do-result-back:visited,
body.page-template-page-resultat-job-php .do-result-back:visited,
.page-content:has(.do-result-page) .do-result-back:visited {
    text-decoration: none !important;
    text-decoration-line: none !important;
    text-decoration-thickness: 0 !important;
    color: var(--primary-color) !important;
    background-color: transparent !important;
}

/* Titre de la commande */
.do-result-title {
    margin: 0;
    width: 100%;
    text-align: center;
    font-size: 28px;
    line-height: 1.15;
    color: var(--text-primary, #2c3e50);
    word-break: break-word;
}

/* Desktop : plus d'espace autour du titre */
@media (min-width: 769px) {
    .do-result-title {
        margin-top: var(--spacing-lg, 24px);
        margin-bottom: var(--spacing-lg, 24px);
    }
}

/* Métadonnées */
.do-result-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm, 10px);
    color: var(--text-secondary, #64748b);
    font-size: var(--font-size-sm, 14px);
}

.do-result-meta__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* --- Layouts --- */
.do-result-layout {
    display: block;
}

.do-result-layout--visual {
    display: grid !important;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) !important;
    gap: var(--spacing-lg, 24px) !important;
    align-items: stretch !important;
}

.do-result-visuals {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.do-result-params {
    min-width: 0;
}

/* --- Params card --- */
.do-result-params-card {
    background: var(--bg-secondary, #f8fafc);
    border: none !important; /* Supprimé comme demandé */
    border-radius: var(--border-radius-lg, 12px);
    padding: var(--spacing-md, 16px);
    margin-bottom: var(--spacing-md, 16px);
}

.do-result-params-card__title {
    margin: 0 0 var(--spacing-sm, 10px) 0;
    font-size: var(--font-size-base, 16px);
    color: var(--text-primary, #0f172a);
    font-family: var(--font-heading, 'Space Grotesk', sans-serif);
    font-weight: 600;
}

.do-result-params-list {
    margin: 0;
}

.do-result-params-list dt {
    font-weight: 700;
    color: var(--text-primary, #0f172a);
    margin-top: var(--spacing-sm, 10px);
}

.do-result-params-list dt:first-child {
    margin-top: 0;
}

.do-result-params-list dd {
    margin: 4px 0 0 0;
    color: var(--text-secondary, #64748b);
    word-break: break-word;
}

.do-result-params-hint {
    margin: var(--spacing-md, 16px) 0 0 0;
    font-size: var(--font-size-xs, 12px);
    color: var(--text-secondary, #64748b);
}

.do-result-params-card pre {
    margin: var(--spacing-sm, 10px) 0 0 0;
    padding: 10px 12px;
    border-radius: var(--border-radius-md, 10px);
    border: 1px solid var(--border-color, #e2e8f0);
    background: var(--bg-primary, #fff);
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: var(--font-size-xs, 12px);
    line-height: 1.35;
}

.do-result-params-card pre code {
    font-size: inherit;
    line-height: inherit;
    white-space: inherit;
    word-break: inherit;
}

.do-result-params-copy {
    display: block;
    margin-top: 8px;
    text-decoration: underline;
    color: var(--primary-color);
    font-weight: 600;
    text-align: right;
}

.do-result-params-copy:hover {
    opacity: 0.85;
}

/* --- Media area --- */
.do-result-media {
    display: block;
}

/* Vidéo : hauteur adaptée au ratio (pas fixe). Le plugin peut ajouter une classe de ratio. */
.do-result-video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9; /* défaut */
    border: none !important;
    border-radius: var(--border-radius-lg, 12px);
    overflow: hidden;
    background: #000;
}

/* Modificateurs de ratio (à ajouter par le plugin sur .do-result-video si besoin) */
.do-result-video--9-16 { aspect-ratio: 9 / 16; }
.do-result-video--4-3 { aspect-ratio: 4 / 3; }
.do-result-video--1-1 { aspect-ratio: 1 / 1; }

.do-result-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Image seule : colonne full height, image en cover (portrait ou paysage) */
.do-result-visuals .do-result-single-image {
    flex: 1;
    min-height: 50vh;
    display: flex;
    align-items: stretch;
}

.do-result-single-image {
    border: none !important;
    border-radius: var(--border-radius-lg, 12px);
    overflow: hidden;
    background: var(--bg-primary, #fff);
}

.do-result-single-image img {
    display: block;
    width: 100%;
    height: auto;
}

.do-result-visuals .do-result-single-image img {
    height: 100%;
    object-fit: cover;
}

.do-result-mosaic {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-md, 16px);
}

.do-result-media-item {
    position: relative;
    border: none !important; /* Supprimé comme demandé */
    border-radius: var(--border-radius-lg, 12px);
    overflow: hidden;
    background: var(--bg-primary, #fff);
}

.do-result-media-item img {
    display: block;
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.do-result-media-item__actions {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}

.do-result-media-item:hover .do-result-media-item__actions {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.do-result-media-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: var(--border-radius-md, 10px);
    background: rgba(0,0,0,0.65);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

.do-result-media-action:hover {
    background: rgba(0,0,0,0.8);
}

.do-result-media-action:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.do-result-file-card {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.do-result-file-title {
    color: var(--text-primary, #0f172a);
}

.do-result-file-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.do-result-text-result {
    margin-top: 16px;
}

/* --- Footer actions (page-level) --- */
.do-result-footer {
    display: flex;
    gap: var(--spacing-md, 16px);
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    padding-top: var(--spacing-lg, 24px);
    margin-top: var(--spacing-lg, 24px);
    border-top: none !important; /* Supprimé comme demandé */
}

.do-result-footer__spacer {
    display: none !important; /* Masqué comme demandé */
}

.do-result-footer__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* Les boutons utilisent déjà les classes génériques .btn-primary et .btn-outline de main.css */
}

.do-result-footer__btn--disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* --- Modal image + notification --- */
.do-result-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.do-result-modal.is-open {
    display: flex;
}

.do-result-modal__img {
    max-width: min(1100px, 95vw);
    max-height: 90vh;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.do-result-modal__close {
    position: absolute;
    top: 20px;
    right: 24px;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: rgba(0,0,0,0.5);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 22px;
    user-select: none;
}

.do-result-modal__close:hover {
    background: rgba(0,0,0,0.8);
}

.do-copy-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10001;
    color: #fff;
    padding: 12px 20px;
    border-radius: 10px;
    font-weight: 700;
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
    transform: translateX(110%);
    transition: transform 0.25s ease;
}

.do-copy-notification.is-visible {
    transform: translateX(0);
}

.do-copy-notification--success {
    background: #28a745;
}

.do-copy-notification--error {
    background: #dc3545;
}

/* --- Responsive --- */
@media (max-width: 900px) {
    .do-result-layout--visual {
        grid-template-columns: 1fr !important;
        display: grid !important;
    }
    .do-result-visuals {
        order: 1;
    }
    .do-result-params {
        order: 2;
    }
    .do-result-mosaic {
        grid-template-columns: 1fr;
    }
}

/* Mobile : colonnes empilées (gauche en premier), boutons footer centrés */
@media (max-width: 768px) {
    .do-result-layout--visual {
        grid-template-columns: 1fr !important;
    }
    .do-result-footer {
        justify-content: center;
    }
}

/* Dernier recours : bouton retour sans aucun soulignement (spécificité max) */
body.page-resultat-job .container .page-article .page-content .do-result-page .do-result-header .do-result-header__left a.do-result-back,
body.page-resultat-job .container .page-article .page-content .do-result-page .do-result-header .do-result-header__left a.do-result-back span,
body.page-template-page-resultat-job-php .container .page-article .page-content .do-result-page .do-result-header .do-result-header__left a.do-result-back,
body.page-template-page-resultat-job-php .container .page-article .page-content .do-result-page .do-result-header .do-result-header__left a.do-result-back span {
    text-decoration: none !important;
    text-decoration-line: none !important;
    text-decoration-style: none !important;
    text-decoration-thickness: 0 !important;
}