body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='60' height='80' patternTransform='scale(2) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='hsla(232,17.3%,35.1%,1)'/><path d='M29.954-13.276c-1.152 0-2.208.64-3.136 1.728-.544-.48-1.152-.8-1.824-.896-1.12-.128-2.272.48-3.264 1.664a3.018 3.018 0 0 0-.736-.32c-2.56-.608-6.304 3.84-6.08 10.432.256 6.592 4.608 10.752 7.104 9.984.192-.064.352-.128.544-.224 1.024.96 2.144 1.472 3.168 1.312a2.976 2.976 0 0 0 1.504-.704c.832.832 1.76 1.312 2.752 1.312.992 0 1.92-.48 2.752-1.312.448.384.96.64 1.504.704 1.024.16 2.144-.32 3.168-1.312.16.096.352.192.544.224 2.496.768 6.848-3.392 7.104-9.984.16-6.624-3.584-11.04-6.144-10.432-.256.064-.512.16-.736.32-.992-1.152-2.144-1.792-3.264-1.664-.672.064-1.28.384-1.824.896-.928-1.088-1.984-1.728-3.136-1.728zM-5.854 22.148c-.128.384.032.928.032.928 3.294.144 5.04 1.545 4.336 4.007-.596.294-1.158.757-1.68 1.368-.544-.48-1.152-.8-1.824-.896-1.12-.128-2.272.48-3.264 1.664a3.018 3.018 0 0 0-.736-.32c-2.56-.608-6.304 3.84-6.08 10.432.256 6.592 4.608 10.752 7.104 9.984.192-.064.352-.128.544-.224 1.024.96 2.144 1.472 3.168 1.312A2.976 2.976 0 0 0-2.75 49.7c.832.832 1.76 1.312 2.752 1.312.992 0 1.92-.48 2.752-1.312.448.384.96.64 1.504.704 1.024.16 2.144-.32 3.168-1.312.16.096.352.192.544.224 2.496.768 6.848-3.392 7.104-9.984.16-6.624-3.616-11.04-6.144-10.432-.256.064-.512.16-.736.32-.992-1.152-2.144-1.792-3.264-1.664-.672.064-1.28.384-1.824.896-.51-.598-1.06-1.054-1.643-1.35-.455-2.743-2.035-4.953-7.317-4.953zm60 0c-.128.384.032.928.032.928 3.294.144 5.04 1.545 4.336 4.007-.597.294-1.159.757-1.68 1.368-.544-.48-1.152-.8-1.824-.896-1.12-.128-2.272.48-3.264 1.664a3.018 3.018 0 0 0-.736-.32c-2.56-.608-6.304 3.84-6.08 10.432.256 6.592 4.608 10.752 7.104 9.984.192-.064.352-.128.544-.224 1.024.96 2.144 1.472 3.168 1.312a2.976 2.976 0 0 0 1.504-.704c.832.832 1.76 1.312 2.752 1.312.992 0 1.92-.48 2.752-1.312.448.384.96.64 1.504.704 1.024.16 2.144-.32 3.168-1.312.16.096.352.192.544.224 2.496.768 6.848-3.392 7.104-9.984.16-6.624-3.616-11.04-6.144-10.432-.256.064-.512.16-.736.32-.992-1.152-2.144-1.792-3.264-1.664-.672.064-1.28.384-1.824.896-.51-.598-1.06-1.054-1.643-1.35-.455-2.743-2.035-4.953-7.317-4.953zm-29.984 40c-.128.383.032.927.032.927 3.286.144 5.031 1.539 4.341 3.99-.61.292-1.185.763-1.717 1.386-.544-.48-1.152-.8-1.824-.896-1.12-.128-2.272.48-3.264 1.664a3.018 3.018 0 0 0-.736-.32c-2.56-.608-6.304 3.84-6.08 10.432.256 6.592 4.608 10.752 7.104 9.984.192-.064.352-.128.544-.224 1.024.96 2.144 1.472 3.168 1.312a2.976 2.976 0 0 0 1.504-.704c.832.832 1.76 1.312 2.752 1.312.992 0 1.92-.48 2.752-1.312.448.384.96.64 1.504.704 1.024.16 2.144-.32 3.168-1.312.16.096.352.192.544.224 2.496.768 6.848-3.392 7.104-9.984.16-6.624-3.584-11.04-6.144-10.432-.256.064-.512.16-.736.32-.992-1.152-2.144-1.792-3.264-1.664-.672.064-1.28.384-1.824.896-.5-.586-1.04-1.037-1.609-1.333-.452-2.751-2.026-4.97-7.32-4.97z'  stroke-width='1' stroke='none' fill='hsla(21,35%,92.2%,1)'/><path d='m24.928-5.084-2.176 3.36h4.352zm10.112 0-2.176 3.36h4.352zm-5.056 3.648L28.576.9h2.816zM21.152.388c1.12 3.272 4.17 5.535 7.872 5.871v.56h1.952v-.563c3.686-.347 6.723-2.605 7.84-5.868-1.206 1.087-2.877 1.964-4.853 2.479l-.044-.4-1.92.225.074.538a16.423 16.423 0 0 1-4.18.001l.074-.54-1.92-.223-.043.395c-1.925-.508-3.558-1.377-4.852-2.475ZM5.056 34.915l-2.176 3.36h4.352zm47.936.256c-.544 1.216-.032 2.688 1.184 3.232a2.46 2.46 0 0 0 3.232-1.184zM0 38.563-1.408 40.9h2.784zm60 0L58.592 40.9h2.784zM51.168 40.1c.664 1.942 2.01 3.612 3.766 4.73l-.022.102 1.216 1.152.128-.551a9.39 9.39 0 0 0 2.976.744v.64h1.504v-.638c3.802-.294 6.953-2.84 8.096-6.179-1.424 1.497-3.634 2.592-6.213 3.04l-.06-.672-1.471.224.056.628a15.569 15.569 0 0 1-1.145.044 15.498 15.498 0 0 1-1.177-.048l.057-.624-1.472-.224-.059.666c-2.586-.457-4.783-1.564-6.18-3.034zm-60 .288c1.117 3.263 4.154 5.521 7.84 5.869v.563H.96v-.56c3.7-.337 6.752-2.599 7.872-5.872-1.203 1.085-2.881 1.962-4.852 2.476l-.044-.396-1.92.224.06.54a16.393 16.393 0 0 1-4.185-.003l.06-.537-1.919-.224-.043.388c-1.91-.51-3.534-1.374-4.822-2.468zm33.76 34.528-2.176 3.36h4.352zm10.112 0-2.176 3.36h4.352zm-5.056 3.648L28.576 80.9h2.816z'  stroke-width='1' stroke='none' fill='hsla(240,26.9%,18.2%,1)'/></pattern></defs><rect width='800%' height='800%' transform='translate(-234,-198)' fill='url(%23a)'/></svg>");
}

.container {
    text-align: center;
    background-color: #d3d3d3;
    border-radius: 15px; 
    padding: 20px; 
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    width: 65%;
}

.game-board {
    display: grid;
    grid-template-columns: repeat(6, 100px);
    gap: 10px;
    margin-top: 20px;
    justify-content: center;
    align-items: center;
}

.texte {
padding: 20px;

}

.card {
    width: 100px;
    height: 100px;
    background-color: #2980b9;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: 10px;
    transition: background-color 0.3s;
}

.card.flipped {
    background-color: #e74c3c;
}

.hidden {
    visibility: hidden;
}

#timer {
    margin-top: 20px;
    font-size: 1.2rem;
}
.logo-container {
    text-align: center; /
}
.logo {
    max-width: 100%; 
    height: auto; 
}

.footer {
    position: relative; /* Positionne le footer */
    right: 0;          /* Aligne le footer à droite */
    bottom: 0;         /* Aligne le footer en bas */
    background-color: #333; /* Couleur de fond du footer */
    color: white;           /* Couleur du texte */
    text-align: center;     /* Centre le texte */
    padding: 10px;         /* Espacement interne */
    transform: rotate(180deg); /* Fait pivoter le bloc de 90 degrés */
}

.footer p {
    font-size: 12px; /* Texte en petit */
    margin: 0;       /* Supprime les marges par défaut */
    writing-mode: vertical-rl; /* Écrit le texte verticalement de droite à gauche */
    transform: rotate(180deg); /* Fait pivoter le texte pour qu'il soit lisible */
}