/* E6LAB - CORRECTION MOBILE FR ET EN */

@media (max-width: 1199px) {
    .images-inline {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {

    *, *::before, *::after {
        box-sizing: border-box;
    }

    html, body {
        width: 100%;
        max-width: 100%;
        margin: 0;
    }

    body {
        overflow-x: clip;
        padding-bottom: 65px;
    }

    section, article {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    section > img[src*="separateur"] {
        display: block;
        width: 100%;
        height: auto;
    }

    article {
        padding: 0 12px;
    }

    article p {
        font-size: 15px;
        line-height: 1.6;
        letter-spacing: normal;
        text-align: left;
        overflow-wrap: anywhere;
        margin-bottom: 24px;
    }

    h1 {
        font-size: clamp(17px, 4.7vw, 22px);
        line-height: 1.45;
        margin: 22px auto 32px;
        padding: 0 10px;
        max-width: 100%;
    }

    h1 .ligne-1,
    h1 .ligne-2,
    h1 .ligne-3,
    h1 strong {
        font-size: inherit;
        line-height: inherit;
        letter-spacing: normal;
        left: auto;
        position: static;
    }

    h2 {
        font-size: 21px;
        letter-spacing: 1px;
        margin: 0 0 28px;
        overflow-wrap: anywhere;
    }

    h2 strong {
        font-size: inherit;
    }

    #langue {
        padding: 10px 12px 0;
    }

    #logo {
        display: block;
        width: auto;
        max-width: 100%;
        height: auto;
        margin: 0 auto 16px;
    }

    /* VIGNETTES SIMULATEURS */

    .images-inline {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
        max-width: 100%;
        gap: 5px;
        padding: 0 5px;
        margin: 0 auto;
    }

    .images-inline a {
        display: block;
        min-width: 0;
        width: 100%;
        overflow: hidden;
    }

    .images-inline img {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    /* PELLICULE : BANDEAUX HORIZONTAUX */

    #pellicule {
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        gap: 2px;
        width: 100%;
        height: auto;
        min-height: 0;
        overflow: hidden;
        margin: 12px auto;
        padding: 6px 2px;
        background: url("../images/pellicule.gif")
                    repeat-x center;
        background-size: auto 100%;
    }

    #pellicule a {
        display: block;
        flex: 1 1 0;
        min-width: 0;
    }

    #pellicule img {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        margin: 0;
    }

    /* FRISE CHRONOLOGIQUE */

    #chronologie {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        margin: 0 auto 28px;
    }

    /* LOGOS E6 RESEARCH / CONCEPT / SUPPORT */

    #-projet article > img[src$="logos.jpg"],
    #-project article > img[src$="logos.jpg"] {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        margin: 0 auto 28px;
        object-fit: contain;
    }

    #-projet article > img,
    #-project article > img {
        max-width: 100%;
        height: auto;
    }

    /* VIDEOS YOUTUBE */

    #-projet iframe,
    #-project iframe {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        margin: 12px auto;
        border: 0;
    }

    video {
        max-width: 100%;
        height: auto;
    }

    /* SIMULATEUR IDEAL : 12 PICTOGRAMMES */

    #spec-simu {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px 4px;
        align-items: center;
        justify-items: center;
        width: 100%;
        margin: 0 0 36px;
    }

    #spec-simu img {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        object-fit: contain;
    }

    /* ORGANIGRAMME SERVICES */

    #organigramme {
        width: 100%;
        margin: 0 0 36px;
    }

    #organigramme .tete {
        width: 100%;
        height: auto;
        min-height: 0;
        margin: 0 0 18px;
        padding: 10px 0;
        font-size: 19px;
        letter-spacing: 1px;
        background: none;
    }

    #organigramme .corps {
        display: flex;
        flex-direction: column;
        gap: 20px;
        width: 100%;
        background: none;
    }

    #organigramme .gauche,
    #organigramme .droite,
    #organigramme .bas {
        float: none;
        position: static;
        top: auto;
        left: auto;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 12px;
        border: 1px solid #303030;
        border-radius: 8px;
    }

    #organigramme .pictogramme,
    #organigramme .pictogramme.pilote,
    #organigramme .pictogramme.centre,
    #organigramme .pictogramme.evenementiel {
        display: block;
        margin: 20px auto 8px;
        max-width: 100%;
        height: auto;
    }

    #organigramme .gauche > .pictogramme:first-child,
    #organigramme .droite > .pictogramme:first-child,
    #organigramme .bas > .pictogramme:first-child {
        margin-top: 0;
    }

    #organigramme h3 {
        font-size: 17px;
        letter-spacing: 1px;
        margin: 8px 0 16px;
    }

    #organigramme p {
        font-size: 15px;
        line-height: 1.6;
        margin: 0 0 18px;
    }

    #organigramme img {
        max-width: 100%;
        height: auto;
    }

    #organigramme .casser {
        display: none;
    }

    /* CONTACT */

    #-contact,
    #-contact article,
    #-contact .infos {
        width: 100%;
        max-width: 100%;
    }

    .infos {
        width: 100%;
        max-width: 100%;
        line-height: normal;
        padding: 15px;
        margin: 0 auto 24px;
        background-size: contain;
    }

    .infos span {
        max-width: 100%;
        font-size: 15px;
        line-height: 1.6;
        letter-spacing: normal;
        overflow-wrap: anywhere;
    }

    .adresse {
        position: static;
        top: auto;
        margin: 0 0 22px;
        font-size: 12px;
        line-height: 1.65;
        letter-spacing: 1px;
        overflow-wrap: anywhere;
    }

    #-contact img {
        max-width: 100%;
        height: auto;
    }

    #mentions {
        text-align: center;
        margin: 20px auto;
    }

    #page-mentions {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 12px;
    }

    .liens-externes {
        max-width: 100%;
        padding: 0 6px;
    }

    .detecteur.marge {
        margin-bottom: 28px;
    }

    /* MENU INFERIEUR */

    nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: 100%;
        padding: 9px 5px;
        margin: 0;
        background: #101010 none;
        border-top: 1px solid #555;
        z-index: 20;
    }

    nav ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 6px 10px;
        padding: 0;
        margin: 0;
    }

    nav li {
        display: inline-block;
        margin: 0;
        font-size: clamp(10px, 2.7vw, 12px);
        letter-spacing: 0;
        white-space: nowrap;
    }
}
/* CORRECTIONS SAMSUNG - LOGO ET PELLICULE */
@media screen and (max-width: 700px) {

    /* Centrage du logo principal */
    #logo,
    #-accueil #logo,
    #-home #logo {
        display: block !important;
        position: static !important;
        float: none !important;
        width: auto !important;
        max-width: 94% !important;
        height: auto !important;
        margin: 12px auto 20px !important;
        transform: none !important;
    }

    /* Pellicule : 8 photos sur une seule ligne */
    #pellicule {
        display: grid !important;
        grid-template-columns: repeat(8, minmax(0, 1fr));
        align-items: center;
        gap: 2px;
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: 0;
        margin: 10px auto;
        padding: 8px 3px;
        overflow: hidden;
        background: url("../images/pellicule.gif")
                    repeat-x center center;
        background-size: auto 100%;
    }

    #pellicule a {
        display: block;
        width: 100%;
        min-width: 0;
        margin: 0;
    }

    #pellicule img {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        margin: 0 !important;
    }
}