/* ==========================================================================
   Responsive
   ========================================================================== */

/* ==========================================================================
   Tablette (1024px et moins)
   ========================================================================== */
@media screen and (max-width: 1024px) {

    /* Header */
    .header-container {
        padding: 20px 30px;
    }

    .nav-left ul,
    .nav-right ul {
        gap: 30px;
    }

    /* Archive Artistes */
    .artistes-container {
        padding: 0 30px;
    }

    .artistes-archive .page-title {
        font-size: 40px;
        margin-bottom: 60px;
    }

    .artistes-grid {
        gap: 80px;
    }

    .artiste-card {
        grid-template-columns: 300px 1fr;
        gap: 40px;
    }

    .artiste-name {
        font-size: 28px;
    }

    /* Single Artiste */
    .back-link {
        left: -60px;
    }

    .artiste-content .artiste-container {
        padding: 0 30px;
    }

    .artiste-title {
        font-size: 40px;
    }

    .artiste-hero-photo img {
        height: 500px;
        width: 100%;
    }

    .clips-list {
        flex-wrap: wrap;
    }

    .clip-item {
        max-width: calc(50% - 15px);
    }

    /* Home */
    .home-actualites-list {
        grid-template-columns: repeat(2, 1fr);
    }

    .home-artistes-row {
        gap: 40px;
    }

    .home-artistes-row-2 {
        margin-right: 120px;
    }

    .home-staff-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .home-contact {
        padding: 100px 40px 200px 40%;
    }

    /* Archive Articles */
    .archive-articles-container {
        max-width: calc(100% - 120px);
        margin-left: 120px;
    }

    .archive-back-link {
        left: -60px;
    }

    .archive-articles-main {
        padding: 40px 50px;
    }

    .article-content-wrapper {
        gap: 30px;
    }

    /* À Propos */
    .a-propos-page {
        padding: 200px 40px 80px;
    }

    .back-link-apropos {
        left: 80px;
        top: 130px;
    }

    .staff-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ==========================================================================
    Mobile (768px et moins)
   ========================================================================== */
@media screen and (max-width: 768px) {

    /* Header */
    .header-container {
        flex-direction: row;
        gap: 20px;
        padding: 20px;
    }

    .nav-left,
    .nav-right {
        flex: none;
        width: 100%;
        justify-content: center;
    }

    .nav-left ul,
    .nav-right ul {
        gap: 20px;
        font-size: 14px;
    }

    .site-content {
        margin-top: 180px;
    }

    /* Archive Artistes */
    .artistes-archive {
        padding: 60px 0 80px;
    }

    .artistes-container {
        padding: 0 20px;
    }

    .artistes-archive .page-title {
        font-size: 32px;
        margin-bottom: 40px;
    }

    .artistes-grid {
        gap: 60px;
    }

    .artiste-card {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .artiste-name {
        font-size: 24px;
    }

    .category-tag {
        font-size: 12px;
        padding: 6px 16px;
    }

    .artiste-excerpt {
        font-size: 14px;
    }

    .voir-plus {
        font-size: 14px;
    }

    /* Single Artiste */
    .artiste-content {
        padding: 120px 0 50px;
    }

    .artiste-content .artiste-container {
        padding: 0 20px;
    }

    .back-link {
        position: static;
        margin-bottom: 20px;
    }

    .artiste-title {
        font-size: 32px;
    }

    .artiste-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .artiste-hero-photo {
        margin: 20px -20px;
    }

    .artiste-hero-photo img {
        height: 400px;
        width: 100%;
    }

    .artiste-swiper, .artiste-swiper .swiper-slide img {
        max-width: 100%;
    }

    .artiste-presentation {
        font-size: 16px;
    }

    .section-title {
        font-size: 28px;
        margin: 60px 0 30px 0;
    }

    .actualites-list {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .actualite-image {
        width: 100%;
        max-width: 100%;
    }

    .clips-list {
        flex-direction: column;
        position: relative;
    }

    .clips-more {
        position: absolute;
        top: -50px;
        right: 25%;
    }

    .clip-item {
        max-width: 100%;
        padding: 0 20px;
    }

    .clip-overlay {
        height: calc(100% - 40px);
    }

    .tous-artistes-list {
        gap: 40px;
        justify-content: center;
    }

    /* Home */
    .home-hero {
        height: 90vh;
    }

    .home-hero-content .home-logo {
        max-width: 90%;
        min-width: 0;
        padding: 0 20px;
    }

    .scroll-arrow {
        width: 50px;
        height: 50px;
        bottom: 40px;
    }

    .home-section-container {
        padding: 60px 20px 40px;
    }

    .home-section-title {
        font-size: 28px;
        margin-bottom: 30px;
    }

    .home-actualites {
        margin: 0 0 0 20px;
    }

    .home-actualites-container {
        padding: 30px 20px;
    }

    .home-actualites-list {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .home-artistes .home-section-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    .home-artistes .home-section-title {
        grid-column: 1 / -1;
    }

    .home-artistes-row {
        display: contents;
    }

    .home-artistes-row-1,
    .home-artistes-row-2 {
        margin-bottom: 0;
        margin-right: 0;
        justify-content: unset;
    }

    .home-artiste-item {
        max-width: 100%;
    }

    .home-artiste-photo {
        min-height: 200px;
    }

    .home-artiste-photo img {
        height: 200px;
    }

    .home-apropos {
        padding: 50px 20px 80px 0;
    }

    .home-apropos-content {
        padding: 40px 30px 60px;
    }

    .home-apropos-title {
        font-size: 28px;
    }

    .home-staff-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        justify-items: stretch;
    }

    .staff-member {
        width: 100%;
    }

    .staff-photo {
        width: 100%;
        max-width: 100%;
    }

    .home-contact {
        padding: 60px 20px 120px 0;
    }

    .home-contact-content {
        padding: 30px 20px;
    }

    .home-contact-title {
        font-size: 28px;
        margin-bottom: 30px;
    }

    .home-contact-links {
        margin: 0 0 0 10px;
    }

    /* Archive Articles */
    .archive-articles-container {
        max-width: 100%;
        margin: 20px;
    }

    .archive-back-link {
        position: static;
        margin-bottom: 20px;
    }

    .archive-articles-main {
        padding: 30px 20px;
    }

    .archive-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        margin-bottom: 50px;
    }

    .archive-title {
        font-size: 28px;
    }

    .archive-filters {
        flex-wrap: wrap;
    }

    .articles-list {
        gap: 50px;
    }

    .article-content-wrapper {
        flex-direction: column;
        gap: 15px;
    }

    .article-image {
        flex: 0 0 100%;
        min-width: 100%;
        max-width: 100%;
        max-height: none;
    }

    .article-image img {
        height: 250px;
    }

    .article-category {
        font-size: 18px;
        margin-bottom: 15px;
    }

    .article-excerpt {
        max-width: 100%;
    }

    /* À Propos */
    .a-propos-page {
        padding: 150px 20px 80px;
    }

    .back-link-apropos {
        left: 20px;
        top: 100px;
    }

    .a-propos-content {
        padding: 40px 30px;
    }

    .a-propos-title {
        font-size: 28px;
    }

    .staff-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    /* Contact */
    .contact-page {
        padding: 100px 0 60px;
    }

    .contact-box,
    .contact-form-box {
        padding: 30px 20px;
    }

    .contact-title,
    .contact-form-title {
        font-size: 24px;
    }

    .contact-header-title {
        font-size: 24px;
    }

    .contact-links {
        margin-left: 10px;
    }

    .contact-form-row {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .contact-form-wrapper .wpcf7 .file-upload-label {
        padding: 15px 20px;
        font-size: 14px;
    }

    .contact-form-wrapper .wpcf7 .file-upload-label::before,
    .contact-form-wrapper .wpcf7 .file-upload-label::after {
        width: 20px;
        height: 20px;
    }

    .contact-back-header::before {
        left: -35px;
        width: 25px;
        height: 25px;
        transform: none;
    }
}

/* ==========================================================================
    Petit Mobile (480px et moins)
   ========================================================================== */
@media (max-width: 480px) {

    /* Header */
    .header-container {
        padding: 25px 40px;
    }

    .nav-left ul,
    .nav-right ul {
        gap: 15px;
        font-size: 12px;
    }

    .site-content {
        margin-top: 90px;
    }

    /* Home */
    .home-hero {
        height: 90vh;
    }

    .home-hero-content .home-logo {
        max-width: 95%;
        min-width: 100vw;
    }

    .scroll-arrow {
        width: 40px;
        height: 40px;
        bottom: 30px;
    }

    .home-section-container {
        padding: 40px 30px 30px;
    }

    .home-section-title {
        font-size: 24px;
        margin: 0 0 25px 0;
        text-align: center;
    }

    .home-actualites {
        margin: 0 30px;
        scroll-margin-top: 80px;
    }

    .home-actualites-container {
        padding: 25px 30px;
    }

    .home-actualites-list {
        gap: 25px;
    }

    .home-actualite-caption {
        font-size: 8px;
        line-height: 12px;
    }

    .home-artistes .home-section-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    .home-artistes .home-section-title {
        grid-column: 1 / -1;
        margin: 25px 0 10px 0;
    }

    .home-artistes-row {
        display: contents;
    }

    .home-artiste-photo {
        min-height: 110px;
        margin-bottom: 5px;
    }

    .home-artiste-photo img {
        height: 110px;
    }

    .home-artiste-name {
        font-size: 18px;
    }

    .home-apropos {
        padding: 40px 30px 60px;
    }

    .home-apropos-content {
        padding: 30px 30px 50px;
    }

    .home-apropos-title {
        font-size: 24px;
        text-align: center;
    }

    .home-apropos-text {
        font-size: 13px;
        margin-bottom: 40px;
    }

    .home-staff-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px 30px;
        justify-items: stretch;
    }

    .staff-member {
        width: 100%;
    }

    .staff-photo {
        width: 100px;
        max-width: 100px;
    }

    .staff-name {
        font-size: 11px;
    }

    .staff-position {
        font-size: 11px;
    }

    .home-contact {
        padding: 0 30px 40px 30px;
    }

    .home-contact-content {
        padding: 25px 15px;
    }

    .home-contact-title {
        font-size: 24px;
        margin-bottom: 25px;
    }

    .home-contact-links {
        margin: 0 0 0 5px;
    }

    .home-contact-links li {
        font-size: 11px;
        line-height: 24px;
    }

    .home-contact-link {
        font-size: 11px;
    }

    /* Archive Artistes */
    .artistes-archive {
        padding: 50px 0 60px;
    }

    .artistes-container {
        padding: 0 15px;
    }

    .artistes-archive .page-title {
        font-size: 28px;
        margin-bottom: 30px;
    }

    .artistes-grid {
        gap: 40px;
    }

    .artiste-name {
        font-size: 20px;
    }

    /* Single Artiste */
    .artiste-content {
        padding: 0 0 20px;
    }

    .artiste-content .artiste-container {
        padding: 40px 15px 0;
    }

    .artiste-title {
        font-size: 21px;
    }

    .artiste-hero-photo {
        margin: 20px -15px;
    }

    .artiste-hero-photo img {
        height: 300px;
        width: 100%;
    }

    .artiste-presentation {
        font-size: 14px;
        margin: 30px 0;
    }

    .section-title {
        font-size: 21px;
        margin: 50px 0 25px 0;
    }

    .artiste-links {
        gap: 15px;
    }

    .artiste-link-btn {
        font-size: 10px;
        padding: 0 15px;
        height: 30px;
    }

    .tous-artiste-photo {
        width: 120px;
        height: 120px;
    }

    .tous-artiste-name {
        font-size: 12px;
    }

    /* Archive Articles */
    .archive-articles-content {
        padding: 25px 0 0;
    }

    .archive-articles-container {
        margin: 15px;
    }

    .archive-articles-main {
        padding: 25px 15px;
    }

    .archive-title {
        font-size: 24px;
    }

    .filter-toggle-btn {
        font-size: 11px;
        padding: 0 15px;
        height: 32px;
    }

    .filter-artiste-btn {
        font-size: 10px;
        padding: 0 12px;
        height: 28px;
    }

    .articles-list {
        gap: 60px;
    }

    .article-image img {
        height: 200px;
    }

    .article-category {
        font-size: 16px;
    }

    .article-excerpt,
    .article-caption {
        font-size: 13px;
        line-height: 20px;
    }

    /* À Propos */
    .a-propos-page {
        padding: 120px 15px 60px;
    }

    .back-link-apropos {
        left: 15px;
        top: 60px;
    }

    .back-link-apropos::before {
        width: 40px;
        height: 40px;
    }

    .a-propos-content {
        padding: 30px 20px;
    }

    .a-propos-title {
        font-size: 24px;
        margin-bottom: 25px;
    }

    .a-propos-text {
        font-size: 13px;
        margin-bottom: 40px;
    }

    .staff-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    /* Contact */
    .contact-page {
        padding: 15px 0;
    }

    .contact-box,
    .contact-form-box {
        padding: 25px 15px;
    }

    .contact-title {
        font-size: 22px;
        margin-bottom: 20px;
    }

    .contact-form-title {
        font-size: 16px;
        margin: 30px 0 40px;
    }

    .contact-header-title {
        font-size: 22px;
    }

    .contact-links li {
        font-size: 11px;
        line-height: 24px;
    }

    .contact-link-btn {
        font-size: 11px;
    }

    .contact-form-wrapper .wpcf7 label {
        font-size: 14px;
    }

    .contact-form-wrapper .wpcf7 input[type="text"],
    .contact-form-wrapper .wpcf7 input[type="email"],
    .contact-form-wrapper .wpcf7 input[type="url"],
    .contact-form-wrapper .wpcf7 textarea {
        font-size: 13px;
        padding: 12px;
    }

    .contact-form-wrapper .wpcf7 .file-upload-label {
        padding: 12px 15px;
        font-size: 9px;
    }

    .contact-form-wrapper .wpcf7 .file-upload-label span {
        font-size: 13px;
    }

    .contact-form-wrapper .wpcf7 .file-upload-label::before {
        margin-right: 15px;
    }

    .contact-form-wrapper .wpcf7 .file-upload-label::after {
        margin-left: 15px;
    }

    .artiste-select {
        font-size: 14px;
        padding: 12px 35px;
    }

    .contact-autre-btn {
        font-size: 14px;
        padding: 12px 25px;
    }

    .contact-back-header::before {
        left: -30px;
        width: 22px;
        height: 22px;
    }

    .contact-back-header {
        padding-left: 30px;
    }

    .contact-close-btn {
        top: 15px;
        right: 15px;
        width: 20px;
        height: 20px;
    }
}