Bonjour, c'est a priori la dernière erreur qui bloque mon code CSS.
La dernière accolade est souligné en rouge signe d'une erreur, je l'ai éffacé, remise, passé en commentaire, rien à fair mon dernier symbole ou mot reste souligné en rouge., il s'agit du dernier mot ou symbole de la page.
Quelqu'un peut il m'aider?

.site-menu.subnav-open .site-navigation-link {
opacity: 0;
pointer-events: none
}

19 réponses


Salut,

il te manque le point virgule après le none;

Robin1
Auteur

J'avais également éssayé et ca n'a pas fonctionné, je n'ai pas de problème sur les lignes précédentes

.site-menu.subnav-open .site-navigation-item .subnav.is-open {
display: block;
opacity: 1;
pointer-events: auto
}

.site-menu.subnav-open .site-navigation-item .subnav.is-open .subnav-inner .subnav-title {
opacity: 1
}

.site-menu.subnav-open .site-navigation-link {
opacity: 0;
pointer-events: none
}

Est ce que tu peux envoyer tout ton code css stp ?

Robin1
Auteur

il ya a 1069 lignes, tu le veux vraiment en entier?

Ah oui .. ça fait beaucoup :D
Peut être pas alors.
Ton site est en ligne ?

Est ce que ça bug sur le site ? Ou c'est juste ton IDE qui dit qu'il y a une erreur ?

Robin1
Auteur

Mon site n'est pas encore en ligne,
le bug sur le site c'est sur un autre fichier css sur lequelle il n'y a a priori plus d'erreur, mais les modifications que je fait dessus ne son pas pris en compte quand je réactualise le visuel du site, je me suis dit qu'en corrigeant toutes les erreurs sur mes fichiers CSS ca débloquerai peut être le premier.
En gros c'est mon IDE qui m'indique l'erreur mais en la corrigeant j'éspère pouvoir faire les modifs que je veux sur mon site.

Tu dev sur quoi ? From scratch ? Wordpress ? Framework ?

Robin1
Auteur

c'est un site fait main sur visual Studio

Ok, et du coup tu as un bon niveau ? Comment tu te défini ? (Histoire qu'on voit par ou on commence pour t'aider :) )

Robin1
Auteur

débutant^^
J'ai fait 2-3 site pour me faire la main (qui ne sont pas en ligne) mais c'est tout.

Bonsoir Robin1, si je peux te proposer un truc c'est de commenter tout ce bout de code (.site-menu.subnav-open .site-navigation-link {
opacity: 0;
pointer-events: none
})

et de voir si l'accolade du segment de code du dessus se met en rouge également , ainsi nous pourons mieux apprehender le problème

Je crois qu'il disait justement qu'il l'avait déjà fait, mais peut importe, c'est toujours le dernier symbole de son fichier qui se retrouve en rouge.

Du coup Robin, tu disais que tu avais deux fichiers css, et que c'est sur l'autre qu'il y avait des erreurs à la base, mais que les changements ne sont pas pris en compte.
Pourquoi as tu deux fichiers distincts ?
Tant pis si le fichier css est gros, envoi le, je vais le tester chez moi :)

Robin1
Auteur

Oui j'avais déjà tester.
En réalité c'est un fichier css pour un menu déroulant de type hamburger.
L'autre fichier css c'est pour le reste du site.

:root {
--bg-color: #fafafa;
}

body {
font-family: Roboto;
font-size: 1.6rem;
margin: 2rem;
}

h1 {
background: url(../assets/img/withElevenLogo.png) no-repeat center center;
background-size: contain;
width: 5rem;
height: 1.2rem;
position: absolute;
left: 10%;
top: 4%;
}

h1 span {
visibility: hidden;
}

.u-visually-hidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px
}

.u-visually-hidden--focusable:active,
.u-visually-hidden--focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto
}

.site-menu {
height: 100vh;
pointer-events: none;
z-index: 500
}

.site-menu,
.site-menu-background {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%
}

.site-menu-background {
height: 100%;
background-color: rgba(30, 30, 30, .7);
opacity: 0;
transition: opacity 1s cubic-bezier(.39, .575, .565, 1) .1s;
z-index: 0
}

.site-menu-sidebar {
position: absolute;
top: 0;
bottom: 0;
left: 0;
height: 60px;
width: 60px;
z-index: 1;
appearance: none;
display: block;
padding: 0;
margin: 0;
border: none;
position: relative;
cursor: pointer;
outline: none;
border-radius: 0;
pointer-events: auto;
transition: width .3s cubic-bezier(.25, .46, .45, .94)
}

/ @media (max-width:47.99em) {
.site-menu-sidebar {
display: none
}
}
/
@media (min-width:48em) {
.site-menu-sidebar {
height: 60px;
width: 60px;
position: absolute;
left: 2rem;
top: 2rem;
}
}

.site-menu-sidebar:after {
position: fixed;
top: 0;
bottom: 0;
left: 0;
height: 100%;
width: 85vw;
background-color: #E13B42;
z-index: 0;
content: "";
transform: scaleX(0);
transform-origin: 0 50%;
transition: transform .6s cubic-bezier(.535, .005, 0, 1) .2s;
backface-visibility: hidden
}

@media (max-width:47.99em) {
.site-menu-sidebar:after {
left: 0
}
}

.site-menu-sidebar .line {
position: absolute;
right: 18px;
left: 18px;
height: 2px;
width: 24px;
background-color: #FFF;
display: block;
transition: transform .3s cubic-bezier(.25, .46, .45, .94);
transform-origin: 0 50%;
z-index: 1
}

@media (max-width:47.99em) {
.site-menu-sidebar .line {
position: absolute;
left: 30px;
height: 2px;
width: 20px;
background-color: #0A0F2D;
}
}

.site-menu-sidebar .line.line-1 {
top: 25px;
transition: transform .3s cubic-bezier(.25, .46, .45, .94);
}

@media (min-width:48em) {
.site-menu-sidebar .line.line-1 {
transform: scaleX(.83);
/ top: 60px /
}
}

.site-menu-sidebar .line.line-2 {
top: 31px;
transition: transform .3s cubic-bezier(.25, .46, .45, .94);
}

@media (min-width:48em) {
.site-menu-sidebar .line.line-2 /{
top: 66px
}
}
/

.site-menu-sidebar .line.line-3 {
top: 37px;
transition: transform .3s cubic-bezier(.25, .46, .45, .94);
}

@media (min-width:48em) {
.site-menu-sidebar .line.line-3 {
transform: scaleX(.66);
/ top: 72px /
}
}

.site-menu-sidebar:hover {
background-color: hsla(0, 0%, 100%, 0)
}

/ @media (min-width:48em) {
.site-menu-sidebar:hover {
background-color: #fff;
height: 100%;
width: 0px
}
}
/
.site-menu-sidebar:hover .line {
background: #7bdcfe;
transform: scaleX(1)
}

.site-menu-inner {
position: absolute;
top: 0;
bottom: 0;
left: 0;
height: 100%;
width: 85vw;
z-index: 2
}

@media (max-width:47.99em) {
.site-menu-inner {
width: 100%
}
}

.site-menu-inner:after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
content: "";
background-color: #0A0F2D;
transform: scaleX(0);
transform-origin: 0 50%;
transition: transform .6s cubic-bezier(.535, .005, 0, 1) .1s;
z-index: 0
}

.site-menu-inner .site-menu-container {
margin-right: 60px;
margin-left: 8vw;
position: relative;
padding-top: 60px;
height: 100%;
z-index: 1;
opacity: 0;
transition: opacity .4s cubic-bezier(.25, .46, .45, .94)
}

@media (max-width:47.99em) {
.site-menu-inner .site-menu-container {
margin-right: 40px;
margin-left: 40px;
overflow-x: hidden;
overflow-y: auto;
margin-right: 0;
padding-right: 40px
}
}

.site-menu-header {
position: relative;
line-height: 1
}

.site-menu-header .site-menu-suptitle {
font-family: Roboto, Arial, sans-serif;
font-weight: 700;
font-style: normal;
position: relative;
font-size: .5714285714rem;
letter-spacing: 3px;
color: #f4f4f4;
text-transform: uppercase;
line-height: 1;
opacity: .7
}

.site-menu-header .site-menu-suptitle .text {
opacity: 0;
transition: opacity 0s cubic-bezier(.215, .61, .355, 1) .5s
}

/ @media (max-width:47.99em) {
.site-menu-header .site-menu-suptitle {
display: none
}
}
/
.site-menu-header .site-menu-suptitle:after {
position: absolute;
top: 50%;
left: calc(100% + 20px);
height: 1px;
width: 60px;
background-color: #a6a6a6;
display: block;
content: "";
transform: scaleX(0);
transform-origin: 0 50%;
transition: transform 0s cubic-bezier(.215, .61, .355, 1) .5s;
}

.site-menu-header .site-menu-close {
position: absolute;
top: calc(50% - 48px);
right: -40px;
height: 100px;
width: 100px;
appearance: none;
display: block;
padding: 0;
z-index: 2;
margin: 0;
background: none;
border: none;
outline: none
}

@media (max-width:64.0525em) {
.site-menu-header .site-menu-close {
right: -25px;
height: 60px;
width: 60px
}
}

.site-menu-header .site-menu-close .line {
position: absolute;
top: calc(50% - 3px);
left: calc(50% - 9px);
height: 2px;
width: 18px;
display: block
}

@media (max-width:47.99em) {
.site-menu-header .site-menu-close .line {
position: absolute;
top: 28px;
right: 25px;
left: auto
}
}

.site-menu-header .site-menu-close .line.line-1 {
transform: rotate(45deg);
transition: transform 0s cubic-bezier(.25, .46, .45, .94) .6s;
}

.site-menu-header .site-menu-close .line.line-1:after {
transition: transform .3s cubic-bezier(.25, .46, .45, .94);
}

.site-menu-header .site-menu-close .line.line-2 {
transform: rotate(-45deg);
transition: transform 0s cubic-bezier(.25, .46, .45, .94) .6s;
}

.site-menu-header .site-menu-close .line.line-2:after {
transition: transform .3s cubic-bezier(.25, .46, .45, .94) .15s;
}

.site-menu-header .site-menu-close .line:before {
background-color: #E13B42;
z-index: 0
}

.site-menu-header .site-menu-close .line:after,
.site-menu-header .site-menu-close .line:before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
transform: scaleX(0);
transform-origin: 0 50%;
content: ""
}

.site-menu-header .site-menu-close .line:after {
background-color: #fff;
z-index: 1
}

.site-menu-header .site-menu-close:hover .line.line-1:after {
transform: scaleX(1);
transition: transform .3s cubic-bezier(.25, .46, .45, .94) .15s;
}

.site-menu-header .site-menu-close:hover .line.line-2:after {
transform: scaleX(1);
transition: transform .3s cubic-bezier(.25, .46, .45, .94);
}

.site-menu .site-navigation {
position: absolute;
right: 0;
bottom: 220px;
left: 0
}

@media (min-width:48em) and (max-width:64.0525em) {
.site-menu .site-navigation {
bottom: 190px
}
}

@media (max-width:47.99em) {
.site-menu .site-navigation {
position: absolute;
top: auto;
right: 0;
bottom: 170px;
left: 0;
width: calc(100% - 40px)
}
}

@media (min-width:64.0625em) {
.site-menu .site-navigation-list {
height: auto;
width: 410px;
}
}

.site-menu .site-navigation-item {
position: relative;
opacity: 0
}

@media (min-width:64.0625em) {
.site-menu .site-navigation-item {
transform: translateY(15px);
transition: opacity 0s linear .5s, transform 0s linear .5s;
}
}

@media (max-width:64.0525em) {
.site-menu .site-navigation-item {
position: static
}
}

.site-menu .site-navigation-item .subnav {
position: absolute;
top: 30%;
left: calc(100% - 5px);
height: auto;
width: 760px;
padding-left: 120px;
font-size: 0;
pointer-events: none;
backface-visibility: hidden
}

.site-menu .site-navigation-item .subnav:after {
clear: both;
content: "";
display: table
}

@media (max-width:64.0525em) {
.site-menu .site-navigation-item .subnav {
padding-top: 30px;
padding-bottom: 100px;
padding-left: 0;
position: fixed;
top: 120px;
left: 8vw;
width: calc(77vw - 60px);
max-height: calc(100% - 120px);
z-index: 2;
overflow: auto;
opacity: 0;
display: none
}
}

@media (max-width:47.99em) {
.site-menu .site-navigation-item .subnav {
position: absolute;
width: calc(100% + 40px);
max-height: none;
padding-top: 0;
top: 0;
left: 0;
padding-right: 40px;
padding-bottom: 150px
}
}

.site-menu .site-navigation-item .subnav-header {
padding-bottom: 60px;
margin-bottom: 60px;
border-bottom: 1px solid hsla(0, 0%, 100%, .2);
position: relative
}

.site-menu .site-navigation-item .subnav-header .svg {
position: absolute;
top: -3px;
left: 0;
height: 50px;
width: 50px;
opacity: .6
}

@media (max-width:47.99em) {
.site-menu .site-navigation-item .subnav-header .svg {
top: 0
}
}

.site-menu .site-navigation-item .subnav-header .svg svg {
position: absolute;
top: calc(50% - 5px);
left: 0;
fill: #fff
}

.site-menu .site-navigation-item .subnav-header-title {
display: block;
padding-left: 50px;
font-family: Roboto, Arial, sans-serif;
font-weight: 700;
font-style: normal;
color: #fff;
font-size: 2.1428571429rem;
letter-spacing: -1px;
line-height: 3.5714285714rem
}

.site-menu .site-navigation-item .subnav-header .button {
margin-top: 30px;
margin-left: 50px
}

.site-menu .site-navigation-item .subnav-inner {
display: inline-block;
vertical-align: top;
max-width: 200px
}

@media (max-width:64.0525em) {
.site-menu .site-navigation-item .subnav-inner {
display: block;
max-width: none;
padding-left: 50px
}
}

@media (min-width:64.0625em) {
.site-menu .site-navigation-item .subnav-inner:not(:nth-child(2)) {
margin-left: 140px
}
}

@media (max-width:64.0525em) {
.site-menu .site-navigation-item .subnav-inner:not(:nth-child(2)) {
margin-top: 30px
}
}

.site-menu .site-navigation-item .subnav-inner-title {
display: block;
margin-bottom: 20px;
color: #fff;
font-size: 1rem;
line-height: 2.14
}

@media (max-width:47.99em) {
.site-menu .site-navigation-item .subnav-inner-title {
font-size: 16px
}
}

@media (min-width:64.0625em) {
.site-menu .site-navigation-item .subnav-inner-title {
opacity: 0;
transform: translateY(15px)
}
}

.site-menu .site-navigation-item .subnav-list {
display: inline-block
}

@media (max-width:64.0525em) {
.site-menu .site-navigation-item .subnav-list {
padding-left: 50px
}
}

.site-menu .site-navigation-item .subnav-link {
padding-top: 10px;
padding-bottom: 10px;
position: relative;
border-bottom: 1px solid hsla(0, 0%, 100%, 0);
display: inline-block;
font-family: Roboto, Arial, sans-serif;
font-weight: 400;
font-style: normal;
color: hsla(0, 0%, 100%, .5);
font-size: 1rem;
line-height: 1;
white-space: nowrap
}

@media (min-width:64.0625em) {
.site-menu .site-navigation-item .subnav-link {
opacity: 0;
transform: translateY(15px);
transition: transform .6s cubic-bezier(.25, .46, .45, .94), color .4s cubic-bezier(.075, .82, .165, 1);
}
}

@media (max-width:64.0525em) {
.site-menu .site-navigation-item .subnav-link {
padding-top: 15px;
padding-bottom: 15px
}
}

@media (max-width:47.99em) {
.site-menu .site-navigation-item .subnav-link {
font-size: 1.1428571429rem
}
}

.site-menu .site-navigation-item .subnav-link:focus {
text-decoration: none
}

.site-menu .site-navigation-item .subnav-link:hover {
text-decoration: none;
color: #fff
}

.site-menu .site-navigation-item .subnav-item:first-child .subnav-link {
padding-top: 0;
transition: transform .4s cubic-bezier(.895, .03, .685, .22) .15s, opacity .4s cubic-bezier(.895, .03, .685, .22) .15s;
}

.site-menu .site-navigation-item .subnav-item:nth-child(2) .subnav-link {
transition: transform .4s cubic-bezier(.895, .03, .685, .22) .1s, opacity .4s cubic-bezier(.895, .03, .685, .22) .1s;
}

.site-menu .site-navigation-item .subnav-item:nth-child(3) .subnav-link {
transition: transform .4s cubic-bezier(.895, .03, .685, .22) .05s, opacity .4s cubic-bezier(.895, .03, .685, .22) .05s;
}

.site-menu .site-navigation-item .subnav-item:nth-child(4) .subnav-link {
transition: transform .4s cubic-bezier(.895, .03, .685, .22) 0s, opacity .4s cubic-bezier(.895, .03, .685, .22) 0s;
}

@media (min-width:64.0625em) {
.site-menu .site-navigation-item .subnav .subnav-inner-title {
transition: transform .4s cubic-bezier(.895, .03, .685, .22) .4s, opacity .4s cubic-bezier(.895, .03, .685, .22) .4s;
}
}

.site-menu .site-navigation-item .subnav .subnav-inner-title+ul .subnav-item:first-child .subnav-link {
transition: transform .4s cubic-bezier(.895, .03, .685, .22) .25s, opacity .4s cubic-bezier(.895, .03, .685, .22) .25s;
}

.site-menu .site-navigation-item .subnav .subnav-inner-title+ul .subnav-item:nth-child(2) .subnav-link {
transition: transform .4s cubic-bezier(.895, .03, .685, .22) .2s, opacity .4s cubic-bezier(.895, .03, .685, .22) .2s;
}

.site-menu .site-navigation-item .subnav .subnav-inner-title+ul .subnav-item:nth-child(3) .subnav-link {
transition: transform .4s cubic-bezier(.895, .03, .685, .22) .15s, opacity .4s cubic-bezier(.895, .03, .685, .22) .15s;
}

.site-menu .site-navigation-item .subnav .subnav-inner-title+ul .subnav-item:nth-child(4) .subnav-link {
transition: transform .4s cubic-bezier(.895, .03, .685, .22) .1s, opacity .4s cubic-bezier(.895, .03, .685, .22) .1s;
}

.site-menu .site-navigation-item .subnav .subnav-inner-title+ul .subnav-item:nth-child(5) .subnav-link {
transition: transform .4s cubic-bezier(.895, .03, .685, .22) .05s, opacity .4s cubic-bezier(.895, .03, .685, .22) .05s;
}

.site-menu .site-navigation-item .subnav .subnav-inner-title+ul .subnav-item:nth-child(6) .subnav-link {
transition: transform .4s cubic-bezier(.895, .03, .685, .22) 0s, opacity .4s cubic-bezier(.895, .03, .685, .22) 0s;
}

@media (min-width:64.0625em) {
.site-menu .site-navigation-item:hover .subnav {
pointer-events: auto;
padding-top: 30px;
transform: translateY(-30px)
}

.site-menu .site-navigation-item:hover .subnav-item:first-child .subnav-link {
  opacity: 1;
  transform: translateY(0);
  transition: transform .4s cubic-bezier(.25, .46, .45, .94) .1s, opacity .4s cubic-bezier(.25, .46, .45, .94) .1s, color .4s cubic-bezier(.075, .82, .165, 1);
}

.site-menu .site-navigation-item:hover .subnav-item:nth-child(2) .subnav-link {
  opacity: 1;
  transform: translateY(0);
  transition: transform .4s cubic-bezier(.25, .46, .45, .94) .15s, opacity .4s cubic-bezier(.25, .46, .45, .94) .15s, color .4s cubic-bezier(.075, .82, .165, 1);
}

.site-menu .site-navigation-item:hover .subnav-item:nth-child(3) .subnav-link {
  opacity: 1;
  transform: translateY(0);
  transition: transform .4s cubic-bezier(.25, .46, .45, .94) .2s, opacity .4s cubic-bezier(.25, .46, .45, .94) .2s, color .4s cubic-bezier(.075, .82, .165, 1);
}

.site-menu .site-navigation-item:hover .subnav-item:nth-child(4) .subnav-link {
  opacity: 1;
  transform: translateY(0);
  transition: transform .4s cubic-bezier(.25, .46, .45, .94) .25s, opacity .4s cubic-bezier(.25, .46, .45, .94) .25s, color .4s cubic-bezier(.075, .82, .165, 1);
}

.site-menu .site-navigation-item:hover .subnav-item:nth-child(5) .subnav-link {
  opacity: 1;
  transform: translateY(0);
  transition: transform .4s cubic-bezier(.25, .46, .45, .94) .3s, opacity .4s cubic-bezier(.25, .46, .45, .94) .3s, color .4s cubic-bezier(.075, .82, .165, 1);
}

.site-menu .site-navigation-item:hover .subnav-item:nth-child(6) .subnav-link {
  opacity: 1;
  transform: translateY(0);
  transition: transform .4s cubic-bezier(.25, .46, .45, .94) .35s, opacity .4s cubic-bezier(.25, .46, .45, .94) .35s, color .4s cubic-bezier(.075, .82, .165, 1);
}

.site-menu .site-navigation-item:hover .subnav-item:nth-child(7) .subnav-link {
  opacity: 1;
  transform: translateY(0);
  transition: transform .4s cubic-bezier(.25, .46, .45, .94) .4s, opacity .4s cubic-bezier(.25, .46, .45, .94) .4s, color .4s cubic-bezier(.075, .82, .165, 1);
}

.site-menu .site-navigation-item:hover .subnav-item:nth-child(8) .subnav-link {
  opacity: 1;
  transform: translateY(0);
  transition: transform .4s cubic-bezier(.25, .46, .45, .94) .45s, opacity .4s cubic-bezier(.25, .46, .45, .94) .45s, color .4s cubic-bezier(.075, .82, .165, 1);
}

.site-menu .site-navigation-item:hover .subnav-item:nth-child(9) .subnav-link {
  opacity: 1;
  transform: translateY(0);
  transition: transform .4s cubic-bezier(.25, .46, .45, .94) .5s, opacity .4s cubic-bezier(.25, .46, .45, .94) .5s, color .4s cubic-bezier(.075, .82, .165, 1);
}

.site-menu .site-navigation-item:hover .subnav-item:nth-child(10) .subnav-link {
  opacity: 1;
  transform: translateY(0);
  transition: transform .4s cubic-bezier(.25, .46, .45, .94) .55s, opacity .4s cubic-bezier(.25, .46, .45, .94) .55s, color .4s cubic-bezier(.075, .82, .165, 1);
}

.site-menu .site-navigation-item:hover .subnav .subnav-inner-title {
  opacity: 1;
  transform: translateY(0);
  transition: transform .4s cubic-bezier(.25, .46, .45, .94) .1s, opacity .4s cubic-bezier(.25, .46, .45, .94) .1s;
}

.site-menu .site-navigation-item:hover .subnav .subnav-inner-title+ul .subnav-item:first-child .subnav-link {
  opacity: 1;
  transform: translateY(0);
  transition: transform .4s cubic-bezier(.25, .46, .45, .94) .2s, opacity .4s cubic-bezier(.25, .46, .45, .94) .2s, color .4s cubic-bezier(.075, .82, .165, 1);
}

.site-menu .site-navigation-item:hover .subnav .subnav-inner-title+ul .subnav-item:nth-child(2) .subnav-link {
  opacity: 1;
  transform: translateY(0);
  transition: transform .4s cubic-bezier(.25, .46, .45, .94) .25s, opacity .4s cubic-bezier(.25, .46, .45, .94) .25s, color .4s cubic-bezier(.075, .82, .165, 1);
}

.site-menu .site-navigation-item:hover .subnav .subnav-inner-title+ul .subnav-item:nth-child(3) .subnav-link {
  opacity: 1;
  transform: translateY(0);
  transition: transform .4s cubic-bezier(.25, .46, .45, .94) .3s, opacity .4s cubic-bezier(.25, .46, .45, .94) .3s, color .4s cubic-bezier(.075, .82, .165, 1);
}

.site-menu .site-navigation-item:hover .subnav .subnav-inner-title+ul .subnav-item:nth-child(4) .subnav-link {
  opacity: 1;
  transform: translateY(0);
  transition: transform .4s cubic-bezier(.25, .46, .45, .94) .35s, opacity .4s cubic-bezier(.25, .46, .45, .94) .35s, color .4s cubic-bezier(.075, .82, .165, 1);
}

.site-menu .site-navigation-item:hover .subnav .subnav-inner-title+ul .subnav-item:nth-child(5) .subnav-link {
  opacity: 1;
  transform: translateY(0);
  transition: transform .4s cubic-bezier(.25, .46, .45, .94) .4s, opacity .4s cubic-bezier(.25, .46, .45, .94) .4s, color .4s cubic-bezier(.075, .82, .165, 1);
}

.site-menu .site-navigation-item:hover .subnav .subnav-inner-title+ul .subnav-item:nth-child(6) .subnav-link {
  opacity: 1;
  transform: translateY(0);
  transition: transform .4s cubic-bezier(.25, .46, .45, .94) .45s, opacity .4s cubic-bezier(.25, .46, .45, .94) .45s, color .4s cubic-bezier(.075, .82, .165, 1);
}

.site-menu .site-navigation-item:hover .subnav .subnav-inner-title+ul .subnav-item:nth-child(7) .subnav-link {
  opacity: 1;
  transform: translateY(0);
  transition: transform .4s cubic-bezier(.25, .46, .45, .94) .5s, opacity .4s cubic-bezier(.25, .46, .45, .94) .5s, color .4s cubic-bezier(.075, .82, .165, 1);
}

.site-menu .site-navigation-item:hover .subnav .subnav-inner-title+ul .subnav-item:nth-child(8) .subnav-link {
  opacity: 1;
  transform: translateY(0);
  transition: transform .4s cubic-bezier(.25, .46, .45, .94) .55s, opacity .4s cubic-bezier(.25, .46, .45, .94) .55s, color .4s cubic-bezier(.075, .82, .165, 1);
}

.site-menu .site-navigation-item:hover .subnav .subnav-inner-title+ul .subnav-item:nth-child(9) .subnav-link {
  opacity: 1;
  transform: translateY(0);
  transition: transform .4s cubic-bezier(.25, .46, .45, .94) .6s, opacity .4s cubic-bezier(.25, .46, .45, .94) .6s, color .4s cubic-bezier(.075, .82, .165, 1);
}

.site-menu .site-navigation-item:hover .subnav .subnav-inner-title+ul .subnav-item:nth-child(10) .subnav-link {
  opacity: 1;
  transform: translateY(0);
  transition: transform .4s cubic-bezier(.25, .46, .45, .94) .65s, opacity .4s cubic-bezier(.25, .46, .45, .94) .65s, color .4s cubic-bezier(.075, .82, .165, 1);
}

.site-menu .site-navigation-item:hover .site-navigation-link {
  color: #E13B42
}

}

.site-menu .site-navigation-link {
display: block;
transition: color .4s cubic-bezier(.075, .82, .165, 1);
font-size: 3rem;
line-height: 1.3;
transition: color .3s cubic-bezier(.25, .46, .45, .94)
}

.site-menu .site-navigation-link,
.site-menu .site-navigation-link.gkb-link {
font-family: Roboto, Arial, sans-serif;
font-weight: 700;
font-style: normal;
color: #fff
}

.site-menu .site-navigation-link.gkb-link {
display: inline-block;
border-bottom: 2px solid #fff;
padding-bottom: 5px;
margin-top: 45px;
opacity: .5;
font-size: 1rem;
line-height: 16px;
letter-spacing: normal
}

.site-menu .site-navigation-link.gkb-link:focus {
color: #fff
}

@media (max-width:64.0525em) {
.site-menu .site-navigation-link {
font-size: 2.5rem
}
}

@media (max-width:64.0525em) {
.site-menu .site-navigation-link.with-subnav * {
pointer-events: none
}
}

@media (max-width:47.99em) {
.site-menu .site-navigation-link {
font-size: 2.1428571429rem;
line-height: 50px
}
}

.site-menu .site-navigation-link .link-text {
position: relative;
display: inline-block;
transition: padding-right .3s cubic-bezier(.25, .46, .45, .94)
}

.site-menu .site-navigation-link .link-text .svg {
position: absolute;
top: 50%;
left: calc(100% + 15px);
transform: translateY(-50%);
fill: hsla(0, 0%, 100%, .5);
font-size: 0
}

@media (max-width:64.0525em) {
.site-menu .site-navigation-link .link-text .svg {
transform: translateY(-40%)
}
}

.site-menu .site-navigation-link:hover {
text-decoration: none;
transition: color .3s cubic-bezier(.165, .84, .44, 1)
}

@media (min-width:71.875em) {
.site-menu .site-navigation-link:hover {
color: #E13B42
}
}

.site-menu .site-navigation-link:hover .link-text {
padding-right: 10px
}

.site-menu-footer {
position: absolute;
right: 0;
bottom: 75px;
left: 0
}

@media (max-width:47.99em) {
.site-menu-footer {
position: absolute;
top: auto;
right: 0;
bottom: 0;
left: 0;
margin-top: 30px;
padding-bottom: 30px
}
}

.site-menu-footer .locations,
.site-menu-footer .social-item {
opacity: 0;
transform: translateY(10px);
transition: opacity 0s cubic-bezier(.25, .46, .45, .94) .5s, transform 0s cubic-bezier(.25, .46, .45, .94) .5s;
}

.is-menu-open .site-menu {
pointer-events: auto
}

.is-menu-open .site-menu .site-menu-background {
opacity: 1;
transition: opacity 1s cubic-bezier(.39, .575, .565, 1) .1s
}

.is-menu-open .site-menu .site-menu-sidebar:after {
transform: scaleX(1);
transition: transform .7s cubic-bezier(.535, .005, 0, 1) .1s;
}

.is-menu-open .site-menu .site-menu-inner:after {
transform: scaleX(1);
transition: transform .7s cubic-bezier(.535, .005, 0, 1) .2s;
}

.is-menu-open .site-menu .site-menu-inner .site-menu-container {
opacity: 1;
transition: opacity 0s cubic-bezier(.25, .46, .45, .94)
}

.is-menu-open .site-menu .site-menu-suptitle .text {
opacity: 1;
transition: opacity .3s cubic-bezier(.25, .46, .45, .94) .6s
}

.is-menu-open .site-menu .site-menu-suptitle:after {
transform: scaleX(1);
transition: transform .3s cubic-bezier(.215, .61, .355, 1) .6s;
}

.is-menu-open .site-menu .site-menu-close .line-1:before {
transform: scaleX(1);
transition: transform .3s cubic-bezier(.25, .46, .45, .94) .7s;
}

.is-menu-open .site-menu .site-menu-close .line-2:before {
transform: scaleX(1);
transition: transform .3s cubic-bezier(.25, .46, .45, .94) .6s;
}

.is-menu-open .site-menu .site-navigation-item {
opacity: 1
}

@media (min-width:64.0625em) {
.is-menu-open .site-menu .site-navigation-item {
transform: translateY(0)
}
}

.is-menu-open .site-menu .site-navigation-item:first-child {
transition: opacity .3s cubic-bezier(.25, .46, .45, .94) .45s, transform .3s cubic-bezier(.25, .46, .45, .94) .45s;
}

.is-menu-open .site-menu .site-navigation-item:nth-child(2) {
transition: opacity .3s cubic-bezier(.25, .46, .45, .94) .5s, transform .3s cubic-bezier(.25, .46, .45, .94) .5s;
}

.is-menu-open .site-menu .site-navigation-item:nth-child(3) {
transition: opacity .3s cubic-bezier(.25, .46, .45, .94) .55s, transform .3s cubic-bezier(.25, .46, .45, .94) .55s;
}

.is-menu-open .site-menu .site-navigation-item:nth-child(4) {
transition: opacity .3s cubic-bezier(.25, .46, .45, .94) .6s, transform .3s cubic-bezier(.25, .46, .45, .94) .6s;
}

.is-menu-open .site-menu .site-navigation-item:nth-child(5) {
transition: opacity .3s cubic-bezier(.25, .46, .45, .94) .65s, transform .3s cubic-bezier(.25, .46, .45, .94) .65s;
}

.is-menu-open .site-menu .site-navigation-item:nth-child(6) {
transition: opacity .3s cubic-bezier(.25, .46, .45, .94) .7s, transform .3s cubic-bezier(.25, .46, .45, .94) .7s;
}

.is-menu-open .site-menu .site-navigation-item:nth-child(7) {
transition: opacity .3s cubic-bezier(.25, .46, .45, .94) .75s, transform .3s cubic-bezier(.25, .46, .45, .94) .75s;
}

.is-menu-open .site-menu .site-navigation-item:nth-child(8) {
transition: opacity .3s cubic-bezier(.25, .46, .45, .94) .8s, transform .3s cubic-bezier(.25, .46, .45, .94) .8s;
}

.is-menu-open .site-menu .social-item {
opacity: 1;
transform: translateY(0)
}

.is-menu-open .site-menu .social-item:first-child {
transition: opacity .3s cubic-bezier(.25, .46, .45, .94) .75s, transform .3s cubic-bezier(.25, .46, .45, .94) .75s;
}

.is-menu-open .site-menu .social-item:nth-child(2) {
transition: opacity .3s cubic-bezier(.25, .46, .45, .94) .8s, transform .3s cubic-bezier(.25, .46, .45, .94) .8s;
}

.is-menu-open .site-menu .social-item:nth-child(3) {
transition: opacity .3s cubic-bezier(.25, .46, .45, .94) .85s, transform .3s cubic-bezier(.25, .46, .45, .94) .85s;
}

.is-menu-open .site-menu .social-item:nth-child(4) {
transition: opacity .3s cubic-bezier(.25, .46, .45, .94) .9s, transform .3s cubic-bezier(.25, .46, .45, .94) .9s;
}

.is-menu-open .site-menu .locations {
opacity: 1;
transform: translateY(0);
transition: opacity .3s cubic-bezier(.215, .61, .355, 1) .9s, transform .3s cubic-bezier(.215, .61, .355, 1) .9s;
}

.site-menu.subnav-open .site-menu-footer {
opacity: 0;
pointer-events: none
}

.site-menu.subnav-open .site-navigation-item.subnav-open {
z-index: 10
}

.site-menu.subnav-open .site-navigation-item .subnav.is-open {
display: block;
opacity: 1;
pointer-events: auto
}

.site-menu.subnav-open .site-navigation-item .subnav.is-open .subnav-inner .subnav-title {
opacity: 1
}

.site-menu.subnav-open .site-navigation-link {
opacity: 0;
pointer-events: none
}

ok merci.
C'est quoi ces slash qui trainent a plusieurs reprise dans ton code ?
par exemple la :

/ @media (max-width:47.99em) {
.site-menu-sidebar {
display: none
}
} / 
Robin1
Auteur

ca remonte un peu mais j'ai du le passé en commentaire à un moment donné et annulé ca par la suite sans supprimer correctement.

Du coup tu peux virer tous ces slash qui trainent. L'erreur vient de la je pense ;)

Robin1
Auteur

En consultant mon code pour aller le corriger comme tu me l'a indiqué j'ai remarqué qu'en fait c'est une partie de mon code que j'ai passé e commentaire, le copier/coller que je t'ai fait n'a pas pris en compte les *

Ah, du coup je n'ai pas de moyen de savoir ce qui bug.
tu as essayé de supprimer tout cette partie commantée ?
tu n'as pas ouvert un @media sans le refermer ?

Robin1
Auteur

oui et non^^