html, body {
    overflow-x: hidden; /* Bloque le défilement horizontal */
    width: 100%; /* Empêche les débordements */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

:root {
    --primary-bg: #121212;
    --secondary-bg: rgba(23, 30, 36, 0.8);
    --accent-color: #55e9f4;
    --text-color: #f4f9ff;
    --muted-text-color: #737373;
    --font-family: 'Inter', sans-serif;
    --gap: 16px;
    --padding: 16px;
}

.header-gradient {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 15vh; /* Hauteur relative à l’écran */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), transparent);
    z-index: 10;
}

::-webkit-scrollbar {
    width: 8px; /* Barre fine pour un look moderne */
    height: 8px; /* Hauteur pour la barre horizontale (si nécessaire) */
}

::-webkit-scrollbar-track {
    background: transparent; /* Fond totalement transparent */
}

::-webkit-scrollbar-thumb {
    background: rgba(59, 130, 246, 0.6);
    border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(59, 130, 246, 0.9); /* Bleu plus vif au survol */
}

.image-11-icon {
    position: absolute;
    top: -5vh;
    left: 0;
    width: 100%; /* Ajuste automatiquement à la largeur */
    height: auto; /* Respecte les proportions */
    object-fit: cover;
}
.image-9-icon {
    position: absolute;
    top: 0px;
    left: 1352px;
    width: 568px;
    height: 484px;
    object-fit: cover;
}
.image-12-icon {
    position: absolute;
    top: -25px;
    left: 0px;
    width: 500.6px;
    height: 449px;
    object-fit: contain;
}
.background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
  
.background .image-11-icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ajuste l'image au conteneur tout en conservant ses proportions */
    z-index: -1; /* Place l'image derrière les autres éléments */
  }

.gradient {
    position: fixed;
    bottom: 0; /* Aligne en bas de l’écran */
    left: 0; /* Prend toute la largeur */
    width: 100vw; /* 100% de la largeur de l’écran */
    height: 20vh; /* 20% de la hauteur de l’écran pour une bonne proportion */
    background: linear-gradient(0deg, #121212, rgba(18, 18, 18, 0.7) 50%, rgba(18, 18, 18, 0));
    pointer-events: none; /* Pour éviter toute interaction */
}

.gradient1 {
    position: fixed;
    bottom: auto;
    top: 0; /* Place le dégradé en haut */
    left: 0;
    width: 100vw; /* 100% de la largeur de l’écran */
    height: 25vh; /* 25% de la hauteur de l’écran */
    background: linear-gradient(0deg, #121212, rgba(18, 18, 18, 0.7) 50%, rgba(18, 18, 18, 0));
    transform: rotate(180deg); /* Retourne le dégradé */
    pointer-events: none;
}

img#statusImage {
    height: 15px;
    letter-spacing: 10px;
    align-content: center;
}

.status-serveur {
    position: absolute;
    top: 6.34px;
    left: 210.85px;
    letter-spacing: 0.01em;
    line-height: 20.46px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 188.2px;
    height: 22.5px;
}
.x {
    position: absolute;
    top: 40px;
    left: 1.5%;
    letter-spacing: 0.01em;
    line-height: 20.46px;
    font-weight: 800;
    color: #808080;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 600px;
    height: 10px;
}
.status {
    position: absolute;
    width: 31.71%;
    top: 769px;
    right: 34.13%;
    left: 34.17%;
    border-radius: 19.02px;
    background-color: #171e24;
    border: 1.6px solid #262626;
    box-sizing: border-box;
    height: 65px;
    font-size: 20.46px;
    color: #fff;
}
.actualits {
    position: absolute;
    top: 14px;
    right: 289.9px;
    letter-spacing: 0.01em;
    line-height: 29.77px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 176.1px;
    height: 19px;
}
.div1 {
    position: absolute;
    width: 3.18%;
    top: calc(50% - 155px);
    right: 94.19%;
    left: 2.63%;
    border-radius: 7170.5px;
    background-color: #373737;
    height: 22.9px;
}
.div2 {
    position: absolute;
    width: 34.02%;
    top: 21px;
    right: 56.71%;
    left: 9.27%;
    border-radius: 4.3px;
    background-color: #373737;
    height: 11.5px;
}
.div3 {
    position: absolute;
    width: 73.71%;
    top: 84px;
    right: 17.03%;
    left: 9.27%;
    border-radius: 4.3px;
    background-color: #373737;
    height: 11.5px;
}
.div4 {
    position: absolute;
    width: 78.87%;
    top: 153px;
    right: 11.87%;
    left: 9.27%;
    border-radius: 4.3px;
    background-color: #373737;
    height: 11.5px;
}
.div5 {
    position: absolute;
    width: 71.63%;
    top: 107px;
    right: 19.1%;
    left: 9.27%;
    border-radius: 4.3px;
    background-color: #373737;
    height: 11.5px;
}
.div6 {
    position: absolute;
    width: 81.65%;
    top: 199px;
    right: 9.09%;
    left: 9.27%;
    border-radius: 4.3px;
    background-color: #373737;
    height: 11.5px;
}
.div7 {
    position: absolute;
    width: 87.3%;
    top: 176px;
    right: 3.43%;
    left: 9.27%;
    border-radius: 4.3px;
    background-color: #373737;
    height: 11.5px;
}
.div8 {
    position: absolute;
    width: 84.23%;
    top: 222px;
    right: 6.5%;
    left: 9.27%;
    border-radius: 4.3px;
    background-color: #373737;
    height: 11.5px;
}
.div9 {
    position: absolute;
    width: 78.87%;
    top: 130px;
    right: 11.87%;
    left: 9.27%;
    border-radius: 4.3px;
    background-color: #373737;
    height: 11.5px;
}
.div10 {
    position: absolute;
    width: 79.46%;
    top: 245px;
    right: 11.27%;
    left: 9.27%;
    border-radius: 4.3px;
    background-color: #373737;
    height: 11.5px;
}
.div11 {
    position: absolute;
    width: 84.23%;
    top: 268px;
    right: 6.5%;
    left: 9.27%;
    border-radius: 4.3px;
    background-color: #303030;
    height: 11.5px;
}
.div12 {
    position: absolute;
    width: 84.23%;
    top: 291px;
    right: 6.5%;
    left: 9.27%;
    border-radius: 4.3px;
    background-color: #373737;
    height: 11.5px;
}
.div {
    position: absolute;
    width: 95.51%;
    top: 53px;
    right: 2.25%;
    left: 2.25%;
    border-radius: 8.61px;
    background-color: #171e24;
    border: 0.7px solid #262626;
    box-sizing: border-box;
    height: 342px;
}
.actualites-gauche {
    position: absolute;
    width: 39.43%;
    top: 331px;
    right: 55.05%;
    left: 5.52%;
    backdrop-filter: blur(5px);
    border-radius: 12px;
    background-color: rgba(23, 30, 36, 0.8);
    border: 1px solid rgba(122, 122, 122, 0.5);
    box-sizing: border-box;
    height: 409px;
}
.div-child {
    position: absolute;
    top: 312px;
    left: 23px;
    backdrop-filter: blur(4px);
    border-radius: 12px;
    background-color: rgba(55, 55, 55, 0.5);
    width: 713px;
    height: 74px;
}
.div14 {
    position: absolute;
    width: 3.04%;
    top: calc(50% + 144.5px);
    right: 89.17%;
    left: 7.79%;
    border-radius: 7170.5px;
    background-color: #808080;
    height: 22.9px;
}
.div15 {
    position: absolute;
    width: 76.35%;
    top: 355px;
    right: 9.51%;
    left: 14.13%;
    border-radius: 4.3px;
    background-color: #808080;
    height: 11px;
}
.trailer {
    position: absolute;
    top: 320px;
    left: 298px;
    letter-spacing: 0.01em;
    line-height: 29.77px;
    font-weight: 800;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 162px;
    height: 19px;
}
.div13 {
    position: absolute;
    width: 100%;
    top: 0px;
    right: 0%;
    left: 0%;
    backdrop-filter: blur(5px);
    border-radius: 12px;
    background-color: rgba(23, 30, 36, 0.8);
    border: 1px solid rgba(122, 122, 122, 0.5);
    box-sizing: border-box;
    height: 409px;
}
.image-11-icon1 {
    position: absolute;
    top: -18.1px;
    left: 0px;
    width: 724px;
    height: 724px;
    object-fit: cover;
    filter: brightness(65%);
}
.image-9-icon1 {
    position: absolute;
    top: 0px;
    left: 509.82px;
    width: 214.2px;
    height: 182.5px;
    object-fit: cover;
}
.image-12-icon1 {
    position: absolute;
    top: -9.43px;
    left: 0px;
    width: 188.8px;
    height: 169.3px;
    object-fit: contain;
}
.div16 {
    position: absolute;
    width: 59.64%;
    top: 113px;
    right: 20.19%;
    left: 20.17%;
    border-radius: 3.61px;
    background-color: rgba(85, 233, 244, 0.08);
    border: 0.8px solid #55e9f4;
    box-sizing: border-box;
    height: 68.6px;
}
.valoriacrafthub-2-icon {
    position: absolute;
    top: 119.03px;
    left: 151.66px;
    width: 426.3px;
    height: 56.6px;
    object-fit: cover;
}
.actu-child {
    position: absolute;
    top: 200.11px;
    left: 182.58px;
    border-radius: 4.52px;
    background-color: rgba(23, 30, 36, 0.8);
    width: 359px;
    height: 52.4px;
}
.valoriacraft-ton {
    margin: 0;
}
.valoriacraft-ton-container1 {
    width: 100%;
}
.valoriacraft-ton-container {
    width: 100%; /* Prend toute la largeur de l'écran */
    max-width: 1200px; /* Largeur maximale pour les grands écrans */
    margin: auto; /* Centrage */
    padding: 20px; /* Espacement interne */
    box-sizing: border-box;
  }

.valoriacraft-ton-container2 {
    position: absolute;
    top: 50%; /* Centre verticalement */
    left: 50%; /* Centre horizontalement */
    transform: translate(-50%, -50%); /* Centre parfaitement l'élément */
    letter-spacing: 2.54px;
    line-height: 34px;
    text-transform: uppercase;
    font-weight: 800;
    background: linear-gradient(90deg, #55e9f4, #349eff); /* Dégradé */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; /* Texte transparent pour appliquer le dégradé */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%; /* Utilise toute la largeur disponible */
    max-width: 908px; /* Garde les dimensions fixes */
    height: auto; /* Hauteur adaptée au contenu */
    z-index: 10; /* S'assure que le texte reste au premier plan */
}

.valoriacraft-ton-container3 {
    position: absolute;
    top: 50%; /* Centre verticalement */
    left: 50%; /* Centre horizontalement */
    transform: translate(-50%, -50%); /* Centre parfaitement l'élément */
    letter-spacing: 2.54px;
    line-height: 12px;
    text-transform: uppercase;
    font-weight: 800;
    background: linear-gradient(90deg, #55e9f4, #349eff); /* Dégradé */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; /* Texte transparent pour appliquer le dégradé */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%; /* Utilise toute la largeur disponible */
    max-width: 908px; /* Garde les dimensions fixes */
    height: auto; /* Hauteur adaptée au contenu */
    z-index: 10; /* S'assure que le texte reste au premier plan */
}

.div17 {
    position: absolute;
    width: 48.49%;
    top: 204.63px;
    right: 25.77%;
    left: 25.74%;
    border-radius: 1.6px;
    background-color: rgba(85, 233, 244, 0.08);
    border: 0.3px solid #55e9f4;
    box-sizing: border-box;
    height: 44.1px;
}
.le-dimanche-28 {
    position: absolute;
    top: 252.52px;
    left: 196.91px;
    font-size: 22.63px;
    letter-spacing: 1.47px;
    line-height: 22.05px;
    text-transform: uppercase;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 330.3px;
    height: 70.1px;
}
.actu {
    position: absolute;
    top: 53px;
    left: 15px;
    border-radius: 12px;
    background-color: #171e24;
    width: 724px;
    height: 338px;
    overflow: hidden;
    font-size: 10.01px;
    color: #fff;
}
.actualites-droit {
    position: absolute;
    width: 39.43%;
    top: 331px;
    right: 5.47%;
    left: 55.1%;
    height: 409px;
}
.tous-droits-rservs {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    padding-left: 16px;
}
.tous-droits-rservs-container {
    position: absolute;
    width: 9.52%;
    top: 4.49px;
    left: 4.75%;
    line-height: 15px;
    display: flex;
    align-items: center;
    height: 15px;
}
.non-affili-container {
    position: absolute;
    width: 7.82%;
    top: 4px;
    left: 92.18%;
    line-height: 15px;
    text-align: right;
    display: flex;
    align-items: center;
    height: 15px;
}
.cgu-txt {
    line-break: anywhere;
    width: 100%;
}
.cgu {
    position: absolute;
    width: 3.03%;
    top: 4px;
    left: 88.62%;
    line-height: 15px;
    text-align: right;
    display: flex;
    align-items: center;
    height: 15px;
}
.daily-quest-1-icon {
    position: absolute;
    top: 4px;
    left: 1666px;
    width: 13.6px;
    height: 15px;
    object-fit: cover;
}
.valoriacraftminilogo-icon {
    position: absolute;
    top: 4px;
    left: 1733px;
    width: 15px;
    height: 15px;
    object-fit: cover;
}
.valoriacraft-icon {
    position: absolute;
    top: 7px;
    left: 0px;
    width: 88.6px;
    height: 12px;
    object-fit: cover;
}
.valoriacraftfr {
    position: absolute;
    width: 81.55%;
    top: 2.41px;
    left: 20.17%;
    line-height: 18.1px;
    font-weight: 500;
    display: flex;
    align-items: center;
    height: 18.1px;
}
.tiktok-logo-icon {
    position: absolute;
    top: 0px;
    left: 1.21px;
    width: 24.1px;
    height: 24.1px;
    overflow: hidden;
}
.tiktok {
    position: absolute;
    top: 0px;
    left: 612.39px;
    backdrop-filter: blur(12.07px);
    border-radius: 14.48px;
    background-color: #171e24;
    width: 143.6px;
    height: 24.1px;
    cursor: pointer;
    font-size: 14.48px;
}
.logo-icon {
    position: absolute;
    width: 14.27%;
    top: 1.21px;
    right: 84.15%;
    left: 1.59%;
    border-radius: 5430.08px;
    max-width: 100%;
    overflow: hidden;
    height: 21.7px;
}
.valoriacraftfr1 {
    position: absolute;
    width: 76.99%;
    top: 2.41px;
    left: 19.04%;
    line-height: 18.1px;
    font-weight: 500;
    display: flex;
    align-items: center;
    height: 18.1px;
}
.youtube {
    position: absolute;
    top: 0px;
    left: 295px;
    backdrop-filter: blur(12.07px);
    border-radius: 14.48px;
    background-color: #171e24;
    width: 152.1px;
    height: 24.1px;
    cursor: pointer;
    font-size: 14.48px;
}
.valoriacraft {
    position: absolute;
    width: 72.01%;
    top: 2.41px;
    left: 21.61%;
    line-height: 18.1px;
    font-weight: 500;
    display: flex;
    align-items: center;
    height: 18.1px;
}
.twitch-child {
    position: absolute;
    top: 1.21px;
    left: 2.41px;
    border-radius: 50%;
    background-color: rgba(78, 0, 244, 0.3);
    width: 21.7px;
    height: 21.7px;
}
.twitch-logo-icon {
    position: absolute;
    top: 5.01px;
    left: 6.21px;
    width: 14.2px;
    height: 14.2px;
    overflow: hidden;
}
.twitch {
    position: absolute;
    top: 0px;
    left: 462.75px;
    backdrop-filter: blur(12.07px);
    border-radius: 14.48px;
    background-color: #171e24;
    width: 134px;
    height: 24.1px;
    cursor: pointer;
    font-size: 14.48px;
}
.footer {
    position: absolute;
    width: 97.92%;
    top: 1041px;
    right: 1.2%;
    left: 0.89%;
    height: 24.1px;
    text-align: left;
    font-size: 12px;
    color: #737373;
}
.wiki1 {
    position: absolute;
    width: 66.67%;
    top: calc(50% - 12px);
    left: 33.33%;
    letter-spacing: 1.6px;
    line-height: 23.97px;
    text-transform: uppercase;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
}
.logo-wiki-icon {
    position: absolute;
    height: 75%;
    width: 22.22%;
    top: 12.5%;
    right: 77.78%;
    bottom: 12.5%;
    left: 0%;
    max-width: 100%;
    overflow: hidden;
    max-height: 100%;
}
.wiki {
    position: absolute;
    width: 9.44%;
    top: calc(50% - 13px);
    right: 0%;
    left: 90.56%;
    height: 24px;
}
.boutique1 {
    position: absolute;
    width: 84.63%;
    top: calc(50% - 12px);
    left: 15.4%;
    letter-spacing: 1.6px;
    line-height: 23.97px;
    text-transform: uppercase;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
}
.vector-icon {
    position: absolute;
    height: 81.25%;
    width: 10.63%;
    top: 12.5%;
    right: 89.37%;
    bottom: 6.25%;
    left: 0%;
    max-width: 100%;
    overflow: hidden;
    max-height: 100%;
}
.boutique {
    position: absolute;
    width: 17.21%;
    top: calc(50% - 13px);
    right: 15.65%;
    left: 67.13%;
    height: 24px;
}
.vote1 {
    position: absolute;
    width: 70.65%;
    top: calc(50% - 12px);
    left: 29.35%;
    letter-spacing: 1.6px;
    line-height: 23.97px;
    text-transform: uppercase;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
}
.vector-icon1 {
    position: absolute;
    height: 75%;
    width: 19.57%;
    top: 16.67%;
    right: 80.43%;
    bottom: 8.33%;
    left: 0%;
    max-width: 100%;
    overflow: hidden;
    max-height: 100%;
}
.vote {
    position: absolute;
    width: 10.72%;
    top: calc(50% - 13px);
    right: 39.04%;
    left: 50.23%;
    height: 24px;
}
.staff1 {
    position: absolute;
    width: 83.92%;
    top: calc(50% - 12px);
    left: 16.08%;
    letter-spacing: 1.6px;
    line-height: 23.97px;
    text-transform: uppercase;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
}
.logo-staff-icon {
    position: absolute;
    top: 2px;
    left: 0px;
    width: 8px;
    height: 20px;
}

.staff {
    position: absolute;
    width: 10.87%; /* OK */
    height: 2.7vh; /* Utilisez une unité relative */
    left: 32.87%;
    right: 56.26%;
    top: calc(50% - 13px);
}

.accueil1 {
    position: absolute;
    width: 82.31%;
    top: calc(50% - 12px);
    left: 17.69%;
    letter-spacing: 1.6px;
    line-height: 23.97px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
}
.vector-icon2 {
    position: absolute;
    height: 66.67%;
    width: 15.46%;
    top: 16.67%;
    right: 84.54%;
    bottom: 16.67%;
    left: 0%;
    max-width: 100%;
    overflow: hidden;
    max-height: 100%;
}
.accueil {
    position: absolute;
    width: 15.15%;
    top: calc(50% - 13px);
    right: 73.43%;
    left: 11.42%;
    height: 24px;
}
.logo-900x900-icon {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 68px;
    height: 68px;
    overflow: hidden;
    object-fit: cover;
}

.nav {
    position: absolute;
    top: calc(50% - 537px);
    display: flex;
    letter-spacing: 1.6px;
    font-size: 19.17px;
    padding: 10px;
    width: 100%;
    height: 68px;
    gap: 10px;
    left: 34%;
    text-align: center;
    color: #cacaca;
    font-family: Inter;
}

.nav-item {
    display: flex; /* Utilise Flexbox pour aligner icône et texte */
    align-items: center; /* Centre verticalement */
    gap: 5px; /* Espacement entre l'icône et le texte */
    color: #cacaca; /* Couleur du texte */
    font-size: 1rem; /* Taille du texte */
    cursor: pointer; /* Change le curseur au survol */
    transition: font-weight 0.3s ease; /* Animation pour l'effet gras */
    flex: 0 0 auto; /* Empêche les éléments de se redimensionner */
    font-size: 19.17px;
    font-family: Inter;
}

.nav-item:hover .nav-text {
    font-weight: 10;
}

.nav-text2 {
    font-weight: 800;
    font-size: 1rem; /* Taille uniforme du texte */
    line-height: 1.5; /* Hauteur de ligne pour équilibrer le texte */
}

.nav-icon {
    width: 20px; /* Taille des icônes */
    height: 20px; /* Taille fixe */
    object-fit: contain; /* Garde les proportions des images */
}

.nav-icon2 {
    width: 60px; /* Taille des icônes */
    height: 60px; /* Taille fixe */
    object-fit: contain; /* Garde les proportions des images */
}

.nav-item:hover .nav-text {
    font-weight: bold;
}

/* Style pour le texte */
.nav-text {
    font-size: 1rem; /* Taille uniforme du texte */
    line-height: 1.5; /* Hauteur de ligne pour équilibrer le texte */
}

.titre-child {
    position: absolute;
    top: 0px;
    left: 0px;
    border-radius: 12px;
    background-color: rgba(23, 30, 36, 0.8);
    width: 952px;
    height: 99px;
}

.div18 {
    position: absolute;
    width: 97.79%;
    top: 12px;
    right: 1.17%;
    left: 1.03%;
    border-radius: 4.25px;
    background-color: rgba(85, 233, 244, 0.08);
    border: 0.7px solid #55e9f4;
    box-sizing: border-box;
    height: 75px;
}
.titre {
    position: absolute;
    top: 146px;
    left: 484px;
    width: 952px;
    height: 99px;
    font-size: 26.53px;
}
.decoration-barre {
    position: absolute;
    top: 0px;
    left: 465px;
    background: linear-gradient(90deg, rgba(84, 233, 244, 0), #54e9f4 52.08%, rgba(84, 233, 244, 0));
    width: 989px;
    height: 1.6px;
}
.home {
    width: 100%;
    position: relative;
    background-color: #121212;
    height: 1080px;
    text-align: center;
    font-size: 25.8px;
    color: #f4f9ff;
    font-family: Inter;
}

/* Pour les tablettes */
@media (max-width: 768px) {
    .header-gradient {
        height: 10vh; /* Ajustement plus fin */
    }

    .status {
        font-size: 14px; /* Taille de police plus petite */
        height: auto; /* Laisse la hauteur s'adapter au contenu */
    }
}

/* Pour les téléphones */
@media (max-width: 480px) {
    body {
        font-size: 14px;
    }

    .image-11-icon {
        top: -2vh;
    }

    .status {
        font-size: 12px;
        padding: 10px;
    }

    .div {
        width: 90%;
        margin: 0 auto;
        height: auto;
    }
}

.div-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 16px;
    margin: 16px auto;
}

@media (max-width: 768px) { /* Écrans mobiles et tablettes */
    .valoriacraft-ton-container {
      width: 95%; /* Réduit la largeur sur mobile */
      padding: 10px; /* Diminue l'espacement interne */
    }
  
    .valoriacraft-ton-container h1 {
      font-size: 1.5em; /* Taille du titre réduite */
      text-align: center; /* Centrage sur mobile */
    }
  
    .valoriacraft-ton-container p {
      font-size: 0.9em; /* Texte plus petit et lisible */
    }
}
  
nav, footer {
    width: 100%; /* Toujours aligné avec l'écran */
    padding: 15px;
    background-color: #333; /* Couleur d'exemple, ajustable */
    color: #fff;
    box-sizing: border-box;
  }
  
  @media (max-width: 768px) {
    nav, footer {
      padding: 10px 5px; /* Espacement réduit */
      font-size: 0.8em; /* Texte plus petit */
    }
  
    nav ul {
      display: flex; /* Alignement horizontal */
      flex-wrap: wrap; /* Passe à la ligne si nécessaire */
      justify-content: center; /* Centrage des liens */
      padding: 0;
      margin: 0;
      list-style: none;
    }
  
    nav ul li {
      margin: 0 5px; /* Espacement réduit entre les liens */
    }
  }

@media (max-width: 1024px) {
    .nav, footer {
        font-size: 1rem;
        padding: 10px;
    }
}
@media (max-width: 600px) {
    body {
        font-size: 14px;
    }
    .status {
        padding: 8px;
    }
}