/* Fonts (moved from inline) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');

/* =====================================================================
   style-homepage.css — Homepage Styles
   ---------------------------------------------------------------------
   Objectifs :
   - Styles desktop inchangés (>= 1025px)
   - Expérience optimisée sur tablette/mobile (<= 1024px) via overrides dédiés en fin de fichier
   - Fichier organisé par grandes zones fonctionnelles + commentaires explicites

   NOTE : Les overrides "Mobile & Tablet UX" (section 99) n’impactent pas le desktop.
   ===================================================================== */

/* 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 */
}

main {
    margin: 0;
    padding: 0;
}

/* 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 */
}

/* ***************** 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: 0px;
    width: 100%;
    height: 52px; /* Assurez-vous que le header ait une hauteur suffisante */
    z-index: 100;
    background-color: transparent; /* Fond transparent par défaut */
    transition: background-color 0.3s; /* Ajoute une transition douce */
}

/* 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 */
    margin: 0 auto;
    position: absolute;
    left: 50%;
    transform: translateX(-43%);
    top: 15px;
}

/* Affiche le logo uniquement si la classe 'logo-visible' est ajoutée */
@media (max-width: 767px) {
    .logo-container.logo-visible {
        opacity: 1; /* Visible sur mobile lorsque la classe est ajoutée */
    }
}

/* Logo visible lors du scroll */
header.scrolled .logo-container {
    opacity: 1; /* Visible lorsque scrollé */
}

.header-logo {
    height: 30px; /* Ajustez la taille du logo */
}

/* 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; /* Push the buttons to the right */
    display: flex;
    align-items: center;
    /*margin-top: 7px;*/
}

/* Header | Boutons "Login" & "Créer un compte" — alignés au système header */
.log-in-btn,
.create-account-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; /* uniformise la hauteur */
  border-radius: clamp(0.1rem, 0.4vw, 0.4rem);
  text-decoration: none;
  white-space: nowrap;
  border: none; /* neutre pour <a> ou <button> */
  font-weight: normal;
}

/* Couleurs conservées + espacements */
.log-in-btn {
  background-color: #007bff;
  color: #fff;
  /*margin-right: clamp(0.3rem, 1vw, 0.9rem);*/
}
.create-account-btn {
  background-color: #d3d3d3;
  color: #000;
  margin-right: clamp(0.2rem, 0.8vw, 0.6rem);
}

/* Hover cohérent */
.log-in-btn:hover { background-color: #0056b3; }
.create-account-btn:hover { background-color: #bdbdbd; color: #000; }

/* === Desktop (zoom 100%) : réduction + hauteur garantie identique === */
@media (min-width: 1025px) {
  .log-in-btn,
  .create-account-btn {
    --btn-pad-y: 0px;
    --btn-pad-x: 8px;
    --btn-font-size: 0.60rem;
    border-radius: 6px;
    min-height: 30px; /* clé pour homogénéité avec les autres boutons */
  }
}


/* === 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-btn::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 | Bouton "Hamburger" */
.hamburger {
    display: none; /* Caché par défaut sur desktop */
    opacity: 0;
    cursor: pointer;
    color: #ffffff; /* Couleur par défaut en blanc */
    font-size: 30px;
    padding: 5px;
    background-color: transparent;
    z-index: 100;
    transition: color 0.3s, opacity 0.3s; /* Transition douce pour la couleur et l'opacité */
}

/* Afficher le hamburger uniquement sur mobile */
@media (max-width: 767px) {
    .hamburger {
        display: block;
        opacity: 1;
    }
}

/* Affiche le hamburger uniquement si la classe 'hamburger-visible' est ajoutée */
@media (max-width: 767px) {
    .hamburger.hamburger-visible {
        display: block; /* Affiche le bouton hamburger */
        opacity: 1; /* Rendre le bouton visible */
        color: #000000; /* Couleur du bouton en noir */
    }
}

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

/* Header | Bouton "Hamburger" Liste déroulante */
.hamburger-menu-container {
    display: none; /* Initialement caché, sera affiché par JS */
    position: absolute;
    top: 60px;
    right: 0;
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    z-index: 999;
}

.hamburger-menu-item {
    display: block;
    padding: 12px 20px;
    color: #333;
    text-decoration: none;
}

.hamburger-menu-item:hover {
    background-color: #0056b3;
    color: white;
}

@media (max-width: 768px) {
    .header-container {
        justify-content: center;
    }

    .logo-container {
        order: 1;
    }

    .hamburger {
        display: block; /* Affiche le bouton hamburger sur petits écrans */
        order: 2;
        margin-left: auto;
    }
    
    .log-in-btn, .create-account-btn, .user-btn, .pricing-btn, .schedule-btn, .analytics-btn, .subscribe-btn, .campaigns-btn  {
        display: none; /* Cache certains éléments sur petits écrans */
    }

    .header-text {
        order: 1;
    }
}

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

/* 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 */
}


/********************* 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 */
}




/* Ajouter une marge à gauche de 250px pour ask-assistant, question-form et disclaimer */
.shift-right-ask-assistant,
.shift-right-bottom-section,
.shift-right-question-form,
.shift-right-disclaimer {
    margin-left: 125px; /* Ajoute une marge de 250px à gauche */
    /*transition: margin-left 0.3s ease-in-out; /* Ajoute une transition douce pour l'effet */
}

/* Ne pas appliquer de décalage sur les petits écrans */
@media (max-width: 768px) {
    .shift-right-ask-assistant,
    .shift-right-bottom-section,
    .shift-right-question-form,
    .shift-right-disclaimer {
        margin-left: 0; /* Pas de marge sur les écrans plus petits */
    }
}


/* ***************** PREMIERE SECTION ***************** */
.full-screen-image {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Alignement en haut */
    overflow: hidden;
    position: relative;
}

/* Home Page | Carrousel */
.carousel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

.carousel-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

.carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(70%); /* Ajoute une superposition blanche semi-transparente */
}

.carousel-item.active {
    opacity: 1;
}

/* Home Page | Zone des éléments de l'assistant */
#ask-assistant {
    position: absolute;
    top: 60px; /* Espace depuis le haut de l'écran */
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 1; /* S'assure que l'assistant est au-dessus de l'image */
    width: 100%; /* S'assurer qu'il prenne tout l'espace disponible */
}

/* Diminuer l'écart avec le top sur mobile */
@media (max-width: 768px) {
    #ask-assistant {
        top: 60px; /* Espace depuis le haut de l'écran */
    }
}

/* Home page | Zone Avatar & Nom Paisible */
#assistant-header-homepage {
    margin-left: 0;
    text-align: center;
    margin-bottom: 0px; /* Ajustez cette valeur selon vos besoins */
}

/* Home page | 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: 0px; /* Espace entre l'image et le texte à côté */
}

/* Home page | Baseline */
#baseline-homepage {
    margin-top: 10px; /* Espace vertical entre Avatar & Nom assistant */
    color: white; /* Couleur du texte en blanc */
    font-size: 1.9em; /* Utilisation d'unités de largeur de viewport pour adapter la taille */
    line-height: 1.2; /* Réduit l'espacement entre les lignes de texte */
    margin-bottom: 5px; /* Réduit l'espace entre ce texte et le texte suivant */
    font-weight: 700; /* Typographie en regular (normal) */
}

/* Diminuer l'écart avec le top sur mobile */
@media (max-width: 768px) {
    .baseline-homepage {
        margin-top: 20px; /* Espace vertical entre Avatar & Nom assistant */
    }
}

/* Home page | Baseline sous-titres */
#baseline-homepage-sub {
    font-size: 0.95em; /* Diminue la taille de la typographie */
    margin-top: 2px; /* Réduit l'espace entre "Votre assistant de communication digitale" et "Rédigez plus simplement, publiez plus rapidement" */
    color: white; /* Couleur du texte en blanc */
    font-weight: 400; /* Typographie en regular (normal) */
}

/* Ajustement de la taille de la typographie pour les écrans mobiles */
@media (max-width: 768px) {
    #baseline-homepage {
        /*font-size: 8.0vw; /* Taille de la typographie augmentée pour les écrans mobiles */
        font-size: 1.5em; /* Taille de la typographie augmentée pour les écrans mobiles */
        margin-left: 5%;  /* Réduction des marges latérales pour augmenter la zone de texte */
        margin-right: 5%; /* Réduction des marges latérales pour augmenter la zone de texte */
    }
    
    #baseline-homepage-sub {
        font-size: 5.0vw; /* Taille de la typographie augmentée pour les écrans mobiles */
        margin-left: 5%;  /* Réduction des marges latérales pour augmenter la zone de texte */
        margin-right: 5%; /* Réduction des marges latérales pour augmenter la zone de texte */
    }
}

/* 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: 16px; /* 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 */
}

/* Classe pour ajuster la position */
.bottom-section-homepage.fixed-bottom {
    position: fixed;
    margin-left:125px;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px 0; /* Ajuste le padding en fonction des besoins */
    background-color: white; /* Ajout d'une couleur de fond pour garantir la visibilité */
    z-index: 100; /* S'assure que la section reste au-dessus des autres éléments */
    /*box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); /* Ajoute une ombre pour plus de contraste */
}

/* Supprimer la marge sur les petits écrans */
@media (max-width: 768px) {
    .bottom-section-homepage.fixed-bottom {
        margin-left: 0; /* Remet la marge à zéro sur les petits écrans */
    }
}

/* Réduire l'espace en bas à 100px sur les écrans mobiles */
@media (max-width: 768px) {
    .bottom-section-homepage {
        bottom: 50px;
    }
}

/* Bouton suggestions de prompt */
.prompt-suggestions {
    display: flex;
    flex-direction: column;
    margin-bottom: 0.2rem;
    width: 75%;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Ajustement du margin-bottom pour mobile */
@media (max-width: 767px) {
    .prompt-suggestions {
        margin-bottom: 0.5rem;
    }
}

/* Rangée de prompts */
.prompt-row {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    transition: all 0.3s ease;
    flex-wrap: nowrap; /* Tous les boutons sur une seule ligne */
}

.prompt-button {
    flex: 1 1 auto;
    background-color: #ffffff;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 20px;
    padding: 0.5rem;
    text-align: center;
    cursor: pointer;
    font-size: 0.7rem;
    transition: background-color 0.2s ease;
    
    flex: 0 0 auto !important;
    min-width: 120px; /* Taille mini pour uniformiser */
    max-width: 220px; /* Taille maxi des boutons */
}

.prompt-button:hover {
    background-color: #eaeaea;
}

/* ============================= */
/* CAROUSEL SUR DESKTOP           */
/* ============================= */
@media (min-width: 769px) {
    /* Le conteneur masque le débordement et réserve un espace pour les flèches */
    .prompt-suggestions {
        position: relative;
        overflow: hidden;
        max-width: 600px;
        padding-left: 3rem;  /* Espace pour la flèche gauche */
        padding-right: 3rem; /* Espace pour la flèche droite */
    }
    
    /* La rangée de boutons défile en horizontal via JS */
    .prompt-row {
        overflow-x: hidden;  /* Masque la barre de défilement */
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Chaque bouton se positionne pour le "snap" */
    .prompt-button {
        scroll-snap-align: start;
    }
    
    /* Flèches de navigation */
    .carousel-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background-color: rgba(255, 255, 255, 0.8);
        border: 1px solid #ccc;
        border-radius: 50%;
        width: 2rem;
        height: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 10;
    }
    
    .carousel-arrow.left {
        left: 0.5rem;
    }
    
    .carousel-arrow.right {
        right: 0.5rem;
    }
    
    /* Ajustements optionnels selon le mode choisi */
    .carousel-4 .prompt-row {
        justify-content: flex-start;
    }
    
    .carousel-2 .prompt-row {
        justify-content: center;
    }
    
    .carousel-2 .prompt-button {
        width: calc(50% - 0.3rem) !important;
    }
}

/* ============================= */
/* CAROUSEL SUR MOBILE           */
/* ============================= */
@media (max-width: 768px) {
    .prompt-suggestions {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        width: 100%;
        overflow: hidden; /* Masque tout débordement hors des flèches */
    }

    .prompt-row {
        display: flex;
        justify-content: flex-start; /* Permet de garder un bon alignement */
        align-items: center;
        gap: 0.5rem;
        overflow: hidden; /* Masque les boutons en dehors des flèches */
        position: relative;
        width: 75%; /* Assure que seuls quelques boutons sont visibles */
        clip-path: inset(0 0 0 0); /* Cache les boutons hors de l’espace entre les flèches */
    }

    /* Positionnement des flèches sur mobile */
    .carousel-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background-color: #ffffff;
        border: 1px solid #ccc;
        border-radius: 50%;
        width: 2rem;
        height: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 10;
    }

    .carousel-arrow.left {
        left: 0;
    }

    .carousel-arrow.right {
        right: 0;
    }
}

/* ============================= */
/* ZONE DE SÉLECTION DES TONALITÉS */
/* ============================= */
.tone-suggestions {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90%;
    max-width: 800px;
    margin: 1rem auto;
    /*background-color: #f9f9f9;*/
    /*border: 1px solid #ccc; */
    border-radius: 20px;
    padding: 1rem;
    position: relative;
    z-index: 20000;
}

.tone-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 1rem;
}

.tone-button {
    background-color: #ffffff;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 20px;
    padding: 0.5rem 1rem;
    text-align: center;
    cursor: pointer;
    font-size: 0.8rem;
    transition: background-color 0.2s ease;
    min-width: 120px;
}

.tone-button:hover {
    background-color: #eaeaea;
}

/* Bouton Retour : uniquement la flèche, positionné à gauche et centré verticalement */
#back-to-prompts {
    position: absolute;
    left: 10px; /* Ajustez la valeur en fonction de l'espacement désiré */
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
    color: #fff;
    padding: 0;
}


/* Home page | Question */
#question-form {
    display: flex;
    justify-content: center; /* Centre le contenu horizontalement */
    align-items: center; /* Centre le contenu verticalement */
    width: 100%; /* Largeur du formulaire */
    max-width: 800px; /* Largeur maximale */
    margin: 0 auto; /* Centre le formulaire horizontalement dans son conteneur */
    position: relative; /* Position relative pour ajuster le décalage */
    /*left: 250px; /* Décale le formulaire de 250px vers la droite */
    transform: translateX(0); /* Aucune transformation horizontale supplémentaire */
}

/* Ajustement pour les petits écrans */
@media screen and (max-width: 1024px) {
    #question-form {
        left: 0; /* Annule le décalage pour les écrans plus petits */
        width: 100%; /* Occupe toute la largeur disponible */
        max-width: 100%; /* Supprime la limite de largeur maximale */
    }
}


.input-group {
    display: flex;
    width: 100%;
    align-items: stretch; /* Aligne les enfants pour qu'ils aient la même hauteur */
}

/* Home Page | Bouton "Ask" */
#ask-button {
    background-color: #007BFF;
    color: #FFF;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    padding: 15px; /* Augmenter la taille du padding */
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s; /* Ajout de la transition pour l'effet de survol */
}


/* Home Page | Bouton "Ask" */
#question-form button
{
    background-color: #007BFF;
    color: #FFF;
    padding: 15px; /* Augmenter la taille du padding */
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s; /* Ajout de la transition pour l'effet de survol */
}

#question-form button:hover,
#ask-button:hover {
    background-color: #0056b3;
}

#ask-button img {
    width: 24px; /* Augmenter la taille de l'icône */
    height: 24px; /* Augmenter la taille de l'icône */
    filter: invert(100%);
}

/* Conteneur spécifique au microphone */
.microphone-container {
    display: inline-flex; /* Maintient l'alignement */
    margin-left: 0; /* Pas d'espacement entre le bouton et le champ */
}

/* Style propre au bouton microphone */
.microphone-button {
    background-color: white; /* Fond blanc spécifique */
    border-top: 1px solid #ccc; /* Bordure uniquement en haut */
    border-bottom: 1px solid #ccc; /* Bordure uniquement en bas */
    border-left: none; /* Supprime bordure gauche */
    border-right: none; /* Supprime bordure droite */
    padding: 8px 10px; /* Espacement interne */
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s, border-color 0.3s;
    border-radius: 0; /* Supprime tout arrondi */
}

/* Suppression des espaces entre les éléments */
.microphone-button,
#ask-button {
    margin: 0; /* Pas de marge supplémentaire */
}

/* Style pour l'icône microphone */
.microphone-button img {
    width: 20px; /* Taille de l'icône */
    height: 20px;
}

/* Effet au survol du bouton microphone */
.microphone-button:hover {
    background-color: #f9f9f9; /* Légère teinte grise au survol */
    border-color: #999; /* Accentuation des bordures au survol */
}

/* État actif (clic) */
.microphone-button:active {
    background-color: #e6e6e6; /* Teinte plus foncée au clic */
}

/* Animation du microphone */
.listening-animation {
    display: flex;
    gap: 5px;
    align-items: center;
    margin-left: 10px;
}

.circle {
    width: 8px;
    height: 8px;
    background-color: #0078ff; /* Bleu similaire à ChatGPT */
    border-radius: 50%;
    animation: pulse 1.5s infinite ease-in-out;
}

.circle:nth-child(2) {
    animation-delay: 0.2s;
}

.circle:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(0.8);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.2);
        opacity: 1;
    }
}

/* Empêche tout style hérité de question-form ou input-group */
#question-form .microphone-button {
    background-color: white !important; /* Forçage du fond blanc */
    border: none !important; /* Suppression des bordures héritées */
    border-top: 1px solid #ccc !important; /* Bordure en haut */
    border-bottom: 1px solid #ccc !important; /* Bordure en bas */
    border-radius: 0 !important; /* Forçage pour supprimer tout arrondi */
}

/* Home Page | Champ question */
#assistant-question {
    flex-grow: 1;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    border-top-right-radius: 0; /* Pas d'arrondi en haut à droite */
    border-bottom-right-radius: 0; /* Pas d'arrondi en bas à droite */
    border: 1px solid #ccc;
    padding: 15px; /* Augmenter la taille du padding */
    font-size: 18px; /* Augmenter la taille de la police */
    border-right: none;
    background-color: #ffffff;

    /* Ajouts pour forcer le passage à la ligne */
    display: block;              /* Permet une hauteur libre et un wrapping correct */
    white-space: normal;         /* Permet le renvoi à la ligne automatique */
    overflow-wrap: break-word;   /* Coupe le mot si trop long */
    word-wrap: break-word;       /* Compatibilité accrue */
}

.question-input {
  display: block;
  width: 100%;
  min-height: 40px;          /* Hauteur minimale par défaut */
  max-height: 80px;          /* Hauteur maximale */
  resize: none;              /* Empêche le redimensionnement manuel */
  overflow-y: auto;         /* Pas de scroll vertical par défaut */
  box-sizing: content-box;   /* Calcule la hauteur en fonction du contenu */
  white-space: pre-wrap;     /* Retour à la ligne automatique */
  word-wrap: break-word;     /* Couper les mots si nécessaire */
  line-height: 1.4;
  font-family: 'Montserrat', sans-serif;
  border: 1px solid #ccc;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  background-color: #ffffff;
  padding: 10px;
  font-size: 18px;
  border-right: none;        /* Supprime la bordure droite pour un aspect "fusionné" */
  flex: 1 1 auto;            /* Laisse le textarea occuper l'espace restant */
}

/* Barre de défilement ultra fine et élégante (Chrome, Edge, Safari) */
.question-input::-webkit-scrollbar {
    width: 4px; /* Ultra fine */
}

.question-input::-webkit-scrollbar-track {
    background: transparent; /* Fond totalement invisible */
}

.question-input::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1); /* Barre très subtile */
    border-radius: 50px; /* Arrondi pour une touche premium */
}

.question-input::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.2); /* Plus visible au survol */
}

/* Supprime les flèches haut/bas (WebKit) */
.question-input::-webkit-scrollbar-button {
  height: 0;
  display: none;
}

/* Retire le contour noir au focus */
.question-input:focus {
  outline: none;
  box-shadow: none;
}

/* Ajustement pour les écrans plus petits */
@media screen and (max-width: 600px) {
    .question-input {
        min-height: 40px;
    }
}

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

/* Home page | Informations utilisateur Facebook */
#facebook-user-info .user-info {
    display: flex;
    justify-content: center; /* Centre le contenu horizontalement */
    align-items: center; /* Assure que tous les éléments sont alignés verticalement */
    color: white;
    flex-wrap: wrap; /* Permet de passer à la ligne si nécessaire */
    gap: 15px; /* Ajoute de l'espace entre les éléments */
}

#facebook-user-info .disclaimer {
    display: flex;
    align-items: center; /* Assure que le texte et l'image sont alignés verticalement */
    gap: 10px; /* Ajoute un espace entre le texte et l'image */
    color: darkgrey;
    font-size: 0.8em;
    white-space: nowrap; /* Empêche le retour à la ligne dans les éléments du disclaimer */
}

#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;*/
}

#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; /* Couleur du texte en blanc */
}

.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%;
}

/* Réorganisation du groupe de pages Facebook sur les petits écrans */
@media screen and (max-width: 768px) {
    #facebook-user-info .user-info {
        flex-wrap: wrap; /* Le groupe entier peut passer à la ligne sur petits écrans */
        justify-content: space-around; /* Aligne les éléments pour une bonne répartition */
    }

    .fb-pages-info {
        display: none; /* Cache l'élément sur mobile */
    }

    #facebook-user-info .fb-user-details,
    .fb-pages-info {
        font-size: 0.8em; /* Réduction de la taille de la typographie sur petits écrans */
    }
}

/* 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 */
}

/* Appliquer les règles uniquement aux écrans mobiles en mode portrait */
@media (max-width: 768px) and (orientation: portrait) {
    .disclaimer {
        font-size: 0.6em; /* Réduit la taille de la typographie sur les écrans mobiles en portrait */
    }
    
    .mobile-break {
        display: block; /* Sur les petits écrans en portrait, le span prend toute la largeur, forçant la mise à la ligne */
    }
}

/* 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;
    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-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 */
}

.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 */
    }
}

/* Home page | 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;
}

/* Home page | Style 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-top: 2px; /* Espace entre ce conteneur et le texte de la question */
    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 */
}

/* Avatar Paisible dans les questions */
.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 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 */
}

/* Décalage uniquement pour le texte de la question de l'utilisateur sous l'avatar */
.user-question-text {
    margin-left: 30px; 
    line-height: 1.6; /* Améliore la lisibilité */
}

/* Zone question/réponse | Affichage de la barre de défilement */
#assistant-response {
    text-align: center;
    max-height: calc(100vh - 380px); /* Hauteur par défaut pour les écrans plus larges */
    overflow-y: auto; /* Active le défilement vertical */
    margin-top: 10px;
    margin-bottom: 10px;
    padding-bottom: 0px;
}

/* Appliquer max-height: calc(100vh - 100px) uniquement sur les écrans mobiles */
@media (max-width: 767px) {
    #assistant-response {
        max-height: calc(100vh - 224px); /* Hauteur réduite pour les écrans mobiles */
    }
}

@media (max-width: 767px) {
    #assistant-response.showing-maquettes {
        max-height: calc(100vh - 450px); /* Nouvelle hauteur quand les deux blocs miniatures sont visibles */
        padding-bottom: 0px;
    }
}


/* 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 */
}

/* Désactivation de la barre de défilement sur mobile 
@media screen and (max-width: 600px) {
    #assistant-response {
        overflow-y: hidden; /* Cache la barre de défilement verticale 
        max-height: none; /* Supprime la contrainte de hauteur maximale 
        height: auto; /* Permet au bloc de s'ajuster à la taille du contenu 
        padding-bottom: 20px; /* Ajout de padding pour un meilleur espacement 
    }
}*/


/* 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 */
}

/* Assistant | Réponse */
.response-block-reconstitute {
    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-reconstitute p {
    margin: 0 0 1em; /* Espacement entre les paragraphes */
    line-height: 1.6; /* Améliore la lisibilité */
}

/* 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-hp {
    position: absolute;
    left: 260px;
    right: 0;
    bottom: 0;
    /*width: calc(100% - 390px);*/
    /*text-align: center;*/
    padding: 10px 0;
    /*background-color: #fff;*/
}

/* 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;
}

/* Règles communes à tous les boutons */
.copy-btn,
.share-email-btn,
.social-share-btn,
.ads-setup-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 250px;               /* largeur identique pour tous */
  padding: 12px 0;            /* padding vertical, centré horizontalement */
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  margin: 10px 0 20px 28px;   /* marge haut droite bas gauche */
  align-self: flex-start;
  transition: background-color 0.2s, transform 0.2s;
}

/* Icônes à l’intérieur des boutons */
.copy-btn img,
.share-email-btn img,
.social-share-btn img,
.ads-setup-btn img {
  width: 30px;
  height: 30px;
  margin-right: 5px;
  filter: brightness(0) invert(1);
}

/* États hover et active */
.copy-btn:hover,
.share-email-btn:hover,
.social-share-btn:hover,
.ads-setup-btn:hover {
  background-color: #0056b3;
}
.copy-btn:active,
.share-email-btn:active,
.social-share-btn:active,
.ads-setup-btn:active {
  transform: scale(0.95);
}


/* 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, .ads-setup-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,
    .ads-setup-btn {
        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é */
    }
}


/* *************** POPIN SOCIAL SHARE ****************** */
/* Popin Share */
/* --- Overlay de la popin de partage (cachée par défaut) --- */


/* Publish Invite Popin */
#publishInvitePopin {
    display: none;
    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;
}

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

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

/* Style du bouton de fermeture */
.close-offers {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    cursor: pointer;
    color: #333;
}

#textTooLongPopin {
    display: none;
    position: fixed;
    z-index: 802; /* Plus élevé que #publishPopin */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    padding: 20px;
}

#textTooLongPopin .popin-content {
    position: fixed;
    left: calc(270px + (100vw - 270px) / 2 - 300px); /* 300px = moitié de max-width (600px) */
    top: 50%;
    transform: translate(-0%, -75%);
    background-color: #ffffff;
    padding: 20px;
    border-radius: 10px;
    width: 90%;
    max-width: 525px;
    max-height: 94vh;
    overflow-y: auto;
    text-align: left;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* La popin-content (la même règle s'applique aux deux) */
#publishPopin .popin-content,
#publishInvitePopin .popin-content {
    position: fixed;
    left: calc(250px + (100vw - 290px) / 2 - 300px); /* 300px = moitié de max-width (600px) */
    top: 50%;
    margin-top: -48vh;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 10px;
    width: 90%;
    max-width: 600px;
    max-height: 94vh;
    overflow-y: auto;
    text-align: left;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Styles pour le contenu textuel de la popin */
.popin-text-content {
    max-width: 600px;
    margin: 0 auto;
}

/* Responsive styles pour mobile */
@media (max-width: 600px) {
    .popin-text-content {
        padding: 0 10px !important; /* Override du padding inline pour mobile */
    }
    .popin-text-content h2 {
        font-size: 24px !important;
        margin-bottom: 15px;
    }
    .popin-text-content p {
        font-size: 14px !important;
        line-height: 1.4;
        margin-bottom: 15px;
    }
    .popin-text-content div[style*="text-align: center"] {
        margin-top: 15px;
    }
    .btn-offers {
        padding: 10px 15px !important;
        font-size: 14px !important;
    }
}
/* --- 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;
    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: 250px;
    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: 250px;
    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: 250px;
    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 */
}










/* *************** POPIN IMAGE ANALYZE ****************** */
#publishPopin-analyse {
    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;
}



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

/* --- Responsive : Centre la popin parfaitement sur mobile (inférieurs à 768px) --- */
@media screen and (max-width: 767px) {
    #publishPopin-analyse .popin-content-analyse {
        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-analyse .popin-content-analyse::-webkit-scrollbar {
    width: 0;
    height: 0;
}

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

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

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

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

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

/* Popin Share */


.image-button-analyse {
    width: 400px; /* 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-analyse:hover {
    background-color: #0056b3;
}

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

/* Assurer que les aperçus contiennent bien les éléments enfants positionnés absolument */
.image-preview-analyse {
    position: relative; /* Nécessaire pour que la croix soit correctement positionnée */
    width: 400px;
    aspect-ratio: 1 / 1; /* Par défaut, ratio 1:1 */
    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;
    text-align: center; /* Centre le texte horizontalement */
    margin-bottom: 10px;  /* Espace fixe sous le preview */
}

.image-preview.loaded {
  aspect-ratio: unset;
}

/* ===============================
   ===============================
   Adaptation pour la Popin ANALYZEIMAGEPOPIN
   (Tous les sélecteurs spécifiques sont préfixés par "analyze")
   ===============================
*/

/* Analyse des icônes de partage dans la popin analyzeImagePopin */
#analyzeFacebookIcon {
    opacity: 1;
    filter: none;
}

#analyzeFacebookIcon.selected {
    background-color: #1877F2;
    border-radius: 5px;
    padding: 0px;
}

@media screen and (max-width: 767px) {
    #analyzePublishPopin textarea {
        width: 100%;
        margin-bottom: 20px;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 10px;
        height: 100px;
        resize: none;
        overflow: auto;
        scrollbar-width: thin;
        scrollbar-color: #007BFF #f9f9f9;
    }
}

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

#analyzePublishPopin .close {
    position: absolute;
    top: 15px;
    right: 10px;
    cursor: pointer;
    font-size: 24px;
    color: #aaa;
    padding: 10px;
    z-index: 105;
    background: transparent;
    border: none;
}

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

/* Les mêmes styles de .button-container, .facebook-post-button et .btn s'appliquent aussi dans analyzeImagePopin */



/* ***************** EXPLICATION – PARTIE 1 ******************/
.bottom-section-homepage {
    position: absolute;
    left: 0;
    bottom: 20px;
    width: 100%;
    text-align: center;
    padding: 20px 0; /* Padding par défaut */
    background-color: transparent;
    z-index: 5;
    color: gray!important;
}

/* Réduire le padding sur les écrans mobiles en mode portrait */
@media (max-width: 768px) and (orientation: portrait) {
    .bottom-section-homepage {
        padding: 20px 0 !important; /* Forcer le padding pour le mode portrait */
    }
}

@media (max-width: 768px) and (orientation: landscape) {
    .bottom-section-homepage {
        padding: 5px 0 !important; /* Forcer le padding pour le mode paysage */
    }
}

.homepage-options {
    display: flex;
    justify-content: space-between; /* Ajoute de l'espace égal entre les blocs */
    gap: 40px; /* Espace augmenté entre les blocs */
    margin-top: 40vh; /* Ajuste l'espace au-dessus des étapes à 2/3 de la hauteur de l'écran */
    color: white !important;
    max-width: 1200px; /* Limite la largeur totale des blocs */
    margin-left: auto; /* Centrer horizontalement */
    margin-right: auto; /* Centrer horizontalement */
}

.option {
    text-align: center;
    color: white !important;
    margin: 0; /* Supprime la marge négative */
    flex: 1 1 400px; /* Augmente la flex-basis pour élargir les blocs */
    max-width: 320px; /* Limite la largeur maximale */
    min-width: 250px; /* Définit une largeur minimale pour garantir des blocs plus larges */
    display: flex;
    flex-direction: column; /* Pour aligner le contenu verticalement */
    justify-content: space-between; /* Espace entre les éléments pour occuper tout l'espace */
    align-items: center; /* Centre les éléments horizontalement */
    padding: 10px; /* Ajoute du padding autour des options pour mieux équilibrer */
    box-sizing: border-box; /* Assure que padding et bordures sont inclus dans la largeur/hauteur */
    font-size: 0.9em;
}

/* Style pour les logos dans des blocs carrés aux bords arrondis */
.step-content {
    background-color: white; /* Fond blanc */
    border-radius: 20px; /* Bords très arrondis */
    padding: 5px; /* Espace interne pour le logo */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombre légère */
    width: 3.2vw; /* Largeur ajustée à la largeur de la vue */
    height: 3.2vw; /* Hauteur ajustée à la largeur de la vue */
    margin: 0 auto; /* Centrage horizontal */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Images dans les blocs */
.step-content img {
    max-width: 90%; /* Taille maximale de l'image adaptée */
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Grille pour les icônes sociales dans l'étape 3 */
.social-icons-explication {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 2px;
    justify-items: center;
    align-items: center;
    width: 60px;
    height: 60px;
    box-sizing: border-box;
}

/* Style des icônes dans la grille */
.social-icons-explication img {
    max-width: 30px;
    width: 100%;
    height: 15px;
    object-fit: contain;
    margin: 0;
}

/* Carousel et autres sections */
.carousel {
    z-index: 1;
}

.homepage-options {
    z-index: 2;
}

.bottom-section-homepage,
.option,
.disclaimer 
.disclaimer hp-disc {
    z-index: 10;
}

/* Adaptation pour les écrans mobiles */
@media (max-width: 768px) {
    .homepage-options {
        flex-direction: row; /* Affiche les blocs côte à côte */
        justify-content: space-between; /* Ajoute de l'espace égal entre les blocs */
        margin-top: 38vh; /* Définit le margin-top à 60% de la hauteur de l'écran */
        gap: 5px; /* Espace réduit entre les blocs pour tenir sur mobile */
        width: 100%; /* Assure que les blocs prennent toute la largeur */
        padding: 0 5px; /* Ajoute du padding sur les côtés pour éviter de coller aux bords */
        box-sizing: border-box; /* Inclut le padding dans la largeur totale */
        z-index: 2;
    }

    .option {
        flex: 1 1 calc(33.33% - 10px); /* Chaque bloc prend environ un tiers de la largeur totale */
        max-width: calc(33.33% - 10px); /* Limite la largeur maximale pour tenir sur l'écran */
        min-width: calc(33.33% - 10px); /* Assure que chaque bloc a la même largeur */
        text-align: center;
        margin: 0; /* Supprime la marge pour mieux adapter la largeur */
    }

    .step-content {
        width: 50px; /* Réduit la largeur pour les écrans mobiles */
        height: 50px; /* Réduit la hauteur pour les écrans mobiles */
        margin: 0 auto; /* Centre horizontalement les blocs */
    }

    .step-content img {
        max-width: 30px; /* Ajuste la taille des images pour les écrans mobiles */
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    .social-icons-explication {
        width: 50px; /* Ajuste la taille de la grille des icônes sociales */
        height: 50px;
    }

    .social-icons-explication img {
        max-width: 15px; /* Ajuste la taille des icônes pour les écrans mobiles */
        height: 15px;
    }

    /* Réduction de la taille de la typographie pour les écrans mobiles */
    .homepage-options p {
        font-size: 0.9em; /* Ajuste la taille de la police pour les paragraphes */
    }

    .homepage-options strong {
        font-size: 0.9em; /* Ajuste la taille de la police pour le texte en gras */
    }

    .bottom-section-homepage {
        bottom: -5px; /* Réduit la marge inférieure */
    }
}


/* ***************** EXPLICATION – PARTIE 2 ******************/
.bottom-section-homepage {
    position: absolute;
    left: 0;
    bottom: 0px;
    width: 100%;
    text-align: center;
    padding: 20px 0; /* Padding par défaut */
    background-color: transparent;
    z-index: 5;
    color: gray!important;
}

/* Réduire le padding sur les écrans mobiles en mode portrait */
@media (max-width: 768px) and (orientation: portrait) {
    .bottom-section-homepage {
        padding: 5px 0 !important; /* Forcer le padding pour le mode portrait */
    }
}

@media (max-width: 768px) and (orientation: landscape) {
    .bottom-section-homepage {
        padding: 5px 0 !important; /* Forcer le padding pour le mode paysage */
    }
}

/* ===================== */
/* SECTION HÉRO          */
/* ===================== */
.hero-section {
    position: relative;
    /* Mettez ici l'URL de votre image de fond EXACTEMENT comme dans la maquette */
    background: url("https://via.placeholder.com/1200x400/ccc/fff?text=Votre+fond") center center no-repeat;
    background-size: cover;
    background-attachment: scroll; /* Ou "fixed" si vous voulez un effet parallaxe */
    /*padding: 60px 20px; /* Ajustez la marge haute/basse selon la maquette */
    min-height: 300px;  /* Hauteur minimale, à adapter si nécessaire */
}

/* Optionnel : overlay sombre pour lisibilité du texte */
.hero-section::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    /*background: rgba(0, 0, 0, 0.5); /* Assombrit légèrement le fond */
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2; /* Au-dessus de l'overlay */
    max-width: 1200px;
    margin: 0 auto;
    text-align: center; /* Centre le titre et les blocs */
}

/* ===================== */
/* TITRE + ICÔNE ÉTOILE  */
/* ===================== */
.hero-title {
  font-size: 0.875rem; /* typo plus petite */
  color: white;        /* ou votre couleur */
  font-weight: 600;    /* selon besoin */
  display: flex;
  align-items: center;
  justify-content: center; /* si centré */
  gap: 0.5rem;              /* espace uniforme */
}

.hero-bullet {
  font-size: 1rem;  /* taille de la puce */
  line-height: 1;
  color: white;     /* même couleur que le texte */
}


.hero-title .star-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 10px; /* Espacement entre l’étoile et le texte */
}


/* ===================== */
/* CONTENEUR DES BLOCS   */
/* ===================== */
.cards-container {
    display: flex;
    flex-direction: column; /* Positionne les blocs l’un sous l’autre */
    gap: 20px;              /* Espace entre les blocs */
    align-items: center;    /* Centre les blocs horizontalement */
}

/* ===================== */
/* STYLE DE CHAQUE BLOC  */
/* ===================== */
.card {
    display: flex;         /* Icône + texte côte à côte */
    align-items: center;
    background: #fff;      /* Fond blanc en état normal */
    border-radius: 10px;   /* Coins arrondis */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Ombre légère */
    padding: 10px;
    max-width: 500px;      /* Largeur max d’un bloc */
    width: 100%;
    text-align: left;      /* Texte aligné à gauche */
    /* Suppression de la transition pour enlever l’animation */
}

.card:hover {
    background: #007BFF; /* Fond bleu lors du survol */
    /* Pas de transform ni de box-shadow modifiés pour supprimer l’animation */
}

/* Icône à gauche dans un carré coloré */
.card-icon {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    flex-shrink: 0; /* Pour éviter que le carré rapetisse si le texte est trop long */
}

/* Bloc initialement bleu pour la 1ère card */
.card-icon.blue {
    background-color: #007BFF; /* Bleu exemple */
}

/* Bloc initialement gris pour la 2e card */
.card-icon.grey {
    background-color: #d3d3d3;
}

.card-icon img {
    max-width: 50px;
    max-height: 50px;
}

/* Au survol, changer le fond de la partie colorée (les deux cards) en blanc */
.card:hover .card-icon {
    background-color: #fff;
}

/* Pour la 1ère card : modifier l’icône lors du survol */
.card:hover .card-icon.blue img {
    /*content: url("https://paisible.ai/images/icons/paisible_ai_icon_redaction_bleu.png");*/
    content: url("https://paisible.ai/images/icons/paisible_ai_explications_option_1_over.png");
}

/* Pour la 2e card : modifier l’icône lors du survol */
.card:hover .card-icon.grey img {
    content: url("https://paisible.ai/images/icons/paisible_ai_icon_appareil_photo_bleu.png");
}

/* Texte dans la carte */
.card-text h3 {
    font-size: 1.0rem;
    color: #000;
    margin-top: 4px;
    margin-bottom: 4px;
}

.card-text p {
    font-size: 0.8rem;
    color: #333;
    line-height: 1.0;
    margin-top: 4px;
    margin-bottom: 4px;
}

/* Au survol de la carte, le texte passe en blanc */
.card:hover .card-text h3,
.card:hover .card-text p {
    color: #fff;
}



/* ===================== */
/* RESPONSIVE            */
/* ===================== */
@media (max-width: 768px) {
    .hero-title {
        font-size: 0.9rem;
        /*margin-top: 190px;*/
    }
    .card {
        max-width: 70%;
        margin-left: auto;
        margin-right: auto;
    }
    .card-icon {
        margin-right: 15px;
    }
    /* Masquer les textes dans les cartes sur mobile */
    .card-text p {
        display: none;
    }
}

/* Cacher plusieurs éléments sur les écrans mobiles en mode paysage et ajuster la position de #ask-assistant */
@media (max-height: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .hero-title
    .homepage-options,
    #baseline-homepage,
    #baseline-homepage-sub {
        display: none; /* Cache les éléments */
    }

    #ask-assistant {
        position: relative; /* Assurez-vous que la position est définie (ou utilisez "absolute" si nécessaire) */
        top: 40px; /* Positionne l'élément à 40px depuis le haut */
    }
}




/* *********** HOMEPAGE - SECTION 021 (INTRO / PROMESSE) ************ */
.one-third-screen.hp021{
  background: #f6f7fb;
  padding: 78px 0;
  margin: 0;
  height: auto;
  min-height: 50vh;
}

.one-third-screen.hp021 .hp021__container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 18px;
  display: grid;

  /* ✅ Colonne droite “réelle” = largeur visuels */
  grid-template-columns: minmax(0, 1fr) minmax(320px, 520px);

  /* ✅ espace maîtrisé */
  gap: 22px;

  align-items: center;
}

/* Colonne texte */
.one-third-screen.hp021 .hp021__copy{
  text-align: left;
}

.one-third-screen.hp021 .hp021__badge{
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,115,230,0.18);
  background: rgba(0,115,230,0.06);
  color: #0b4ea2;
  font-weight: 800;
  font-size: 0.86rem;
  margin-bottom: 12px;
}

.one-third-screen.hp021 .hp021__title{
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  line-height: 1.08;
  margin: 0 0 10px;
  color: #111;
  letter-spacing: -0.02em;
  font-weight: 900;
}

.one-third-screen.hp021 .hp021__lead{
  margin: 0 0 16px;
  color: #4a5668;
  font-size: 1.05rem;
  line-height: 1.55;
  max-width: 620px;
}

/* Points (3 bénéfices ultra lisibles) */
.one-third-screen.hp021 .hp021__points{
  display: grid;
  gap: 10px;
  margin: 14px 0 16px;
  max-width: 640px;
}

.one-third-screen.hp021 .hp021__point{
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 12px;
  align-items: start;
  background: #fff;
  border: 1px solid #e6e9ef;
  border-radius: 14px;
  padding: 12px 12px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.05);
}

.one-third-screen.hp021 .hp021__pointIcon{
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: #f2f7ff;
  border: 1px solid #dbe7ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.one-third-screen.hp021 .hp021__pointIcon i{
  font-size: 1.15rem;
  color: #0073e6;
}

.one-third-screen.hp021 .hp021__pointTitle{
  font-weight: 900;
  color: #0b1b2b;
  margin: 2px 0 2px;
}

.one-third-screen.hp021 .hp021__pointDesc{
  color: #4a5668;
  line-height: 1.45;
  font-size: 0.98rem;
}

/* CTA */
.one-third-screen.hp021 .hp021__cta{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 10px;
}

.one-third-screen.hp021 .hp021__btn{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 46px;
  padding: 0 16px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 900;
  transition: background-color .15s ease, transform .05s ease, border-color .15s ease;
  white-space: nowrap;
}

.one-third-screen.hp021 .hp021__btn:active{
  transform: translateY(1px);
}

.one-third-screen.hp021 .hp021__btnPrimary{
  background: #0073e6;
  color: #fff;
}

.one-third-screen.hp021 .hp021__btnPrimary:hover{
  background: #005bb5;
}

.one-third-screen.hp021 .hp021__btnSecondary{
  background: #fff;
  color: #0073e6;
  border: 1px solid #0073e6;
}

.one-third-screen.hp021 .hp021__btnSecondary:hover{
  background: #f2f7ff;
}

.one-third-screen.hp021 .hp021__micro{
  margin-top: 10px;
  color: #6b7280;
  font-size: 0.92rem;
}

/* Colonne visuels (réduits) */
.one-third-screen.hp021 .hp021__visuals{
  width: 100%;
  max-width: 520px;

  /* ✅ évite le “vide” : on ne pousse plus à droite dans une colonne trop large */
  margin-left: 0;

  /* si tu veux garder l’alignement à droite dans la colonne FIXE : */
  justify-self: end;

  display: grid;
  gap: 14px;
}

.one-third-screen.hp021 .hp021__visual{
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 14px 36px rgba(0,0,0,0.10);
  background: #fff;
}

.one-third-screen.hp021 .hp021__visual img{
  width: 100%;
  height: 240px;             /* ✅ hauteur maîtrisée */
  object-fit: cover;
  display: block;
}

/* Responsive */
@media (max-width: 980px){
  .one-third-screen.hp021 .hp021__container{
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .one-third-screen.hp021 .hp021__visuals{
    max-width: 720px;
    margin: 0 auto;
  }

  .one-third-screen.hp021 .hp021__visual img{
    height: 220px;
  }
}

@media (max-width: 768px){
  .one-third-screen.hp021{
    padding: 54px 0;
  }

  .one-third-screen.hp021 .hp021__btn{
    width: 100%;
    max-width: 360px;
  }

  .one-third-screen.hp021 .hp021__visual img{
    height: 200px;
  }
}






/* *********** HOMEPAGE - BENEFICES (UX conversion) ************ */
/* Scope : évite de casser le reste du site */
.one-third-screen-benefits.benefits-home {
  background: #fff;
  padding: 80px 0;
  margin: 0;
  height: auto;
  min-height: 50vh;

  /* Écrase l'ancien CSS global de .one-third-screen-benefits */
  display: block !important;
  align-items: unset !important;
  justify-content: unset !important;
}

/* Fix anti-conflits : neutralise les styles globaux pouvant impacter .content */
.one-third-screen-benefits.benefits-home .content {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: 100%;
}

/* Container : flow vertical garanti => empêche le “passage au-dessus” */
.one-third-screen-benefits.benefits-home .container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 18px;
  text-align: center;

  position: relative !important;
  transform: none !important;

  display: flex;
  flex-direction: column;
}

/* HERO (IMPORTANT : on force position: static/relative pour rester DANS le flux) */
.one-third-screen-benefits.benefits-home .benefits-hero {
  position: relative !important;
  display: block !important;
  float: none !important;
  clear: both !important;
  width: 100% !important;
  margin: 0 auto 26px !important;
  z-index: 1;
}

.one-third-screen-benefits.benefits-home .benefits-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,115,230,0.18);
  background: rgba(0,115,230,0.06);
  color: #0b4ea2;
  font-weight: 900;
  font-size: 0.92rem;
  margin: 0 0 12px;
}

.one-third-screen-benefits.benefits-home .benefits-title {
  font-size: clamp(1.4rem, 2vw, 2.2rem) !important;
  margin: 0 0 10px !important;
  color: #111 !important;
  letter-spacing: -0.02em;
  font-weight: 900 !important;
  line-height: 1.12 !important;
}

.one-third-screen-benefits.benefits-home .benefits-intro {
  max-width: 900px;
  margin: 0 auto 14px !important;
  color: #666;
  font-size: 1rem;
  line-height: 1.55;
}

/* Réassurance (chips) */
.one-third-screen-benefits.benefits-home .benefits-trust {
  position: relative !important;
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px 12px;
  justify-content: center;
  margin: 10px auto 0 !important;
  clear: both !important;
  z-index: 1;
}

.one-third-screen-benefits.benefits-home .trust-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 999px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.06);
  color: #111;
  font-weight: 800;
  font-size: 0.95rem;
}

.one-third-screen-benefits.benefits-home .trust-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #19b46b;
  box-shadow: 0 0 0 4px rgba(25,180,107,0.14);
}

/* Steps */
.one-third-screen-benefits.benefits-home .benefits-steps {
  position: relative !important;
  display: block !important;
  clear: both !important;
  margin: 0 auto 26px !important;
  z-index: 0;
}

.one-third-screen-benefits.benefits-home .benefits-steps-title {
  margin: 0 0 12px !important;
  font-size: 1.2rem;
  color: #0b1b2b;
  font-weight: 900;
}

.one-third-screen-benefits.benefits-home .steps-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.one-third-screen-benefits.benefits-home .step-card {
  background: #f9fafc;
  border: 1px solid #e6e9ef;
  border-radius: 14px;
  padding: 14px 14px;
  text-align: left;
  box-shadow: 0 10px 26px rgba(0,0,0,0.05);
}

.one-third-screen-benefits.benefits-home .step-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.one-third-screen-benefits.benefits-home .step-badge {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: #19b46b;
  color: #fff;
  font-weight: 900;
  flex: 0 0 30px;
}

.one-third-screen-benefits.benefits-home .step-title {
  font-weight: 900;
  color: #0b1b2b;
}

.one-third-screen-benefits.benefits-home .step-desc {
  color: #4a5668;
  line-height: 1.45;
}

/* Benefits grid */
.one-third-screen-benefits.benefits-home .benefits-grid {
  position: relative !important;
  display: grid !important;
  clear: both !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 0 !important;
}

.one-third-screen-benefits.benefits-home .benefit-card {
  background: #fff;
  border: 1px solid #e6e9ef;
  border-radius: 16px;
  padding: 18px 16px;
  text-align: left;
  box-shadow: 0 12px 30px rgba(0,0,0,0.06);
  transition: transform .15s ease, box-shadow .15s ease;
}

.one-third-screen-benefits.benefits-home .benefit-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 42px rgba(0,0,0,0.08);
}

.one-third-screen-benefits.benefits-home .benefit-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #f2f7ff;
  border: 1px solid #dbe7ff;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
}

.one-third-screen-benefits.benefits-home .benefit-icon i {
  font-size: 1.2rem;
  color: #0073e6;
}

.one-third-screen-benefits.benefits-home .benefit-title {
  margin: 0 0 6px;
  color: #111;
  font-weight: 900;
  font-size: 1.02rem;
}

.one-third-screen-benefits.benefits-home .benefit-desc {
  margin: 0;
  color: #4a5668;
  line-height: 1.5;
  font-size: 0.98rem;
}

/* Upsell */
.one-third-screen-benefits.benefits-home .benefits-upsell {
  margin: 18px auto 0 !important;
  background: #f9fafc;
  border: 1px solid #e6e9ef;
  border-radius: 16px;
  padding: 16px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
  clear: both !important;
}

.one-third-screen-benefits.benefits-home .upsell-title {
  font-weight: 900;
  color: #0b1b2b;
  margin-bottom: 4px;
}

.one-third-screen-benefits.benefits-home .upsell-desc {
  color: #4a5668;
  line-height: 1.45;
}

.one-third-screen-benefits.benefits-home .upsell-link {
  color: #0073e6;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}

.one-third-screen-benefits.benefits-home .upsell-link:hover {
  text-decoration: underline;
}

/* CTA */
.one-third-screen-benefits.benefits-home .benefits-cta {
  margin-top: 18px;
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  clear: both !important;
}

.one-third-screen-benefits.benefits-home .cta-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 46px;
  padding: 0 16px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 900;
  transition: background-color .15s ease, transform .05s ease, border-color .15s ease;
  white-space: nowrap;
}

.one-third-screen-benefits.benefits-home .cta-button:active {
  transform: translateY(1px);
}

.one-third-screen-benefits.benefits-home .cta-primary {
  background: #0073e6;
  color: #fff;
}

.one-third-screen-benefits.benefits-home .cta-primary:hover {
  background: #005bb5;
}

.one-third-screen-benefits.benefits-home .cta-secondary {
  background: #fff;
  color: #0073e6;
  border: 1px solid #0073e6;
}

.one-third-screen-benefits.benefits-home .cta-secondary:hover {
  background: #f2f7ff;
}

/* Responsive */
@media (max-width: 980px) {
  .one-third-screen-benefits.benefits-home .steps-grid {
    grid-template-columns: 1fr;
  }
  .one-third-screen-benefits.benefits-home .benefits-grid {
    grid-template-columns: 1fr;
  }
  .one-third-screen-benefits.benefits-home .benefits-upsell {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 768px) {
  .one-third-screen-benefits.benefits-home {
    padding: 54px 0;
  }
  .one-third-screen-benefits.benefits-home .cta-button {
    width: 100%;
    max-width: 360px;
  }
}










/* ========== Quick Answers (GEO / citations) ========== */
.one-third-screen-price.pricing-home .pricing-quickanswers{
  margin: 18px auto 0;
  max-width: 1200px;
  text-align: left;
  background: #fff;
  border: 1px solid #e6e9ef;
  border-radius: 14px;
  padding: 14px 14px 10px;
}

.one-third-screen-price.pricing-home .quickanswers-title{
  text-align: center;
  margin: 0 0 12px;
  font-size: 1.25rem;
  color: #0b1b2b;
  font-weight: 900;
}

.one-third-screen-price.pricing-home .quickanswers-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.one-third-screen-price.pricing-home .quickanswer-item{
  background: #f9fafc;
  border: 1px solid #e6e9ef;
  border-radius: 14px;
  padding: 12px 12px 10px;
}

.one-third-screen-price.pricing-home .quickanswer-q{
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 900;
  color: #0b1b2b;
  margin: 0 0 6px;
}

.one-third-screen-price.pricing-home .quickanswer-anchor{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #e6e9ef;
  color: #0073e6;
  text-decoration: none;
  font-weight: 900;
  line-height: 1;
}

.one-third-screen-price.pricing-home .quickanswer-anchor:hover{
  background: #f2f7ff;
}

.one-third-screen-price.pricing-home .quickanswer-a{
  margin: 0;
  color: #3d4a5c;
  line-height: 1.55;
  font-size: 0.98rem;
}

/* Responsive */
@media (max-width: 980px){
  .one-third-screen-price.pricing-home .quickanswers-grid{
    grid-template-columns: 1fr;
  }
}



















/* *********** HOMEPAGE - TARIFS (TABLE DETAILLEE + REASSURANCE + FAQ) ************ */
/* Scope : évite de casser le reste du site */
.one-third-screen-price.pricing-home {
  background-color: #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 60px 0;
  margin-top: 0;
  height: auto;
  min-height: 50vh;
}

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

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

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

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

.one-third-screen-price.pricing-home .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;
}

.one-third-screen-price.pricing-home .trust-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #19b46b; /* ✅ vert comme pricing.php */
  display: inline-block;
}

/* ========== Tableau détaillé (même style que pricing.php) ========== */
.one-third-screen-price.pricing-home .plans-table-3-desktop {
  display: block;
}

.one-third-screen-price.pricing-home .table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 14px;
}

.one-third-screen-price.pricing-home .table-scroll:focus {
  outline: 2px solid rgba(0,115,230,0.35);
  outline-offset: 4px;
}

.one-third-screen-price.pricing-home .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;
  min-width: 980px; /* ✅ force le scroll mobile (ne s’écrase pas) */
}

/* En-têtes */
.one-third-screen-price.pricing-home .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;
}

.one-third-screen-price.pricing-home .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;
}

.one-third-screen-price.pricing-home .plans-table-3 tbody td {
  border: 1px solid #e6e9ef;
  padding: 14px;
  text-align: center;
  vertical-align: middle;
  min-width: 170px;
}

/* Colonne Pro */
.one-third-screen-price.pricing-home .highlighted {
  background-color: #f4f9ff;
  border-left: 2px solid #0073e6;
  border-right: 2px solid #0073e6;
}

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

.one-third-screen-price.pricing-home .investment {
  font-size: 0.95rem;
  color: #7b8698;
  text-decoration: line-through;
}

.one-third-screen-price.pricing-home .annual-price {
  font-size: 1.05rem;
  color: #0b1b2b;
  font-weight: 800;
}

.one-third-screen-price.pricing-home .discount {
  font-size: 0.95rem;
  color: #19b46b;
  font-weight: 800;
}

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

/* ✓ */
.one-third-screen-price.pricing-home .tick {
  font-size: 1.15rem;
  font-weight: 900;
  color: #19b46b;
}

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

/* Icône + libellé feature */
.one-third-screen-price.pricing-home .feature-label {
  display: flex;
  align-items: center;
  gap: 10px;
}

.one-third-screen-price.pricing-home .function-icon {
  width: 34px;
  height: 34px;
  object-fit: contain;
  flex: 0 0 34px;
}

/* CTA */
.one-third-screen-price.pricing-home .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;
}

.one-third-screen-price.pricing-home .btn-cta-pricing:hover { background-color: #005bb5; }
.one-third-screen-price.pricing-home .btn-cta-pricing:active { transform: translateY(1px); }

.one-third-screen-price.pricing-home .btn-cta-pricing.btn-outline {
  background: #fff;
  color: #0073e6;
  border: 1px solid #0073e6;
}

.one-third-screen-price.pricing-home .btn-cta-pricing.btn-outline:hover {
  background: #f2f7ff;
}

/* ========== FAQ ========== */
.one-third-screen-price.pricing-home .pricing-faq {
  margin: 26px auto 0;
  text-align: left;
  max-width: 1200px;
}

.one-third-screen-price.pricing-home .pricing-faq h3 {
  text-align: center;
  margin: 0 0 14px;
  font-size: 1.45rem;
  color: #0b1b2b;
  font-weight: 900;
}

.one-third-screen-price.pricing-home .faq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.one-third-screen-price.pricing-home .faq-item {
  border: 1px solid #e6e9ef;
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}

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

.one-third-screen-price.pricing-home .faq-item summary::-webkit-details-marker { display: none; }

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

/* Responsive */
@media (max-width: 980px) {
  .one-third-screen-price.pricing-home .faq-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .one-third-screen-price.pricing-home { padding: 46px 0; }
  .one-third-screen-price.pricing-home p { font-size: 0.98rem; }
  .one-third-screen-price.pricing-home .btn-cta-pricing { width: 100%; max-width: 320px; }
  .one-third-screen-price.pricing-home .function-icon { width: 28px; height: 28px; flex: 0 0 28px; }
  .one-third-screen-price.pricing-home .plans-table-3 { min-width: 920px; }
}
















/* ***************** TROISIEME SECTION ***************** */
.two-third-screen {
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    margin-top: 0;
    margin-bottom: 0px; /* Ajoute une marge en dessous de la section */
}

.two-third-screen .content {
    width: 100%;
    max-width: 1200px;
    text-align: center;
}

.two-third-screen h2 {
    font-size: 24px;
    color: #333;
    margin-bottom: 20px;
}

.search-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.search-container form {
    display: flex;
    margin: 0;
    padding: 0;
}

.search-container input[type="text"] {
    width: 300px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px 0 0 4px;
    border-right: none;
    box-sizing: border-box;
    height: 40px;
    flex-shrink: 1;
}

.search-container button {
    background-color: #007bff;
    border: 1px solid #007bff;
    padding: 10px;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    margin: 0;
    flex-shrink: 0;
}

.search-container button img {
    width: 20px;
    height: 20px;
    filter: brightness(0) invert(1);
}

.categories {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.category {
    flex: 1;
    margin: 10px;
    min-width: 150px;
    text-align: left;
}

.category h3 {
    font-size: 18px;
    color: #333;
    margin-bottom: 10px;
    text-align: center;
}

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

.category ul li {
    font-size: 16px;
    color: #666;
    margin-bottom: 5px;
    text-align: center;
}

.category ul li a {
    color: inherit; /* Utiliser la couleur du texte parent */
    text-decoration: none; /* Supprimer le soulignement */
}

.category ul li a:hover {
    color: inherit; /* Conserver la couleur du texte parent au survol */
    text-decoration: none; /* Supprimer le soulignement au survol */
}


/* ***************** FOOTER ***************** */

footer {
    background-color: #000;
    color: #fff;
    padding: 20px 0;
}

.footer-content {
    display: flex;
    justify-content: space-around;
    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; /* Aligner les éléments à gauche */
    text-align: left; /* Aligner le texte à gauche */
}

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

.social-icons {
    display: flex;
    justify-content: flex-start; /* Aligner les icônes à gauche */
    align-items: center;
    gap: 20px;
}

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

.about {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Aligner les éléments à gauche */
    text-align: left; /* Aligner le texte à gauche */
}

.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: #fff;
    text-decoration: none;
    transition: color 0.3s;
}

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

.footer-line {
    width: 50%;
    height: 0.5px;
    background-color: #ccc; /* Changer la couleur pour gris */
    margin: 20px auto; /* Centrer la ligne horizontalement */
}

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

/* Media query pour les écrans mobiles */
@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .about, .social-media {
        align-items: center; /* Réaligne les éléments au centre sur mobile */
        text-align: center; /* Réaligne le texte au centre sur mobile */
    }

    .social-icons {
        justify-content: center; /* Centrer les icônes sur mobile */
    }
}

.footer .footer-content{
  justify-content: space-between !important;
  gap: 80px !important;
  max-width: 1200px;
}

.footer .social-media{
  flex: 1 1 55% !important;
  max-width: 760px; /* évite que le texte “Assistant IA web…” prenne tout */
}

.footer .footer-tagline{
  max-width: 720px;
  margin: 14px 0 18px;
}

.footer .footer-email{
  display: inline-block;
  margin-top: 18px;
  color: #fff;
  text-decoration: none;
  opacity: 0.9;
}

.footer .footer-email:hover{
  opacity: 1;
  text-decoration: underline;
}

.footer .about{
  flex: 0 0 420px !important;  /* colonne plus large */
  min-width: 360px !important;
}

.footer .about ul li a{
  white-space: nowrap; /* force sur une ligne (desktop) */
}

/* Mobile / tablette : on repasse en colonne */
@media (max-width: 980px){
  .footer .footer-content{
    flex-direction: column;
    gap: 24px !important;
  }
  .footer .about{
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  .footer .about ul li a{
    white-space: normal;
  }
}


/*************************************
 * Bouton "Générer" & "Analyser"
 *************************************/
.analyze-image-button {
  display: inline-block;
  padding: 12px 16px;
  background-color: #007bff; 
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.9rem;
  margin-top: 0px;
  transition: background-color 0.3s;
}

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

/* 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 */
}

h3.description-titre {
  margin-top: 0;
}

/* Facebook Login Button */
.facebook-login-container {
    position: relative;
    display: inline-block;
    width: 250px;
    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é */
}

.bottom-section-hp {
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1;
    padding: 5px 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.main-section {
    display: flex;
    justify-content: center;
    align-items: stretch;
    margin: -20px auto;
    gap: 20px;
    max-width: 1200px;
    flex-wrap: wrap;
    flex-direction: row;
}

.assistant-card {
    flex: 1 1 0%;
    min-width: 300px;
    border-radius: 8px;
    padding: 5px;
    box-sizing: border-box;
    overflow-y: auto;
    max-height: 100%;
    position: block;
}

/* Appliquer uniquement sur mobile */
@media (max-width: 768px) {
    .assistant-card {
        background: rgb(249, 249, 249);
        border: 1px solid rgb(221, 221, 221);        
    }
}

.left-card h2,
.right-card h2 {
    margin-top: 0;
    font-size: 1.2rem;
    color: white; /* Couleur par défaut pour desktop */
    margin-bottom: 10px;
    display: inline-flex;
    align-items: center;
}

/* Couleur blanche uniquement sur mobile */
@media (max-width: 768px) {
    .left-card h2,
    .right-card h2 {
        color: black !important;
    }
}

.right-card h2 {
    margin-bottom: 4px;
}

.star-icon {
    width: 24px;
    height: 24px;
    margin-right: 8px;
}

.close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 1000;
}

.analyze-image-button {
    padding: 12px 20px;
    background: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
}

.image-dropzone {
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    color: darkgrey;
    background: white;
    margin-top: 7px;
    cursor: pointer;
}

.image-dropzone p {
    margin: 0;
}

#back-to-prompts {
    margin-bottom: 10px;
}


.main-section {
    display: flex;
    justify-content: center;
    align-items: stretch;
    margin: 0px auto; /* Valeur par défaut (mobile) */
    gap: 20px;
    max-width: 1200px;
    flex-wrap: wrap;
    flex-direction: row;
}

/* Desktop uniquement : appliquer un margin différent */
@media screen and (min-width: 768px) {
    .main-section {
        margin: 0px auto;
    }
}

.assistant-card {
    flex: 1;
    min-width: 300px;
    border-radius: 8px;
    padding: 5px;
    box-sizing: border-box;
    overflow-y: auto;
    max-height: 100%;
    position: relative;
}

.left-card h2,
.right-card h2 {
    margin-top: 0;
    font-size: 1.2rem;
    color: white;
    margin-bottom: 10px;
    display: inline-flex;
    align-items: center;
}

.right-card h2 {
    margin-bottom: 4px;
}

.star-icon {
    width: 24px;
    height: 24px;
    margin-right: 8px;
}

.close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 1000;
}

.analyze-image-button {
    padding: 12px 20px;
    background: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
}

.image-dropzone {
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    color: darkgrey;
    background: white;
    margin-top: 7px;
    cursor: pointer;
}

.image-dropzone p {
    margin: 0;
}

#back-to-prompts {
    margin-bottom: 10px;
}

@media (max-width: 768px) {
  .assistant-card.left-card {
    padding: 5px !important;
  }
}

.maquette-container {
    display: none;
    flex-direction: column;
    align-items: center;
    margin: 0px auto;
    gap: 20px;
    max-width: 400px;
}

.maquette-icon {
    background-color: #007bff;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.maquette-icon-img {
    width: 24px;
    height: 24px;
}

.maquette-block {
    text-align: center;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 0;
    box-sizing: border-box;
    width: 90%;
    display: flex;
    justify-content: center;
}

.maquette-button {
    display: flex;
    align-items: center;
    gap: 12px;
    background: white;
    border: none;
    border-radius: 12px;
    padding: 12px 16px;
    width: 100%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

.maquette-button-icon {
    background-color: #007bff;
    border-radius: 8px;
    padding: 6px;
    width: 36px;
    height: 36px;
}

.maquette-button-text {
    text-align: left;
    color: #000;
    font-weight: 600;
    font-size: 18px;
    line-height: 1.2;
}

    @media screen and (min-width: 768px) {
        .bottom-section-hp.shifted-right {
            margin-left: 125px;
            /*width: calc(100% - 125px);
            /*transition: margin-left 0.3s ease, width 0.3s ease;*/
        }
        .close-button {
            display: none !important;
        }
    }

    /* === Forcer l'affichage MAQUETTE sur mobile (< 768px) === */
    /* SUR MOBILE : boutons maquette côte à côte */
    @media (max-width: 768px) {
        /* Au chargement initial sur mobile, masquer les blocs complets */
        .main-section .left-card,
        .main-section .right-card {
            display: none;
        }

        .left-card, .right-card {
            position: relative;
        }

        .close-button {
            position: absolute;
            top: 10px;
            right: 10px;
            background: transparent;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            z-index: 1000;
        }

        /* Style pour les blocs minimaux sur mobile */
        #maquette-container {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            flex-wrap: nowrap; /* important : éviter retour à la ligne */
            gap: 0;
            width: 100%;
        }

        #maquette-left,
        #maquette-right {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 40vw; /* largeur fixée à 40% de l'écran */
            min-width: auto !important;
            padding: 15px;
            box-sizing: border-box;
            cursor: pointer;
        }

        #maquette-connexion {
            display: block;
            width: 100%;
            margin-top: 10px;
        }

        /* Ajouter un effet de hover pour indiquer que les blocs sont cliquables */
        #maquette-left:hover,
        #maquette-right:hover {
            background-color: #f0f0f0;
            transition: background-color 0.2s;
        }

        /* Adaptation du bloc gauche sur mobile */
        .left-card {
            width: 100% !important;
            max-height: 90vh;
            overflow-y: auto;
            padding: 15px;
        }

        .left-card form {
            width: 100%;
        }

        /* Adaptation du container principal sur mobile */
        .main-section {
            flex-direction: column !important;
            align-items: center !important;
            max-height: 90vh;
            max-width: 95% !important;
            overflow-y: auto;
            padding: 3px;
        }
    }

    /* Style additionnel pour éviter les chevauchements lors des transitions */
    .assistant-card {
        transition: display 0.3s ease;
    }

/* =====================================================================
   ✅ Styles rapatriés depuis des <style> inline (index.php, header.php, hp-section-01.php)
   ===================================================================== */



/* ===== Source: index.php (ancien <style> inline) ===== */
/* Cacher la sidebar par défaut */
            #sidebar {
                display: none;
            }



/* ===== Source: index.php (ancien <style> inline) ===== */
#loadingOverlay {
            /* caché par défaut */
            display: none;
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: rgba(0,0,0,0.5);
            z-index: 9999;
            /* centrage du spinner quand on passe en flex via JS */
            align-items: center;
            justify-content: center;
          }
          #loadingOverlay .spinner {
            border: 8px solid rgba(255,255,255,0.3);
            border-top: 8px solid #fff;
            border-radius: 50%;
            width: 60px; height: 60px;
            animation: spin 1s linear infinite;
          }
          @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
          }



/* ===== Source: header.php (ancien <style> inline) ===== */
/* Nouveaux styles pour le bloc ajouté à gauche */
    .header-left-container {
        display: flex;
        align-items: center;
        margin-right: 20px;
    }
    .header-flag {
        width: 20px;
        height: auto;
        margin-right: 10px;
    }
    .powered-text {
        font-size: 12px;
        color: #fff; /* Initialement en blanc */
        white-space: nowrap;
        transition: color 0.3s ease, opacity 0.3s ease;
    }
    /* Lorsque le header a la classe scrolled, sur desktop le texte passe en couleur (#333),
       sur mobile le texte disparaît */
    header.scrolled .powered-text {
        color: #333;
    }
    @media (max-width: 768px) {
        header.scrolled .powered-text {
            opacity: 0;
        }
    }
    /* Styles pour les liens à l'intérieur de .powered-text */
    .powered-text a {
        text-decoration: none;
        color: inherit;
    }

    .header-right-container {
        display: flex;
        align-items: center;
        margin-left: auto; /* Pousse le contenu vers la droite */
    }

    .header-assistants-avatars {
        display: flex;
        align-items: center;
        margin-right: 10px; /* Cet espace sera ajusté dynamiquement par JavaScript */
    }

/* Base (responsive) */
.header-assistant-avatar,
.header-new-assistant-avatar {
  --avatar-size: clamp(28px, 3.2vw, 40px);
  --avatar-mr: clamp(6px, 0.8vw, 10px);

  width: var(--avatar-size);
  height: var(--avatar-size);
  margin-right: var(--avatar-mr);
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid #ddd;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.header-assistant-avatar:hover,
.header-new-assistant-avatar:hover {
  border-color: #007BFF;
  transform: scale(1.06);
}

/* Spécifique au “nouvel avatar” — affiche un + et masque l'image existante */
.header-new-assistant-avatar {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #e0e0e0;
  border-radius: 50%;
  padding: 0;

  position: relative;
  color: #007BFF;
  font-weight: 800;
}

/* le signe + centré remplace l’icône image */
.header-new-assistant-avatar::before {
  content: "+";
  font-size: calc(var(--avatar-size) * .68);
  line-height: 1;
}

/* on cache l'image sans la supprimer du DOM */
.new-assistant-icon {
  display: none !important;
}

/* Desktop (zoom 100%) : plus petit et net */
@media (min-width: 1025px) {
  .header-assistant-avatar,
  .header-new-assistant-avatar {
    --avatar-size: 28px;
    --avatar-mr: 6px;
    border-width: 1px;
  }
}

.header-new-assistant-link { text-decoration: none; }
.header-new-assistant-link:hover { text-decoration: none; }

    .user-btn {
        cursor: pointer;
    }

    .dropdown-separator {
        height: 1px;
        background-color: #ddd;
        margin: 8px 0;
    }
    
    /* Media query to hide avatars on mobile */
    @media (max-width: 768px) {
        .header-assistants-avatars {
            display: none; /* Hide the avatars and the "+" on mobile screens */
        }
    }
    
    .language-selector {
      position: relative;
      margin-left: 15px;
      margin-right: 15px;
    }
    .flag-icon {
      width: 24px;
      cursor: pointer;
    }
    .language-dropdown {
      display: none;
      position: absolute;
      right: 0;
      top: 100%;
      background: #fff;
      border: 1px solid #ccc;
      list-style: none;
      margin: 0;
      padding: 15px 0;
      z-index: 100;
    }
    .language-dropdown li {
        padding: 8px 12px;
    }
    .language-selector:hover .language-dropdown {
      display: block;
    }
    .flag-small {
      width: 16px;
      vertical-align: middle;
      margin-right: 8px;
    }
    .language-option {
      display: flex;
      align-items: center;
      padding: 4px 12px;
      text-decoration: none;
      color: #333;
    }
    .language-option:hover {
      background: #f0f0f0;
    }
        
    /* Cacher le sélecteur mobile sur desktop */
    @media (min-width: 769px) {
      .mobile-lang-selector {
        display: none;
      }
    }
    
    /* Positionner le sélecteur mobile à droite du hamburger */
    @media (max-width: 768px) {
      .mobile-lang-selector {
        display: block;
        position: absolute;
        top: 12px;
        right: 60px;
        margin: 0;
        z-index: 200;
        margin-top:10px;
      }

      .header-right-container .language-selector {
        display: none !important;
      }
      .auth-buttons .language-selector {
        display: none;
      }
    }



/* ===== Source: hp-section-01.php (ancien <style> inline) ===== */
:root{
      --hp-maxw: 1100px;
      --hp-fg: #fff;
      --hp-muted: #F3F4F6;
      --hp-white: #fff;
      --hp-shadow: 0 12px 40px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);
      --hp-radius: 24px;
      --hp-pill-bg: #f2f4f7;
      --hp-pill-dot: #12b886;
      --hp-send: #111827;
      --hp-blue: #0066FF;
      --hp-z-top: 4;
      --hp-z-mid: 2147483599;
      --hp-z-bg:  2147483598;
      --hp-z-ult: 2147483647;  /* ⟵ au-dessus de tout */
      --sidebar-w: clamp(180px, 18vw, 260px);
    }

    #hp-section-01, #hp-section-01 * { box-sizing: border-box; }
    #hp-section-01 { font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color: var(--hp-fg); }

    #hp-section-01{
      position: relative;
      z-index: var(--hp-z-top);
      isolation: isolate;
      min-height: 100svh; /* mobile-safe */
      min-height: 100vh;  /* fallback */
      display: grid;
      place-items: center; /* centre horizontal + vertical */
      margin: 0;
    }

    #hp-section-01 .hp-bg{ display: none !important; }

    #hp-section-01 .hp-container{
      position: relative;
      z-index: 1;
      width: min(100%, var(--hp-maxw));

      /* padding équilibré haut/bas pour un centrage visuel cohérent */
      padding: clamp(32px, 5vw, 64px) 20px clamp(32px, 5vw, 64px);

      text-align: center;

      /* centre le conteneur dans la grille de .hp-hero */
      align-self: center;
      justify-self: center;

      /* évite tout décalage vertical résiduel */
      margin-top: 0;

      /* centre verticalement son contenu interne (logo, titres, prompt) */
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    #hp-section-01 .hp-logo{
      width: clamp(52px, 10vw, 80px);
      height: auto;
      display: inline-block;
      margin: 20px auto 20px;
    }

    #hp-section-01 .hp-title{
      margin: 0 0 10px 0;
      font-weight: 800;
      line-height: 1.05;
      font-size: clamp(26px, 4.2vw, 40px);
      letter-spacing: -0.02em;
    }
    #hp-section-01 .hp-title-before{ color: var(--hp-fg); }

    #hp-section-01 .hp-subtitle{
      margin: 8px 0 28px;
      color: var(--hp-muted);
      font-size: clamp(16px, 1.2vw, 16px);
    }
    #hp-section-01 .hp-subtitle br.hp-subtitle-br { display: none; }
    @media (min-width: 1025px){
      #hp-section-01 .hp-subtitle br.hp-subtitle-br { display: inline; }
    }

    /* ===== PROMPT ===== */
    #hp-section-01 .hp-prompt{
      position: relative;
      /*z-index: var(--hp-z-mid);*/
      margin: 0 auto;
      width: min(940px, 92vw);
      background: var(--hp-white);
      border-radius: var(--hp-radius);
      box-shadow: var(--hp-shadow);
      min-height: 140px;
      padding: 16px 16px 16px 16px;
      display: block;
    }
    /* Barre de modes (styles EXACTS du prompt unifié ads) */
    #hp-section-01 .hp-modebar{
      display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:center; margin-bottom:8px;
    }
    #hp-section-01 .hp-modechip{
        display:inline-flex; 
        align-items:center; 
        gap:8px; 
        padding:8px 12px; 
        border-radius:999px;
        border:1px solid #e9eef6; 
        background:#F8FAFD; 
        color:#111827; 
        cursor:pointer;
        font-size:13px; 
        line-height:1;
        transition: transform .06s ease, background .2s ease, color .2s ease, border-color .2s ease;
    }
    #hp-section-01 .hp-modechip:hover{ 
        transform: translateY(-1px); 
    }
    #hp-section-01 .hp-modechip.is-active{ 
        background:#e9f0ff; 
        border-color:#dbe7ff; 
    }
    
    /* 📱 Forcer tous les boutons à la même largeur sur mobile */
    @media (max-width: 768px){
      /* Le conteneur passe en colonne et s’étire à 100% */
      #hp-section-01 .hp-modebar{
        width: 100%;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;         /* étire les enfants à 100% */
        justify-content: flex-start;
        gap: 10px;                    /* garde l’espacement homogène */
      }

      /* Chaque bouton prend 100% de la largeur disponible */
      #hp-section-01 .hp-modechip{
        display: flex;                /* override inline-flex */
        width: 100%;
        justify-content: center;      /* contenu centré */
        text-align: center;
      }

      /* Les icônes ne s’étirent pas, le texte occupe le reste */
      #hp-section-01 .hp-modechip .hp-icons{ 
        flex: 0 0 auto; 
      }
      #hp-section-01 .hp-modechip strong{
        flex: 1 1 auto;
        text-align: center;
        white-space: normal;          /* permet le retour à la ligne des libellés longs */
      }
    }

    /* Icônes EXACTES (images, texte masqué) */
    #hp-section-01 .hp-modechip .hp-icons{ 
        display:inline-flex; 
        align-items:center; 
        gap:6px; }
    
    #hp-section-01 .hp-modechip .hp-i,
    #hp-section-01 .hp-modechip .hp-g{
      display:inline-block; 
        width:18px; 
        height:18px; 
        padding:0; 
        border-radius:9px;
        background:#eef2f7; 
        background-size:contain; 
        background-repeat:no-repeat; 
        background-position:center;
        color:transparent;
        font-size:0; 
        line-height:0; 
        overflow:hidden; 
        vertical-align:middle;
    }
    /* Mappage logos */
    #hp-section-01 .hp-modechip .hp-i-fb{ background-image:url('https://paisible.ai/images/icons/paisible_icon_color_facebook.png'); }
    #hp-section-01 .hp-modechip .hp-i-ig{ background-image:url('https://paisible.ai/images/icons/paisible_icon_color_instagram.png'); }
    #hp-section-01 .hp-modechip .hp-i-in{ background-image:url('https://paisible.ai/images/icons/paisible_icon_color_linkedin.png'); }
    #hp-section-01 .hp-modechip .hp-i-x { background-image:url('https://paisible.ai/images/icons/paisible_icon_color_x.png'); }
    #hp-section-01 .hp-modechip .hp-g{
      background-image:url('https://paisible.ai/images/icons/paisible_icon_color_google.png');
    }
    
    /* Aide contextualisée identique au prompt unifié ads */
    #hp-section-01 .hp-help{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:10px;                /* fix + même rendu que l’ADS unifié */
      font-size:11px;
      color:#4b5563;
      margin:6px 0 12px 0;
      text-align:center;
    }
    #hp-section-01 .hp-help p{ 
        margin:0; 
        text-align:center; 
        font-family: Montserrat;
    }
    #hp-section-01 .hp-help .hp-help-ico{
      flex:0 0 auto; 
        width:22px; 
        height:22px; 
        border-radius:999px; 
        display:grid; 
        place-items:center;
        background:#EEF4FF; 
        color:#1d4ed8; 
        font-size:12px; 
        box-shadow: inset 0 0 0 1px #dbe7ff;
    }

    #hp-section-01 .hp-suggest-row{
      position: relative;
      display: grid;
      grid-template-columns: auto 1fr auto auto;
      align-items: center;
      gap: 10px;
      margin: 4px 0 8px;
    }
    #hp-section-01 .hp-sg-nav{
      width: 32px; height: 32px; border-radius: 999px;
      border: 1px solid #e7ecf4; background:#f9fbfd; color:#111827; cursor: pointer;
    }
    #hp-section-01 .hp-sg-track{ display:flex; align-items:center; gap:10px; overflow:hidden; }
    #hp-section-01 .hp-sg-chip{
      max-width: 100%;
      padding: 8px 12px;
      border: 1px dashed #cfd8e3;
      background: #ffffff;
      border-radius: 999px;
      color:#0f172a;
      font-size: 12px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      cursor: pointer;
    }
    #hp-section-01 .hp-sg-play{
      width: 32px; height: 32px; border-radius: 8px;
      border: 1px solid #e7ecf4; background:#eaf2ff; color:#0b3b9c; cursor: pointer; font-weight:700;
    }

    /* Champ */
    #hp-section-01 .hp-prompt input,
    #hp-section-01 .hp-prompt textarea{
    display:block; 
    width:94%; 
    border:0; 
    outline:none; 
    background:transparent;
    font-family:Montserrat;
    font-size: clamp(14px, 1.6vw, 20px);
    line-height:1.5;
    padding: 8px 0;
    padding-right: 72px;   /* ← écart demandé pour éviter le chevauchement avec le bouton */
}

    #hp-section-01 .hp-input{
      min-height: 84px;
      height: 84px;
      resize: vertical;
    }
    #hp-section-01 .hp-prompt input::placeholder,
    #hp-section-01 .hp-prompt textarea::placeholder{ color:#9aa3af; }

    /* Bouton envoyer : centrage parfait */
    #hp-section-01 .hp-send{
      position: absolute; right: 18px; bottom: 16px;
      z-index: var(--hp-z-top);

      display: grid;
      place-items: center;
      place-content: center;

      width: 44px; height: 44px;
      border-radius: 999px;
      background: var(--hp-send); color:#fff; border:0; cursor:pointer;
      transition: transform .06s ease, filter .2s ease, box-shadow .2s ease;
      box-shadow: 0 8px 24px rgba(0,0,0,.18);

      padding: 0; line-height: 0; box-sizing: border-box;
    }
    #hp-section-01 .hp-send > *{ grid-area: 1 / 1; }
    #hp-section-01 .hp-send:hover{ transform: translateY(-1px); filter: brightness(1.1); }
    #hp-section-01 .hp-send svg{
      width: 20px; height: 20px;
      display: block;
      transform: scaleX(-1);
      transition: transform .06s ease;
    }
    #hp-section-01 .hp-send:hover svg{ transform: scaleX(-1); }

    /* 🆕 — État “collapsé” du prompt (Hero) */
    @media (max-width: 768px){
      #hp-section-01 #unifiedPrompt.is-collapsed{
        position: fixed;
        left: 50%;
        bottom: max(12px, env(safe-area-inset-bottom));
        transform: translateX(-50%);
        width: auto;
        max-width: calc(100vw - 32px);
        min-height: 0;
        padding: 0;
        background: transparent;
        box-shadow: none;
        border-radius: 999px;
        z-index: var(--hp-z-top);
      }
      /* cache tout le contenu interne du form en mode collapsé */
      #hp-section-01 #unifiedPrompt.is-collapsed > *{
        display: none !important;
      }
      /* Fab (bouton flottant) adjacent au form */
      #hp-section-01 #unifiedPrompt.is-collapsed + .hp-fab{
        display: inline-flex;
      }
      /* Style du bouton flottant */
      #hp-section-01 .hp-fab{
        display: none;
        position: fixed;
        left: 50%;
        bottom: max(12px, env(safe-area-inset-bottom));
        transform: translateX(-50%);
        z-index: var(--hp-z-top);
        align-items: center;
        gap: 8px;
        height: 10%;
        padding: 0 16px;
        border-radius: 999px;
        /*background: var(--hp-send);*/
        background: #007bff;
        color:#fff;
        border: 0;
        font-weight: 700;
        box-shadow: 0 12px 28px rgba(0,0,0,.2);
        cursor: pointer;
        margin-bottom: 70px;
        width: 80%;
        font-size: 19px;
      }
      #hp-section-01 .hp-fab .hp-fab-icon{
          width: 15%; 
          height: 47%; 
          display:block;
      }
      /* Très petits écrans : icône seule 
      @media (max-width: 360px){
        #hp-section-01 .hp-fab span{ display:none; }
      }*/
    }

    /* 🚫 Cacher par défaut (desktop/tablette/print) */
    #hpMinifyPrompt.hp-minify{ 
        display:none !important; 
        visibility:hidden; 
    }
    @media print{ 
        #hpMinifyPrompt.hp-minify{
            display:none !important; 
        } 
    }

    /* 📱 Mobile uniquement */
    @media (max-width: 768px){
      /* Le form sert de conteneur de positionnement */
      #hp-section-01 #unifiedPrompt{ position: relative; overflow: visible; }

      /* ✅ Afficher le bouton UNIQUEMENT si le form n'est pas réduit */
      #hp-section-01 #unifiedPrompt:not(.is-collapsed) > #hpMinifyPrompt.hp-minify{
        display: inline-flex !important; visibility: visible !important; opacity: 1;
        position: absolute; top: 8px; right: 8px;
        width: 16px; height: 16px;
        align-items: center; justify-content: center;
        border: 0; border-radius: 999px;
        background: rgba(0,0,0,.08);
        color: var(--hp-text, #111);
        box-shadow: 0 1px 3px rgba(0,0,0,.08);
        cursor: pointer;
        z-index: 2147483647; /* au-dessus de tout */
      }
      #hp-section-01 #hpMinifyPrompt svg{ width: 18px; height: 18px; display:block; }

      /* Grabber mobile */
      #hp-section-01 .hp-grabber{
        position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
        width: 42px; height: 6px; border-radius: 999px; background: rgba(0,0,0,.15);
        z-index: 2147483647; touch-action: none;
      }

      /* En mode réduit : tout cacher (cohérent avec FAB) */
      #hp-section-01 #unifiedPrompt.is-collapsed > #hpMinifyPrompt.hp-minify,
      #hp-section-01 #unifiedPrompt.is-collapsed .hp-grabber{ display: none !important; }
        
      /* Ne montrer le FAB que si réduit */
      #hp-section-01 #unifiedPrompt:not(.is-collapsed) + .hp-fab,
      .hp-scope #unifiedPrompt:not(.is-collapsed) + .hp-fab{ display: none; }
    }

    /* 🆕 Mobile : cacher le header du hero quand le prompt est OUVERT */
    @media (max-width: 768px){
      /* Un état est posé sur la section quand on ouvre le prompt (cf. JS) */
      /*#hp-section-01.hp-hero--prompt-open .hp-logo-link,*/
      #hp-section-01.hp-hero--prompt-open #hp-hero-title,
      #hp-section-01.hp-hero--prompt-open .hp-title-before,
      #hp-section-01.hp-hero--prompt-open .hp-subtitle{
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
      }
    }

    /* État désactivé/chargement (on laisse ces règles APRÈS, elles ne cassent rien) */
    .hp-send[disabled],
    .hp-send.is-loading{
      opacity:.6;
      cursor:not-allowed;
      pointer-events:none;
      transform:none !important;
      filter:none !important;
      box-shadow:none !important;
    }

    /* Icône & spinner */
    .hp-send .hp-icon{ display:block; }
    .hp-send .hp-spinner{ 
      display:none;
      width:18px; height:18px;
      border:2px solid #fff;
      border-right-color: transparent;
      border-radius:50%;
      animation: hpSpin .9s linear infinite;
    }
    .hp-send.is-loading .hp-icon{ display:none; }
    .hp-send.is-loading .hp-spinner{ display:block; }

    @keyframes hpSpin{
      to{ transform: rotate(360deg); }
    }
    /* La rangée dédiée aux tons reste dans le DOM mais non affichée en-dessous */
    #hp-section-01 .hp-tone-row{ display: none !important; }

    @media (min-width: 1025px){
      #hp-section-01 { --hp-radius: 36px; }
    #hp-section-01{
      min-height: 100svh;
      min-height: 100vh;
      margin: 0;
    }
      #hp-section-01 .hp-container{ 
        padding:32px 20px 32px;
        margin-top:0;      /* évite de “casser” le centrage global */
      }
      #hp-section-01 .hp-logo{ width:48px; margin-bottom:16px; }
      #hp-section-01 .hp-title{ 
          font-size:30px; 
          line-height:1.05; 
          letter-spacing:-.02em; 
          margin:0 0 8px 0; 
        }
      #hp-section-01 .hp-subtitle{ 
          font-size:14px; 
          margin:8px 0 24px; 
        }
      #hp-section-01 .hp-prompt{ 
          width:min(940px,92vw); 
          min-height:140px; 
          /*padding:16px 72px 16px 16px; */
          border-radius: var(--hp-radius); 
        }
      #hp-section-01 .hp-prompt input, #hp-section-01 .hp-prompt textarea{ 
          font-size:14px; 
          line-height:1.4; 
          padding-right:72px; 
          font-family: Montserrat;
          padding: 12px 14px;
          border-radius: 14px;
          border: 1px solid #e5e9f2;
        }
      #hp-section-01 .hp-send{ width:44px; height:44px; right:16px; bottom:16px; }
      #hp-section-01 .hp-modebar{ gap:8px; }
      #hp-section-01 .hp-modechip{ 
          padding:6px 10px; 
          font-size:11px; 
        }
      #hp-section-01 .hp-modechip .hp-i{ 
          font-size:11px; 
          padding:2px 6px; 
        }
      #hp-section-01 .hp-suggest-row{ gap:10px; }
      #hp-section-01 .hp-sg-chip{ 
          padding:8px 12px; 
          font-size:12px; 
          max-width:100%; 
        }
      #hp-section-01 .hp-sg-nav, #hp-section-01 .hp-sg-play{ width:32px; height:32px; border-radius:8px; }
    }

    /* ===== POPIN AUTH (inchangé) ===== */
    .hp-auth-popin{ position:fixed; inset:0; z-index:2147483646; display:none; align-items:center; justify-content:center; padding:18px; background:rgba(15,23,42,.45); backdrop-filter:blur(4px); }
    .hp-auth-popin.is-open{ display:flex; }
    .hp-auth-modal{ position:relative; width:min(420px,92vw); background:#fff; color:#0f172a; border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.22), 0 4px 18px rgba(0,0,0,.12); padding:24px; }
    .hp-auth-close{ position:absolute; top:10px; right:10px; width:36px; height:36px; border-radius:999px; border:1px solid #e6e8ee; background:#fff; cursor:pointer; color:#6b7280; }
    .hp-auth-logo{ width:36px; height:36px; display:block; margin:0 auto 8px; }
    .hp-auth-title{ margin:4px 0 8px; font-size:24px; line-height:1.2; font-weight:800; letter-spacing:-.015em; text-align:center; }
    .hp-auth-text{ margin:0 0 18px; color:#4b5563; font-size:15px; text-align:center; }
    .hp-auth-actions{ display:grid; gap:10px; grid-template-columns:1fr; }
    .hp-btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 16px; border-radius:10px; font-weight:700; text-decoration:none; }
    .hp-btn-light{ background:#f6f7f9; color:#111827; border:1px solid #e6e8ee; }
    .hp-btn-dark{ background:#111827; color:#fff; border:0; box-shadow:0 8px 24px rgba(0,0,0,.18); }
    @media (min-width:420px){ .hp-auth-actions{ grid-template-columns:1fr 1fr; } }

    /* Connexion (responsive & plus petit en desktop) */
    .hp-disc{
        text-align:center;
        margin:5px 0;
        display:flex; flex-direction:column; align-items:center;
        font-size:.72rem;
        color:#6b7280;
    }
    .hp-disc-methods{
        display:flex; justify-content:center; align-items:flex-start;
        gap:28px;
        margin-top:6px;
    }
    .hp-disc-method{ text-align:center; }
    .hp-disc-icon{ width:20px; height:auto; margin-bottom:5px; }
    .hp-disc-state{ width:15px; height:auto; }

    @media (min-width:1025px){
        .hp-disc{ font-size: clamp(9px, 0.70vw, 11px); margin: 3px 0; line-height: 1.25; }
        .hp-disc-methods{ gap: clamp(12px, 2.2vw, 28px); margin-top: 3px; }
        .hp-disc-icon{ width: clamp(12px, 0.90vw, 16px) !important; height: auto !important; margin-bottom: 3px; }
        .hp-disc-state{ width: clamp(9px, 0.70vw, 12px) !important; height: auto !important; }
    }

    .hp-stick-bottom{
        position: relative;
        left: auto; bottom: auto; transform: none;
        margin: 0 auto 14px;
        width: min(940px, 92vw);
    }
    @media (min-width: 992px){
        .hp-stick-bottom.is-shifted{
            width: min(940px, calc(100vw - var(--sidebar-w) - 24px));
            margin-left: calc(
                var(--sidebar-w) + 12px +
                ((100vw - var(--sidebar-w) - 24px - min(940px, calc(100vw - var(--sidebar-w) - 24px))) / 2)
            );
            margin-right: calc(
                12px +
                ((100vw - var(--sidebar-w) - 24px - min(940px, calc(100vw - var(--sidebar-w) - 24px))) / 2)
            );
        }
    }
    body{ padding-bottom: 0; }

    @media (max-width: 768px) {
        .connexion-methods { gap: 30px !important; }
    }
        
    /* === Miroir de scope : permet au prompt d'être stylé hors de #hp-section-01 === */
    .hp-scope { font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color: var(--hp-fg); }

    /* Conteneur + éléments du prompt */
    .hp-scope .hp-prompt{
      position: relative;
      /*z-index: var(--hp-z-mid);*/
      margin: 0 auto;
      width: min(800px, 92vw);
      background: var(--hp-white);
      border-radius: var(--hp-radius);
      box-shadow: var(--hp-shadow);
      min-height: 140px;
      padding: 16px 72px 16px 16px;
      display: block;
    }
    .hp-scope .hp-modebar{
      display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:center; margin-bottom:8px;
    }
    .hp-scope .hp-modechip{
        display:inline-flex; 
        align-items:center; 
        gap:8px; 
        padding:8px 12px;
        border-radius:999px; 
        border:1px solid #e9eef6; 
        background:#F8FAFD; 
        color:#111827; 
        cursor:pointer;
        font-size:10px; 
        line-height:1; 
        transition: transform .06s ease, background .2s ease, color .2s ease, border-color .2s ease;
    }
    .hp-scope .hp-modechip:hover{ 
        transform: translateY(-1px); 
        }
    .hp-scope .hp-modechip.is-active{ 
        background:#e9f0ff; 
        border-color:#dbe7ff; 
        }
    .hp-scope .hp-modechip .hp-icons{ 
        display:inline-flex; 
        align-items:center; gap:6px; 
        }
    .hp-scope .hp-modechip .hp-i,
    .hp-scope .hp-modechip .hp-g{
        display:inline-block; 
        width:18px;
        height:18px; 
        padding:0; 
        border-radius:9px;
        background:#eef2f7;
        background-size:contain; 
        background-repeat:no-repeat; 
        background-position:center;
        color:transparent; 
        font-size:0; 
        line-height:0; 
        overflow:hidden; 
        vertical-align:middle;
    }
    /* Mappage logos (identique) */
    .hp-scope .hp-modechip .hp-i-fb{ background-image:url('https://paisible.ai/images/icons/paisible_icon_color_facebook.png'); }
    .hp-scope .hp-modechip .hp-i-ig{ background-image:url('https://paisible.ai/images/icons/paisible_icon_color_instagram.png'); }
    .hp-scope .hp-modechip .hp-i-in{ background-image:url('https://paisible.ai/images/icons/paisible_icon_color_linkedin.png'); }
    .hp-scope .hp-modechip .hp-i-x { background-image:url('https://paisible.ai/images/icons/paisible_icon_color_x.png'); }
    .hp-scope .hp-modechip .hp-g   { background-image:url('https://paisible.ai/images/icons/paisible_icon_color_google.png'); }

    .hp-scope .hp-help{ display:flex; align-items:center; justify-content:center; gap:10px; font-size:11px; color:#4b5563; margin:6px 0 12px; text-align:center; }
    .hp-scope .hp-help p{ margin:0; text-align:center; font-family: Montserrat; }
    .hp-scope .hp-help .hp-help-ico{
      flex:0 0 auto; width:22px; height:22px; border-radius:999px; display:grid; place-items:center;
      background:#EEF4FF; color:#1d4ed8; font-size:12px; box-shadow: inset 0 0 0 1px #dbe7ff;
    }

    .hp-scope .hp-suggest-row{
      position: relative; display: grid; grid-template-columns: auto 1fr auto auto;
      align-items: center; gap: 10px; margin: 4px 0 8px;
    }
    .hp-scope .hp-sg-nav{
      width: 32px; height: 32px; border-radius: 999px; border: 1px solid #e7ecf4; background:#f9fbfd; color:#111827; cursor: pointer;
    }
    .hp-scope .hp-sg-track{ display:flex; align-items:center; gap:10px; overflow:hidden; }
    .hp-scope .hp-sg-chip{
      max-width: 100%; padding: 8px 12px; border: 1px dashed #cfd8e3; background: #ffffff;
      border-radius: 999px; color:#0f172a; font-size: 14px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; cursor: pointer;
    }
    .hp-scope .hp-sg-play{
      width: 32px; height: 32px; border-radius: 8px; border: 1px solid #e7ecf4; background:#eaf2ff; color:#0b3b9c; cursor: pointer; font-weight:700;
    }

    /* Champ & bouton d'envoi */
    .hp-scope .hp-prompt input,
    .hp-scope .hp-prompt textarea{
        display:block; 
        width:100%; 
        border:0; 
        outline:none; 
        background:transparent;
        font-family: Montserrat; 
        font-size: clamp(14px, 1.6vw, 20px); 
        line-height:1.5; 
        padding: 8px 0; 
        padding-right: 72px;
    }
    .hp-scope .hp-input{ min-height: 84px; height: 84px; resize: vertical; }
    .hp-scope .hp-prompt input::placeholder,
    .hp-scope .hp-prompt textarea::placeholder{ color:#9aa3af; }

    .hp-scope .hp-send{
      position: absolute; right: 18px; bottom: 16px; z-index: var(--hp-z-top);
      display: grid; place-items: center; place-content: center;
      width: 44px; height: 44px; border-radius: 999px;
      background: var(--hp-send); color:#fff; border:0; cursor:pointer;
      transition: transform .06s ease, filter .2s ease, box-shadow .2s ease;
      box-shadow: 0 8px 24px rgba(0,0,0,.18); padding: 0; line-height: 0; box-sizing: border-box;
    }
    .hp-scope .hp-send > *{ grid-area: 1 / 1; }
    .hp-scope .hp-send:hover{ transform: translateY(-1px); filter: brightness(1.1); }
    .hp-scope .hp-send svg{ width: 20px; height: 20px; display: block; transform: scaleX(-1); transition: transform .06s ease; }
    .hp-scope .hp-send:hover svg{ transform: scaleX(-1); }

    /* 🆕 — État “collapsé” du prompt (Scope docké) */
    @media (max-width: 768px){
      .hp-scope #unifiedPrompt.is-collapsed{
        position: fixed;
        left: 50%;
        bottom: max(12px, env(safe-area-inset-bottom));
        transform: translateX(-50%);
        width: auto;
        max-width: calc(100vw - 32px);
        min-height: 0;
        padding: 0;
        background: transparent;
        box-shadow: none;
        border-radius: 999px;
        z-index: var(--hp-z-top);
      }
      .hp-scope #unifiedPrompt.is-collapsed > *{
        display: none !important;
      }
      .hp-scope #unifiedPrompt.is-collapsed + .hp-fab{
        display: inline-flex;
      }
      .hp-scope .hp-fab{
        display: none;
        position: fixed;
        left: 50%;
        bottom: max(12px, env(safe-area-inset-bottom));
        transform: translateX(-50%);
        z-index: var(--hp-z-top);
        align-items: center;
        gap: 8px;
        height: 10%;
        padding: 0 16px;
        border-radius: 999px;
        /*background: var(--hp-send);*/
        background: #007bff;
        color:#fff;
        border: 0;
        font-weight: 700;
        box-shadow: 0 12px 28px rgba(0,0,0,.2);
        cursor: pointer;
        margin-bottom: 70px;
        width: 80%;
        font-size: 19px;
      }
      .hp-scope .hp-fab .hp-fab-icon{
          width: 15%; 
          height: 47%; 
          display:block;
      }
      /*@media (max-width: 360px){
        .hp-scope .hp-fab span{ display:none; }
      }*/
    }

     @media (max-width: 768px){
      /* Le FAB n’apparaît que lorsque le form est en mode is-collapsed */
        #hp-section-01 #unifiedPrompt.is-collapsed + .hp-fab,
        .hp-scope #unifiedPrompt.is-collapsed + .hp-fab{
          display: inline-flex !important;
        }
    }

    /* ✅ Option : mettre le FAB tout en haut */
    .hp-scope .hp-fab{ z-index: 21474836470; }  /* au lieu de var(--hp-z-top) */

    /* État désactivé/chargement (on laisse ces règles APRÈS, elles ne cassent rien) */
    .hp-send[disabled],
    .hp-send.is-loading{
      opacity:.6;
      cursor:not-allowed;
      pointer-events:none;
      transform:none !important;
      filter:none !important;
      box-shadow:none !important;
    }

    /* Icône & spinner */
    .hp-send .hp-icon{ display:block; }
    .hp-send .hp-spinner{ 
      display:none;
      width:18px; height:18px;
      border:2px solid #fff;
      border-right-color: transparent;
      border-radius:50%;
      animation: hpSpin .9s linear infinite;
    }
    .hp-send.is-loading .hp-icon{ display:none; }
    .hp-send.is-loading .hp-spinner{ display:block; }

    @keyframes hpSpin{
      to{ transform: rotate(360deg); }
    }

    /* Tones masqués (comme avant) */
    .hp-scope .hp-tone-row{ display: none !important; }

    /* Règles desktop identiques */
    @media (min-width: 1025px){
      .hp-scope .hp-prompt{ 
          width:min(800px,92vw); 
          min-height:140px; 
          /*padding:16px 72px 16px 16px; */
          border-radius: var(--hp-radius); 
        }
      .hp-scope .hp-prompt input, .hp-scope .hp-prompt textarea{
          font-size:14px; 
          line-height:1.4; 
          padding-right:72px; 
          font-family: Montserrat;
          padding: 12px 14px; 
          border-radius: 14px; 
          border: 1px solid #e5e9f2;
      }
      .hp-scope .hp-send{ width:44px; height:44px; right:16px; bottom:16px; }
      .hp-scope .hp-modebar{ gap:8px; }
      .hp-scope .hp-modechip{ padding:6px 10px; font-size:10px; }
      .hp-scope .hp-modechip .hp-i{ font-size:11px; padding:2px 6px; }
      .hp-scope .hp-suggest-row{ gap:10px; }
      .hp-scope .hp-sg-chip{ padding:8px 12px; font-size:13px; max-width:100%; }
      .hp-scope .hp-sg-nav, .hp-scope .hp-sg-play{ width:32px; height:32px; border-radius:8px; }
    }

    /* ——— POPIN Social Share : ne pas hériter des couleurs / polices de .hp-scope ——— */
    .popin-social-share-overlay,
    #publishPopin,
    #publishLoadingOverlay,
    .popin-social-share-content {
      text-align: left;
      color: #0f172a;
    }
    
    /* --- Empilement sûr du prompt unifié sur mobile --- */
    @media (max-width: 768px){
      /* Le conteneur de la zone 01 doit créer son propre contexte et passer devant */
      #hp-section-01{
        position: relative;
        z-index: 99;         /* au-dessus des sections qui suivent */
        isolation: isolate;    /* nouveau stacking context, plus prévisible */
      }

      /* Le formulaire lui-même passe au tout premier plan */
      #hp-section-01 #unifiedPrompt{
        position: relative; 
        z-index: 1001;
      }

      /* Si la première section clippe son contenu (fréquent) : désactiver le clipping */
      .full-screen-image{
        overflow: visible;
      }

      /* Un petit coussin pour éviter les collisions visuelles avec la section suivante */
      #hp-section-01{
        padding-bottom: 48px;  /* ajuste si besoin */
      }
    }



/* ===== Source: hp-section-01.php (ancien <style> inline) ===== */
/* ───────────────── Assistant strip intégré au prompt ─────────────── */
            #unifiedPrompt .assistant-strip{
              display:flex; 
              align-items:center; 
              gap:8px;
              margin:0px 0 6px; 
              padding:4px 6px;
              background:transparent; 
              border:0;
            }
            #unifiedPrompt .assistant-strip .chips{
              display:flex; 
              gap:8px; 
              flex-wrap:wrap; 
              width:100%;
            }
            /* ⬅️ Titre à gauche du strip pour le cas multi-agents */
            #unifiedPrompt .assistant-strip .title{
              font-size:12px; line-height:1.25; color:#6b7280; font-weight:600;
            }

            /* ⬆️ AJOUT — Rail centré (titre + avatars) pour cas 2 & 3 */
            #unifiedPrompt .assistant-strip .chooser-rail{
              display:flex; 
              align-items:center; 
              justify-content:center;   /* centre le bloc global */
              gap:10px; 
              flex-wrap:wrap; 
              width:100%;
            }
            #unifiedPrompt .assistant-strip .chooser-rail .title{ margin:0; }
            #unifiedPrompt .assistant-strip .chooser-rail .chips{
              width:auto; 
              justify-content:center;   /* centre les avatars */
            }
            /* On garde align-right dans le HTML, mais on le neutralise dans le rail centré */
            #unifiedPrompt .assistant-strip .chooser-rail .chips.align-right{
              margin-left:0; 
              justify-content:center;
            }

            /* ⬅️ Aligner les avatars à droite en multi-agents (fallback hors rail) */
            #unifiedPrompt .assistant-strip .chips.align-right{
              width:auto;              
              margin-left:auto;        
              justify-content:flex-end;
            }

            /* Mobile : on garde une expérience naturelle (défilement à gauche) */
            @media (max-width: 768px){
              #unifiedPrompt .assistant-strip .chips.align-right{
                width:100%;
                margin-left:0;
                justify-content:flex-start;
              }
            }

            #unifiedPrompt .assistant-strip .chip{
              display:inline-flex; align-items:center; gap:6px;
              padding:6px 10px; border-radius:999px;
              border:1px solid #e5e7eb; background:#fff;
              font-size:12px; line-height:1; font-weight:600;
              text-decoration:none; color:inherit; cursor:pointer;
              transition: box-shadow .12s ease, transform .12s ease, border-color .12s ease;
              max-width: 220px;
            }
            #unifiedPrompt .assistant-strip .chip:hover{
              transform: translateY(-1px);
              box-shadow:0 6px 16px rgba(0,0,0,.06);
              border-color:#d1d5db;
            }
            #unifiedPrompt .assistant-strip .chip .avatar-xxs{
              width:24px; height:24px; border-radius:999px; object-fit:cover; display:block;
              border:1px solid #e5e7eb;
            }
            #unifiedPrompt .assistant-strip .chip .label{
                white-space:nowrap; 
                overflow:hidden; 
                text-overflow:ellipsis; 
                max-width:160px;
                color: #000;
            }
            #unifiedPrompt .assistant-strip .chip.create,
            #unifiedPrompt .assistant-strip .chip.create-account{
                background:#007bff; color:#fff; border-color:#007bff;
            }
            /* Texte informatif */
            #unifiedPrompt .assistant-strip .info{
              font-size:12px; line-height:1.25; color:#6b7280;
            }
            /* Bouton à droite dans les cas "no-agent" / "no-auth" */
            #unifiedPrompt .assistant-strip .chips.no-agent .chip.create,
            #unifiedPrompt .assistant-strip .chips.no-agent .chip.create-account{
              margin-left:auto;
            }

            /* Variante compacte si tu ajoutes la classe is-compact sur #unifiedPrompt */
            #unifiedPrompt.is-compact .assistant-strip{ margin:2px 0 6px; padding:2px 4px; }
            #unifiedPrompt.is-compact .assistant-strip .chip{ padding:4px 8px; }

            /* Mobile : strip horizontal scrollable + labels réduits
               Exception cas "no-agent"/"no-auth" : pas de scroll, bouton reste à droite */
            @media (max-width: 768px){
              #unifiedPrompt .assistant-strip{ margin:4px 0 8px; }
              #unifiedPrompt .assistant-strip .chips{
                flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory;
                scrollbar-width:none;
              }
              #unifiedPrompt .assistant-strip .chips::-webkit-scrollbar{ display:none; }
              #unifiedPrompt .assistant-strip .chip{ flex:0 0 auto; scroll-snap-align:start; }
              #unifiedPrompt .assistant-strip .chip .label{ max-width:110px; }
              #unifiedPrompt .assistant-strip .chips.no-agent{
                flex-wrap:nowrap; overflow:visible; scroll-snap-type:none;
              }
            }

            /* ───────────────────────────────────────────────────────────────
               ✅ GATING SILENT (SANS BANDEAU) :
               -> Pour utilisateur connecté :
                  - si 0 agent : forcer création (bloquer le prompt)
                  - si >=1 agent : forcer sélection (redirige via clic chip)
               -> On garde EXACTEMENT le style actuel et on n’affiche AUCUN bandeau.
               ─────────────────────────────────────────────────────────────── */
            #unifiedPrompt.hp-gated{
              position:relative;
            }

            /* On laisse le strip d’agents totalement actif */
            #unifiedPrompt.hp-gated .assistant-strip{
              opacity:1 !important;
              filter:none !important;
              pointer-events:auto !important;
            }

            /* Le reste de l'UI est visuellement grisé + non cliquable */
            #unifiedPrompt.hp-gated .hp-modebar,
            #unifiedPrompt.hp-gated .hp-help,
            #unifiedPrompt.hp-gated .hp-suggest-row,
            #unifiedPrompt.hp-gated .hp-tone-row,
            #unifiedPrompt.hp-gated #hpPromptInput,
            #unifiedPrompt.hp-gated .hp-send,
            #unifiedPrompt.hp-gated .hp-minify{
              opacity:.35;
              filter:grayscale(.25);
              cursor:not-allowed;
            }

            #unifiedPrompt.hp-gated .hp-modebar,
            #unifiedPrompt.hp-gated .hp-help,
            #unifiedPrompt.hp-gated .hp-suggest-row,
            #unifiedPrompt.hp-gated .hp-tone-row{
              pointer-events:none;
            }

            #unifiedPrompt.hp-gated #hpPromptInput{
              pointer-events:none;
              background:#f9fafb;
            }

            #unifiedPrompt.hp-gated .hp-send{
              pointer-events:none;
            }

            /* Petit "nudge" visuel lorsqu'on tente de cliquer ailleurs */
            #unifiedPrompt .assistant-strip.is-nudged{
              animation: hpNudge .7s ease;
            }
            @keyframes hpNudge{
              0%   { transform:translateY(0); }
              20%  { transform:translateY(-1px); }
              40%  { transform:translateY(0); }
              60%  { transform:translateY(-1px); }
              100% { transform:translateY(0); }
            }



/* ===== Source: hp-section-01.php (ancien <style> inline) ===== */
#unifiedPrompt .assistant-strip{
              display:flex; align-items:center; gap:8px;
              margin:0px 0 6px; padding:4px 6px; background:transparent; border:0;
            }
            #unifiedPrompt .assistant-strip .chips{ display:flex; gap:8px; flex-wrap:wrap; width:100%; }
            #unifiedPrompt .assistant-strip .chip{
              display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px;
              border:1px solid #e5e7eb; background:#fff; font-size:12px; line-height:1; font-weight:600;
              text-decoration:none; color:inherit; cursor:pointer; transition: box-shadow .12s, transform .12s, border-color .12s; max-width:220px; margin-top: -6px;
            }
            #unifiedPrompt .assistant-strip .chip:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.06); border-color:#d1d5db; }
            #unifiedPrompt .assistant-strip .chip.create-account{ 
                background:#007bff; 
                color:#fff; 
                border-color:#007bff; 
            }
            #unifiedPrompt .assistant-strip .info{ font-size:12px; line-height:1.25; color:#6b7280; }
            #unifiedPrompt .assistant-strip .chips.no-agent .chip.create-account{ margin-left:auto; }
            @media (max-width: 768px){
              #unifiedPrompt .assistant-strip .chips{ flex-wrap:nowrap; overflow:visible; scroll-snap-type:none; }
            }

            /* ✅ GATING SILENT (ne s'applique que si hp-gated, neutre ici) */
            #unifiedPrompt.hp-gated{ position:relative; }
            #unifiedPrompt.hp-gated .assistant-strip{ opacity:1 !important; filter:none !important; pointer-events:auto !important; }
            #unifiedPrompt.hp-gated .hp-modebar,
            #unifiedPrompt.hp-gated .hp-help,
            #unifiedPrompt.hp-gated .hp-suggest-row,
            #unifiedPrompt.hp-gated .hp-tone-row,
            #unifiedPrompt.hp-gated #hpPromptInput,
            #unifiedPrompt.hp-gated .hp-send,
            #unifiedPrompt.hp-gated .hp-minify{
              opacity:.35;
              filter:grayscale(.25);
              cursor:not-allowed;
            }
            #unifiedPrompt.hp-gated .hp-modebar,
            #unifiedPrompt.hp-gated .hp-help,
            #unifiedPrompt.hp-gated .hp-suggest-row,
            #unifiedPrompt.hp-gated .hp-tone-row{
              pointer-events:none;
            }
            #unifiedPrompt.hp-gated #hpPromptInput{ pointer-events:none; background:#f9fafb; }
            #unifiedPrompt.hp-gated .hp-send{ pointer-events:none; }

            #unifiedPrompt .assistant-strip.is-nudged{ animation: hpNudge .7s ease; }
            @keyframes hpNudge{
              0%{ transform:translateY(0); }
              20%{ transform:translateY(-1px); }
              40%{ transform:translateY(0); }
              60%{ transform:translateY(-1px); }
              100%{ transform:translateY(0); }
            }



/* =====================================================================
   ✅ Utilitaires rapatriés depuis des attributs inline (style="...")
   ===================================================================== */
.is-hidden{ display:none; }
.is-hidden-important{ display:none !important; }

.hp-text-center{ text-align:center; }

/* Icons in "connexion-method" blocks (hp-section-01.php) */
.hp-disc-icon{ width:20px; height:20px; margin-bottom:5px; }
.hp-disc-state{ width:15px; height:15px; }

/* Flip helper for icons */
.hp-icon-flip-x{ transform: scaleX(-1); }

/* Disable pointer interactions for chip titles (was inline style) */
.chip-title{ pointer-events:none; cursor:default; }

/* Header history button pieces (was inline style) */
.history-btn-icon{ display:block; width:16px; height:16px; flex:0 0 16px; color:#fff; opacity:.95; }
.history-btn-text{ line-height:1; }

/* Hidden sources / containers (was inline display:none in hp-section-01.php) */
#prompt-suggestions,
#prompt-suggestions-google-hp,
#prompt-suggestions-image,
#prompt-suggestions-seo,
#prompt-suggestions-article,
#tone-row{
  display:none;
}

#legacy-blocks{
  display:none !important;
}

/* "Maquette connexion" block (was inline style) */
#maquette-connexion{
  display:none;
  text-align:center;
  margin-top:10px;
  font-size:0.9rem;
  color:#666;
}

/* Suggestion nav arrows: hidden by default; JS handles display inline-block when needed */
.hp-sg-nav[data-for]{ display:none; }
/* =====================================================================
   99. Mobile & Tablet UX Overrides (<= 1024px)
   ---------------------------------------------------------------------
   ⚠️ Ces règles améliorent l’expérience mobile/tablette SANS modifier le desktop.
   (Aucun impact pour >= 1025px)
   ===================================================================== */

@media (max-width: 1024px) {
  /* Évite les scrolls horizontaux accidentels */
  html, body { overflow-x: hidden; }

  /* Sur tablette/mobile : on neutralise les décalages "sidebar" */
  .shift-right-ask-assistant,
  .shift-right-bottom-section,
  .shift-right-question-form,
  .shift-right-disclaimer,
  .bottom-section-homepage.fixed-bottom {
    margin-left: 0 !important;
  }

  /* Les zones fixées en bas doivent prendre toute la largeur */
  .bottom-section,
  .bottom-section-hp {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
  }

  /* Header : sur tablette, on privilégie le hamburger (évite l’encombrement) */
  .hamburger { display: block; opacity: 1; }

  .pricing-btn,
  .user-btn,
  .schedule-btn,
  .analytics-btn,
  .subscribe-btn,
  .campaigns-btn,
  .library-btn,
  .history-btn {
    display: none !important;
  }

  /* Centre les popins malgré les offsets prévus pour la sidebar desktop */
  #publishPopin .popin-content,
  #publishInvitePopin .popin-content,
  #textTooLongPopin .popin-content {
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
    width: min(92vw, 600px) !important;
    max-height: calc(100vh - 80px) !important;
  }

  /* Évite que la scrollbar interne masque le contenu sur petits écrans */
  #publishPopin .popin-content,
  #publishInvitePopin .popin-content,
  #textTooLongPopin .popin-content {
    padding-right: 16px !important;
  }

  /* Hero : meilleure stabilité sur mobiles/tablettes (barres navigateur) */
  .full-screen-image { height: 100svh; }

  /* Alignement : éviter le “collage” au bord sur tablette */
  #ask-assistant { padding-left: 12px; padding-right: 12px; }
}

@media (max-width: 767px) {
  /* Safe areas iOS */
  header {
    padding-top: env(safe-area-inset-top, 0px);
    height: calc(52px + env(safe-area-inset-top, 0px));
  }
  #ask-assistant {
    top: calc(52px + env(safe-area-inset-top, 0px) + 8px) !important;
  }

  .bottom-section,
  .bottom-section-homepage.fixed-bottom {
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Titres : plus lisibles, sans casser le desktop */
  #baseline-homepage {
    font-size: clamp(1.25rem, 5.5vw, 1.6rem) !important;
  }
  #baseline-homepage-sub {
    font-size: clamp(0.95rem, 4vw, 1.15rem) !important;
  }

  /* Carrousel de prompts : meilleure zone utile entre les flèches */
  .prompt-row { width: calc(100% - 5rem) !important; }
  .prompt-button {
    min-width: 140px;
    padding: 0.6rem 0.8rem;
    font-size: 0.8rem;
  }

  /* Tonalités : cibles tactiles */
  .tone-button { min-height: 44px; font-size: 0.9rem; }
  #back-to-prompts { font-size: 1.4rem; }

  /* Formulaire question : confort de saisie + évite le zoom iOS (<16px) */
  #question-form { width: 100% !important; padding: 0 12px; box-sizing: border-box; }
  #assistant-question,
  .question-input { font-size: 16px !important; padding: 12px !important; }
  #ask-button,
  #question-form button { padding: 12px !important; }

  /* Cartes Q/R : meilleure largeur sur mobile */
  .question-block,
  .response-block,
  .response-block-reconstitute {
    width: 92% !important;
  }

  /* Correction robuste : taille d’icône sur mobile (selector erroné plus haut) */
  .ads-setup-btn img {
    width: 20px !important;
    height: 20px !important;
    margin-right: 8px !important;
  }

  /* GDPR banner : règle manquante (classe correcte) */
  .gdpr-consent-banner-homepage {
    width: 92% !important;
  }
}

@media (max-width: 480px) {
  .prompt-button { min-width: 120px; max-width: 200px; }
  #baseline-homepage { margin-left: 4% !important; margin-right: 4% !important; }
  #baseline-homepage-sub { margin-left: 4% !important; margin-right: 4% !important; }
}