/*------------------------------------ THEME COLOR NORMAL/DARK ------------------------------------*/

/*------------- COULEURS PAR DEFAUT -------------*/

:root {
    --border-site-color: #000000;

    --body-bg-color: #f4f0f0;

    --header-bg-color: #fffbfa;  
    --h1-color: #3E0303;
    --slogan-text-color: #3E0303;
    --slogan-side-color: #000000;

    --nav-link-color: #5f3030;
    --nav-link-hover-color: #000000;
    --nav-text-color: #5f3030;

    --main-bg-color: #f4f0f0;   

    --footer-bg-color: #fffbfa;
    --footer-link-color: #000000;
    --footer-tag-color: #4d4d4d;

    --btn1-bg-color: #fffbfa;
    --btn1-text-color: #3E0303;
    --btn1-border-color: #3E0303;

    --btn1-bg-hover-color: #3E0303;
    --btn1-text-hover-color: #fffbfa;
    --btn1-border-hover-color: #fffbfa;

    --btn2-bg-color: #5f3030;
    --btn2-text-color: #fffbfa;

    --btn2-bg-hover-color: #3b1d1d;
    --btn2-text-hover-color: #fffbfa;

    --burger-toggle-color: #3E0303;
}

/*------------- COULEURS DARK MODE -------------*/

.dark-mode {
    --border-site-color: #fffbfa;

    --body-bg-color: #2e2626;

    --header-bg-color: #000000;
    --h1-color: #fffbfa;
    --slogan-text-color: #fffbfa;
    --slogan-side-color: #5f3030;

    --nav-link-color: #fffbfa;
    --nav-link-hover-color: #5f3030;
    --nav-text-color: #fffbfa;

    --main-bg-color: #000000;

    --footer-bg-color: #000000;
    --footer-link-color: #fffbfa;
    --footer-tag-color: #fffbfa;

    --btn1-bg-color: #3E0303;
    --btn1-text-color: #fffbfa;
    --btn1-border-color: #fffbfa;

    --btn1-bg-hover-color: #fffbfa;
    --btn1-text-hover-color: #3E0303;
    --btn1-border-hover-color: #3E0303;

    --btn2-bg-color: #3E0303;
    --btn2-text-color: #fffbfa;

    --btn2-bg-hover-color: #5f3030;
    --btn2-text-hover-color: #fffbfa;

    --burger-toggle-color: #fffbfa;
}


/*------------------------------------ GENERAL ------------------------------------*/

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

html, body {
    height: 100%; 
    margin: 0;
    padding: 0;
    overflow-x: hidden; 
    background-color: var(--body-bg-color);
}

body.scrollable {
    overflow-y: auto; 
    height: auto;
    min-height: 100vh; 
}

#page-container {
    display: grid;
    grid-template-areas:
        "header"
        "main"
        "footer";
    grid-template-rows: auto 1fr auto; 
    height: 100vh;
    font-family: Georgia, serif;
    background-color: var(--bg-color);
    color: #000000;
}



/*------------------------------------ FONTS ------------------------------------*/

h1 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    font-style: italic;
}

h2 {
    font-size: 1.8rem;
    margin-bottom: 2rem;
}

h3 {
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
}

p, a {
    font-size: 1rem;
    line-height: 1.5em;
}

/*------------------------------------ BUTTONS ------------------------------------*/

.btn-1-overlay {
    background-color: var(--btn1-bg-color);
    color: var(--btn1-text-color);
    border: 2px solid  var(--btn1-border-color);
    padding: 0.6rem 1.5rem;
    border-radius: 25px;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
    z-index: 3;
    transition: all .3s;
}

.btn-1-overlay:hover {
    background: var(--btn1-bg-hover-color);
    color: var(--btn1-text-hover-color);
    border-color: var(--btn1-border-hover-color);
}

.btn-1 {
    display: inline-block;
    background-color: var(--btn1-bg-color);
    color: var(--btn1-text-color);
    border: 2px solid  var(--btn1-border-color);
    padding: 0.6rem 1.5rem;
    border-radius: 25px;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
    transition: all .3s;
}

.btn-1:hover {
    background: var(--btn1-bg-hover-color);
    color: var(--btn1-text-hover-color);
    border-color: var(--btn1-border-hover-color);
}


button.btn-1-reverse {
    background-color: var(--btn1-bg-hover-color);
    color: var(--btn1-text-hover-color);
    border: 2px solid  var(--btn1-border-hover-color);
    padding: 0.6rem 1.5rem;
    border-radius: 25px;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
    transition: all .3s;
}
  

button.btn-1-reverse:hover {
    background: var(--btn1-bg-color);
    color: var(--btn1-text-color);
    border-color: var(--btn1-border-color);
}




button.btn-2 {
    width: 100%; /* Le bouton prend toute la largeur */
    padding: 0.6rem; /* Hauteur du bouton */
    background-color: var(--btn2-bg-color); /* Couleur bordeaux foncé */
    color: var(--btn2-text-color); /* Texte clair */
    border: none; /* Pas de bordure par défaut */
    border-radius: 25px; /* Coins très arrondis */
    font-weight: bold; /* Texte en gras */
    cursor: pointer; /* Change le curseur au survol */
    transition: background-color 0.3s ease; /* Animation douce pour le hover */
}
  
button.btn-2:hover {
    background-color: var(--btn2-bg-hover-color); /* Couleur plus sombre au survol */
}

button.btn-toggle {
    font-size: 1rem;
    padding: 0.6rem; /* Hauteur du bouton */
    background-color: #5f3030; /* Couleur bordeaux foncé */
    color: #fffbfa; /* Texte clair */
    border-radius: 50%;
    cursor: pointer; /* Change le curseur au survol */
}
  
button.btn-toggle:hover {
    background-color: #3b1d1d; /* Couleur plus sombre au survol */
}


.like-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #5f3030;
    transition: color 0.3s;
    margin: 1rem 0;
}

.like-btn:hover {
    color: #3E0303;
}


/*------------------------------------ BURGER ------------------------------------*/

.burger-panel {
    position: absolute;
    right: 2rem;
    background-color: white;
    padding: 1rem;
    border: 1px solid #ccc;
    border-radius: 8px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    text-align: center;
}

.burger-panel a {
    color: #5f3030;
}

.burger-panel a:hover {
    color: #000000;
}

#burger-toggle {
    color: var(--burger-toggle-color);
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
}

.hidden {
  display: none;
}
  


/*------------------------------------ HEADER ------------------------------------*/

.header {
    grid-area: header;
    display: grid;
    grid-template-columns: 1fr auto 1fr; 
    align-items: center;
    padding: 1rem 2vw;
    background: var(--header-bg-color);
    border-bottom: 1px solid;
    border-color: var(--border-site-color);
}

.logo-header {
    grid-column: 1;
    width: 150px;
    height: auto;
    justify-self: start;
}

.header-title {
    grid-column: 2;
    justify-self: center;
    text-align: center;
}

.header-title h1 {
    color: var(--h1-color);
}

.slogan {
    color: var(--slogan-text-color);
    font-style: italic;
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
}

.slogan::before,
.slogan::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--slogan-side-color);
    max-width: 120px;
}

nav {
    grid-column: 3;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 1rem; /* espace entre les éléments */
    height: 100%;
}

nav a {
    color: var(--nav-link-color);
    text-decoration: none;
    font-weight: bold;
    transition: color .3s;
}

nav a:hover {
    color: var(--nav-link-hover-color);
}

nav p {
    color: var(--nav-text-color);
    font-weight: bold;
}


/*------------------------------------ FOOTER ------------------------------------*/

.footer {
    grid-area: footer;
    background: var(--footer-bg-color);
    text-align: center;
    padding: 1rem;
    border-top: 1px solid;
    border-color: var(--border-site-color);
}

.footer-links {
    display: flex;       
    justify-content: center; 
    gap: 1rem;         
}

.footer-links a {
    color: var(--footer-link-color);
}

.footer-links a:hover {
    text-decoration: none; 
}
  
.footer p {
    font-size: 0.7rem;
    color: var(--footer-tag-color);
}



/*------------------------------------ INDEX ------------------------------------*/

.index-image-container {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100%;
    position: relative;
    overflow: hidden;
}

.index-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute; /* Ajout pour s'assurer que l'image ne recouvre pas l'overlay */
    top: 0;
    left: 0;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    text-align: center;
    padding-bottom: 1rem;
    z-index: 2;
}

.index-intro-text {
    color: #ffffff;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    z-index: 3;
}


/*------------------------------------ MAIN ------------------------------------*/

.main {
    grid-area: main;
    display: grid;
    place-items: center; 
    background-color: var(--main-bg-color);  
    padding: 3rem 0; 
    overflow-y: auto; 
}

.main-index {
    padding: 0;
    overflow: hidden;
}


/*------------------------------------ MAIN RED CONTAINER ------------------------------------*/

.main-red-container {
    width: 800px;                      
    padding: 2rem;                   /* Espacement interne */
    background-color: #3E0303;         
    border: 1px solid #e8dcd5;        
    border-radius: 10px;              
    box-shadow: 0 2px 8px rgba(0, 0, 0, 1); 
    text-align: justify;           
    color: #fffbfa;   

    margin-top: auto;
    margin-bottom: auto;           
}

.main-red-container a {
    color: #fffbfa;
}

.main-red-container a:hover {
    text-decoration: none;
}

/*------------------------------------ MAIN PINK CONTAINER ------------------------------------*/



.main-pink-container {
    min-width: 600px;                      /* Largeur fixe */
    max-width: 1200px; 
    padding: 2.5rem;                   /* Espacement interne généreux */
    background-color: #fffbfa;
    border: 1px solid #e8dcd5;         /* Bordure claire */
    border-radius: 10px;               /* Coins arrondis */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 1); /* Ombre foncée */
    color: #000000;                   /* Texte clair */
    justify-content: center;
    align-items: center;
}

.main-pink-container h2 {
    text-align: center;
    color: #5f3030;
}

.main-pink-container h3 {
    color: #5f3030;
}

/*------------------------------------ MAIN PINK CONTAINER FORM ------------------------------------*/

.main-pink-container legend {
    font-weight: bold; 
    margin-bottom: 0.5rem; 
    color: #5f3030; 
}

.main-pink-container label {
    display: block; 
    color: #000000;
    margin-bottom: 0.2rem;
}

.main-pink-container input[type="text"],
.main-pink-container input[type="number"],
.main-pink-container input[type="email"],
.main-pink-container input[type="password"], select{
    width: 100%; /* Largeur totale du conteneur */
    padding: 0.6rem; /* Espacement intérieur */
    border: 1px solid #5f3030;         
    border-radius: 5px;     
    margin-bottom: 2rem;  
}


.main-pink-container .link {
    text-align: center;
    margin-top: 1rem; /* Espace au-dessus du lien */
}

.main-pink-container .link a,
.main-pink-container a.link {
    color: #5f3030;
    text-decoration: underline; 
}
  
.main-pink-container .link a:hover,
.main-pink-container a.link:hover {
    text-decoration: none;
}



fieldset {
    border: none; /* Pas de bordure autour du fieldset */
    margin-bottom: 1rem; /* Espace entre les blocs de formulaire */
}




.options {
    width: 100%;
    display: flex; /* Affichage en ligne */
    flex-wrap: wrap; /* Permet le retour à la ligne */
    gap: 1rem; /* Espace entre les options */
    margin-top: 0.3rem; /* Espace au-dessus des options */
}
  

#error-message {
    color: #5f3030; 
    font-weight: bold; 
    text-align: center; 
    margin-top: 1rem; 
}

#form-sections {
    display: none; /* Masque cette section par défaut */
}


/*------------------------------------ GRID CARD MAIN ------------------------------------*/


.main-inside-grid {
    display: grid; /* Utilise le système de grille */
    grid-template-columns: repeat(3, 1fr); /* 3 colonnes égales */
    gap: 2rem; /* Espace entre les colonnes et lignes */
}


.card-box {
    background-color: #ffffff;
    border: 1px solid #e8dcd5;
    border-radius: 10px;
    padding: 1.5rem;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    gap: 1rem;
}

.card-box img {
    width: 100%;
    height: auto;
    max-height: 200px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 1rem;
}



.detail-container {
    text-align: center;
}

.detail-container-description {
    text-align: center;
    margin: 2.5rem 0;
}

.detail-container img {
    width: 100%;
    height: 600px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 2.5rem;
}

/*------------------------------------ CONTACT FORM ------------------------------------*/

.contact-form form {
    display: grid;
    gap: 0.6rem;          
  }

.contact-form h2 {
    text-align: center;
}

.contact-form label {               
    font-weight: bold;           
    color: #fffbfa;               
}
  

.contact-form input,
.contact-form textarea {
    width: 100%;                     
    padding: 0.6rem;                  
    border: 1px solid #fffbfa;          
    border-radius: 6px;  
    font-size: 1rem;            
}
  

.contact-form textarea {
    min-height: 180px;        
    resize: vertical;                
}

.contact-form button {
    justify-self: center;   
    margin-top: 2rem;
}



/*------------------------------------ FAQ ------------------------------------*/

.faq-container {
    display: grid;
    gap: 0.6rem;  
}

.faq-title {
    text-align: center;
    margin-bottom: 2rem;
}

.faq-title h2 {
    margin-bottom: 0;
}

.faq-question {
    width: 100%;                  
    padding: 1rem;              
    background-color: #5f3030;       
    color: #fffbfa;                    
    border: none;                       
    text-align: left;              
    font-weight: bold;                  
    cursor: pointer;            
    border-radius: 5px;              
    transition: background-color 0.3s ease; 
    margin: 0.5rem 0;  
    font-family: Georgia, serif;
    font-size: 1rem;
}
  

.faq-question:hover {
    background-color: #3b1d1d;         
}
  

.faq-answer {
    display: none;                    
    padding: 1rem;                     
    background-color: #fffaf9;         
    color: #3b1d1d;                    
    border-radius: 5px;   
    font-size: 1rem;     
}

.faq-contact-help a {
    text-decoration: underline;   
}

.faq-contact-help a:hover {
    text-decoration: none;   
}

.faq-links ul {
    list-style: disc inside;           
    padding-left: 1rem;          
}





/*------------------------------------ MENU ------------------------------------*/

.menu-section {
  margin-bottom: 3rem;
}


.menu-card {
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 2rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.menu-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.menu-card h3 {
  text-align: center;
  margin: 1rem 0 0.5rem;
  color: #5f3030;
}

.menu-card h4 {
  text-align: center;
  margin-bottom: 0.5rem;
}

.menu-info {
  padding: 1rem;
  text-align: center;
}


.notifications-box {
  background-color: #ffffff;
  border: 1px solid #e8dcd5;
  border-radius: 10px;
  padding: 1.5rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  margin-bottom: 2rem;
}

.notifications-box h3 {
  text-align: center;
}

.notifications-list {
  list-style: none;
  padding-left: 0;
  text-align: left;
  line-height: 3rem;
}



.notifications-list a {
  color:  #000000;
}

.notifications-list a:hover {
  text-decoration: none;
}



/*------------------------------------ MESSAGES ------------------------------------*/


.message-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 2rem;
}

.message-avatar {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 1rem;
}

.message-box {
  background-color: ffffff;
  padding: 1rem;
  border: 1px solid #cccccc;
  border-radius: 10px;
  width: 100%;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  text-align: center;
}

/*------------------------------------ MESSAGES CONVERSATION ------------------------------------*/

.chat-message {
  max-width: 70%;
  margin: 1rem 0;
  padding: 1rem;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  border: 1px solid #cccccc;
}

a.profil-link {
  text-decoration: underline;
  color: #5f3030;
}

a.profil-link:hover {
  text-decoration: none;
}

/* Alignement : messages envoyés vs reçus */
.chat-message.to {
  margin-left: auto;
  background-color: #ffffff;
  text-align: right;
}
.chat-message.from {
  margin-right: auto;
  background-color: #ffffff;
  text-align: left;
}

.chat-date {
  display: block;
  font-size: 0.8rem;
  color: #888888;
  margin-top: 0.25rem;
}


/* Formulaire de réponse */
form textarea#reply {
  width: 100%;
  max-width: 100%;
  border: 1px solid #cccccc;
  border-radius: 10px;
  padding: 0.8rem;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  resize: vertical;
}

/* Bouton envoyer */
form button[type="submit"] {
  display: block;
  margin-left: auto;
  margin-right: 0;
}

/* Bouton retour */
a.btn-1:last-of-type {
  margin-top: 2rem;
  display: inline-block;
}





/*------------------------------------ MEDIA ------------------------------------*/



@media screen and (max-width: 780px) {

    h2 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.2rem;
    }

    .index-intro-text, p, a {
        font-size: 0.9rem;
    }

    .header {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 1rem;
    }

    .logo-header {
        width: 100px;
        margin-bottom: 1rem;
    }

    .header-title {
        display: none;
    }


    .btn-toggle {
        top: 20px;
        right: 20px;
        position: absolute;
    }

    .main-pink-container,
    .main-red-container {
        width: 90%;  
        padding: 1.5rem;  
        min-width: unset;            
    }

    .main-inside-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr); 
    gap: 2rem; 
}

    .profils-grid {
      grid-template-columns: 1fr;
    }
  
    .container,
    .login-container,
    .messages-container,
    .chat-container,
    .event-detail-container {
      padding: 1rem;
    }
  
    .contact-form,
    .footer-container {
      width: 90%;
      padding: 1.5rem;
    }
}