/* style.css */

/* Import de la police Inter depuis Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* Styles généraux pour la barre de progression (spécifique à index.html mais peut rester ici) */
.progress-bar-container {
    @apply w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700 mt-2;
}

.progress-bar {
    @apply bg-blue-600 h-2.5 rounded-full;
}

/* Styles pour le message de statut (notifications) */
#status-message {
    transition: opacity 0.3s ease-in-out;
}

/* Styles pour l'indicateur de chargement (spinner) */
.loader {
    border: 4px solid #f3f3f3; /* Light grey */
    border-top: 4px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 24px;
    height: 24px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Styles pour les éléments de glisser-déposer (spécifique à index.html) */
#drop-area.highlight {
    @apply border-blue-600 bg-blue-100;
}

/* Styles spécifiques pour les inputs de type range (compatibilité navigateur) */
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #3498db;
    cursor: grab;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(52, 152, 219, 0.3);
    transition: background 0.3s ease-in-out;
}

input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #3498db;
    cursor: grab;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(52, 152, 219, 0.3);
    transition: background 0.3s ease-in-out;
}

input[type="range"]::-webkit-slider-thumb:active,
input[type="range"]::-moz-range-thumb:active {
    cursor: grabbing;
}

/* Styles pour les boutons d'action d'image (spécifique à index.html) */
.image-action-button {
    @apply bg-blue-500 text-white p-2 rounded-full hover:bg-blue-600 transition-colors duration-200;
}

.image-action-button svg {
    @apply w-5 h-5;
}

/* Styles pour la comparaison d'images (futur ajout ou pour le plaisir) */
.comparison-container {
    position: relative;
    width: 100%;
    height: 300px; /* Ou une hauteur dynamique */
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.comparison-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* Pour s'assurer que l'image est visible */
}

.comparison-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%; /* Initialement, moitié de l'image */
    height: 100%;
    overflow: hidden;
    resize: horizontal; /* Permet de redimensionner horizontalement */
    cursor: ew-resize; /* Curseur de redimensionnement horizontal */
    background-color: rgba(0,0,0,0.2); /* Pour voir l'overlay */
}

.comparison-overlay img {
    width: 200%; /* L'image dans l'overlay doit être deux fois plus large */
    height: 100%;
    object-fit: contain;
}

/* Styles pour les messages d'erreur/succès */
.alert-success {
    @apply bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative;
}

.alert-error {
    @apply bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative;
}

/* --- Styles Communs à toutes les pages --- */

/* Styles pour les sections d'informations (Mentions Légales, CGU, Confidentialité, Contact) */
.info-section {
    @apply bg-white rounded-xl shadow-lg p-6 mb-8;
}

.info-section h2 {
    @apply text-2xl font-bold text-gray-800 mb-6 border-b pb-3;
}

.info-section h3 {
    @apply text-xl font-bold text-gray-800 mt-8 mb-4 border-b pb-3;
}

.info-section p {
    @apply text-gray-700 mb-4;
}

.info-section ul {
    @apply list-disc list-inside mb-4 pl-4;
}

.info-section li {
    @apply mb-2 text-gray-700;
}

.contact-info-block {
    @apply bg-gray-50 p-4 rounded-lg shadow-sm mb-4;
}

.important-block {
    @apply bg-blue-100 border-l-4 border-blue-500 text-blue-700 p-4 mb-6 rounded-md;
}

.warning-block {
    @apply bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4 mb-6 rounded-md;
}

.date-update {
    @apply text-sm text-gray-500 italic mb-6;
}

/* Styles pour les formulaires (sur la page Contact) */
.form-group {
    @apply mb-4;
}

.form-group label {
    @apply block text-gray-700 text-sm font-bold mb-2;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group select,
.form-group textarea {
    @apply shadow-sm appearance-none border rounded-lg w-full py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
}

.form-group textarea {
    @apply min-h-[120px];
}

.form-btn {
    @apply bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg shadow-md transition-colors duration-300 transform hover:scale-105;
}

/* Styles pour les FAQ (sur les pages Guide, Contact, About) */
.faq-item {
    @apply bg-white rounded-lg shadow-md mb-4 overflow-hidden;
}

.faq-question {
    @apply bg-gray-100 p-4 cursor-pointer flex justify-between items-center font-semibold text-gray-800 hover:bg-gray-200 transition-colors duration-200;
}

.faq-answer {
    @apply p-4 text-gray-700 hidden;
}

.faq-answer.active {
    display: block;
}

/* Styles pour les éléments flottants sur la page Guide */
.floating-elements {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
}

.floating-element {
    position: absolute;
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(180deg); }
}

/* Styles pour les animations (si utilisées) */
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-50px); }
    to { opacity: 1; transform: translateY(0); }
}

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

@keyframes fadeInLeft {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}

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

@keyframes pulse {
    0% { box-shadow: 0 20px 40px rgba(102,126,234,0.3); }
    50% { box-shadow: 0 25px 50px rgba(102,126,234,0.5); }
    100% { box-shadow: 0 20px 40px rgba(102,126,234,0.3); }
}

/* Media queries pour la réactivité */
@media (max-width: 768px) {
    .container {
        @apply px-2; /* Réduit le padding sur mobile */
    }
    header .container {
        @apply flex-col; /* Empile les éléments de l'en-tête sur mobile */
    }
    header nav {
        @apply mt-4 flex-col items-center space-x-0 space-y-2; /* Empile les liens de navigation */
    }
    header nav a {
        @apply w-full text-center;
    }
    main {
        @apply p-4; /* Réduit le padding du main sur mobile */
    }
    .info-section {
        @apply p-4;
    }
    .info-section h2 {
        @apply text-xl;
    }
    .info-section h3 {
        @apply text-lg;
    }
}