@import url(https://fonts.googleapis.com/css?family=Indie+Flower);
@import url(https://fonts.googleapis.com/css2?family=Raleway:wght@200);

* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

body {
    width: 100%;
    height: 100%;
    margin: 0;
    font-family: "Indie Flower", cursive;
    /*font-family: Raleway, "Indie Flower", cursive;*/
    letter-spacing: 0.1mm;
    background-image: url("../img/bois.bmp");
    /*background-image: linear-gradient(90deg, #e8b6b6, 2px, rgba(255, 255, 255, 0), 2px, rgba(255, 255, 255, 0)), linear-gradient(0, #d9eaf3, 1px, rgba(255, 255, 255, 0), 2px, rgba(255, 255, 255, 0));*/
    /*background-position: 4mm 0;*/
    /*background-size: 100% 2.4mm;*/
    color: #111;
}

.page {
    min-height: 297mm;
    margin: auto;
    width: 80%;
}

#recette-content {
    background: rgba(255, 255, 255, 0.75);
    padding: 10px 75px;
    /*margin-bottom: 20px;*/
}

h1 {
    font-size: 10mm;
    font-weight: 700;
    margin-bottom: 2mm;
}

h2 {
    display: inline-block;
    font-size: 8mm;
    font-weight: 700;
    margin-bottom: 0.6mm;
    border-bottom: 2px solid #111;
}

ol, ul {
    font-size: 6mm;
    font-weight: 400;
    padding-left: 0.5mm;
    margin-bottom: 2.8mm;
}

ol li, ul li {
    margin-bottom: 0.6mm;
}

hr {
    border: 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
    background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
    background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
    background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
}

/* Mise en page de la liste ## Préparation */
ol {
    list-style: none;
    padding: 0;
    margin: 0;
}

ol li {
    display: flex;
    align-items: center; /* Centre verticalement le contenu de la ligne */
    margin-bottom: 20px; /* Espace entre les éléments de liste */
}

ol li img {
    max-width: 200px; /* Ajustez selon la taille souhaitée de l'image */
    height: auto;
    border: 2px solid white;
}

ol li:nth-child(odd) {
    flex-direction: row; /* Texte à gauche, image à droite */
}

ol li:nth-child(even) {
    flex-direction: row-reverse; /* Image à gauche, texte à droite */
}

ol li:nth-child(odd) img:first-child {
    margin-right: 5px;
}

ol li:nth-child(even) img:first-child {
    margin-left: 5px;
}

ol li:nth-child(odd) img:last-child {
    margin-right: 20px;
}

ol li:nth-child(even) img:last-child {
    margin-left: 20px;
}

/* Clear floats for any additional elements */
ol li::after {
    content: "";
    display: table;
    clear: both;
}

/* Keen Slider */
/* Style pour le conteneur du slider */
.keen-slider {
    overflow: hidden;
    margin-bottom: 20px;
}

/* Style pour chaque slide individuel */
.keen-slider__slide {
    display: flex; /* Utilisez flexbox pour centrer l'image */
    justify-content: center; /* Centre horizontalement */
    align-items: center; /* Centre verticalement */
}

/* Style pour les images à l'intérieur des slides */
.keen-slider__slide img {
    max-width: 100%; /* Empêche l'image de dépasser la largeur du conteneur */
    max-height: 100%; /* Empêche l'image de dépasser la hauteur du conteneur */
    object-fit: contain; /* Garantit que l'aspect ratio de l'image est préservé */
    border: 2px solid white;
}


/* Modal tingle */
.tingle-modal-box {
    text-align: center;
    background-color: transparent;
}

.tingle-modal-box img {
    border: 2px solid white;
}

@media (max-width: 768px) {
    .page {
        width: 100%;
    }
    .tingle-modal-box {
        width: 100%;
    }
    ol li img {
        max-width: 150px;
    }
    ol, ul {
        font-size: 3mm;
    }
    h1 {
        font-size: 6mm;
    }
    h2 {
        font-size: 4mm;
    }
    #recette-content {
        padding: 10px 20px;
    }
}