@charset 'UTF-8';/* :root {
  --bg-color: #ffffff;
  --text-color: #000000;
  --primary-color: #2563eb;
  --hover-color: #1e40af;
  --dark-bg-color: #1a202c;
  --dark-text-color: #ffffff;
  --dark-hover-color: #4a90e2;
  --transition-duration: 0.3s;
  --border-radius: 0.375rem;
}

.dark {
  --bg-color: var(--dark-bg-color);
  --text-color: var(--dark-text-color);
  --primary-color: var(--dark-hover-color);
  --hover-color: var(--dark-hover-color);
} */

body {
  background-color:rgb(0, 0, 0);
  color: var(--text-color);
  transition: background-color var(--transition-duration), color var(--transition-duration);
}

.header {
  background-color:#000000;
  color: var(--text-color);
}



/* Bouton mobile */
/* .nav__mobile-button {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  border-radius: var(--border-radius);
  transition: background-color var(--transition-duration);
} */

/* .nav__mobile-button:hover {
  background-color: var(--hover-color);
} */

/* Affichage du bouton hamburger en mode mobile */
@media (max-width: 760px) {
  .nav__menu--desktop {
    display: none;
  }

  .nav__mobile-button {
    display: flex;
  }
}

/* ----- Navigation générale ----- */
.nav {
  max-width: 10xl;
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  justify-content: flex-start; /* ou space-between selon ton besoin */
  align-items: center;
  height: 8rem;
  background: black;
}

/* Logo */
.nav__logo {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 1.25rem;
  font-weight: bold;
}

.nav__logo img {
  width: 200px;
  height: 50px;
}

/* Menu desktop */
.nav__menu--desktop {
  display: flex;
  gap: 1rem;
  margin-left: auto;
}

/* Items communs */
.nav__menu-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  transition: background-color 0.3s;
  background: none;
  border: none;
  color: white;
  font-size: 1rem;
  cursor: pointer;
}

.nav__menu-item:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

/* Sous-menu utilisateur (desktop) */
.nav__user {
  position: relative;
}

.nav__user-menu {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0.5rem;
  width: 20rem;
  background-color: rgba(0, 0, 0, 0.9);
  border-radius: 6px;
  box-shadow: 0 8px 16px rgba(239, 12, 12, 0.322);
  z-index: 50;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.nav__user-menu-item {
  padding: 1rem;
  font-size: 0.875rem;
  color: #ffffff;
  border-bottom: 1px solid #444;
  transition: background-color 0.3s ease;
}

.nav__user-menu-item:last-child {
  border-bottom: none;
}

.nav__user-menu-item:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.logout {
  font-weight: bold;
  color: #ff4d4d;
}

/* ----- Menu mobile (glissant de droite à gauche) ----- */
.nav__mobile-menu {
  display: flex;
  position: fixed;
  top: 100px;
  right: 0;
  width: 80%;
  max-width: 300px;
  height: 600px;
  background: rgb(0, 0, 0);
  color: white;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
  z-index: 10000;
}

.nav__mobile-menu.open {
  transform: translateX(0);
}

.nav__mobile-menu-item {
  color: white;
  text-decoration: none;
  font-size: 20px;
  padding: 15px;
  transition: 0.3s;
}

.nav__mobile-menu-item:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Bouton hamburger */
.nav__mobile-button {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1001;
  color: white;
}

.nav__mobile-button svg {
  width: 30px;
  height: 30px;
}

/* Affichage du menu mobile uniquement en version mobile */
@media (max-width: 768px) {
  .nav__menu--desktop {
    display: none;
  }

  .nav__mobile-button {
    display: block;
  }
}
/* Structure de base pour occuper toute la hauteur de la page */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

#root {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.main-content {
  flex: 1;
  /* Ajout de marge ou de padding si nécessaire pour espacer le contenu du footer */
}

/* Footer */
.footer {
  background-color: #2d3748; /* bg-gray-800 */
  color: #ffffff; /* text-white */
  padding: 3rem 1rem; /* py-12 px-4 */
  flex-shrink: 0; /* Empêche le footer de se réduire */
}

.footer--dark {
  background-color: #1a202c; /* dark-gray-900 */
}

/* Grille principale */
.footer__grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr); /* Par défaut une seule colonne */
  gap: 2rem; /* gap-8 */
}

@media (min-width: 768px) {
  .footer__grid {
    grid-template-columns: repeat(3, 1fr); /* Trois colonnes en mode large */
  }
}

/* Titres des sections */
.footer__title {
  font-size: 1.125rem; /* text-lg */
  font-weight: 600; /* font-semibold */
  margin-bottom: 1rem; /* mb-4 */
}

/* Liens utiles */
.footer__links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer__links li {
  margin-bottom: 0.5rem; /* mb-2 */
}

.footer__link {
  color: #ffffff;
  text-decoration: none;
  transition: color 0.3s;
}

.footer__link:hover {
  color: #63b3ed; /* hover-blue-400 */
}

/* Informations de contact */
.footer__contact {
  display: flex;
  align-items: center;
  color: white;
  margin-bottom: 0.5rem; /* mb-2 */
}

.footer__contact-icon {
  height: 1.25rem; /* h-5 */
  width: 1.25rem; /* w-5 */
  margin-right: 0.5rem; /* mr-2 */
  color: #63b3ed; /* Texte des icônes */
}

/* Section des horaires */
.footer__hours {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer__hours li {
  margin-bottom: 0.5rem; /* mb-2 */
}

/* Section de bas de page */
.footer__bottom {
  margin-top: 2rem; /* mt-8 */
  padding-top: 2rem; /* pt-8 */
  border-top: 1px solid #4a5568; /* border-gray-700 */
  text-align: center;
  font-size: 0.875rem; /* text-sm */
  color: #ffffff; /* Texte des droits réservés */
}
/* Conteneur principal du slider */
.slider-container {
  position: relative;
  max-width: 80%; /* Limite la largeur globale */
  margin: 0 auto; /* Centre le slider */
  padding: 20px 0;
  overflow: hidden;
}

/* Style pour chaque slide en mode "card" */
.slide-card {
  position: relative;
  transition: transform 0.5s ease, opacity 0.5s ease;
  padding: 10px;
  box-sizing: border-box;
}

.slide-card img {
  width: 100%;
  height: 450px; /* Hauteur fixe pour les cartes */
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.5s ease, box-shadow 0.5s ease;
}

/* Style spécifique pour l'image centrale */
.slick-center .slide-card img {
  transform: scale(1.2); /* Agrandit l'image centrale */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
  z-index: 2;
}

/* Diminution des cartes latérales */
.slick-slide:not(.slick-center) .slide-card img {
  opacity: 0.7;
}

/* Flèches de navigation personnalisées */
.slick-prev,
.slick-next {
  font-size: 1.5rem;
  color: #333;
  z-index: 10;
}

.slick-prev {
  left: -40px;
}

.slick-next {
  right: -40px;
}

/* Points de navigation */
.slick-dots li button:before {
  font-size: 12px;
  color: #aaa;
}

.slick-dots li.slick-active button:before {
  color: #63b3ed; /* Couleur active */
}

/* Responsive */
@media (max-width: 768px) {
  .slider-container {
    max-width: 95%;
  }

  .slide-card img {
    height: 200px;
  }
}
/* Slider */
.slick-slider
{
    position: relative;

    display: block;
    box-sizing: border-box;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
    margin-left: auto;
    margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}

/* Slider */
.slick-loading .slick-list
{
    background: #fff url('./ajax-loader.BcnMEykj.gif') center center no-repeat;
}

/* Icons */
@font-face
{
    font-family: 'slick';
    font-weight: normal;
    font-style: normal;

    src: url('data:application/vnd.ms-fontobject;base64,AAgAAGQHAAABAAIAAAAAAAIABQkAAAAAAAABAJABAAAAAExQAQAAgCAAAAAAAAAAAAAAAAEAAAAAAAAATxDE8AAAAAAAAAAAAAAAAAAAAAAAAAoAcwBsAGkAYwBrAAAADgBSAGUAZwB1AGwAYQByAAAAFgBWAGUAcgBzAGkAbwBuACAAMQAuADAAAAAKAHMAbABpAGMAawAAAAAAAAEAAAANAIAAAwBQRkZUTW3RyK8AAAdIAAAAHEdERUYANAAGAAAHKAAAACBPUy8yT/b9sgAAAVgAAABWY21hcCIPRb0AAAHIAAABYmdhc3D//wADAAAHIAAAAAhnbHlmP5u2YAAAAzwAAAIsaGVhZAABMfsAAADcAAAANmhoZWED5QIFAAABFAAAACRobXR4BkoASgAAAbAAAAAWbG9jYQD2AaIAAAMsAAAAEG1heHAASwBHAAABOAAAACBuYW1lBSeBwgAABWgAAAFucG9zdC+zMgMAAAbYAAAARQABAAAAAQAA8MQQT18PPPUACwIAAAAAAM9xeH8AAAAAz3F4fwAlACUB2wHbAAAACAACAAAAAAAAAAEAAAHbAAAALgIAAAAAAAHbAAEAAAAAAAAAAAAAAAAAAAAEAAEAAAAHAEQAAgAAAAAAAgAAAAEAAQAAAEAAAAAAAAAAAQIAAZAABQAIAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAIABQkAAAAAAACAAAABAAAAIAAAAAAAAAAAUGZFZABAAGEhkgHg/+AALgHb/9sAAAABAAAAAAAAAgAAAAAAAAACAAAAAgAAJQAlACUAJQAAAAAAAwAAAAMAAAAcAAEAAAAAAFwAAwABAAAAHAAEAEAAAAAMAAgAAgAEAAAAYSAiIZAhkv//AAAAAABhICIhkCGS//8AAP+l3+PedN5xAAEAAAAAAAAAAAAAAAAAAAEGAAABAAAAAAAAAAECAAAAAgAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGAIwAsAEWAAIAJQAlAdsB2wAYACwAAD8BNjQvASYjIg8BBhUUHwEHBhUUHwEWMzI2FAcGBwYiJyYnJjQ3Njc2MhcWF/GCBgaCBQcIBR0GBldXBgYdBQgH7x0eMjB8MDIeHR0eMjB8MDIecYIGDgaCBQUeBQcJBFhYBAkHBR4F0nwwMh4dHR4yMHwwMh4dHR4yAAAAAgAlACUB2wHbABgALAAAJTc2NTQvATc2NTQvASYjIg8BBhQfARYzMjYUBwYHBiInJicmNDc2NzYyFxYXASgdBgZXVwYGHQUIBwWCBgaCBQcIuB0eMjB8MDIeHR0eMjB8MDIecR4FBwkEWFgECQcFHgUFggYOBoIF0nwwMh4dHR4yMHwwMh4dHR4yAAABACUAJQHbAdsAEwAAABQHBgcGIicmJyY0NzY3NjIXFhcB2x0eMjB8MDIeHR0eMjB8MDIeAT58MDIeHR0eMjB8MDIeHR0eMgABACUAJQHbAdsAQwAAARUUBisBIicmPwEmIyIHBgcGBwYUFxYXFhcWMzI3Njc2MzIfARYVFAcGBwYjIicmJyYnJjQ3Njc2NzYzMhcWFzc2FxYB2woIgAsGBQkoKjodHBwSFAwLCwwUEhwcHSIeIBMGAQQDJwMCISspNC8mLBobFBERFBsaLCYvKicpHSUIDAsBt4AICgsLCScnCwwUEhwcOhwcEhQMCw8OHAMDJwMDAgQnFBQRFBsaLCZeJiwaGxQRDxEcJQgEBgAAAAAAAAwAlgABAAAAAAABAAUADAABAAAAAAACAAcAIgABAAAAAAADACEAbgABAAAAAAAEAAUAnAABAAAAAAAFAAsAugABAAAAAAAGAAUA0gADAAEECQABAAoAAAADAAEECQACAA4AEgADAAEECQADAEIAKgADAAEECQAEAAoAkAADAAEECQAFABYAogADAAEECQAGAAoAxgBzAGwAaQBjAGsAAHNsaWNrAABSAGUAZwB1AGwAYQByAABSZWd1bGFyAABGAG8AbgB0AEYAbwByAGcAZQAgADIALgAwACAAOgAgAHMAbABpAGMAawAgADoAIAAxADQALQA0AC0AMgAwADEANAAARm9udEZvcmdlIDIuMCA6IHNsaWNrIDogMTQtNC0yMDE0AABzAGwAaQBjAGsAAHNsaWNrAABWAGUAcgBzAGkAbwBuACAAMQAuADAAAFZlcnNpb24gMS4wAABzAGwAaQBjAGsAAHNsaWNrAAAAAAIAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAABwAAAAEAAgECAQMAhwBECmFycm93cmlnaHQJYXJyb3dsZWZ0AAAAAAAAAf//AAIAAQAAAA4AAAAYAAAAAAACAAEAAwAGAAEABAAAAAIAAAAAAAEAAAAAzu7XsAAAAADPcXh/AAAAAM9xeH8=');
    src: url('data:application/vnd.ms-fontobject;base64,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') format('embedded-opentype'), url('data:font/woff;base64,d09GRk9UVE8AAAVkAAsAAAAAB1wAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAABCAAAAi4AAAKbH/pWDkZGVE0AAAM4AAAAGgAAABxt0civR0RFRgAAA1QAAAAcAAAAIAAyAARPUy8yAAADcAAAAFIAAABgUBj/rmNtYXAAAAPEAAAAUAAAAWIiC0SwaGVhZAAABBQAAAAuAAAANgABMftoaGVhAAAERAAAABwAAAAkA+UCA2htdHgAAARgAAAADgAAAA4ESgBKbWF4cAAABHAAAAAGAAAABgAFUABuYW1lAAAEeAAAANwAAAFuBSeBwnBvc3QAAAVUAAAAEAAAACAAAwABeJw9ks9vEkEUx2cpWyeUoFYgNkHi2Wt7N3rVm3cTs3UVLC4LxIWEQvi1P3i7O1tYLJDAmlgKGEhQrsajf0j7J3jYTXrQWUrMJG+++b55n5e8NwwKBhHDMLv5kxT3ATEBxKBn3qOAl9zxHgb1MAPhHQgHkyF08Gr/L8B/Eb6zWnmCJ7AJVLubQOheArXvJ1A4EXi6j4I+Zg9F0QFKvsnlBCmXeve+sFEnb/nCptdtQ4QYhVFRAT1HrF8UQK/RL/SbmUbclsvGVFXRZKDHUE38cc4qpkbAAsuwiImvro+ufcfaOIQ6szlrmjRJDaKZKnbjN3GWKIbiIzRFUfCffuxxKOL+3LDlDVvx2TdxN84qZEsnhNBa6pgm2dAsnzbLsETdsmRFxUeHV4e+I2/ptN8TyqV8T3Dt29t7EYOuajVIw2y1Wy3M86w0zg/Fz2IvawmQAUHOVrPVfLkoScVynsqsTG0MGUs4z55nh3mnOJa+li+rl9WpPIcFfDubDeaDC+fLBdYN3QADzLauGfj4B6sZmq6CCpqmtSvF0qlUl2qf5AJIUCSlTqlb7lUG+LRfGzZGzZEyBgccMu6MuqPecNDvD4Y9Kjtj4gD+DsvKVMTcMdtqtZtmkzQstQvYje7Syep0PDSAhSOeHYXYWThEF//A/0YvYV1fSQtpKU5STtrhbQ444OtpKSWJIg3pOg8cBs7maTY1EZf07aq+hjWs7IWzdCYTGhb2CtZ47x+Uhx28AAB4nGNgYGBkAIJz765vANHnCyvqYTQAWnkHswAAeJxjYGRgYOADYgkGEGBiYARCFjAG8RgABHYAN3icY2BmYmCcwMDKwMHow5jGwMDgDqW/MkgytDAwMDGwcjKAQQMDAyOQUmCAgoA01xQGB4ZExUmMD/4/YNBjvP3/NgNEDQPjbbBKBQZGADfLDgsAAHicY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQzMCQqKClOUJz0/z9YHRLv/+L7D+8V3cuHmgAHjGwM6ELUByxUMIOZCmbgAAA5LQ8XeJxjYGRgYABiO68w73h+m68M3EwMIHC+sKIeTqsyqDLeZrwN5HIwgKUB/aYJUgAAeJxjYGRgYLzNwMCgx8QAAkA2IwMqYAIAMGIB7QIAAAACAAAlACUAJQAlAAAAAFAAAAUAAHicbY49asNAEIU/2ZJDfkiRIvXapUFCEqpcptABUrg3ZhEiQoKVfY9UqVLlGDlADpAT5e16IUWysMz3hjfzBrjjjQT/EjKpCy+4YhN5yZoxcirPe+SMWz4jr6S+5UzSa3VuwpTnBfc8RF7yxDZyKs9r5IxHPiKv1P9iZqDnyAvMQ39UecbScVb/gJO03Xk4CFom3XYK1clhMdQUlKo7/d9NF13RkIdfy+MV7TSe2sl11tRFaXYmJKpWTd7kdVnJ8veevZKc+n3I93t9Jnvr5n4aTVWU/0z9AI2qMkV4nGNgZkAGjAxoAAAAjgAF') format('woff'), url('data:font/ttf;base64,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') format('truetype'), url('./slick.BlzDm7g2.svg#slick') format('svg');
}
/* Arrows */
.slick-prev,
.slick-next
{
    font-size: 0;
    line-height: 0;

    position: absolute;
    top: 50%;

    display: block;

    width: 20px;
    height: 20px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);

    cursor: pointer;

    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
    color: transparent;
    outline: none;
    background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{
    opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
{
    opacity: .25;
}

.slick-prev:before,
.slick-next:before
{
    font-family: 'slick';
    font-size: 20px;
    line-height: 1;

    opacity: .75;
    color: white;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-prev
{
    left: -25px;
}
[dir='rtl'] .slick-prev
{
    right: -25px;
    left: auto;
}
.slick-prev:before
{
    content: '←';
}
[dir='rtl'] .slick-prev:before
{
    content: '→';
}

.slick-next
{
    right: -25px;
}
[dir='rtl'] .slick-next
{
    right: auto;
    left: -25px;
}
.slick-next:before
{
    content: '→';
}
[dir='rtl'] .slick-next:before
{
    content: '←';
}

/* Dots */
.slick-dotted.slick-slider
{
    margin-bottom: 30px;
}

.slick-dots
{
    position: absolute;
    bottom: -25px;

    display: block;

    width: 100%;
    padding: 0;
    margin: 0;

    list-style: none;

    text-align: center;
}
.slick-dots li
{
    position: relative;

    display: inline-block;

    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;

    cursor: pointer;
}
.slick-dots li button
{
    font-size: 0;
    line-height: 0;

    display: block;

    width: 20px;
    height: 20px;
    padding: 5px;

    cursor: pointer;

    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
    outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
    opacity: 1;
}
.slick-dots li button:before
{
    font-family: 'slick';
    font-size: 6px;
    line-height: 20px;

    position: absolute;
    top: 0;
    left: 0;

    width: 20px;
    height: 20px;

    content: '•';
    text-align: center;

    opacity: .25;
    color: black;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
    opacity: .75;
    color: black;
}
/* Conteneur principal de la section Hero */
.hero {
  position: relative;
  color: white;
  text-align: center;
  overflow: hidden; /* Empêche tout dépassement */
  display: flex;
  flex-direction: column; /* Permet d'empiler le contenu */
  justify-content: center;
  height: 40vh; /* Hauteur fixe définie selon vos besoins */
}

/* Image de fond */
.hero__background {
  position: absolute;
  inset: 0;
  z-index: -1; /* Assure que le background reste en arrière-plan */
  width: 100%;

}

.hero__slider-container img {
  width: 100%;
  height: 100%; /* Remplit le conteneur en hauteur */
  object-fit: contain; /* Adapte l'image au conteneur sans la couper */
  object-position: center; /* Centre l'image dans le conteneur */
}

/* Overlay pour une meilleure lisibilité */
.hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4); /* Teinte sombre */
}

/* Contenu de la section */
.hero__content {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1rem;
  z-index: 1; /* Contenu au-dessus de l'image */
  text-align: center;
}

.hero__title {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.2;
}

@media (min-width: 640px) {
  .hero__title {
    font-size: 3.5rem;
  }
}

.hero__subtitle {
  margin-top: 1.5rem;
  font-size: 1.25rem;
  line-height: 1.5;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  color: white;
}

/* Boutons */
.hero__buttons {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.hero__button {
  display: inline-flex;
  align-items: center;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  border-radius: 0.5rem;
  transition: background-color 0.3s ease;
}

.hero__button--primary {
  background-color: white;
  color: #2563eb;
  border: 1px solid white;
}

.hero__button--primary:hover {
  background-color: #f1f5f9; /* Gris clair */
}

.hero__button--secondary {
  background-color: #1d4ed8; /* Bleu foncé */
  color: white;
}

.hero__button--secondary:hover {
  background-color: hsl(221, 83%, 53%); /* Bleu moyen */
}

.hero__icon {
  margin-left: 0.5rem;
  width: 1.25rem;
  height: 1.25rem;
}
.features {
  padding: 4rem 2rem;
  background: linear-gradient(to bottom, #0d0d0d, #000000);
  color: white;
  text-align: center;
}

.features-header h2 {
  font-size: 2.5rem;
  font-weight: bold;
  color: #f8fafc;
  margin-bottom: 1rem;
}

.features-header p {
  font-size: 1rem;
  color: #ffffff;
  margin-bottom: 2rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Adaptatif */
  gap: 2rem;
  align-items: stretch;
}

.feature-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 2rem;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.feature-card h3 {
  font-size: 1.25rem;
  font-weight: bold;
  margin: 1rem 0;
  color: #2b6cb0;
}

.feature-card p {
  font-size: 1rem;
  color: #4a5568;
  line-height: 1.6;
}

.icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #63b3ed, #3182ce);
  border-radius: 50%;
  width: 70px;
  height: 70px;
  margin: 0 auto 1rem;
  box-shadow: 0 4px 8px rgba(49, 130, 206, 0.3);
}

.icon {
  width: 35px;
  height: 35px;
  color: white;
}
.association-story {
  background: #000;
  color: #fff;
  padding: 2rem;
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

.association-story h1 {
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
  text-align: center;
  background: linear-gradient(90deg, #ff7f50, #ff4500);
  -webkit-background-clip: text;
  background-clip: text;
}

.association-story h2 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  background: linear-gradient(90deg, #00bcd4, #1e90ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.columns {
  display: flex; /* Active la disposition en ligne pour les colonnes */
  flex-wrap: nowrap; /* Empêche les colonnes de s'empiler */
  justify-content: space-between; /* Espacement uniforme entre les colonnes */
  gap: 2rem; /* Espacement entre les colonnes */
}

.column {
  flex: 1; /* Chaque colonne prend une part égale de l'espace disponible */
  max-width: 50%; /* Limite la largeur pour éviter que les colonnes débordent */
  background: rgba(255, 255, 255, 0.05);
  padding: 1.5rem;
  border: 1px solid #444;
  border-radius: 8px;
  box-sizing: border-box; /* Inclut les bordures et le padding dans la largeur totale */
}

.column:hover {
  transform: scale(1.02);
  transition: transform 0.2s ease-in-out;
}

/* Responsive Design */
@media (max-width: 768px) {
  .columns {
    flex-wrap: wrap; /* Les colonnes s'empilent sur petits écrans */
  }
  .column {
    max-width: 100%; /* Chaque colonne prend toute la largeur disponible */
    margin-bottom: 1rem; /* Ajoute un espacement entre les colonnes empilées */
  }
}


.association-story p, .association-story ul {
  font-size: 1.2rem;
  margin: 1rem 0;
  text-align: justify;
}

.association-story ul {
  padding-left: 1.5rem;
  list-style-type: disc;
}

/* Responsive Design */
@media (max-width: 768px) {
  .column {
    flex: 1 1 100%;
  }
}
/* Fond sombre pour le popup */
.cookie-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7); /* Fond sombre semi-transparent */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999; /* Toujours au-dessus des autres éléments */
}

/* Popup centré */
.cookie-popup {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  max-width: 500px;
  padding: 2rem;
  text-align: center;
  position: relative;
}

/* En-tête du popup */
.cookie-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.cookie-header h3 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: bold;
  color: #333;
}

/* Bouton fermer */
.close-button {
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  color: #555;
}

.close-button:hover {
  color: #000;
}

/* Texte du popup */
.cookie-popup p {
  font-size: 1rem;
  color: #444;
  margin-bottom: 1.5rem;
}

/* Boutons d'action */
.cookie-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.accept-button {
  background-color: #28a745;
  color: #fff;
  border: none;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.accept-button:hover {
  background-color: #218838;
}
/* Conteneur principal */
.login-page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #000000e8;
}

/* En-tête */
.login-header {
  text-align: center;
  margin-bottom: 2rem;
}

.login-icon {
  width: 48px;
  height: 48px;
  color: #1d4ed8;
}

.login-header h2 {
  font-size: 1.5rem;
  font-weight: bold;
  color: #007bff;
  margin-top: 0.5rem;
}

/* Formulaire */
.login-form-container {
  background: #0c0c0c1e;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 400px;
}

.login-form .form-group {
  margin-bottom: 1rem;
}

.login-form label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #ffffff;
}
.login-form  a{
  color:#ffffff;
}
.login-form input {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 0.875rem;
  color: #111827;
}

.login-form input:focus {
  border-color: #3b82f6;
  outline: none;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
  background-color: #ffffff;
}

/* Mot de passe avec icône */
.password-container {
  display: flex;
  align-items: center;
  position: relative;
}

.password-container input {
  flex: 1;
  padding-right: 2.5rem;
}

.toggle-password-icon {
  position: absolute;
  right: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #374151;
}

.toggle-password-icon:hover {
  color: #1d4ed8;
}

/* Case à cocher */
.remember-me {
  display: flex;
  align-items: center;
}

.remember-me input {
  margin-right: 0.5rem;
}

/* Bouton de soumission */
.submit-button {
  display: block;
  width: 100%;
  padding: 0.75rem;
  background: #1d4ed8;
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 500;
  text-align: center;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.submit-button:hover {
  background: #2563eb;
}

.submit-button:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
}

/* Gestion des erreurs */
.input-error {
  border-color: #dc2626;
}

.error-message {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: #dc2626;
}
/* 🌑 Fond de la page */
.register-page {
  display: flex;
  flex-direction: column; /* Empiler les éléments */
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #000000;
  padding: 2rem;
  color: #ffffff;
}

/* ✅ Conteneur principal */
.register-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start; /* ✅ Aligner les deux blocs en haut */
  width: 90%;
  max-width: 1000px;
  background-color: #303030;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  color: #ffffff;
  padding: 2rem;
  gap: 2rem;
}

/* ✅ Bloc d'informations (gauche) */
.register-info {
  flex: 1;
  padding-right: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* ✅ Aligner le contenu en haut */
}

.register-info h2 {
  font-size: 1.8rem;
  color: #00a3ff;
  margin-bottom: 1rem;
  margin-top: 0; /* ✅ Évite tout décalage */
}

/* ✅ Bloc du formulaire (droite) */
.register-form {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ✅ Champs du formulaire */
.form-row {
  display: flex;
  gap: 1rem;
  align-items: center; /* ✅ Assurer l'alignement des champs */
}

.form-group {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.form-group label {
  font-weight: bold;
  margin-bottom: 0.3rem;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

input {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #444;
  border-radius: 5px;
  background-color: #404040;
  color: #e0e0e0;
}

/* ✅ Icônes Eye (👁️) intégrées aux labels */
.password-container {
  position: relative;
}

.toggle-password {
  cursor: pointer;
  font-size: 1.2rem;
  color: #00a3ff;
  transition: color 0.3s ease;
}

.toggle-password:hover {
  color: #007acc;
}

/* ✅ Boutons sur la même ligne */
.form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
  gap: 1rem;
}

/* ✅ Boutons uniformes */
button {
  background-color: #00a3ff;
  color: white;
  font-size: 1rem;
  font-weight: bold;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
  text-align: center;
  min-width: 150px;
}

button:hover {
  background-color: #007acc;
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* ✅ Responsive */
@media (max-width: 768px) {
  .register-container {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }

  .register-info {
    padding-right: 0;
    text-align: center;
  }

  .form-row {
    flex-direction: column;
  }

  .form-actions {
    flex-direction: column;
  }
}
.grievance-page {
  background-color: #000000;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.form-container {
  background: #3a3939;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 600px;
  padding: 30px;
}

.header {
  background: #3a3939;
  text-align: center;
  margin-bottom: 20px;
}

.icon {
  color: #2563eb;
  font-size: 3rem;
  margin-bottom: 10px;
}

h2 {
  font-size: 1.75rem;
  font-weight: bold;
  color: #333333;
}

p {
  font-size: 1rem;
  color: #4a5568;
}

.form-group {
  margin-bottom: 20px;
}

label {
  display: block;
  font-size: 0.875rem;
  color: #4a5568;
  margin-bottom: 5px;
}

.input,
.textarea,
.select {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 5px;
  padding: 10px;
  font-size: 0.875rem;
}

.input-error {
  border-color: #e53e3e;
}

.error-message {
  color: #e53e3e;
  font-size: 0.875rem;
  margin-top: 5px;
}

.submit-button {
  width: 100%;
  background-color: #2563eb;
  color: white;
  font-size: 1rem;
  padding: 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.submit-button:hover {
  background-color: #1d4ed8;
}
/* Animation pour l'ouverture en fondu */
@keyframes fade-in {
    from {
      opacity: 0;
      transform: scale(0.95);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
  
  /* Fond du modal */
  .modal-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    z-index: 50;
  }
  
  /* Conteneur du modal */
  .modal-content {
    background: white;
    border-radius: 8px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    width: 35%;
    max-width: 500px;
    padding: 20px;
    position: relative;
    animation: fade-in 0.2s ease-out;
  }
  
  /* Titre du modal */
  .modal-title {
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 15px;
  }
  
  /* Bouton de fermeture */
  .modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: gray;
    transition: color 0.2s ease-in-out;
  }
  
  .modal-close:hover {
    color: black;
  }
  
  /* Champs de formulaire */
  .modal-label {
    display: block;
    font-weight: bold;
    margin: 10px 0 5px;
  }
  
  .modal-input,
  .modal-textarea,
  .modal-select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }
  
  /* Zone de boutons */
  .modal-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 15px;
  }
  
  /* Boutons */
  .modal-button {
    padding: 8px 12px;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.2s ease-in-out;
  }
  
  .modal-cancel {
    background: #999;
    color: white;
    margin-right: 10px;
  }
  
  .modal-cancel:hover {
    background: #777;
  }
  
  .modal-save {
    background: #007bff;
    color: white;
  }
  
  .modal-save:hover {
    background: #0056b3;
  }
  .grievances-container {
  background-color: #050505;
  color: #fff;
}

/* Conteneur principal de la table */
.filters-label {
  color: #fff;
}
.table-container {
  width: 100%;
  margin: 0 auto;
  padding: 20px;
  background-color: #000; /* Fond noir */
  border-radius: 10px;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.5);
  overflow-x: auto;
}

/* Table */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 1rem;
  text-align: left;
  color: #fff; /* Texte blanc */
}

table thead {
  background-color: #333; /* Gris foncé pour le header */
  color: white;
}

table th,
table td {
  padding: 12px 15px;
  border: 1px solid #444; /* Bordures gris foncé */
  /* white-space: nowrap; */
  color: #fff;
}

table th {
  cursor: pointer;
  user-select: none;
  text-transform: uppercase;
  font-weight: bold;
}

table tbody tr:nth-child(odd) {
  background-color: #1a1a1a; /* Fond légèrement plus clair pour les lignes impaires */
}

table tbody tr:nth-child(even) {
  background-color: #2a2a2a; /* Fond plus sombre pour les lignes paires */
}

table tbody tr:hover {
  background-color: #444; /* Couleur d'arrière-plan au survol */
}

/* Boutons */
button {
  background-color: #6200ea;
  color: white;
  border: none;
  padding: 10px 15px;
  margin: 5px;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s;
  font-size: 0.9rem;
}

button:hover {
  background-color: #5a00d1;
}

/* Zone des filtres */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 20px;
  align-items: center;
  color: #fff; /* Texte blanc */
}

.filters label {
  display: flex;
  flex-direction: column;
  font-size: 0.9rem;
  color: #fff; /* Ajout pour texte blanc */
}

.filters select {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 1rem;
  transition: border-color 0.3s;
  background-color: #333; /* Fond gris foncé */
  color: #fff; /* Texte blanc */
}

.filters select:focus {
  border-color: #6200ea;
  outline: none;
}
/* Popup dédié pour AllGrievancesPage */
.popup-AdminGrievances {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 500px;
  background: rgb(0, 0, 0);
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  text-align: center;
  color: #fff; /* Texte blanc */
}


.popup-content-AdminGrievances p {
  color: #fff;
}

.popup-content-AdminGrievances h3 {
  margin-top: 0;
  color: #1a05ff;
  font-size: 1.5rem;
}

.popup-content-AdminGrievances p {
  margin: 10px 0;
}

.popup-content-AdminGrievances button {
  margin-top: 20px;
  background-color: #6200ea;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s;
}

.popup-content-AdminGrievances button:hover {
  background-color: #5a00d1;
}
/* Popup dédié pour AllGrievancesPage */
.all-grievances-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 500px;
  background: rgb(26, 26, 26);
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  text-align: center;
  color: #fff; /* Texte blanc */
}

.all-grievances-popup-content p {
  color: #fff;
}

.all-grievances-popup-content h3 {
  margin-top: 0;
  color: #1a05ff;
  font-size: 1.5rem;
}

.all-grievances-popup-content p {
  margin: 10px 0;
}

.all-grievances-popup-content button {
  margin-top: 20px;
  background-color: #6200ea;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s;
}

.all-grievances-popup-content button:hover {
  background-color: #5a00d1;
}

/* Messages d'erreur */
.error-message {
  color: red;
  text-align: center;
  font-size: 1rem;
  margin: 15px 0;
}
/* Exemple de styles (GrievancesTable.css) */
.grievances-page {
  display: flex;
}

.sidebar {
  width: 400px;
  padding: 1rem;
  border-right: 1px solid #ccc;
}

.main-content {
  flex: 1;
  padding: 1rem;
}

/* Responsive */
@media (max-width: 768px) {
  .all-grievances-popup {
    width: 95%;
  }

  table th,
  table td {
    padding: 10px 8px;
  }

  button {
    padding: 8px 12px;
    font-size: 0.85rem;
  }

  .filters {
    flex-direction: column;
    align-items: flex-start;
  }

  .filters label {
    width: 100%;
    color: #fff; /* Ajout pour texte blanc */
  }
}
.profile-page {
  font-family: Arial, sans-serif;
  padding: 20px;
}

.profile-header {
  text-align: center;
  margin-bottom: 20px;
}

.profile-container {
  display: flex;
  gap: 20px;
}

.profile-sidebar {
  width: 30%;
}

.profile-card {
  text-align: center;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #060606;
}

.profile-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-bottom: 10px;
}

.profile-content {
  width: 70%;
}

.profile-form .form-group {
  margin-bottom: 15px;
}

.profile-form label {
  font-weight: bold;
  display: block;
  margin-bottom: 5px;
}

.profile-form .form-control {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.profile-form .btn {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
}

.profile-form .btn:hover {
  background-color: #0056b3;
}
/* Global */
.forum-page {
  display: flex;
  min-height: 100vh;
  font-family: Arial, sans-serif;
  color: #fff; /* Couleur globale pour le texte */
}

/* Sidebar */
.forum-sidebar {
  flex: 1;
  background-color: #171717;
  padding: 1rem;
  border-right: 1px solid #333;
  max-width: 300px;
}

.forum-sidebar h2 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: #057eff;
}

.theme-list,
.landlord-list {
  margin-top: 1rem;
}

.theme-link,
.landlord-link {
  display: block;
  width: 100%;
  padding: 0.5rem;
  margin: 0.5rem 0;
  text-decoration: none; /* Supprime le soulignement des liens */
  border: none;
  background-color: #292929;
  color: #ffffff;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
}

.theme-link.active,
.landlord-link.active {
  background-color: #007bff;
  color: #ffffff;
}

.theme-link:hover,
.landlord-link:hover {
  background-color: #0056b3;
  color: #ffffff;
}

/* Content */
.forum-content {
  flex: 3;
  padding: 2rem;
  background-color: #0f0f10;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.new-post-button {
  background-color: #007bff;
  color: #fff;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-bottom: 1rem;
}

.new-post-button:hover {
  background-color: #0056b3;
}

/* Posts */
.posts {
  width: 100%;
  max-width: 600px;
  display: flex;
  flex-direction: column-reverse; /* Affiche les posts en ordre décroissant */
  gap: 1rem;
}

.post {
  background-color: #1c1c1c;
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.post-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  color: #ccc; /* Couleur pour le texte méta */
  margin-bottom: 0.5rem;
}

.post-meta p {
  margin: 0;
}

.post-landlord {
  font-weight: bold;
  color: #007bff;
}

.post-theme {
  font-style: italic;
  color: #57bfff;
}

.post h3 {
  font-size: 1.3rem;
  color: #ffffff;
  font-weight: bold;
  margin: 0.5rem 0;
}

.post p {
  color: #e1e1e1;
  line-height: 1.5;
}

/* Replies */
.replies {
  margin-top: 1rem;
  padding-left: 1rem;
  border-left: 2px solid #444;
}

.replies .reply {
  margin-bottom: 0.5rem;
}

.reply-author {
  color: #007bff;
  font-weight: bold;
}

.reply-content {
  color: #dddddd;
  margin: 0.2rem 0;
}

/* Input Fields */
textarea.reply-input {
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.5rem;
  border: 1px solid #444;
  border-radius: 4px;
  background-color: #292929;
  color: #fff;
}

textarea.reply-input::placeholder {
  color: #777;
}

button.reply-button {
  margin-top: 0.5rem;
  background-color: #007bff;
  color: #ffffff;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button.reply-button:hover {
  background-color: #0056b3;
}
/* Conteneur principal */
.actions-page {
  min-height: 100vh;
  background: linear-gradient(to bottom, #101011, #000a17);
  padding: 4rem 2rem;
}

.actions-page__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 cartes par ligne */
  gap: 3rem; /* Espacement entre les cartes */
  margin-top: 3rem;
}

/* Cartes */
.actions-page__card {
  perspective: 1000px;
  width: 600px;
  height: 400px;
  cursor: pointer;
  position: relative;
}

.actions-page__card-inner {
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  position: relative;
}

.actions-page__card.flipped .actions-page__card-inner {
  transform: rotateY(180deg);
}

/* Face avant et arrière */
.actions-page__card-front,
.actions-page__card-back {
  position: absolute;
  width: 600px;
  height: 400px;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  padding: 1rem;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.actions-page__card-front {
  background: #1a202c;
  color: #f8f8f8;
}

.actions-page__card-back {
  background: #2d3748;
  color: #edf2f7;
  transform: rotateY(180deg);
}
/* Fichier : src/scss/ContactPage.css */

.contact-page {
  position: relative;
  min-height: 100vh; /* Prend toute la hauteur de la page */
  background: url('./Nono.Dto2akhK.png') no-repeat center center fixed;
  background-size: cover; /* S'assure que l'image couvre toute la page */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px;
}

  
  .contact-page-content {
    display: flex;
    gap: 20px;
    width: 100%;
    max-width: 1200px;
    margin: auto;
    align-items: stretch; /* Assure que les deux sections soient de la même hauteur */
  }
  
  .contact-info-container {
    flex: 1;
    background: rgba(0, 0, 0, 0.7); /* Fond légèrement transparent pour contraste */
    color: #eee6e6;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Distribue l'espace également dans la colonne */
  }
  
  .contact-info {
    margin-bottom: 20px;
  }
  
  .contact-info h2 {
    display: flex;
    justify-content: start;
    color: #e91e63; /* Assurez-vous que cette couleur s'harmonise avec votre thème */
    margin-bottom: 10px;
  }
  
  .contact-info p {
    margin-bottom: 15px;
    color: #ffffff; /* Couleur blanche pour contraster avec le fond noir transparent */
  }
  
  .google-map {
    margin-top: 20px;
    flex: 1;
  }
  
  .contact-form-container {
    flex: 1;
    background: rgba(0, 0, 0, 0.7); /* Fond légèrement transparent pour contraste */
    color: #e91e63; 
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Assure que les éléments soient distribués dans toute la hauteur */
  }
  .contact-form-container h2 {
    color: #fff
  };
  .contact-form-container form {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
  }
  
  .form-image-container {
    width: 100%;
    margin-top: 20px;
  }
  
  .form-image {
    width: 100%;
    height: auto;
    max-height: 300px; /* Ajustez la hauteur pour correspondre à celle de la carte */
    border-radius: 10px;
    object-fit: cover;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  }
  
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  textarea {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1rem;
    box-sizing: border-box;
  }
  
  button {
    background-color: #e91e63;
    color: #fff;
    border: none;
    padding: 10px 20px;
    font-size: 1rem;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-top: 10px;
  }
  
  button:hover {
    background-color: #d81b60;
  }
  
  /* Styles pour s'assurer que le contenu soit responsive */
  @media (max-width: 768px) {
    .contact-page-content {
      flex-direction: column;
      gap: 20px;
    }
  
    .contact-info-container,
    .contact-form-container {
      width: 100%;
    }
  
    .form-image {
      max-height: 200px; /* Ajuste la hauteur sur les petits écrans pour l'alignement */
    }
  }
  .members-table {
    background-color: var(--bg-color, #0f0f0f);
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    margin-top: 20px;
  }
  .p-6{
    background-color: #0f0f0f;
  }
  .table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid var(--border-color, #ddd);
  }
  
  .table-header h2 {
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--text-color, #333);
  }
  
  .add-button {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    background-color: var(--primary-color, #007bff);
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  
  .add-button:hover {
    background-color: var(--primary-hover, #0056b3);
  }
  
  .icon {
    margin-right: 0.5rem;
  }
  
  .table-container {
    overflow-x: auto;
  }
  
  table {
    width: 100%;
    border-collapse: collapse;
  }
  
  thead th {
    background-color: var(--thead-bg, #f9fafb);
    color: var(--thead-text, #555);
    font-weight: bold;
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color, #ddd);
  }
  
  tbody td {
    padding: 0.75rem;
    border-bottom: 1px solid var(--border-color, #ddd);
  }
  
  .action-buttons {
    display: flex;
    gap: 0.5rem;
  }
  
  .edit-button {
    color: var(--edit-color, #007bff);
    cursor: pointer;
  }
  
  .delete-button {
    color: var(--delete-color, #ff4d4f);
    cursor: pointer;
  }
  
  .role-select {
    width: 100%;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 4px;
    padding: 0.25rem 0.5rem;
    background: var(--select-bg, #fff);
    color: var(--select-text, #333);
  }
  
  .role-select:focus {
    border-color: var(--focus-color, #007bff);
    outline: none;
  }
  .modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-container {
  background: rgb(11, 11, 11);
  padding: 20px;
  width: 400px;
  border-radius: 8px;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
}

.form-group {
  margin-bottom: 15px;
}

.form-group input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.modal-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.cancel-button {
  background: #ccc;
  padding: 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.submit-button {
  background: #007bff;
  color: white;
  padding: 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
/* adminvideos.css */

/* Conteneur principal */
.admin-videos {
    background-color: #161616;
    max-width: 100%;
    margin: 0 auto;
    padding: 20px;
    font-family: Arial, sans-serif;
  }
  
  /* Titre de la page */
  .admin-videos h1 {
    text-align: center;
    margin-bottom: 20px;
  }
  
  /* Bouton d'ajout */
  .add-button {
    display: inline-block;
    margin-bottom: 20px;
    padding: 10px 20px;
    background-color: #4caf50;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
  }
  
  .add-button:hover {
    background-color: #45a049;
  }
  
  /* Tableau de présentation */
  .videos-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
  }
  
  .videos-table th,
  .videos-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }
  
  .videos-table th {
    background-color: #131313;
    font-weight: bold;
  }
  
  .videos-table tr:nth-child(even) {
    background-color: #000000;
  }
  
  .videos-table tr:hover {
    background-color: #322f2f;
  }
  
  /* Style de l'image miniature */
  .videos-table img {
    max-width: 100px;
    height: auto;
    display: block;
  }
  
  /* Modal overlay */
  .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
  }
  
  /* Contenu de la modal */
  .modal-content {
    background: #0e0d0d;
    padding: 20px;
    border-radius: 5px;
    width: 90%;
    max-width: 500px;
    position: relative;
  }
  
  /* Bouton de fermeture */
  .close-button {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
  }
  
  /* Groupes de formulaire */
  .form-group {
    margin-bottom: 15px;
  }
  
  .form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
  }
  
  .form-group input,
  .form-group textarea,
  .form-group select {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  
  .form-group textarea {
    resize: vertical;
  }
  
  /* Bouton de soumission du formulaire */
  .modal-content button[type="submit"] {
    background-color: #4caf50;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
  }
  
  .modal-content button[type="submit"]:hover {
    background-color: #45a049;
  }
  /* LiveStreamManager.css */
.live-stream-manager {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
  color: #333;
}

.live-stream-manager h1 {
  text-align: center;
  margin-bottom: 20px;
  font-size: 2rem;
}

.live-details {
  background-color: #f5f5f5;
  padding: 15px;
  border-radius: 5px;
  margin-bottom: 20px;
}

.live-details p {
  margin: 8px 0;
}

.action-buttons {
  display: flex;
  gap: 10px;
  margin-top: 15px;
}

.action-buttons button {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
}

.action-buttons button:hover {
  opacity: 0.9;
}

.action-buttons button:first-child {
  background-color: #007bff;
  color: #fff;
}

.delete-button {
  background-color: #dc3545;
  color: #fff;
}

.live-stream-form {
  background-color: #fff;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
  margin-bottom: 20px;
}

.live-stream-form form {
  display: flex;
  flex-direction: column;
}

.live-stream-form form > div {
  margin-bottom: 15px;
}

.live-stream-form label {
  font-weight: bold;
  display: block;
  margin-bottom: 5px;
}

.live-stream-form input[type="text"],
.live-stream-form textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.live-stream-form button {
  align-self: flex-start;
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.live-stream-form button:hover {
  background-color: #0056b3;
}

.error {
  color: red;
  font-weight: bold;
}

@media (max-width: 600px) {
  .live-stream-manager {
    padding: 10px;
  }
}
/* Conteneur principal */
.actions-page {
    background-color: #f9fafb;
    padding: 2rem;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  /* Table */
  table {
    width: 100%;
    border-collapse: collapse;
  }
  
  thead {
    background-color: #f3f4f6;
  }
  
  th, td {
    padding: 0.75rem 1rem;
    text-align: left;
  }
  
  th {
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.875rem;
    color: #374151;
  }
  
  td {
    font-size: 0.875rem;
    color: #4b5563;
    border-bottom: 1px solid #e5e7eb;
  }
  
  tr:hover {
    background-color: #f9fafb;
  }
  
  button {
    cursor: pointer;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: bold;
    transition: background-color 0.3s ease;
  }
  
  button:hover {
    filter: brightness(90%);
  }
  
  button.text-blue-600 {
    background-color: #3b82f6;
    color: white;
  }
  
  button.text-blue-600:hover {
    background-color: #2563eb;
  }
  
  button.text-red-600 {
    background-color: #f87171;
    color: white;
  }
  
  button.text-red-600:hover {
    background-color: #ef4444;
  }
  
  /* Popup Overlay */
  .popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
  }
  
  /* Popup Content */
  .popup-content {
    background-color: white;
    padding: 2rem;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
    max-width: 400px;
    width: 100%;
    text-align: center;
  }
  
  .popup-content h3 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
    color: #111827;
  }
  
  .popup-content form label {
    display: block;
    text-align: left;
    margin-bottom: 1rem;
    font-weight: bold;
    color: #374151;
  }
  
  .popup-content form input,
  .popup-content form textarea,
  .popup-content form select {
    width: 100%;
    padding: 0.5rem;
    margin-top: 0.5rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    font-size: 0.875rem;
  }
  
  .popup-content form input:focus,
  .popup-content form textarea:focus,
  .popup-content form select:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
  }
  
  .popup-content .form-actions {
    margin-top: 1.5rem;
    display: flex;
    justify-content: space-between;
  }
  
  .popup-content .form-actions button {
    width: 48%;
  }
  
  /* Responsive */
  @media (max-width: 768px) {
    .popup-content {
      padding: 1.5rem;
      max-width: 90%;
    }
  
    table {
      font-size: 0.75rem;
    }
  
    th, td {
      padding: 0.5rem;
    }
  }
  .slider-manager {
  font-family: 'Poppins', sans-serif;
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 10px;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
  max-width: 1200px;
  margin: 0 auto;
}

.slider-manager h2 {
  font-size: 2rem;
  color: #e91e63;
  margin-bottom: 20px;
  text-align: center;
}

.slider-container {
  margin-bottom: 20px;
  border-radius: 10px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  padding: 10px;
}

/* Style du tableau */
.slider-images-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  background: #ffffff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.slider-images-table th,
.slider-images-table td {
  padding: 15px;
  text-align: left;
  border: 1px solid #ddd;
  font-size: 0.95rem;
}

.slider-images-table th {
  background-color: #e91e63;
  color: #ffffff;
  font-weight: bold;
  text-transform: uppercase;
}

.slider-images-table td {
  vertical-align: middle;
}

/* Miniature des images */
.slider-image-thumbnail {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Boutons d'action */
.action-buttons button {
  background-color: #007bff;
  color: #ffffff;
  border: none;
  padding: 8px 12px;
  font-size: 0.9rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  margin-right: 5px;
}

.action-buttons button:hover {
  background-color: #0056b3;
  transform: translateY(-2px);
}

.delete-button {
  background-color: #e91e63;
}

.delete-button:hover {
  background-color: #c2185b;
}

/* Popup */
.popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #ffffff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  width: 90%;
  max-width: 500px;
}

.popup-content {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.popup h3 {
  font-size: 1.5rem;
  color: #e91e63;
  text-align: center;
}

.popup input,
.popup textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 1rem;
  color: #333;
}

.popup button {
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1rem;
}

.popup button:first-of-type {
  background-color: #007bff;
  color: #ffffff;
  transition: background-color 0.3s ease;
}

.popup button:first-of-type:hover {
  background-color: #0056b3;
}

.popup button:last-of-type {
  background-color: #e91e63;
  color: #ffffff;
  transition: background-color 0.3s ease;
}

.popup button:last-of-type:hover {
  background-color: #c2185b;
}
.image-preview {
  margin-top: 10px;
  text-align: center;
}

.image-preview img {
  max-width: 100px;
  max-height: 100px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.admin-newsletter {
    max-width: 600px;
    margin: 20px auto;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #f9f9f9;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    font-family: Arial, sans-serif;
  }
  
  .admin-newsletter h2 {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
  }
  
  .newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }
  
  .form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
  
  label {
    font-weight: bold;
    color: #555;
  }
  
  .newsletter-input,
  .newsletter-textarea,
  .newsletter-select {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px;
    background-color: #fff;
    color: #333;
  }
  
  .newsletter-textarea {
    resize: vertical;
  }
  
  .newsletter-button {
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    text-align: center;
  }
  
  .newsletter-button:hover {
    background-color: #0056b3;
  }
  
  .newsletter-message {
    text-align: center;
    padding: 10px;
    margin-top: 15px;
    border-radius: 5px;
  }
  
  .newsletter-message.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
  }
  
  .newsletter-message.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
  }
  .admin-dashboard {
    min-height: 100vh;
    background-color: var(--background-color, #4c4c4d);
    color: #fff;
  }
  
  .dashboard-header {
    padding: 1rem 2rem;
    text-align: center;
    background-color: var(--header-bg-color, #0f0e0e);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    color: #fff;
  }
  
  .dashboard-header h1 {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--header-text-color, #f7f7f7);
  }
  
  .dashboard-content {
    display: flex;
    flex-direction: column;
    padding: 1rem;
  }
  
  .dashboard-navigation {
    margin-bottom: 1rem;
    color: #fff;
  }
  
  .mobile-menu-button {
    display: none;
  }
  
  .mobile-menu-dropdown {
    display: none;
  }
  
  .desktop-navigation {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
  }
  
  .desktop-menu-item {
    padding: 0.5rem 1rem;
    border: 2px solid transparent;
    background: none;
    font-size: 1rem;
    color: var(--menu-text-color, #ffffff);
    cursor: pointer;
    transition: all 0.3s ease;
  }
  
  .desktop-menu-item.active {
    border-bottom-color: var(--active-color, #007bff);
    color: var(--active-color, #007bff);
  }
  
  .desktop-menu-item:hover {
    color: var(--hover-color, #333);
  }
  
  .desktop-menu-icon {
    margin-right: 0.5rem;
    vertical-align: middle;
  }
  
  .dashboard-content-area {
    padding: 1rem;
    background-color: var(--content-bg-color, #fff);
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  }
  
  /* Mobile-specific styles */
  @media (max-width: 768px) {
    .desktop-navigation {
      display: none;
    }
  
    .mobile-menu-button {
      display: block;
    }
  
    .mobile-menu-dropdown {
      display: block;
    }
  
    .menu-button {
      width: 100%;
      padding: 1rem;
      font-size: 1rem;
      background-color: var(--menu-bg-color, #fff);
      border: none;
      text-align: left;
      cursor: pointer;
    }
  
    .menu-item {
      display: flex;
      align-items: center;
      padding: 0.75rem 1rem;
      font-size: 1rem;
      color: var(--menu-text-color, #555);
      background: none;
      border: none;
      cursor: pointer;
      transition: all 0.3s ease;
    }
  
    .menu-item-active {
      background-color: var(--menu-active-bg, #e0f3ff);
      color: var(--active-color, #007bff);
    }
  
    .menu-icon {
      margin-right: 0.5rem;
      font-size: 1.2rem;
    }
  }
  /* Conteneur principal */
.donation-page {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  padding: 2rem;
  background-color: #010101;
  color: #ffffff;
  min-height: 100vh;
  box-sizing: border-box;
}

/* Section texte et formulaire */
.donation-text, .donation-container {
  flex: 1;
  background-color: #1e1e1e;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  min-height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Effet de survol */
.donation-text:hover, .donation-container:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
}

/* Texte */
.donation-text h2 {
  font-size: 1.8rem;
  color: #0077cc;
  margin-bottom: 1rem;
}

.donation-text p {
  font-size: 1rem;
  line-height: 1.6;
  color: #e0e0e0;
  margin-bottom: 1rem;
}

.donation-text strong {
  color: #0077cc;
}

.donation-text ul {
  margin: 1rem 0;
  padding-left: 1.5rem;
  list-style: disc;
}

.donation-text ul li {
  margin-bottom: 0.5rem;
  color: #cccccc;
}

/* Titre formulaire */
h2 {
  text-align: center;
  color: #0077cc;
  margin-bottom: 1.5rem;
}

/* Formulaire */
.donation-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Groupes de champs */
.form-group {
  display: flex;
  flex-direction: column;
}

.form-group label {
  font-weight: bold;
  margin-bottom: 0.5rem;
  color: #ffffff;
}

.form-group input {
  padding: 0.75rem;
  border: 1px solid #444;
  border-radius: 4px;
  font-size: 1rem;
  background-color: #2c2c2c;
  color: #ffffff;
}

.form-group input:focus {
  border-color: #0077cc;
  outline: none;
  box-shadow: 0 0 5px rgba(0, 119, 204, 0.5);
}

/* Montant total */
.total-display {
  font-size: 1.2rem;
  text-align: center;
  font-weight: bold;
  color: #0077cc;
  margin-top: 1rem;
}

/* Bouton PayPal */
.paypal-buttons {
  margin-top: 1rem;
  display: flex;
  justify-content: center;
}

/* Messages d'erreur ou d'état */
.message {
  text-align: center;
  color: #cc0000;
  font-weight: bold;
}

/* Responsivité */
@media (max-width: 768px) {
  .donation-page {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }

  .donation-text, .donation-container {
    max-width: 100%;
  }

  h2 {
    font-size: 1.5rem;
  }

  .form-group input {
    font-size: 0.9rem;
  }
}
/* Global Reset */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #f5f5f5;
    color: #333;
  }
  
  /* Page Container */
  .reset-password-page {
    max-width: 400px;
    margin: 50px auto;
    padding: 20px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }
  
  h2 {
    text-align: center;
    margin-bottom: 20px;
    font-size: 24px;
    color: #007bff;
  }
  
  /* Form Styles */
  form {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }
  
  .form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
  
  label {
    font-size: 14px;
    font-weight: bold;
    color: #555;
  }
  
  input {
    padding: 10px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }
  
  input:focus {
    border-color: #007bff;
    outline: none;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
  }
  
  /* Button Styles */
  button.submit-button {
    background: #007bff;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
  }
  
  button.submit-button:hover {
    background: #0056b3;
  }
  
  button:disabled {
    background: #aaa;
    cursor: not-allowed;
  }
  
  /* Success and Error Messages */
  .success-message {
    color: #28a745;
    font-size: 14px;
    text-align: center;
  }
  
  .error-message {
    color: #dc3545;
    font-size: 14px;
    text-align: center;
  }
  
  /* Popup Styles */
  .popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
  }
  
  .popup-content {
    background: white;
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    animation: popup-fade-in 0.3s ease;
  }
  
  .popup-content h3 {
    font-size: 20px;
    color: #007bff;
    margin-bottom: 10px;
  }
  
  .popup-content p {
    font-size: 16px;
    color: #333;
    margin-bottom: 20px;
  }
  
  button.close-button {
    background: #28a745;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
  }
  
  button.close-button:hover {
    background: #218838;
  }
  
  /* Keyframes for Popup */
  @keyframes popup-fade-in {
    from {
      opacity: 0;
      transform: scale(0.9);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
  /* Conteneur principal */
.letter-generator-container {
  background-color: black;
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  padding: 2rem;
  margin: 0 auto;
  width: 100%;
  
  box-sizing: border-box;
  height: 900px; /* Prend toute la hauteur de l'écran */
}

/* Sections info et carte */
.info-section,
.card-container {
  flex: 1;
  background-color: #292828;
  padding: 1.5rem;
  border-radius: 8px;
  color: white;
  overflow-y: auto;
}
.info-section h3 {
  font-size: 1.3rem;
  text-align: center;
  margin-top: 1.5rem;
  color: #ff0606;
}

.info-section p {
  padding-left: 1.5rem;
  margin-top: 1rem;
  color: #fff;
}

.warning-title {
  color: #d9534f; /* Rouge */
  font-weight: bold;
  text-align: center;
}
.warning-text  {
  color: #d9534f;
  font-size: 0.9rem;
  line-height: 1.6;
}
/* Carte Flip */
.card-container {
  perspective: 1000px;
}

.card {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s;
}

.card.flipped {
  transform: rotateY(180deg);
}

.card-front,
.card-back {
  backface-visibility: hidden;
  position: absolute;
  width: 100%;
  height: 100%;

  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
}

.card-back {
  transform: rotateY(180deg);
}

/* Texte généré agrandi */
.generated-letter.large-result {
  height: 650px; /* Taille plus grande */
  font-size: 1rem;
  line-height: 1.5;
  background-color: #1f1f1f;
  color: white;
  padding: 1rem;
  border: 1px solid #444;
  border-radius: 4px;
}

/* Boutons */
.download-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.download-button {
  background-color: #28a745;
  color: white;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.download-button:hover {
  background-color: #218838;
}

.generate-button {
  padding: 0.75rem 1.5rem;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.generate-button:hover {
  background-color: #0056b3;
}

.prompt-input {
  width: 100%;
  height: 120px;
  background-color: #1f1f1f;
  color: white;
  border: 1px solid #444;
  border-radius: 4px;
  padding: 1rem;
  resize: none;
}
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.popup {
  background: #fff;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  text-align: center;
  max-width: 400px;
}

.popup h2 {
  color: #d9534f;
  margin-bottom: 1rem;
}

.popup p {
  margin-bottom: 1.5rem;
}

.popup-button {
  padding: 0.75rem 1.5rem;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.popup-button:hover {
  background-color: #0056b3;
}
.validation-page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  text-align: center;
  font-family: Arial, sans-serif;
  background-color: #f9f9f9;
  padding: 20px;
}

.loading-message,
.success-message,
.error-message {
  font-size: 1.4rem;
  margin: 10px 0;
}

.loading-message {
  color: #555;
  display: flex;
  align-items: center;
}

.success-message {
  color: #28a745;
  font-weight: bold;
}

.error-message {
  color: #dc3545;
  font-weight: bold;
}

.loading-spinner {
  display: inline-block;
  margin-left: 10px;
  width: 20px;
  height: 20px;
  border: 3px solid #ddd;
  border-top-color: #555;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.actions {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 15px;
}

.actions button {
  padding: 12px 20px;
  font-size: 16px;
  cursor: pointer;
  border: none;
  border-radius: 5px;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.donation-button {
  background-color: #2563eb;
  color: white;
}

.adhesion-button {
  background-color: #22c55e;
  color: white;
}

.ok-button {
  background-color: #6b7280;
  color: white;
}

.actions button:hover {
  transform: scale(1.05);
  opacity: 0.9;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.not-found-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    text-align: center;
    background-color: #1f1f1f;
    color: #ffffff;
  }
  
  .not-found-title {
    font-size: 6rem;
    font-weight: bold;
    margin: 0;
    color: #ff4c4c; /* Rouge vif pour le 404 */
  }
  
  .not-found-text {
    font-size: 1.5rem;
    margin: 1rem 0;
    color: #cccccc;
  }
  
  .not-found-button {
    margin-top: 1.5rem;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    text-decoration: none;
    background-color: #007bff;
    color: #ffffff;
    border-radius: 4px;
    transition: background-color 0.3s ease;
  }
  
  .not-found-button:hover {
    background-color: #0056b3;
  }
  .react-clock {
  display: block;
  position: relative;
}

.react-clock,
.react-clock *,
.react-clock *:before,
.react-clock *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.react-clock__face {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border: 1px solid black;
  border-radius: 50%;
}

.react-clock__hand {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  right: 50%;
}

.react-clock__hand__body {
  position: absolute;
  background-color: black;
  transform: translateX(-50%);
}

.react-clock__mark {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  right: 50%;
}

.react-clock__mark__body {
  position: absolute;
  background-color: black;
  transform: translateX(-50%);
}

.react-clock__mark__number {
  position: absolute;
  left: -40px;
  width: 80px;
  text-align: center;
}

.react-clock__second-hand__body {
  background-color: red;
}

.rbc-btn {
  color: inherit;
  font: inherit;
  margin: 0;
}

button.rbc-btn {
  overflow: visible;
  text-transform: none;
  -webkit-appearance: button;
     -moz-appearance: button;
          appearance: button;
  cursor: pointer;
}

button[disabled].rbc-btn {
  cursor: not-allowed;
}

button.rbc-input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

.rbc-calendar {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}

.rbc-m-b-negative-3 {
  margin-bottom: -3px;
}

.rbc-h-full {
  height: 100%;
}

.rbc-calendar *,
.rbc-calendar *:before,
.rbc-calendar *:after {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}

.rbc-abs-full, .rbc-row-bg {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.rbc-ellipsis, .rbc-show-more, .rbc-row-segment .rbc-event-content, .rbc-event-label {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rbc-rtl {
  direction: rtl;
}

.rbc-off-range {
  color: #999999;
}

.rbc-off-range-bg {
  background: #e6e6e6;
}

.rbc-header {
  overflow: hidden;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 0%;
          flex: 1 0 0%;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 3px;
  text-align: center;
  vertical-align: middle;
  font-weight: bold;
  font-size: 90%;
  min-height: 0;
  border-bottom: 1px solid #ddd;
}
.rbc-header + .rbc-header {
  border-left: 1px solid #ddd;
}
.rbc-rtl .rbc-header + .rbc-header {
  border-left-width: 0;
  border-right: 1px solid #ddd;
}
.rbc-header > a, .rbc-header > a:active, .rbc-header > a:visited {
  color: inherit;
  text-decoration: none;
}

.rbc-button-link {
  color: inherit;
  background: none;
  margin: 0;
  padding: 0;
  border: none;
  cursor: pointer;
  -webkit-user-select: text;
     -moz-user-select: text;
      -ms-user-select: text;
          user-select: text;
}

.rbc-row-content {
  position: relative;
  -moz-user-select: none;
   -ms-user-select: none;
       user-select: none;
  -webkit-user-select: none;
  z-index: 4;
}

.rbc-row-content-scrollable {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
}
.rbc-row-content-scrollable .rbc-row-content-scroll-container {
  height: 100%;
  overflow-y: scroll;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
  /* Hide scrollbar for Chrome, Safari and Opera */
}
.rbc-row-content-scrollable .rbc-row-content-scroll-container::-webkit-scrollbar {
  display: none;
}

.rbc-today {
  background-color: #eaf6ff;
}

.rbc-toolbar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 10px;
  font-size: 16px;
}
.rbc-toolbar .rbc-toolbar-label {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  padding: 0 10px;
  text-align: center;
}
.rbc-toolbar button {
  color: #373a3c;
  display: inline-block;
  margin: 0;
  text-align: center;
  vertical-align: middle;
  background: none;
  background-image: none;
  border: 1px solid #ccc;
  padding: 0.375rem 1rem;
  border-radius: 4px;
  line-height: normal;
  white-space: nowrap;
}
.rbc-toolbar button:active, .rbc-toolbar button.rbc-active {
  background-image: none;
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
          box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  background-color: #e6e6e6;
  border-color: #adadad;
}
.rbc-toolbar button:active:hover, .rbc-toolbar button:active:focus, .rbc-toolbar button.rbc-active:hover, .rbc-toolbar button.rbc-active:focus {
  color: #373a3c;
  background-color: #d4d4d4;
  border-color: #8c8c8c;
}
.rbc-toolbar button:focus {
  color: #373a3c;
  background-color: #e6e6e6;
  border-color: #adadad;
}
.rbc-toolbar button:hover {
  color: #373a3c;
  cursor: pointer;
  background-color: #e6e6e6;
  border-color: #adadad;
}

.rbc-btn-group {
  display: inline-block;
  white-space: nowrap;
}
.rbc-btn-group > button:first-child:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.rbc-btn-group > button:last-child:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.rbc-rtl .rbc-btn-group > button:first-child:not(:last-child) {
  border-radius: 4px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.rbc-rtl .rbc-btn-group > button:last-child:not(:first-child) {
  border-radius: 4px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.rbc-btn-group > button:not(:first-child):not(:last-child) {
  border-radius: 0;
}
.rbc-btn-group button + button {
  margin-left: -1px;
}
.rbc-rtl .rbc-btn-group button + button {
  margin-left: 0;
  margin-right: -1px;
}
.rbc-btn-group + .rbc-btn-group, .rbc-btn-group + button {
  margin-left: 10px;
}

@media (max-width: 767px) {
  .rbc-toolbar {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.rbc-event, .rbc-day-slot .rbc-background-event {
  border: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-box-shadow: none;
          box-shadow: none;
  margin: 0;
  padding: 2px 5px;
  background-color: #3174ad;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  width: 100%;
  text-align: left;
}
.rbc-slot-selecting .rbc-event, .rbc-slot-selecting .rbc-day-slot .rbc-background-event, .rbc-day-slot .rbc-slot-selecting .rbc-background-event {
  cursor: inherit;
  pointer-events: none;
}
.rbc-event.rbc-selected, .rbc-day-slot .rbc-selected.rbc-background-event {
  background-color: #265985;
}
.rbc-event:focus, .rbc-day-slot .rbc-background-event:focus {
  outline: 5px auto #3b99fc;
}

.rbc-event-label {
  font-size: 80%;
}

.rbc-event-overlaps {
  -webkit-box-shadow: -1px 1px 5px 0px rgba(51, 51, 51, 0.5);
          box-shadow: -1px 1px 5px 0px rgba(51, 51, 51, 0.5);
}

.rbc-event-continues-prior {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.rbc-event-continues-after {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.rbc-event-continues-earlier {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.rbc-event-continues-later {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.rbc-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

.rbc-row-segment {
  padding: 0 1px 1px 1px;
}
.rbc-selected-cell {
  background-color: rgba(0, 0, 0, 0.1);
}

.rbc-show-more {
  background-color: rgba(255, 255, 255, 0.3);
  z-index: 4;
  font-weight: bold;
  font-size: 85%;
  height: auto;
  line-height: normal;
  color: #3174ad;
}
.rbc-show-more:hover, .rbc-show-more:focus {
  color: #265985;
}

.rbc-month-view {
  position: relative;
  border: 1px solid #ddd;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 0px;
          flex: 1 0 0;
  width: 100%;
  -moz-user-select: none;
   -ms-user-select: none;
       user-select: none;
  -webkit-user-select: none;
  height: 100%;
}

.rbc-month-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

.rbc-month-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 0px;
          flex: 1 0 0;
  -ms-flex-preferred-size: 0px;
      flex-basis: 0px;
  overflow: hidden;
  height: 100%;
}
.rbc-month-row + .rbc-month-row {
  border-top: 1px solid #ddd;
}

.rbc-date-cell {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
  min-width: 0;
  padding-right: 5px;
  text-align: right;
}
.rbc-date-cell.rbc-now {
  font-weight: bold;
}
.rbc-date-cell > a, .rbc-date-cell > a:active, .rbc-date-cell > a:visited {
  color: inherit;
  text-decoration: none;
}

.rbc-row-bg {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 0px;
          flex: 1 0 0;
  overflow: hidden;
  right: 1px;
}

.rbc-day-bg {
  -webkit-box-flex: 1;
      -ms-flex: 1 0 0%;
          flex: 1 0 0%;
}
.rbc-day-bg + .rbc-day-bg {
  border-left: 1px solid #ddd;
}
.rbc-rtl .rbc-day-bg + .rbc-day-bg {
  border-left-width: 0;
  border-right: 1px solid #ddd;
}

.rbc-overlay {
  position: absolute;
  z-index: 5;
  border: 1px solid #e5e5e5;
  background-color: #fff;
  -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
  padding: 10px;
}
.rbc-overlay > * + * {
  margin-top: 1px;
}

.rbc-overlay-header {
  border-bottom: 1px solid #e5e5e5;
  margin: -10px -10px 5px -10px;
  padding: 2px 10px;
}

.rbc-agenda-view {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 0px;
          flex: 1 0 0;
  overflow: auto;
}
.rbc-agenda-view table.rbc-agenda-table {
  width: 100%;
  border: 1px solid #ddd;
  border-spacing: 0;
  border-collapse: collapse;
}
.rbc-agenda-view table.rbc-agenda-table tbody > tr > td {
  padding: 5px 10px;
  vertical-align: top;
}
.rbc-agenda-view table.rbc-agenda-table .rbc-agenda-time-cell {
  padding-left: 15px;
  padding-right: 15px;
  text-transform: lowercase;
}
.rbc-agenda-view table.rbc-agenda-table tbody > tr > td + td {
  border-left: 1px solid #ddd;
}
.rbc-rtl .rbc-agenda-view table.rbc-agenda-table tbody > tr > td + td {
  border-left-width: 0;
  border-right: 1px solid #ddd;
}
.rbc-agenda-view table.rbc-agenda-table tbody > tr + tr {
  border-top: 1px solid #ddd;
}
.rbc-agenda-view table.rbc-agenda-table thead > tr > th {
  padding: 3px 5px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}
.rbc-rtl .rbc-agenda-view table.rbc-agenda-table thead > tr > th {
  text-align: right;
}

.rbc-agenda-time-cell {
  text-transform: lowercase;
}
.rbc-agenda-time-cell .rbc-continues-after:after {
  content: " »";
}
.rbc-agenda-time-cell .rbc-continues-prior:before {
  content: "« ";
}

.rbc-agenda-date-cell,
.rbc-agenda-time-cell {
  white-space: nowrap;
}

.rbc-agenda-event-cell {
  width: 100%;
}

.rbc-time-column {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-height: 100%;
}
.rbc-time-column .rbc-timeslot-group {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.rbc-timeslot-group {
  border-bottom: 1px solid #ddd;
  min-height: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column nowrap;
          flex-flow: column nowrap;
}

.rbc-time-gutter,
.rbc-header-gutter {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
}

.rbc-label {
  padding: 0 5px;
}

.rbc-day-slot {
  position: relative;
}
.rbc-day-slot .rbc-events-container {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  margin-right: 10px;
  top: 0;
}
.rbc-day-slot .rbc-events-container.rbc-rtl {
  left: 10px;
  right: 0;
}
.rbc-day-slot .rbc-event, .rbc-day-slot .rbc-background-event {
  border: 1px solid #265985;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  max-height: 100%;
  min-height: 20px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column wrap;
          flex-flow: column wrap;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  overflow: hidden;
  position: absolute;
}
.rbc-day-slot .rbc-background-event {
  opacity: 0.75;
}
.rbc-day-slot .rbc-event-label {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  padding-right: 5px;
  width: auto;
}
.rbc-day-slot .rbc-event-content {
  width: 100%;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
  word-wrap: break-word;
  line-height: 1;
  height: 100%;
  min-height: 1em;
}
.rbc-day-slot .rbc-time-slot {
  border-top: 1px solid #f7f7f7;
}

.rbc-time-view-resources .rbc-time-gutter,
.rbc-time-view-resources .rbc-time-header-gutter {
  position: sticky;
  left: 0;
  background-color: white;
  border-right: 1px solid #ddd;
  z-index: 10;
  margin-right: -1px;
}
.rbc-time-view-resources .rbc-time-header {
  overflow: hidden;
}
.rbc-time-view-resources .rbc-time-header-content {
  min-width: auto;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 0px;
          flex: 1 0 0;
  -ms-flex-preferred-size: 0px;
      flex-basis: 0px;
}
.rbc-time-view-resources .rbc-time-header-cell-single-day {
  display: none;
}
.rbc-time-view-resources .rbc-day-slot {
  min-width: 140px;
}
.rbc-time-view-resources .rbc-header,
.rbc-time-view-resources .rbc-day-bg {
  width: 140px;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
  -ms-flex-preferred-size: 0 px;
      flex-basis: 0 px;
}

.rbc-time-header-content + .rbc-time-header-content {
  margin-left: -1px;
}

.rbc-time-slot {
  -webkit-box-flex: 1;
      -ms-flex: 1 0 0px;
          flex: 1 0 0;
}
.rbc-time-slot.rbc-now {
  font-weight: bold;
}

.rbc-day-header {
  text-align: center;
}

.rbc-slot-selection {
  z-index: 10;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  font-size: 75%;
  width: 100%;
  padding: 3px;
}

.rbc-slot-selecting {
  cursor: move;
}

.rbc-time-view {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  width: 100%;
  border: 1px solid #ddd;
  min-height: 0;
}
.rbc-time-view .rbc-time-gutter {
  white-space: nowrap;
  text-align: right;
}
.rbc-time-view .rbc-allday-cell {
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  width: 100%;
  height: 100%;
  position: relative;
}
.rbc-time-view .rbc-allday-cell + .rbc-allday-cell {
  border-left: 1px solid #ddd;
}
.rbc-time-view .rbc-allday-events {
  position: relative;
  z-index: 4;
}
.rbc-time-view .rbc-row {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  min-height: 20px;
}

.rbc-time-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}
.rbc-time-header.rbc-overflowing {
  border-right: 1px solid #ddd;
}
.rbc-rtl .rbc-time-header.rbc-overflowing {
  border-right-width: 0;
  border-left: 1px solid #ddd;
}
.rbc-time-header > .rbc-row:first-child {
  border-bottom: 1px solid #ddd;
}
.rbc-time-header > .rbc-row.rbc-row-resource {
  border-bottom: 1px solid #ddd;
}

.rbc-time-header-cell-single-day {
  display: none;
}

.rbc-time-header-content {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  min-width: 0;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  border-left: 1px solid #ddd;
}
.rbc-rtl .rbc-time-header-content {
  border-left-width: 0;
  border-right: 1px solid #ddd;
}
.rbc-time-header-content > .rbc-row.rbc-row-resource {
  border-bottom: 1px solid #ddd;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.rbc-time-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 0%;
          flex: 1 0 0%;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  width: 100%;
  border-top: 2px solid #ddd;
  overflow-y: auto;
  position: relative;
}
.rbc-time-content > .rbc-time-gutter {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
}
.rbc-time-content > * + * > * {
  border-left: 1px solid #ddd;
}
.rbc-rtl .rbc-time-content > * + * > * {
  border-left-width: 0;
  border-right: 1px solid #ddd;
}
.rbc-time-content > .rbc-day-slot {
  width: 100%;
  -moz-user-select: none;
   -ms-user-select: none;
       user-select: none;
  -webkit-user-select: none;
}

.rbc-current-time-indicator {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  height: 1px;
  background-color: #74ad31;
  pointer-events: none;
}

.rbc-resource-grouping.rbc-time-header-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.rbc-resource-grouping .rbc-row .rbc-header {
  width: 141px;
}

/*# sourceMappingURL=react-big-calendar.css.map *//* Global Styling */
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background-color: #202124; /* Dark background */
  color: #e8eaed; /* Light text */
}

/* Layout */
.reservation-page {
  display: flex;
  height: 100vh;
}

/* Sidebar Styling */
.sidebar {
  width: 15%;
  background: #111;
  color: #fff;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  overflow-y: auto;
  box-sizing: border-box;
}

.clock-container {
  margin-bottom: 20px;
}

.mini-calendar {
  width: 100%;
  background: #222;
  padding: 10px;
  border-radius: 8px;
}

.mini-calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  color: #e8eaed;
  font-size: 16px;
}

.mini-calendar-header button {
  background: none;
  border: none;
  color: #e8eaed;
  font-size: 20px;
  cursor: pointer;
}

.mini-calendar-header button:hover {
  color: #1a73e8;
}

.price-info {
  margin-top: 20px;
  text-align: center;
}

.price-info p {
  font-size: 14px;
  line-height: 1.5;
}

/* Main Content */
.main-content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

.calendar-container {
  background: #303134;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  height: calc(100% - 40px);
}

.rbc-calendar {
  background: #202124;
  color: #e8eaed;
}

.rbc-time-slot {
  height: 80px;
}

.rbc-time-header-cell {
  height: 80px;
}

.rbc-toolbar {
  background: #303134;
  color: #e8eaed;
  padding: 10px;
  border-bottom: 1px solid #3c4043;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.rbc-toolbar button {
  background-color: #1a73e8;
  color: #fff;
  border: none;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
}

.rbc-toolbar button:hover {
  background-color: #1764c4;
}

.rbc-event {
  background-color: #8ab4f8;
  color: #202124;
  padding: 4px;
  border-radius: 4px;
}

.rbc-today {
  background-color: rgba(26, 115, 232, 0.3);
}

/* Modal Styling */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.modal {
  background: #303134;
  padding: 20px;
  border-radius: 8px;
  color: #e8eaed;
  width: 600px;
  max-width: 90%;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.4);
  overflow-y: auto;
  max-height: 80vh;
}

.modal h3,
.modal h4,
.modal h5 {
  margin-top: 0;
  color: #ffffff;
}

.modal ul {
  margin-left: 20px;
  list-style: disc;
}.modal p {
 color: #fff;
}

.modal-actions {
  text-align: right;
  margin-top: 15px;
}

.close-button {
  background: #d93025;
  color: #fff;
  border: none;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.close-button:hover {
  background: #b0201d;
}

/* Button Styling */
.modal button {
  background: #1a73e8;
  color: #fff;
  border: none;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
}

.modal button:hover {
  background: #1764c4;
}
.react-clock__hand__body{
  background-color: #efe2e2;
}
/* Clock Styling */
.react-clock {
  background: none;
  border: none;
  margin: 0 auto;
  width: 150px;
  height: 150px;
}

.react-clock__face {
  stroke: #e70b0b;
}

.react-clock__hour-hand,
.react-clock__minute-hand {
  stroke: #ffffff;
}

.react-clock__second-hand {
  stroke: #ff0000;
}

.react-clock__mark {
  stroke: #ffffff;
}

.react-clock__center {
  fill: #ffffff;
}
.digital-clock {
  font-size: 24px;
  font-weight: bold;
  color: #1a73e8;
  background: #303134;
  padding: 10px 20px;
  border-radius: 8px;
  text-align: center;
  margin-top: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Info Button */
.info-button {
  margin-top: 20px;
  padding: 10px 15px;
  background-color: #1a73e8;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  display: block;
  text-align: center;
}

.info-button:hover {
  background-color: #1764c4;
}

/* Responsive Design */
@media (max-width: 768px) {
  .reservation-page {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
    margin-bottom: 20px;
  }

  .main-content {
    width: 100%;
  }

  .rbc-time-slot {
    height: 70px;
  }

  .react-clock {
    width: 120px;
    height: 120px;
  }
}

  
  /* Conteneur principal */
  .adhesion-page {
    max-width: 800px;
    margin: 2rem auto;
    padding: 2rem;
    background-color: #010101;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
 
  }
  
  h2 {
    text-align: center;
    color: #0077cc;
    margin-bottom: 1.5rem;
  }
  
  /* Conteneur du formulaire */
  .adhesion-container {
    margin: 1rem 0;
  }
  
  .adhesion-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  
  /* Groupes de champs */
  .form-group {
    display: flex;
    flex-direction: column;
  
  }
  
  .form-group label {
    font-weight: bold;
    margin-bottom: 0.5rem;
    color: #ffffff;
  }
  
  .form-group input {
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
  }
  
  .form-group input:focus {
    border-color: #0077cc;
    outline: none;
  }
  
  /* Montant total */
  .total-display {
    font-size: 1.2rem;
    text-align: center;
    font-weight: bold;
    color: #0077cc;
    margin-top: 1rem;
  }
  
  /* Bouton PayPal */
  .paypal-buttons {
    margin-top: 1rem;
    display: flex;
    justify-content: center;
  }
  
  /* Messages d'erreur ou d'état */
  .message {
    text-align: center;
    color: #cc0000;
    font-weight: bold;
  }
  
  /* Responsivité */
  @media (max-width: 600px) {
    .adhesion-page {
      padding: 1rem;
    }
  
    h2 {
      font-size: 1.5rem;
    }
  
    .form-group input {
      font-size: 0.9rem;
    }
  }
  /* NonoChannelLive.css */

/* Conteneur global */
.nono-channel-live {
  padding: 20px;
  font-family: Arial, sans-serif;
  max-width: 1200px;
  margin: 0 auto;
}

/* Titre centré */
.nono-channel-live h1 {
  text-align: center;
  margin-bottom: 20px;
}

/* Mode selector (OBS / Webcam) */
.mode-selector {
  text-align: center;
  margin-bottom: 20px;
}
.mode-selector label {
  margin: 0 10px;
  font-weight: bold;
}

/* Conteneur flex pour vidéo et chat */
.video-chat-container {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 30px;
}

/* Section vidéo (gauche) */
.video-section {
  flex: 2;
}

/* Styles pour le mode OBS : Live vidéo */
.live-video {
  text-align: center;
  background-color: #000;
  padding: 10px;
}

/* Styles pour le mode Webcam : Aperçu webcam */
.webcam-preview {
  text-align: center;
  background-color: #000;
  padding: 10px;
}

/* Sélecteur de caméra */
.device-selector {
  margin-bottom: 10px;
}
.device-selector label {
  margin-right: 10px;
  font-weight: bold;
}

/* Contrôles pour la webcam */
.webcam-controls {
  margin-bottom: 10px;
  display: flex;
  gap: 10px;
  justify-content: center;
}

/* Affichage du lien du stream pour la webcam */
.webcam-stream-link {
  margin-top: 100px;
  background-color: #f90c0c;
  padding: 8px;
  border-radius: 4px;
  font-size: 0.9rem;
  text-align: center;
}

/* Styles pour la modal (OBS) */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.modal-content {
  background: #fff;
  padding: 20px;
  border-radius: 4px;
  width: 90%;
  max-width: 500px;
}

/* Section chat (droite) */
.live-chat {
  flex: 1;
  border-top: 1px solid #ccc;
  padding-top: 20px;
}
.live-chat h2 {
  margin-bottom: 10px;
}

/* Fenêtre de chat */
.chat-window {
  height: 300px;
  border: 1px solid #ddd;
  overflow-y: auto;
  padding: 10px;
  background: #0f0f0f;
  margin-bottom: 10px;
}
.chat-message {
  padding: 5px;
  margin-bottom: 5px;
  border-bottom: 1px solid #eee;
  color: #f8f2f2;
}

/* Zone de saisie et bouton d’envoi */
.chat-input {
  display: flex;
  gap: 10px;
}
.chat-input input[type="text"] {
  flex-grow: 1;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.chat-input button {
  padding: 8px 16px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.chat-input button:hover {
  background-color: #0056b3;
}
/* Container global pour forcer le footer en bas */
.page-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #000;
  color: white;
  padding: 20px;
}

/* En-tête centré */
.videos-page__header {
  text-align: center;
  margin-bottom: 20px;
}

/* Bloc de texte sous le titre */
.videos-page__text {
  color: white;
  max-width: 800px;
  margin: 0 auto 20px auto;
  text-align: center;
  font-size: 18px;
  line-height: 1.5;
}
.videos-page__text p {
  color: white;
}
/* Dernière vidéo mise en ligne */
.videos-page__latest-video {
  margin-bottom: 20px;
  cursor: pointer;
  text-align: center;
}
.videos-page__latest-video h2 {
  margin-top: 10px;
  font-size: 20px;
}
.videos-page__latest-thumbnail {
  width: 100%;
  max-width: 800px;
  border-radius: 8px;
}

/* Grille des autres vidéos : 3 colonnes par ligne */
.videos-page__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

/* Carte vidéo dans la grille */
.video-thumbnail {
  cursor: pointer;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 10px;
  background-color: #1a1a1a;
  transition: transform 0.2s;
  text-align: center;
}
.video-thumbnail:hover {
  transform: scale(1.05);
}
.video-thumbnail img {
  width: 100%;
  border-radius: 4px;
}
.video-thumbnail p {
  color: white;
  margin-top: 8px;
  font-size: 14px;
}

/* Modal overlay */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

/* Contenu de la modal */
.modal-content {
  position: relative;
  background-color: #070707;
  padding: 20px;
  border-radius: 8px;
  max-width: 800px;
  width: 90%;
}

/* Bouton de fermeture de la modal */
.close-button {
  position: absolute;
  top: 10px;
  right: 15px;
  border: none;
  background: none;
  font-size: 24px;
  cursor: pointer;
  color: white;
}

/* Container pour l'iframe vidéo dans la modal */
.video-container {
  position: relative;
  padding-bottom: 56.25%; /* Ratio 16:9 */
  height: 0;
  margin-top: 20px;
}
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Footer qui reste en bas */
.page-footer {
  background-color: #222;
  text-align: center;
  padding: 10px;
  font-size: 14px;
  margin-top: auto;
}
/* src/styles/direct.css */

.direct {
  display: flex;
  flex-direction: row;
  height: 100vh;
}

/* Zone vidéo */
.direct__video {
  flex: 3;
  background-color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Application d'un style aux éléments vidéo et iframe présents dans la zone vidéo */
.direct__video video,
.direct__video iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Affichage quand il n'y a pas de flux */
.direct__no-stream {
  color: white;
  font-size: 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.direct__logo-no-stream {
  max-width: 650px; /* Ajustez la taille du logo selon vos besoins */
  margin-bottom: 10px;
}

.direct__no-stream p {
  color: white;
  font-size: 6rem;
}

/* Zone chat */
.direct__chat {
  flex: 1;
  border-left: 1px solid #ccc;
  padding: 10px;
  overflow-y: auto;
  background-color: #0d0c0c;
}

/* Titre du chat */
.direct__chat h2 {
  font-size: 1.5rem;
  margin-bottom: 10px;
}

/* Style des messages de chat */
.chat-message {
  margin-bottom: 10px;
  padding: 5px;
  border-bottom: 1px solid #eee;
  font-size: 1rem;
}

/* (Optionnel) Pour forcer le comportement responsive de l'iframe YouTube */
.youtube-player iframe,
.youtube-monitor iframe {
  width: 100%;
  height: 100%;
}
/* Général */
._window_dxuvo_3 {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 350px;
  height: 550px;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  z-index: 1000;
  transition: all 0.3s ease;
}

._window_dxuvo_3._fullScreen_dxuvo_35 {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
}

/* Header */
._header_dxuvo_59 {
  background-color: #2563eb;
  height: 120px;
  color: white;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

._robotIcon_dxuvo_79 {
  width: 50px;
  height: 50px;
  margin-right: 0.5rem;
}

._tooltip_dxuvo_91 {
  position: absolute;
  bottom: 80px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 8px 12px;
  border-radius: 5px;
  font-size: 0.8rem;
  white-space: nowrap;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  animation: _fadeIn_dxuvo_1 0.2s ease-in-out;
}

@keyframes _fadeIn_dxuvo_1 {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

._closeButton_dxuvo_139 {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 1.2rem;
}

/* Body */
._body_dxuvo_157 {
  flex: 1;
  padding: 1rem;
  overflow-y: auto;
  background-color: #f9f9f9;
}

._userMessage_dxuvo_171,
._aiMessage_dxuvo_173 {
  display: flex;
  margin-bottom: 10px;
  align-items: flex-end;
}

._userMessage_dxuvo_171 {
  justify-content: flex-end;
}

._aiMessage_dxuvo_173 {
  justify-content: flex-start;
}

._messageBubble_dxuvo_201 {
  max-width: 70%;
  padding: 10px 15px;
  border-radius: 15px;
  font-size: 0.9rem;
  line-height: 1.4;
  word-wrap: break-word;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

._userMessage_dxuvo_171 ._messageBubble_dxuvo_201 {
  background-color: #2563eb;
  color: white;
  border-bottom-right-radius: 5px;
}

._aiMessage_dxuvo_173 ._messageBubble_dxuvo_201 {
  background-color: #e5e7eb;
  color: #333;
  border-bottom-left-radius: 5px;
}

/* Footer */
._footer_dxuvo_247 {
  display: flex;
  align-items: center;
  padding: 1rem;
  border-top: 1px solid #ddd;
  background-color: #ffffff;
}

._input_dxuvo_263 {
  flex: 1;
  padding: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 5px;
  margin-right: 0.5rem;
  font-size: 0.9rem;
  transition: border-color 0.2s ease;
}

._input_dxuvo_263:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 4px rgba(37, 99, 235, 0.5);
}

._sendButton_dxuvo_295 {
  background-color: #2563eb;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

._sendButton_dxuvo_295:hover {
  background-color: #1d4ed8;
  transform: scale(1.05);
}

/* Animation lors de l'affichage de l'IA */
._loading_dxuvo_327 {
  font-size: 0.9rem;
  color: #777;
  text-align: center;
  margin-top: 10px;
}
/* Positionnement du bouton en bas à droite */
._chatButtonContainer_1kqov_3 {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
}

/* Bouton du chat réduit */
._chatButton_1kqov_3 {
  background-color: transparent; /* Pas de fond */
  border: none; /* Pas de bordure */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0; /* Supprime les marges internes */
  transition: transform 0.2s ease; /* Animation légère au survol */
  width: 80px;
  height: 80px;
}

/* Mise en valeur au survol */
._chatButton_1kqov_3:hover {
  transform: scale(1.1);
}

/* Image du robot */
._chatIcon_1kqov_57 {
  width: 100%; /* Ajuste automatiquement à la taille du bouton */
  height: auto;
  object-fit: contain; /* Garde les proportions de l'image */
}

/* Tooltip style bande dessinée */
._tooltip_1kqov_71 {
  display: none;
  position: absolute;
  bottom: 90px;
  left: 0%;
  transform: translateX(-50%);
  background-color: #333;
  color: white;
  padding: 10px 15px;
  border-radius: 15px;
  font-size: 14px;
  font-family: "Comic Sans MS", cursive, sans-serif; /* Style bande dessinée */
  white-space: nowrap;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
  text-align: center;
}

/* Triangle de la bulle */
._tooltip_1kqov_71::after {
  content: "";
  position: absolute;
  top: 100%; /* Triangle sous la bulle */
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #333; /* Même couleur que la bulle */
}

/* Affichage de la bulle au survol */
._chatButton_1kqov_3:hover ._tooltip_1kqov_71 {
  display: block;
  z-index: 1000;
}
.body{
  background-color: rgb(245, 26, 26);
}
/* Bouton de bascule de thème */
.theme-toggle {
  padding: 0.5rem; /* p-2 */
  border-radius: 0.375rem; /* rounded-md */
  transition: background-color 0.3s, color 0.3s; /* transitions pour le hover et le mode sombre */
}

/* État normal */
.theme-toggle:hover {
  background-color: #f3f4f6; /* hover:bg-gray-100 */
}

/* Mode sombre */
.theme-toggle.dark {
  background-color: #1f2937; /* dark:bg-gray-800 */
}

.theme-toggle:hover.dark {
  background-color: #374151; /* dark:hover:bg-gray-700 */
}

/* Icônes */
.theme-toggle__icon {
  height: 1.25rem; /* h-5 */
  width: 1.25rem; /* w-5 */
  color: #4b5563; /* text-gray-600 */
}

/* Icône en mode sombre */
.theme-toggle__icon.dark {
  color: #9ca3af; /* dark:text-gray-400 */
}
.footer {
  background-color: #2d3748; /* Couleur de fond */
  color: #ffffff; /* Couleur du texte */
  padding: 3rem 1rem; /* Espace interne */
  text-align: center;
  flex-shrink: 0; /* Empêche la réduction de la taille du footer */
}