/* DARK MODE AUTOMATIQUE */
/*
@media (prefers-color-scheme: dark) {

    :root {
        --bg: #121212;
        --bg2: #1e1e1e;
        --text: #eaeaea;
    }

}
*/

/* MOBILE */

@media screen and (max-width:900px) {

    #portable-section {
        display: flex;

    }

    .container-contact {
        padding-top: 0px;
        padding-bottom: 20px;

    }

    .explain {
        padding-top: 50px;

    }

    .contcont {
        padding-right: 20px;
        padding-left: 20px;
    }

    .new-menu-p {
        position: fixed;
        display: block;
        width: 100%;
        background-color: white;
        z-index: 10000;
        overflow: hidden;
    }

    .fornewmenup {
        justify-content: space-between;
        padding-top: 10px;
    }

    .getmenu-p {
        padding-right: 10px;
        padding-top: 5px;
    }

    .layout {
        grid-template-columns: 1fr;
    }

    .sidebar {
        order: 2;
    }



    /* GLOBAL */
    html {
        width: 100%;
        font-size: 14px;
    }

    .txth0 {
        font-size: 40px;
    }

    .txth1 {
        font-size: 30px;
    }

    .txth2 {
        font-size: 22px;
    }

    .txth3 {
        font-size: 18px;
    }

    /* MENU */
    .menu {
        display: none;
    }

    /*
    .menu {
        position: sticky;
        flex-direction: column;
        align-items: center;
    }

    .numerotelo {
        position: relative;
        top: -6px;
        margin-right: 0px;

    }

    .liens {
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }

    .liens-libres {
        flex-direction: column;
        gap: 10px;
    }
*/
    .liens-contact {
        margin-left: 0;
    }


    /* CONTAINERS */
    .container1,
    .container-contact {

        grid-template-columns: 1fr;
        width: 100%;
    }

    .container {
        grid-template-columns: 1fr;

    }

    /* SECTION IMAGE + TEXTE */
    .block-top {
        flex-direction: column;
        align-items: center;
    }

    .block-top img {
        width: 100%;
        max-width: 300px;
    }

    /* CARDS GRID */
    .card:nth-child(1) {
        padding-top: 10px;
        padding-bottom: 50px;
    }

    .forty {
        padding-top: 0px;
    }

    .pluiop {
        padding-top: 100px;
    }

    .entete {
        margin-top: 50px;
    }

    .trmobi {

        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-top: 50px;
    }

    .container2 {
        padding-top: 0;
        padding-bottom: 100px;

    }

    .container3:nth-child(1) {
        padding-top: 0;
    }

    .container3,
    .container4,
    .container5 {
        grid-template-columns: 1fr;
    }

    /* SQUARE CARDS */

    .intosquare {
        width: 90%;
        height: auto;
        font-size: 18px;
    }

    .intosquare-title {
        font-size: 35px;
    }

    /* IMAGES */
    img {
        max-width: 100%;
        height: auto;
    }

    /* INTRO */
    .introduce {
        height: auto;
        padding: 40px 20px;
    }

    .introduce-title {
        position: static;
        text-align: center;
    }

    /* FOOTER */
    #raccourcis {
        flex-direction: column;
        align-items: center;
    }

    .block-raccourcis {
        margin: 20px 0;
        align-items: center;
        text-align: center;
    }

    /* FORM */
    input[type=text],
    input[type=password],
    input[type=email],
    input[type=tel],
    select,
    textarea {
        width: 100%;
    }

    /* COOKIES */
    .get-cookies {
        display: none;
    }

    .select-choice-cookies,
    .powered-cookies,
    .cook1 {
        width: 100%;
        grid-template-columns: 1fr;
        text-align: center;
        color: black;
    }

    .saveCookies {
        width: 90%;
    }

    .saveCookies:nth-child(2) {
        margin: 5px 0px 5px 0px;
    }

    .select-choice-cookies {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 300px;
    }

    .logo-foot {
        background-color: black;
    }

    .reducelogofoot {
        margin-left: 20px;
        width: 90%;
        background-color: black;
        border: 10px black solid;
    }

    .logo-p img {
        width: 150px;
    }

    .inter-menu {
        position: fixed;
        display: block;
        top: 0;
        left: 100vw;
        width: 100vw;
        height: 100vh;
        background: var(--bg);
        padding-top: 80px;
        overflow-y: scroll;
        z-index: 1000;
        color: var(--text);
    }

    .choose-link {
        width: 100vw;
        background-color: rgb(240, 239, 239);
        border-radius: 4px;
        padding: 8px 0 8px 30px;
        margin-top: 3px;
    }

    .design-txt-p {
        font-family: 'roboto-light';
        font-size: 14px;
        margin: 2px;
        width: max-content;
    }

    .cbmgouv {
        position: relative;
        left: 30px;
        top: 10px;
    }

    .mitreow {

        flex-direction: column;
    }

    /****************************** CHECK MENU PORTABLE ************************************/
    input.menu-icon[type="checkbox"]:checked,
    input.menu-icon[type="checkbox"]:not(:checked) {
        position: absolute;
        left: -9999px;
    }


    .menu-icon:checked+label,
    .menu-icon:not(:checked)+label {
        position: relative;
        top: 8px;
        right: 5px;
        display: block;
        width: 30px;
        height: 30px;
        padding: 0;
        margin: 0;
        cursor: pointer;
        z-index: 10;
    }

    .menu-icon:checked+label:before,
    .menu-icon:not(:checked)+label:before {
        position: absolute;
        content: '';
        display: block;
        width: 30px;
        height: 20px;
        z-index: 20;
        top: 0;
        left: 0;
        border-top: 2px solid #3a86ff;
        border-bottom: 2px solid #3a86ff;
        transition: border-width 100ms 1500ms ease,
            top 100ms 1600ms cubic-bezier(0.23, 1, 0.32, 1),
            height 100ms 1600ms cubic-bezier(0.23, 1, 0.32, 1),
            background-color 200ms ease,
            transform 200ms cubic-bezier(0.23, 1, 0.32, 1);
    }

    .menu-icon:checked+label:after,
    .menu-icon:not(:checked)+label:after {
        position: absolute;
        content: '';
        display: block;
        width: 22px;
        height: 2px;
        z-index: 20;
        top: 10px;
        right: 4px;
        background-color: #3a86ff;
        margin-top: -1px;
        transition: width 100ms 1750ms ease,
            right 100ms 1750ms ease,
            margin-top 100ms ease,
            transform 200ms cubic-bezier(0.23, 1, 0.32, 1);
    }

    .menu-icon:checked+label:before {
        top: 10px;
        transform: rotate(45deg);
        height: 2px;
        background-color: #3a86ff;
        border-width: 0;
        transition: border-width 100ms 340ms ease,
            top 100ms 300ms cubic-bezier(0.23, 1, 0.32, 1),
            height 100ms 300ms cubic-bezier(0.23, 1, 0.32, 1),
            background-color 200ms 500ms ease,
            transform 200ms 1700ms cubic-bezier(0.23, 1, 0.32, 1);
    }

    .menu-icon:checked+label:after {
        width: 30px;
        margin-top: 0;
        right: 0;
        transform: rotate(-45deg);
        transition: width 100ms ease,
            right 100ms ease,
            margin-top 100ms 500ms ease,
            transform 200ms 1700ms cubic-bezier(0.23, 1, 0.32, 1);
    }

    .nav {
        position: fixed;
        top: 33px;
        right: 50px;
        display: block;
        width: 80px;
        height: 80px;
        padding: 0;
        margin: 0;
        z-index: 9;
        overflow: hidden;
        box-shadow: 0 8px 30px 0 rgba(0, 0, 0, 0.3);
        background-color: rgba(53, 55, 70, 1);
        /* #353746;*/
        animation: border-transform 7s linear infinite;
        transition: top 350ms 1100ms cubic-bezier(0.23, 1, 0.32, 1),
            right 350ms 1100ms cubic-bezier(0.23, 1, 0.32, 1),
            transform 250ms 1100ms ease,
            width 650ms 400ms cubic-bezier(0.23, 1, 0.32, 1),
            height 650ms 400ms cubic-bezier(0.23, 1, 0.32, 1),
            background-color 900ms ease-in-out;
        /* Ajout de la transition de couleur */
    }

    @keyframes border-transform {

        0%,
        100% {
            border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
        }

        14% {
            border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%;
        }

        28% {
            border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%;
        }

        42% {
            border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%;
        }

        56% {
            border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%;
        }

        70% {
            border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%;
        }

        84% {
            border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%;
        }
    }

    .menu-icon:checked~.nav {
        animation-play-state: paused;
        top: 50%;
        right: 50%;
        transform: translate(50%, -50%);
        background-color: rgb(21, 21, 21);

        width: 80%;
        height: 200%;
        transition: top 350ms 700ms cubic-bezier(0.23, 1, 0.32, 1),
            right 350ms 700ms cubic-bezier(0.23, 1, 0.32, 1),
            transform 250ms 700ms ease,
            width 750ms 1000ms cubic-bezier(0.23, 1, 0.32, 1),
            height 750ms 1000ms cubic-bezier(0.23, 1, 0.32, 1),
            background-color 900ms ease-in-out;
        /* Même transition ici pour la continuité */
    }

    .nav ul {
        position: absolute;
        top: 50%;
        left: 25%;
        display: block;
        width: 100%;
        padding: 0;
        margin: 0;
        z-index: 6;
        text-align: center;
        transform: translateY(-50%);
        list-style: none;
    }

    .nav ul li {
        position: relative;
        display: block;
        width: 100%;
        padding: 0;
        margin: 10px 0;

        list-style: none;
        pointer-events: none;
        opacity: 0;
        visibility: hidden;
        transform: translateY(30px);
        transition: all 250ms linear;
    }

    .nav ul li:nth-child(1) {
        transition-delay: 200ms;
    }

    .nav ul li:nth-child(2) {
        transition-delay: 150ms;
    }

    .nav ul li:nth-child(3) {
        transition-delay: 100ms;
    }

    .nav ul li:nth-child(4) {
        transition-delay: 50ms;
    }

    .nav ul li a {
        font-family: 'roboto-regular';
        font-size: 14px;

    }


    .menu-icon:checked~.nav ul li {
        pointer-events: auto;
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
        transition: opacity 350ms ease,
            transform 250ms ease;
    }

    .menu-icon:checked~.nav ul li:nth-child(1) {
        transition-delay: 1400ms;
    }

    .menu-icon:checked~.nav ul li:nth-child(2) {
        transition-delay: 1480ms;
    }

    .menu-icon:checked~.nav ul li:nth-child(3) {
        transition-delay: 1560ms;
    }

    .menu-icon:checked~.nav ul li:nth-child(4) {
        transition-delay: 1640ms;
    }

    /**************************************************************************************/
    .block-cookies {
        width: 100vw;
        height: 100vh;
    }
}