.nuisibles-ai-container {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.nuisibles-ai-flex-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.nuisibles-ai-result-column,
.nuisibles-ai-upload-column {
flex: 1;
min-width: 300px;
} .nuisibles-ai-type-selection {
margin-bottom: 20px;
}
.nuisibles-ai-type-buttons {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 10px;
}
button.nuisibles-ai-type-btn {
background-color: #f8f8f8;
border: 2px solid #ddd;
border-radius: 8px;
padding: 8px 12px;
font-size: 16px;
cursor: pointer;
transition: all 0.3s;
}
button.nuisibles-ai-type-btn:hover {
background-color: #f2f2f2;
border-color: #FF6A4C;
}
button.nuisibles-ai-type-btn.active {
background-color: #FF6A4C;
border-color: #FF6A4C;
color: white;
}
.nuisibles-ai-validation-message {
color: #FF6A4C;
font-size: 16px;
margin-top: 8px;
min-height: 20px;
} .nuisibles-ai-dropzone {
border: 2px dashed #ddd;
border-radius: 8px;
padding: 20px;
text-align: center;
transition: all 0.3s;
min-height: 200px;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20px;
position: relative;
}
.nuisibles-ai-dropzone.dragover {
border-color: #FF6A4C;
background-color: rgba(255, 106, 76, 0.05);
}
.nuisibles-ai-dropzone.has-preview {
border-style: solid;
}
.dropzone-content {
width: 100%;
display: flex;
flex-direction: row-reverse; justify-content: space-between;
align-items: center;
}
.preview-image-container {
margin-left: 15px;
max-width: 100%;
}
.preview-image-container img {
max-width: 100%;
max-height: 200px;
border-radius: 8px;
object-fit: contain;
}
.upload-instructions {
flex: 1;
text-align: center;
}
.file-input {
display: none;
}
.file-input-label {
display: inline-block;
background-color: #FF6A4C;
color: white;
padding: 10px 15px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
font-weight: 600;
}
.file-input-label:hover {
background-color: #E65A3D;
} .nuisibles-ai-submit-btn {
display: block;
width: 100%;
background-color: #FF6A4C;
color: white;
padding: 12px 20px;
border: none;
border-radius: 5px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.3s;
}
.nuisibles-ai-submit-btn:hover {
background-color: #E65A3D;
}
.nuisibles-ai-submit-btn:disabled {
background-color: #ccc;
cursor: not-allowed;
} .loading-indicator {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 20px;
}
.spinner {
border: 5px solid #f3f3f3;
border-top: 5px solid #FF6A4C;
border-radius: 50%;
width: 40px;
height: 40px;
animation: spin 1s linear infinite;
margin-bottom: 10px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
} .result-container {
border: 1px solid #ddd;
border-radius: 8px;
padding: 20px;
min-height: 300px;
background-color: #ffffff;
}
.analysis-result {
line-height: 1.5;
}
.introduction-full-width {
margin-bottom: 20px;
font-size: 18px;
}
.recommendation-section,
.risks-section,
.importance-section {
border: 1px solid #eeeeee;
border-radius: 8px;
padding: 15px;
background-color: #fafafa;
}
.recommendation-header,
.risks-header {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.recommendation-icon,
.warning-icon,
.info-icon {
width: 24px;
height: 24px;
margin-right: 10px;
color: #FF6A4C;
}
.recommendation-content {
margin-top: 10px;
}
.recommendation-button {
display: inline-block;
background-color: #FF6A4C;
color: white;
padding: 8px 15px;
border-radius: 5px;
text-decoration: none;
margin-top: 15px;
font-weight: 600;
transition: background-color 0.3s;
}
.recommendation-button:hover {
background-color: #E65A3D;
color: white;
}
.risk-item {
margin-bottom: 8px;
padding-bottom: 8px;
border-bottom: 1px solid #eeeeee;
}
.risk-label {
font-weight: 600;
color: #FF6A4C;
display: block;
}
.error-message {
color: #FF6A4C;
padding: 15px;
border: 1px solid #FF6A4C;
border-radius: 5px;
background-color: rgba(255, 106, 76, 0.05);
}
.hidden {
display: none !important;
} .treatment-popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
z-index: 9999;
}
.treatment-popup.show {
display: block;
}
.popup-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.popup-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
max-width: 400px;
width: 90%;
}
.popup-close {
position: absolute;
top: 10px;
right: 10px;
background: none;
border: none;
cursor: pointer;
color: #666;
}
.popup-content h2 {
margin-top: 0;
color: #333;
font-size: 22px;
margin-bottom: 20px;
}
.popup-button-ai {
display: block;
width: 100%;
padding: 12px;
background-color: #FF6A4C;
color: white;
text-align: center;
text-decoration: none;
border-radius: 5px;
font-weight: 600;
transition: background-color 0.3s;
}
.popup-button-ai:hover {
background-color: #E65A3D;
color: white;
} @media (max-width: 768px) {
.nuisibles-ai-flex-container {
flex-direction: column-reverse;
}
.nuisibles-ai-type-buttons {
justify-content: center;
}
.dropzone-content {
flex-direction: column;
}
.preview-image-container {
margin-left: 0;
margin-bottom: 15px;
max-width: 100%;
}
} .nuisibles-ai-admin-container {
max-width: 900px;
margin: 20px auto;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
padding: 30px;
}
.nuisibles-ai-admin-header {
border-bottom: 2px solid #f3f3f3;
padding-bottom: 20px;
margin-bottom: 30px;
}
.nuisibles-ai-admin-header h1 {
color: #333;
font-size: 24px;
font-weight: 600;
margin: 0;
}
.nuisibles-ai-admin-form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
}
.nuisibles-ai-admin-form-group {
margin-bottom: 25px;
}
.nuisibles-ai-admin-form-group label {
display: block;
font-weight: 600;
margin-bottom: 10px;
color: #333;
font-size: 16px;
}
.nuisibles-ai-admin-form-group textarea {
width: 100%;
padding: 15px;
border: 1px solid #ddd;
border-radius: 5px;
min-height: 120px;
font-size: 16px;
line-height: 1.5;
transition: border-color 0.3s;
resize: vertical;
}
.nuisibles-ai-admin-form-group textarea:focus {
border-color: #FF6A4C;
box-shadow: 0 0 0 2px rgba(255, 106, 76, 0.1);
outline: none;
}
.nuisibles-ai-admin-footer {
margin-top: 20px;
text-align: right;
grid-column: 1 / -1;
padding-top: 20px;
border-top: 2px solid #f3f3f3;
}
.nuisibles-ai-admin-submit {
background-color: #FF6A4C;
color: white;
border: none;
padding: 12px 25px;
border-radius: 5px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.3s;
}
.nuisibles-ai-admin-submit:hover {
background-color: #E65A3D;
} .nuisibles-ai-admin-notice {
position: relative;
background-color: #f0f9eb;
border-left: 4px solid #67c23a;
padding: 16px 16px 16px 45px;
margin: 20px 0;
color: #529b2e;
border-radius: 0 4px 4px 0;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
animation: slideIn 0.3s ease-out;
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.nuisibles-ai-admin-notice.error {
background-color: #fff5f7;
border-left: 4px solid #f56c6c;
color: #d63031;
}
.nuisibles-ai-admin-notice .dashicons {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
font-size: 20px;
}
.nuisibles-ai-admin-notice.success .dashicons {
color: #67c23a;
}
.nuisibles-ai-admin-notice.error .dashicons {
color: #f56c6c;
}
.nuisibles-ai-admin-notice p {
margin: 0;
padding: 0;
line-height: 1.5;
}
.nuisibles-ai-admin-notice strong {
font-weight: 600;
} :root {
--primary-color: #FF6A4C; --primary-hover: #E65A3D;
--primary-light: #FFE0D9;
--text-dark: #333333;
--bg-light: #FFFFFF;
--border-color: #E0E0E0;
--success-color: #4CAF50;
--error-color: #F44336;
} .nuisibles-ai-container {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
max-width: 1000px;
margin: 0 auto;
padding: 20px;
color: var(--text-dark);
} .nuisibles-ai-content {
display: flex;
flex-direction: column;
gap: 20px;
width: 100%;
} .nuisibles-ai-type-selection {
width: 100%;
margin-bottom: 20px;
}
.nuisibles-ai-type-buttons {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin-bottom: 15px;
}
button.nuisibles-ai-type-btn {
background-color: var(--bg-light);
border: 1px solid var(--border-color);
border-radius: 20px;
padding: 8px 15px;
cursor: pointer;
transition: all 0.3s ease;
font-size: 18px;
}
button.nuisibles-ai-type-btn:hover {
border-color: var(--primary-color);
color: var(--primary-color);
}
button.nuisibles-ai-type-btn.active {
background-color: var(--primary-color);
color: white;
border-color: var(--primary-color);
} .nuisibles-ai-validation-message {
text-align: center;
color: var(--error-color);
font-size: 16px;
min-height: 20px;
} .nuisibles-ai-interactive-area {
display: flex;
flex-direction: column;
width: 100%;
border-radius: 8px;
overflow: hidden;
transition: all 0.3s ease;
min-height: 250px;
} .nuisibles-ai-interactive-area.has-results {
flex-direction: row;
border: 1px solid var(--border-color);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
} .nuisibles-ai-result {
display: block;
width: 100%;
padding: 20px;
background-color: var(--bg-light);
overflow-y: auto;
}
.nuisibles-ai-result.has-content {
display: block;
flex: 2;
border-right: 1px solid var(--border-color);
} .nuisibles-ai-dropzone {
width: 100%;
min-height: 250px;
border: 2px dashed var(--border-color);
border-radius: 8px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: all 0.3s ease;
background-color: #f9f9f9;
}
.nuisibles-ai-dropzone.has-preview {
border-style: solid;
border-color: var(--primary-color);
background-color: var(--bg-light);
}
.nuisibles-ai-dropzone.dragover {
border-color: var(--primary-color);
background-color: var(--primary-light);
}
.nuisibles-ai-interactive-area.has-results .nuisibles-ai-dropzone {
flex: 1;
min-height: 300px;
border: none;
border-radius: 0;
background-color: var(--bg-light);
}
.dropzone-content {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 20px;
}
.upload-instructions {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.upload-instructions p {
margin: 0;
font-size: 16px;
color: #666;
} .preview-image-container {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.preview-image-container.hidden,
.hidden {
display: none;
}
#preview-image {
max-width: 100%;
max-height: 280px;
border-radius: 4px;
object-fit: contain;
}
.nuisibles-ai-interactive-area.has-results .preview-image-container {
height: 100%;
padding: 10px;
}
.nuisibles-ai-interactive-area.has-results #preview-image {
max-height: 280px;
width: auto;
} .file-input {
position: absolute;
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
z-index: -1;
}
.file-input-label {
display: inline-block;
padding: 10px 20px;
background-color: var(--primary-color);
color: white;
border-radius: 4px;
cursor: pointer;
font-weight: 500;
transition: background-color 0.3s ease;
}
.file-input-label:hover {
background-color: var(--primary-hover);
} .nuisibles-ai-action-buttons {
display: flex;
gap: 15px;
width: 100%;
} .nuisibles-ai-submit-btn {
flex: 1;
padding: 12px 20px;
background-color: var(--primary-color);
color: white;
border: none;
border-radius: 4px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.3s ease;
text-align: center;
}
.nuisibles-ai-submit-btn:hover:not(:disabled) {
background-color: var(--primary-hover);
}
.nuisibles-ai-submit-btn:disabled {
background-color: #cccccc;
cursor: not-allowed;
opacity: 0.8;
} .nuisibles-ai-new-analysis-btn {
flex: 1;
padding: 12px 20px;
background-color: white;
color: var(--primary-color);
border: 2px solid var(--primary-color);
border-radius: 4px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
text-align: center;
}
.nuisibles-ai-new-analysis-btn:hover {
background-color: var(--primary-light);
}
.nuisibles-ai-new-analysis-btn.hidden {
display: none;
} .loading-indicator {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.7);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 9999;
color: white;
}
.spinner {
width: 50px;
height: 50px;
border: 4px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
border-top-color: var(--primary-color);
animation: spin 1s ease-in-out infinite;
margin-bottom: 20px;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
} .analysis-result {
width: 100%;
}
.introduction-full-width {
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 1px solid var(--border-color);
}
.recommendation-section,
.risks-section,
.importance-section {
background-color: var(--bg-light);
border-radius: 8px;
padding: 15px;
margin-bottom: 15px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.recommendation-header,
.risks-header {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.recommendation-icon,
.warning-icon {
width: 24px;
height: 24px;
margin-right: 10px;
}
.recommendation-icon {
color: var(--primary-color);
}
.warning-icon {
color: var(--error-color);
}
.recommendation-button {
display: inline-block;
margin-top: 15px;
padding: 8px 16px;
background-color: var(--primary-color);
color: white;
text-decoration: none;
border-radius: 4px;
font-weight: 500;
transition: background-color 0.3s ease;
}
.recommendation-button:hover {
background-color: var(--primary-hover);
text-decoration: none;
color: white;
}
.risk-item {
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid var(--border-color);
}
.risk-label {
font-weight: 600;
color: var(--primary-color);
display: block;
margin-bottom: 5px;
} @media (max-width: 768px) {
.nuisibles-ai-interactive-area.has-results {
flex-direction: column;
}
.nuisibles-ai-result.has-content {
border-right: none;
border-bottom: 1px solid var(--border-color);
}
.nuisibles-ai-type-buttons {
flex-direction: column;
align-items: center;
}
button.nuisibles-ai-type-btn {
width: 100%;
max-width: 300px;
}
}  .nuisibles-ai-dev-mode {
margin-top: 20px;
border: 1px solid #e0e0e0;
border-radius: 8px;
background-color: #f8f8f8;
overflow: hidden;
font-family: monospace;
font-size: 13px;
}
.nuisibles-ai-dev-mode-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 15px;
background-color: #333;
color: white;
}
.nuisibles-ai-dev-mode-header h3 {
margin: 0;
font-size: 14px;
font-weight: 600;
}
#nuisibles-ai-copy-api-details {
background: none;
border: none;
color: white;
cursor: pointer;
padding: 4px;
border-radius: 4px;
transition: background-color 0.2s;
}
#nuisibles-ai-copy-api-details:hover {
background-color: rgba(255, 255, 255, 0.2);
}
#nuisibles-ai-api-details {
margin: 0;
padding: 15px;
max-height: 300px;
overflow: auto;
white-space: pre-wrap;
word-break: break-word;
background-color: #f5f5f5;
border-top: 1px solid #e0e0e0;
color: #333;
} @keyframes copySuccess {
0% {
background-color: transparent;
}
50% {
background-color: rgba(76, 175, 80, 0.2);
}
100% {
background-color: transparent;
}
}
.copy-success {
animation: copySuccess 1s ease-in-out;
}  .nuisibles-ai-dev-mode {
margin-top: 20px;
border: 1px solid #e0e0e0;
border-radius: 8px;
background-color: #f8f8f8;
overflow: hidden;
font-family: 'Consolas', 'Monaco', monospace;
font-size: 13px;
line-height: 1.4;
}
.nuisibles-ai-dev-mode-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 15px;
background-color: #333;
color: white;
}
.nuisibles-ai-dev-mode-header h3 {
margin: 0;
font-size: 14px;
font-weight: 600;
}
#nuisibles-ai-copy-api-details {
background: none;
border: none;
color: white;
cursor: pointer;
padding: 4px;
border-radius: 4px;
transition: background-color 0.2s;
}
#nuisibles-ai-copy-api-details:hover {
background-color: rgba(255, 255, 255, 0.2);
}
#nuisibles-ai-api-details {
margin: 0;
padding: 15px;
max-height: 600px;
overflow: auto;
background-color: #f5f5f5;
border-top: 1px solid #e0e0e0;
color: #333;
} .api-details-container {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: #333;
}
.api-section {
margin-bottom: 20px;
background-color: white;
border-radius: 6px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.api-section h4 {
margin: 0;
padding: 12px 15px;
background-color: #FF6A4C;
color: white;
font-size: 16px;
font-weight: 600;
}
.api-section-content {
padding: 10px;
}
.api-item {
display: flex;
flex-wrap: wrap;
border-bottom: 1px solid #f0f0f0;
padding: 8px 0;
}
.api-item:last-child {
border-bottom: none;
}
.api-item-label {
flex: 0 0 150px;
font-weight: 600;
color: #666;
padding: 5px 10px;
}
.api-item-value {
flex: 1;
padding: 5px 10px;
line-height: 1.5;
word-break: break-word;
}
.api-item-value pre {
margin: 0;
background-color: #f8f8f8;
padding: 8px;
border-radius: 4px;
white-space: pre-wrap;
overflow-x: auto;
font-size: 12px;
border: 1px solid #eee;
}
.pre-wrap {
white-space: pre-wrap;
background-color: #f8f8f8;
padding: 8px;
border-radius: 4px;
font-family: monospace;
border: 1px solid #eee;
} .collapsible .collapsible-content {
display: none;
}
.api-collapsible-trigger {
cursor: pointer;
user-select: none;
}
.api-collapsible-trigger:hover {
color: #FF6A4C;
}
.toggle-icon {
display: inline-block;
margin-left: 5px;
font-size: 10px;
} .api-raw-data-toggle {
margin-top: 15px;
text-align: center;
}
.toggle-raw-button {
background-color: #eee;
border: none;
border-radius: 4px;
padding: 8px 15px;
font-size: 13px;
cursor: pointer;
transition: background-color 0.2s;
}
.toggle-raw-button:hover {
background-color: #ddd;
}
.api-raw-data {
margin-top: 15px;
border: 1px solid #eee;
border-radius: 4px;
background-color: #f8f8f8;
padding: 15px;
text-align: left;
}
.api-raw-data pre {
margin: 0;
white-space: pre-wrap;
font-family: monospace;
font-size: 12px;
max-height: 300px;
overflow: auto;
}
.api-error h4 {
background-color: #f44336;
}
.hidden {
display: none;
} @keyframes copySuccess {
0% {
background-color: transparent;
}
50% {
background-color: rgba(76, 175, 80, 0.2);
}
100% {
background-color: transparent;
}
}
.copy-success {
animation: copySuccess 1s ease-in-out;
} @media (max-width: 600px) {
.api-item {
flex-direction: column;
}
.api-item-label {
flex: 0 0 100%;
padding-bottom: 0;
}
.api-item-value {
padding-top: 0;
}
} .promo-message-section {
margin-top: 30px;
padding: 20px;
background-color: #FFF8F6;
border: 1px solid #FFE0D9;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(255, 106, 76, 0.1);
}
.promo-message-content {
text-align: center;
}
.promo-message-content p {
margin-bottom: 15px;
font-size: 16px;
color: #333;
line-height: 1.5;
}
.promo-button {
display: inline-block;
background-color: #FF6A4C;
color: white;
padding: 12px 24px;
border-radius: 6px;
font-weight: 600;
text-decoration: none;
transition: background-color 0.3s ease;
}
.promo-button:hover {
background-color: #E65A3D;
text-decoration: none;
color: white;
} .introduction-full-width strong {
font-weight: 700;
color: #FF6A4C;
}
.analysis-result strong { font-weight: bold !important; }  .nuisibles-ai-steps {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 40px;
padding: 15px;
} .step-item {
display: flex;
flex-direction: column;
align-items: center;
z-index: 1;
} .step-number {
width: 36px;
height: 36px;
border-radius: 50%;
background-color: #f2f2f2;
color: #666;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
margin-bottom: 5px;
border: 2px solid #e0e0e0;
transition: all 0.3s ease;
} .step-number.active {
background-color: #FF6A4C;
color: white;
border-color: #FF6A4C;
} .step-number.completed {
background-color: #E65A3D;
color: white;
border-color: #E65A3D;
} .step-label {
font-size: 14px;
color: #666;
} .step-connector {
flex: 1;
height: 36px;
display: flex;
align-items: center;
min-width: 50px;
max-width: 100px;
}
.connector-line {
width: 100%;
height: 2px;
background-color: #e0e0e0;
transition: background-color 0.3s ease;
}
.connector-line.active {
background-color: #FF6A4C;
} .nuisibles-ai-steps-content {
position: relative;
}
.step-content {
display: none;
opacity: 0;
transition: opacity 0.3s ease;
}
.step-content.active {
display: block;
opacity: 1;
} .step-heading {
font-size: 22px;
text-align: center;
margin-bottom: 25px;
color: #333;
} .nuisibles-ai-type-selection {
width: 100%;
}
.nuisibles-ai-type-buttons {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 15px;
margin-bottom: 20px;
}
button.nuisibles-ai-type-btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: white;
border: 2px solid #e0e0e0;
border-radius: 8px;
padding: 20px 15px;
transition: all 0.3s ease;
cursor: pointer;
height: 120px;
}
button.nuisibles-ai-type-btn:hover {
border-color: #FF6A4C;
transform: translateY(-3px);
}
button.nuisibles-ai-type-btn.active {
background-color: #FFF8F6;
border-color: #FF6A4C;
box-shadow: 0 4px 8px rgba(255, 106, 76, 0.15);
}
.type-icon {
font-size: 28px;
margin-bottom: 10px;
}
.type-text {
text-align: center;
font-size: 15px;
font-weight: 500;
color: black;
} .step-navigation {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 30px;
}
.prev-step-btn, .next-step-btn {
padding: 12px 25px;
border-radius: 6px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.prev-step-btn {
background-color: #f2f2f2;
color: #666;
border: 1px solid #ddd;
}
.prev-step-btn:hover {
background-color: #e6e6e6;
}
.next-step-btn {
background-color: #FF6A4C;
color: white;
border: none;
}
.next-step-btn:hover:not(:disabled) {
background-color: #E65A3D;
}
.next-step-btn:disabled {
background-color: #ccc;
cursor: not-allowed;
}
.step-skip {
margin-top: 15px;
}
.step-skip a {
color: #666;
font-size: 20px;
text-decoration: none;
}
.step-skip a:hover {
color: #FF6A4C;
text-decoration: underline;
} .nuisibles-ai-dropzone {
width: 100%;
min-height: 250px;
border: 2px dashed #ddd;
border-radius: 8px;
transition: all 0.3s ease;
margin: 20px 0;
}
.nuisibles-ai-dropzone.dragover {
border-color: #FF6A4C;
background-color: rgba(255, 106, 76, 0.05);
}
.nuisibles-ai-dropzone.has-preview {
border-style: solid;
border-color: #FF6A4C;
}
.dropzone-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 250px;
padding: 20px;
}
.upload-icon {
color: #ccc;
margin-bottom: 15px;
}
.upload-instructions {
text-align: center;
}
.format-info {
font-size: 14px;
color: #888;
margin: 10px 0;
} .photo-tip {
display: flex;
align-items: flex-start;
background-color: #f8f9fa;
border-radius: 8px;
padding: 15px;
margin-top: 20px;
}
.tip-icon {
font-size: 20px;
margin-right: 15px;
}
.tip-text {
font-size: 14px;
color: #666;
line-height: 1.5;
} .nuisibles-ai-result {
padding: 20px;
background-color: white;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
} .new-analysis-btn {
display: block;
width: 100%;
padding: 12px 25px;
background-color: #FF6A4C;
color: white;
text-align: center;
border: none;
border-radius: 6px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.3s ease;
margin-top: 20px;
}
.new-analysis-btn:hover {
background-color: #E65A3D;
} @media (max-width: 768px) {
.nuisibles-ai-type-buttons {
grid-template-columns: repeat(2, 1fr);
}
.step-navigation {
flex-direction: column;
gap: 15px;
}
.prev-step-btn, .next-step-btn {
width: 100%;
}
.step-connector {
min-width: 30px;
}
}
@media (max-width: 480px) {
.nuisibles-ai-steps {
flex-wrap: wrap;
}
.step-item {
margin: 0 10px 10px;
}
.step-connector {
display: none;
}
} .result-step {
background-color: white;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.result-header {
background-color: #FF6A4C;
color: white;
padding: 20px;
text-align: center;
}
.result-header h2 {
font-size: 22px;
margin: 0 0 5px 0;
}
.result-header p {
margin: 0;
font-size: 15px;
opacity: 0.9;
}
.result-image-container {
display: flex;
padding: 20px;
background-color: #f9f9f9;
border-bottom: 1px solid #eee;
}
.uploaded-image {
width: 120px;
height: 120px;
border-radius: 8px;
object-fit: cover;
border: 2px solid #ddd;
}
.reference-images {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-left: 20px;
}
.reference-image {
width: 80px;
height: 80px;
border-radius: 6px;
object-fit: cover;
border: 1px solid #ddd;
cursor: pointer;
transition: transform 0.2s;
}
.reference-image:hover {
transform: scale(1.05);
}
.result-tabs {
display: flex;
border-bottom: 1px solid #ddd;
}
.result-tab {
padding: 12px 20px;
background: none;
border: none;
border-bottom: 3px solid transparent;
font-weight: 600;
color: #666;
cursor: pointer;
transition: all 0.3s;
}
.result-tab.active {
color: #FF6A4C;
border-bottom-color: #FF6A4C;
}
.result-content {
padding: 20px;
}
.result-section {
display: none;
}
.result-section.active {
display: block;
}
.section-title {
font-size: 18px;
margin-bottom: 15px;
color: #333;
display: flex;
align-items: center;
}
.section-icon {
margin-right: 10px;
color: #FF6A4C;
}
.danger-level {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.danger-meter {
flex: 1;
height: 8px;
background-color: #eee;
border-radius: 4px;
overflow: hidden;
margin: 0 15px;
}
.danger-fill {
height: 100%;
background: linear-gradient(to right, #4CAF50, #FFC107, #FF5722);
width: 80%; }
.danger-label {
font-weight: 600;
color: #FF5722;
}
.action-points {
margin-bottom: 20px;
}
.action-item {
display: flex;
align-items: flex-start;
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #f0f0f0;
}
.action-number {
width: 24px;
height: 24px;
border-radius: 50%;
background-color: #FF6A4C;
color: white;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
margin-right: 12px;
flex-shrink: 0;
}
.action-text {
flex: 1;
}
.results-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
margin-top: 30px;
border-top: 1px solid #eee;
padding-top: 20px;
}
.btn-devis-gratuit, .btn-appeler-expert {
padding: 14px 20px;
border-radius: 8px;
font-weight: 600;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition: all 0.3s;
}
.btn-devis-gratuit {
background-color: #FF6A4C;
color: white;
}
.btn-devis-gratuit:hover {
background-color: #E65A3D;
color: white;
}
.btn-appeler-expert {
background-color: white;
border: 2px solid #FF6A4C;
color: #FF6A4C;
}
.btn-appeler-expert:hover {
background-color: #FFF8F6;
}
.action-icon {
margin-right: 8px;
}
.new-analysis-btn {
display: block;
width: 100%;
padding: 12px;
background-color: #f2f2f2;
color: #666;
border: none;
border-radius: 8px;
text-align: center;
margin-top: 15px;
cursor: pointer;
transition: background-color 0.3s;
}
.new-analysis-btn:hover {
background-color: #e5e5e5;
}
.emergency-alert {
background-color: #FFF5F5;
border-left: 4px solid #FF5252;
padding: 15px;
margin: 20px 0;
border-radius: 0 4px 4px 0;
}
.emergency-alert p {
margin: 0;
color: #D32F2F;
font-weight: 500;
} @media (max-width: 768px) {
.result-image-container {
flex-direction: column;
}
.reference-images {
margin-left: 0;
margin-top: 15px;
}
.results-actions {
grid-template-columns: 1fr;
}
} .result-container {
background-color: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
}
.result-image-area {
background-color: #f9f9f9;
padding: 20px;
display: flex;
justify-content: center;
border-bottom: 1px solid #eee;
}
.result-uploaded-image {
max-width: 100%;
max-height: 300px;
border-radius: 8px;
object-fit: contain;
border: 2px solid #eee;
}
.nuisibles-ai-result {
padding: 20px;
line-height: 1.6;
} .step-navigation {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
}
.step-navigation .btn-devis-gratuit,
.step-navigation .btn-appeler-expert {
padding: 14px 20px;
text-align: center;
font-weight: 600;
text-decoration: none;
border-radius: 8px;
transition: all 0.3s;
}
.step-navigation .btn-devis-gratuit {
background-color: #FF6A4C;
color: white;
}
.step-navigation .btn-devis-gratuit:hover {
background-color: #E65A3D;
color: white;
}
.step-navigation .btn-appeler-expert {
background-color: white;
border: 2px solid #FF6A4C;
color: #FF6A4C;
}
.step-navigation .btn-appeler-expert:hover {
background-color: #FFF8F6;
}
.step-navigation .new-analysis-btn {
grid-column: 1 / -1;
padding: 12px 20px;
background-color: #f2f2f2;
color: #666;
border: none;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.3s;
}
.step-navigation .new-analysis-btn:hover {
background-color: #e5e5e5;
}
@media (max-width: 600px) {
.step-navigation {
grid-template-columns: 1fr;
}
}