:root{
    --phi:0.618;
    --mphi:0.382;
    --mnhght:3em;
    /* Couleurs  */
    --mncolor:#060730;
    --fontclr:#000;
    /* Hauteur entre les lignes*/
    --lnhght: 1em;

    --text-small:    clamp(1rem, 2.5vw, 1.5rem);
    --text-normal:   clamp(0.8rem, 2.5vw, 2rem);
    --text-title:    clamp(1.3rem, 6vw, 3rem);
    --text-hero:     clamp(2.3rem, 7vw, 7rem);
    
}
@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot'); /* IE9 Compat Modes */
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('webfont.woff') format('woff'), /* Modern Browsers */
         /*url('OptimaModokiThai.ttf')  format('truetype'),  Safari, Android, iOS */
         url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}


:is(h1,h2,h3,h4,h5) { font-size: var(--text-title); }
p  { font-size: var(--text-normal); }

.bloc {
  opacity: 0;
  display: none;
  visibility: hidden;
  transition: opacity 0.5s ease-in-out, display 0.5s ease-in-out;  
}
.visible {
  opacity: 1;
  display: block;
  height: 100vh;
  visibility: visible;
}


.cacher-scroll {
  overflow-y: scroll;          /* zone défilable */
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* IE / Edge */
}

/* Chrome, Safari, Opera */
.cacher-scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
}

*{
    box-sizing:border-box;
    margin:0;
}
html, body {
    margin: 0;
    height: 100%;
/*
    font:

    1.2em/150% "Helvetica",
    "Arial",*/
    sans-serif;
    margin: 0 auto;
    /*max-width: 33em;*/
    box-sizing:border-box;
    background-color: #e2e4ec;
    color: black;
}

div{
    /*
    border:solid 1px red; 
    */
    min-width:7px;
    min-height:7px;    
}

/*
============================================================================================

                                        H E A D E R

============================================================================================
*/
.header{
    display:flex;
    flex-wrap: wrap;
    background-color: var(--mncolor);
    color: #FFF;
    height: 6em;
    padding: 0.4em 2vw 0.4em 5vw;
}
.navlogo{
    display:flex;
    justify-content: center;
    align-items: center;
}
.logo{
    display:flex;
    justify-content:center;
    height:1em;
}
.imagelogo{
    justify-content:center;
    margin:10px;
    width:100%;
    height: 2em;
}
.navlinks{
    display:flex;
    /*flex-direction:row;*/
    list-style-type: none;
    margin: 0;
    padding: 0;
    flex:1;
    justify-content:flex-end;
    flex-wrap: nowrap;
    align-content: center;
    height: 100%;
}

.cat {
    background-color: var(--mncolor);
    color: white;
    font-size: var(--text-normal);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 2.5em;
    padding: 0.5em 0.2em;
    border-radius: 10px;
    border: 1px solid var(--mncolor);
    a {
        color: white;
        text-decoration: none;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.cat:hover{
    border: 1px solid aliceblue;
    background-image: url("../img/responsive-blur.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
/*
li a {
    color: white;
    text-decoration: none;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
*/
    


/* 
============================================================================================

                                 m e n u   B U R G E R

============================================================================================
*/



#ci {
    display: none;
    position: absolute;
    top: -5em;
}

/*
============================================================================================

                             B I E N V E N U E   S E C T I O N

============================================================================================
*/

.contenu{
    display:flex;
    height: 90em;
    padding-bottom: 20em;
    /*justify-content:center;*/
    align-items:start;
    align-content:center;
    background-color: whitesmoke;
}
.masque-blanc{
    position: initial;
    z-index: 1;
    height: 7em;
    margin-top: -2.5em;
}
.contenu {
    background-image: url("../img/bienvenue.svg");
    background-size: 55%;
    background-repeat: no-repeat;
    background-attachment: inherit;
}
.main{
    margin-bottom:7em;
    flex:calc(var(--phi)*100%);
    height: 29vh;
    padding-top: 11%;
    padding-left: 8%;
    padding-right: 6%;
    padding-bottom: 7%;    
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: start;
    width: 100%;
}
.pentagone-responsive {
    width: 100%;
    height: auto;
  }
.main p, .main h2 {
    font-family: helvetica;
    color: black;
    /* margin-top: 1em; */
    margin-bottom: 0.5em;
}
.aside{
    flex:calc(var(--mphi)*100%);
    padding-top: 5%;
    padding-bottom: 7%;
    display: flex;
    flex-direction: column;
    align-items: initial;
    width: 100%;
    z-index: 0;
}

.ordre {
    margin: 2em;
    position: relative;
}
.o-un, .o-deux, .o-trois {
    position: absolute;
    width: 18vw;
    height: 11em;
    border-radius: 1.5em;
    border: solid 1px whitesmoke;
    background-color: white;
}
.o-image{
    width: 100%;
    height: auto;
    border-radius: 1.5em;
}
.o-un {
    top: 19vw;
    right: 23%;
}
.o-deux {
    top: 8vw;
    right: 13%;
}
.o-trois {
    top: 19vw;
    right: 3%;
}
.shape-container {
    width: 100%;
}



.m_idea {
    zoom: 429%;
    padding-top: 1em;
}



/*

FOOTER  &  TOP

*/

.slowpe {
    display: flex;
    justify-content: flex-end;
    width: 100vw;
    bottom: -1px;
    position: inherit;
    right: -2px;
    overflow-x: hidden;
}
.slowpe-img {
    width: 100%;
    flex: 1;
}

.top {
    position: fixed;
    z-index: 10;
    right: 0;
    bottom: 0;
    background-color: var(--mncolor);
    padding: 0.3em 0.8em 0.3em 0.8em;
    border-radius: 0.7em;
    margin: 1em;
    /*
    mix-blend-mode: color-dodge;
    */
    a {
        text-decoration: none;
        color: white;
        font-weight: bold;
    }
}
.contenu .top {
    mix-blend-mode: color-dodge;
}
.top:hover {
    pointer: hand;
}
.footer{
    position: fixed;
    display: none;
    bottom: 10em;
    overflow-x: hidden;
}
.ftr-in{
    display:flex;
    padding: 2% 0 2% 0;
    justify-content: center;
    background-color: var(--mncolor);
    color: white;
}
.footerbox {
    flex-shrink: 1;
    padding: 2% 5% 2% 5%;
}



/* 
============================================================================================
============================================================================================

            m e d i a   Q U E R I E S   -->   r e s p o n s i v e n e s s

============================================================================================
============================================================================================
*/
@media (width >= 70em) {
  /* Augmente la taille globale de la police d'écriture sur des écrans ou fenêtres plus grandes pour une meilleure
    lisibilité.
  body {
    font-size: 130%;
  }
    */
}
@media (max-width: 1445px) {
    .link2 {
        width: 30%;
    }
    .ci-bienvenu {
        padding: 3% 7%;
    }
    .contenu {
        background-image: none;
    }
    .main {
        padding: 3%;
        background-image: none;
        background-color: white;
        height: 29vh;
    }
    .aside {
        display: none;
        flex:1;
        order: 1;
        z-index: 10;
        padding: 0;
        img {
            width: 30%;
        }
    }
    .principal {
        margin-top: 8vw;
    }
}
@media (max-width: 1321px) {
    .main {
        padding-top: 3%;
    }
}
@media (max-width: 1289px) {
    .link2 {
        width: 36%;
    }
    .ci-bienvenu {
        padding-left: 4%;
        padding-right:4% ;
    }
}


@media (max-width: 1083px) {
    .ci-bienvenu {
        height: 45vw;
        /* background: url("../img/ci2.svg") -4px -124px/105% no-repeat border-box border-box scroll; */
        padding-top: 10em;
        h2 {
            min-width: 264px;
        }
        .cancelbreak {
            display: none;
        }
    }
    
    .navlinks > li {
        display: flex;
        justify-content: center;
        margin: 0;
        width: 100%;
        color: white;
    }
    .navlinks > li:not(:last-child) {
        border-bottom: 1px solid #444;
    }
    .contenu{
        flex-direction:column;
    }
    .main, .aside{
        padding-bottom: 20%;
        width: 100%;
    }
    .main {
        order: 2;
        z-index: 5;
        padding-top: 7%;
    }
    .principal{
        order: 3;
        z-index: 3;
    }

}