/* i.multireflex.eu — index 404 / portail
   Base visuelle : Codrops "Grid to fullscreen" (MIT) */

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

:root {
    --bannerh: 9.7rem;
    --color-text: #000;
    --color-bg: #cddff7;
    --color-link: #990033;
    --color-link-hover: #007abc;
}

html { -webkit-text-size-adjust: 100%; }
main, nav, header, section { display: block; }
img { border: 0; }
button { font: inherit; cursor: pointer; }

body {
    margin: 0;
    min-height: 100vh;
    font-family: "Niramit", Arial, sans-serif;
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: scroll;
    overflow-x: hidden;
}
body.fd-tools {
    background-color: var(--color-bg);
    background-image: url(../imgs/fondo-tools.jpg);
    background-repeat: repeat;
}

/* Loader */
.js .loading::before {
    content: '';
    position: fixed;
    z-index: 100000;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: var(--color-bg);
}
.js .loading::after {
    content: '';
    position: fixed;
    z-index: 100000;
    top: 50%; left: 50%;
    width: 60px; height: 60px;
    margin: -30px 0 0 -30px;
    pointer-events: none;
    border-radius: 50%;
    opacity: .4;
    background: var(--color-link);
    animation: loaderAnim .7s linear infinite alternate forwards;
}
@keyframes loaderAnim { to { opacity: 1; transform: scale3d(.5, .5, 1); } }

a { text-decoration: none; color: var(--color-link); outline: none; }
a:hover, a:focus { color: var(--color-link-hover); }
button:focus { outline: none; }

.hidden { position: absolute; overflow: hidden; width: 0; height: 0; pointer-events: none; }

.icon { display: block; width: 8em; height: 4em; margin: 0 auto; fill: #990033; }

main { position: relative; width: 100%; }

/* Titre du site (bas droite) */
.frame {
    position: fixed;
    display: grid;
    align-content: end;
    justify-items: end;
    height: 100vh;
    width: 100%;
    padding: 2rem;
    pointer-events: none;
}
.codrops-header { position: relative; z-index: 100; text-align: right; }
.codrops-header__title { font-size: 1rem; line-height: 1; margin: 0 0 .75rem; }

/* Bandeau haut */
.menutop {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: var(--bannerh);
    padding: .6rem 1rem;
    background: #990033bf;
    transition: all 1s cubic-bezier(1, 0, 0, 1);
}
.menutop h2 { font-size: 5.5rem; line-height: .95; margin: 0; color: #fff; }
.menutop p { font-size: 1.6rem; line-height: 1.2; margin: .4rem 0 0; color: #fff; }
.menutop__social { position: absolute; right: 1rem; bottom: .6rem; display: flex; gap: .5rem; }
.menutop__item { pointer-events: auto; display: block; }
.menutop__item img { display: block; }
.menu--closed .menutop { top: -500px; transition: all 1s cubic-bezier(1, 0, 0, 1); }

/* Menu */
.menu {
    position: fixed;
    top: var(--bannerh);
    left: 0;
    width: 100%;
    height: calc(100% - var(--bannerh));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}
.menu__item { margin: .2rem 0; flex-wrap: nowrap; justify-content: flex-start; }
.menu--closed .menu__item { pointer-events: none; display: none; }
.menu__item-number { display: none; }
.menu__item-textwrap { position: relative; overflow: hidden; line-height: 1.2; margin: .6rem 0 0; display: block; }
.menu__item-text {
    display: inline-block;
    font-family: "Anton", Arial, sans-serif;
    font-size: 8vh;
    letter-spacing: 4px;
    text-transform: uppercase;
    padding: 0 1rem;
    cursor: pointer;
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 2px #990033;
}
.menu__item--current .menu__item-text {
    color: #007abc;
    -webkit-text-fill-color: #007abc;
    -webkit-text-stroke: 2px transparent;
}
/* « explorer » : collé au titre, plus grand, soulignement sur toute la largeur du titre */
.menu__item-link {
    display: block;
    margin: -.15rem 1rem 0;
    padding-bottom: .15rem;
    border-bottom: 3px solid currentColor;
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1.2;
    text-align: left;
    text-transform: lowercase;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
}
.menu__item--current .menu__item-link { pointer-events: auto; }

/* Grilles */
.gridwrap {
    display: grid;
    max-width: 1300px;
    margin: 0 auto;
    grid-template-columns: 100%;
    grid-template-rows: 1.75rem calc(100% - 1.75rem);
    grid-gap: 3rem;
    position: relative;
    pointer-events: none;
    z-index: 10003;
}
.gridback {
    position: absolute;
    background: none;
    border: 0;
    margin: 0;
    padding: 0;
    color: #fff;
    opacity: 0;
    z-index: 10005;
}
.gridback:hover .icon { fill: var(--color-link-hover); }
.grid--open ~ .gridback { pointer-events: auto; }

.grid {
    grid-area: 2 / 1 / 3 / 2;
    --gridgap: 3vw;
    --gridwidth: 100%;
    --gridheight: calc(100vh - var(--bannerh));
    display: grid;
    width: var(--gridwidth);
    height: var(--gridheight);
    grid-template-rows: repeat(10, calc(var(--gridheight) / 10 - var(--gridgap)));
    grid-template-columns: repeat(10, calc(var(--gridwidth) / 10 - var(--gridgap)));
    grid-gap: var(--gridgap);
    align-content: center;
    justify-content: center;
}
.grid__item {
    opacity: 0;
    position: relative;
    padding-bottom: 6.2rem;              /* place réservée à la légende */
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-origin: content-box;
    background-size: contain;
    z-index: 10002;
}
.grid--open .grid__item { pointer-events: auto; opacity: 1 !important; }
.grid__item a {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    display: block;
    z-index: 10003;
    cursor: pointer;
    pointer-events: all;
}

/* Flottement léger des vignettes tant que la grille est fermée */
@keyframes mfxFloat {
    0%   { translate: 0 0; }
    33%  { translate: 14px -18px; }
    66%  { translate: -16px -8px; }
    100% { translate: 0 0; }
}
.grid:not(.grid--open) .grid__item { animation: mfxFloat 9s ease-in-out infinite; }
.grid:not(.grid--open) .grid__item:nth-child(2n)   { animation-duration: 11s; animation-delay: -3s; }
.grid:not(.grid--open) .grid__item:nth-child(3n)   { animation-duration: 13s; animation-delay: -6s; animation-direction: reverse; }
.grid:not(.grid--open) .grid__item:nth-child(5n)   { animation-duration: 10s; animation-delay: -1s; }
@media (prefers-reduced-motion: reduce) { .grid .grid__item { animation: none !important; } }

/* Légende de tuile */
.grid__cap {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    display: block;
    padding: .55rem .8rem .65rem;
    color: #fff;
    background: rgba(153, 0, 51, .86);
    line-height: 1.2;
    opacity: 0;
    transition: background .3s, opacity .6s;
}
.grid--open .grid__cap { opacity: 1; }
.grid__cap strong { display: block; font-size: 1.15rem; font-weight: 700; }
.grid__cap span { display: block; margin-top: .2rem; font-size: .9rem; font-weight: 400; }
.grid__item a:hover .grid__cap, .grid__item a:focus .grid__cap { background: rgba(0, 122, 188, .92); color: #fff; }

/* 5 tuiles (3 + 2) : des cercles de taille proche */
.grid--l5 .grid__item:nth-child(1) { grid-area: 1 / 1 / 6 / 4; }
.grid--l5 .grid__item:nth-child(2) { grid-area: 1 / 4 / 6 / 8; }
.grid--l5 .grid__item:nth-child(3) { grid-area: 1 / 8 / 6 / 11; }
.grid--l5 .grid__item:nth-child(4) { grid-area: 6 / 2 / 11 / 6; }
.grid--l5 .grid__item:nth-child(5) { grid-area: 6 / 6 / 11 / 10; }

/* 3 tuiles — variante a : alignées */
.grid--l3a .grid__item:nth-child(1) { grid-area: 3 / 1 / 9 / 4; }
.grid--l3a .grid__item:nth-child(2) { grid-area: 3 / 4 / 9 / 8; }
.grid--l3a .grid__item:nth-child(3) { grid-area: 3 / 8 / 9 / 11; }

/* 3 tuiles — variante b : en quinconce */
.grid--l3b .grid__item:nth-child(1) { grid-area: 1 / 1 / 7 / 4; }
.grid--l3b .grid__item:nth-child(2) { grid-area: 5 / 4 / 11 / 8; }
.grid--l3b .grid__item:nth-child(3) { grid-area: 1 / 8 / 7 / 11; }

/* Nombre de tuiles différent de 3 ou 5 : grille simple */
.grid--auto {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: none;
    grid-auto-rows: calc(var(--gridheight) / 2 - var(--gridgap));
    align-content: start;
}

/* Contenus */
.content { position: relative; display: flex; justify-content: center; align-items: center; margin: 0 auto; min-height: 60vh; text-align: left; }
.content__item { font-size: 1.5rem; padding: 10vh 1rem; max-width: 900px; }
.js .content__item { position: absolute; top: 0; opacity: 0; pointer-events: none; }
.js .content__item--current { position: relative; opacity: 1; pointer-events: auto; }
.page--preview { position: relative; overflow: hidden; height: 100vh; z-index: 1; }

/* Mobile */
@media (max-width: 700px) {
    :root { --bannerh: 8.2rem; }
    .menutop h2 { font-size: 3rem; }
    .menutop p { font-size: 1rem; }
    .menutop__social { bottom: .4rem; }
    .menutop__social img { width: 28px; height: 28px; }
    .codrops-header__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .menu__item { pointer-events: auto; margin: 10px; }
    .menu__item-textwrap { margin: 0; }
    .menu__item-text { font-size: 5.4vh; }
    .menu__item-link { font-size: 1.2rem; }
    .content__item { font-size: 1.15rem; padding: 1.5rem; }
    .icon { width: 5em; height: 3em; }

    .grid {
        --gridgap: 4vw;
        height: auto;
        grid-template-columns: 1fr;
        grid-template-rows: none;
        grid-auto-rows: 46vh;
        align-content: start;
        padding: 0 4vw;
    }
    .grid .grid__item { grid-area: auto !important; }
}