/*** RESPONSIVE ***/

/* Tablettes */
@media (max-width: 1199px) {
    .col-1, .col-2, .col-3, .col-5, .col-6 { flex-basis: 50%; max-width: 50%; }
    .col-4, .col-7, .col-8, .col-9, .col-10, .col-11,.col-12 { flex-basis: 100%; max-width: 100%; }

    /*** LIENS ***/
    .link-mobile {
        background-color: var(--color-yellow);
        color: var(--color-black);
        width: max-content;
        padding: 2px 8px 2px 8px;
        height: max-content;
        text-decoration: none;
    }
    .link-mobile:active,
    .link-mobile:hover {
        background-color: var(--color-white);
        color: var(--color-black);
        width: max-content;
        padding: 2px 8px 2px 8px;
    }


    /*** Page ACCUEIL ***/
    /* Hero */
    .informations > .desktop {
        display: none;
    }
    /* Section présentation */
    div.presentation--img {
        display: none;
    }
    /* Section processus */
    .processus--texte.desktop {
        display: none;
    }
    .processus--texte.mobile {
        display: flex;
        flex-direction: row;
        margin-top: 0px;
        justify-content: center;
    }
    .processus-img {
        margin-top: -68px;
        z-index: 0;
    }
    .processus-tb {
        z-index: 1;
    }
    .processus--titres, 
    .processus--descriptions {
        padding-top: 24px;
    }
    .processus--titres {
        gap: 106px;
    }


    /*** Page PROJETS - Parente ***/
    .grille-projets,
    .grille-projets-home {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 64px;
    }
    .track {
        margin: 160px 0px;
    }
    .carte-projet--meta {
        background-color: var(--color-yellow);
        color: var(--color-black) !important;
    }
    article.carte-projet:hover .carte-projet--meta {
        background-color: var(--color-white);
        color: var(--color-black);
    }
    .track {
        margin-top: 80px;
        margin-bottom: 0px;
    }
    .carte-projet {
        margin-top: 0px;
    }
    .domaines.desktop {
        display: none;
    }
    .domaines.mobile {
        display: block;
    }
    .title-1,
    .title-2 {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .fleche {
        width: 9%;
        height: auto;
    }
    .branding-description,
    .edition-description,
    .webdesign-description,
    .images-description {
        opacity: 100;
    }
    .branding:hover .branding-fleche,
    .edition:hover .edition-fleche,
    .webdesign:hover .webdesign-fleche,
    .images:hover .images-fleche {
        transform: rotate(-90deg);
        transition: transform 0.3s ease;
    }
    .domaines-cta {
        padding-top: 32px;
        text-align: center;
    }
    /* Section highlight */
    #projet-hightlight > a > div {
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: end;
        gap: 0px;
        background-color: var(--color-black);
        color: var(--color-white) !important;
        width: 100%;
    }
    .carte-projet--type {
        padding-top: 4px;
    }
    .link-projet {
        height: 400px;
        display: flex;
        align-items: end;
        justify-content: center;
        padding: 40px;
    }



    /*** Pages PROJETS - Enfants ***/
    /*TB de tous les projets */
    .tb-image-bg--kickstarter {
        height: 50dvh;
        margin-bottom: 40px;
    }
    .tb-project--bottom.mobile > img {
        height: 56px;
        width: auto;
    }
    .tb-project--bottom.desktop {
        display: none;
    }
    .projet--scenario-contexte {
        padding-left: 0px;
    }
    .projet--scenarion-auteur {
        padding-left: 40px;
    }
    .visual-video {
        margin-top: 40px;
    }
    .tb-project--bottom.mobile {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 32px;
        align-items: center;
        justify-content: center;
        margin-top: 0px;
        margin-bottom: 80px;
    }
    /* Autre contenu */
    .citation-bottom {
        margin-bottom: 40px;
    }
    .visuals {
        margin-top: 40px;
    }
    .visual-left {
        padding-right: 0px;
        padding-bottom: 24px;
    }
    .visual-right {
        padding-left: 0px;
        padding-top: 0px;
    }
    .more-projects--top > h2 {
        margin-bottom: 80px;
    }
    .carte-projet.tablette {
        display: none;
    }
    .tablette {
        display: none;
    }

    /* Macadam */
    #macadam-home, #macadam-about, #macadam-artiste, #macadam-liste {
        margin-top: 32px;
    }

    /* CQLP */
    #miel {
        margin-top: 40px;
        margin-left: 180px;
    }
    #plv {
        margin-top: -110px;
    }
    #cqlp-ancien { display: block; }

    /* MAISON LUA */
    .projet--scenario-introduction {
        margin-bottom: 80px;
    }
    .arborescence--text { margin-bottom: 40px; }



    /*** Page ABOUT ***/
    .curriculum-top > h2 {
        margin: 0px;
        padding: var(--padding-110) var(--padding-0) var(--padding-16) var(--padding-0);
    }
    .curriculum-bottom > h2 {
        margin: 0px;
        padding: var(--padding-32) var(--padding-0) var(--padding-80) var(--padding-0);
    }



    /*** Page PHOTOGRAPHY ***/
    .voyage--titre {
        margin-bottom: 0px;
        padding-left: 8px;
        display: flex;
        flex-direction: column;
        width: 200%;
        gap: 40px;
    }

    /*** FOOTER ***/
    .contact-hd-top > div:first-child {
        padding-left: 80px;
    }
    .contact-bottom {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
    }
    .footer-disclaimer {
    padding-right: 0px;
    }
    .footer-bottom--droits > p {
        margin-bottom: 0px;
    }
    .contact-bottom--mail a:last-child {
        margin-left: 0px;
        padding-left: 16px;
    }
}








/* Mobiles */
@media (max-width: 767px) {
    .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11,.col-12 { flex-basis: 100%; max-width: 100%; }
    /* Nav desktop masquée, hamburger visible */
    .hamburger { display: flex; }
    .main-nav  { display: none !important; }
    .nav-square { display: none; }
    .main-nav {
        display: none;
        position: absolute;
        top: 3.5rem;
        left: 0;
        right: 0;
        background: var(--color-black);
        flex-direction: column;
        align-items: center;
        gap: 0;
        border-bottom: 1px solid var(--color-yellow);
        padding: var(--padding-8) var(--padding-32);
    }
    .main-nav.is-open {
        display: flex;
    }
    .main-nav > ul {
        flex-direction: column;
        gap: var(--gap-16);
    }

    .btn-tag,
    .btn-filtre {
        padding: var(--padding-8) var(--padding-24);
    }

    /* Container */
    .container { padding: 0px 32px; }
    .row { margin: 0px; }
    *, *:hover { cursor: auto; }
    .cursor { display: none; }


    /* HERO IMAGE */
    .hero-image {
        background-image: url(../assets/img/autres/jlzstudio-design-hero-mobile.jpg);
        background-attachment: fixed;
        background-size: contain;
    }


    /* TB Pages internes */
    .title-h1 > h1 { margin: var(--padding-40) var(--padding-0); }


    /*** Page ACCUEIL ***/
    /* Hero */
    .informations,
    .reseaux.desktop {
        display: none;
    }
    .reseaux.mobile {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        margin-top: 4px;
        margin-bottom: 40px;
    }
    .header-bottom { margin-top: 75vh; }
    .presentation--texte {
        padding: 0px;
    }
    .presentation--idea {
        padding-bottom: 16px;
    }
    .presentation.desktop {
        display: none;
    }
    .presentation.mobile {
        display: block;
    }
    .presentation--jlz,
    .presentation--jlz > h2,
    .presentation--jlz > a {
        text-align: left;
        padding-left: 0px;
        margin-left: 0px;
    }
    .presentation--jlz {
        margin-top: 40px;
    }
    .carte-projet.mobile {
        display: none;
    }
    div.presentation--img {
        display: block;
    }



    /*** Page ABOUT ***/
    .projets-title-mobile {
        display: block;
    }
    .presentation_text,
    .curriculum--capacites {
        padding: 0px;
    }
    .presentation_img--photos-desktop {
        display: none;
    }
    .presentation_img--photos-mobile {
        margin: 24px 0px;
        display: block;
    }
    .curriculum-top > h2 {
    margin: 0px;
    padding: var(--padding-110) var(--padding-0) var(--padding-24) var(--padding-0);
    }
    .curriculum-bottom > h2 {
        margin: 0px;
        padding: var(--padding-40) var(--padding-0) var(--padding-110) var(--padding-0);
    }
    .curriculum--certificats > ul,
    .curriculum--certificats > h3,
    .curriculum--experiences > ul,
    .curriculum--experiences > h3 {
        align-items: start;
        align-self: start;
        text-align: left;
    }
    .curriculum--certificats,
    .curriculum--experiences {
        margin-top: 40px;
    }
    .type-avis {
        justify-content: end;
        padding: 0px;
        margin-top: 0px;
        margin-bottom: 24px;
    }
    .avis-consigne-mobile {
        display: block;
    }
    .avis--top-left { 
        justify-content: space-between;
    }
    .type-avis {
        display: none;
    }
    .square.mobile { display: block; }
    .pc-avis {
        flex-direction: column;
        overflow-x: auto;
        width: 100%;
    }
    .pc-avis-item {
        min-width: auto;
        padding: 24px;
    }



    /*** Page PROJETS - Parente ***/
    .grille-projets,
    .grille-projets-home {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 80px;
    }
    .track {
        margin: 80px 0px;
    }



    /*** Pages PROJETS - Enfants ***/
    .project--infos {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0px;
    }
    .citation-top > p:first-child {
        margin-bottom:  40px;
        width: 88%;
    }
    .citation-bottom > p:last-child {
        width: 100%;
        padding-bottom: 24px;
    }
    .charte {
        margin-top: 40px;
    }
    .visuals {
        margin-top: 80px;
    }
    .visual-left {
        padding-right: 0px;
    }
    .visual-right {
        padding-left: 0px;
        padding-top: 24px;
    }

    /* More projects */
    .more-projects--top {
        margin-top: 0px;
    }
    .more-projects--top > h2 {
        margin-bottom: 40px;
    }

    /* CQLP */
    #oeuf {
        margin-top: 0px;
    }
    #plv {
        margin-top: -40px;
    }

    /* Vinyle */
    .charte, .pochette3 { padding-right: 0px; }
    .tourne-disque { padding-top: 16px; padding-left: 0px; }
    .livret { padding-left: 0px; padding-top: 16px; }

    /* MAISON LUA */
    .col-12 > h2 {
        margin-bottom: 40px;
    }
    .scenario--description, 
    .scenario--cta {
        padding-left: 0px;
    }
    .scenario--cta {
        text-align: center !important;
    }
    .persona { padding-left: 0px; margin-top: 40px; }
    .charte--desktop { display: none; }
    .charte--mobile {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    .concurrence {
        flex-direction: column;
        gap: 0px;
    }
    .positionnement--titre p {
        width: 100%;
    }
    .probleme--item {
        flex-direction: column;
        align-items: start;
        gap: 0px;
        margin-top: 8px;
    }
    .item--content {
        flex-direction: column;
        gap: 0px;
        margin-bottom: 16px;
        align-items: start;
    }
    .item--content p {
        margin: 0px;
    }
    .visuals--mobile { 
        display: flex;
        flex-direction: column;
        gap: 16px;
}
    .visuals--mobile > img:nth-child(3) {
        z-index: 1;
    }
    .visuals--mobile > img:nth-child(4) {
        margin-top: -110px;
        z-index: 0;
    }
    .visuals--top, .visuals--bottom { display: none; }
    .visuals--mobile > video {
        width: 100%;
        height: auto;
    }


    /*** Page PHOTOGRAPHY ***/
    .desktop {
        display: none;
    }
    .mobile {
        display: block;
    }


    /*** FOOTER ***/
    .contact-top--desktop,
    .contact-bottom--desktop {
        display: none;
    }
    .contact-top--mobile {
        display: block;
    }
    .contact-top--mobile > p {
        margin: 0px;
    }
    .contact-top--mobile > p:first-child {
        padding-bottom: 16px;
    }
    .contact-top--mobile > p:last-child {
        padding-bottom: 110px;
        margin-bottom: 110px;
    }
    .footer-top--desktop {
        display: none;
    }
    .footer-top--mobile {
        display: block;
    }
    /* Footer Top -- Mobile */
    .footer-mail > p,
    .footer-tag > p,
    .footer-socials > p {
        margin: 8px 0px;
    }
    .footer-mail,
    .footer-tag,
    .footer-socials {
        margin-bottom: 24px;
    }
    .footer-bottom,
    .footer-bottom--infos,
    .footer-bottom--droits,
    .footer-bottom--top {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .footer-bottom {
        margin-top: 110px;
    }
    .footer-bottom--top div.square {
        display: none;
    }
    .link-socials {
        display: flex;
        flex-direction: row;
        gap: 8px;
    }
    .footer-tag {
        display: flex;
        flex-direction: row;
        align-items: end;
        gap: 16px;
    }
    .contact {
        margin-bottom: 80px;
    }
    .contact-bottom--text > p {
        margin: 0px;
    }
    .footer-bottom--top > a {
        margin: 24px 0px;
    }
}