/***************************************
***************************************

CSS Marvelous Wombat 2026
"Portfolio" de Marine Karmowski, post-AI era.
Copie si tu veux, ça me fera plaisir.
J'ai commencé ce framework en 2018... je voulais 
en faire un gros site avec des livres interactifs.
J'ai fini par me dire que c'était le pire business plan 
et j'ai laissé tomber aussi mon layout, qui était quand même cool.
8 ans après j'me trouve bonne finalement. Donc prends en si tu veux.
Comme si ma job intéressais quelqu'un anyway ahaha 
(cry laughing in millenial despair)

***************************************
***************************************/

/****** SUMMARY ******/
/****** 
00/ Import marvelous typography
01/ Général / langues
02/ Header / Footer 
03/ Menus, navigation
04/ Sections le fun
05/ Traitement du texte TITRES
06/ Traitement du texte Paragraphes
07/ Traitement des images - GLOBAL
08/ RESPONSIVE BABE UwU 
******/

/****** COLORS ******/
/******  
Noir → 171E39
Blanc → ece8e5
Blanc plus clair → f0efea
Gris → F6F8FF
Gris plus gris → d9e0e6
Jaune → F1FF39
Jaune plus chaud → ffdd39
Bleu → 3854FF
Magenta → D98CFF
Vert → 00FF90
Vert plus doux et pastel → 3edd98

******/


/** 00 Import marvelous typography **/

    @import url('../styles/fonts/Boska/css/boska.css');/*so much beauty...*/
    @import url('../styles/fonts/Stardom/css/stardom.css');/*so much beauty...*/
    @import url('../styles/fonts/Satoshi/css/satoshi.css');/*so much beauty...*/

/*** 01 Général / langues ***/

    #chargement{
        width: 100vw;
        height: 100vh;
        position: fixed;
        z-index: -110;
        display: grid;
        align-items: center;
        align-content: center;
        justify-content: center;
        justify-items: center;
        opacity: 0;
        background-color: #3854FF;
        animation: chargement 3s linear;
        animation-iteration-count: 1;
    }
    #chargement img{
        width: 200px;
        margin: auto;
    }
    @keyframes chargement{
        0%{ background-color: #3854FF; opacity: 1; z-index: 110;}
        70%{ background-color: #3854FF; opacity: 1; z-index: 110; height: 100vh;}
        95%{ background-color: #ece8e5; width: 100vw; opacity: 1; z-index: 110;}
        100%{opacity: 0; z-index: -110; width: 100vw; height: 0;}
    }

    *{
        margin:0; 
        padding:0;
        font-size:102%;
        font-family: 'Satoshi-Medium', 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        box-sizing:border-box;
        color: #171E39;
        /* scroll-snap-type: block;  */
        scroll-snap-type: both proximity;
        scroll-behavior: smooth; 
    }
    body{ 
        background: url(../content/medias/bkg/grid.svg), #f0efea;
        background-position: center center;
        background-size: 5%;
    }

    ::selection, .tiq{ 
        background: #D98CFF; 
        color: #ece8e5;
    }
    ::selection{ 
        color: #ece8e5;
    }

    ::-webkit-scrollbar {
        width: 15px;
        border-left: 2px solid #171E39;
    }
    ::-webkit-scrollbar-thumb {
        background: #171E39; 
        border-radius:  0 10px 10px 0;
    }
    ::-webkit-scrollbar-thumb:hover {
        background: #D98CFF; 
    }

    .pannel::-webkit-scrollbar {
        width: 15px;
    }
    .pannel::-webkit-scrollbar-track {
        /* background: #3854FF; */
        background: linear-gradient(#3854FF, #171E39);
        border-radius: 0 10px 10px 0;
    }
    .pannel::-webkit-scrollbar-thumb {
        background: #00FF90; 
        border-radius: 0 10px 10px 0;
    }
    .pannel::-webkit-scrollbar-thumb:hover {
        background: #D98CFF; 
    }

    /* gestion des textes traduits inactifs :) */
    .invisible{
        display: none!important;
    }

    /*.tiq{color: #ece8e5;}*/

    hr{clear: both;}
    .exposition hr{ 
        border:none;        
        border-top: 50px solid #3854FF;
    }

    .clear{clear: both;}

    .qGCard:nth-child(odd) .cta{
        background-color: #ffdd39;
    }
    .qGCard:nth-child(odd) .cta:hover{
        background-color: #D98CFF;
    }
    .cta {
        border: 2px solid #171e39;
        background-color: #F1FF39;
        border-radius: 5px;
        width: 300px;
        margin: auto;
        height: 80px;
        display: block;
        align-content: center;
        align-items: center;
        text-align: center;
        transition: border-radius 0.2s linear, box-shadow 0.2s linear;
        /* 
            position: absolute;
            bottom: 30px;
            left: 28%;
            transform: translate(70%, 0px); 
        */
    }
    .cta:hover {
        background-color: #171E39;
        box-shadow: #F1FF39 10px 10px 0px;
        border-radius: 10px;
    }
    .cta:active {
        border-radius: 50px;
        box-shadow: #F1FF39 5px 5px 10px;
        transition: 0.05s ease-out!important;
    }

    .cta a{
        font-family: 'Satoshi-Bold';
        font-size: 1.5rem;
        text-decoration: none;
        color: #171E39;
    }
    .cta:hover a{
        color: #ece8e5;
    }


/*** LANGUE ***/    
    .lang_selection{ 
        height: 30px;
        text-align: right;
    }
    .lang_selection li{
        padding: 5px 2rem;
    }
    .header_elmts .lang_FR{
        color: #00FF90;
    }
    .header_elmts .lang_EN{
        color: #D98CFF;
    }
    

/*** 02 Header / Footer ***/

    header{
        position: relative;
        z-index: 101;
    }

    .cover{ 
        background: #171E39; 
        width: 100%; height: auto; 
        max-height: 800px; min-height: 50vh;
        position: absolute; top:0;
        z-index: -1;
    }

    .lang { 
        position: absolute; 
        top: 5px; right: 15px;
    }
    .lang a{ 
        color:white; 
        font-size: 12px;
    }


    #signature{ 
        background: white; 
        width: 100%; 
        overflow: hidden;
    }
    #signature img{ 
        width: 200px;
        height: auto;
        float: right;
        background: linear-gradient( #D98CFF, #171E39, #00FF90 ), #171E39;
    }

    footer{
        background: #171E39;
        min-height: 400px;
        border: 1px solid #ece8e5;
        border-right-color: #00FF90; 
        border-bottom-color: #00FF90;
    }
    footer .card{
        padding: 20px 30px 50px;
        max-width: 600px;
        margin: auto;
    }
    footer .preFoot{
        background: #f0efea;
        width: 100%;
        margin: 0;
        padding: 0;
    }
    .preFoot img{
        margin-top: 20px;
        margin-bottom: 20px;
    }
    footer h1{
        padding: 5px; 
        font-size: 14px; 
        font-style: italic; 
        border: none;
    }
    footer p {
        color: #F6F8FF!important;
        display: block; 
        margin-top: 10px; 
        text-align: left;
    }
    footer p::first-line{
        font-size: 14px; font-style: normal;
    }
    footer h2, 
    footer h3, 
    footer h4, 
    footer h5, 
    footer h6, 
    footer p{
        padding: 5px; 
        font-size: 10px; 
        font-style: italic; 
        border: none;
    }

    #toToButton{
        position: fixed;
        bottom: 5px;
        right: 5px;
        z-index: 1;
        width: 50px;
        height: 50px;
        border-radius: 30px 0 0 0;
        background: #00FF90;
        box-shadow: 5px 5px #171E39;
        color: #171E39;
    }
    #toToButton:hover{
        border-radius: 15px 0 0 0 !important;
        background: #D98CFF;
        box-shadow: 5px 5px #00FF90!important;
    }
    #toToButton:active{
        border-radius: 100% !important;
        background: #171E39;
        box-shadow: 5px 5px #00FF90!important;
    }
    #toToButton:active span{color: #D98CFF!important;}

    .button{
        border-radius: 50px;
        background-color: #00FF90;
        box-shadow: 5px 5px #171E39;
        color: #171E39;
        display: block;
        width: fit-content;
        padding: 1.2rem 2rem 1rem 2rem;
        font-size: 1rem;
        font-style: italic;
        font-weight: bold;
        margin: 1rem auto;
        text-decoration: none;
        transition: all 0.2s linear;
    }
    .button:hover{
        border-radius: 25px 5px 25px 5px;
        background-color: #D98CFF;
        box-shadow: 5px 5px #171E39;
    }
    .button:active{
        background-color: #171E39;
        box-shadow: 5px 5px #00FF90;
    }
    .button::before{
        content: "→";
        display: block;
        float: inline-start;
        margin-right: 10px;
        padding: 0 6px 0 0;
        transition: all 0.2s ease-in-out;
        border-right: 2px solid transparent;
        border-bottom: 3px solid transparent;
        border-top: 3px solid transparent;
    }
    .button:hover::before{
        color: #ece8e5;
        font-style: normal;
        transform: rotate(90deg);
        border-bottom: 3px solid #ece8e5;
        border-top: 3px solid #ece8e5;
    }
    .button::after{
        content: " ";
        display: block;
        width: 0%;
        height: 0px;
        transition: 0.2s all;
        border-bottom: 3px solid #ece8e5;
    }
    .button:hover::after{
        content: " ";
        width: 100%;
    }

    .logo{ 
        width: 150px; height: 150px; 
        padding: 10px; 
        margin: 0 auto;
        display: block;
    }
    .logo img{
        max-width: 50px; 
        margin: 0 auto;
    } 

    #menuLogo{
        display: none;
        max-width: 100px !important;
        padding: 0.5rem !important;
        float: left;
    }

    .socialIcons{
        width: fit-content; 
        margin: 0 auto;
        height: auto; 
    }
    .socialIcons li{ 
        padding: 15px;
    }
    .socialIcons li:hover{
        background: #171e39;
        border-radius: 20px;
    }
    .socialIcons img{
        width: 30px; 
        height: auto; 
    }

    .bandeau{
        padding: 20px 0; 
        margin: 0 auto;
        display: block;
    }


/*** 03 Menus, navigation ***/

    ul li{
        display: inline-block;
        width: auto;
        text-decoration: none;
        padding: 1rem 1rem 0;
    }

    /***** bandeau sélection langues *****/
        .header_elmts{
            background: #171E39;
        }
    
    /*********** Main menu et menu volant *************/
        .menu .main_menu, 
        .menu_fixed .main_menu{
            display: table;
            margin: 0 auto;
        }
        .menu li, 
        .menu_fixed li{
            transition: all ease-in 0.2s;
        }

    /***** main menu, celui de base *****/
        .menu{
            background: #3854FF;
            border-bottom: 2px solid #171e39;
        }
        .menu li:hover{
            background: #D98CFF;
        }
        .menu a{
            color: #ece8e5;
            text-decoration: none;
        }


    /***** Menu volant *****/
        .menu_fixed{
            background: #3edd98;
            position: fixed;
            z-index: 100;
            top: 0;
            width: 100%;
            border-bottom: 2px solid #171e39;
        }
        .menu_fixed li:hover{
            background: #D98CFF;
        }

        .menu_fixed a{
            text-decoration: none;
        }


    /***** menu pour les mobiles (responsive sous screen 800px width) *****/
        #menu_mobile{
            display: none;
            position: fixed;
            top: 0;
            border-radius: 5px;
            z-index: 1;
            background: #d98cffec;
            border-right: 2px solid #171e39;
            animation: menuMobile 60s linear infinite;
        }

        #menuContent{
            opacity: 0;
            width: 0; height: 0;
            transition: all 0.5s linear;
        }

        #menu_mobile .main_menu li{
            display: inherit;
            font-size: 1.5rem;
            line-height: 0.9em;
            padding: 1.25rem 1.5rem;
        }
        #menu_mobile .main_menu li:hover{
            background: #d98cff;
        }


        #menu_mobile .main_menu li:hover a{
            color: #ece8e5;
        }
        #menu_mobile .main_menu li a{
            text-decoration: none;
        }

        #menu_mobile img{
            width: 50px;
            height: 50px;
            padding: 0.5rem;
        }
        #menuInteraction_Open {
            text-align: left;  
        }        
        #menuInteraction_Close {
            text-align: right;  
            display: none;
        }

        .menu li:active, 
        .menu_fixed li:active, 
        #menu_mobile .main_menu li:active{
            background: #a88cff;
        }

        .main_menu li::after{
            content: " ";
            display: block;
            width: 0%;
            height: 0px;
            transition: 0.2s all;
            padding-top: 10px;
            border-bottom: 3px solid #ece8e5;
        }
        .main_menu li:hover::after{
            content: " ";
            width: 100%;
        }
        .menu_fixed li::after{
            border-color: #171E39;
        }

        @keyframes menuMobile {
            0% {background:#d98cffec;}
            25% {background: #3854FFec;}
            50% {background: #00FF90ec;}
            75% {background: #3854FFec;}
            100% {background: #d98cffec;}
        }

    /********* Navigation interne ********/
        .navIntern{
            display: grid;
            right: 1rem;
            bottom: 5rem;
            width: fit-content;
            position: absolute;
            z-index: 2;
            grid-template-columns: repeat(3, 1fr);
            align-content: center;
            justify-content: center;
            align-items: center;
            justify-items: center;
        }

        .nav_Arrows{
            width: 60px;
            height: 60px;
            align-content: center;
            margin: auto;
            border: 2px solid #171E39;
            display: block;
            text-align: center;
            text-decoration: none!important;
            font-size: 2rem;
            color: #ece8e5;
            transition: all 0.2s linear;
            box-shadow: 5px 5px #00FF90;
        }
        .nav_Arrows:hover{
            cursor: pointer;
            background: #171E39;
            color: #00FF90;
            box-shadow: 5px 5px #D98CFF;
            animation: 10s nav_Arrows_Anim ease-in-out;
            animation-iteration-count: 1;
        }
        .nav_Arrows:active{
            background: #00FF90;
            box-shadow: 1px 1px #D98CFF;
        }
        .navIntern img{
            grid-area: 2 / 2 / 3 / 3;
            background: #ece8e5;
            width: 60px;
            height: 60px;
        }

        .navIntern a img{ 
            background-color:inherit;
            width: 50px; 
            height:50px; 
            border-radius: 10px;
        }
        .navIntern a span{ 
            color: #ece8e5!important;
        }
       
        .navIntern a img, 
        .navIntern a:hover span{
            display: none;
        }
        .navIntern a span, 
        .navIntern a:hover img{
            display: inline-block;
        }

        .arrow_Top, .arrow_Down{
            background: #3854FF;
        }
        .arrow_Left, .arrow_Right{
            background: #4c52fe;
        }
        .arrow_Top{
            border-radius: 20% 20% 0 0!important;
            grid-area: 1 / 2 / 2 / 3;
        }
        .arrow_Left{
            border-radius: 20% 0 0 20%!important;
            grid-area: 2 / 1 / 3 / 2;
        }
        .arrow_Right{
            border-radius: 0 20% 20% 0!important;
            grid-area: 2 / 3 / 3 / 4;
        }
        .arrow_Down{
            border-radius: 0 0 20% 20%!important;
            grid-area: 3 / 2 / 4 / 3;
        }
        .arrowInactive, 
        .arrowInactive:hover, 
        .arrowInactive:active{
            background: #ece8e5!important;
            box-shadow: 0px 2px #171E39;
            color: #171E39;
        }

        .arrow_Top:hover, 
        .arrow_Down:hover{
            background: #D98CFF;
            box-shadow: 5px 5px #F1FF39;
        }
        .nav_Arrows:active, 
        .arrow_Top:active, 
        .arrow_Down:active{
            background: #00FF90;
            box-shadow: 1px 1px #D98CFF;
        }

        .marketing nav .nav_Arrows{
            border-radius: 100%!important;
        }

        @keyframes nav_Arrows_Anim{
            0%{background: linearGradient(#3854FF,#3854FF);}
            75%{background: linearGradient(#3854FF,#171E39);}
            100%{background: linearGradient(#171E39 ,#171E39);}
        }

/***** 04 Sections le fun *******/

    .litterature, 
    .footer{
        background: #ece8e5;
        margin: 40px auto 0;
        width: 100%;
    }
    .litterature{
        max-width:1024px; overflow: hidden;
    }

    .marketing{
        width: 100%;
        min-height: 50vh;
        overflow: hidden;    
        padding: 2%;
        background: #3854ff;
        align-content: center;
    }
    .marketing section{
        border: 0 solid #f0efea;
        border-radius: 20px;
        width: 100%;
        padding-top: 50px;
    }

    .marketing h1{
        font-family: 'Boska-Bold', Georgia, 'Times New Roman', Times, serif!important;
        font-size: 10rem;
        line-height: 0.7em;
        padding: 0 100px 100px 100px;
        overflow-wrap: anywhere;
    }
    .marketing h2{
        font-size: 2.1rem;
        line-height: 1em;
        margin: -15px auto 0 auto;
        color: #F6F8FF;
        font-family: 'Satoshi-Light';
        padding: 0 0 100px;
    }

    #exposition_stupidSoftwares .navIntern{
        bottom: 7rem;
        right: 5rem;
        grid-template-columns: repeat(1, 1fr);
    }


    #quickGallery{
        position: relative;
        width: 100%;
        /* min-height: 100vh; */
        padding: 20px;
        display: grid;
        justify-content: stretch;
        align-items: stretch;
        align-content: start;
        grid-template: unset;
        grid-auto-flow: dense;
        gap: 1rem;
        grid-template-columns: 1fr 1fr 1fr;
    }
    .qGCard{
        position: relative;
        height: 400px;
        padding: 20px;
        /* border: 1px solid #171E39; */
        /* border-radius: 20px; */
        align-content: center;
        transition: all ease-in-out 1s;
        background-position: center center;
    }
    .qGCard h2{
        font-size: 1.5rem;
        font-family: 'Satoshi-Light';
        background: white;
        margin: 0.5rem auto 1rem auto;
        line-height: 1em;
        max-width: 400px;
        padding: 15px;
        border-radius: 7px;
        border: 2px solid #171e39;
        opacity: 0.1;
    }

    .qGCard:hover{
        animation: backgroundMove 20s linear infinite;
    }
    .qGCard:hover h2{opacity:1!important;}

    @keyframes backgroundMove{
        0%{ background-position: center;}
        55%{ background-position: left;}
        100%{ background-position: center;}
    }

    .exposition{
        height: 100vh;
        margin: 3rem 0;
        overflow: hidden;
        position: relative;
        align-content: center;
        animation: revealTitres ease-out both;
        animation-timeline: view();
        animation-range: cover -20% contain 30%;
    }
    .exposition::after{
        content: "";
        display: block;
        position: absolute;
        width: 2%;
        height: 100vh;
        background: #a88cff;
        border-radius: 0 50px 50px 0;
        right: 0;
        top: 0;
    }

    .pannel:first-of-type {
        display: grid;
        align-items: center;
        overflow: hidden;
        border-color: white;
        border: none;
        justify-content: center;
        align-content: center;
    }
    .pannel:first-of-type h1{
        font-family: 'Boska-Black';
        font-size: 8rem;
        color: #171e39;
        /* animation: revealTitres ease-out; */
    }
    .pannel:first-of-type img{
        width: 600px;
        height: 160px;
        margin-bottom: -52px;
    }

    @keyframes revealTitres{
        from{
            opacity: 0;
            translate: -100% 0;
        }
        to{
            opacity: 1;
            translate: 0% 0;
        }
    }

    .exposition img.max30, 
    .exposition img.max20, 
    .exposition img.max10, 
    .exposition div.max30, 
    .exposition div.max20, 
    .exposition div.max10
    {
        width: auto;
        max-width: inherit;
    }
    
    /* .exposition::after {
        background: linear-gradient(90deg, #ece8e500, #f0efea);
        content: "";
        display: block;
        width: 100px;
        height: stretch;
        position: absolute;
        right: -10px;
        top: 0;
    } */

    video{
        width: 100%;
    }

    .viewer{
        width: 100%;
        height: auto;
        position: absolute;
        top: 100px;
        /*  */
        border-radius: 50px;
        transition: all 0.2s cubic-bezier(0.62, 0, 0, 1.24);
        /*  */
        display: grid;
        grid-auto-flow: column;
        /* grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 3fr 1fr; */
        grid-column-gap: 5%; /** ne pas toucher, ou penser à modifier la valeur dans le JS! **/
        grid-row-gap: 0px;
        /*  */
        align-items: center;
        justify-items: start;
        justify-content: start;
        align-content: center;
    }

    .pannel{
        border: 1px solid #171E39;
        border-radius: 18px;
        overflow-y: scroll;
        overflow-x: hidden;
        width: 1200px;
        height: 800px;
        transition: all 0.5s ease-in-out;

        /* display: grid;
        grid-template-columns: 1fr 2fr;
        grid-template-rows: 1fr;
        grid-column-gap: 1rem;
        grid-row-gap: 0px; */

    }

    /* .viewer .pannel:nth-of-type(1){
        background-color: #D98CFF;
    }
    .viewer .pannel:nth-of-type(2){
        background-color: #0b5fdd;
    }
    .viewer .pannel:nth-of-type(3){
        background-color: #a6ff00;
    }
    .viewer .pannel:nth-of-type(4){
        background-color: #ff0037;
    } */
    .cartel{
        display:grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
        align-content: stretch;
        justify-content: stretch;
        justify-items: center;
        align-items: start;
    }
    .cartel h1{
        color:#3854FF;
    }
    .cartel h1, .cartel h2{
        margin: 1rem auto;
    }
    .cartel h1,
    .cartel h2,
    .cartel p{
        width: 100%;
        max-width: 600px;
    }
    .titres *{
        margin-bottom: 0!important;
    }
    .titres *:nth-child(even){
        margin-top: 0.25rem!important;
    } 
    .cartel p{
        background: #ece8e5;
        padding: 3rem;
        border-radius: 15px;
    }
    .cartel img{
        width: 100%;
    }

    .valuable{
        /* margin: 0 2em 2em 0; */
        max-width: fit-content;
        background: #3edd98;
        border-top: 5px solid #171E39;
        padding: 2rem;
        border-radius: 0 0 20px 20px;
    } 
    .valuable p{
        font-size: 1.5rem;
        line-height: inherit;
        font-weight: bold;
        text-align: left;
        /* max-width: 475px; */
        padding: 2rem;
        background: #ece8e5;
        border-radius: 15px;
    }
    .valuable a:hover{
        color: #3854FF;
    }

    .projectPics{
        background:rgb(61 72 83 / 8%);
        display: grid;
        gap: 0.25rem;
        align-content: center;
        align-items: start;
        justify-items: center;
        justify-content: center;
    }
    

    .grid_4cols{
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
    .grid_42cols{
        grid-template-columns: 2fr 1fr 1fr 1fr;
    }
    .grid_3cols{
        grid-template-columns: 1fr 1fr 1fr;
    }
    .grid_32cols{
        grid-template-columns: 2fr 1fr 1fr;
    }
    .grid_2cols{
        grid-template-columns: 1fr 1fr;
    }
    .grid_22cols{
        grid-template-columns: 2fr 1fr;
    }
    .grid_1cols{
        grid-template-columns: 1fr;
    }

    .projectPics img, .projectPics video{
        width: 100%;
        /* max-width: 1000px; */
        height: auto;
        border-radius: 10px;
    }    

    

/*** 05 Traitement du texte TITRES ***/
    h1, h2, h3{
        text-align:center;
        padding: 1%; 
        width:100%;
        line-height: 0.9em;
    }

    h1{ 
        font-size:3rem; 
        text-shadow: 3px 2px white; /*border-color: #00ffcc;*/
    }

    h2{ 
        font-size:2.5rem; /*border-color: #ff00ff;*/
    }

    h3{ 
        font-size:2rem; /*border-color: #fcff00;*/
    }

    h4{
        text-align: center;
        font-size: 1.5rem; 
        font-style: italic;
    }

    .numeroH{
        border: 4px solid;
        display: block;
        width: 90px;
        border-radius: 100%;
        height: 90px;
        text-align: center;
        line-height: 1em;
        margin: 0 0 0 -20px !important;
    }

    .litterature h1, 
    .litterature h2, 
    .litterature h3{
        overflow:hidden;
        text-align:center;
        padding: 1%; width:100%; 
        margin-bottom: 0.5rem!important;
        min-height:1.5rem; clear:both;
        border-left:0.4rem solid #171E39;
        background: #ece8e5; position: relative; z-index: 4;
    }

/***** 06 Traitement du texte paragraphes *****/

    p{/*général*/
        overflow:hidden;
        width:100%;
        display: block;
        margin: 0 auto 4%;
        padding: 0 3% 0; 
        max-width: 800px;
        font-size:1rem;
        line-height: 1.5em;
        letter-spacing:0.05rem;
        text-align: justify;
    }

    .p-tsd{/*standard = général + color*/
        color: #171E39!important;
    }

    .p-bigHype{/*not enough hype to be a title though*/
        font-size: 3rem;
        font-family: 'Satoshi-Black';
        line-height: 1.2em !important;
        padding: 1rem 1rem 0 !important;
        max-width: 710px !important;
        margin: auto !important;
    }
    .p-bigHype span{/*not enough hype to be a title though*/
        
        color:#D98CFF;
    }
    .p-bigHype em{/*not enough hype to be a title though*/
        font-family: 'Satoshi-BlackItalic';
        color:#D98CFF;
    }
    .p-bigHypeAlt{
        background: none;
        font-size: 3.5rem;
        font-family: 'Boska-Black';
        padding: 1rem;
        text-align: left;
        line-height: 1em;
        color: #3854ff;
    }

    .txtAlignCenter{
        text-align: center!important;
    }

    .txtAlignLeft{
        text-align: left!important;
    }

    .txtAlignRight{
        text-align: right!important;
    }

    blockquote{/*cute « » for cuties */
        clear: both;
        display: block;
        font-size: 1.1rem;
        font-style: italic;
        margin: -20px auto 20px;
        max-width: 40rem;
        padding: 20px;
        border: none;
        /*text-indent: -0.7rem;*/
    }
    blockquote::before{ content: "« "; }
    blockquote::after{ content: " »"; }
    blockquote::before, blockquote::after{ 
        color: #00FF90; 
        text-shadow: 1px 1px 0px white;
    }

    .italic{font-style:italic;}

    .legend::after{
        content:"↵"; 
        margin-left: 10px;
    }
    .legend, 
    .didascalie{
        overflow:hidden;
        width:100%;
        max-width: 100%;
        font-size:12px;
        font-style: italic;
        margin: -38px 0 20px;
        padding:10px;
        text-align:right;
        border-bottom: 1px dotted #ece8e5;
    }
    .didascalie, 
    .didascalie p{
        border: none!important;
    }

    .misEnValeur{
        background: #ece8e5;
        margin: 0 1rem 1rem 0!important;
        overflow: inherit!important;
        height: auto!important;
        border-top: 2px solid #171E39;
        border-right: 1px solid #00FF90;
        align-content: center;
    }
    .misEnValeur p{
        margin: 0 0 20px;
        padding: 5%;
        max-width: 100%;
        letter-spacing: 0.05rem;
        line-height: 1.5em;
        text-align: left;
        color: #4c52fe;
        text-shadow: 1px 1px 0px white;
    }
    .misEnValeur + div {
        padding: 5%;
        text-align: justify; 
    }
    .misEnValeur + div > p{
        display: contents!important;
    }

    .tiq{
        padding: 5px 8px;
        margin: 20px auto;
        width: auto; max-width: fit-content;
        text-align: center;
    }

    #fin{
        width: 200px;
        font-size: 2.5rem;
        margin: 0 auto;
        padding-bottom: 50px;
        text-align: center;
        text-transform: uppercase;
    }

/*** 07 Traitement des images - GLOBAL ***/

    .illus{
        margin-bottom: 4%;
        overflow: hidden;
    }

    .f-right{
        float: right!important;
    }
    .intext{ 
        margin: 0.3em 1em 0 -1.65em !important;
    }
    .bckImg{
        background-attachment: fixed!important;
        background-size: cover!important;
        background-position: top center!important;
    }

    /**************
    Attention! Lexique

    Je me suis donné su mal pour que mon systeme soit lisible
    et dans les faits c'est pas pire. 

    Mais au cas où, voici le mémo: 
        → max = 100% de la largeur du bloc
        → large = 75% de la largeur du bloc
        → demi = 50% de la largeur du bloc
        → encart = 25% de la largeur du bloc
    Pour les 30, 20, et 10 ensuite
        → 30 = 480px de hauteur (30em)
        → 20 = 320px (20em)
        → 10 = 160px (10em)

    Voilà!
    ***************/

    .max30,.max20,.max10,
    .large30,.large20,.large10,
    .demi30,.demi20,.demi10,
    .encart30,.encart20,.encart10{
        display:block; overflow:hidden;
        margin:0; padding:0;
        float:left;
        object-fit: cover;
        position:relative;
        /*z-index:4;*/
    }

    img.max30 , img.max20 , img.max10, div.max30 , div.max20 , div.max10{
        width:100%; min-width: 480px;
    }/*100%*/
    img.large30, img.large20, img.large10, div.large30, div.large20, div.large10{
        width:75%; min-width: 360px;
    }/*75%*/
    img.demi30, img.demi20, img.demi10, div.demi30, div.demi20, div.demi10{
        width:50%; min-width: 240px;
    }/*50%*/
    img.encart30, img.encart20, img.encart10, div.encart30, div.encart20, div.encart10{
        width:25%; min-width: 120px;
    }/*25%*/

    img.max30,  img.large30,  img.demi30,  img.encart30, div.max30,  div.large30,  div.demi30,  div.encart30{
        height:480px;
    }/*30em*/
    img.max20,  img.large20,  img.demi20,  img.encart20, div.max20,  div.large20,  div.demi20,  div.encart20{
        height:320px;
    }/*20em*/
    img.max10,  img.large10,  img.demi10,  img.encart10, div.max10,  div.large10,  div.demi10,  div.encart10{
        height:160px;
    }/*10em*/

/********* 08 RESPONSIVE BABE UwU  ***********/
/* .pannel{width:1100px;} */
    @media screen and (max-width: 1240px){
        .pannel{
            width:1100px;
            /* height: 490px; */
        }
    }

    @media screen and (max-width: 1200px){
        #quickGallery{
            grid-template-columns: 1fr 1fr;
        }
        .misEnValeur{ margin: inherit!important;}
    }

    @media screen and (max-width: 1120px){
        .pannel{width:1000px;}
    }

    @media screen and (max-width: 1020px){
        .pannel{width:900px;}
    }

    @media (max-width: 960px){/* menu haut pied de page*/
        .menu, .menu_fixed{
            display: none;
        }
        #menu_mobile{
            display: block;
        }
        #quickGallery{
            grid-template-columns: auto;
        }
        .viewer{ top:10px;}
        .pannel{
            width:780px;
            /* height: 880px; */
        }

        .grid_3cols, .grid_4cols{
            grid-template-columns: 1fr 1fr!important;
        }
        .grid_32cols, .grid_42cols{
            grid-template-columns: 2fr 1fr!important;
        }
    }

    @media screen and (max-width: 780px) and (orientation: portrait){
        .exposition{ height: 100vh!important;}
        .viewer{top: 25px!important;}
        .pannel{height: 560px!important;}
        .navIntern {
            bottom: -15em!important;
            position: relative!important;
            margin: 0 auto!important;
        }
        .nav_Arrows{
            width: 40px;
            height: 40px;
            font-size: 1rem;
        }
        .navIntern img{
            width: 40px;
            height: 40px;
        }
        .navIntern a img{ 
            width: 30px; 
            height:30px; 
        }

        #quickGallery + .exposition {
            height: 400px !important;
        }
        #quickGallery + .exposition nav {
            bottom: -10rem !important;
        }
    }

    @media screen and (max-width: 780px){
        *{font-size: 100%;}
        .cartel p{ font-size: 1rem;}
        .valuable p{font-size: 1rem;}
        
        #quickGallery{
            padding: 0;
        }
        #quickGallery .qGCard{ padding: 20px 0;}
        /* .viewer{top: 50px;} */
        .pannel {
            width: 700px;
            /* height: 800px; */
        }
        #quickGallery .navIntern{
            position: static!important;
            margin: 0 auto 1rem!important;
        }
        .navIntern {
            right: 0;
            bottom: -20rem;
            position: relative;
            margin: 3rem auto 0;
        }
        .grid_2cols, .grid_22cols,
        .grid_3cols, .grid_32cols, 
        .grid_4cols, .grid_42cols{
            grid-template-columns: 1fr!important;
        }
        .gridException{ grid-template-columns: 1fr 1fr 1fr 1fr!important;}

        .cartel{
            grid-template-columns: 1fr;
        }
        .cartel h1 {
            margin: 1em auto 0;
        }
        .cartel h2 {
            margin: inherit;
        }
        .cartel p{
            padding: 2rem 1rem;
            font-size: 1rem;
            text-align: left;
        }
        .valuable{
            /* margin: auto auto 1em auto; */
            padding: 1.5rem;
        }

        .exposition {
            margin: 1rem 0;
            overflow-y: visible;
        }

        footer h2, footer h3, 
        footer h4, footer h5, 
        footer h6, footer p {
            font-size: 1rem;
        }

        .misEnValeur{
            margin: inherit !important;
            max-width: inherit;
        }
        .marketing h1{
            font-size: 5rem;
            padding: 0 0 100px 0;
        }

        .socialIcons li {
            padding: 1rem;
        }
        .socialIcons img {
            width: 50px;
        }
        .pannel:first-of-type h1 {
            font-size: 4rem;
            word-break: break-word;
            word-wrap: break-word;
        }
    }

    @media screen and (max-width: 480px){
        #quickGallery{
            padding: 0;
        }
        .pannel {

            width: 400px;
            /* height: 600px; */
            /* overflow-x: hidden; */
        }
        .exposition{
            overflow: hidden;
        }
        .viewer {
            top: 0;
            align-items: start;
            justify-items: start;
            justify-content: start;
            align-content: start;
        }
        .marketing h2{
            font-size: 1.6rem;
            line-height: 1.25em;
        }

        /* .navIntern {
            right: 0;
            bottom: -20rem;
            position: relative;
            margin: 3em auto 0;
        } */

        #iconesPatroByrinthe {
            grid-template-columns: 1fr 1fr 1fr !important;
        }
        .misEnValeur{
            min-width: auto!important;
        }
    }
    
    @media screen and (max-width: 480px){
        .pannel {
            width: 340px;
        }
    }
            
    
    @media screen and (height >= 1000px){
        .pannel{
            height: 900px; 
        }
    }
    @media screen and (height <= 900px){
        .viewer{
            top: 80px;
        }
        .pannel{
            height: 740px; 
        }
    }
    @media screen and (height <= 820px){
        .pannel{
            height: 640px; 
        }
    }
    @media screen and (height <= 700px){
        .pannel{
            height: 520px; 
        }
    }
    @media screen and (height <= 600px){
        .pannel{
            height: 480px; 
        }
    }