/* *********************************/
/* SECTION SITE GENERAL            */
/* *********************************/
:root {
  --color-shades-900: #e3e5e8;
  --color-shades-800: #c7cad1;
  --color-shades-700: #abb0ba;
  --color-shades-600: #8f96a3;
  --color-shades-500: #737b8c;
  --color-shades-400: #5c6370;
  --color-shades-300: #454a54;
  --color-shades-200: #2e3138;
  --color-shades-100: #17191c;
  --color-tints-1000: #6b7280;
  --color-tints-880: #7e828b;
  --color-tints-750: #8f9299;
  --color-tints-630: #9fa2a8;
  --color-tints-500: #b1b4b9;
  --color-tints-380: #c1c3c7;
  --color-tints-250: #d1d3d6;
  --color-tints-130: #e2e2e4;
  --color-tints-0: #f2f2f3;
}

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

body {
    background-color: #444;
}

.container {
    display: grid;
    grid-template-columns: 150px 1fr 200px;
    grid-template-rows: auto 1fr auto;
    background-color: #444;
    min-height: 100vh;
}

header {
    grid-row-start: 1;
    grid-column-start: 1;
    grid-row-end: 2;
    grid-column-end: -1;
    text-align: center;
    padding: 25px;
    font-family: fantasy;
    letter-spacing: 3px;
    text-shadow: 3px 1px 8px red;
    border: 1px dotted green;
    background-color: #222;
}

footer {
    grid-row-start: 3;
    grid-column-start: 1;
    grid-row-end: 4;
    grid-column-end: -1;
    text-align: center;
    padding: 5px;
    text-shadow: 2px 1px 5px red;
    background-color: transparent;
}

nav {
    background-color: #333;
}

nav a {
    display: block;
    color: wheat;
    padding: 5px;
    text-decoration: none;
    font-size: 1.2em;
    background-color: #444;
}

nav a:hover {
    background-color: wheat;
    color: black;
}

main {
    background-color: var(--color-shades-100);
}

article {
    color: black;
    font-family: 'Times New Roman', Times, serif;
    font-size: 1.1em;
    text-align: center;
}
article::first-letter{
    font-size: 1.5em;
    color: red;
}

#welcome {
    padding-top: 5px;
    color: black;
    padding-bottom: 5px;
    text-align: center;
    font-size: 1.4em;
    color: black;
    text-shadow: red 2px 1px 5px;
}

aside {
    background-color: #333;
    color: wheat;

}

img {
    object-fit: cover;
    background-color: #333;
}

#addAside {
    display: block;
}

#addBottom {
    display: none;
}

.hero{
    min-height:100vh;
    background-image:url('img/hero.webp');
    background-size:cover;
    background-position:center;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    color:white;
    text-align:center;
    color: black;
       text-shadow: 3px 1px 8px red;
}

.hero h1{
font-size: 2.2em;
letter-spacing: 3px;
}
.hero p{
    font-size: 1.1em;
    letter-spacing: 2px;
}

/* *********************************/
/* SECTION QUIZZ                   */
/* *********************************/

.hide-for-start {
    display: block;
}


.start-container {
    display: flex;
    background-color: #222;
    text-align: center;
    color: green;
    font-family: fantasy;
    letter-spacing: 2px;
    font-size: 1.3em;
}

.start-container p {
    padding-top: 10px;
}

.start-container button {
    padding: 8px;
    background-color: darkslategrey;
    color: wheat;
    margin: 10px 0 10px;
    border-radius: 5px;
    letter-spacing: 2px;
}

.start-container button:hover {
    background-color: rgb(25, 102, 102);
    color: wheat;
}

.start-container {
    display: block;
}



.felicitation {
    display: none;
    font-family: fantasy;
    letter-spacing: 2px;
    font-size: 1.3em;
    color: black;
    text-shadow: red 2px 1px 5px;
    text-align: center;
}

.quizz-card {
    display: flex;
    background-color: #444;
    width: 80%;
    justify-self: center;
    margin-top: 15px;
    border-radius: 8px;
    overflow: hidden;
    height: auto;
}

form {
    justify-items: center;
    width: 100%;
    padding: 15px;
    overflow-x: hidden;
}

form p {
    color: white;
    font-family: fantasy;
    letter-spacing: 2px;
    font-size: .9em;
}

.item-1>*,
.item-2>*,
.item-3>*,
.item-4>*,
.item-5>* {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    cursor: pointer;
    padding: 8px;
    border: green solid 1px;
    border-radius: 5px;
    margin-bottom: 8px;
}

#q1-question,
#q2-question,
#q3-question,
#q4-question,
#q5-question {
    font-size: 1.1em;
    text-align: center;
    padding-bottom: 10px;
    color: wheat;
    cursor: default;
    border: none;
}

.control-reussite {
    display: flex;
}

.compteur-points {
    text-align: center;
    align-content: center;
    margin-left: auto;
    width: 80px;
    height: 50px;
    font-family: fantasy;
    font-size: 1.5em;
    margin-top: 5px;
    color:whitesmoke;
}

.compteur-temps {
    text-align: center;
    align-content: center;
    width: 120px;
    height: 50px;
    font-family: fantasy;
    font-size: 1.5em;
    margin-top: 5px;
    color: red;
}

.item-2,
.item-3,
.item-4,
.item-5 {
    display: none;
}

.hide {
    display: none;
}

.show {
    display: block;
}

#question-suivante {
    padding: 10px;
    border-radius: 5px;
    background-color:#222;
    color: wheat;
    letter-spacing: 2px;
    cursor: pointer;
}

/* #question-suivante:hover {
    background-color: rgb(25, 102, 102);
    color: wheat;
} */

.control-button {
    display: flex;
    margin-top: 10px;

}

.fausse {
    background-color: red;
    transition: .3s ease-in-out;
}

.correct {
    background-color: green;
    transition: .3s ease-in-out;
}

/*********************/
/*  SECTION RECETTES */
/*********************/

.item1 {
    grid-area: image;
}

.item2 {
    grid-area: nom;
}

.item3 {
    grid-area: idrecette;
}

.item4 {
    grid-area: area;
}

.item5 {
    grid-area: ingredients;
}

.item6 {
    grid-area: instructions;
}

.item7 {
    grid-area: control;
}

.item8 {
    grid-area: firstRecepe;
}

.grid-container {
    display: grid;
    max-width: 600px;
    margin-top: 20px;
    grid-template-areas:
        'control control control control control control'
        'firstRecepe firstRecepe firstRecepe firstRecepe firstRecepe firstRecepe'
        'image image image image image image'
        'idrecette idrecette nom nom area area'
        'ingredients ingredients ingredients ingredients ingredients ingredients'
        'instructions instructions instructions instructions instructions instructions';
    grid-gap: 5px;
    background-color: #222;
    justify-self: center;
    border: 2px solid black;
    border-radius: 5px;
    box-shadow: 3px 3px 5px 3px rgba(0, 0, 0, .8);
}

.grid-container>div {
    background-color: #555;
    padding: 20px;
    text-align: center;
    font-size: 16px;
}

.item5 li {
    text-align: left;
    color: whitesmoke;
    margin-left: 20px;
}

.grid-container .item2,
.grid-container .item4,
.grid-container .item3,
.grid-container .item5,
.grid-container .item6 {
    font-size: 1em;
    text-align: justify;
    color: whitesmoke;
}

.grid-container .item2,
.grid-container .item4,
.grid-container .item3 {
    text-align: center;
}


.item6 {
    white-space: pre-line;
}

.item7 {
    display: none;
}


.btnControl,
#select-main,
#Idsearch,
.btnControl-cocktail {
    padding: 6px 6px;
    font-size: 16px;
    margin: 5px;
    cursor: pointer;
    background-color: #222;
    color: whitesmoke;
    margin-bottom: 10px;
}

#search-byId {
    width: fit-content;
}

.btnFirstRecepe,
.btnFirstCocktail {
    padding: 10px 10px;
    font-size: 16px;
    margin: 5px;
    cursor: pointer;
    width: 70%;
    background-color: darkslategray;
    color: whitesmoke;
}

.btnFirstRecepe:hover,
.btnControl:hover,
.btnFirstCocktail:hover {
    background-color: transparent;
    color: whitesmoke;

}

.title {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
    color: darkslategray;
    margin-top: 10px;
}

#indexValue,
#totalRecette {
    font-size: 1.1em;
    color: whitesmoke;
    font-style: italic;
}

/**********************/
/* SECTION COCKTAILS  */
/**********************/

.cocktail-item-1 {
    grid-area: cocktailimage;
}

.cocktail-item-2 {
    grid-area: idcocktail;
}

.cocktail-item-3 {
    grid-area: cocktailname;
}

.cocktail-item-4 {
    grid-area: cocktailcategory;
}

.cocktail-item-5 {
    grid-area: cocktailingredients;
}

.cocktail-item-6 {
    grid-area: cocktailinstructions;
}

.cocktail-item-7 {
    grid-area: cocktailcontrol;
}

.cocktail-item-8 {
    grid-area: firstcocktail;
}

.grid-cocktail {
    display: grid;
    max-width: 600px;
    margin-top: 20px;
    grid-template-areas:
        'cocktailcontrol cocktailcontrol cocktailcontrol cocktailcontrol cocktailcontrol cocktailcontrol'
        'firstcocktail firstcocktail firstcocktail firstcocktail firstcocktail firstcocktail'
        'cocktailimage cocktailimage cocktailimage cocktailimage cocktailimage cocktailimage'
        'idcocktail idcocktail cocktailname cocktailname cocktailcategory cocktailcategory'
        'cocktailingredients cocktailingredients cocktailingredients cocktailingredients cocktailingredients cocktailingredients'
        'cocktailinstructions cocktailinstructions cocktailinstructions cocktailinstructions cocktailinstructions cocktailinstructions';
    grid-gap: 5px;
    background-color: #222;
    justify-self: center;
    border: 2px solid black;
    border-radius: 5px;
    box-shadow: 3px 3px 5px 3px rgba(0, 0, 0, .8);

}

.grid-cocktail>div {
    background-color: #555;
    padding: 20px;
    text-align: center;
    font-size: 16px;
}

.cocktail-item-2,
.cocktail-item-3,
.cocktail-item-4 {
    font-size: 1em;
    text-align: justify;
    color: whitesmoke;
}

.cocktail-item-5 {
    font-size: 1em;
    color: whitesmoke;
    text-align: left;
}

.cocktail-item-6 {
    font-size: 1em;
    white-space: pre-line;
    color: whitesmoke;
    text-align: left;
}

.cocktail-item-7 p {
    display: inline-block;
    margin: 0 5px 5px 0;
    cursor: pointer;
    padding: 5px 10px;
    background-color: #444;
    color: whitesmoke;
    border: 1px solid black;
    border-radius: 3px;
}

.cocktail-item-7 p:hover {
    background-color: black;
}

#cocktail-info {
    background-color: transparent;
    padding: 8px;
    border: 1px solid black;
    border-radius: 3px;
    width: fit-content;
    margin: 0 auto;
    margin-bottom: 10px;
    color: whitesmoke;
}

.btnControl-cocktail {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

#btnAvancer-cocktail,
#btnReculer-cocktail {
    width: 35%;
    margin-bottom: 10px;
}

.cocktail-choice {
    margin: 0 5px 5px 0;
    cursor: pointer;
    padding: 5px 10px;
    color: whitesmoke;
    border: 1px solid black;
    border-radius: 3px;
}

.hide {
    display: none;
}

/**********************/
/* SECTION GALLERIE */
/**********************/

.gallerie {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    align-items: center;
}

.gallerie>div {
    padding: 20px;
    text-align: center;
    font-size: 16px;
}

.gallery-controls {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding-top: 10px;
}

.gallery-controls button {
    padding: 10px 20px;
    background-color: #222;
    color: whitesmoke;
    border: 1px solid black;
    border-radius: 3px;
    cursor: pointer;
}

/* *********************************/
/* SECTION JEU MAHJONG             */
/* *********************************/

.grid-mahjong {
    display: grid;
    grid-template-columns: repeat(6, 65px);
    grid-template-rows: repeat(6, 65px);
    justify-content: center;
    align-items: center;
    justify-items: center;
    border: 3px solid transparent;
    margin-top: 25px;
    gap: 3px;
    padding-bottom: 25px;
}


.change-order {
    .mahjong-tile.tile1 {
        order: 22;
    }

    .mahjong-tile.tile30 {
        order: 1;
    }

    .mahjong-tile.tile8 {
        order: 9;
    }

    .mahjong-tile.tile22 {
        order: 18;
    }

    .mahjong-tile.tile18 {
        order: 6;
    }

    .mahjong-tile.tile12 {
        order: 30;
    }
}

.grid-mahjong>* img {
    display: block;
    width: 100%;
    margin: auto;
    object-fit: contain;
    object-position: center;
    cursor: pointer;
    overflow: hidden;
    
}

.mahjong-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 5px;
    color: darkslategray;
    
}

.mahjong-controls #score,
#tries {
    font-size: 1.5em;
    color: red;
        border: 1px solid black;
        width: 2em;
        text-align: center;
        margin-left: 5px;
}

.majhong-tries {
    display: flex;
    align-items: center;
    justify-content: center;
color: darkslategray;

}

.end-game {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: black;
    font-family: fantasy;
    letter-spacing: 3px;
    text-shadow: 3px 1px 8px red;
    font-size: 1.2em;
    margin-top: 15px;
}

.end-game #restart-game {
    margin-top: 10px;
    padding: 10px;
    background-color: #222;
    color: wheat;
}

.blur {
    filter: opacity(.2) blur(8px);
}

.hide {
    display: none;
}

.rotate90-tiles {
    transform: rotate(90deg);
}

.rotate180-tiles {
    transform: rotate(180deg);
}

.rotate90-mahjong {
    transform: rotate(90deg);
}



/* *********************************/
/* SECTION POUR ADAPTER LA GRILLE CSS 
EN FONCTION DES GRANDEURS D'ÉCRANS */
/* *********************************/
@media(max-width:700px) {
    .container {
        display: block;
        overflow: none;
    }

    nav {
        padding: 15px;
    }

    nav a {
        display: inline;
        margin:2px;
        padding: 3px;
        font-size: 1em;
        background-color: transparent;
    }

    nav a:hover {
        opacity: 0;
    }

    
    #addAside {
        display: none;
    }

    .bottomAdd {
        position: relative;
        bottom: 0;
        left: 0;
        width: 100%;
        margin-top: 10px;
        margin-bottom: 0;
        /* z-index: 10; */
    }

    #addBottom {
        display: inline;
        width: 100%;
        margin-bottom: 5px;
    }

    footer {
        display: none;
    }

    .grid-mahjong {
        grid-template-columns: repeat(6, 55px);
        grid-template-rows: repeat(6, 55px);
    }


}