/* Styles pour Mobile (max-width: 768px) */
@media (max-width: 768px) {
    /* Reset de base */
    body, html {
        margin: 0;
        padding: 0;
        font-size: 12px;
    }

    /* Logo */
    .logo-container {
        margin-bottom: 10px;
    }

    .logo {
        max-width: 70%;
    }

    /* Bouton Admin */
    .admin-button {
        width: 60px;
        height: 60px;
        top: 5px;
        right: 5px;
    }

    .admin-icon {
        max-width: 60px;
    }

    /* Navigation */
    .navbar {
        width: 100%;
        position: relative;
        text-align: center;
        margin-bottom: 2rem;
    }

    .navbar-container {
        flex-direction: column;
        align-items: center;
    }

    .navbar-item {
        font-size: 1.5rem;
        padding: 0.8rem;
        width: 100%;
        text-align: center;
    }

    .navbar-item:hover {
        transform: none;
    }

    .navbar-item_label {
        display: none;
    }

    /* Contenu */
    .content {
        padding: 1rem;
        margin: 1rem auto;
    }

    /* Articles */
    .article {
        flex-direction: column;
        padding: 1rem;
    }

    .article-image {
        width: 100%;
        height: auto;
        margin: 0 0 1rem 0 !important;
        order: 1;
    }

    .article-text {
        margin: 0;
        order: 2;
    }

    .article:nth-child(odd) .article-image,
    .article:nth-child(even) .article-image {
        order: 1;
        margin: 0 0 1rem 0 !important;
    }

    .article:nth-child(odd) .article-text,
    .article:nth-child(even) .article-text {
        order: 2;
    }

    /* Titres */
    h2 {
        font-size: 1.8rem;
    }

    h3 {
        font-size: 1.5rem;
    }

    /* Paragraphes */
    p {
        font-size: 1.2rem;
    }

    /* Tarifs */
    .pricing-container {
        margin: 2rem auto;
        padding: 1rem;
    }

    .pricing-title {
        font-size: 2rem;
    }

    .pricing-grid {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        width: 100%;
    }

    .pricing-card {
        width: 100%;
        margin-bottom: 1rem;
    }

    /* Formulaire */
    .form-wrapper {
        width: 100%;
        padding: 10px;
    }

    .progress-bar {
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
    }

    .step {
        width: 30px;
        height: 30px;
        font-size: 1.2rem;
    }

    form label {
        font-size: 1.3rem;
    }

    form input[type="text"],
    form input[type="email"],
    form input[type="date"],
    form input[type="tel"],
    form input[type="time"],
    form select,
    form textarea {
        font-size: 14px;
        padding: 8px;
    }

    .button-container {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .prev-btn,
    .next-btn,
    .submit-btn {
        width: 100%;
        margin: 5px 0;
    }

    /* Planning */
    .planning-container {
        margin-top: 10px;
        margin-bottom: 10px;
        padding: 5px;
        overflow-x: auto;
    }

    .planning-table {
        font-size: 10px;
        min-width: 600px;
    }

    .planning-table th,
    .planning-table td {
        padding: 5px;
        font-size: 1rem;
    }

    .time-slot {
        height: 40px;
    }

    .time-block {
        font-size: 0.9rem;
    }

    .add-slot {
        padding: 5px 10px;
        font-size: 1.2rem;
    }

    .add-week {
        width: 100%;
        margin-top: 10px;
    }

    /* Modale */
    .modal-content {
        width: 95%;
        margin: 10% auto;
        padding: 15px;
    }

    .modal-content h3 {
        font-size: 1.4rem;
    }

    .modal-content label {
        font-size: 1.2rem;
    }

    .modal-content button {
        padding: 8px 15px;
        font-size: 1.2rem;
    }

    /* Carrousel - Caché sur mobile */
    .content > section {
        display: none !important;
    }

    .list {
        display: none;
    }

    /* Footer */
    .footer-container {
        flex-direction: column;
        align-items: center;
        padding: 1rem;
        text-align: center;
    }

    .footer-logo {
        margin-right: 0;
        margin-bottom: 20px;
    }

    .footer-logo-img {
        max-width: 150px;
    }

    .footer-links {
        flex-direction: column;
        gap: 1rem;
        margin-bottom: 1rem;
    }

    .footer-section {
        margin-bottom: 15px;
    }

    .social-icons {
        flex-direction: row;
        justify-content: center;
        gap: 10px;
        margin-top: 1rem;
    }

    .social-icon {
        width: 40px;
        height: 40px;
    }

    /* Admin Dashboard */
    .container {
        flex-direction: column;
        padding: 10px;
    }

    .card {
        width: 100%;
        margin: 10px 0;
    }

    #filterStatus {
        width: 100%;
        margin-bottom: 10px;
    }

    /* Boutons */
    .btn {
        font-size: 1.2rem;
        padding: 0.8rem 1.2rem;
    }

    /* Job section */
    .job-section {
        flex-direction: column;
        padding: 1rem;
    }

    .job-description {
        padding: 10px;
    }

    .job-title {
        font-size: 1.8rem;
    }

    .job-text {
        font-size: 1.2rem;
    }

    .job-item {
        font-size: 1.1rem;
    }

    .application-info {
        font-size: 1.2rem;
    }

    /* Container général */
    .container {
        padding: 10px;
    }

    /* Espaces vides */
    .empty-space {
        height: 30px;
    }

    /* Mentions légales */
    .legal-container {
        padding: 20px;
        margin: 20px 10px;
    }

    .legal-container h2 {
        font-size: 1.8rem;
    }

    .legal-container h3 {
        font-size: 1.4rem;
    }

    .legal-container p {
        font-size: 1.1rem;
    }
}