@import 'fonts.css';

/* [--------------------] */
/*           BASE         */
/* [--------------------] */

*{
    box-sizing:border-box;
    transition: .5s color, .5s background-color;
}

::selection {
  color: var(--secondaire);
  background-color: var(--vive);
}
.vive::selection {
  color: var(--vive);
  background-color: var(--principale);
}
html {
font-size: calc(4vw + 4vh + 2vmin);
scroll-behavior: smooth;
overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6{
    font-weight: normal;
    margin:0;
}

h1{
   line-height: .7;
}

a{
    text-decoration: none;
    color:inherit;
}
.lien-bouton{
    color:var(--vive);
    transition: all .2s;
}
.lien-bouton:hover{
    color:var(--principale);
}

button, input[type="submit"], input[type="reset"] {
	background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
}

body{
    font-family: 'Ferro-RegularI';
    margin:0;
    font-size: 1.5rem;
    line-height: 1.25;
    color:var(--principale);
    background: var(--secondaire);
    scroll-behavior: smooth;
    font-variant-numeric: lining-nums;
}
section>*{
        /* filter:grayscale(1); */
}

/* [--------------------] */
/*         Couleur        */
/* [--------------------] */

:root{
    --principale: #e6e1ec;
    --secondaire: #000000;
    --vive: #5cff00;
    --gd1: #bfbfbf;
    --gd2: #000;
    --gd3: #c9c9c9;
    --gd4: #000;
    --padding: .3rem;
}

 
/* [--------------------] */
/*         TAILLES        */
/* [--------------------] */

.corps-nano{font-size:.13rem;}
.corps-mini{font-size:.16rem;}
.corps-petit{font-size:.1rem;}
.corps-normal{font-size:.17rem;}
.corps-moyen{font-size:.22rem;}
.corps-moyen-grand{font-size:.3rem;}
.corps-moyen-baleze{font-size:.5rem;}
.corps-baleze{font-size:.7rem;}
.corps-baleze-grand{font-size:1rem;}
.corps-grand{font-size:1.3rem;}
.corps-petit-geant{font-size:2rem;}
.corps-moyen-geant{font-size:3rem;}
.corps-geant{font-size:29vw;}

.corps-petit-geant{line-height: 1;}
/* [--------------------] */
/*          TYPOS         */
/* [--------------------] */

.mono{font-weight: 900;}

.frak{font-family: "Ferro-FrakturI";}
.frak2{font-family: "Ferro-FrakturII";}
.frak3{font-family: "Ferro-FrakturIII";}
.frak4{font-family: "Ferro-FrakturIV";}

.ital{font-family: "Ferro-ItalicI";}
.ital2{font-family: "Ferro-ItalicII";}
.ital3{font-family: "Ferro-ItalicIII";}
.ital4{font-family: "Ferro-ItalicIV";}

.rom{font-family: "Ferro-RegularI";}
.rom2{font-family: "Ferro-RegularII";}
.rom3{font-family: "Ferro-RegularIII";}
.rom4{font-family: "Ferro-RegularIV";}

 
/* [--------------------] */
/*       Fonctions        */
/* [--------------------] */
.center{
    text-align: center;
}
.right{
    text-align: right;
}
i,em{
    font-family: "Ferro-ItalicI";
    font-style: normal;
}
p{
       -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
    -moz-hyphenate-limit-chars: 6 3 2;
-webkit-hyphenate-limit-chars: 6 3 2; 
-ms-hyphenate-limit-chars: 6 3 2; 
hyphenate-limit-chars: 6 3 2;
    -ms-hyphenate-limit-lines: 2;
-webkit-hyphenate-limit-lines: 2; 
hyphenate-limit-lines: 2;
}
.bottom-left{
    position: absolute;
    bottom:var(--padding);
    left: var(--padding);
}
.bottom-right{
    position: absolute;
    bottom:var(--padding);
    right: var(--padding);
}
.top-right{
    position: absolute;
    top:var(--padding);
    right: var(--padding);
}
.top-left{
    position: absolute;
    top:var(--padding);
    left: var(--padding);
}
.flex-col{
    display: flex;
    flex-direction: column;
}
.flex-row{
    display: flex;
    flex-direction: row;
}
.wrap{
    flex-wrap: wrap;
}
.between{
    justify-content: space-between !important;
}
.around{
    justify-content: space-around;
}
.cc{
    justify-content: center;
    align-items: center;
}
.cap{
    text-transform: uppercase;
}
.vive{
    color:var(--vive);
}
.sc{
    font-variant: small-caps;
    text-transform: lowercase;
}
.absolute{
    position: absolute;
}
.stretch{
    flex-grow: 1;
}
.overflow{
    overflow-x: hidden;
}
.overflow-total{
    overflow-x: hidden;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch
}
.inlineblock{
    display: inline-block;
}
.rot180{
    transform: rotate(180deg);
}
.block{
    display: block;
}
.lineheight1{
    line-height: 1;
}
.lineheight05{
    line-height: 0.8;
}
.lineheight03{
    line-height: 0.6;
}
.lineheight0{
    line-height: 0;
}
.backindex{
    z-index: -666 !important;
}
.inline{
    display: inline;
}
.chf{
    font-variant-numeric: lining-nums;
}
.word-break{
    word-break: break-all;
    text-align: center;
}
.word-break span, .word-break span span{
    word-break: break-all;
    text-align: center;
}
.bdld{
    border-left: 2px solid var(--principale);
    border-right: 2px solid var(--principale);
}
.narmol{
    font-weight: 400;
}
.hide-desk{
    display:none;
}
/* [--------------------] */
/*           Base         */
/* [--------------------] */

.sectionhome{
    width:100vw;
    margin:0 0 2rem 0;
    animation: opensection 1s forwards;
}
section{
    width: 98vw;
    position:relative;
    padding:var(--padding);
    margin:0 0 2rem 2vw;
}
.vh{
   height: 100vh;
}

button{
    outline:2px solid var(--principale);
    border-radius:.1em;
    padding:.1em .4em 0em .4em;
    text-transform: lowercase;
    font-variant: small-caps;
    font-variant-numeric: diagonal-fractions;
    background:var(--secondaire);
    letter-spacing: .03em;
    margin-bottom: 2px;
}
button:hover, .button-actif{
    background-color: var(--vive);
    color:var(--secondaire);
    -webkit-text-stroke: .02em var(--secondaire);
}
button:hover .vive{
    color:var(--secondaire);
}
.endpage .boutons-buy a:hover{
    color:var(--secondaire);
    background:var(--vive);
}
.cellule{
    outline:2px solid var(--principale);
    border-radius:.1em;
    padding:.23em .7em .1em .7em;
    background:var(--secondaire);
    z-index: 3666;
    position:relative;
    line-height: 1.43;
}
.col-cellule>span{
}
.col-cellule+.right .cellule{
   align-self: flex-end;
}
.col-cellule .cellule{
    align-self: flex-start
}
.gap{
    column-gap: 1rem;
}
.gap2{
    column-gap: .3rem;
}
.barre-interface{
    line-height: 1;
    margin-top:.3em;
    margin-bottom: -.3em;
}
.liste-buttons button{
    display: block;
}
.button-accueil .barre-interface{
  display: block;
  margin-bottom: 0em;
  margin-top: 0em;
}
.color-overlay{
    position: fixed;
    top:0;
    left:0;
    width:100vw;
    height:100vh;
    background-color: #ede12b;
    opacity: 1;
    z-index: 6666;
    mix-blend-mode: overlay;
    pointer-events: none;
}
/* [--------------------] */
/*         STYLES        */
/* [--------------------] */

.neonTexteBlanc {
  color: var(--secondaire);
  text-shadow:
      0 0 7px var(--secondaire),
      0 0 10px var(--secondaire),
      0 0 21px var(--secondaire),
      0 0 42px var(--principale),
      0 0 82px var(--principale),
      0 0 92px var(--principale),
      0 0 102px var(--principale),
      0 0 151px var(--principale);
}
.lowercaps{
        text-transform: lowercase;
    font-variant: small-caps;
}
.texte-vertical{
    writing-mode: vertical-rl;
text-orientation: upright;

}

.texte-vertical.loading-appear{
    letter-spacing: -0.6em;
}

.scaleY{
    transform: scaleY(1.5);
}

.mg-left-min-1{margin-left:-1em;}
.mg-left-min-2{margin-left:-2em;}
.mg-left-min-3{margin-left:-3em;}
.mg-left-min-4{margin-left:-4em;}
.mg-left-min-5{margin-left:-5em;} 

.mg-left-1{margin-left:1em;}
.mg-left-2{margin-left:2em;}
.mg-left-3{margin-left:3em;}
.mg-left-4{margin-left:4em;}
.mg-left-5{margin-left:5em;}

.trans-left-1{position: relative; left: .5em;}
.trans-left-2{position: relative; left: 1em;}
.trans-left-3{position: relative; left: 1.5em;}
.trans-left-4{position: relative; left: 2em;}
.trans-left-5{position: relative; left: 2.5em;}

.trans-right-1{position: relative; right: .5em;}
.trans-right-2{position: relative; right: 1em;}
.trans-right-3{position: relative; right: 1.5em;}
.trans-right-4{position: relative; right: 2em;}
.trans-right-5{position: relative; right: 2.5em;}

.mg-right-min-1{margin-right:-1em;}
.mg-right-min-2{margin-right:-2em;}
.mg-right-min-3{margin-right:-3em;}
.mg-right-min-4{margin-right:-4em;}
.mg-right-min-5{margin-right:-5em;} 

.mg-right-1{margin-right:1em;}
.mg-right-2{margin-right:2em;}
.mg-right-3{margin-right:3em;}
.mg-right-4{margin-right:4em;}
.mg-right-5{margin-right:5em;}

.mg-top-1{margin-top:.1rem;}
.mg-top-2{margin-top:.2rem;}
.mg-top-3{margin-top:.3rem;}
.mg-top-4{margin-top:.4rem;}
.mg-top-5{margin-top:.5rem;}   

.ls-1{
    letter-spacing: -.015em;
}

.numalign{
    font-variant-numeric: lining-nums;
}

.angel{
    width:40%;
    text-align: center;
    color:rgba(255, 255, 255, 0);
    -webkit-text-stroke: 1px var(--vive);
    animation: rollRegular .3s linear infinite;
}
.angel-frak{
    width:40%;
    text-align: center;
    color:rgba(255, 255, 255, 0);
    -webkit-text-stroke: 1px var(--vive);
    animation: rollFrak .3s linear infinite;
}
.angel-back{
    color:var(--secondaire);
    -webkit-text-stroke: 1px var(--principale);
    z-index: -666;
}
.angel-cont{
    position:relative;
    width:100%;
    height:100%;
}
.angel-cont>*{
    font-size: 6.6rem;
    position:absolute;
    left:0;
    width:100%;
    text-align: center;
}
.colored{
    background-color: var(--vive);
    height:3rem;
    width:3rem;
}
.colored img{
    mix-blend-mode: darken;
    width:100%;
    height:100%;
}
.hover-color{
    transition: all .2s;
    cursor: pointer;
}
.shaker .hover-color:hover{
    color:var(--vive);
    -webkit-text-stroke-color: var(--vive);
}
.shaker .vive>.hover-color:hover{
    color:var(--principale);
    -webkit-text-stroke-color: var(--principale);
}

/* [--------------------] */
/*       Animations       */
/* [--------------------] */

.reveal{
    opacity: 0;
    transform: translateX(-.2rem);
    transition: all .8s ease-in-out;
}
.appear-left{
    opacity: 1;
    transform: translateX(0rem);
}

.appear-after{
    opacity: 0;
    transition: all 2s ease-in-out;
}
.appear-after-active{
    opacity: 1;
}

.delay-home{
      animation-delay: 9s;
}
.delay-home-1{
      animation-delay: 7.3s;
}
.delay-home-2{
      animation-delay: 7.6s;
}
.delay-home-3{
      animation-delay: 7.9s;
}
.delay-home-4{
      animation-delay: 8.2s;
}
.appear{
    animation-name: appear;
    animation-duration: 1s;
    animation-iteration-count: 1;
    opacity: 0;
    animation-fill-mode: forwards;
}

.appear-cell-boot{
    animation-name: appear;
    animation-duration: 14s;
    animation-iteration-count: 1;
    opacity: 0;
    animation-fill-mode: forwards;
}

@keyframes appear{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

.flicker-quick{
    animation: flicker .1s linear infinite;
}
.flicker-slow{
    animation: flicker 1s linear infinite;
}
@keyframes flicker{
    0%{
        opacity: 0.92;
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0.92;
    }
}

@keyframes rollRegular {
  0% {
    font-family: "Ferro-RegularIV";
  }
  25% {
    font-family: "Ferro-RegularIII";
  }
  50% {
    font-family: "Ferro-RegularII";
  }
  75% {
    font-family: "Ferro-RegularI";
  }
  100% {
    font-family: "Ferro-RegularIV";
  }
}

@keyframes rollFrak {
  0% {
    font-family: "Ferro-FrakturIV";
  }
  25% {
    font-family: "Ferro-FrakturIII";
  }
  50% {
    font-family: "Ferro-FrakturII";
  }
  75% {
    font-family: "Ferro-FrakturI";
  }
  100% {
    font-family: "Ferro-FrakturIV";
  }
}

@keyframes rollItal {
  0% {
    font-family: "Ferro-ItalicIV";
  }
  25% {
    font-family: "Ferro-ItalicIII";
  }
  50% {
    font-family: "Ferro-ItalicII";
  }
  75% {
    font-family: "Ferro-ItalicI";
  }
  100% {
    font-family: "Ferro-ItalicIV";
  }
}

.rotate{
    animation: rotate 5s linear infinite;
    display: inline-block;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes ecrasement {
  0% {
    transform: scaleY(1);
  }
  100% {
    transform: scaleY(.1);
  }
}

.vive.strokeAnim{
    -webkit-text-stroke: 2px var(--vive);
    text-stroke: 2px var(--vive);
}
.strokeAnim{
    -webkit-text-stroke: 2px var(--principale);
    text-stroke: 2px var(--principale);
}

@keyframes BG {
    0%{background-position:50% 0%}
    25%{background-position:50% 50%}
    50%{background-position:50% 100%}
    75%{background-position:50% 50%}
    100%{background-position:50% 0%}
}

@keyframes opensection{
    0%{width:100vw; margin:0 0 2rem 0;}
    100%{width:98vw; margin:0 0 2rem 2vw;}
}
@keyframes openmenu{
    0%{opacity: 0;}
    100%{opacity:1;}
}

/* [--------------------] */
/*           Menu         */
/* [--------------------] */

menu{
    position:fixed;
    height:100vh;    
    padding: 0em;
    margin:0;
    opacity:0;
    animation: openmenu 1s forwards;
            background: var(--secondaire);
z-index: 14;
}
menu  .insidemenu{
    border-right: 1px solid var(--principale);
    height: 93%;
    align-items: center;
    padding: .3em .45em .3em .45em;
    margin:0;
}
menu div div{
    transition:transform .2s;
}

.btn-menu:hover{
    font-family: "Ferro-RegularI";
    cursor:pointer;
}

.color-switch div{
  width: .53em;
  height: .53em;
  border-radius: .1em;
  margin: .1em;
  border: 1px solid var(--principale);
  transition: all .2s;
  display: inline-block;
  margin: .4em 0;
  transform: rotate(45deg);
  cursor:pointer;
}
.color-switch div:hover{
    transform: rotate(90deg);
}
.color-switch div.active{
  background:var(--vive);
}

/* [--------------------] */
/*           Boot         */
/* [--------------------] */

#boot .vive.corps-baleze,
#boot2 .vive.corps-baleze{
    line-height: .6;
}

.logo{
    width:5.5em;
}

/* [--------------------] */
/*       cadrillage       */
/* [--------------------] */

.cadrillage{
    width:80%;
    justify-content:end;
}
.cadrillage .cellule{
    text-align: center;
    border-radius:0;
    line-height: 1.1;
    margin-top:.03em;
}
.cadrillage .cellule.rom:hover{
    cursor: pointer;
    background-color: var(--vive);
    color:var(--secondaire);
    animation: rollRegular .4s linear infinite;
}
.cadrillage .cellule.frak:hover{
    cursor: pointer;
    background-color: var(--vive);
    color:var(--secondaire);
    animation: rollFrak .4s linear infinite;
}
.cadrillage .cellule.ital:hover{
    cursor: pointer;
    background-color: var(--vive);
    color:var(--secondaire);
    animation: rollItal .4s linear infinite;
}
.rom.cellule-active{
    background-color: var(--vive);
    color:var(--secondaire);
    animation: rollRegular .4s linear infinite;
}
.frak.cellule-active{
    background-color: var(--vive);
    color:var(--secondaire);
    animation: rollFrak .4s linear infinite;
}
.ital.cellule-active{
    background-color: var(--vive);
    color:var(--secondaire);
    animation: rollItal .4s linear infinite;
}
.sticky{
    position:sticky;
    top:var(--padding);
    padding:0 var(--padding) var(--padding) 0;
    height:calc(100vh - (var(--padding) * 2));
}
.sticky>*{
    display:block;
}
.sticky button{
    margin-top:0em;
}

.cadrillage-wave{
    position:absolute;
    bottom:0;
}
.wave span span span{
    background-color: var(--principale);
    color: var(--secondaire);
}
.cadrillage .texte-vertical{
    position:relative;
    top:1em;
}

/* [--------------------] */
/*           log       */
/* [--------------------] */

.small-margin-top{
    margin: -1.5rem 0 1rem 0;
}
.medium-margin-top{
    margin: -1rem 0 2rem 2vw;
}
.small-margin-bottom{
    margin-bottom:.5rem;
}

.first-angel .diag{
    position:absolute;
}
.first-angel .diagdroite{
    transform: rotate(-210deg);
    margin-left: -8.5rem;
    margin-top:5rem;
}
.first-angel .diaggauche{
    transform: rotate(152deg);
    margin-left: 6.5rem;
    color:var(--vive);
    margin-top:-1.5rem;
    text-align: right;
}

/* [--------------------] */
/*           log       */
/* [--------------------] */
.log{
    width:35em;
    border-top:1px solid var(--principale);
    border-bottom:1px solid var(--principale);
    padding: var(--padding) 0;
    height:0;
    transition: 2s height;
    overflow: hidden;
}
.log-open{
    height:auto;
}
.log p{
    margin:1em 0;
}
.liste-cadre button{
    margin-top:0;
    display: block;
    font-variant: normal;
    text-transform: uppercase;
}
.cadre-left{
    z-index: 666;
    position:relative;
    left:-10em;
}
.cadre-right{
    z-index: 666;
    position:relative;
    right:-10em;
}

/* [--------------------] */
/*       Tentacules       */
/* [--------------------] */
.tentacule1, .tentacule2, .tentacule3{
    position: absolute;
    margin-top: 3em;
    transform-origin: center;
}
.tentacule1{
    transform: rotate(45deg);
    margin-left:10em;
}
.tentacule2{
    margin-left: 3em;
    margin-top: 4em;
}
.tentacule3{
    transform: rotate(135deg);
    margin-left:-5em;
}

/* [--------------------] */
/*       liste mots       */
/* [--------------------] */

.liste-mots{
    line-height: 1;
}
.liste-grand-mots .backindex{
    height:0;
    z-index: auto !important;
}

/* [--------------------] */
/*       starting page    */
/* [--------------------] */
.startingpage .corps-geant{
    line-height: .7;
    pointer-events: none;

}
.startingpage .corps-geant:nth-child(3){
    margin-top: .14em;
}
.ecrasement{
    height:1.4rem;
    margin:.01em;
}
.ecrasement>*{
    position:absolute;
    -webkit-text-stroke: 1px var(--principale);
    color:rgba(0, 0, 0, 0);
}
.ecrasement-lettre{
    -webkit-text-stroke: 1px var(--vive);
    color:rgba(0, 0, 0, 0);
    animation: ecrasement 6s linear infinite;
}
.ecrasement-lettre2{
    -webkit-text-stroke: 1px var(--vive);
    color:rgba(0, 0, 0, 0);
    animation: ecrasement 6s linear infinite;
    animation-delay: 2s;
}
.ecrasement-lettre3{
    -webkit-text-stroke: 1px var(--vive);
    color:rgba(0, 0, 0, 0);
    animation: ecrasement 6s linear infinite;
    animation-delay: 4s;
}
/* [--------------------] */
/*           log       */
/* [--------------------] */

.koa{
    line-height: .7;
    position: relative;
    top:.05em;
}
.char-flicker-shake{
    position:relative;
}

/* [--------------------] */
/*       list-fonts       */
/* [--------------------] */
.list-fonts .sticky{
    position:sticky;
    top:var(--padding);
    right:0;
    padding:0 var(--padding) var(--padding) 0;
    column-gap: .2em;
    height:calc(100vh - (var(--padding) * 2));
}
.list-fonts .corps-baleze div span {
    border-bottom: 2px solid var(--principale);
}
.sticky-right{
    align-items: flex-end;
}
.sticky-right div>*{
    display:block;
}
.font-active{
    color:var(--vive);
}
.randomSmallNumber{
    width:1.61em;
    text-align: center;
}
.randomLongNumber{
    width:7em;
    text-align: center;
}
.list-fonts{
    
}


/* [--------------------] */
/*       Explication       */
/* [--------------------] */
.explicationopening{
    margin-bottom:0;
}
.explication p{
    width: 55%;
}
.colored.lighten{
    height:auto;
    width:65%;
}
.explication a{
    color:var(--vive);
}
.lighten img{
    mix-blend-mode: normal;
}
.explication .colored{
    margin:.15rem 0 .15rem 0;
        background-color:none !important;
}
.explication em{
    margin-bottom: .3rem;
    color:var(--vive);
    font-style: normal;
}
.explication em em{
    font-style: italic !important;
    font-family: "Ferro-ItalicI" !important;
}
.explication p{
    margin: 0 0 1em 0;
}
.craycrayrom{
    font-family: "Ferro-RegularIV";
}
.craycrayital{
    font-family: "Ferro-ItalicIV";
}
.craycrayfrak{
    font-family: "Ferro-FrakturIV";
}
.craycraybackground{
    background-image: linear-gradient(-35deg, var(--gd1), var(--gd2), var(--gd3), var(--gd4), var(--gd1), var(--gd2), var(--gd3), var(--gd4), var(--gd1), var(--gd2), var(--gd3), var(--gd4), var(--gd1), var(--gd2), var(--gd3), var(--gd4), var(--gd1), var(--gd2), var(--gd3), var(--gd4), var(--gd1), var(--gd2), var(--gd3), var(--gd4), var(--gd1), var(--gd2), var(--gd3), var(--gd4), var(--gd1), var(--gd2), var(--gd3), var(--gd4), var(--gd1), var(--gd2), var(--gd3), var(--gd4), var(--gd1), var(--gd2), var(--gd3), var(--gd4));
	background-size: 400% 400%;
	animation: gradient 304s ease infinite;
    mix-blend-mode: exclusion;
}
@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
    25% {
		background-position: 100% 50%;
	}
	50% {
		background-position: 20% 100%;
	}
    75% {
		background-position: 60% 10%;
	}
	100% {
		background-position: 0% 50%;
	}
}

.explicationopening .texte-vertical{
    height: 2.3rem;
  width: 1em;
  overflow: hidden;
}
.baseline span:nth-child(2){
    transform: rotate(90deg);
    display: inline-block;
    position:relative;
    top:-2.5em;
    left: 2em;
}
.baseline span:nth-child(3){
    transform: rotate(-90deg);
    display: inline-block;
    position:relative;
    left: -2em;
    top:-2.6em;
}

/* [--------------------] */
/*  Liste fonte finale    */
/* [--------------------] */

.hcent{
    height:92%;
    margin-right:-2em;
    align-self: flex-end;
}

/* [--------------------] */
/*  shaker   */
/* [--------------------] */
.shaker .shake{
    line-height: 1;
}

/* [--------------------] */
/*  Liste fonte finale    */
/* [--------------------] */

.liste-finale-fonte sup, .all-famillies .corps-moyen{
}
.all-famillies .corps-moyen{
   font-size: .2rem;
   line-height: 1;
}

.wave-2-settings{
    line-height: .4;
}
.wave4{
        transition:.3s color;
        cursor: pointer;
}
.wave4:nth-child(odd):hover{
    color:var(--vive);
    font-family: "Ferro-ItalicIV";
}
.wave4:nth-child(even):hover{
    color:var(--vive);
    font-family: "Ferro-ItalicII";
}

.remove-margin-p .texte-vertical{
    margin:0;
}
.bloc90{
    width:80%;
}
.ecr1{
    height: .65em;
}


.lastsection .absolute{
    margin-left: -1.2em;
    margin-top: -.9em;
    mix-blend-mode: hue;
}
.test-cadre{
    position: absolute;
    top:10%;
    left:10%;
    border:1px solid var(--vive);
    height: 80%;
    width: 80%;
    z-index: -999;
       animation: compresscadre 8s linear infinite !important;

}

.test-cadre2{
    position: absolute;
    top:25%;
    left:25%;
    border:1px solid var(--vive);
    height: 50%;
    width: 50%;
     z-index: -999;
        animation: compresscadre 6s linear infinite !important;

}

.test-cadre3{
    position: absolute;
    top:40%;
    left:40%;
    border:1px solid var(--vive);
    height: 20%;
    width: 20%;
    z-index: -999;
    animation: compresscadre 13s linear infinite !important;
}






.footer{
    margin-top: 10em;
    line-height: 1;
}



/* ---- Panic alert overlay ---- */

.panic-alert {
    position: absolute;
    pointer-events: none;
    z-index: 5000;
    opacity: 0;
    line-height: 1;
    mix-blend-mode: difference;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .08em;
    overflow: hidden;
}

.panic-word-box {
    display: block;
    padding: 0;
    overflow: hidden;
}

.panic-circle {
    display: flex;
    justify-content: center;
}

.panic-circle-inner {
    position: relative;
    width: 80px;
    height: 80px;
    flex-shrink: 0;
}

.panic-circle span {
    position: absolute;
    font-size: 25px;
    line-height: 1;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    font-weight: 900;
}

.panic-label {
    font-family: "Ferro-RegularI";
    font-weight: normal;
    font-size: 1rem;
    font-variant: small-caps;
    text-transform: lowercase;
    white-space: nowrap;
    overflow: hidden;
}

.panic-word {
    font-family: "Ferro-FrakturI";
    line-height: .85;
    text-transform: uppercase;
    letter-spacing: -.1em;
    white-space: nowrap;
}

.panic-char {
    display: inline-block;
    font-family: "Ferro-FrakturI";
}

.panic-tags {
    position: absolute;
    display: flex;
    flex-direction: column;
    white-space: nowrap;
    mix-blend-mode: difference;
    pointer-events: none;
    z-index: 5000;
}

.panic-tag {
    display: block;
    outline: 2px solid var(--principale);
    border-radius: .1em;
    padding: .23em .7em .1em .7em;
    background: var(--secondaire);
    color: var(--principale);
    position: relative;
    line-height: 1.43;
    font-family: "Ferro-RegularI";
    font-weight: 900;
    font-size: .17rem;
    text-transform: uppercase;
    width: fit-content;
}

.panic-tag + .panic-tag {
    margin-top: -2px;
}

/* ---- Panic pyramid ---- */

.panic-pyramid {
    position: absolute;
    pointer-events: none;
    z-index: 5000;
    mix-blend-mode: difference;
    font-family: "Ferro-RegularI";
    font-weight: 900;
    font-size: 32px;
    line-height: 1.15;
    white-space: nowrap;
}

.panic-pyramid-char {
    display: inline-block;
}

/* Faster flicker in panic mode */
.panic-mode .flicker-quick {
    animation-duration: .04s;
}