/* Main */
body {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    background-color: #FFFFFF;

    /* Style global de la barre de défilement pour Firefox */
    scrollbar-width: thin; /* Réduit la largeur pour Firefox */
    /*scrollbar-color: #007BFF #f9f9f9; /* Couleurs de la barre et de son fond */
}

/* ***************** PAGE ******************* */
main {
    margin-left: 250px; /* Conserver si la sidebar est présente */
    padding: 20px;
    padding-left: 0;
    display: flex;
    justify-content: center; /* Centre les éléments enfants horizontalement */
    align-items: flex-start; /* Aligne les éléments au début */
    position: relative;
    min-height: 100vh;
    width: calc(100% - 250px);
    box-sizing: border-box;
}

/* Styles spécifiques pour la page index */
main.index-page {
    margin-left: 0; /* Annule le décalage pour la page index */
}

/* Page | Zone droite si taille réduite */
@media screen and (max-width: 768px) {
    main {
        margin-left: 0; /* Supprime la marge à gauche sur les écrans plus petits */
        margin-top: 20px;
        padding : 0px;
        width: 100%; /* Utilise la pleine largeur sur les petits écrans */
    }
}

/* Style spécifique aux navigateurs basés sur WebKit (Chrome, Safari, Edge) */
body,
main,
html {
    /* Ces éléments peuvent avoir une barre de défilement dans WebKit */
    overflow: auto; /* Assure que les barres de défilement peuvent être stylisées */
}

body::-webkit-scrollbar,
main::-webkit-scrollbar,
html::-webkit-scrollbar {
    width: 8px; /* Réduit la largeur de la barre de défilement */
    background-color: #f9f9f9; /* Couleur de fond de la barre de défilement */
}

body::-webkit-scrollbar-thumb,
main::-webkit-scrollbar-thumb,
html::-webkit-scrollbar-thumb {
    background-color: darkgrey; /* Couleur de la partie défilable */
    border-radius: 4px; /* Arrondit les coins pour un style moderne */
}

body::-webkit-scrollbar-thumb:hover,
main::-webkit-scrollbar-thumb:hover,
html::-webkit-scrollbar-thumb:hover {
    background-color: dimgray; /* Change de couleur au survol pour un effet interactif */
}

body::-webkit-scrollbar-track,
main::-webkit-scrollbar-track,
html::-webkit-scrollbar-track {
    background-color: #f9f9f9; /* Couleur de fond du rail */
}

/* ***************** HOME PAGE ******************* */

/* Home page | Champ de question */
.bottom-section-homepage {
    position: fixed; /* Fixe la section au bas de la fenêtre du navigateur */
    right: 0; /* S'étend jusqu'au bord droit de la fenêtre du navigateur */
    bottom: 0;
    width: calc(100%); 
    text-align: center;
    padding: 20px 0;
    background-color: transparent; 
}

/* Home page | Zone Avatar & Nom Paisible */
#assistant-header-homepage {
    margin-left: 0;
    text-align: center;
    margin-top: auto; /* Centrer verticalement */
}

/* Home page | <h1>  */
#assistant-header-homepage h1 {
    margin: 0; /* Espace vertical entre Avatar & Nom assistant */
    color: white; /* Couleur du texte en blanc */
}

/* Home page | <h2> */
#assistant-header-homepage h2 {
    font-size: 18px; /* Diminue la taille de la typographie */
    margin: 0; /* Optionnel: retire l'espacement par défaut autour de h2 si nécessaire */
    color: white; /* Couleur du texte en blanc */
}

/* Home page | Baseline */
#baseline-homepage {
    margin: 10px; /* Espace vertical entre Avatar & Nom assistant */
    color: white; /* Couleur du texte en blanc */
    font-size: 16px; /* Taille de la police ajustée, vous pouvez la réduire encore plus si nécessaire */
}

/* Home page | Baseline sous-titres */
#baseline-homepage-sub {
    font-size: 12px; /* Diminue la taille de la typographie */
    margin: 10px; /* Espace vertical entre Avatar & Nom assistant */
    color: white; /* Couleur du texte en blanc */
}


/* Home page | GDPR Popin  */
.gdpr-consent-banner-homepage {
    display: none;
    position: fixed; /* Changed from fixed to absolute to position relative to main */
    bottom: 20px; /* Adjusted spacing from the bottom */
    left: 50%; /* Center the banner relative to its parent */
    transform: translateX(-50%); /* Adjust centering considering the sidebar */
    background-color: #f2f2f2; /* Light grey background */
    color: black;
    padding: 10px 20px; /* Reduced vertical padding */
    border-radius: 10px;
    box-shadow: 0 -2px 4px rgba(0,0,0,0.2);
    box-sizing: border-box;
    z-index: 1000;
    text-align: center; /* Center text and buttons */
    width: calc(100% - 40px); /* Adjust width considering padding */
    max-width: 650px; /* Optional max width for better text display on larger screens */
    margin-left: auto;
    margin-right: auto;
}

/* Adaptation du style des paragraphes dans la bannière GDPR pour supprimer l'espace entre les lignes */
.gdpr-consent-banner-homepage p {
    margin: 0; /* Supprime les marges par défaut des paragraphes */
    padding: 0; /* Assure qu'il n'y a pas de padding ajouté */
    line-height: 1.2; /* Ajuste l'espacement entre les lignes de texte, si nécessaire */
}


/* ***************** SIDEBAR **************** */
/* Styles de la sidebar pour les utilisateurs non connectés */
/* 1) Largeur de référence, synchronisée partout */
:root {
  --sidebar-w: clamp(180px, 18vw, 260px);
}

/* 2) Sidebar : utilise la variable (min/max devenus inutiles) */
.sidebar {
  background-color: #f9f9f9;
  color: #333333;
  width: var(--sidebar-w);
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  padding-left: 1.0vw;
  padding-right: 0.2vw;
  box-shadow: 2px 0px 10px rgba(0, 0, 0, 0.1);
  z-index: 802;
  box-sizing: border-box;
}

/* Titre fixé en haut à gauche */
.sidebar-title {
    font-size: 1.25rem;       /* Taille de police en rem */
    font-weight: bold;
    position: absolute;
    top: 1.5vw;               /* Décalage proportionnel */
    left: 1.5vw;              /* Décalage proportionnel */
    width: auto;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.sidebar-title a {
    text-decoration: none;
    color: #000;
    display: block;
    padding: 0.25em 0;        /* Padding en em pour suivre le zoom */
}

.sidebar-title a:hover {
    text-decoration: none;
}

/* Conteneur principal pour le contenu de la sidebar */
.sidebar-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    /* Padding-top adapté à la nouvelle hauteur du titre */
    padding-top: calc(1.5vw + 3.0rem);
    box-sizing: border-box;
    flex-grow: 1;
}

/* Introduction avec logo et description */
.sidebar-intro {
    display: flex;
    align-items: center;
    gap: 1vw;                 /* Espacement relatif */
    margin-bottom: 1.5vw;
    width: 100%;
}

.sidebar-logo {
    width: 2vw;
    height: 2vw;
    min-width: 24px;
    min-height: 24px;
}

.sidebar-description {
    font-size: 0.7rem;
    color: #666666;
}

/* Bouton Créer */
.sidebar-create-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1vw;
    width: 60%;
    padding: 0.75vw 1vw;
    background-color: #f7f7f7;
    color: #333333;
    font-size: 1rem;
    font-weight: bold;
    border: none;
    border-radius: 2vw;       /* Rayons relatifs */
    cursor: pointer;
    margin-bottom: 2vw;
    margin-left: 0;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}

.sidebar-create-btn img.create-icon {
    width: 1.5vw;
    height: auto;
    min-width: 20px;
    vertical-align: middle;
    filter: brightness(0) saturate(100%) invert(26%) sepia(98%) saturate(2311%) hue-rotate(203deg) brightness(99%) contrast(101%);
}

/* Effet de survol */
.sidebar-create-btn:hover {
    background-color: #e0e0e0;
    color: #333333;
    text-decoration: none;
}

/* Historique de l'utilisateur connecté */
.sidebar-history {
    width: 100%;
    height: 70vh;             /* Hauteur relative à la fenêtre */
    padding: 1vw;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
    color: #FFFFFF;
    overflow-y: auto;         /* Active le défilement vertical */
}

/* Styles pour la barre de défilement */
.sidebar-history::-webkit-scrollbar {
    width: 0.4vw;
    /*min-width: 6px;*/
}

.sidebar-history::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-history::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 1vw;
    border: 2px solid transparent;
}

.sidebar-history::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.4);
}

.history-date {
    margin-bottom: 1.0vw;
}

.history-date p {
    font-family: 'Montserrat', sans-serif;
    cursor: pointer;
    font-style: italic;
    text-align: left;
    font-weight: bold;
    font-size: 0.7rem;
    margin: 0vw 0;
    color: dimgrey;
}

.history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5vw;
    padding-left: 0.5vw;
    font-size: 0.7rem;
}

.history-item .history-question {
    max-width: 100%;
    white-space: normal;
    overflow: hidden;
    color: dimgrey;
    text-decoration: none;
}

.history-item .history-question:hover {
    text-decoration: underline;
}

.history-item .delete-history {
    cursor: pointer;
    color: #007bff;
    background-color: white;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5vw;
    height: 1.5vw;
    min-width: 16px;
    min-height: 16px;
    font-size: 1rem;
}




/* Section d'information en bas */
.sidebar-info {
    text-align: center;
    width: 100%;
    border-top: 1px solid #e0e0e0;
    padding-top: 20px;
    margin-top: auto;
}

/* Informations utilisateur en bas */
.sidebar-user-info {
    font-family: 'Montserrat', sans-serif;
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 0.5vw;
    /*left: 1.5vw;*/
    width: calc(100% - 3vw);
    /*padding: 1vw;*/
}

.sidebar-user-avatar {
    width: 2vw;
    height: 2vw;
    min-width: 20px;
    min-height: 20px;
    border-radius: 50%;
    margin-right: 1vw;
}

.sidebar-user-name {
    display: block;
    color: dimgrey;
    font-weight: normal;
    /* Taille adaptative : minimum 0.7rem, idéale 1.2vw, maximum 0.9rem */
    font-size: clamp(0.7rem, 1.2vw, 0.9rem);
}

/* Boutons d'information pour les utilisateurs non connectés */
.sidebar-info h2 {
    font-size: 1.25rem;
    font-weight: bold;
    color: #333333;
    margin-bottom: 1vw;
}

.sidebar-info p {
    font-size: 0.9rem;
    color: #666666;
    margin-bottom: 2vw;
    text-align: justify;
    margin-right: 6px;
}

.sidebar-learn-more-btn,
.sidebar-register-btn {
    display: inline-block;
    width: 60%;
    padding: 0.75vw 1vw;
    border-radius: 1vw;
    text-align: center;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.sidebar-learn-more-btn {
    background-color: #f0f0f0;
    color: #333333;
    font-size: 0.9rem;
    margin-bottom: 1vw;
}

.sidebar-learn-more-btn:hover {
    background-color: #d8d8d8;
}

/* Bouton "Créer mon compte" */
.sidebar-register-btn {
    background-color: #007bff;
    color: #ffffff;
    font-size: 0.9rem;
    margin-top: 0.5vw;
    margin-bottom: 2vw;
}

.sidebar-register-btn:hover {
    background-color: #0056b3;
}

/* Desktop (zoom 100%) : versions plus compactes */
@media (min-width: 1025px) {
  .sidebar-info h2 {
    font-size: 0.95rem;   /* ↓ titre plus petit */
    margin-bottom: 0.6rem;
  }

  .sidebar-info p {
    font-size: 0.78rem;   /* ↓ texte plus petit */
    margin-bottom: 0.9rem;
  }

  .sidebar-learn-more-btn,
  .sidebar-register-btn {
    padding: 6px 10px;    /* ↓ padding */
    border-radius: 6px;   /* ↓ arrondi */
    width: 60%;           /* inchangé */
  }

  .sidebar-learn-more-btn {
    font-size: 0.75rem;   /* ↓ taille */
    margin-bottom: 0.6rem;
  }

  .sidebar-register-btn {
    font-size: 0.75rem;   /* ↓ taille */
    margin-top: 0.4rem;
    margin-bottom: 0.9rem;
  }
}


/* Masque la sidebar sur les écrans de tablette et mobile */
@media (max-width: 768px) {
    .sidebar {
        display: none; /* Cache la sidebar sur les petits écrans */
    }
}



/* ***************** HEADER ***************** */
/* Home page | Zone Header */
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: clamp(0.2rem, 0.5vw, 0.4rem);
    position: relative;
}

/* Conteneur logo et texte */
.logo-text-container {
    display: flex;
    align-items: center;
}

/* Home page | Bandeau Header */
header {
    position: fixed;
    top: clamp(0.0rem, 0.0vh, 0.0rem);
    width: 100%;
    height: clamp(2rem, 5vh, 3rem);
    z-index: 100;
    background-color: transparent;
    transition: background-color 0.3s;
}

/* Classe ajoutée pour header blanc */
header.scrolled {
    background-color: #ffffff; /* Fond blanc lorsque scrollé */
}

/* Logo initialement caché */
.logo-container {
    opacity: 0; /* Caché par défaut */
    transition: opacity 0.3s; /* Transition douce pour l'apparition/disparition */
    margin: 0 auto;
    position: absolute; /* Position absolue pour centrer le logo */
    top: 10px; /* Ajoute une marge supérieure de 5px pour décaler le logo vers le bas */
}

/* Logo visible lors du scroll avec décalage de 250px */
header.scrolled .logo-container {
    opacity: 1; /* Visible lorsque scrollé */
    left: calc(125px + 50%); /* Décale le logo de 250px vers la droite, puis le centre dans la zone restante */
    transform: translateX(-50%); /* Centre le logo dans la partie restante */
}

/* Pour mobile, annuler le décalage */
@media (max-width: 768px) {
    header.scrolled .logo-container {
        left: 50%; /* Revenir à la position centrée par défaut */
        transform: translateX(-50%); /* Ajustement pour centrer le logo sur mobile */
    }
}

.header-logo {
    height: clamp(1rem, 5.5vh, 2.5rem);
}

/* Texte du header à côté du logo */
.header-text {
    margin-left: 10px; /* Espace entre le logo et le texte */
    font-size: 20px; /* Taille de la typographie */
    color: #000; /* Couleur du texte en blanc */
    font-weight: bold; /* Gras */
    opacity: 0; /* Caché par défaut */
    transition: opacity 0.3s; /* Transition douce pour l'apparition/disparition */
}

.header-text a {
    color: #000; /* Couleur du texte du lien en blanc */
    text-decoration: none; /* Supprimer le soulignement */
}

/* Afficher le texte lorsque le header est scrollé */
header.scrolled .header-text {
    opacity: 1; /* Afficher le texte lorsque scrollé */
}

.auth-buttons {
    margin-left: auto;
    display: flex;
    align-items: center;
    margin-top: clamp(0.2rem, 0.5vh, 0.4rem);
}

/* Header | Bouton "Login" */
.log-in-btn {
    padding: clamp(0.2rem, 0.5vw, 0.4rem) clamp(0.6rem, 1.5vw, 0.8rem);
    background-color: #007bff;
    color: white;
    text-decoration: none;
    border-radius: clamp(0.1rem, 0.4vw, 0.4rem);
    font-weight: normal;
    margin-right: clamp(0.3rem, 1vw, 0.6rem);
    font-size: clamp(0.6rem, 0.8vw, 0.8rem);
    white-space: nowrap;
}

/* Header | Bouton "Creer un compte" */
.create-account-btn {
    padding: clamp(0.2rem, 0.5vw, 0.4rem) clamp(0.6rem, 1.5vw, 0.8rem);
    background-color: #d3d3d3;
    color: black;
    text-decoration: none;
    border-radius: clamp(0.1rem, 0.4vw, 0.4rem);
    font-weight: normal;
    font-size: clamp(0.6rem, 0.8vw, 0.8rem);
    margin-right: clamp(0.3rem, 0.8vw, 0.5rem);
    white-space: nowrap;
}

.log-in-btn:hover,
.create-account-btn:hover {
    background-color: #0056b3;
    color: white;
}

/* Header | Bouton "Hamburger" */
.hamburger {
    display: none; /* Important : il sera affiché via la media query sur les petits écrans */
    cursor: pointer;
    color: #ffffff; /* Changement pour une couleur nettement visible */
    font-size: 30px; /* Augmentation de la taille pour le rendre plus visible */
    padding: 5px;
    background-color: transparent; /* Couleur de fond pour contraste #ffffff */
    z-index: 100; /* S'assure qu'il est au-dessus des autres éléments */
    transition: color 0.3s; /* Ajoute une transition douce pour la couleur */
}

header.scrolled .hamburger {
    color: #000000; /* Changement de couleur lorsque scrollé */
}

/* Header | Bouton "Hamburger" Liste déroulante */
.hamburger-menu-container {
    display: none; /* Initiallement caché, sera affiché par JS */
    position: absolute; /* Position absolue pour le placement spécifique */
    top: 60px; /* Positionné juste en dessous du header */
    right: 0;
    background-color: #f0f0f0; /* Couleur de fond légère pour le menu */
    border: 1px solid #ddd; /* Bordure légère pour le délimiter */
    z-index: 999; /* S'assure qu'il apparaît sous le bouton hamburger mais au-dessus d'autres éléments */
}

.hamburger-menu-item {
    display: block;
    padding: 12px 20px; /* Plus de padding pour un toucher facile */
    color: #333; /* Couleur du texte pour contraste avec le fond */
    text-decoration: none;
}

.hamburger-menu-item:hover {
    background-color: #0056b3; /* Bleu au survol */
    color: white; /* Texte blanc pour contraste */
}

@media (max-width: 768px) {
    .header-container {
        justify-content: center; /* Centre tous les éléments du header horizontalement */
    }

    .logo-container {
        order: 1; /* Assure que le logo est toujours le premier élément */
    }

    .hamburger {
        display: block; /* Assure l'affichage du bouton hamburger sur petits écrans */
        order: 2; /* Assure que le bouton hamburger est le dernier élément */
        margin-left: auto; /* Pousse le bouton hamburger tout à droite */
    }
    
    .log-in-btn, .create-account-btn, .user-btn, .pricing-btn, .schedule-btn, .analytics-btn, .subscribe-btn, .campaigns-btn,  .library-btn, .history-btn {
        display: none; /* Cache les boutons "Login" et "Create my account" sur petits écrans */
    }

    .header-text {
        order: 1; /* Cache le texte à côté du logo sur les petits écrans */
    }
}

.header-right-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: clamp(0.3rem, 1vw, 0rem);
}

/* === Boutons header regroupés (hauteur uniforme desktop 100%) === */
.pricing-btn,
.user-btn,
.schedule-btn,
.analytics-btn,
.subscribe-btn,
.campaigns-btn,
.library-btn,
.history-btn {
  /* Variables (base responsive) */
  --btn-pad-y: 10px;
  --btn-pad-x: 16px;
  --btn-font-size: clamp(0.6rem, 0.8vw, 0.8rem);

  /* Base commune + alignement identique pour tous (avec ou sans icône) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.2rem, 0.5vw, 0.6rem);

  padding: var(--btn-pad-y) var(--btn-pad-x);
  font-size: var(--btn-font-size);
  line-height: 1; /* important pour uniformiser la hauteur */
  border-radius: clamp(0.1rem, 0.4vw, 0.4rem);
  background-color: #007bff;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  border: none; /* neutre pour <a>, utile si <button> */
}

/* Spécificités (marges/cursor) */
.user-btn { margin-left: clamp(0.3rem, 1vw, 0.6rem); cursor: pointer; }
.schedule-btn, .analytics-btn, .subscribe-btn, .campaigns-btn, .library-btn, .history-btn { margin-left: clamp(0.3rem, 1vw, 0.6rem); cursor: pointer; }

/* Hover unifié */
.pricing-btn:hover,
.user-btn:hover,
.schedule-btn:hover,
.analytics-btn:hover,
.subscribe-btn:hover,
.campaigns-btn:hover,
.library-btn:hover,
.history-btn:hover{
  background-color: #0056b3;
}

/* Pseudo-icônes : base (mobile/tablette ok) */
.schedule-btn::before,
.analytics-btn::before,
.subscribe-btn::before,
.library-btn::before,
.campaigns-btn::before {
  content: '';
  display: inline-block;
  width: clamp(0.6rem, 1.5vw, 1rem);
  height: clamp(0.6rem, 1.5vw, 1rem);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin-right: clamp(0.2rem, 0.2vw, 0.6rem);
}

/* Sources des icônes */
.schedule-btn::before { background-image: url('https://paisible.ai/images/icons/paisible_icon_abonnement.png'); }
.analytics-btn::before { background-image: url('https://paisible.ai/images/icons/paisible_icon_analytics.png'); }
.subscribe-btn::before { background-image: url('https://paisible.ai/images/icons/paisible_icon_programmation.png'); }
.campaigns-btn::before { background-image: url('https://paisible.ai/images/icons/paisible_icon_campaigns.png'); }
.library-btn::before { background-image: url('https://paisible.ai/images/icons/paisible_icon_library.png'); }

/* Images d'icône intégrées (si utilisées) */
.schedule-btn img,
.analytics-btn img,
.subscribe-btn img,
.library-btn img,
.campaigns-btn img {
  width: clamp(0.6rem, 1.5vw, 1rem);
  height: clamp(0.6rem, 1.5vw, 1rem);
}

/* === Desktop (zoom 100%) : réduction + hauteur garantie identique === */
@media (min-width: 1025px) {
  .pricing-btn,
  .user-btn,
  .schedule-btn,
  .analytics-btn,
  .subscribe-btn,
  .campaigns-btn,
  .library-btn,
  .history-btn {
    --btn-pad-y: 0px;
    --btn-pad-x: 8px;
    --btn-font-size: 0.60rem;
    border-radius: 6px;

    /* clé pour uniformiser la hauteur, avec ou sans icône */
    min-height: 30px;
  }

  /* Icônes (pseudo et <img>) réduites et alignées */
  .schedule-btn::before,
  .analytics-btn::before,
  .subscribe-btn::before,
  .campaigns-bnt::before,
  .library-btn::before,
  .schedule-btn img,
  .analytics-btn img,
  .subscribe-btn img,
  .library-btn img,
  .campaigns-btn img {
    width: 14px;
    height: 14px;
    margin-right: 6px;
  }
}

/* Cacher sur mobile */
@media (max-width: 768px) {
  .pricing-btn,
  .user-btn,
  .schedule-btn,
  .analytics-btn,
  .subscribe-btn,
  .campaigns-btn,
  .library-btn,
  .history-btn {
    display: none;
  }
}

/* Header | Liste déroulante "Loggué" */
.user-dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 200px;                /* un peu plus large pour éviter les retours à la ligne */
    max-width: min(90vw, 360px);     /* bornes sur petits écrans/zoom */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 8px 12px;
    box-sizing: border-box;
    z-index: 10000;                  /* au-dessus du reste */
    right: 0;                        /* colle au bord droit du conteneur */
    top: calc(100%);           /* léger espace sous le bouton */

    /* >>> clés pour que tout le contenu reste visible à 100% desktop <<< */
    max-height: 90vh;                /* limite à la hauteur de la fenêtre */
    overflow-y: auto;                /* fait défiler l’intérieur si trop long */
    overscroll-behavior: contain;    /* évite le “scroll” de la page quand on atteint la fin */
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
}

/* Liens internes : lisibles même sur plusieurs lignes */
.user-dropdown-content a {
    color: black;
    padding: 10px 12px;
    text-decoration: none;
    display: block;
    line-height: 1.2;
    white-space: normal;             /* autorise le retour à la ligne */
    word-break: break-word;          /* casse les très longues chaînes si besoin */
}

.user-btn { cursor: pointer; }

/* Optionnel : ajustement fin spécifique desktop 100% */
/* Desktop 100% : contenu plus compact */
@media (min-width: 1025px){
  .user-dropdown-content {
    max-height: 95vh;
    font-size: 0.8125rem;   /* ≈ 13px */
       right: 68px;            /* ← décale le dropdown de 40px vers la gauche */
  }
  .user-dropdown-content a {
    font-size: 0.7rem;   /* ≈ 13px */
    padding: 8px 10px;      /* lignes plus denses */
    line-height: 1;
  }
}

.button-container {
    margin: 10px 0; /* Ajoute un espace entre les boutons */
}

.button-home, .button-set-new-assistant {
    display: block; /* Permet aux liens de s'afficher sur toute la largeur, les uns sous les autres */
    text-align: center; /* Centre le texte dans le bouton */
    margin: 5px 0; /* Ajoute de l'espace autour de chaque bouton pour qu'ils ne soient pas collés */
}


/* *********** PAGE PRICING (TABLE DETAILLEE + REASSURANCE + FAQ) ************ */

/* Scope : évite de casser le reste du site */
body.pricing-page {
  font-family: 'Montserrat', sans-serif;
  background-color: #fff;
  margin: 0;
  padding: 0;
}

/* ========== Section globale ========== */
.pricing-page .one-third-screen-price {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 90px 0 60px; /* évite chevauchement header fixed */
  margin-top: 0;
  height: auto;
  min-height: 50vh;
}

.pricing-page .one-third-screen-price .container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  padding: 0 18px;
}

.pricing-page .one-third-screen-price h1 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  margin: 0 0 10px;
  color: #111;
  letter-spacing: -0.02em;
}

.pricing-page .one-third-screen-price p {
  font-size: 1.02rem;
  color: #555;
  margin: 0 auto 14px;
  line-height: 1.55;
  max-width: 920px;
}

/* ========== Réassurance (chips) ========== */
.pricing-page .pricing-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  justify-content: center;
  margin: 12px 0 18px;
}

.pricing-page .trust-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid #e6e9ef;
  border-radius: 999px;
  background: #fff;
  color: #1b2a3a;
  font-size: 0.92rem;
}

.pricing-page .trust-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #19b46b;
  display: inline-block;
}

/* ========== Tableau détaillé (style amélioré) ========== */
.pricing-page .plans-table-3-desktop {
  display: block; /* unique affichage (desktop+mobile via scroll) */
}

.pricing-page .table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 14px;
}

/* Table */
.pricing-page .plans-table-3 {
  width: 100%;
  border-collapse: collapse;
  margin: 12px auto 18px;
  background-color: #fff;
  font-size: 1rem;
  border: 1px solid #e6e9ef;
  border-radius: 14px;
  overflow: hidden;
}

/* En-têtes */
.pricing-page .plans-table-3 thead th {
  background-color: #f9fafc;
  font-size: 1.1rem;
  color: #0073e6;
  font-weight: 800;
  border: 1px solid #e6e9ef;
  padding: 14px;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}

/* Lignes */
.pricing-page .plans-table-3 tbody th {
  background-color: #f9fafc;
  color: #0b1b2b;
  text-align: left;
  font-weight: 700;
  padding: 14px;
  border: 1px solid #e6e9ef;
  width: 38%;
  vertical-align: middle;
  min-width: 260px; /* permet lisibilité sur mobile */
}

.pricing-page .plans-table-3 tbody td {
  border: 1px solid #e6e9ef;
  padding: 14px;
  text-align: center;
  vertical-align: middle;
  min-width: 170px; /* évite écrasement sur mobile */
}

/* Mise en avant de la colonne Pro */
.pricing-page .highlighted {
  background-color: #f4f9ff;
  border-left: 2px solid #0073e6;
  border-right: 2px solid #0073e6;
}

/* Prix */
.pricing-page .price {
  font-size: 1.25rem;
  font-weight: 900;
  color: #111;
}

.pricing-page .investment {
  font-size: 0.95rem;
  color: #7b8698;
  text-decoration: line-through;
}

.pricing-page .annual-price {
  font-size: 1.05rem;
  color: #0b1b2b;
  font-weight: 800;
}

.pricing-page .discount {
  font-size: 0.95rem;
  color: #19b46b;
  font-weight: 800;
}

/* Description row */
.pricing-page .description-row td {
  font-style: italic;
  color: #566274;
  text-align: left;
  line-height: 1.45;
}

/* ✓ */
.pricing-page .tick {
  font-size: 1.15rem;
  font-weight: 900;
  color: #19b46b;
}

/* Boutons CTA */
.pricing-page .btn-cta-pricing {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 220px;
  min-height: 46px;
  padding: 0 14px;
  background-color: #0073e6;
  color: #fff;
  text-decoration: none;
  border-radius: 10px;
  font-size: 0.92rem;
  font-weight: 800;
  transition: background-color 0.2s ease, transform .05s ease;
  white-space: nowrap;
  margin: 6px 0;
}

.pricing-page .btn-cta-pricing:hover { background-color: #005bb5; }
.pricing-page .btn-cta-pricing:active { transform: translateY(1px); }

.pricing-page .btn-cta-pricing.btn-outline {
  background: #fff;
  color: #0073e6;
  border: 1px solid #0073e6;
}

.pricing-page .btn-cta-pricing.btn-outline:hover {
  background: #f2f7ff;
}

/* Lignes “feature-extra” */
.pricing-page .feature-extra th,
.pricing-page .feature-extra td {
  background: #f7fbfc;
  border: 1px solid #cfe1ee;
  font-weight: 600;
}

/* Icônes + libellé feature */
.pricing-page .feature-label {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pricing-page .function-icon {
  width: 34px;
  height: 34px;
  object-fit: contain;
  flex: 0 0 34px;
}

/* Ligne CTA */
.pricing-page .cta-row th {
  text-align: left;
  background-color: #f9fafc;
}

/* ========== FAQ ========== */
.pricing-page .pricing-faq {
  margin: 26px auto 0;
  text-align: left;
  max-width: 1200px;
}

.pricing-page .pricing-faq h2 {
  text-align: center;
  margin: 0 0 14px;
  font-size: 1.45rem;
  color: #0b1b2b;
  font-weight: 900;
}

.pricing-page .faq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.pricing-page .faq-item {
  border: 1px solid #e6e9ef;
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}

.pricing-page .faq-item summary {
  cursor: pointer;
  padding: 12px 14px;
  font-weight: 800;
  color: #0b1b2b;
  background: #f9fafc;
  list-style: none;
}

.pricing-page .faq-answer {
  padding: 12px 14px 14px;
  color: #3d4a5c;
  line-height: 1.55;
  font-size: 0.98rem;
}

/* ========== Responsivité ========== */
@media (max-width: 980px) {
  .pricing-page .faq-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .pricing-page .one-third-screen-price {
    padding: 80px 0 46px;
  }

  .pricing-page .one-third-screen-price p {
    font-size: 0.98rem;
  }

  .pricing-page .btn-cta-pricing {
    width: 100%;
    max-width: 320px;
  }

  .pricing-page .function-icon {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
  }
}






/* *********** SCHEDULE CONTENT ************ */
/* Main Container (Mobile First) */
.schedule-main-container {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    padding: 1rem;
    background-color: white;
    margin: 2rem auto;
    width: 100%;
    align-items: center;
    
}

/* Déplacement vers la droite sur desktop et centrage du contenu */
@media screen and (min-width: 1024px) {
    .schedule-main-container {
        margin-left: 282px;
        width: calc(100% - 282px);
        justify-content: center;
    }

    .schedule-content-form {
        max-width: 800px;
        width: 800px;
        margin: 0 auto;
    }
    
    .generate-response-form {
        max-width: 800px;
        width: 800px;
        margin: 0 auto;
    }
}

.schedule-section-title {
    text-align: center;
    font-size: 25px;
    margin-bottom: 1rem;
    margin-top: 45px;
    color: #333;
    width: 100%;
}

/* Bouton Créer un assistant si aucun assistant */
.btn-schedule-create-assistant {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background-color: #007BFF;
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-size: 1.0rem;
    text-align: center;
    margin-top: 1rem;
    transition: background-color 0.3s ease;
}

.btn-schedule-create-assistant:hover {
    background-color: #0056b3;
}

/* Formulaire */
.generate-response-form {
    background-color: white;
    padding: 0.5rem;
    border-radius: 10px;
    /*box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);*/
    display: flex;
    flex-direction: column;
    gap: 0rem; /* Réduit l'espace entre les éléments internes */
    margin-bottom: 0rem; /* Réduit l'espace sous cet élément */
    width: 100%;
    max-width: 800px;
    align-items: center;
}

/* Formulaire */
.schedule-content-form {
    background-color: white;
    padding: 0.5rem;
    border-radius: 10px;
    /*box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);*/
    display: flex;
    flex-direction: column;
    gap: 0rem; /* Réduit l'espace entre les éléments internes */
    margin-bottom: 1rem; /* Réduit l'espace sous cet élément */
    width: 100%;
    max-width: 800px;
    align-items: center;
}

.schedule-form-group {
    display: flex;
    flex-direction: column;
    width: 750px;
}

.schedule-form-group label {
    margin-bottom: 0.5rem;
    font-weight: bold;
    font-size: 1rem;
}

.input-button-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 10px;
}

.input-button-wrapper input[type="text"] {
    flex-grow: 1;
    padding: 0.75rem;
    font-size: 1.1rem;
    border-radius: 8px;
    border: 1px solid #ccc;
    transition: border 0.3s ease;
}

.input-button-wrapper input[type="text"]:focus {
    border-color: #007BFF;
}

.schedule-btn-generate {
    padding: 0.75rem 1.5rem;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.2rem;
    transition: background-color 0.3s ease;
    white-space: nowrap;
}

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

.schedule-btn-submit {
    padding: 0.75rem 1.5rem;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.2rem;
    transition: background-color 0.3s ease;
    margin-left: auto; /* Positionne le bouton à droite */
}

.schedule-btn-submit:hover {
    background-color: #0056b3;
}

/* Style pour la zone de texte de la réponse générée */
.schedule-generated-response {
    width: 100%;
    max-width: 750px;
    padding: 0.75rem;
    font-size: 1.1rem;
    border-radius: 8px;
    border: 1px solid #ccc;
    transition: border-color 0.3s ease;
    background-color: #f9f9f9; /* Légère couleur de fond pour se démarquer */
    resize: vertical; /* Permet à l'utilisateur de redimensionner verticalement */
    min-height: 150px; /* Hauteur minimum pour rendre la zone plus ergonomique */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Légère ombre pour créer de la profondeur */
    font-family: 'Montserrat', sans-serif; /* Utilisation de la police Montserrat */
}

/* Lorsque l'utilisateur interagit avec la zone de texte */
.schedule-generated-response:focus {
    border-color: #007BFF; /* Couleur bleue lorsqu'on clique dedans */
    outline: none; /* Supprime le contour par défaut */
    background-color: white; /* Fond blanc au focus */
}


/* Page Schedule - Avatars */
.schedule-assistant-avatars {
    display: flex;
    flex-wrap: wrap; /* Permet aux avatars de passer à la ligne suivante */
    gap: 15px;
    justify-content: left; /* Centre les avatars horizontalement */
    max-width: 100%; /* Limite la largeur au conteneur parent */
}

.schedule-assistant-avatar-label {
    display: flex;
    flex-direction: column; /* Place l'avatar au-dessus du nom */
    align-items: center; /* Centre l'avatar et le nom horizontalement */
    cursor: pointer;
    flex: 0 1 100px; /* Définit une largeur de base et permet la flexibilité */
    text-align: center; /* Centre le texte pour le nom */
}

.schedule-assistant-avatar,
.schedule-new-assistant-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid transparent;
    transition: border-color 0.3s ease, opacity 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 36px; /* Taille du signe + pour le bouton "Créer un assistant" */
    color: #555;
    background-color: #e0e0e0; /* Couleur de fond pour le bouton "Créer un assistant" */
    cursor: pointer;
}

.schedule-assistant-avatar:hover,
.schedule-new-assistant-avatar:hover {
    border-color: #007BFF; /* Change la couleur de la bordure au survol */
    opacity: 0.9; /* Légère opacité pour l’effet visuel */
}

.schedule-assistant-avatar-label span {
    display: block;
    margin-top: 0.5rem; /* Ajoute un espace entre l'avatar et le nom */
    opacity: 1;
    transition: opacity 0.3s;
    font-size: 0.9rem; /* Taille de police du nom de l'assistant */
}


.schedule-assistant-avatar-label input[type="radio"] {
    display: none;
}

.schedule-assistant-avatar-label input[type="radio"]:checked + .schedule-assistant-avatar {
    border-color: #007BFF;
    border-width: 2px;
}

.schedule-assistant-avatar-label input[type="radio"]:checked + .schedule-assistant-avatar + span {
    opacity: 1;
}

.schedule-new-assistant-avatar {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #e0e0e0;
    color: #555;
    font-size: 48px;
    font-weight: bold;
    text-align: center;
    line-height: 1;
}

.schedule-new-assistant-link {
    text-decoration: none; /* Retire le soulignement du lien par défaut */
}

.schedule-new-assistant-link:hover {
    text-decoration: none; /* Assure qu'il n'y a pas de soulignement au survol */
}

/* Format date et heure */
#scheduled_date {
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    padding: 0.5rem;
    border-radius: 5px;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

/* Page Schedule - Icônes des différentes plateformes */
.schedule-platform-icons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 10px;
}

.schedule-platform-icon {
    max-width: 40px;
    height: auto;
    cursor: pointer;
    object-fit: contain;
    margin: 0 auto;
    flex: 1;
}

.schedule-platform-icon:hover {
    opacity: 0.8;
}

    .platform-icon-wrapper {
        position: relative;
        display: inline-block;
    }

    .facebook-pages-list {
        position: absolute;
        top: 100%; /* Positionner la liste juste en dessous de l'icône */
        left: 0;
        background-color: #fff;
        border: 1px solid #ccc;
        padding: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        z-index: 10; /* S'assurer que la liste s'affiche par-dessus d'autres éléments */
        width: max-content; /* Ajuster la largeur selon le contenu */
    }

    .facebook-page-label {
        display: block;
        margin-bottom: 5px;
    }

    .schedule-platform-icon {
        cursor: pointer;
    }

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

.login-content {
    background-color: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    text-align: center;
    max-width: 400px;
    width: 100%;
    position: relative; /* Pour que le bouton de fermeture soit positionné correctement */
}

.popin-schedule {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Fond assombri */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

/* Ajustement du décalage sur desktop */
@media screen and (min-width: 1024px) {
    .popin-schedule {
        padding-left: 282px; /* Décalage pour laisser de l'espace pour la sidebar */
        box-sizing: border-box; /* Inclure le padding dans la largeur totale */
    }
}

/* Style de base de la popin */
.schedule-content {
    background-color: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    text-align: center;
    max-width: 400px;
    width: 100%;
    margin: 0 auto;
    position: relative;
}

.success-btn-close {
    padding: 0.75rem 1.5rem;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    margin-top: 1rem;
}

.success-btn-close:hover {
    background-color: #0056b3;
}

.close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 1.5rem;
    cursor: pointer;
}

.image-options {
    display: flex;
    gap: 1rem; /* Espace entre les boutons */
}

.image-button {
    padding: 0.75rem 1.5rem;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s ease;
    text-align: center;
    display: inline-block;
    white-space: nowrap;
}

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

/* Style pour que le label apparaisse comme un bouton */
#uploadImageLabel {
    display: inline-block;
    cursor: pointer;
    text-align: center;
}

/* Styles généraux pour la modale */
.schedule-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    padding-top: 60px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    overflow: auto;
}

.schedule-modal-content {
    background-color: #ffffff;
    margin: auto;
    padding: 20px;
    border-radius: 10px;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    text-align: left;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    /* font-family: Arial, sans-serif; */
    position: relative;
}

.schedule-close {
    color: #888;
    float: right;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
}

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

.schedule-modal-content h3 {
    color: #333;
    font-size: 20px;
    margin-top: 0;
    text-align: center;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

/* Styles pour les champs du formulaire */
.form-group {
    margin-bottom: 15px;
}

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

.form-group input, .form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    resize: vertical;
    box-sizing: border-box;
}

.form-group input[type="file"] {
    padding: 3px;
}

.image-preview-container {
    margin-top: 10px;
    text-align: center;
}


/* Styles pour les boutons */
.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

.btn-primary {
    background-color: #007bff;
    color: white;
    padding: 10px 15px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.btn-primary:hover {
    background-color: #0056b3;
}

.btn-danger {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    background-color: #ccc;
    color: #333;
    cursor: pointer;
    margin-left: 5px;
}

.btn-danger:hover {
    background-color: #c82333;
    color: #fff; /* Assure que la typo reste blanche au survol */
}

.btn-secondary {
    background-color: #ccc;
    color: black;
    padding: 10px 15px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.btn-secondary:hover {
    background-color: #aaa;
}

/* Styles pour le message de statut */
.status-message {
    font-size: 14px;
    color: #555;
    margin-top: 10px;
    text-align: center;
}


/* ***************** SUBSCRIBE CONTENT ******************* */

/* Modal overlay (fond semi-transparent) */
.modal-subscribe {
  position: fixed;
  z-index: 801;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  transition: opacity 0.3s ease;
}

.programmer-button {
    padding: 10px 20px;
    font-size: 16px;
    color: white;
    background-color: #007bff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    transition: background-color 0.3s ease;
}

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

/* -------------------- Base styles pour les modales -------------------- */
.modal-subscribe-content,
.modal-subscribe-modify-content {
  position: fixed;
  background: #fff;
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  width: 90%;
  max-width: 800px;
  max-height: 90vh;
  overflow-y: auto;
  top: 50%;
  /* Positionnement dynamique en desktop */
  left: calc(250px + 20px + ((100vw - 250px - 20px) / 2));
  transform: translateX(-50%);
  margin-top: -45vh;
}


/* Titres des sections */
.subscription-table th {
  background-color: #e7f3ff;
  color: #333;
  font-weight: bold;
  padding: 10px;
  text-align: left;
}

/* Assistant Section */
.assistant-info {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
}

.assistant-info img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
}

/* Style pour les listes déroulantes */
select {
  width: 100%;
  padding: 8px;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 5px;
}

/* Section Thématiques */
.themes-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.theme-button {
  width: 100%;
  padding: 12px;
  font-size: 1rem;
  background-color: #e7f3ff;
  border: none;
  border-radius: 5px;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s;
}

.theme-button:hover {
  background-color: #d0e9ff;
}

/* Champ personnalisé pour thématique */
.theme-input {
  width: 100%;
  padding: 12px;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 5px;
}

/* Bouton d'enregistrement */
.update-button {
  width: 100%;
  background-color: #007bff;
  color: white;
  padding: 12px;
  font-size: 1rem;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 20px;
}

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

/* -------------------- Responsive Mobile -------------------- */
@media screen and (max-width: 767px) {
  .modal-subscribe-content,
  .modal-subscribe-modify-content {
    width: 90%;
    max-width: 90%;
    padding: 1.0rem;
    left: 0;
    transform: translateX(0%);
  }

  /* Ajustement des espacements */
  .subscription-table {
    width: 100%;
    font-size: 0.9rem;
  }

  .subscription-table th {
    padding: 10px;
  }

  /* Assurer que tout est aligné */
  select, .theme-button, .theme-input, .update-button {
    width: 100%;
    display: block;
  }

  /* Réduction des marges pour aligner correctement */
  .assistant-info {
    flex-direction: row;
    justify-content: flex-start;
  }

  /* Correction du problème de position du champ "Jour" */
  #edit_tr-day {
    display: block !important;
    width: 100%;
    margin-top: 10px;
  }

  #edit_tr-day select {
    display: block;
    width: 100%;
    margin-top: 5px;
  }
}


/* -------------------- Styles pour les modales de suppression -------------------- */
/* Les modales de suppression (classées "delete" et "delete-success")
   partagent des styles communs, avec une largeur maximale réduite. */
.modal-subscribe-delete-content,
.modal-subscribe-delete-success-content {
  position: fixed;
  background: #fff;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: fadeIn 0.3s ease-out;
    
  /* Firefox : rendre la scrollbar plus fine */
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
}

/* WebKit (Chrome, Safari, Edge) : personnalisation de la scrollbar */
.modal-subscribe-content::-webkit-scrollbar,
.modal-subscribe-modify-content::-webkit-scrollbar {
  width: 4px; /* largeur de la scrollbar */
}

.modal-subscribe-content::-webkit-scrollbar-thumb,
.modal-subscribe-modify-content::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 3px;
}

.modal-subscribe-content::-webkit-scrollbar-track,
.modal-subscribe-modify-content::-webkit-scrollbar-track {
  background: transparent;
}

/* Ajustements desktop pour les modales de suppression */
@media screen and (min-width: 1024px) {
  .modal-subscribe-delete-content,
  .modal-subscribe-delete-success-content {
    left: calc(270px + (100vw - 270px) / 2);
    transform: translate(-50%, -150%);
  }
}

/* Ajustements mobile pour les modales de suppression */
@media screen and (max-width: 1023px) {
  .modal-subscribe-delete-content,
  .modal-subscribe-delete-success-content {
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

/* -------------------- Animations -------------------- */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideDown {
  from {
    transform: translateY(-20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Bouton de fermeture commun aux modales */
.close-modal {
  position: absolute;
  right: 10px;
  top: 10px;
  cursor: pointer;
  font-size: 22px;
}

/* Boutons dans les modales */
.modal-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 1rem;
}
.btn-confirm {
  padding: 0.5rem 1rem;
  background-color: #dc3545;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.btn-cancel {
  padding: 0.5rem 1rem;
  background-color: #6c757d;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.btn-confirm:hover {
  background-color: #c82333;
}
.btn-cancel:hover {
  background-color: #5a6268;
}

/* -------------------- Table Historique --------------- */
/* Subscription History & Table */
.subscription-history {
  display: flex;
  flex-direction: column;
  padding: 2rem;
  background-color: #f5f9ff;
  margin: 2rem auto;
  width: 100%;
  max-width: 800px;
  align-items: center;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  font-family: 'Montserrat', sans-serif;
}

.subscription-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  box-sizing: border-box;
  margin-bottom: 1.5rem;
}

.subscription-table th,
.subscription-table td {
  padding: 0.5rem;
  border: 1px solid #ccc;
  text-align: left;
  font-size: 0.9rem;
  word-wrap: break-word;
  vertical-align: middle;
}

.subscription-table th {
  background-color: #e7f3ff;
  color: #333;
  font-weight: bold;
  width: 30%;
}

.subscription-table tr:nth-child(even) {
  background-color: #f0f8ff;
}

.subscription-table tr:hover {
  background-color: #d0e9ff;
}

/* -------------------- Styles Mobile -------------------- */
@media screen and (max-width: 768px) {
  /* Optionnel : réduire le padding global de la section */
  .subscription-history {
    padding: 1rem;
  }
  
  /* Transformer le tableau en bloc pour faciliter la lecture */
  .subscription-table {
    display: block;
    width: 100%;
  }
  
  /* Masquer l’en-tête du tableau */
  .subscription-table thead {
    display: none;
  }
  
  /* Chaque ligne devient un bloc avec un léger padding et une bordure arrondie */
  .subscription-table tr {
    display: block;
    margin-bottom: 1rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
    padding: 10px;
  }
  
  /* Chaque cellule est transformée en une grille à deux colonnes fixes :
     - 40% pour le libellé (pseudo-élément),
     - 60% pour le contenu réel.
     Le contenu réel sera centré dans sa colonne. */
  .subscription-table td {
    display: grid;
    grid-template-columns: 40% 60%;
    align-items: center;
    padding: 8px 5px;
    border-bottom: 1px solid #eee;
    position: relative;
    /* On précise text-align: left pour le contenu initial (sera surchargé pour la seconde colonne) */
    text-align: left;
  }
  
  /* Supprimer la bordure inférieure sur la dernière cellule */
  .subscription-table td:last-child {
    border-bottom: none;
  }
  
  /* Le pseudo-élément qui affichera le libellé occupe la première colonne.
     On lui applique un style en gras et un padding à droite. */
  .subscription-table td:before {
    font-weight: bold;
    text-align: left;
    padding-right: 10px;
    width: 100%;
  }
  
  /* Attribution des labels pour chaque cellule en fonction de sa position
     dans la ligne. Chaque <td> reçoit un libellé correspondant à la colonne d'origine. */
  .subscription-table td:nth-child(1):before { content: "Date"; }
  .subscription-table td:nth-child(2):before { content: "Assistant"; }
  .subscription-table td:nth-child(3):before { content: "Fréquence"; }
  .subscription-table td:nth-child(4):before { content: "Jour"; }
  .subscription-table td:nth-child(5):before { content: "Thèmes"; }
  .subscription-table td:nth-child(6):before { content: "Contenu"; }
  .subscription-table td:nth-child(7):before { content: "Action"; }
  
  /* Forcer le contenu réel de chaque cellule (les éléments enfants directs)
     à occuper la deuxième colonne et à être centré */
  .subscription-table td > * {
    grid-column: 2;
    text-align: center;
  }
}

/* -------------------- Contenu de la Popin Historique -------------------- */
.history-container {
  background-color: #f5f9ff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 1rem;
  max-height: 450px;
  overflow-y: auto;
  width: 100%;
  max-width: 770px;
  margin: 0 auto;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  font-family: 'Montserrat', sans-serif;
  
  /* Pour Firefox */
  scrollbar-width: thin;
  scrollbar-color: #007BFF transparent;
}

/* Pour Chrome, Safari, et Edge */
.history-container::-webkit-scrollbar {
  width: 6px;
}

.history-container::-webkit-scrollbar-thumb {
  background-color: #007BFF;
  border-radius: 3px;
}

.history-container::-webkit-scrollbar-track {
  background: transparent;
}

/* Titre dans la Popin Historique */
.modal-subscribe-content .history-container h3 {
  font-size: 1.2rem;
  margin-bottom: 1rem;
  text-align: center;
}

/* Élément individuel dans l'historique */
.modal-subscribe-content .content-history-item {
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #fff;
  margin-bottom: 0.5rem;
  cursor: pointer;
  font-size: 0.9rem;
  height: 50px;              /* Hauteur fixe */
  overflow: hidden;          /* Masque le texte qui dépasse */
  white-space: nowrap;       /* Conserve le texte sur une seule ligne */
  text-overflow: ellipsis;   /* Affiche "…" en cas de dépassement */
  transition: background-color 0.2s ease;
}

.modal-subscribe-content .content-history-item:hover {
  background-color: #d0e9ff;
}
.modal-subscribe-content .history-preview {
  color: #333;
  margin-top: 0.3rem;
}

/* Textarea pour la vue détaillée de l'historique */
#historyTextarea {
  width: 100%;
  height: 350px;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9rem;
  white-space: pre-wrap;
  box-sizing: border-box;
  overflow-y: auto; /* Assurer le défilement vertical */

  /* Personnalisation de la scrollbar pour Firefox */
  scrollbar-width: thin;
  scrollbar-color: #007BFF transparent;
}

/* Personnalisation de la scrollbar pour Chrome, Safari et Edge */
#historyTextarea::-webkit-scrollbar {
  width: 6px; /* Rendre la scrollbar plus fine */
}

#historyTextarea::-webkit-scrollbar-thumb {
  background-color: #007BFF; /* Bleu */
  border-radius: 3px;
}

#historyTextarea::-webkit-scrollbar-track {
  background: transparent;
}


/* Boutons (Retour, Annuler, Enregistrer) dans la vue détaillée */
.modal-subscribe-content button {
  background-color: #cce5ff;
  border: 2px solid #66bfff;
  border-radius: 8px;
  color: #003366;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  padding: 6px 10px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.modal-subscribe-content button:hover {
  background-color: #b3daff;
}
.history-detail-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

/* En-tête et boutons de la vue détaillée */
.history-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.history-back-button {
  font-size: 16px;
  padding: 5px 10px;
  background-color: #cce5ff;
  border: 2px solid #66bfff;
  border-radius: 8px;
  color: #003366;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.history-back-button:hover {
  background-color: #b3daff;
}
.history-detail-title {
  margin: 0;
  flex-grow: 1;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.2rem;
}
.header-spacer {
  width: 70px;
}
.history-cancel-button,
.history-save-button {
  padding: 5px 10px;
  background-color: #cce5ff;
  border: 2px solid #66bfff;
  border-radius: 8px;
  color: #003366;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.history-cancel-button:hover,
.history-save-button:hover {
  background-color: #b3daff;
}

/* ***************** SUBSCRIBE MAIN CONTAINER & CONTENT BOX ******************* */
.subscribe-main-container {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  padding: 1rem;
  background-color: white;
  margin: 4rem auto;
  width: 100%;
  align-items: center;
}
.subscribe-section-title {
  text-align: center;
  font-size: 25px;
  margin: 5px 0 1rem;
  color: #333;
  width: 100%;
  max-width: 90%;
  word-wrap: break-word;
}
.subscribe-baseline {
  text-align: justify;
  margin: 20px auto;
  font-weight: normal;
  font-size: 1em;
  color: #333;
  width: 750px;
  max-width: 90%;
  line-height: 1.6;
}
@media (max-width: 480px) {
  .subscribe-section-title {
    font-size: 20px;
    margin: 30px 0 1rem;
  }
  .subscribe-baseline {
    width: 95%;
    font-size: 0.9em;
    text-align: left;
    margin: 15px auto;
  }
}
.subscribe-form-group {
  display: flex;
  flex-direction: column;
  width: 750px;
}
.subscribe-label {
  font-size: 1rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 0.25rem;
}
.subscribe-select {
  padding: 0.75rem;
  font-size: 1rem;
  color: #555;
  border: 1px solid #ccc;
  border-radius: 6px;
  background-color: #f9f9f9;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  appearance: none;
}
.subscribe-select:focus {
  border-color: #007BFF;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);
  outline: none;
}
.additional-options {
  display: none;
  gap: 0.5rem;
}
.day-select {
  margin-top: 0.5rem;
  padding: 0.75rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  background-color: #f9f9f9;
}
.subscribe-form-group label {
  margin-bottom: 0.5rem;
  font-weight: bold;
  font-size: 1rem;
}
.subscribe-btn-submit {
  padding: 0.75rem 1.5rem;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1.2rem;
  transition: background-color 0.3s ease;
  margin-left: auto;
}
.subscribe-btn-submit:hover {
  background-color: #0056b3;
}

/* ***************** SUBSCRIBE AVATARS ******************* */
.subscribe-assistant-avatars {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: left;
  max-width: 100%;
}
.subscribe-assistant-avatar-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  flex: 0 1 100px;
  text-align: center;
}
.subscribe-assistant-avatar,
.subscribe-new-assistant-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid transparent;
  transition: border-color 0.3s ease, opacity 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 36px;
  color: #555;
  background-color: #e0e0e0;
  cursor: pointer;
}
.subscribe-assistant-avatar:hover,
.subscribe-new-assistant-avatar:hover {
  border-color: #007BFF;
  opacity: 0.9;
}
.subscribe-assistant-avatar-label span {
  display: block;
  margin-top: 0.5rem;
  opacity: 1;
  transition: opacity 0.3s;
  font-size: 0.9rem;
}
.subscribe-assistant-avatar-label input[type="radio"] {
  display: none;
}
.subscribe-assistant-avatar-label input[type="radio"]:checked + .subscribe-assistant-avatar {
  border-color: #007BFF;
  border-width: 2px;
}
.subscribe-assistant-avatar-label input[type="radio"]:checked + .subscribe-assistant-avatar + span {
  opacity: 1;
}
.subscribe-new-assistant-avatar {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #e0e0e0;
  color: #555;
  font-size: 48px;
  font-weight: bold;
  text-align: center;
  line-height: 1;
}
.subscribe-new-assistant-link {
  text-decoration: none;
}
.subscribe-new-assistant-link:hover {
  text-decoration: none;
}

/* ***************** SUBSCRIBE CONTENT BOX ******************* */
.subscribe-content {
  max-width: 800px;
  width: 100%;
  padding: 2rem;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  background-color: white;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .subscribe-content {
    max-width: 95%;
    padding: 1.5rem;
  }
}
@media (max-width: 480px) {
  .subscribe-content {
    max-width: 98%;
    padding: 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  }
}

/* ***************** SUBSCRIBE IMAGE OPTIONS & MODAL ******************* */
.image-options {
  display: flex;
  gap: 1rem;
}
.image-button {
  padding: 0.75rem 1.5rem;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s ease;
  text-align: center;
  display: inline-block;
  white-space: nowrap;
}
.image-button:hover {
  background-color: #0056b3;
}
#uploadImageLabel {
  display: inline-block;
  cursor: pointer;
  text-align: center;
}
.subscribe-modal {
  display: none;
  position: fixed;
  z-index: 1000;
  padding-top: 60px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  overflow: auto;
}
.subscribe-modal-content {
  background-color: #ffffff;
  margin: auto;
  padding: 20px;
  border-radius: 10px;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  text-align: left;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  position: relative;
}
.subscribe-close {
  color: #888;
  float: right;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
}
.subscribe-close:hover {
  color: #000;
}
.subscribe-modal-content h3 {
  color: #333;
  font-size: 20px;
  margin-top: 0;
  text-align: center;
  border-bottom: 2px solid #f0f0f0;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

/* ***************** SUBSCRIBE FORM GROUPS ******************* */
.form-group {
  margin-bottom: 15px;
}
.form-group label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}
.form-group input,
.form-group textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
  resize: vertical;
  box-sizing: border-box;
}
.form-group input[type="file"] {
  padding: 3px;
}
.image-preview-container {
  margin-top: 10px;
  text-align: center;
}
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}
.btn-primary {
  background-color: #007bff;
  color: white;
  padding: 10px 15px;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
.btn-primary:hover {
  background-color: #0056b3;
}
.btn-secondary {
  background-color: #ccc;
  color: black;
  padding: 10px 15px;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
.btn-secondary:hover {
  background-color: #aaa;
}
.status-message {
  font-size: 14px;
  color: #555;
  margin-top: 10px;
  text-align: center;
}

/* ***************** SUBSCRIBE THEMES CONTAINER ******************* */
.themes-container {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 700px;
  margin-top: 1rem;
  padding: 1.5rem;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background-color: #f5f9ff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}
.themes-label {
  font-size: 1rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 0.5rem;
}
.theme-button {
  padding: 0.75rem 1rem;
  font-size: 1rem;
  color: #555;
  border: 1px solid #ccc;
  border-radius: 6px;
  background-color: #e7f3ff;
  transition: all 0.3s ease;
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.theme-button:hover {
  background-color: #d0e9ff;
  border-color: #b3d4fc;
}
.theme-button.selected,
.theme-input.selected {
  background-color: #007BFF;
  color: #fff;
  border-color: #0056b3;
  box-shadow: 0 4px 8px rgba(0, 123, 255, 0.2);
}
.custom-theme {
  padding: 0.75rem;
  font-size: 1rem;
  color: #555;
  border: 1px solid #ccc;
  border-radius: 6px;
  background-color: #ffffff;
  margin-top: 1rem;
  transition: all 0.3s ease;
}

/* ***************** SUBSCRIBE MEDIA QUERIES ******************* */
/* Mobile & Tablettes */
@media screen and (max-width: 768px) {
  .subscription-history {
    margin: 1rem auto;
    max-width: 100%;
  }
  .subscription-table th,
  .subscription-table td {
    font-size: 0.8rem;
  }
  .assistant-info img {
    width: 40px;
    height: 40px;
  }
  .subscribe-form-group,
  .additional-options {
    max-width: 85%;
  }
}

/* Desktop adjustments for subscribe main container */
@media screen and (min-width: 1024px) {
  .subscribe-main-container {
    margin-left: 270px;
    width: calc(100% - 270px);
    justify-content: center;
  }
  .subscribe-content-form,
  .generate-response-form {
    max-width: 800px;
    width: 800px;
    margin: 0 auto;
  }
}

/* ***************** TABLEAU DES ABONNEMENTS ******************* */
.subscription-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  box-sizing: border-box;
}
.subscription-table th,
.subscription-table td {
  padding: 0.5rem;
  border: 1px solid #ccc;
  text-align: left;
  font-size: 0.9rem;
  word-wrap: break-word;
  vertical-align: middle;
}
.subscription-table th {
  background-color: #e7f3ff;
  color: #333;
  font-weight: bold;
}
.subscription-table tr:nth-child(even) {
  background-color: #f0f8ff;
}
.subscription-table tr:hover {
  background-color: #d0e9ff;
}

/* ***************** ACTIONS CELL & BUTTONS ******************* */
.actions-cell {
  text-align: center;
  white-space: nowrap;
}
.modify-button,
.history-button,
.delete-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  background-color: #cce5ff;
  border: 2px solid #66bfff;
  border-radius: 8px;
  color: #003366;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  padding: 6px 0;
  margin: 4px auto;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.2s ease;
  overflow: hidden;
  text-overflow: ellipsis;
}
.modify-button:hover,
.history-button:hover,
.delete-button:hover {
  background-color: #b3daff;
}

.update-button {
  padding: 10px 15px;
  background-color: #007BFF;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
  display: block;   /* Assure que le bouton occupe toute la ligne */
  margin-left: auto; /* Le pousse à droite */
}

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

.error-message {
  color: red;
  margin-bottom: 1rem;
}

/* ***************** HISTORIQUE DES PUBLICATIONS (DETAIL) ******************* */
.history-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.history-back-button {
  font-size: 16px;
  padding: 5px 10px;
  background-color: #cce5ff;
  border: 2px solid #66bfff;
  border-radius: 8px;
  color: #003366;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.history-back-button:hover {
  background-color: #b3daff;
}
.history-detail-title {
  margin: 0;
  flex-grow: 1;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.2rem;
}
.header-spacer {
  width: 70px;
}
.history-detail-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}
.history-cancel-button,
.history-share-button,
.history-save-button {
  padding: 5px 10px;
  background-color: #cce5ff;
  border: 2px solid #66bfff;
  border-radius: 8px;
  color: #003366;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.history-cancel-button:hover,
.history-share-button:hover,
.history-save-button:hover {
  background-color: #b3daff;
}


/* *********** SCHEDULE - HISTORIQUE DES PUBLICATIONS ************ */

.scheduled-content-history {
    width: 100%;
    max-width: 750px;
    background-color: #f9f9f9;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    margin-top: 2rem;
}

.scheduled-content-history h2,
.scheduled-content-history h3 {
    text-align: center;
    color: #333;
    margin-bottom: 1rem;
}

.scheduled-content-history h3 {
    font-size: 1.5rem;
    margin-top: 1.5rem;
    color: #007BFF;
}

.schedule-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
    font-family: 'Montserrat', sans-serif;
}

.schedule-table th,
.schedule-table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid #e0e0e0;
    vertical-align: middle;
}

.schedule-table th {
    background-color: #007BFF;
    color: white;
    font-weight: 600;
    font-size: 1rem;
}

.schedule-table td {
    font-size: 0.95rem;
    color: #333;
}

.schedule-table tr:hover {
    background-color: #f1f8ff;
}

.schedule-table img {
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 50px;
    height: 50px;
}

.scheduled-content-history p {
    text-align: center;
    font-size: 1rem;
    color: #888;
    margin: 1rem 0;
}

@media screen and (max-width: 768px) {
    .scheduled-content-history,
    .schedule-form-group {
        width: 100%;
    }

    .schedule-table th,
    .schedule-table td {
        font-size: 0.85rem;
    }

    .schedule-table img {
        width: 40px;
        height: 40px;
    }
}


/* *********** LOGIN PLANS ************ */
/* Login Plans  | Format Section */
div.login-plans {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Espace entre chaque élément */
    max-width: 900px; /* Limite la largeur pour plus de lisibilité */
    margin: 30px auto; /* Centre la section avec une marge de 30px en haut */
    padding-top: 0; /* Assurez-vous qu'il n'y a pas de padding supplémentaire */
    margin-left: 10px; /* Ajout de marge à gauche */
    margin-right: 10px; /* Ajout de marge à droite */
}

/* Login Plans | Titre principal (Bienvenue sur Paisible !) */
div.login-plans h1 {
    text-align: center;
    margin-bottom: 10px; /* Espace réduit sous le titre principal */
    font-size: 1.8em; /* Taille de police plus grande pour mettre en évidence */
    font-weight: bold; /* Le titre principal est en gras */
    color: #007BFF; /* Couleur bleue pour correspondre à la charte du site */
}

/* Login Plans | Titre secondaire (Développez votre visibilité) */
.login-plans-baseline {
    text-align: center;
    margin-top: 0px; /* Espacement ajusté au-dessus du titre secondaire */
    margin-bottom: 5px; /* Espace en dessous du titre secondaire pour le séparer des éléments */
    font-weight: normal; /* Garder un poids de police normal */
    font-size: 1.4em; /* Taille de police plus petite que le h1 mais bien visible */
    color: #333; /* Couleur gris foncé pour un bon contraste */
}

/* Login Plans | Texte explicatif des bénéfices */
.benefits-text {
    text-align: justify; /* Justifie le texte à gauche et à droite */
    font-size: 1.0em;
    margin: 20px auto; /* Centrer verticalement avec une marge au-dessus et en dessous */
    color: #555; /* Couleur gris moyen pour un contraste doux */
    max-width: 600px; /* Limite la largeur à 600px sur les écrans plus larges */
    line-height: 1.4; /* Espacement entre les lignes pour améliorer la lisibilité */
    padding: 0 10px; /* Ajoute un léger padding pour éviter que le texte ne touche les bords */
}



/* *********** CREATE MY ACCOUNT ************ */

/* Logo Paisible au dessus de "Bienvenue" */
.logo-container-create-account {
    display: flex;
    justify-content: center;
    margin-bottom: 15px;
}

.logo-container-create-account img {
    width: 80px; /* Taille ajustable du logo */
    height: auto;
}

/* Create My Account  | Format Formulaire */
form.create-account-form {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Espace entre chaque champ */
    max-width: 900px; /* Limite la largeur du formulaire pour plus de lisibilité */
    margin: 30px auto; /* Centre le formulaire avec une marge de 30px en haut */
    padding-top: 0; /* Assurez-vous qu'il n'y a pas de padding supplémentaire */
    margin-left: 10px; /* Ajout de marge à gauche */
    margin-right: 10px; /* Ajout de marge à droite */
}

/* Create My Account | Titre principal (Bienvenue sur Paisible !) */
form.create-account-form h1 {
    text-align: center;
    margin-bottom: 10px; /* Espace réduit sous le titre principal */
    font-size: 1.8em; /* Taille de police plus grande pour mettre en évidence */
    font-weight: bold; /* Le titre principal est en gras */
    color: #007BFF; /* Couleur bleue pour correspondre à la charte du site */
}

/* Create My Account | Titre secondaire (Développez votre visibilité) */
.creation-form-baseline {
    text-align: justify; /* Justifie le texte à gauche et à droite */
    margin: 0 auto; /* Centre l'élément horizontalement */
    margin-top: 20px; /* Ajuste l'espace au-dessus */
    margin-bottom: 20px; /* Ajuste l'espace en-dessous */
    font-weight: normal; /* Poids de la police */
    font-size: 1.0em; /* Taille de la police */
    color: #333; /* Couleur du texte */
    width: 750px; /* Largeur fixe pour écrans larges */
    line-height: 1.6; /* Ajoute un espacement entre les lignes */
}

@media (max-width: 768px) { /* Tablettes et petits écrans */
    .creation-form-baseline {
        width: 90%; /* Utilise 90% de la largeur de l'écran */
        margin-left: auto; /* Centre horizontalement */
        margin-right: auto; /* Centre horizontalement */
    }
}

@media (max-width: 480px) { /* Mobiles */
    .creation-form-baseline {
        width: 95%; /* Utilise 95% de la largeur de l'écran */
        margin-left: auto; /* Centre horizontalement */
        margin-right: auto; /* Centre horizontalement */
        font-size: 0.9em; /* Réduit légèrement la taille du texte */
    }
}

/* Create My Account | Texte explicatif des bénéfices */
.benefits-text {
    text-align: justify; /* Justifie le texte à gauche et à droite */
    font-size: 1.0em;
    margin: 20px auto; /* Centrer verticalement avec une marge au-dessus et en dessous */
    color: #555; /* Couleur gris moyen pour un contraste doux */
    max-width: 600px; /* Limite la largeur à 550px sur les écrans plus larges */
    line-height: 1.4; /* Espacement entre les lignes pour améliorer la lisibilité */
    padding: 0 10px; /* Ajoute un léger padding pour éviter que le texte ne touche les bords */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .benefits-text {
        max-width: 300px; /* Réduit la largeur pour les petits écrans */
    }
}

@media (max-width: 480px) {
    .benefits-text {
        max-width: 400px; /* Réduit davantage la largeur pour les écrans très petits */
        font-size: 0.9em; /* Diminue la taille du texte pour les petits écrans */
    }
}

/* Create My Account | Liste des bénéfices */
.benefits-list {
    text-align: justify;
    margin: 20px auto;
    padding: 0;
    max-width: 800px;
    list-style-type: none; /* Supprime le style de liste par défaut */
}


.benefits-list strong {
    color: #007BFF; /* Accentuer les points clés en bleu */
}

/* Create My Account | Format Colonnes */
.form-columns {
    display: flex;
    justify-content: space-between;
    gap: 20px; /* Espace entre les colonnes */
    flex-wrap: wrap;
}

.form-columns-merged,
.form-column-text {
    flex: 1;
    text-align: center;
}

.form-column {
    flex: 1; /* Permet de faire des colonnes de largeur égale */
    display: flex;
    flex-direction: column;
    gap: 10px; /* Espace entre les champs dans chaque colonne */
}

/* Séparateur vertical */
.vertical-separator {
    width: 0.5px;
    background-color: #ccc; /* Couleur grise */
    margin: 0 20px; /* Espace autour du séparateur */
}

/* Create My Account | Format Groupe de Champs */
.form-group {
    display: flex;
    flex-direction: column;
    margin-left: 5px; /* Ajout de marge à gauche */
    margin-right: 5px; /* Ajout de marge à droite */
}


/* Create My Account | Format Titre Champ Formulaire */
form label {
    margin-bottom: 5px;
    font-weight: bold;
}

/* Create My Account | Format Champ Formulaire  */
.create-account-form input[type="text"],
.create-account-form input[type="email"],
.create-account-form input[type="password"],
.create-account-form input[type="file"] {
    width: 100%; /* Assure que les champs prennent toute la largeur disponible */
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box; /* Inclut le padding et la bordure dans la largeur totale */
    margin-left: 5px; /* Ajout de marge à gauche */
    margin-right: 5px; /* Ajout de marge à droite */
}

/* Custom file upload styling */
.custom-file-upload {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    cursor: pointer;
}

.custom-file-upload img {
    width: 24px;
    height: 24px;
}

.custom-file-upload input[type="file"] {
    display: none; /* Masque le champ de téléchargement réel */
}

.custom-file-upload span {
    cursor: pointer;
    font-size: 12px; /* Diminue la taille de la typo */
    font-weight: normal; /* Assure que le texte est en typo normale */
}

/* Create My Account | Boutons de Connexion */
.social-login-button {
    display: block;
    width: 230px; /* Assure que les boutons ont une largeur de 230px */
    padding: 10px;
    margin: 5px 0;
    text-align: center;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
}

/* Facebook Login Button*/
#customFbBtn {
    display: inline-block;
    width: 250px;
    height: auto;
    position: relative;
    text-align: left;
}

#customFbBtn img {
    width: 100%;
    height: auto;
}

.fbOverlayText {
    position: absolute;
    left: 50px; /* Décalage à gauche de 50px */
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    font-weight: normal;
    font-family: 'Roboto', sans-serif;
    color: #fff;
    z-index: 1;
    pointer-events: none;
}

/* Facebook Login Button */
.facebook-login-container {
    position: relative;
    display: inline-block;
    width: 248px;
    text-decoration: none; /* Supprime le soulignement du lien */
    border: none; /* Supprime les bordures du lien */
    outline: none; /* Supprime les bordures au focus */
}

.facebook-login-container:focus,
.facebook-login-container:hover {
    outline: none; /* Supprime les bordures au focus et au survol */
}

.facebook-login-button {
    width: 100%;
    display: block; /* L'image remplit le conteneur */
}

.facebook-login-text {
    position: absolute;
    top: 50%;
    left: 43px; /* Ajustez cette valeur si nécessaire */
    text-align: left;
    transform: translateY(-50%);
    color: white; /* Couleur du texte identique à celle de Twitter */
    font-size: 14px; /* Taille de police similaire */
    font-weight: normal;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); /* Pour améliorer la lisibilité */
}

/* Twitter Login Button*/
.twitter-login-container {
    position: relative;
    display: inline-block;
    width: 248px;
    text-decoration: none; /* Supprime le soulignement du lien */
    border: none; /* Supprime les bordures du lien */
    outline: none; /* Supprime les bordures au focus */
}

.twitter-login-container:focus,
.twitter-login-container:hover {
    outline: none; /* Supprime les bordures au focus et au survol */
}

.twitter-login-button {
    width: 100%;
    display: block; /* Assure que l'image remplit le conteneur */
}

.twitter-login-text {
    position: absolute;
    top: 50%;
    left: 50px; /* Ajustez cette valeur pour la marge à gauche */
    transform: translateY(-50%);
    color: white; /* Ou une autre couleur qui contraste avec l'image */
    font-size: 14px; /* Ajustez la taille de la police si nécessaire */
    font-weight: normal;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); /* Optionnel: pour améliorer la lisibilité */
}

/* Instagram Login Button*/
.instagram-login-container {
    position: relative;
    display: inline-block;
    width: 248px;
    text-decoration: none; /* Supprime le soulignement du lien */
    border: none; /* Supprime les bordures du lien */
    outline: none; /* Supprime les bordures au focus */
}

.instagram-login-container:focus,
.instagram-login-container:hover {
    outline: none; /* Supprime les bordures au focus et au survol */
}

.instagram-login-button {
    width: 100%;
    display: block; /* Assure que l'image remplit le conteneur */
}

.instagram-login-text {
    position: absolute;
    top: 50%;
    left: 50px; /* Ajustez cette valeur pour la marge à gauche */
    transform: translateY(-50%);
    color: white; /* Ou une autre couleur qui contraste avec l'image */
    font-size: 14px; /* Ajustez la taille de la police si nécessaire */
    font-weight: normal;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); /* Optionnel: pour améliorer la lisibilité */
    text-align: left; /* Justifie le texte à gauche */
    width: calc(100% - 50px); /* Assure que le texte ne dépasse pas du conteneur */
}

/* Google Login Button */
#google-login-btn {
    display: inline-block;
    width: 248px;
    height: auto;
    position: relative;
    overflow: hidden;
    text-align: left;
}

#google-login-btn img {
    width: 100%;
    height: auto;
}

.buttonOverlayText {
    position: absolute;
    left: 50px; /* Décalage à gauche de 50px */
    top: 50%; /* Centrage vertical */
    transform: translateY(-50%); /* Ajustement pour un centrage parfait */
    font-size: 14px;
    font-weight: normal;
    color:black;
    z-index: 1;
    pointer-events: none; /* Permet de cliquer sur le bouton même avec le texte en surimpression */
}

.facebook-login-button:hover {
    background-color: #334d84;
}

.twitter-login-button:hover {
    background-color: #1991db;
}

.instagram-login-button:hover {
    background-color: #d83557;
}

.google-login-button:hover {
    background-color: #c33d2d;
}


/* TikTok Login Button */
#tiktok-login-btn {
    display: inline-block;
    width: 250px; /* Même largeur que le bouton Google */
    height: auto; /* Hauteur dynamique basée sur le contenu */
    position: relative;
    overflow: hidden;
    text-align: left;
}

#tiktok-login-btn img {
    width: 100%; /* Image prend toute la largeur */
    height: auto; /* Garder le ratio aspect */
}

.tiktokOverlayText {
    position: absolute;
    left: 50px; /* Décalage à gauche de 50px, comme le bouton Google */
    top: 50%; /* Centrage vertical */
    transform: translateY(-50%); /* Centrage parfait */
    font-size: 14px;
    font-weight: normal;
    color: white; /* Texte en noir, à ajuster selon le design */
    z-index: 1;
    pointer-events: none; /* Pour permettre le clic sur le bouton même avec le texte par-dessus */
}

.tiktok-login-button:hover {
    background-color: #1a1a1a; /* Changement de couleur au survol */
}

.tiktok-login-btn {
    text-decoration: none;
    display: inline-block;
}


/* LinkedIn Login Button */
#linkedin-login-btn {
    display: inline-block;
    width: 248px; /* Même largeur que le bouton Google */
    height: auto; /* Hauteur dynamique basée sur le contenu */
    position: relative;
    overflow: hidden;
    text-align: left;
}

#linkedin-login-btn img {
    width: 100%; /* Image prend toute la largeur */
    height: auto; /* Garder le ratio aspect */
}

.linkedinOverlayText {
    position: absolute;
    left: 50px; /* Décalage à gauche de 50px, comme le bouton Google */
    top: 50%; /* Centrage vertical */
    transform: translateY(-50%); /* Centrage parfait */
    font-size: 14px;
    font-weight: normal;
    color: white; /* Texte en noir, à ajuster selon le design */
    z-index: 1;
    pointer-events: none; /* Pour permettre le clic sur le bouton même avec le texte par-dessus */
}

.linkedin-login-button:hover {
    background-color: #1a1a1a; /* Changement de couleur au survol */
}

.linkedin-login-btn {
    text-decoration: none;
    display: inline-block;
}

/* Create My Account | Bouton "Créer mon compte" */
.button-wrapper {
    display: flex;
    justify-content: center; /* Centre le bouton */
    margin-top: 20px; /* Ajout d'une marge au-dessus du bouton */
}

.submit-button {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    background-color: #007bff;
    color: white;
    font-size: 16px;
    cursor: pointer;
}

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

#confirmationMessage p {
    font-size: 18px;
    color: green;
    text-align: center; /* Centre le message de confirmation */
}

#confirmationMessage a {
    color: #007bff;
    text-decoration: none;
}

/* Media Query pour les écrans mobiles */
@media (max-width: 768px) {
    .form-columns {
        flex-direction: column;
    }

    .form-columns-merged,
    .form-column-text {
        order: 1;
        text-align: center;
        justify-content: center;
        width: 100%;
    }

    .form-info {
        order: 2;
        width: 100%;
        margin-left: 5px; /* Ajout de marge à gauche */
        margin-right: 5px; /* Ajout de marge à droite */
    }
    
    .form-social {
        order: 3;
        width: 100%;
    }

    .button-wrapper {
        order: 4;
        justify-content: center;
        width: 100%;
    }

    .vertical-separator {
        display: none; /* Masque le séparateur vertical */
    }

    .social-login-button {
        margin: 10px auto; /* Centre les boutons sur les écrans mobiles */
    }
}


/* ===========================================
   Desktop (≥1025px) – Calibrage Create Account
   =========================================== */
@media (min-width: 1025px){
  /* Formulaire global plus étroit & serré */
  form.create-account-form{
    max-width: 760px;
    gap: 16px;
    margin: 24px auto;
  }

  /* Titre principal plus discret */
  form.create-account-form h1{
    font-size: 1.5em;      /* était 1.8em */
    margin-bottom: 6px;
  }

  /* Baseline/intro plus fine et moins large */
  .creation-form-baseline{
    width: 680px;          /* était 750px */
    font-size: 0.95em;     /* était 1.0em */
    line-height: 1.5;
    margin-top: 12px;
    margin-bottom: 12px;
  }

  /* Texte d’avantages */
  .benefits-text{
    font-size: 0.95em;     /* était 1.0em */
    max-width: 560px;      /* était 600px */
    line-height: 1.45;
    margin: 16px auto;
  }

  /* Logo au-dessus du H1 */
  .logo-container-create-account img{
    width: 64px;           /* était 80px */
    height: auto;
  }

  /* Boutons de connexions sociales (mêmes couleurs, un peu plus compacts) */
  .social-login-button{
    width: 220px;          /* était 230px */
    padding: 8px;          /* était 10px */
  }

  /* Largeurs homogènes des conteneurs d’images-boutons */
  #customFbBtn,
  .facebook-login-container,
  .twitter-login-container,
  #tiktok-login-btn,
  #linkedin-login-btn{
    width: 236px;          /* était ≈ 248–250px */
  }

  /* Texte superposé des boutons sociaux (légèrement réduit) */
  .facebook-login-text,
  .fbOverlayText,
  .twitterOverlayText,
  .tiktokOverlayText,
  .linkedinOverlayText{
    font-size: 13px;       /* était 14px */
    left: 44px;            /* cohérent avec la réduction */
  }

  /* Upload custom – libellé un brin plus petit */
  .custom-file-upload span{ font-size: 11px; }

  /* Bouton de soumission */
  .submit-button{
    font-size: 14px;       /* était 16px */
    padding: 8px 16px;     /* était 10px 20px */
    border-radius: 6px;
  }
}


/* *************** MY ACCOUNT *************** */
.account-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 20px;
    box-sizing: border-box;
}

.profile-section {
    text-align: center;
    margin-bottom: 30px; /* Réduit l'espacement vertical */
}

.profile-section h1 {
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 20px;
}

@media screen and (max-width: 767px) {
    .break-mobile {
        display: block;
    }
}

.avatar-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.avatar {
    width: 120px;
    height: 120px;
    background-color: #d9d9d9;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    margin-bottom: 10px;
}

.username {
    font-size: 18px;
    color: #333;
    margin-bottom: 0px; /* Ajuste l'espacement sous le nom d'utilisateur */
}

.actions-section {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.assistants, .account-actions {
    width: 48%; /* Augmente la largeur des deux blocs */
    text-align: center;
}

.assistants h2, .account-actions h2 {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
}

/* Bouton générique */
.btn {
    display: block;
    padding: 12px 20px;
    margin: 10px 0;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease;
    color: #fff;
    font-size: 16px;
    text-align: center;
}

/* Bouton principal */
.btn-primary {
    background-color: #007bff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
}

.btn-primary:hover {
    background-color: #0056b3;
    color: #fff;
}

.subscription-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px; /* Espacement entre les boutons */
    margin-top: 15px;
}

/* Bouton de mise à jour (Modifier l'abonnement) */
.btn-update {
    background-color: #ccc;
    color: #333;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-left: 5px;
}

.btn-update:hover {
    background-color: #0056b3;
    color: #fff;
}

/* Bouton d'annulation (Annuler l'abonnement) */
.btn-delete {
    background-color: #ccc;
    color: #333;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-left: 5px;
}

.btn-delete:hover {
    background-color: #c82333;
    color: #fff;
}

/* Media Queries pour mobile */
@media (max-width: 768px) {
    .actions-section {
        flex-direction: column;
    }

    .assistants,
    .account-actions {
        width: 100%;
        margin-bottom: 20px;
        max-width: 100%;
    }

    .btn,
    .btn-primary,
    .btn-update,
    .btn-delete {
        width: auto;
        margin: 10px auto;
    }
}



/* *************** UPDATE MY ACCOUNT *************** */

.main-update-account {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 900px;
    margin: 40px auto; /* Centrer la section */
    padding: 20px;
    box-sizing: border-box;
}

h1 {
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    /*margin-top:60px; */
    margin-bottom: 40px; /* Espace sous le titre */
}

/* Sur mobile, appliquer un margin-top de 60px au h1 */
@media screen and (max-width: 767px) {
    h1 {
        margin-top: 60px;
    }
}

.user-avatar-maj {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 40px; /* Espace sous l'avatar et le nom d'utilisateur */
}

.user-avatar-maj img.avatar-maj {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    margin-bottom: 10px;
}

.user-avatar-maj p {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
}

formmaj {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Deux colonnes dans le formulaire */
    gap: 20px;
    width: 100%; /* Prend toute la largeur disponible */
}

.formaj-group {
    display: flex;
    flex-direction: column;
}

label {
    font-weight: bold;
    margin-bottom: 5px;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="file"] {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    width: 100%;
    box-sizing: border-box;
}

button.btn {
    grid-column: span 2; /* Le bouton "Mettre à jour mon compte" occupe toute la largeur du formulaire */
    padding: 15px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    text-align: center;
    margin-top: 20px;
}

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

@media (max-width: 768px) {
    form {
        grid-template-columns: 1fr; /* Une seule colonne sur mobile */
    }

    button.btn {
        width: 100%; /* Le bouton occupe toute la largeur */
    }
}


/* ************** CREATE A NEW ASSISTANT************** */

/* Create Assistant | Zone totale */
#create-assistant {
    display: flex;
    justify-content: space-between;
    background-color: #fff000;
    padding: 20px; /* Espacement avec haut de page */
    width: 100%; /* Largeur fixe de la zone */
    margin: 0 auto; /* Centre la zone horizontalement */
    box-sizing: border-box; /* Assure que la largeur inclut le padding et la bordure */
}


/* Create Assistant | Taille de la zone totale */
.assistant-form-container {
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    width: 80%; /* La zone totale prend toute la largeur disponible dans le main */
}

/* Create Assistant | Colonne de gauche */
.assistant-form-zone {
    flex: 1;
    margin-right: 20px;
}

.assistant-form-zone:last-child {
    margin-right: 0;
}

.assistant-form, .assistant-preview {
    flex: 1;
}

/* Positionner le formulaire à gauche avec une marge de 20px */
#assistant-form {
    margin-left: 40px; /* Marge de 20px à gauche */
    float: left; /* Force le formulaire à se positionner à gauche */
    width: calc(100% - 40px); /* Assure que le formulaire ne dépasse pas le conteneur principal */
}

/* Style for the form groups */
.form-group {
    margin-bottom: 40px; /* Espacement vertical entre chaque champ */
}

/* Create Assistant | Numéro étape */
.numbered-title {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.number-box {
    background-color: #000;
    color: #fff;
    padding: 5px 10px;
    margin-right: 10px;
}

/* Create Assistant | Nom Assistant */
.name-input {
    flex-grow: 1; /* Permet au champ de texte de remplir l'espace disponible */
    padding: 10px;
    border: 1px solid #ccc;
    margin-right: 10px; /* Ajoutez une marge à droite pour espacer du signe "check" */
    width: calc(100% - 60px); /* Réduit la largeur pour laisser de l'espace pour le signe "check" */
}

/* Create Assistant | Bouton radio */
.gender label {
    display: inline-block; /* Garde les labels sur la même ligne */
    margin-right: 15px; /* Espace entre les labels */
}

/* Styles pour les écrans plus petits */
@media screen and (max-width: 768px) {
    .gender label {
        display: block; /* Chaque label sur sa propre ligne */
        margin-right: 0; /* Réinitialise la marge droite pour éviter tout espace inutile sur les côtés */
    }
}

/* Create Assistant | Upload */
.upload-container {
    display: flex; /* Active Flexbox */
    align-items: center; /* Centre verticalement les éléments */
    justify-content: flex-start; /* Alignement à gauche */
}

.upload-box {
    /*flex-grow: 1; /* Permet au champ de texte de remplir l'espace disponible */
    padding: 10px;
    border: 1px solid #ccc;
    margin-right: 10px; /* Ajoutez une marge à droite pour espacer du signe "check" */
    width: calc(100% - 60px); /* Réduit la largeur pour laisser de l'espace pour le signe "check" */
}

/* Create Assistant | Assistant Preview */
.assistant-preview {
    text-align: center;
    margin-left: 20px;
}

/* Create Assistant | Barre Noire "Your new Assistant" */
.preview-header {
    background-color: #000;
    color: #fff;
    padding: 5px;
    margin-bottom: 20px;
}

/* Create Assistant | Cercle Avatar */
.preview-circle {
    border: 1px solid #ccc;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    margin: auto;
}

/* Create Assistant | Cercle Avatar */
.assistant-name-preview {
    margin-top: 20px;
}

/* Create Assistant | Check */
#name-check, #gender-check, #avatar-picture-check, #knowledge-name-check {
    display: none; /* Cache l'icône par défaut */
    color: dodgerblue;
    font-size: 0.9rem; /* Ajustez la taille selon vos besoins */
    white-space: nowrap; /* Empêche l'icône de passer à la ligne */
    float: right; /* Alignement à droite */
}

/* Create Assistant | Assistant Preview - Folder */
.closed-folder-icon-container {
    display: flex;
    justify-content: center; /* Centre horizontalement */
    align-items: center; /* Centre verticalement */
    height: 100px; /* Hauteur du conteneur, ajustez selon vos besoins */
}

/* Create Assistant | Boutons navigation */
.form-navigation {
    position: absolute; /* Positionnement absolu par rapport à .form-container */
    left: 25px; /* Bouton "Prev." Aligné à gauche */
    right: 0; /* Bouton "Next" Aligné à droite */
    bottom: 0; /* Aligné en bas */
    display: flex;
    justify-content: space-between; /* Sépare les boutons */
    padding: 10px; /* Espacement intérieur pour les boutons */
    margin-bottom: 10px; /* Marge en bas pour les éloigner du bord */
}

.prev-btn, .next-btn {
    padding: 10px 20px;
    border: 1px solid #ccc;
    /* Ajoutez ici des styles supplémentaires si nécessaire */
}

/* Create Assistant | Responsive */
@media (max-width: 800px) {
    .assistant-form-container {
        flex-direction: column; /* Empile les éléments verticalement */
        align-items: center; /* Centre les éléments enfants horizontalement */
        width: 100%; /* Utilise la pleine largeur */
    }

    .assistant-form-zone, .assistant-preview {
        width: 90%; /* Réduit la largeur pour centrer avec un peu d'espace sur les côtés */
        margin-right: 0; /* Élimine la marge à droite */
        margin-bottom: 20px; /* Ajoute un espace entre les colonnes */
    }

    .assistant-form-zone:last-child, .assistant-preview:last-child {
        margin-bottom: 0; /* Évite l'espacement supplémentaire pour le dernier élément */
    }

    .form-navigation {
        position: relative; /* S'adapte au flux normal */
        left: auto; /* Annule le positionnement spécifique */
        right: auto; /* Annule le positionnement spécifique */
        width: 90%; /* Assure que la navigation est alignée avec les éléments ci-dessus */
        margin-top: 20px; /* Ajoute de l'espace au-dessus des boutons de navigation */
    }
}


/* *************** PAISIBLE ASSISTANT (GENERIQUE) **************** */

/* Assistant | Zone des éléments de l'assistant  */
#ask-assistant {
    width: 100%;
}

/* Assistant | <h1>  */
#assistant-header h1 {
  margin: 0; /* Espace vertical entre Avatar & Nom assistant */
}

/* Assistant | <h2> */
#assistant-header h2 {
    font-size: 18px; /* Diminue la taille de la typographie */
    margin: 0; /* Optionnel: retire l'espacement par défaut autour de h2 si nécessaire */
}

/* Assistant | Visuel avatar */
#assistant-avatar {
    border-radius: 50%; /* Rend l'image ronde */
    width: 50px; /* Définit la largeur de l'image */
    height: 50px; /* Définit la hauteur de l'image pour maintenir l'aspect circulaire */
    object-fit: cover; /* S'assure que l'image couvre bien l'espace sans être déformée */
    margin-right: 10px; /* Espace entre l'image et le texte à côté */
}

/* Assistant | Zone Avatar & Nom */
#assistant-header {
    text-align: center;
    margin-top: auto; /* Centrer verticalement */
}

/* Assistant | Champ question */
.question-input {
    background-color: #ffffff; /* Par exemple */
}

/* Assistant | Affichage de la barre de défilement */
#assistant-response {
  text-align: center;
  max-height: calc(100vh - 250px); /* Ajustement pour inclure la hauteur de l'entête, la marge, et .bottom-section */
  overflow-y: auto; /* Active le défilement vertical lorsque nécessaire */
  margin-bottom: 100px; /* Assure une marge suffisante au-dessus de .bottom-section */
  padding-bottom: 30px; /* Augmentation pour garantir la visibilité de la dernière ligne */
}

/* Pour les navigateurs basés sur WebKit (Chrome, Safari, etc.) */
#assistant-response::-webkit-scrollbar {
    width: 8px; /* Largeur de la barre de défilement */
    background-color: #f9f9f9; /* Couleur de fond de la barre de défilement */
}

#assistant-response::-webkit-scrollbar-thumb {
    background-color: #007BFF; /* Couleur de la partie défilable de la barre */
    border-radius: 4px; /* Arrondit les coins de la partie défilable */
}

/* Pour Firefox */
#assistant-response {
    scrollbar-width: thin; /* Rend la barre de défilement plus fine */
    scrollbar-color: #007BFF #f9f9f9; /* Couleur de la barre de défilement et couleur de fond */
}

/* Assistant | Disclaimer */
.disclaimer {
    text-align: center;
    color: darkgrey;
    font-size: 0.8em;
    margin-bottom: 0px;
    /* Pas besoin de white-space: nowrap; ici car le comportement par défaut garde le texte sur une ligne */
}

/* Style pour forcer la mise à la ligne après "make mistakes." sur les petits écrans */
.mobile-break {
    display: none; /* Cache par défaut le span pour éviter toute perturbation sur les grands écrans */
}

@media (max-width: 768px) {
    .mobile-break {
        display: block; /* Sur les petits écrans, le span prend toute la largeur, forçant la mise à la ligne */
    }
}

/* Assistant | Zone Champ question & Bouton "Ask" */
#question-form {
    display: flex;
    justify-content: center; /* Centrer les éléments du formulaire horizontalement */
    align-items: center; /* Aligner les éléments du formulaire verticalement */
    width: 80%; /* Adaptation à la largeur du conteneur */
    max-width: 600px; /* Largeur maximale pour la lisibilité */
    margin: 20px auto; /* Centrer le formulaire horizontalement avec marge */
    margin-top: 0px; /* Marge au-dessus du champ de la question */
}

.input-group {
    display: flex;
    width: 100%;
}

/* Style pour le conteneur de l'avatar et du préfixe "You" */
.avatar-and-prefix-container {
    display: flex;
    align-items: center; /* Centre verticalement l'avatar avec le texte "You" */
    margin-bottom: 5px; /* Espace entre ce conteneur et le texte de la question */
}

/* Style pour le préfixe "You" */
.question-prefix {
    margin-left: 10px; /* Espace entre l'avatar et le texte "You" */
    vertical-align: middle; /* Assure un alignement vertical correct */
}

.assistant-avatar-question {
    display: block;
    border-radius: 50%; /* Rend le conteneur rond */
    width: 20px; /* Largeur du cercle */
    height: 20px; /* Hauteur du cercle */
    margin-bottom: 10px; /* Espace sous l'avatar */
    background-color: #f0f0f0; /* Couleur de fond pour les cercles vides */
    overflow: hidden; /* Empêche le débordement du contenu */
}

/* Avatar Paisible dans les réponses */
.assistant-avatar-response {
    border-radius: 50%; /* Rend le conteneur rond */
    width: 20px; /* Largeur du cercle */
    height: 20px; /* Hauteur du cercle */
    margin-bottom: 10px; /* Espace sous l'avatar */
    margin-right: 10px;
    vertical-align: middle; /* Assure un alignement vertical correct avec le texte */
    background-color: #f0f0f0; /* Couleur de fond pour les cercles vides */
    overflow: hidden; /* Empêche le débordement du contenu */
}

/* Style pour le conteneur de l'avatar et du préfixe */
.avatar-and-prefix-container {
    display: flex;
    align-items: center; /* Centre verticalement l'avatar avec le texte */
    margin-bottom: 5px; /* Espace entre ce conteneur et le texte de la réponse */
}

/* Style pour le préfixe "Paisible:" */
.response-prefix {
    font-weight: bold; /* Rend le préfixe plus visible */
    vertical-align: middle; /* Assure un alignement vertical correct */
}

/* Style pour le préfixe "You:" */
.question-prefix {
    font-weight: bold; /* Rend le préfixe plus visible */
    vertical-align: middle; /* Assure un alignement vertical correct */
}

/* Espacement vertical entre zone de question et zone de réponse */
.question-block-spacing {
    margin-bottom: 40px; /* Espace sous le bloc de question */
}

/* Assistant | Champ question */
#assistant-question {
    flex-grow: 1; /* Permet au champ de question de prendre toute la largeur disponible */
    border-top-left-radius: 4px; /* Arrondit seulement les coins supérieur et inférieur gauche */
    border-bottom-left-radius: 4px;
    border: 1px solid #ccc; /* Light grey border for the input */
    padding: 10px; /* Padding inside the input */
    font-size: 16px; /* Larger font size for readability */
    border-right: none; /* Supprime la bordure droite pour fusionner le champ et le bouton */
}

/* Assistant | Bouton "Ask" */
#question-form button {
    background-color: #007BFF; /* Bootstrap primary blue for the button */
    color: #FFF; /* White text for the button */
    border-top-right-radius: 4px; /* Arrondit seulement les coins supérieur et inférieur droit */
    border-bottom-right-radius: 4px;
    padding: 10px 15px; /* Ajuste le padding pour aligner la taille du bouton avec celle du champ de saisie */
    border: none; /* No border for the button */
    cursor: pointer; /* Pointer cursor on hover */
}

#question-form button:hover {
    background-color: #0056b3; /* Darkens the button on hover */
}

/* Ajustement pour les écrans plus petits */
@media screen and (max-width: 600px) {
    #question-form, .input-group, #assistant-question {
        width: 80%; /* Ajuste la largeur pour les écrans petits */
    }
}

/* Assistant | Animation chargement */
@keyframes loadingAnimation {
    0% { transform: rotate(0deg); border-top-color: rgba(0, 123, 255, 0.2); }
    50% { transform: rotate(180deg); border-top-color: rgba(0, 123, 255, 0.8); }
    100% { transform: rotate(360deg); border-top-color: rgba(0, 123, 255, 0.2); }
}

.loading-circle {
    width: 30px;
    height: 30px;
    border: 3px solid rgba(0, 123, 255, 0.2);
    border-radius: 50%;
    border-top-color: rgba(0, 123, 255, 0.8);
    animation: loadingAnimation 1s infinite linear;
    margin: 20px auto;
    text-align: center;
}

/* Icône de chargement dans popin */
.loader {
    border: 5px solid #f3f3f3; /* Couleur de fond */
    border-top: 5px solid #3498db; /* Couleur de l'icône */
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Assistant | Question */
.question-block {
    width: 80%; /* Adaptation à la largeur du conteneur */
    max-width: 600px; /* Largeur maximale pour la lisibilité */
    padding: 10px 15px; /* Espacement interne */
    margin: 15px auto; /* Centrer le bloc et espacement vertical */
    background-color: #e6f4ff; /* Bleu très clair pour la question */
    /*border: 1px solid #b3d9ff; /* Bordure légèrement plus foncée */
    border-radius: 15px; /* Bords arrondis pour un effet moderne */
    text-align: justify; /* Justifie le texte */
    /*box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); /* Légère ombre pour un effet de flottement */
}

.question-block p {
    margin: 0 0 1em; /* Espacement entre les paragraphes */
    line-height: 1.6; /* Améliore la lisibilité */
    padding-left: 20px; /* Décale le texte de 20px vers la droite */
}

/* Suppression des marges inutiles autour des paragraphes */
.question-block p:first-child {
    margin-top: 5px;
}

.question-block p:last-child {
    margin-bottom: 5px;
}

/* Assistant | Réponse */
.response-block {
    width: 80%; /* Adaptation à la largeur du conteneur */
    max-width: 600px; /* Largeur maximale pour la lisibilité */
    padding: 10px 15px; /* Espacement interne */
    margin: 15px auto 20px auto; /* Centrer le bloc et espacement vertical + marge en bas */
    background-color: #f9f9f9; /* Gris très clair pour la réponse */
    /*border: 1px solid #ddd; /* Bordure gris pâle */
    border-radius: 15px; /* Bords arrondis pour un effet moderne */
    text-align: justify; /* Justifie le texte */
    /*box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); /* Légère ombre pour un effet de flottement */
}

.response-block p {
    margin: 0 0 1em; /* Espacement entre les paragraphes */
    line-height: 1.6; /* Améliore la lisibilité */
    padding-left: 30px; /* Décale le texte de 20px vers la droite */
}

/* Suppression des marges inutiles autour des paragraphes */
.response-block p:first-child {
    margin-top: 5px;
}

.response-block p:last-child {
    margin-bottom: 5px;
}

/* Assistant | Position du champ de question */
.bottom-section {
    position: fixed; /* Fixe la section au bas de la fenêtre du navigateur */
    left: 282px; /* Décalé de 282px à partir de la gauche */
    right: 0; /* S'étend jusqu'au bord droit de la fenêtre du navigateur */
    bottom: 0;
    width: calc(100% - 282px); /* Ajuste la largeur pour tenir compte du décalage */
    text-align: center;
    padding: 20px 0;
    background-color: #fff; /* Ajout d'une couleur de fond pour garantir la visibilité par-dessus le contenu */
    /*z-index: 1000; /* Assure que la section reste au-dessus des autres éléments */
}

/* Annule le décalage pour les fenêtres plus petites que 768px */
@media (max-width: 768px) {
    .bottom-section {
        left: 0; /* Annule le décalage de gauche */
        width: 100%; /* Rétablit la largeur à 100% */
    }
}

/* Cache les éléments après la réponse générée */
.hidden {
    display: none;
}

.copy-btn, .share-email-btn, .social-share-btn {
    margin-bottom: 20px; /* Marge sous les boutons*/
}

/* Bouton copy */
.copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px; /* Augmente le padding horizontal */
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 8px; /* Coins plus arrondis */
    cursor: pointer;
    text-decoration: none;
    margin-top: 10px;
    margin-left: 28px; /* Décale de 30px vers la droite */
    align-self: flex-start; /* Align button to the left */
    transition: background-color 0.2s, transform 0.2s; /* Animation douce */
}

.copy-btn img {
    height: 16px; /* Ajustement de la taille de l'icône */
    width: 16px; /* Ajustement de la taille de l'icône */
    filter: brightness(0) invert(1); /* Tente de rendre l'icône blanche */
    margin-right: 4px; /* Espacement entre l'icône et le texte */
}

/* Style pour le survol du bouton */
.copy-btn:hover {
    background-color: #0056b3; /* Assombrir le bouton au survol */
}

/* Style pour le clic sur le bouton */
.copy-btn:active {
    transform: scale(0.95); /* Réduire légèrement la taille du bouton pour simuler un clic */
}

/* Bouton Email share */
.share-email-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px; /* Augmente le padding horizontal */
    background-color: #007bff; /* Une couleur différente pour distinguer les boutons */
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    margin-top: 10px;
    margin-left: 10px; /* Ajout d'un peu d'espace entre les boutons */
    align-self: flex-start;
    transition: background-color 0.2s, transform 0.2s;
}

.share-email-btn img {
    height: 16px;
    width: 16px;
    margin-right: 5px; /* Espace entre l'icône et le texte */
    filter: brightness(0) invert(1);
}

.share-email-btn:hover {
    background-color: #0056b3; /* Assombrir le bouton au survol */
}

.share-email-btn:active {
    transform: scale(0.95); /* Effet de clic */
}

/* Bouton Social share */
.social-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px; /* Augmente le padding horizontal */
    background-color: #007bff; /* Une couleur différente pour distinguer les boutons */
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    margin-top: 10px;
    margin-left: 10px; /* Ajout d'un peu d'espace entre les boutons */
    align-self: flex-start;
    transition: background-color 0.2s, transform 0.2s;
}

.social-share-btn img {
    height: 16px;
    width: 16px;
    margin-right: 5px; /* Espace entre l'icône et le texte */
    filter: brightness(0) invert(1);
}

.social-share-btn:hover {
    background-color: #0056b3; /* Assombrir le bouton au survol */
}

.social-share-btn:active {
    transform: scale(0.95); /* Effet de clic */
}

/* Modification pour mobile : agrandir et centrer les boutons en les empilant verticalement */
@media screen and (max-width: 767px) {
    .copy-btn, .share-email-btn, .social-share-btn {
        display: block;              /* Affichage en bloc pour les empiler verticalement */
        width: 80%;                  /* Largeur augmentée pour une meilleure lisibilité */
        margin: 10px auto;           /* Centrage horizontal et espacement vertical */
        padding: 8px 16px;           /* Padding augmenté pour des boutons plus gros */
        font-size: 1.1em;            /* Taille de police légèrement augmentée */
        border-radius: 10px;         /* Coins éventuellement encore plus arrondis */
    }
    
    .copy-btn img, 
    .share-email-btn img, 
    .social-share-btn img {
        height: 20px;               /* Taille des icônes augmentée */
        width: 20px;                /* Taille des icônes augmentée */
        margin-right: 8px;          /* Espacement entre l'icône et le texte ajusté */
    }
}


/* Assistant | Informations utilisateur Facebook */
#facebook-user-info .user-info {
    text-align: center;
    color: darkgrey;
}

/* User info : Facebook */
#facebook-user-info .user-info {
    text-align: center;
    color: darkgrey;
}

#facebook-user-info .fb-user-details {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /* Permet aux éléments de passer à la ligne sur de petits écrans */
    margin-top: 10px;
    color: darkgrey !important; /* Force la couleur à darkgrey */
}

#facebook-user-info .fb-user-details > * {
    margin: 5px; /* Espacement uniforme autour de chaque élément */
}

#facebook-user-info .fb-user-details img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

.fb-pages-info {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap; /* Permet de basculer en mode colonne sur petits écrans */
    color: darkgrey !important; /* Force la couleur à darkgrey */
}

.fb-pages-info .fb-page {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 5px; /* Espacement uniforme */
}

.fb-pages-info .fb-page img {
    margin-left: 10px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

.fb-pages-info .fb-page span {
    color: darkgrey !important; /* Force la couleur à darkgrey pour les noms des pages */
}

/* Réorganisation pour les petits écrans */
@media screen and (max-width: 768px) {
    #facebook-user-info .fb-user-details,
    .fb-pages-info {
        flex-direction: column;
        align-items: center;
    }

    .fb-pages-info .fb-page {
        justify-content: center; /* Centrer les éléments sur petits écrans */
    }

    .fb-pages-info .fb-page img {
        margin-left: 0;
        margin-bottom: 10px; /* Espacement entre l'image de la page et le nom sur petits écrans */
    }
}


/* User info : X */
#x-user-info .x-user-details {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /* Permet aux éléments de passer à la ligne sur de petits écrans */
    margin-top: 10px;
}

#x-user-info .x-user-details > * {
    margin: 5px; /* Espacement uniforme autour de chaque élément */
}

#x-user-info .x-user-details img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

/* Réorganisation pour les petits écrans */
@media screen and (max-width: 768px) {
    #x-user-info .x-user-details {
        flex-direction: column;
        align-items: center;
    }
}


/* **************** KNOWLEDGE *************** */
/* Style for the main setting form */
#set-knowledge-base {
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    padding: 20px;
}


/* ************** MY ASSISTANTS ************* */

/* */
.mes-assistants {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
    text-align: center;
}

/* Ajout de styles pour la grille des assistants */
.assistants-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 40px; /* Augmenter cette valeur pour plus d'espace entre les cartes */
    justify-content: center;
    padding: 20px;
    width: 80%;
    margin: 0 auto;
    text-align: center; /* Centre le texte horizontalement */
}

.assistant-card-link {
    text-decoration: none;
    color: black;
    display: block;
}

.assistant-card {
    text-align: center;
}

.assistant-avatar, .assistant-avatar-empty {
    display: block;
    margin: auto;
    border-radius: 50%;
    width: 100px;
    height: 100px;
}

.assistant-name, .assistant-gender {
    font-weight: bold;
    margin: 5px 0;
    color: black;
    text-decoration: none;
    width: 150px; /* Définir la largeur maximale souhaitée */
    white-space: nowrap; /* Empêche le texte de s'étendre sur plusieurs lignes */
    overflow: hidden; /* Cache le texte qui dépasse la largeur maximale */
    text-overflow: ellipsis; /* Ajoute des points de suspension pour indiquer que le texte est coupé */
    text-align: center; /* Centre le texte horizontalement */
    display: block; /* S'assure que le texte prend toute la largeur disponible */
    margin-left: auto; /* Centre le bloc horizontalement */
    margin-right: auto; /* Centre le bloc horizontalement */
}


.assistant-gender {
    font-style: italic;
    color: #555;
    font-weight: normal;
}

/* Nouveau style pour le cercle vide */
.assistant-avatar, .assistant-avatar-empty {
    display: inline-block;
    border-radius: 50%; /* Rend le conteneur rond */
    width: 80px; /* Largeur du cercle */
    height: 80px; /* Hauteur du cercle */
    margin-bottom: 10px; /* Espace sous l'avatar */
    background-color: #f0f0f0; /* Couleur de fond pour les cercles vides */
    overflow: hidden; /* Empêche le débordement du contenu */
}

.assistant-avatar {
    background-size: cover; /* Assure que l'image couvre tout le cercle */
    background-position: center; /* Centre l'image dans le cercle */
}

.assistant-avatar-question {
    background-size: cover; /* Assure que l'image couvre tout le cercle */
    background-position: center; /* Centre l'image dans le cercle */
}

@media (max-width: 1024px) {
    /* Ajuste la mise en page pour les écrans plus petits */
    .assistant-card {
        width: calc((100% - 60px) / 3);
    }
}

@media (max-width: 768px) {
    /* Ajuste la mise en page pour les écrans encore plus petits */
    .assistant-card {
        width: calc((100% - 40px) / 2);
    }
}

@media (max-width: 480px) {
    /* Mise en page pour les écrans de type mobile */
    .assistant-card {
        width: 100%;
    }
    .assistant-avatar {
        /* Réduit la taille des avatars sur les petits écrans */
        max-width: 60px; /* Largeur maximale réduite pour l'avatar */
        max-height: 60px; /* Hauteur maximale réduite pour l'avatar */
    }
}

.assistant-card {
    text-align: center;
    position: relative;
    display: inline-block;
    margin: 20px; /* Pour augmenter l'espace entre les assistants */
    width: 200px; /* Largeur fixe pour chaque assistant, peut être ajustée */
}

.delete-assistant {
    position: absolute;
    top: 5px; /* Ajustez ces valeurs pour aligner la croix avec le bord de l'image */
    right: 5px; /* Ajustez ces valeurs pour aligner la croix avec le bord de l'image */
    width: 20px; /* Taille explicite du bouton pour correspondre à la zone cliquable */
    height: 20px; /* Taille explicite du bouton pour correspondre à la zone cliquable */
    background-color: white; /* Couleur de fond pour bien voir la croix */
    border-radius: 50%; /* Pour un bouton rond */
    display: flex; /* Centrer le contenu (la croix) à l'intérieur */
    align-items: center; /* Centrer verticalement */
    justify-content: center; /* Centrer horizontalement */
    text-decoration: none; /* Supprimer toute décoration de lien */
    color: darkgrey;
    font-weight: bold;
    z-index: 104; /* S'assurer que la croix est au-dessus de tous les autres éléments */
    cursor: pointer; /* Assurez-vous que le curseur change pour indiquer un élément cliquable */
    border: 1px solid grey; /* Ajoute un contour gris autour de la croix */
}

.modal-assistant {
    display: none; 
    position: fixed; 
    z-index: 1000; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    background-color: rgba(0, 0, 0, 0.5); /* Fond sombre semi-transparent */
    display: flex; /* Utilisation de Flexbox pour centrer */
    justify-content: center; /* Centre horizontalement */
    align-items: center; /* Centre verticalement */
}

.modal-assistant-content {
    background-color: #ffffff; /* Fond blanc */
    padding: 30px; /* Espacement intérieur pour aérer le contenu */
    border-radius: 10px; /* Coins arrondis */
    width: 80%; 
    max-width: 400px; /* Largeur maximale pour plus de lisibilité */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Léger ombrage pour ajouter de la profondeur */
    font-family: 'Montserrat', sans-serif; /* Typo Montserrat */
    text-align: center; /* Centrer le texte */
    color: #333; /* Couleur du texte */
    position: relative; /* Position relative pour l'alignement */
    left: 50%; /* Décale à 50% de la largeur de l'écran */
    transform: translate(-50%, -50%); /* Ajuste pour centrer horizontalement et verticalement */
    top: 50%; /* Décale à 50% de la hauteur de l'écran */
}

.modal-assistant-content p {
    margin-bottom: 20px; /* Espacement sous le texte */
    font-size: 16px; /* Taille du texte */
    color: #555; /* Couleur du texte */
}

.modal-assistant-content button {
    padding: 10px 20px; /* Espacement interne du bouton */
    border: none; /* Supprimer les bordures */
    border-radius: 5px; /* Coins arrondis pour les boutons */
    cursor: pointer; /* Changer le curseur au survol */
    font-size: 14px; /* Taille de la typographie du bouton */
    margin: 5px; /* Espace entre les boutons */
    transition: background-color 0.3s; /* Transition douce pour l'effet de survol */
}

.modal-assistant-content #cancelBtn {
    background-color: #ccc; /* Bouton Annuler gris */
    color: #333; /* Couleur du texte */
}

.modal-assistant-content #cancelBtn:hover {
    background-color: #b3b3b3; /* Assombrir au survol */
}

.modal-assistant-content #confirmBtn {
    background-color: #007bff; /* Bouton Confirmer bleu */
    color: #fff; /* Couleur du texte */
}

.modal-assistant-content #confirmBtn:hover {
    background-color: #0056b3; /* Assombrir au survol */
}

.modal-assistant-content #closeSuccessModal {
    background-color: #5cb85c; /* Bouton de succès vert */
    color: #fff; /* Couleur du texte */
}

.modal-assistant-content #closeSuccessModal:hover {
    background-color: #4cae4c; /* Assombrir au survol */
}

.action-btn {
    width: 150px; /* Largeur fixe de 150px pour les boutons */
    padding: 8px;
    margin: 5px 0;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    text-align: center;
    background-color: #007bff; /* Couleur de fond bleue */
    color: white; /* Couleur du texte blanche */
    transition: background-color 0.3s; /* Transition douce pour l'effet de survol */
}

.action-btn:hover {
    background-color: #0056b3; /* Couleur de fond plus foncée au survol */
}


/* ************** MY ASSISTANTS SETUP ************* */

/* *********** MY PAISIBLE ASSISTANT************ */

/* My Paisible Assistant | Zone Avatar & Nom */
#assistant-paisible-header {
    text-align: center;
    margin-top: auto; /* Centrer verticalement */
}

/* My Paisible Assistant | Zone Avatar & Nom */
#assistant-paisible-avatar, {
    border-radius: 50%; /* Rend l'image ronde */
    width: 50px; /* Définit la largeur de l'image */
    height: 50px; /* Définit la hauteur de l'image pour maintenir l'aspect circulaire */
    object-fit: cover; /* S'assure que l'image couvre bien l'espace sans être déformée */
    margin-right: 0px; /* Espace entre l'image et le texte à côté */
}

/* My Paisible Assistant | Zone Avatar & Nom */
#assistant-avatar-paisible-empty, {
    border-radius: 50%; /* Rend l'image ronde */
    width: 50px; /* Définit la largeur de l'image */
    height: 50px; /* Définit la hauteur de l'image pour maintenir l'aspect circulaire */
    object-fit: cover; /* S'assure que l'image couvre bien l'espace sans être déformée */
    margin-right: 10px; /* Espace entre l'image et le texte à côté */
}


/* ************** BOUTON DU HEADER*********** */
.user-dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
}

.user-dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.user-btn {
    cursor: pointer;
}

.button-container {
    margin: 10px 0; /* Ajoute un espace entre les boutons */
}

.button-home, .button-set-new-assistant {
    display: block; /* Permet aux liens de s'afficher sur toute la largeur, les uns sous les autres */
    text-align: center; /* Centre le texte dans le bouton */
    margin: 5px 0; /* Ajoute de l'espace autour de chaque bouton pour qu'ils ne soient pas collés */
}


/* ******************  MON HISTORIQUE DE CONVERSATIONS ** */
.my-user-history-section {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 20px;
}

.my-history-container {
    margin-top : 40px;
    width: 80%; /* Accroître la largeur de la colonne */
    max-width: 1200px; /* Définir une largeur maximale */
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
}

.my-history-date-block h3 {
    font-size: 1.0rem;
    margin-top: 20px;
    color: #333;
}

.my-questions-container {
    margin-top: 10px;
    padding-left: 20px;
}

.my-history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background: #ffffff;
    margin-bottom: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.my-history-question a {
    font-size: 0.9rem;
    color: #007BFF;
    text-decoration: none;
    width: 90%;
}

.my-history-question a:hover {
    text-decoration: underline;
}

.my-delete-history-btn {
    background: transparent;
    border: none;
    color: #ff0000;
    font-size: 1.5rem;
    cursor: pointer;
    margin-left: 10px;
}

.my-no-history-msg {
    font-size: 1.2rem;
    color: #666;
    text-align: center;
    margin-top: 50px;
}


/* ****************** HISTORIQUE POSTS ******************* */

/* Assistant | Zone des éléments de l'assistant  */
#history-details {
    width: 100%;
    display: flex;
    flex-direction: column; /* Permet aux éléments enfants de s'empiler verticalement */
    height: 100%; /* Prend toute la hauteur disponible */
}

/* Historique posts | Zone Avatar & Nom */
#history-header {
    text-align: center;
    margin-top: 80px; /* Ajustez selon vos besoins */
    flex-shrink: 0; /* Empêche ce header de rétrécir */
}

/* Assistant | Contenu (sans barre de défilement) */
#history-content {
    flex: 1; /* Prend tout l'espace restant disponible */
    overflow: hidden; /* Supprime toute barre de défilement */
    margin-bottom: 10px; /* Garde une marge sous le contenu */
    padding-bottom: 10px; /* Garantit la visibilité de la dernière ligne */
    height: 100%; /* Assure que l'élément s'étend sur toute sa hauteur disponible */
}

/* Suppression explicite des barres de défilement */
#history-content::-webkit-scrollbar {
    display: none; /* Supprime la barre de défilement pour les navigateurs WebKit (Chrome, Safari) */
}

#history-content {
    scrollbar-width: none; /* Supprime la barre de défilement pour Firefox */
}

/*************************** LOGIN ********************* */

.login-btn {
    width:250px;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-weight: normal;
    margin-right: 10px; /* Séparation avec le bouton Creation de compte */
}

/*login button page*/
.login-button {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    background-color: #007bff;
    color: white;
    font-size: 16px;
    cursor: pointer;
}

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

/* Forgot Password */
#forgotPasswordLink {
    display: block;
    text-align: center;
    color: gray; /* Couleur grise pour le texte */
    text-decoration: none; /* Supprime le soulignement par défaut des liens */
    margin: 10px 0; /* Ajoute un peu d'espace au-dessus et en dessous du lien */
}

#forgotPasswordLink:hover {
    text-decoration: underline; /* Ajoute un soulignement au survol pour indiquer qu'il est cliquable */
}

/* Style for Forgot Password Modal */
.modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%; /* Centre la modal sur tous les écrans par défaut */
    transform: translate(-50%, -50%); /* Centrage précis */
    background-color: #f9f9f9;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    width: 80%;
    max-width: 400px;
    z-index: 10;
    transition: opacity 0.3s ease-out;
}

/* Adaptation pour les écrans larges */
@media (min-width: 768px) { /* Ajustez la valeur 768px selon votre point de rupture pour les écrans larges */
    .modal {
        left: calc(50% + 125px); /* Ajuste la position pour tenir compte de la sidebar uniquement sur les écrans larges */
        transform: translateX(-50%); /* Centrage précis sur l'axe X uniquement */
    }
}

/* Optional: Style for the modal if you want it to animate in from the top */
.modal.show-modal {
    display: none; /* Show the modal */
    animation: slideDown 0.3s ease-out forwards;
}

@keyframes slideDown {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Positionnement et style de la croix de fermeture */
.close {
    position: absolute;
    right: 0; /* Alignée au bord droit */
    top: 0; /* Alignée au bord supérieur */
    padding: 10px; /* Espacement pour faciliter le clic */
    cursor: pointer;
    font-size: 24px; /* Taille de la croix */
}

/* Style supplémentaire pour modal-content pour garantir le positionnement relatif */
.modal-content {
    position: relative;
    padding: 20px; /* Déplacez le padding ici depuis .modal */
}

/* Style pour le message de confirmation ou d'erreur */
.message {
    color: #d9534f; /* rouge pour les erreurs, changez la couleur si nécessaire */
    margin-bottom: 10px; /* espace entre le message et le bouton */
}

/* Style for the Send button in Forgot Password Modal */
.send-btn {
    padding: 8px 16px;
    background-color: #007bff; /* Blue background color */
    color: white; /* White text color */
    border: none; /* No border */
    border-radius: 5px; /* Rounded corners */
    font-weight: normal; /* Normal font weight */
    text-decoration: none; /* No underline */
    cursor: pointer; /* Change cursor to pointer on hover */
    display: inline-block; /* Allows the application of padding and margins */
    margin-top: 10px; /* Space above the button */
    margin-bottom: 10px; /* Ajoutez cette ligne pour l'espace sous le bouton */
    transition: background-color 0.2s; /* Smooth background color transition on hover */
    float: right; /* Positionne le bouton à droite */
}

.send-btn:hover {
    background-color: #0056b3; /* Darker blue on hover */
}

/* Style for input fields within modals */
.modal input[type="text"], .modal input[type="email"] {
    width: 100%; /* Full width */
    padding: 10px; /* Adequate padding */
    margin-top: 8px; /* Margin on top for spacing */
    margin-bottom: 16px; /* Margin on the bottom for spacing */
    border: 1px solid #ccc; /* Subtle border */
    border-radius: 5px; /* Rounded corners */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

/* Focus style for better user experience */
.modal input[type="text"]:focus, .modal input[type="email"]:focus {
    border-color: #007bff; /* Highlight the border when focused */
    outline: none; /* Remove default focus outline */
}

/* Bouton dans la popin Forgot password pour rediriger vers boîte email */
.email-box-btn {
    display: block;
    margin-top: 10px;
    background-color: #007bff;
    color: white;
    text-align: center;
    padding: 10px;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.2s;
}

.email-box-btn:hover {
    background-color: #0056b3;
}

/* CSS */
.welcome-text {
    font-size: 2em;
    text-align: center;
}

/* Cible les écrans de moins de 768px */
@media (max-width: 768px) {
    .break-mobile {
        display: block; /* Force "Paisible !" à aller à la ligne sur mobile */
    }
}


/* ****************** RESET PASSWORD ******************** */
/* Style pour la page de réinitialisation du mot de passe */
.reset-password-container {
    background-color: #FFFFFF; /* Arrière-plan blanc pour la page */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 0vh; /* S'assure que le conteneur prend toute la hauteur de la vue */
    padding: 20px;
}

.reset-password-container form {
    max-width: 400px; /* Largeur maximale du formulaire pour une lecture confortable */
    width: 100%; /* Prend la largeur maximale jusqu'à 400px */
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Léger ombrage pour la profondeur */
    background-color: #f9f9f9; /* Fond légèrement gris pour le formulaire */
}

.reset-password-container h2 {
    text-align: center; /* Titre centré */
    margin-bottom: 20px; /* Espacement sous le titre */
    color: #007bff; /* Couleur bleue pour le titre, similaire aux boutons */
}

.reset-password-container label {
    display: block; /* Assure que le label soit sur sa propre ligne */
    margin: 10px 0 5px; /* Espacement autour du label */
}

.reset-password-container input[type="password"] {
    width: 100%; /* Assure que l'input prend toute la largeur disponible */
    padding: 8px;
    margin-bottom: 20px; /* Espacement entre les inputs */
    border: 1px solid #ccc;
    border-radius: 5px; /* Bords arrondis pour l'input */
}

.reset-password-container button {
    width: 100%; /* Assure que le bouton prend toute la largeur disponible */
    padding: 10px;
    background-color: #007bff; /* Fond bleu pour le bouton */
    color: white; /* Texte blanc */
    border: none;
    border-radius: 5px; /* Bords arrondis pour le bouton */
    cursor: pointer; /* Curseur pointeur */
    font-weight: bold; /* Texte en gras pour le bouton */
}

.reset-password-container button:hover {
    background-color: #0056b3; /* Assombrir le bouton au survol */
}

/* Responsive design pour la page de réinitialisation de mot de passe */
@media (max-width: 768px) {
    .reset-password-container {
        padding: 10px;
        margin-left: 20px; /* Ajuste le formulaire vers la droite en tenant compte de la sidebar sur les écrans larges */
        margin-right: 20px;
    }
}


/********************* MENU DEROULANT ********************* */

/* Séparateur dans le menu déroulant du bouton user */
.dropdown-separator {
    margin: 8px 0; /* Ajustez la marge comme nécessaire */
    border-bottom: 1px solid #ccc; /* Couleur et épaisseur de la ligne */
    height: 0; /* Gardez la hauteur à 0 */
}


/* *************** POPIN SOCIAL SHARE ****************** */
/* Popin Share */
/* --- Overlay de la popin de partage (cachée par défaut) --- */
#publishPopin {
    display: none; /* Caché par défaut */
    position: fixed;
    z-index: 801;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    padding: 20px;
}

/* --- Contenu de la popin de partage --- */
.popin-content {
  position: fixed;
  left: calc(250px + (100vw - 250px) / 2 - 300px); /* 300px = moitié de max-width (600px) */
  top: 50%; /* Centrage vertical sans transform (évite le flou) */
  margin-top: -45vh; /* Ajustement manuel pour simuler un centrage vertical */
  background-color: #ffffff;
  padding: 20px;
  border-radius: 10px;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  text-align: left;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* --- Responsive : Centre la popin sur tablette (entre 768px et 1023px) --- */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .popin-content {
    left: 50%;
    margin-left: -300px; /* 300px = moitié de max-width (600px) */
    top: 50%;
    margin-top: -46vh; /* Ajustement pour éviter le flou */
  }
}

/* --- Responsive : Centre la popin parfaitement sur mobile (inférieurs à 768px) --- */
@media screen and (max-width: 767px) {
    #publishPopin .popin-content {
        top: 50%; /* Centrage vertical */
        left: 50%; /* Centrage horizontal */
        transform: translate(-50%, -50%); /* Translation pour centrage parfait */
        margin-left: 0; /* Réinitialise la marge gauche héritée */
        margin-top: 0;  /* Réinitialise la marge haute héritée */
        width: 90%; /* Légère réduction pour l'espace autour */
        height: auto; /* Hauteur automatique en fonction du contenu */
        max-height: 90%; /* Maximum de 90% de la hauteur de l'écran */
    }
}

/* Pour masquer la barre de défilement native sur WebKit (Chrome, Safari) */
#publishPopin .popin-content::-webkit-scrollbar {
    width: 0;
    height: 0;
}

#publishPopin .popin-content::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 12px; /* Largeur personnalisée de la barre de défilement */
    background-color: transparent;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

#publishPopin .popin-content::-webkit-scrollbar-thumb {
    background-color: #007BFF;
    border-radius: 10px;
    margin-right: 10px; /* Ajoute de l'espace à droite de la barre de défilement */
}

#publishPopin .popin-content::-webkit-scrollbar-track {
    margin-right: 10px; /* Assure un espace pour voir le fond de la popin */
}

/* Pour rétablir la compatibilité avec Firefox */
#publishPopin .popin-content {
    scrollbar-width: thin;
    scrollbar-color: #007BFF transparent;
    padding-right: 12px; /* Assure un espace pour voir le fond de la popin */
}

#publishPopin .popin-content::-webkit-scrollbar {
    width: 12px; /* Largeur personnalisée de la barre de défilement */
}

#publishPopin .popin-content::-webkit-scrollbar-thumb {
    background-color: #007BFF;
    border-radius: 10px; /* Arrondir la barre de défilement */
}

.image-options {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.image-options {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    width: 100%;
}

.image-button {
    width: 48%; /* Ajustement pour correspondre à la largeur des aperçus */
    padding: 10px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    box-sizing: border-box; /* Pour s'assurer que la largeur inclut le padding et la bordure */
    
    display: flex; /* Utilise Flexbox pour centrer le contenu */
    align-items: center; /* Centre verticalement le contenu */
    justify-content: center; /* Centre horizontalement le contenu */
    text-align: center; /* Assure que le texte est centré si jamais il y a du texte multiple */
}

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

.image-preview-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 40px; /* Ajoute de l'espace sous les previews */
}

/* Assurer que les aperçus contiennent bien les éléments enfants positionnés absolument */
.image-preview {
    position: relative; /* Nécessaire pour que la croix soit correctement positionnée */
    width: 48%;
    aspect-ratio: 1 / 1; /* Hauteur égale à la largeur */
    background-color: #f4f4f4;
    border: 1px solid #ccc;
    display: flex;
    align-items: center; /* Centre verticalement le contenu */
    justify-content: center; /* Centre horizontalement le contenu */
    border-radius: 5px;
    font-size: 14px;
    color: #333;
    box-sizing: border-box; /* Pour s'assurer que la largeur inclut la bordure */
    text-align: center; /* Centre le texte horizontalement */
}

/* Image dans l'aperçu */
.image-preview img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* S'assure que l'image est contenue dans le conteneur */
    border-radius: 5px;
    z-index: 1; /* Assure que l'image est derrière la croix */
}

/* Style pour la croix de fermeture */
.close-preview {
    position: absolute;
    top: 5px;
    right: 5px;
    color: gray;
    font-size: 18px;
    cursor: pointer;
    z-index: 10; /* Assure que la croix est au-dessus de l'image */
}

.close-preview:hover {
    color: #ff0000; /* Change la couleur au survol */
}

.social-icons {
    display: flex;
    justify-content: space-between; /* Répartit les icônes avec un espacement uniforme */
    align-items: center;
    width: 100%;
    margin-bottom: 10px;
}

.social-icons img {
    max-width: 40px; /* Fixe une largeur maximale pour les icônes */
    height: auto; /* Conserve les proportions des icônes */
    cursor: pointer;
    object-fit: contain; /* Assure que l'image est contenue dans son conteneur */
    margin: 0 auto; /* Centrer les icônes dans leur espace respectif */
    flex: 1;
}

.social-icons img:first-child {
    margin-left: 0; /* Le premier élément colle à gauche */
    flex: none; /* Ne laisse pas le premier élément s'étendre */
}

.social-icons img:last-child {
    margin-right: 0; /* Le dernier élément colle à droite */
    flex: none; /* Ne laisse pas le dernier élément s'étendre */
}

.social-icons img:hover {
    opacity: 0.8;
}

#facebookIcon {
    opacity: 1;
    filter: none; /* Assure l'état normal */
}

#facebookIcon.selected {
    background-color: #1877F2; /* Couleur de fond bleue Facebook */
    border-radius: 5px; /* Pour un effet arrondi comme dans l'exemple */
    padding: 0px; /* Pour ajouter un peu d'espace autour de l'icône */
}

/* Ajustements pour les petits écrans */
@media screen and (max-width: 767px) {
    #publishPopin textarea {
        width: 100%; /* Utilisation de la largeur complète pour les petits écrans */
        margin-bottom: 20px; /* Espacement sous la zone de texte */
        padding: 10px; /* Espacement interne pour le contenu de la zone de texte */
        border: 1px solid #ccc;
        border-radius: 10px;
        height: 100px; /* Hauteur fixe */
        resize: none; /* Désactive la possibilité de redimensionnement */
        overflow: auto; /* Ajoute un défilement si nécessaire */
        scrollbar-width: thin; /* Pour Firefox */
        scrollbar-color: #007BFF #f9f9f9; /* Couleur pour Firefox */
    }
}

#publishPopin h2 {
    color: #007bff;
    margin-bottom: 20px;
}

/* Style pour la croix de fermeture */
#publishPopin .close {
    position: absolute;
    top: 15px;
    right: 10px;
    cursor: pointer;
    font-size: 24px;
    color: #aaa;
    padding: 10px;  /* Ajoute une zone cliquable plus large autour de la croix */
    z-index: 105; /* Assure que la croix est au-dessus de tout autre contenu dans la popin */
    background: transparent; /* Assure qu'il n'y a pas de fond derrière la croix */
    border: none;
}

#publishPopin .close:hover {
    color: #777; /* Couleur de la croix au survol */
}

/* Conteneur pour les boutons avec ajustement */
.button-container {
    display: flex;
    justify-content: space-between; /* Répartit les boutons aux extrémités */
    width: 100%;
    margin-top: 20px;
    box-sizing: border-box; /* Assure que le padding est inclus dans la largeur totale */
}

/* Style pour le bouton Post de Facebook avec ajustements */
.facebook-post-button {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    background-color: #007bff;
    color: white;
    cursor: pointer;
    margin-right: 5px; /* Positionne le bouton "Post" à 20px du bord droit */
}

/* Style pour le bouton générique .btn avec ajustements */
.btn {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    background-color: #ccc;
    color: #333;
    cursor: pointer;
    margin-left: 5px; /* Positionne le bouton "Cancel" à 20px du bord gauche */
}

.btn:hover, .facebook-post-button:hover {
    opacity: 0.8;
}


/* Popin de connexion pour fonction Stable Diffusion dans popin social */
#stableLoginPopin {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 802;
}

#stableLoginPopin .login-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px;
    border-radius: 10px;
    width: 400px;
    max-width: 90%;
    text-align: center;
}

/* Style spécifique pour les écrans plus larges que 768px */
@media (min-width: 768px) {
    #stableLoginPopin .login-content {
        left: calc(50% + 125px); /* Décale de 250px à gauche */
    }
}

#stableLoginPopin .close {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    font-size: 24px;
    color: #aaa;
}

#stableLoginPopin .close:hover {
    color: #777;
}

.stable-diffusion-popup {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 802;
}

.stable-diffusion-button-container {
    display: flex;
    justify-content: center;
    gap: 20px; /* Espace entre les boutons */
    margin-top: 20px;
}

.stable-diffusion-button-container .btn {
    background-color: #007bff; /* Couleur bleue */
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    font-size: 16px;
    text-align: center;
    display: inline-block;
}

.stable-diffusion-button-container .btn:hover {
    background-color: #0056b3; /* Couleur au survol */
}


/* Popin de connexion à Facebook dans popin social */
#facebookLoginPopin {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 802;
}

#facebookLoginPopin .login-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px;
    border-radius: 10px;
    width: 400px;
    max-width: 90%;
    text-align: center;
}

/* Style spécifique pour les écrans plus larges que 768px */
@media (min-width: 768px) {
    #facebookLoginPopin .login-content {
        left: calc(50% + 125px); /* Décale de 250px à gauche */
    }
}

#facebookLoginPopin .close {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    font-size: 24px;
    color: #aaa;
}

#facebookLoginPopin .close:hover {
    color: #777;
}


/* Popin de connexion à Instagram dans popin social */
#instagramLoginPopin {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 802;
}

#instagramLoginPopin .login-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px;
    border-radius: 10px;
    width: 400px;
    max-width: 90%;
    text-align: center;
}

/* Style spécifique pour les écrans plus larges que 768px */
@media (min-width: 768px) {
    #instagramLoginPopin .login-content {
        left: calc(50% + 125px); /* Décale de 250px à gauche */
    }
}

#instagramLoginPopin .close {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    font-size: 24px;
    color: #aaa;
}

#instagramLoginPopin .close:hover {
    color: #777;
}

/* Instagram Login Button*/
.instagram-login-container {
    position: relative;
    display: inline-block;
    width: 248px;
    text-decoration: none; /* Supprime le soulignement du lien */
    border: none; /* Supprime les bordures du lien */
    outline: none; /* Supprime les bordures au focus */
}

.instagram-login-container:focus,
.instagram-login-container:hover {
    outline: none; /* Supprime les bordures au focus et au survol */
}

.instagram-login-button {
    width: 100%;
    display: block; /* Assure que l'image remplit le conteneur */
}

.instagram-login-text {
    position: absolute;
    top: 50%;
    left: 50px; /* Ajustez cette valeur pour la marge à gauche */
    transform: translateY(-50%);
    color: white; /* Ou une autre couleur qui contraste avec l'image */
    font-size: 14px; /* Ajustez la taille de la police si nécessaire */
    font-weight: normal;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); /* Optionnel: pour améliorer la lisibilité */
    text-align: left; /* Justifie le texte à gauche */
    width: calc(100% - 50px); /* Assure que le texte ne dépasse pas du conteneur */
}


/* Popin de connexion à Twitter dans popin social */
/* Twitter Login Button*/
.twitter-login-container {
    position: relative;
    display: inline-block;
    width: 248px;
    text-decoration: none; /* Supprime le soulignement du lien */
    border: none; /* Supprime les bordures du lien */
    outline: none; /* Supprime les bordures au focus */
}

.twitter-login-container:focus,
.twitter-login-container:hover {
    outline: none; /* Supprime les bordures au focus et au survol */
}

.twitter-login-button {
    width: 100%;
    display: block; /* Assure que l'image remplit le conteneur */
}

.twitter-login-text {
    position: absolute;
    top: 50%;
    left: 50px; /* Ajustez cette valeur pour la marge à gauche */
    transform: translateY(-50%);
    color: white; /* Ou une autre couleur qui contraste avec l'image */
    font-size: 14px; /* Ajustez la taille de la police si nécessaire */
    font-weight: normal;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); /* Optionnel: pour améliorer la lisibilité */
}


/* Popin de connexion à TikTok dans popin social */
#tiktokLoginPopin {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 802;
}

#tiktokLoginPopin .login-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px;
    border-radius: 10px;
    width: 400px;
    max-width: 90%;
    text-align: center;
}

/* Style spécifique pour les écrans plus larges que 768px */
@media (min-width: 768px) {
    #tiktokLoginPopin .login-content {
        left: calc(50% + 125px); /* Décale de 250px à gauche */
    }
}

#tiktokLoginPopin .close {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    font-size: 24px;
    color: #aaa;
}

#tiktokLoginPopin .close:hover {
    color: #777;
}


/* Popin de connexion à X dans popin social */
#xLoginPopin {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 802;
}

#xLoginPopin .login-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px;
    border-radius: 10px;
    width: 400px;
    max-width: 90%;
    text-align: center;
}

/* Style spécifique pour les écrans plus larges que 768px */
@media (min-width: 768px) {
    #xLoginPopin .login-content {
        left: calc(50% + 125px); /* Décale de 250px à gauche */
    }
}

#xLoginPopin .close {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    font-size: 24px;
    color: #aaa;
}

#xLoginPopin .close:hover {
    color: #777;
}


/* Popin de connexion à Whatsapp dans popin social */
#whatsappLoginPopin {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 802;
}

#whatsappLoginPopin .login-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px;
    border-radius: 10px;
    width: 400px;
    max-width: 90%;
    text-align: center;
}

/* Style spécifique pour les écrans plus larges que 768px */
@media (min-width: 768px) {
    #whatsappLoginPopin .login-content {
        left: calc(50% + 125px); /* Décale de 250px à gauche */
    }
}

#whatsappLoginPopin .close {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    font-size: 24px;
    color: #aaa;
}

#whatsappLoginPopin .close:hover {
    color: #777;
}


/* Popin de connexion à Google Business Prolfile dans popin social */
#gbpLoginPopin {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 802;
}

#gbpLoginPopin .login-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px;
    border-radius: 10px;
    width: 400px;
    max-width: 90%;
    text-align: center;
}

/* Style spécifique pour les écrans plus larges que 768px */
@media (min-width: 768px) {
    #gbpLoginPopin .login-content {
        left: calc(50% + 125px); /* Décale de 250px à gauche */
    }
}

#gbpLoginPopin .close {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    font-size: 24px;
    color: #aaa;
}

#gbpLoginPopin .close:hover {
    color: #777;
}


/* Popin de connexion à LinkedIn dans popin social */
#linkedinLoginPopin {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 802;
}

#linkedinLoginPopin .login-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px;
    border-radius: 10px;
    width: 400px;
    max-width: 90%;
    text-align: center;
}

/* Style spécifique pour les écrans plus larges que 768px */
@media (min-width: 768px) {
    #linkedinLoginPopin .login-content {
        left: calc(50% + 125px); /* Décale de 250px à gauche */
    }
}

#linkedinLoginPopin .close {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    font-size: 24px;
    color: #aaa;
}

#linkedinLoginPopin .close:hover {
    color: #777;
}

/* Instagram Login Button*/
.linkedin-login-container {
    position: relative;
    display: inline-block;
    width: 248px;
    text-decoration: none; /* Supprime le soulignement du lien */
    border: none; /* Supprime les bordures du lien */
    outline: none; /* Supprime les bordures au focus */
}

.linkedin-login-container:focus,
.linkedin-login-container:hover {
    outline: none; /* Supprime les bordures au focus et au survol */
}

.linkedin-login-button {
    width: 100%;
    display: block; /* Assure que l'image remplit le conteneur */
}

.linkedin-login-text {
    position: absolute;
    top: 50%;
    left: 50px; /* Ajustez cette valeur pour la marge à gauche */
    transform: translateY(-50%);
    color: white; /* Ou une autre couleur qui contraste avec l'image */
    font-size: 14px; /* Ajustez la taille de la police si nécessaire */
    font-weight: normal;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); /* Optionnel: pour améliorer la lisibilité */
    text-align: left; /* Justifie le texte à gauche */
    width: calc(100% - 50px); /* Assure que le texte ne dépasse pas du conteneur */
}



/* ***************** GDPR CONSENT BANNER **************** */
.gdpr-consent-banner {
    display: none;
    position: fixed; /* Changed from fixed to absolute to position relative to main */
    bottom: 20px; /* Adjusted spacing from the bottom */
    left: 50%; /* Center the banner relative to its parent */
    transform: translateX(-50%) translateX(125px); /* Adjust centering considering the sidebar */
    background-color: #f2f2f2; /* Light grey background */
    color: black;
    padding: 10px 20px; /* Reduced vertical padding */
    border-radius: 10px;
    box-shadow: 0 -2px 4px rgba(0,0,0,0.2);
    box-sizing: border-box;
    z-index: 1000;
    text-align: center; /* Center text and buttons */
    width: calc(100% - 250px - 40px); /* Adjust width considering sidebar and padding */
    max-width: 650px; /* Optional max width for better text display on larger screens */
    font-size: 12px; /* Reduced font size */
}

/* Adaptation du style des paragraphes dans la bannière GDPR pour supprimer l'espace entre les lignes */
.gdpr-consent-banner p {
    margin: 0; /* Supprime les marges par défaut des paragraphes */
    padding: 0; /* Assure qu'il n'y a pas de padding ajouté */
    line-height: 1.2; /* Ajuste l'espacement entre les lignes de texte, si nécessaire */
}

.gdpr-buttons {
    display: flex; /* Use flexbox for button alignment */
    justify-content: center; /* Center buttons */
    gap: 10px; /* Space between buttons */
    margin-top: 10px; /* Space between text and buttons */
}

.gdpr-button {
    padding: 12px 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
    flex: 1; /* Make buttons take up equal width */
}

.gdpr-button.accept {
    background-color: #007bff; /* Blue color */
    color: white;
}

.gdpr-button.reject {
    background-color: #ccc; /* Grey */
    color: white;
}

@media screen and (max-width: 768px) {
    .gdpr-consent-banner {
        left: 50%; /* Center on smaller screens ignoring sidebar */
        transform: translateX(-50%); /* Adjust translation for mobile */
        width: 90%; /* Adjust width for smaller screens */
    }
}

/* Style pour le lien Privacy Policy */
#privacyPolicyLink {
    display: block;
    text-align: center;
    color: gray; /* Couleur grise pour le texte */
    /*text-decoration: none; /* Supprime le soulignement par défaut des liens */
    margin: 5px 0 2px 0; /* Ajoute plus d'espace au-dessus et un peu d'espace en dessous du lien */
    font-size: 0.8em; /* Diminue la taille de la typographie */
}

#privacyPolicyLink:hover {
    text-decoration: underline; /* Ajoute un soulignement au survol pour indiquer qu'il est cliquable */
}


/* ******************* PAGE PRIVACY POLICY *************** */
/* Style de base pour la politique de confidentialité */
.privacy-policy {
    padding: 20px;
    max-width: 1000px;
    margin: auto;
    line-height: 1.6;
}

/* Sur les écrans plus larges que 768px, on prend en compte la sidebar */
@media (min-width: 768px) {
    main {
        margin-left: 250px; /* Ajuste la marge pour la sidebar */
    }
    
    .privacy-policy {
        margin-left: auto;
        margin-right: auto;
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* Assure que le texte est confortable à lire sans s'étendre sur toute la largeur de l'écran sur les très grands écrans */
@media (min-width: 1024px) {
    .privacy-policy {
        margin-left: auto;
        margin-right: auto;
    }
}

/* ******************* PAGE TERMS OF SERVICE *************** */
/* Style de base pour la politique de confidentialité */
.terms-of-service {
    padding: 20px;
    max-width: 1000px;
    margin: auto;
    line-height: 1.6;
}

/* Sur les écrans plus larges que 768px, on prend en compte la sidebar */
@media (min-width: 768px) {
    main {
        margin-left: 250px; /* Ajuste la marge pour la sidebar */
    }
    
    .terms-of-service {
        margin-left: auto;
        margin-right: auto;
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* Assure que le texte est confortable à lire sans s'étendre sur toute la largeur de l'écran sur les très grands écrans */
@media (min-width: 1024px) {
    .terms-of-service {
        margin-left: auto;
        margin-right: auto;
    }
}


/* ******************* PAGE FAQ *************** */
/* Style de base pour la section FAQ */
.faq-section {
    padding: 20px;
    max-width: 1000px;
    margin: auto;
    line-height: 1.6;
}

/* Style de la liste FAQ */
.faq-container {
    margin-top: 30px;
}

.faq-item {
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    background-color: #f9f9f9;
}

.faq-item h2 {
    font-size: 16px;
    color: #007bff;
    margin-bottom: 10px;
}

.faq-item p {
    font-size: 14px;
}

/* Historique des questions de l'utilisateur */
.user-history {
    margin-top: 50px;
    padding: 20px;
    background-color: #eef2f7;
    border-radius: 5px;
    border: 1px solid #ccc;
}

.user-history h2 {
    font-size: 1.6em;
    color: #333;
    margin-bottom: 20px;
}

.user-history ul {
    list-style-type: none;
    padding: 0;
}

.user-history li {
    margin-bottom: 15px;
    padding: 10px;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
}

/* Adaptation pour les écrans plus larges que 768px */
@media (min-width: 768px) {
    main {
        margin-left: 250px; /* Ajuste la marge pour la sidebar */
    }
    
    .faq-section {
        margin-left: auto;
        margin-right: auto;
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* Assure que le texte est confortable à lire sans s'étendre sur toute la largeur de l'écran sur les très grands écrans */
@media (min-width: 1024px) {
    .faq-section {
        margin-left: auto;
        margin-right: auto;
    }
}


/* ***************** FOOTER ***************** */
/* Footer styling */
/* 3) Footer : calé dynamiquement sur la largeur de la sidebar */
footer {
  background-color: #000000;
  color: #ffffff;
  text-align: left;
  padding: 10px 0;
  position: relative;
  width: calc(100% - var(--sidebar-w));
  margin-left: var(--sidebar-w);
  clear: both;
  margin-top: 50px;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

.social-media {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.social-media h3 {
    font-size: 18px;
    margin-bottom: 20px;
}

.social-icons {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
}

.social-icons a img {
    width: 40px;
    height: 40px;
}

.about {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.about h3 {
    font-size: 18px;
    margin-bottom: 0px;
}

.about ul {
    list-style-type: none;
    padding: 0;
}

.about ul li {
    margin-bottom: 10px;
}

.about ul li a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s;
}

.about ul li a:hover {
    color: #007bff;
}

.footer-line {
    width: 50%;
    height: 0.5px;
    background-color: #ccc;
    margin: 20px auto;
}

.footer-copyright {
    text-align: center;
    font-size: 12px;
    color: #ffffff;
    padding-bottom: 0px;
}

/* Media query for mobile screens */
@media (max-width: 768px) {
    footer {
        width: 100%; /* Full width */
        margin-left: 0; /* No left shift */
    }
    
    .footer-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .about, .social-media {
        align-items: center;
        text-align: center;
    }

    .social-icons {
        justify-content: center;
    }
}

/* ***************** STORES ******************* */

/* Conteneur principal du formulaire */
.store-form-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    background-color: white; /* Retirer la couleur de fond gris */
}

/* Réduire l'espacement vertical entre le titre et le paragraphe */
.store-form-container h1 {
    margin-bottom: 10px; /* Réduit l'espacement sous le titre */
}

.store-form-container p {
    margin-top: 5px; /* Réduit l'espacement au-dessus du paragraphe */
}

.store-form-container h2 {
    margin-bottom: 0px; /* Augmentez l'espace entre le titre et le formulaire */
}

.store-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.store-form .full-width {
    grid-column: span 2;
}

.store-form .half-width {
    width: 48%; /* Ajuste la largeur des champs pour aligner Code Postal et Ville */
    display: inline-block;
}

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

.form-group input[type="text"],
.form-group input[type="url"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="submit"],
.form-group input[type="time"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
    font-size: 14px;
}

.form-group input[type="submit"] {
    background-color: #007bff;
    color: white;
    cursor: pointer;
    border: none;
    transition: background-color 0.3s ease;
}

.form-group input[type="submit"]:hover {
    background-color: #0056b3;
}

.day-schedule {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.day-schedule label {
    font-weight: bold;
    margin-top: 10px;
}

.time-slot {
    display: flex;
    align-items: center;
    gap: 10px;
}

.time-label {
    font-weight: normal;
    color: grey;
    width: 100px;
    text-align: right;
}

.day-schedule input[type="time"] {
    flex-grow: 1;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .store-form {
        grid-template-columns: 1fr;
    }

    .time-slot {
        flex-direction: column;
    }

    .time-label {
        width: 100%;
        text-align: left;
    }
}

/* Section .paisible-cta */
.paisible-cta {
    /* Alignée avec le conteneur principal (max-width 900px) */
    /*margin: 40px auto;*/
    padding: 30px;
    background-color: #f0f8ff;
    border-radius: 8px;
    text-align: center;
    max-width: 900px; /* Respecte la largeur du conteneur */
}
.paisible-cta.full-width {
    /* Ne supprime plus la max-width pour conserver l'uniformité */
    max-width: 900px;
}
.paisible-cta {
    position: relative; /* s’assure que le bouton se place par rapport à la section */
}

/* Bouton de fermeture, style plus léger et position réduite */
.paisible-cta .close-btn {
    position: absolute;
    top: 8px;       /* remonte un peu */
    right: 8px;     /* se cale dans le coin */
    background: none;
    border: none;
    font-size: 1rem;      /* plus petit */
    line-height: 1;
    padding: 2px 6px;     /* un peu de zone de clic */
    cursor: pointer;
    color: #888;          /* gris discret */
    border-radius: 4px;   /* léger arrondi */
    transition: color 0.2s ease, background 0.2s ease;
}

.paisible-cta .close-btn:hover {
    color: #007bff;       /* accentue au survol */
    background: rgba(0, 123, 255, 0.1); /* léger fond au hover */
}

.paisible-cta h3 {
    font-size: 1.8rem;
    margin-top:-2px;
    margin-bottom: 10px;
}
.paisible-cta h3 span {
    color: #007bff;
}
.paisible-cta p {
    font-size: 1rem;
    margin-bottom: 20px;
}
.feature-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}
.feature-card {
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}
.feature-card:hover {
    transform: translateY(-5px);
}
.feature-card h4 {
    margin-top: 0;
    font-size: 1.2rem;
}
.feature-card p {
    font-size: 0.9rem;
}
.btn-paisible {
    display: inline-block;
    background-color: #007bff;
    color: white;
    padding: 12px 24px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease;
}
.btn-paisible:hover {
    background-color: #0056b3;
}

/* Style du titre principal de la page magasin */
.store-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: #222;
    border-bottom: 3px solid #007bff;
    padding-bottom: 10px;
    /*margin-bottom: 30px;*/
    text-transform: uppercase;
    margin-top:0px;
}

/* Responsive adjustments pour la nouvelle section */
@media (max-width: 768px) {
    .paisible-cta {
        padding: 20px;
    }
    .feature-cards {
        grid-template-columns: 1fr;
    }
}


/* =============================
   Layout principal : store-info
   ============================= */
.store-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  background-color: #ffffff;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  max-width: 960px;
}

@media (max-width: 768px) {
  .store-info {
    grid-template-columns: 1fr;
    padding: 20px;
  }
}

/* =============================
   Bloc description
   ============================= */
.store-description h3 {
  margin-top: 0;
  font-size: 1.5rem;
  color: #222;
}

.store-description p {
  line-height: 1.7;
  margin-bottom: 20px;
  font-size: 1rem;
  color: #555;
}

/* =============================
   Bloc contact
   ============================= */
.contact-info {
  background-color: #f9f9f9;
  padding: 25px;
  border-radius: 10px;
  border: 1px solid #e5e5e5;
}

.contact-info h4 {
  margin-top: 0;
  font-size: 1.3rem;
  color: #0069d9;
  border-bottom: 2px solid #0069d9;
  padding-bottom: 6px;
  margin-bottom: 20px;
}

.contact-info ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.contact-info li {
  margin-bottom: 15px;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 6px;
}

.contact-info li a {
  color: #0069d9;
  text-decoration: none;
  font-weight: 500;
}

.contact-info li a:hover {
  text-decoration: underline;
}

/* =============================
   Téléphone
   ============================= */
.store-phone {
  font-size: 1rem;
}

.store-phone .btn-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 10px;
  padding: 10px 16px;
  background-color: #007bff;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  border-radius: 6px;
  transition: background-color 0.2s ease, transform 0.1s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
  max-width: 170px;
}

.store-phone .btn-phone:hover {
  background-color: #0056b3;
  transform: translateY(-2px);
}

.store-phone .btn-phone svg {
  flex-shrink: 0;
}

/* =============================
   Site Web
   ============================= */
.store-website {
  font-size: 1rem;
}

.store-website .btn-site {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 10px;
  padding: 10px 16px;
  background-color: #007bff;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  border-radius: 6px;
  transition: background-color 0.2s ease, transform 0.1s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
  max-width: 170px;
}

.store-website .btn-site:hover {
  background-color: #0056b3;
  transform: translateY(-2px);
}

.store-website .btn-site svg {
  flex-shrink: 0;
}

/* =============================
   Réseaux sociaux génériques
   ============================= */
.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 15px;
}

.social-links li {
  background-color: #e9ecef;
  padding: 6px 12px;
  border-radius: 6px;
}

.social-links li a {
  color: #333;
  font-weight: 500;
}

/* =============================
   Icônes réseaux sociaux (icônes images)
   ============================= */
.social-links-info {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;      /* Garde les icônes sur une seule ligne */
  gap: 10px;                /* Réduit l’espace horizontal entre les icônes */
  overflow-x: auto;
  margin-top: 10px;
}

.social-links-info::-webkit-scrollbar {
  display: none;
}

.social-links-info li a {
  display: block;
  width: 40px;             /* Optionnel : léger ajustement de taille */
  height: 40px;
  background-size: contain;
  background-repeat: no-repeat;
  transition: background-image 0.2s ease, transform 0.2s ease;
  flex-shrink: 0;
}

/* Facebook */
.social-links-info a.facebook {
  background-image: url('https://paisible.ai/images/buttons/popin_share/paisible_publish_popin_facebook_share.png');
}
.social-links-info a.facebook:hover {
  background-image: url('https://paisible.ai/images/buttons/popin_share/paisible_publish_popin_facebook_share_over.png');
}

/* Instagram */
.social-links-info a.instagram {
  background-image: url('https://paisible.ai/images/buttons/popin_share/paisible_publish_popin_instagram_share.png');
}
.social-links-info a.instagram:hover {
  background-image: url('https://paisible.ai/images/buttons/popin_share/paisible_publish_popin_instagram_share_over.png');
}

/* X (ex-Twitter) */
.social-links-info a.x {
  background-image: url('https://paisible.ai/images/buttons/popin_share/paisible_publish_popin_x_share.png');
}
.social-links-info a.x:hover {
  background-image: url('https://paisible.ai/images/buttons/popin_share/paisible_publish_popin_x_share_over.png');
}

/* TikTok */
.social-links-info a.tiktok {
  background-image: url('https://paisible.ai/images/buttons/popin_share/paisible_publish_popin_tiktok_share.png');
}
.social-links-info a.tiktok:hover {
  background-image: url('https://paisible.ai/images/buttons/popin_share/paisible_publish_popin_tiktok_share_over.png');
}

/* LinkedIn */
.social-links-info a.linkedin {
  background-image: url('https://paisible.ai/images/buttons/popin_share/paisible_publish_popin_linkedin_share.png');
}
.social-links-info a.linkedin:hover {
  background-image: url('https://paisible.ai/images/buttons/popin_share/paisible_publish_popin_linkedin_share_over.png');
}

/* Pinterest */
.social-links-info a.pinterest {
  background-image: url('https://paisible.ai/images/buttons/popin_share/paisible_publish_popin_pinterest_share.png');
}
.social-links-info a.pinterest:hover {
  background-image: url('https://paisible.ai/images/buttons/popin_share/paisible_publish_popin_pinterest_share_over.png');
}

/* YouTube */
.social-links-info a.youtube {
  background-image: url('https://paisible.ai/images/buttons/popin_share/paisible_publish_popin_youtube_share.png');
}
.social-links-info a.youtube:hover {
  background-image: url('https://paisible.ai/images/buttons/popin_share/paisible_publish_popin_youtube_share_over.png');
}

/* Autre */
.social-links-info a.autre {
  background-image: url('https://paisible.ai/images/buttons/popin_share/paisible_publish_popin_google_plus_share.png');
}
.social-links-info a.autre:hover {
  background-image: url('https://paisible.ai/images/buttons/popin_share/paisible_publish_popin_google_plus_share_over.png');
}


/* =============================
   Correctifs UX supplémentaires
   ============================= */

/* Aligne les libellés et les boutons à gauche sur une grille régulière */
/* Applique le style en grille uniquement aux lignes label + bouton */
.contact-info ul:not(.social-links-info) > li {
  display: grid;
  grid-template-columns: 100px 1fr;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}


/* Libellé (ex: Téléphone :) */
.contact-info li strong {
  font-weight: 600;
  text-align: left; /* optionnel : aligne le label visuellement contre le bouton */
}

/* Titre au-dessus des icônes de réseaux sociaux */
.contact-info .social-title {
  margin-top: 20px;
  font-weight: 600;
  font-size: 1rem;
  color: #333;
  margin-bottom: 10px;
}

/* Bloc détails */
.store-details {
    background-color: #fff;
    padding: 30px;
    margin: 0px auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    max-width: 900px;
}
.details-title {
    font-size: 1.6rem;
    color: #333;
    margin-bottom: 20px;
    border-bottom: 2px solid #007bff;
    padding-bottom: 8px;
}
.details-form .store-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.details-form .form-row {
    display: flex;
    gap: 20px;
}
.schedule-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.day-schedule {
    background: #f8f9fa;
    padding: 10px;
    border-radius: 6px;
    margin-bottom: 12px;
}

/* Révision : styling de l’accordéon native */
.day-schedule details {
    background: #f8f9fa;
    border-radius: 6px;
    margin-bottom: 12px;
    padding: 0; /* on gère le padding dans summary et le contenu */
}
.day-schedule summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    list-style: none;           /* retire le marker par défaut */
    font-weight: bold;
    color: #555;
    cursor: pointer;
    outline-offset: 4px;
    user-select: none;
}
.day-schedule summary::-webkit-details-marker {
    display: none;              /* masque la flèche native */
}
.day-schedule[open] summary {
    background-color: #e9f2ff;
    color: #007bff;
}
.day-schedule summary:hover,
.day-schedule summary:focus-visible {
    background-color: #f0f8ff;
    outline: 2px dashed #007bff;
}

.time-slot {
    display: flex;
    justify-content: space-between;
    margin: 4px 0;
    padding-left: 15px;
}
.full-day {
    justify-content: center;
    color: #888;
    font-style: italic;
}

/* style des boutons de modification si présent */
.edit-btn {
    background: none;
    border: none;
    color: #007bff;
    cursor: pointer;
}
.edit-btn:hover {
    text-decoration: underline;
}

/* responsive pour petits écrans */
@media (max-width: 768px) {
    .details-form .store-form {
        grid-template-columns: 1fr;
    }
}

/* Styles pour la section store-details améliorée */
.card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    margin: 0px;
    max-width: 900px;
}
.card-header {
    padding: 20px 30px;
    border-bottom: 1px solid #e0e0e0;
}
.card-header h2 {
    margin: 0;
    font-size: 1.75rem;
    color: #333;
}
.card-body {
    padding: 30px;
}
.details-form .details-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.details-form .column {
    flex: 1 1 45%;
}
.form-group {
    margin-bottom: 15px;
}
.form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 5px;
}
.form-group input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.readonly {
    display: block;
    padding: 8px 10px;
    background: #f8f9fa;
    border-radius: 4px;
    color: #555;
}
.form-row {
    display: flex;
    gap: 20px;
}
.half-width {
    flex: 1;
}
.social-links {
    margin-bottom: 20px;
}
.social-links ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    padding: 0;
}
.social-links li {
    background: #e9ecef;
    padding: 5px 10px;
    border-radius: 4px;
}
.hours-accordion details {
    background: #f8f9fa;
    border-radius: 4px;
    margin-bottom: 8px;
    padding: 10px;
}
.hours-accordion summary {
    font-weight: 600;
    cursor: pointer;
}
.hours-accordion .time-slot {
    padding-left: 15px;
    margin: 4px 0;
}
.hours-accordion .full-day {
    color: #888;
    font-style: italic;
}
.form-actions {
    margin-top: 20px;
    display: flex;
    gap: 10px;
}
.btn {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.btn-primary {
    background: #007bff;
    color: #fff;
}
.btn-primary:hover {
    background: #0069d9;
}
.btn-danger {
    background: #dc3545;
    color: #fff;
}
.btn-danger:hover {
    background: #c82333;
}

@media (max-width: 768px) {
    .details-form .details-columns {
        flex-direction: column;
    }
}




















/*************************** BLOG ********************* */
/* Blog Page Layout */
.blog-page {
    display: block;
    margin: 20px auto;
    max-width: 100%; /* Utilise la pleine largeur sur mobile */
    padding-left: 10px; /* Ajoute une petite marge à gauche */
    padding-right: 10px; /* Ajoute une petite marge à droite */
}

.featured-articles,
.article-list {
    text-align: left; /* Le texte reste justifié à gauche */
    margin: 0 auto; /* Centre le bloc dans l'espace disponible */
    max-width: 800px; /* Largeur maximale du bloc de contenu pour lisibilité */
}

.blog-post {
    border-bottom: 1px solid #ccc;
    margin-bottom: 20px;
    padding-bottom: 20px;
}

/* Style pour le titre des articles de blog */
.blog-post h2 {
    text-align: left; /* Justification à gauche */
    color: #007BFF; /* Couleur bleu par défaut */
    text-decoration: none; /* Supprime le soulignement */
}

.blog-post h2 a {
    color: #007BFF; /* Couleur bleu par défaut pour le lien */
    text-decoration: none; /* Supprime le soulignement du lien */
}

.blog-post h2 a:hover {
    color: #0056b3; /* Couleur bleu foncé lors du survol */
    text-decoration: none; /* Assure que le lien ne soit pas souligné lors du survol */
}

.justified-text {
    text-align: justify;
    line-height: 1.6; /* Augmente l'interlignage pour plus d'aération */
    margin-bottom: 20px; /* Espace entre les paragraphes */
}

.article-separator {
    border: none;
    border-top: 1px solid #ccc; /* Couleur grise similaire à celle du site */
    width: 30%; /* Ajustez ce pourcentage en fonction de la largeur souhaitée */
    margin: 30px auto; /* Centrer le séparateur avec auto pour les côtés */
}

.article-header {
    display: flex;
    align-items: center;
    margin-bottom: 5px; /* Ajuste l'espace entre le titre et la date */
}

.article-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px; /* Espace entre le logo et le titre */
}

.article-title {
    flex-grow: 1;
    margin: 0;
    font-size: 1.5rem;
}

.article-date {
    display: block;
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 15px; /* Espace entre la date et l'image ou le texte */
}

.blog-post img {
    max-width: 100%;
    height: auto;
    display: block;
    margin-bottom: 10px;
}

.read-more {
    color: #007BFF;
    text-decoration: none;
    display: inline-block;
}

.read-more:hover {
    text-decoration: underline;
}

/* Sidebar - Ajustement du layout sur Desktop */
@media (min-width: 1024px) {
    .blog-page {
        margin-left: 282px; /* Laisse un espace de 282px pour la sidebar sur desktop */
        max-width: calc(100% - 282px); /* Ajuste la largeur du contenu pour occuper le reste de l'écran */
        padding-left: 0;
        padding-right: 0;
    }
    
    .featured-articles,
    .article-list {
        margin-left: auto; /* Centre le contenu dans l'espace restant */
        margin-right: auto;
        max-width: 800px; /* Limite la largeur à 800px pour garder le contenu centré */
    }
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}

.pagination a {
    margin: 0 5px;
    padding: 10px 15px;
    border: 1px solid #ccc;
    text-decoration: none;
}

.pagination a.active {
    background-color: #007BFF;
    color: white;
}

.pagination a:hover {
    background-color: #0056b3;
    color: white;
}


/*************************** ARTICLE BLOG ********************* */
/* Style spécifique à la page d'article */
.article-page {
    max-width: 800px;
    margin: 40px auto;
    padding: 20px;
    background-color: white;
    /*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);*/
    border-radius: 8px;
    transition: margin-left 0.3s ease-in-out; /* Ajout de la transition pour un ajustement fluide */
}

/* Centrage de l'article avec un décalage à droite pour la sidebar */
@media (min-width: 1024px) {
    .article-page {
        margin-left: calc(50% - 282px); /* Recentrage avec prise en compte du décalage sidebar */
    }
}

.blog-post h1 {
    font-size: 2.0rem;
    color: #222;
    margin-bottom: 20px;
    text-align: center; /* Centrer le titre */
}

.blog-post .featured-image {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.blog-post .article-content {
    font-size: 1.1rem;
    color: #333;
    line-height: 1.8;
    margin-bottom: 30px;
    text-align: justify; /* Justifier le texte */
    padding-left: 15px; /* Marges internes gauche */
    padding-right: 15px; /* Marges internes droite */
}

/* Style pour les métadonnées de l'article */
.article-meta {
    font-size: 0.9rem;
    color: #777;
    border-top: 1px solid #eee;
    padding-top: 15px;
    text-align: justify; /* Justifier le texte des métadonnées */
    padding-left: 15px; /* Marges internes gauche */
    padding-right: 15px; /* Marges internes droite */
}

.article-meta p {
    margin: 5px 0;
}

.article-meta strong {
    color: #333;
}

/* Style des liens */
a {
    color: #0066cc;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Responsiveness */
@media (max-width: 1024px) {
    /* Lorsque l'écran est trop petit pour afficher la sidebar, recentrer l'article */
    .article-page {
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 768px) {
    .article-page {
        margin: 20px 0; /* Enlève la marge latérale gauche et droite sur mobile */
        padding: 15px;
        text-align: center; /* Centre tout le contenu sur mobile */
    }

    .blog-post h1 {
        font-size: 1.4rem;
        text-align: center; /* Centrer le titre sur mobile */
    }

    .blog-post .featured-image {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .blog-post .article-content,
    .article-meta {
        padding-left: 10px; /* Marges internes gauche sur mobile */
        padding-right: 10px; /* Marges internes droite sur mobile */
        text-align: justify; /* Justifier le texte sur mobile */
    }
}

/* ********************* MADE IN FRANCE EUROPE **************** */

/********************************************************
  Zone principale : <main> avec la sidebar sur desktop
********************************************************/
.made-in-france-europe {
  font-family: 'Montserrat', sans-serif;
  color: #333;
  background-color: #fff;
  /* Padding vertical global pour aérer la page */
  padding: 80px 0;
  box-sizing: border-box;
}

/* Sur écrans larges, on laisse l’espace de 250px pour la sidebar */
@media (min-width: 1024px) {
  .made-in-france-europe {
    margin-left: 250px; /* Décalage pour la sidebar */
    width: calc(100% - 250px);
  }
}

/********************************************************
  Conteneur .made-container
  (remplace .container, centre le contenu, limite la largeur)
********************************************************/
.made-container {
  max-width: 1000px; /* Ajustez si vous voulez plus large/étroit */
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/********************************************************
  Style du H1
********************************************************/
.made-in-france-europe h1 {
  text-align: center;
  font-size: 2.2rem;   /* 2.2 rem pour éviter un titre trop énorme */
  color: #007BFF;
  margin-bottom: 20px;
  line-height: 1.2;
}

/********************************************************
  Paragraphes d’intro et de conclusion
********************************************************/
.intro-text,
.conclusion-text {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 20px;
  text-align: justify;
}

/********************************************************
  Grille partenaires (Mistral AI & OVH)
********************************************************/
.partner-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Deux colonnes sur desktop */
  gap: 30px;                     /* Espace entre les deux cartes */
  margin: 40px 0;                /* Espace autour de la grille */
}

.partner-card {
  background: #f9f9f9;
  border-radius: 6px;
  padding: 20px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  box-sizing: border-box;
}

.partner-card h2 {
  font-size: 1.4rem;
  color: #007BFF;
  margin-bottom: 15px;
  line-height: 1.3;
}

.partner-card p {
  font-size: 1rem;
  margin-bottom: 15px;
  line-height: 1.6;
  text-align: justify;
}

.partner-card ul {
  list-style: disc inside;
  margin: 0;
  padding: 0;
}

.partner-card li {
  margin-bottom: 10px;
  line-height: 1.5;
}

/********************************************************
  PARTNER CARDS - LOGO
********************************************************/
.partner-logo-wrapper {
  display: flex;
  justify-content: center;     /* centre horizontalement le logo */
  align-items: center;         /* centre verticalement si nécessaire */
  margin-bottom: 15px;         /* espace entre le logo et le H2 */
}

.partner-logo {
  width: 80px;
  height: 80px;
  object-fit: contain;         /* évite la déformation si le ratio n’est pas carré */
  display: block;
}

/* Conteneur centré pour le visuel */
.hero-logo-wrapper {
  text-align: center;     /* Centre horizontalement l’image */
  margin-bottom: 20px;    /* Espace entre l’image et le H1 */
}

/* Style de l’image elle-même */
.hero-logo {
  width: 100px;           /* Ajustez selon la taille souhaitée */
  height: auto;           /* Maintient le ratio de l’image */
  display: inline-block;  /* Permet de centrer en mode "inline" */
}

/********************************************************
  Adaptation aux petits écrans (< 768px)
********************************************************/
@media (max-width: 768px) {
  
  /* On annule le décalage pour la sidebar */
  .made-in-france-europe {
    margin-left: 0;
    width: 100%;
    padding: 20px 0;
  }

  /* On réduit un peu le titre */
  .made-in-france-europe h1 {
    font-size: 1.8rem;
    margin-bottom: 15px;
  }

  /* Logo Drapeau */
  .hero-logo-wrapper {
    margin-top: 50px;
  }
    
  /* On passe la grille en 1 colonne sur mobile */
  .partner-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* Ajuste les polices un peu plus petites */
  .intro-text,
  .conclusion-text {
    font-size: 1rem;
  }
}


/* ********************* PAGE ANALYTICS ****************** */

/* Conteneur principal revisité, inspiré de .subscribe-content */
/* Style de base (pour mobile et écrans réduits) */
main.analytics-main-container {
    display: block;              /* OU display: block; */
    flex-direction: column;     /* Si vous utilisez display: flex, alors flex-direction: column */
    align-items: center;        /* Facultatif : pour centrer le contenu horizontalement */
    margin: 70px auto;
    max-width: 1200px;
    width: 100%;
    padding: 2rem;
    box-sizing: border-box;
    background-color: white;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    border-radius: 10px;
    min-height: calc(100vh - 70px);
}

/* Pour desktop : ajustement du centrage en tenant compte d'une sidebar de 270px à gauche */
@media screen and (min-width: 1024px) {
  main.analytics-main-container {
    margin-top: 70px;
    margin-bottom: 70px;
    margin-left: calc(270px + ((100vw - 1470px) / 2));
    margin-right: calc((100vw - 1470px) / 2);
  }
}

main.analytics-main-container h1 {
    font-size: 1.5rem;
    margin-bottom: 20px;
    text-align: center;
    color: #333;
}

/* Style révisé pour le tableau d'analytics */
.analytics-table {
    width: 100%;
    border-collapse: collapse;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-top: 20px;
}

.analytics-table thead {
    background-color: #007BFF;
    color: #ffffff;
}

.analytics-table th,
.analytics-table td {
    padding: 12px 10px;
    text-align: left;
    border-bottom: 1px solid #e0e0e0;
}

.analytics-table tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

.analytics-table tbody tr:hover {
    background-color: #f1f8ff;
}

/* Responsive : adaptation pour écrans moyens et petits */
@media screen and (max-width: 768px) {
    main.analytics-main-container {
        max-width: 95%;
        padding: 1.5rem;
    }
    .analytics-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

@media (max-width: 480px) {
    main.analytics-main-container {
        max-width: 98%;
        padding: 0;
        box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    }
}

.pages-avatars {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;             /* Autorise le passage à la ligne */
    justify-content: center;     /* Centre les éléments horizontalement */
    gap: 20px;                   /* Espace entre chaque avatar */
    margin-bottom: 20px;         /* Espace sous la ligne d’avatars */
    overflow-x: auto;            /* Optionnel si vous souhaitez un défilement horizontal forcé */
}

/* Chaque bloc avatar + texte */
.pages-avatars > div {
    text-align: center;          /* Centrage du texte dans le bloc */
    min-width: 80px;             /* Largeur mini pour l’avatar + texte */
    margin: 0 auto;
}

/* Style de l’avatar */
.pages-avatars img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    margin: 0 auto;
}



/*************************** NEW AFFICHAGE ********************* */
.message-style {
    padding: 10px;
    margin: 5px;
    background-color: #f4f4f8;
    border-left: 5px solid #5cb85c;
    animation: slide-in 0.5s ease-out;
}

@keyframes slide-in {
    from {
        opacity: 0;
        transform: translateX(-100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}


/********************************************
 * PAGE CREATE-WEBSITE
 ********************************************/

/* Main de la page de création de site */
.creation-main {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 3rem 1rem 4rem;
    background-color: #ffffff;
    box-sizing: border-box;
    /* main a déjà margin-left: 250px dans le style global,
       on garde donc le comportement cohérent avec la sidebar */
}

/* Conteneur principal (carte blanche au centre) */
.creation-container {
    width: 100%;
    max-width: 900px;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    padding: 2rem 2.5rem;
    box-sizing: border-box;
}

/* Header de la page */
.creation-header {
    margin-bottom: 1.5rem;
}

.creation-header h1 {
    font-size: 1.8rem;
    margin: 0 0 0.5rem;
    color: #333333;
}

/* Bloc titre + intro en haut du formulaire create-website */
.creation-form-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.creation-form-title {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0 0 0.3rem;
    color: #333333;
}

/* On garde déjà la règle existante pour .creation-intro et .creation-url */

.creation-intro {
    margin: 0;
    font-size: 0.95rem;
    color: #555555;
    line-height: 1.5;
}

.creation-url {
    margin-top: 0.75rem;
    font-size: 0.9rem;
    color: #007bff;
}

/* Formulaire global */
.creation-form {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

/* Sections du formulaire (cartes internes) */
.creation-section {
    background-color: #f9fafc;
    border: 1px solid #e1e5ee;
    border-radius: 12px;
    padding: 1.5rem 1.75rem;
}

.creation-section h2 {
    margin: 0 0 1rem;
    font-size: 1.2rem;
    color: #333333;
}

/* Lignes de formulaire */
.creation-section .form-row {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
}

.creation-section .form-row:last-child {
    margin-bottom: 0;
}

/* Ligne en mode inline (ex: sous-domaine + suffixe .paisible.ai) */
.creation-section .form-row-inline {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Groupes dans la ligne inline */
.creation-section .form-row-inline .form-group {
    display: flex;
    flex-direction: column;
}

/* Suffixe .paisible.ai collé à l’input */
.creation-section .suffix-domain {
    align-self: flex-start;
    display: flex;
    align-items: center;
    font-size: 0.95rem;
    color: #555555;
}

/* Labels */
.creation-section label {
    font-size: 0.9rem;
    font-weight: 600;
    color: #333333;
    margin-bottom: 0.35rem;
}

/* Inputs & selects & textarea */
.creation-section input[type="text"],
.creation-section input[type="time"],
.creation-section input[type="file"],
.creation-section select,
.creation-section textarea {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    padding: 0.5rem 0.7rem;
    border-radius: 6px;
    border: 1px solid #cccccc;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    background-color: #ffffff;
}

.creation-section textarea {
    resize: vertical;
    min-height: 90px;
}

.creation-section input:focus,
.creation-section select:focus,
.creation-section textarea:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0,123,255,0.15);
}

/* Petits textes d’aide */
.creation-section small {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.8rem;
    color: #777777;
}

/* Logo et hero actuels */
.current-logo img,
.current-hero img {
    border-radius: 10px;
}

/* Alerts (erreurs / succès) */
.alert {
    border-radius: 6px;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    margin-bottom: 1rem;
    box-sizing: border-box;
}

.alert ul {
    margin: 0;
    padding-left: 1.2rem;
}

.alert-error {
    background-color: #ffe6e6;
    border: 1px solid #ffb3b3;
    color: #b30000;
}

.alert-success {
    background-color: #e6f4ff;
    border: 1px solid #b3ddff;
    color: #004b99;
}

/* === Produits / services === */
#products-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.product-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    background-color: #ffffff;
    border-radius: 8px;
    padding: 0.7rem;
    border: 1px solid #e0e0e0;
}

.product-row input[type="text"] {
    flex: 1 1 160px;
}

.product-bookable {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.85rem;
    white-space: nowrap;
}

/* Bouton de suppression d’une ligne produit */
.btn-remove-product {
    border: none;
    background: #ff4d4f;
    color: #ffffff;
    font-size: 1.1rem;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
}

.btn-remove-product:hover {
    background: #d9363e;
}

/* Bouton secondaire déjà défini plus haut (btn-secondary),
   on se contente ici d’ajuster légèrement pour la cohérence. */
.btn-secondary {
    font-size: 0.95rem;
    border-radius: 6px;
}

/* === Planning de réservation === */
.booking-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
}

.booking-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.7rem;
    background-color: #ffffff;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

.booking-row label {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 110px;
    font-weight: 600;
}

.booking-row input[type="time"] {
    max-width: 120px;
}

/* Bouton principal (hérité de .btn-primary) déjà stylé plus haut,
   on veille juste à l’alignement dans cette page. */
.creation-section .btn-primary {
    font-size: 1rem;
    padding: 0.6rem 1.6rem;
}

/* Ligne finale (bouton d’enregistrement) */
.creation-section:last-of-type {
    text-align: right;
    background: transparent;
    border: none;
    padding-top: 0;
}

/* ====== RESPONSIVE ====== */

@media screen and (max-width: 1024px) {
    .creation-container {
        padding: 1.5rem 1.25rem;
        box-shadow: none;
    }
}

@media screen and (max-width: 768px) {
    .creation-main {
        padding: 4.5rem 0.75rem 4.5rem;
    }

    .creation-container {
        padding: 1.25rem 1rem;
        border-radius: 0;
        box-shadow: none;
    }

    .creation-header h1 {
        font-size: 1.4rem;
    }

    .creation-section .form-row-inline {
        flex-direction: column;
    }

    .product-row {
        flex-direction: column;
        align-items: stretch;
    }

    .product-row input[type="text"] {
        flex: 1 1 auto;
        width: 100%;
    }

    .booking-row {
        flex-wrap: wrap;
    }

    .booking-row label {
        min-width: 0;
        width: 100%;
    }

    .booking-row input[type="time"] {
        flex: 1 1 calc(50% - 0.5rem);
        max-width: none;
    }

    .alert {
        font-size: 0.85rem;
    }
}