@import url(//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800);
@import url(//fonts.googleapis.com/css?family=Oleo+Script:400,700);
/*
body {
	background: white  ;/* #e7e6d4;
	font: 15px 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
	line-height: 1.428571429;
	color: #888779;
}
*/
body {
    color:#606c76;
    font-family:'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    font-size:1.6em;
    font-weight:300;
    letter-spacing:.01em;
    line-height:1.6
  }

/* Main */
.content {
    padding: 2rem;
    background: white ; /* var(--color-white);*/
    border-radius: 0.4rem;
    /* Thanks Stripe */
    box-shadow: 0 7px 14px 0 rgba(60, 66, 87, 0.1),
        0 3px 6px 0 rgba(0, 0, 0, 0.07);
}
.content form {
    margin: 0;
}


.image-container {
    position: relative;
    display: inline-block;
    margin-right: auto;
    margin-left: auto;
    width: 100%;
    /* overflow: hidden; /* Cache le texte en dehors de l'image */
    }
    
    /* TEXTE */
    .overlay-text {
    font-size: 14px;
    position: absolute;
    top: 5%;
    left: 5%;
    /*transform: translate(-50%, -50%);*/
    text-align: left;
    color: white;
    background-color: rgba(0, 0, 0, 0.5); /* Transparent background for text */
    padding: 5px;
    opacity: 0; /* Cache le texte par défaut */
    border-radius: 5px;
    transition: opacity 0.5s ease, transform 0.5s ease; /* Animation pour opacité et translation */
    }

    .overlay-text h2 {
        color: white;
        font-size: 18px;
        padding: 3px;
    }

    .image-container:hover .overlay-text,
    .image-container:focus .overlay-text {
        opacity: 1; /* Affiche le texte au survol */
        /*transform: translate(-50%, -50%) translateY(0); /* Annule la translation verticale */
    }


    /* VIEW */
    .overlay-view {
        font-size: 14px;
        position: absolute;
        top: 95%;
        left: 0%;
        transform: translate(10px, -45px);
        text-align: center;
        color: white;
        background-color: rgba(241, 241, 241, 0.7); /* Transparent background for text */
        padding: 5px;
        opacity: 0; /* Cache le texte par défaut */
        border-radius: 5px;
        transition: opacity 0.5s ease, transform 0.5s ease; /* Animation pour opacité et translation */
        }

        
    .image-container:hover .overlay-view,
    .image-container:focus .overlay-view {
        opacity: 1; /* Affiche le texte au survol */
        transform: translate(10px, -45px) translateY(0); 
        /*transform: translate(-50%, -50%) translateY(0); /* Annule la translation verticale */
    }

     /* MODEL */
     .overlay-modal {
        font-size: 14px;
        position: absolute;
        top: 95%;
        left: 50%;
        transform: translate(-50%, -45px);
        text-align: center;
        color: white;
        background-color: rgba(241, 241, 241, 0.7); /* Transparent background for text */
        padding: 5px;
        opacity: 0; /* Cache le texte par défaut */
        border-radius: 5px;
        transition: opacity 0.5s ease, transform 0.5s ease; /* Animation pour opacité et translation */
        }

        
    .image-container:hover .overlay-modal,
    .image-container:focus .overlay-modal {
        opacity: 1; /* Affiche le texte au survol */
        transform: translate(-50%, -45px) translateY(0); 
        /*transform: translate(-50%, -50%) translateY(0); /* Annule la translation verticale */
    }

     /* EDIT */
     .overlay-edit {
        font-size: 14px;
        position: absolute;
        top: 95%;
        right: 0%;
        transform: translate(-10px, -45px);
        text-align: center;
        color: white;
        background-color: rgba(241, 241, 241, 0.7); /* Transparent background for text */
        padding: 5px;
        opacity: 0; /* Cache le texte par défaut */
        border-radius: 5px;
        transition: opacity 0.5s ease, transform 0.5s ease; /* Animation pour opacité et translation */
        }

        .image-container:hover .overlay-edit,
        .image-container:focus .overlay-edit {
            opacity: 1; /* Affiche le texte au survol */
            transform: translate(-10px, -45px) translateY(0); 
            /*transform: translate(-50%, -50%) translateY(0); /* Annule la translation verticale */
        }

        /* TITRE */

    .overlay-title {
        position: absolute;        
        top: 15%;
        left: 15%;
        transform: translate(-14%, -14%);
        text-align: center;
        color: white;
        opacity: 1; /* Cache le texte par défaut */

        /*background-color: rgba(0, 0, 0, 0.5); /* Transparent background for text */
        /*padding: 0px 10px 0px 10px; 
        border-radius: 5px;*/        
        }

    .overlay-title h2 a {
        color: white;
        font-size: 80px;
        padding: 3px;
        text-shadow: 
        -1px -1px 0 black, /* Ombre en haut à gauche */
        1px -1px 0 black,  /* Ombre en haut à droite */
        -1px 1px 0 black,  /* Ombre en bas à gauche */
        1px 1px 0 black;   /* Ombre en bas à droite */
    }

    .overlay-title h2 a:hover,
    .overlay-title h2 a:focus {
        color: orange;
    }

    .image-container:hover .overlay-title,
    .image-container:focus .overlay-title {
        opacity: 0; /* Affiche le texte au survol */
        /*transform: translate(5px, -45px) translateY(0); 
        /*transform: translate(-50%, -50%) translateY(0); /* Annule la translation verticale */
    }
     
    @media (max-width: 768px) {
       .overlay-text {
       font-size: 12px;
       padding: 3px;
    
       }
       .overlay-text h2 {
        font-size: 14px;
        padding: 3px;
       }
    }

    #menu_nav {
        background-color: #74992e !important ;
       
    }


    .square {
        aspect-ratio: 1 / 1; /* Rend le div carré */
        width: 100%; /* Utilise toute la largeur de la colonne */
    }

    .photo-wrapper {
        position: relative;
        overflow: hidden;
        width: 100%;
        padding-top: 100%; /* Carré parfait, hauteur égale à la largeur */
    }
    
    .photo-wrapper img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover; /* Gère les images de tailles différentes */
        border-radius: 8px; /* Coins arrondis (facultatif) */
    }

        /* TEXTE */
        .overlay-text-wrapper {
            font-size: 18px;
            position: absolute;
            top: 5%;
            left: 5%;
            /*transform: translate(-50%, -50%);*/
            text-align: left;
            color: rgb(255, 255, 255);
            background-color: rgba(3, 59, 85, 0.5); /* Transparent background for text */
            padding: 5px;
            opacity: 1; /* Cache le texte par défaut */
            border-radius: 5px;
            transition: opacity 0.5s ease, transform 0.5s ease; /* Animation pour opacité et translation */
            }

/* Style pour les champs avec une erreur */
/* Style pour les champs avec une erreur */
.input.error .form-control {
    border-color: #dc3545; /* Rouge Bootstrap pour les erreurs */
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25); /* Ombre rouge légère */
    margin-bottom: 0; /* Supprime l'espace en dessous du champ */
}

/* Style pour le message d'erreur */
.input.error .error-message {
    color: #dc3545; /* Rouge pour le texte du message d'erreur */
    font-size: 0.875rem; /* Taille légèrement plus petite pour les messages */
    margin: 0; /* Supprime tout espace autour du message */
    padding-top: 0px; /* Ajoute un léger espace pour éviter que le texte ne touche le champ */
    padding-bottom:10px;
    line-height: 0; /* Gère la hauteur de ligne pour une apparence compacte */
}


/* TOAST */
.hidden {
    display: none !important;
}

/* Animation pour afficher et masquer le toast */
@keyframes slideIn {
    from {
        transform: translateX(100%); /* Départ hors de l'écran à droite */
        opacity: 0;
    }
    to {
        transform: translateX(0); /* Entrée dans l'écran */
        opacity: 1;
    }
}

@keyframes slideOut {
    from {
        transform: translateX(0); /* Début à sa position normale */
        opacity: 1;
    }
    to {
        transform: translateX(100%); /* Sortie hors de l'écran à droite */
        opacity: 0;
    }
}

@media (max-width: 576px) {
    body {
        font-size: 16px; /* Réduisez selon vos besoins */
    }

    h1 {
        font-size: 20px;
    }

    h2 {
        font-size: 19px;
    }

    h3 {
        font-size: 18px;
    }

    h4 {
        font-size: 17px;
    }

    p {
        font-size: 16px;
    }
}

@media (min-width: 577px) and (max-width: 768px) {
    body {
        font-size: 18px; /* Réduisez légèrement par rapport à la taille par défaut */
    }

    h1 {
        font-size: 24px;
    }

    h2 {
        font-size: 22px;
    }

    h3 {
        font-size: 20px;
    }

    h4 {
        font-size: 19px;
    }

    p {
        font-size: 18px;
    }
}

.form-check-input {
    border: var(--bs-border-width) solid #2274c7 !important;
}

@keyframes grow-shrink {
    0% { font-size: 1.3em; }
    50% { font-size: 1.35em; }
    100% { font-size: 1.3em; }
}

.text-animate {    
    display: inline-block;
    animation: grow-shrink 4s infinite ease-in-out;
}

.text-animate a {
    color:#7b55dc !important;
}

.text-animate a:hover {
    color:#dc9f55 !important;
}

#date-button {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Pagination Style */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px 0;
}

.pagination a,
.pagination span {
    display: inline-block;
    padding: 5px 10px;
    margin: 0 3px;
    font-size: 0.9em;
    font-weight: 300;
    text-decoration: none;
    color: #606c76;
    background-color: white;
    border: 1px solid #74992e;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.pagination a:hover {
    background-color: #74992e;
    color: white;
    border-color: #606c76;
}

.pagination .active > .page-link, 
.pagination .page-link.active {
    z-index: 3;
    color: var(--bs-pagination-active-color);
    background-color: var(--bs-pagination-active-bg);
    border-color: var(--bs-pagination-active-border-color);
    font-weight: 500;
}

.pagination .disabled {
    color: #ccc;
    background-color: #f0f0f0;
    border-color: #ddd;
    pointer-events: none;
}

/* ANAGLYPH */
.color-box {
    width: 300px;
    height: 200px;
    border: 1px solid #000;
}
#redBox { background-color: rgb(255, 0, 0); } /* Rouge initial */
#cyanBox { background-color: rgb(0, 255, 255); } /* Cyan initial */