/* ==========================================================================
   AIBS ChatBot Stylesheet (scripts/ChatBot/chat-widget.css)
   ========================================================================== */

:root {
    --aibs-blue: #0063ce;
    --aibs-blue-dark: #004f9f;
    --aibs-blue-soft: #f2f8ff;
    --aibs-navy: #00082b;
    --aibs-gray-light: #ececec;
    --aibs-gray-text: #6a6d78;
    --aibs-radius: 24px;
    --aibs-shadow: 0 10px 30px rgba(0, 8, 43, 0.18);
}

/* Floating Launcher Button */
#aibs-chat-launcher {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background-color: var(--aibs-blue);
    color: #ffffff;
    border: none;
    box-shadow: 0 8px 24px rgba(0, 99, 206, 0.35);
    cursor: pointer;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.25s ease;
}

#aibs-chat-launcher svg {
    width: 28px;
    height: 28px;
    transition: transform 0.2s ease;
}

#aibs-chat-launcher:hover {
    transform: scale(1.08) translateY(-2px);
    box-shadow: 0 12px 28px rgba(0, 99, 206, 0.45);
}

#aibs-chat-launcher:hover svg {
    transform: scale(1.05);
}

#aibs-chat-launcher .aibs-launcher-dot {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #4ade80;
    border: 2.5px solid #ffffff;
    box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.3);
}

/* Chat Window Container */
#aibs-chat-window {
    position: fixed;
    bottom: 100px;
    right: 24px;
    width: 390px;
    max-width: calc(100vw - 32px);
    height: 570px;
    max-height: calc(100vh - 140px);
    background: #ffffff;
    border-radius: var(--aibs-radius);
    box-shadow: var(--aibs-shadow);
    display: none;
    flex-direction: column;
    overflow: hidden;
    z-index: 9999;
    font-family: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color-scheme: light;
    opacity: 0;
    transform: translateY(20px) scale(0.96);
    transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.165, 0.84, 0.44, 1);
}

#aibs-chat-window.open {
    display: flex;
    opacity: 1;
    transform: translateY(0) scale(1);
}



#aibs-chat-embed {
    width: 100%;
    max-width: 600px;
}

#aibs-chat-window.aibs-chat-embedded {
    position: static;
    width: 100%;
    max-width: 100%;
    height: 410px;
    max-height: none;
    margin: 0;
    box-shadow: 0 20px 50px rgba(0, 20, 60, 0.32);
    text-align: left;
}

/* Header Section */
#aibs-chat-header {
    background-color: var(--aibs-blue);
    color: #ffffff;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#aibs-chat-avatar {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    /* L'icone robot porte ses propres couleurs (bleu sur blanc casse) :
       sur l'en-tete marine, un disque clair la fait ressortir -- le voile
       blanc a 15% qui allait avec l'ancien pictogramme blanc l'effacait. */
    background: #f2f8ff;
    border-radius: 50%;
    padding: 2px;
}

#aibs-chat-avatar img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    display: block;
}

#aibs-chat-header-text {
    flex: 1;
    min-width: 0;
}

#aibs-chat-header-text .aibs-title-row {
    display: flex;
    align-items: center;
    gap: 7px;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -0.2px;
}

#aibs-chat-header-text .aibs-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 2.5px rgba(74, 222, 128, 0.3);
    flex-shrink: 0;
}

#aibs-chat-header-text small {
    display: block;
    font-weight: 400;
    font-size: 12px;
    opacity: 0.85;
    margin-top: 2px;
}

#aibs-chat-close {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: #ffffff;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    line-height: 1;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, transform 0.15s ease;
}

#aibs-chat-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.08);
}

/* Messages Stream */
#aibs-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--aibs-blue-soft);
    scroll-behavior: smooth;
}

#aibs-chat-messages::-webkit-scrollbar {
    width: 6px;
}

#aibs-chat-messages::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 6px;
}

.aibs-msg {
    max-width: 85%;
    padding: 12px 16px;
    border-radius: 18px;
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    animation: aibs-pop-in 0.22s cubic-bezier(0.175, 0.885, 0.32, 1.1) both;
}

@keyframes aibs-pop-in {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.aibs-msg.bot {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-bottom-left-radius: 4px;
    align-self: flex-start;
    color: var(--aibs-navy);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);
}

.aibs-msg.user {
    background-color: var(--aibs-blue);
    color: #ffffff;
    border-bottom-right-radius: 4px;
    align-self: flex-end;
    box-shadow: 0 4px 12px rgba(0, 99, 206, 0.25);
}

.aibs-msg.typing {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 14px 18px;
}

.aibs-typing-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #94a3b8;
    animation: aibs-bounce 1.2s infinite ease-in-out;
}

.aibs-typing-dot:nth-child(2) {
    animation-delay: 0.15s;
}

.aibs-typing-dot:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes aibs-bounce {

    0%,
    60%,
    100% {
        transform: translateY(0);
        opacity: 0.5;
    }

    30% {
        transform: translateY(-5px);
        opacity: 1;
    }
}

.aibs-msg strong {
    font-weight: 700;
}



/* CTA & Choice Chips */
.aibs-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
    animation: aibs-pop-in 0.22s ease both;
}

button.aibs-chip {
    background: #ffffff;
    border: 1.5px solid #bfdbfe;
    color: var(--aibs-navy);
    border-radius: 999px;
    padding: 9px 15px;
    font-size: 13.5px;
    font-family: inherit;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.18s ease;
}

button.aibs-chip:hover {
    border-color: var(--aibs-blue);
    background: var(--aibs-blue-soft);
    transform: translateY(-1px);
}

/* Pilules pleines, comme le bouton "Envoyer" de la barre de saisie. Le
   rayon etait volontairement carre (6px) tant que la carte avait des angles
   nets ; celle-ci et ses champs sont arrondis, c'est desormais le bouton
   anguleux qui detonne. */
.aibs-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 14px;
    padding: 12px 16px;
    background-color: var(--aibs-blue);
    color: #ffffff;
    text-decoration: none;
    border: none;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.aibs-cta:hover {
    background-color: var(--aibs-blue-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 99, 206, 0.3);
}

.aibs-cta:disabled {
    opacity: 0.6;
    cursor: default;
    transform: none;
    box-shadow: none;
}

/* Input Form */
#aibs-chat-form {
    display: flex;
    border-top: 1px solid #e2e8f0;
    padding: 12px;
    gap: 8px;
    background: #ffffff;
}

#aibs-chat-input {
    flex: 1;
    /* Reinitialise : la regle globale `form input` (acceuil.css) pose un
       margin-top de 10px pour les formulaires du site (devis, contact...).
       Le widget insere son champ dans un vrai <form>, elle s'y applique
       donc aussi -- rien ici ne la neutralisait, le champ tombait 10px
       plus bas que le trombone/micro/bouton malgre le align-items:center
       du formulaire. */
    margin: 0;
    border: 1.5px solid #cbd5e1;
    border-radius: 6px;
    padding: 11px 18px;
    font-size: 14px;
    outline: none;
    font-family: inherit;
    background: #f8fafc;
    color-scheme: light;
    color: #1e293b;
    caret-color: #1e293b;
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='19' viewBox='0 0 15 19' shape-rendering='crispEdges'%3E%3Cpath d='M3 0h9v3H9v13h3v3H3v-3h3V3H3z' fill='%23ffffff'/%3E%3Cpath d='M4 1h7v1H8v15h3v1H4v-1h3V2H4z' fill='%23000000'/%3E%3C/svg%3E") 7 9, text;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

#aibs-chat-input:hover {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='19' viewBox='0 0 15 19' shape-rendering='crispEdges'%3E%3Cpath d='M3 0h9v3H9v13h3v3H3v-3h3V3H3z' fill='%23ffffff'/%3E%3Cpath d='M4 1h7v1H8v15h3v1H4v-1h3V2H4z' fill='%23000000'/%3E%3C/svg%3E") 7 9, text;
}

#aibs-chat-input:focus {
    border-color: var(--aibs-blue);
    background: #ffffff;
}

#aibs-chat-form button {
    background-color: var(--aibs-blue);
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 0 22px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.15s ease;
}

#aibs-chat-form button:hover {
    background-color: var(--aibs-blue-dark);
}

#aibs-chat-form button:disabled {
    opacity: 0.5;
    cursor: default;
    background-color: var(--aibs-blue);
}

/* Responsive Overrides */
@media (max-width: 600px) {
    

    #aibs-chat-window.aibs-chat-embedded {
        height: 60vh;
        border-radius: 20px;
    }
}

@media (max-width: 480px) {
    #aibs-chat-window {
        right: 16px;
        left: 16px;
        width: auto;
        bottom: 92px;
    }
}




/* ------------------------------------------------- recommandations produits
   Short-list renvoyee par l'agent quand le visiteur decrit une situation
   ("je viens de creer une entreprise de plomberie") plutot qu'un produit.
   Chaque ligne garde les deux portes : lancer la demande, ou lire la fiche
   produit du catalogue. */

.aibs-reco {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 0;
    border-top: 1px solid rgba(0, 99, 206, .12);
}

.aibs-reco:first-of-type {
    border-top: none;
}

.aibs-reco-label {
    font-weight: 600;
    font-size: 14px;
    line-height: 1.3;
}

.aibs-reco-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.aibs-reco-btn {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border: 1px solid #0063CE;
    border-radius: 999px;
    background: #fff;
    color: #0063CE;
    font: inherit;
    font-size: 13px;
    text-decoration: none;
    cursor: pointer;
}

.aibs-reco-btn.primary {
    background: #0063CE;
    color: #fff;
}

.aibs-reco-btn:hover,
.aibs-reco-btn:focus-visible {
    filter: brightness(.95);
}


/* ------------------------------------------------------------------
   Accueil : le chatbot embarque remplace le bandeau de chiffres
   (+100/+15/+150), directement dans .slogan sous la rangee de boutons
   (Assurance Particulier/Pro/Vie), plutot que la carte d'accroche qui
   renvoyait vers assistant.html (celle-ci reste utilisee ailleurs sur le
   site, cf. product-cta.js sur les pages produit -- on ne la touche pas ;
   ici on embarque directement le chat, dans la colonne du hero).
   ------------------------------------------------------------------ */

/* acceuil.css impose .premiere{height:700px} fixe, dimensionne pour
   l'ancien contenu du hero. Sans cette regle le hero ne grandit plus pour
   accueillir le chat sous les boutons.

   DESKTOP UNIQUEMENT : sous 1371px le hero garde sa mise en page d'origine
   (photo en carte, titre incruste dessus) et le chat se pose APRES la photo
   (cf. placeHeroChat dans chat-widget.js). La hauteur fixe d'origine y est
   volontaire -- l'ecraser rallongeait le bandeau bleu de ~150px et decalait
   toute la composition par rapport au site en production. La place du chat
   est degagee plus bas, par une regle qui ne touche que sa propre marge. */
@media (min-width: 1371px) {
    .premiere {
        height: auto;
        min-height: 708px;
        padding-bottom: var(--hero-pad-bottom, 48px);
    }
}

/* Sous 1371px, le chat vit HORS de .premiere (juste apres, cf.
   placeHeroChat) : la section n'a donc pas a grandir pour lui, et garde
   exactement la hauteur d'origine definie par acceuil.css. */

/* Positionne independamment du flux : sinon chaque ajustement vertical
   du chat (collapse/expand, ou son propre offset) fait grandir .premiere
   d'autant, alors que la hauteur du fond bleu doit rester fixe. #aibs-chat-embed
   flotte ici a une position absolue dans .premiere (deja position:relative),
   au meme bord gauche que la rangee de boutons. */
/* .slogan (pas .premiere) est l'ancre : sa largeur epouse deja exactement
   l'espace disponible avant la photo (c'est ce qui fait retourner le
   titre a la ligne au bon endroit). Ancrer sur .premiere a la place
   ignorait cette limite et faisait chevaucher le chat et la photo des
   que l'ecran retrecissait. */
/* En-dessous de 1371px, .slogan et .picture sont empiles (pas cote a
   cote) : une position absolue y placerait le chat PAR-DESSUS la photo au
   lieu d'a cote. On y reste donc dans le flux normal, avec juste un peu
   d'espace au-dessus. */
#aibs-chat-embed {
    margin-top: 32px;
}

@media (min-width: 1371px) {
    .slogan {
        position: relative;
    }

    .slogan #aibs-chat-embed {
        position: absolute;
        /* bottom (pas top) : bord bas aligne sur celui de la photo.
           Valeur de depart seulement -- alignChatToPhoto (chat-widget.js)
           recalcule l'ecart reel des le montage du widget, puis a chaque
           resize. Elle vaut l'alignement vise a 1600px, pour que le premier
           rendu soit deja au bon endroit avant que le script ne passe. */
        bottom: -244px;
        margin-top: 0;
        /* Largeur derivee de la mise en page, pas calculee en JS.
           .slogan occupe deja exactement la colonne de texte : de la
           gouttiere gauche (--hero-gutter-left) jusqu'au gap qui la separe
           de la photo (--hero-photo-width + --hero-gutter-right). left:0 +
           right:0 collent donc le chat sur ce meme couloir, a toutes les
           largeurs -- meme bord gauche que le titre et la rangee de boutons,
           et jamais un pixel sur la photo.
           L'ancienne version posait une largeur fixe (820px puis 1034px
           calcules en JS depuis la rangee de boutons) : au-dela de sa propre
           colonne, elle passait par-dessus la photo des que l'ecran n'etait
           plus tres large -- flagrant vers 1450px. */
        /* Bord gauche = celui du bandeau +100 / +15 / +150 que le chat
           remplace : `.number-container { padding-left: var(--hero-buttons-left) }`
           (acceuil.css), soit 168px, c'est-a-dire exactement le bord du
           titre et de la rangee de boutons -- donc left:0 dans .slogan.
           Le bord droit est pose en JS (alignChatToBand), les regles du
           bandeau changeant de valeur a 1590px et 1650px. */
        left: 0;
        right: 0;
        width: auto;
        /* La regle de base plafonne #aibs-chat-embed a 600px (utile pour la
           bulle flottante et la page assistant) : sans ce rappel, le chat
           restait bloque a 600px et laissait un grand vide avant la photo
           sur les ecrans larges. */
        max-width: none;
        z-index: 30;
    }

    /* Deploye, la fenetre a maintenant une hauteur fixee en JS
       (alignChatHeightToCards, jusqu'aux boutons). Le plafond fixe de
       245px sur les messages (regle plus bas) laissait alors un vide sous
       le formulaire au lieu de le garder colle au bas de la fenetre : on
       le desactive ici pour laisser flex:1 (regle de base) occuper tout
       l'espace restant. */
    .slogan #aibs-chat-window.aibs-chat-embedded:not(.aibs-collapsed) #aibs-chat-messages {
        max-height: none;
    }
}

/* ------------------------------------------------------------------
   Menus de l'en-tete au-dessus du chat embarque.

   Les panneaux deroulants (#menu "Vehicules...", #menu-pro, etc.) sont en
   position:absolute mais sans z-index, et aucun de leurs parents ne cree de
   contexte d'empilement : ils vivent donc au niveau 0 de la racine, sous le
   chat (z-index 30) qui les tronquait des qu'on ouvrait un menu au-dessus du
   hero.

   La barre collante .nav est un cas a part : position:fixed + z-index:2 en
   fait un contexte d'empilement, donc ses propres menus (#menuS & co) y sont
   plafonnes a 2 quoi qu'on leur donne. C'est elle qu'il faut remonter, pas
   eux. Une barre de navigation au-dessus du contenu est de toute facon la
   bonne hierarchie.
   ------------------------------------------------------------------ */
#menu,
#menu-pro,
#menu-vie,
#menu-partenaire,
.nav {
    z-index: 100;
}

.aibs-hero-embed #aibs-chat-window.aibs-chat-embedded {
    height: auto;
    max-height: 320px;
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 12px 32px rgba(0, 20, 60, 0.18);
    transition: background-color 0.4s ease, border-radius 0.4s ease, box-shadow 0.4s ease;
}

/* Etat deplie : s'ouvre jusqu'a s'arreter juste sous la rangee de boutons sans chevaucher */
.aibs-hero-embed #aibs-chat-window.aibs-chat-embedded:not(.aibs-collapsed) {
    height: auto;
    max-height: 320px;
}

/* La barre "AIBS Assistant" (bleu marine) n'a plus lieu d'etre une fois le
   chat integre dans le hero bleu lui-meme -- elle faisait double emploi
   avec le fond de la section. On la retire uniquement en mode embarque ;
   la version flottante (autres pages) garde son en-tete. */
.aibs-chat-embedded #aibs-chat-header {
    display: none;
}

/* ------------------------------------------------------------------
   Etat reduit : au chargement, le chat embarque n'affiche que sa zone de
   texte (comme une barre de recherche) -- messages, chips et barre de
   progression restent caches. Un clic/focus dans le champ (cf.
   chat-widget.js) retire .aibs-collapsed et deplie tout le widget.
   ------------------------------------------------------------------ */
.aibs-hero-embed #aibs-chat-window.aibs-chat-embedded.aibs-collapsed {
    height: auto;
    background: #f2f8ff;
    box-shadow: 0 8px 24px rgba(0, 20, 60, 0.14);
    border-radius: 30px;
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='19' viewBox='0 0 15 19' shape-rendering='crispEdges'%3E%3Cpath d='M3 0h9v3H9v13h3v3H3v-3h3V3H3z' fill='%23ffffff'/%3E%3Cpath d='M4 1h7v1H8v15h3v1H4v-1h3V2H4z' fill='%23000000'/%3E%3C/svg%3E") 7 9, text;
}

.aibs-chat-embedded.aibs-collapsed #aibs-chat-input {
    background: #ffffff;
}

.aibs-chat-embedded #aibs-chat-messages {
    max-height: 210px;
    opacity: 1;
    padding: 16px 18px;
    transition: max-height 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease, padding 0.35s ease;
}

.aibs-chat-embedded.aibs-collapsed #aibs-chat-messages {
    display: flex !important;
    max-height: 0 !important;
    opacity: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

/* ------------------------------------------------------------------
   Effacement au survol des trois boutons du hero (Particulier / Pro /
   Vie) : leurs menus deroulants tombent sur la carte du chat, qui se
   replie donc a sa seule zone de texte le temps du survol (classe posee
   par watchHeroDropdowns, cf. chat-widget.js).

   Meme rendu que l'etat reduit, mais classe distincte : .aibs-collapsed
   porte un ETAT (le chat n'a pas encore ete ouvert), celui-ci n'est qu'un
   effacement temporaire. Les melanger aurait fait "refermer" le chat pour
   de bon apres un simple passage de souris.

   !important sur les hauteurs : en desktop alignChatHeightToCards pose une
   hauteur EN LIGNE sur la fenetre, et sous 1370px --aibs-hero-open-h lui
   impose la hauteur de la photo. Sans ca, la carte gardait sa taille et
   seul son contenu disparaissait.
   ------------------------------------------------------------------ */
.aibs-hero-embed #aibs-chat-window.aibs-chat-embedded.aibs-hero-duck {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}

.aibs-hero-embed .aibs-chat-embedded.aibs-hero-duck #aibs-chat-messages {
    display: flex !important;
    max-height: 0 !important;
    opacity: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

.aibs-hero-embed .aibs-chat-embedded.aibs-hero-duck #aibs-chat-form {
    border-top-color: transparent;
}

.aibs-chat-embedded #aibs-chat-form {
    border-top: 1px solid #e2e8f0;
    /* Filet net d'un bord a l'autre de la carte : la couleur transparente
       heritee de l'etat reduit ne laissait comme separation que le
       changement de fond (bleu tres clair -> blanc), decale de la bande
       [hidden] ci-dessus. */
    border-top-color: #e2e8f0;
    /* Seule la COULEUR du filet s'anime : la barre de saisie garde une
       geometrie fixe entre l'etat reduit et l'etat deplie. Le padding
       anime (et le padding:8px de l'etat reduit, ci-dessous) faisaient
       grandir la barre a l'ouverture -- champ, trombone, micro et bouton
       changeaient de taille sous le curseur. */
    transition: border-top-color 0.35s ease;
}

.aibs-chat-embedded.aibs-collapsed #aibs-chat-form {
    border-top-color: transparent;
}



label.aibs-field {
    display: block;
    margin-top: 14px;
    font-size: 13px;
}

label.aibs-field span {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    color: var(--aibs-gray-text);
}

label.aibs-field input,
label.aibs-field select {
    width: 100%;
    box-sizing: border-box;
    height: 46px;
    padding: 0 16px;
    border: 1.5px solid #cbd5e1;
    border-radius: 999px;
    font: inherit;
    font-size: 14px;
    color: var(--aibs-navy);
    background: #ffffff;
    transition: border-color 0.2s ease, background 0.2s ease;
}

label.aibs-field input:focus,
label.aibs-field select:focus {
    outline: none;
    border-color: var(--aibs-blue);
}

/* Champ rempli par la lecture d'un document : signale ce qu'il faut relire. */
label.aibs-field input.aibs-autofilled,
label.aibs-field select.aibs-autofilled {
    border-color: var(--aibs-blue);
    background: var(--aibs-blue-soft);
}

/* Listes deroulantes des champs de pre-qualification (bateau, animaux, flotte...) :
   meme boite que les champs texte, plus la fleche rendue par le navigateur. Sans
   `appearance`, Safari imposait sa propre hauteur et la ligne se decalait. */
label.aibs-field select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2364748b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px 8px;
    padding-right: 34px;
    cursor: pointer;
}

/* Champs coordonnees (nom, telephone, email) : l'icone est DANS la boite de
   saisie, a gauche du texte ; le libelle reste seul au-dessus.
   C'est l'enveloppe qui porte la bordure et le fond -- l'icone et la saisie
   se partagent la ligne en flex. Un padding pose sur l'input (ici ou dans
   une autre feuille) ne peut donc plus faire chevaucher les deux. */
label.aibs-field-icon .aibs-field-control {
    display: flex;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    width: 100%;
    height: 46px;
    padding: 0 16px;
    border: 2px solid #b4c2d4;
    border-radius: 999px;
    background: #ffffff;
    transition: border-color 0.2s ease, background 0.2s ease;
}

label.aibs-field-icon .aibs-field-icon-badge {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: var(--aibs-blue);
    pointer-events: none;
}

label.aibs-field-icon .aibs-field-icon-badge svg {
    width: 20px;
    height: 20px;
}

/* La saisie perd sa boite : l'enveloppe la porte desormais. */
label.aibs-field-icon .aibs-field-control input,
label.aibs-field-icon .aibs-field-control select {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: 14px;
}

label.aibs-field-icon .aibs-field-control input:focus,
label.aibs-field-icon .aibs-field-control select:focus {
    outline: none;
}

label.aibs-field-icon .aibs-field-control:focus-within {
    border-color: var(--aibs-blue);
}

/* Etat "rempli par la lecture d'un document" : c'est l'enveloppe qui le
   signale, la bordure de l'input n'existant plus. */
label.aibs-field-icon .aibs-field-control:has(.aibs-autofilled) {
    border-color: var(--aibs-blue);
    background: var(--aibs-blue-soft);
}

/* Remplissage automatique du NAVIGATEUR (mots de passe / adresses
   enregistres). Chrome peint son fond bleu sur le seul rectangle de
   l'<input> : depuis que la bordure et le fond sont portes par l'enveloppe,
   ce fond s'arretait avant les 12px de marge droite et la zone de l'icone --
   d'ou une bande blanche aux deux bouts. On repeint donc l'input avec le
   fond de l'enveloppe (un box-shadow interne : Chrome ignore `background`
   sur un champ autofill) et l'enveloppe entiere porte la teinte. */
label.aibs-field-icon .aibs-field-control:has(input:-webkit-autofill),
label.aibs-field-icon .aibs-field-control:has(input:autofill) {
    background: var(--aibs-blue-soft);
    border-color: var(--aibs-blue);
}

label.aibs-field-icon .aibs-field-control input:-webkit-autofill,
label.aibs-field-icon .aibs-field-control input:autofill {
    -webkit-text-fill-color: var(--aibs-navy);
    -webkit-box-shadow: 0 0 0 100px var(--aibs-blue-soft) inset;
    box-shadow: 0 0 0 100px var(--aibs-blue-soft) inset;
    /* Chrome reapplique son fond a la premiere interaction : une transition
       de fond quasi infinie l'empeche de reprendre la main. */
    transition: background-color 100000s ease-in-out 0s;
}

/* Libelle des coordonnees : navy et un peu plus marque que les autres
   champs, comme sur les formulaires du site. */
label.aibs-field-icon>span {
    color: var(--aibs-navy);
    font-weight: 700;
}

/* Controle de saisie : la boite et l'icone passent au rouge, le motif
   attendu s'affiche sous le champ. Le message reste sous SON champ (et non
   dans l'erreur globale du bas) : c'est la seule facon de dire lequel des
   trois est en cause sans le nommer une deuxieme fois. */
label.aibs-field.aibs-field-invalid .aibs-field-control {
    border-color: #dc2626;
    background: #fef2f2;
}

label.aibs-field.aibs-field-invalid .aibs-field-icon-badge {
    color: #dc2626;
}

label.aibs-field .aibs-field-error {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
    color: #b91c1c;
}

/* `display: block` ci-dessus l'emportait sur l'attribut `hidden` : le message
   d'erreur absent gardait une boite vide et sa marge de 4px. Invisible dans
   la vue coordonnees (la marge se fondait dans le flux bloc), mais pas dans
   la vue entreprise, dont les lignes sont des elements flex : la marge y
   tenait, et chaque ligne y faisait 4px de plus que son homologue. */
label.aibs-field .aibs-field-error[hidden] {
    display: none;
}

.aibs-card-note.aibs-error {
    color: #b91c1c;
    font-weight: 600;
}

/* Trombone, champ et bouton d'envoi partagent la meme hauteur (44px) et sont
   centres verticalement : sans hauteur commune, le champ s'etirait sur toute
   la barre et les deux boutons flottaient a des niveaux differents. */
#aibs-chat-form {
    align-items: center;
}

/* box-sizing explicite : sans lui, la hauteur de 44px s'ajoutait au padding
   vertical (11px) et a la bordure -- le champ faisait ~69px et depassait les
   deux boutons. Le padding vertical passe a 0, le texte est centre par la
   hauteur de ligne. */
#aibs-chat-input {
    box-sizing: border-box;
    height: 44px;
    padding: 0 18px;
    line-height: 44px;
    border-radius: 999px;
}

#aibs-chat-form button[type="submit"] {
    box-sizing: border-box;
    height: 44px;
    border-radius: 999px;
}

/* Coordonnees + pieces a joindre, cote a cote dans la meme carte quand la
   largeur le permet ; empiles en dessous de 560px (mobile, ou panneau
   embarque plus etroit) plutot que de comprimer deux colonnes illisibles. */
.aibs-lead-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-start;
}

.aibs-lead-fields {
    flex: 1 1 200px;
    min-width: 200px;
}

/* Bouton d'envoi sous les deux colonnes (identite + pieces), pas dans l'une
   d'elles : centre plutot qu'etire sur toute la largeur, sinon un bouton
   aussi large que la carte entiere ecrase visuellement le reste. */
.aibs-lead>.aibs-cta {
    width: auto;
    min-width: 220px;
    margin-left: auto;
    margin-right: auto;
}

/* Une seule colonne dans la carte depuis que les pieces ont leur propre
   etape : la grille ne se replie plus, elle n'a plus qu'un enfant. */
@media (min-width: 520px) {
    .aibs-lead-grid {
        flex-wrap: nowrap;
    }
}

/* --------------------------------------------------------------------------
   Etape "informations entreprise" : en-tete de l'etape et ses quatre champs.
   Elle a remplace les pieces a joindre -- une entreprise se decrit en quatre
   lignes, la ou les pieces demandaient au visiteur d'aller chercher des
   documents avant meme d'avoir un tarif.
   -------------------------------------------------------------------------- */

/* Consigne d'ouverture : hauteur RESERVEE, identique sur les deux faces.
   Les deux textes n'ont pas la meme longueur et ne se replient donc pas sur
   le meme nombre de lignes ; sans reserve, les champs demarraient une ligne
   plus haut d'un cote que de l'autre et sautaient en changeant d'onglet.
   Trois lignes couvrent le repli des deux textes jusqu'aux cartes etroites. */
.aibs-lead>.aibs-card-note {
    min-height: calc(3 * 1.4em);
}

/* Sans couleur a elle, cette consigne heritait du blanc de `.assistant-hero`
   (le bandeau bleu derriere la carte) -- invisible sur le fond blanc de la
   carte elle-meme. `.aibs-step-product`/`.aibs-step-title`, juste au-dessus,
   n'avaient pas ce probleme : ils fixent deja leur propre couleur. */
.aibs-lead-card .aibs-card-note:not(.aibs-error) {
    color: var(--aibs-navy);
}

/* Face ouverte du dossier, en haut de la carte : un personnage pour les
   coordonnees, un batiment pour l'entreprise. Un badge, pas un bouton -- la
   navigation entre les deux faces se fait par la question du chat et par la
   fenetre de validation, qui nomment leur destination (cf. le commentaire de
   appendLeadHeader). Centre : c'est l'enseigne de la carte, pas un element
   d'en-tete parmi d'autres. */
.aibs-lead-badge {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: var(--aibs-blue-soft);
    color: var(--aibs-blue);
}

.aibs-lead-badge svg {
    width: 22px;
    height: 22px;
}

.aibs-step-heading {
    min-width: 0;
}

/* Rappel du produit : il situe l'etape sans lui voler la vedette. */
.aibs-step-product {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--aibs-blue);
}

/* Titre de l'etape, souligne d'un trait court : le trait donne un debut de
   lecture a la carte, la ou deux titres empiles se confondaient. */
.aibs-step-title {
    margin: 1px 0 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--aibs-navy);
}

.aibs-step-title::after {
    content: "";
    display: block;
    width: 34px;
    height: 3px;
    margin-top: 5px;
    border-radius: 999px;
    background: var(--aibs-blue);
}

/* Les quatre champs, en flux bloc -- exactement comme la colonne de la vue
   coordonnees. C'est ce qui donne aux deux faces de la carte le meme rythme
   vertical : meme empilement, meme marge de ligne (celle de .aibs-field).
   Un conteneur flex ici decalait chaque ligne de quelques pixels, les
   elements flex n'etant pas soumis aux memes regles de marge. */
.aibs-company-fields {
    margin-top: 0;
}

/* Adresse, code postal et ville sur une seule ligne du flux -- une adresse
   postale est une seule information, et la couper sur deux lignes donnait a
   la carte deux etages pour un seul renseignement. La ligne se comporte comme
   n'importe quelle autre ; c'est son interieur qui se partage en trois :
   l'adresse prend la plus grande part, le code postal garde une case fixe
   (cinq chiffres), la ville remplit le reste. */
/* Code postal + ville sur une ligne. (L'adresse a la sienne : voir le
   commentaire dans chat-widget.js.) */
.aibs-field-pair {
    display: flex;
    gap: 12px;
}

.aibs-field-pair>.aibs-field {
    min-width: 0;
}

/* Code postal : largeur fixe -- un code postal fait 5 chiffres, mais la case
   doit tenir son texte d'exemple en entier ("Ex. : 75011"), icone et marges
   internes comprises. A 152px il s'affichait "Ex. : 7501". */
.aibs-field-pair>.aibs-field:nth-child(1) {
    flex: 0 0 172px;
}

/* La ville prend le reste : de quoi ecrire "Saint-Germain-en-Laye". */
.aibs-field-pair>.aibs-field:nth-child(2) {
    flex: 1 1 0;
}

/* Sur ecran etroit les deux champs s'empilent. */
@media (max-width: 419px) {
    .aibs-field-pair {
        display: block;
    }
}


/* Bouton secondaire : revenir en arriere est une action, envoyer en est une
   autre, et les deux ne peuvent pas porter le meme poids visuel. */
.aibs-cta.aibs-cta-ghost {
    background: #ffffff;
    color: var(--aibs-blue);
    border: 1.5px solid var(--aibs-blue);
    margin-bottom: 0;
    padding: 8px 14px;
    font-size: 13px;
}

.aibs-cta.aibs-cta-ghost:hover {
    background: var(--aibs-blue-soft);
    box-shadow: none;
}

.aibs-cta:disabled {
    opacity: .55;
    cursor: default;
}

/* Panneau du formulaire, quand il est rendu hors du fil de conversation.
   La page assistant en affine la mise en page (colonne a droite du chat) ;
   ces regles-ci sont le socle, pour qu'il reste presentable partout ou il
   pourrait apparaitre. */
#aibs-lead-panel {
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 8, 43, 0.14);
    max-height: none;
    overflow-y: visible;
    scrollbar-width: none;
}

#aibs-lead-panel::-webkit-scrollbar {
    display: none;
}

#aibs-lead-panel[hidden] {
    display: none;
}

#aibs-lead-panel .aibs-lead-card {
    padding: 22px;
    /* Colonne flex : les champs s'empilent naturellement, le bouton est
       pousse en bas par margin-top:auto -- les deux vues ont ainsi
       toujours leur bouton au meme niveau vertical. */
    display: flex;
    flex-direction: column;
    /* Hauteur minimale commune aux deux vues : assez pour que la plus
       haute (entreprise, 4 lignes de champs) tienne sans scroller.
       La vue coordonnees (3 champs) comble le vide par le flex-grow
       implicite de l'espace avant le bouton. */
    min-height: 480px;
}

/* Bouton d'envoi ancre en bas de chaque vue : le visiteur le trouve
   toujours au meme endroit, quelle que soit la face ouverte. */
#aibs-lead-panel .aibs-lead-card>.aibs-cta {
    margin-top: auto;
}

/* OUVERTURE D'UNE ETAPE : la carte occupe deja la meme place a l'ecran, et
   son remplacement passait totalement inapercu -- le visiteur lisait "je
   vous ouvre votre demande" sans voir quoi que ce soit s'ouvrir, et se
   demandait si quelque chose s'etait produit. La carte se presente donc :
   elle monte d'un cran en apparaissant, puis un halo bleu la designe le
   temps d'un battement avant de s'effacer. Une seule fois par etape (cf.
   aibs-lead-card-enter, pose par mount). */
#aibs-lead-panel .aibs-lead-card.aibs-lead-card-enter {
    animation: aibs-lead-card-in .48s cubic-bezier(.16, .84, .44, 1) both,
        aibs-lead-card-halo 1.5s ease-out .28s;
}

@keyframes aibs-lead-card-in {
    from {
        opacity: 0;
        transform: translateY(14px) scale(.985);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* Halo qui naît sur le bord de la carte puis se dissipe.
   L'anneau est tire vers l'INTERIEUR (inset) : la carte blanche est le seul
   fond dont on soit sur: elle flotte tantot sur le bleu profond de la page
   assistant, tantot sur le blanc d'une fiche produit, et un halo purement
   exterieur disparaissait sur le bleu -- exactement la ou le visiteur
   attendait le signal. Le halo exterieur reste, en second plan : il elargit
   l'effet quand le fond s'y prete, sans etre ce qui le porte. */
@keyframes aibs-lead-card-halo {
    0% {
        box-shadow: inset 0 0 0 0 rgba(0, 99, 206, .85),
            0 0 0 0 rgba(0, 99, 206, .35);
    }

    45% {
        box-shadow: inset 0 0 0 3px rgba(0, 99, 206, .85),
            0 0 22px 7px rgba(0, 99, 206, .28);
    }

    100% {
        box-shadow: inset 0 0 0 0 rgba(0, 99, 206, 0),
            0 0 0 0 rgba(0, 99, 206, 0);
    }
}

/* Mouvement reduit : l'etape reste SIGNALEE (c'etait tout l'objet), mais
   par le seul halo, sans deplacement ni changement d'echelle. */
@media (prefers-reduced-motion: reduce) {
    #aibs-lead-panel .aibs-lead-card.aibs-lead-card-enter {
        animation: aibs-lead-card-halo 1.5s ease-out;
    }
}

/* Sans en-tete de bulle autour, le titre porte seul le bloc. */
#aibs-lead-panel .aibs-card-title {
    color: var(--aibs-navy);
}

/* Anneau de chargement, pose a la suite du texte d'une bulle (redirection en
   cours). Un arc plus fonce que le reste du cercle donne le mouvement :
   sans lui, un anneau uniforme tournerait sans qu'on le voie tourner. */
/* Bulle + anneau sur une meme ligne, l'anneau HORS du cadre du message.
   La ligne devient l'element de la colonne : c'est elle qui porte le
   cadrage a gauche et la largeur max, la bulle se contentant de remplir
   ce qu'il lui faut a l'interieur. */
.aibs-msg-row {
    display: flex;
    align-items: center;
    gap: 10px;
    align-self: flex-start;
    max-width: 85%;
}

.aibs-msg-row>.aibs-msg {
    /* Deja bornee par la ligne : la garder a 85% la retrecirait deux fois. */
    max-width: none;
    /* Autorise la bulle a se comprimer pour que le texte passe a la ligne
       au lieu de pousser l'anneau hors de la zone visible. */
    min-width: 0;
    /* .aibs-msg.bot cale les bulles en haut (align-self: flex-start) pour la
       colonne de messages. Dans la ligne, ce reglage l'emporterait sur
       align-items et decalerait la bulle de l'anneau : on le neutralise. */
    align-self: center;
}

.aibs-msg-row>.aibs-spinner {
    /* L'espacement vient du gap de la ligne. */
    margin-left: 0;
    flex: none;
}

/* Anneau de PROGRESSION portant un compte : 1, 2, 3, 4. Contrairement a un
   anneau qui tourne sans fin, il dit OU EN EST l'attente -- l'arc bleu
   grandit d'un quart par chiffre et les quatre se repartissent exactement
   sur REDIRECT_DELAY (cf. attachSpinner), le tour se fermant au moment ou la
   page s'ouvre.
   La bordure pleine d'avant est remplacee par un SVG a deux cercles (piste
   + arc) : une bordure CSS ne peut pas etre partielle, et un
   conic-gradient n'aurait pas les bouts arrondis de l'arc. */
.aibs-spinner {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #ffffff;
    /* Un SEUL cercle visible : le halo qui doublait la piste se lisait comme
       un seconde anneau autour du premier. */
    margin-left: 8px;
    flex: none;
}

.aibs-spinner-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* Depart de l'arc a 10 h 30 (315 deg), pas a midi.
       Releve sur la maquette pour l'etape 3 : ses extremites tombent a
       311 deg et 220 deg, donc un arc de 3/4 dont le manque est centre sur
       9 h -- c'est exactement ce que donne un depart a 315 deg. A midi
       (-90deg), le manque se retrouvait en haut a gauche au lieu d'en bas a
       gauche. Sans rotation du tout, stroke-dashoffset partirait de 3 h. */
    transform: rotate(-135deg);
}

.aibs-spinner-track,
.aibs-spinner-arc {
    fill: none;
    stroke-width: 5;
}

.aibs-spinner-track {
    stroke: rgba(0, 99, 206, 0.12);
}

.aibs-spinner-arc {
    stroke: var(--aibs-blue);
    /* Bouts arrondis : c'est ce qui distingue l'arc de progression d'un
       simple secteur. */
    stroke-linecap: round;
    transition: stroke-dashoffset 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}

.aibs-spinner-count {
    /* Au-dessus du SVG (pose en absolute sur toute la pastille) : sans
       contexte d'empilement propre, le chiffre pouvait passer dessous et la
       pastille paraissait vide. */
    position: relative;
    z-index: 1;
    font-size: 20px;
    font-weight: 700;
    /* line-height:1 : sinon l'interligne heritee decentre le chiffre. */
    line-height: 1;
    color: var(--aibs-blue);
    /* Relancee a chaque changement de chiffre (cf. attachSpinner). */
    animation: aibs-count-in 0.25s ease-out;
}

@keyframes aibs-count-in {
    from {
        opacity: 0;
        transform: scale(0.5);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Anneau TERMINE : il ne repart plus avec la bulle, il reste a cote d'elle
   comme la trace de l'etape franchie -- plusieurs anneaux dans un fil sont
   donc normaux, un par ouverture. Tour complet, et un cran de contraste en
   moins : ce qui est fini ne doit pas tirer l'oeil autant que ce qui tourne
   au moment ou on le regarde. */
.aibs-spinner.aibs-spinner-done {
    opacity: .72;
}

.aibs-spinner-done .aibs-spinner-arc {
    transition: none;
}

/* Le chiffre porte l'information : il doit rester lisible et continuer de
   changer, c'est seulement son apparition qui cesse d'etre animee. */
@media (prefers-reduced-motion: reduce) {
    .aibs-spinner-count {
        animation: none;
    }

    /* L'arc saute d'un palier a l'autre au lieu de glisser : il continue
       d'indiquer la progression, sans mouvement continu. */
    .aibs-spinner-arc {
        transition: none;
    }
}

/* ------------------------------------------------------------------
   Accueil, sous 1371px : le chat est pose APRES la section .premiere
   (cf. placeHeroChat dans chat-widget.js), la ou vivait le bandeau de
   chiffres qu'il remplace. Il n'est donc plus dans le hero bleu : il lui
   faut sa propre gouttiere et sa propre respiration.
   ------------------------------------------------------------------ */
@media (max-width: 1370px) {
    #aibs-chat-embed.aibs-hero-embed {
        box-sizing: border-box;
        /* Gouttiere portee par la largeur, pas par un padding : la fenetre
           est positionnee en absolu la-dedans (voir plus bas) et un padding
           ne la contiendrait pas -- l'absolu se cale sur la boite de padding. */
        width: calc(100% - 48px);
        max-width: 520px;
        /* Marge haute NEGATIVE : le chat remonte pour chevaucher la limite
           bleu / blanc, exactement comme le bandeau de chiffres qu'il
           remplace. Pose sous le hero sans ce rappel, il flottait au milieu
           du blanc, detache de la section a laquelle il appartient. */
        margin: -90px auto 8px;
        /* Place reservee dans le flux = la barre de saisie repliee, et elle
           seule. Le depliage ne pousse donc plus la page vers le bas : la
           fenetre grandit VERS LE HAUT, par-dessus le hero (cf. la regle
           suivante). Si la hauteur de la barre change (police, padding),
           c'est cette variable qu'il faut suivre. */
        height: var(--aibs-hero-bar-h, 79px);
        /* .premiere est position:relative : un frere non positionne passerait
           DERRIERE son fond bleu une fois remonte dessus. */
        position: relative;
        z-index: 2;
    }

    /* Ancree par le BAS : le bord bas de la fenetre reste sur la limite
       bleu / blanc, quelle que soit sa hauteur. Repliee elle occupe la barre,
       depliee elle se deroule au-dessus au lieu de repousser la section
       suivante. */
    .aibs-hero-embed #aibs-chat-window.aibs-chat-embedded {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        width: auto;
        min-height: var(--aibs-hero-bar-h, 79px);
    }
}

/* Barre de saisie sur petit ecran : sans min-width:0 le champ refuse de
   descendre sous sa largeur intrinseque et le placeholder se coupait
   ("Ecrivez votre messa"), pendant que le bouton gardait toute sa place. */
@media (max-width: 480px) {
    #aibs-chat-form {
        gap: 6px;
        padding: 10px;
    }

    #aibs-chat-input {
        min-width: 0;
        padding: 10px 14px;
        font-size: 13.5px;
    }

    #aibs-chat-form button[type="submit"] {
        flex: 0 0 auto;
        padding: 0 16px;
        font-size: 13.5px;
    }
}


/* ==================================================================
   Hero d'accueil : avatar, puces d'orientation, micro, bouton d'envoi
   ================================================================== */

/* ---- Avatar de l'assistant ---------------------------------------
   Rendu en ::before plutot qu'en element : les bulles bot sont
   supprimees individuellement (notice.remove(), reading.remove()),
   une ligne avatar + bulle aurait laisse des avatars orphelins.
   ------------------------------------------------------------------ */
.aibs-hero-embed .aibs-msg.bot {
    position: relative;
    /* Releve sur la maquette : avatar a 24px du bord de la carte, bulle a
       95px -- soit 70px de retrait apres les 18px de padding du fil.
       Recalcule a 100px (76px d'avatar + les memes 24px d'air) depuis que
       l'avatar est passe de 60 a 76px. */
    margin-left: 100px;
}

/* La maquette donne a la bulle 43% de la largeur de la carte. Le message
   d'accueil du site est plus long que celui de la maquette (il enumere les
   familles de produits) : 60% lui laisse deux lignes au lieu de quatre, sans
   etaler le texte sur toute la carte.
   Desktop uniquement : sur une carte etroite (mobile), 60% decoupait le
   message en sept lignes et repoussait les puces hors du cadre. */
@media (min-width: 1371px) {
    .aibs-hero-embed .aibs-msg.bot {
        max-width: 60%;
    }
}

.aibs-hero-embed .aibs-msg.bot::before {
    content: "";
    position: absolute;
    left: -100px;
    top: 0;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    /* Icone robot de la maquette (SVG : nette a toute taille). Elle porte
       ses propres couleurs et son propre socle : ni disque de fond ni
       bordure -- le fond bleu et le cercle blanc etaient la pour l'ancien
       PNG (pictogramme blanc sur transparent), ils encadraient maintenant
       une icone qui n'en a pas besoin. */
    background: url("../../images/chatbot-avatar-robot.svg") center / contain no-repeat;
    border: 0;
    /* Ombre retiree avec le disque : portee par une boite transparente, elle
       dessinait un cercle gris autour de l'icone. */
}

/* Une seule bulle porte l'avatar quand l'assistant enchaine plusieurs
   messages : la colonne d'avatars repetes alourdissait la carte. */
.aibs-hero-embed .aibs-msg.bot+.aibs-msg.bot::before {
    display: none;
}

/* ---- Puces d'orientation ----------------------------------------- */
/* Sur la maquette la rangee de puces n'est PAS en retrait sous la bulle :
   elle part du bord gauche de la carte et occupe presque toute sa largeur. */
.aibs-hero-chips {
    margin-top: 14px;
    margin-left: 0;
    gap: 14px;
}

.aibs-hero-chips .aibs-chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    border-radius: 999px;
    /* 40px de haut, comme la maquette. */
    padding: 10px 18px;
    font-size: 14px;
}

.aibs-hero-chips .aibs-chip svg {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    color: var(--aibs-blue);
}

/* ---- Micro dans la barre de saisie ------------------------------- */
#aibs-chat-form button#aibs-chat-mic {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    background: #f1f5f9;
    color: var(--aibs-navy);
    border: 1.5px solid #cbd5e1;
}

#aibs-chat-form button#aibs-chat-mic svg {
    width: 19px;
    height: 19px;
}

#aibs-chat-form button#aibs-chat-mic:hover:not(:disabled) {
    background: var(--aibs-blue-soft);
    border-color: var(--aibs-blue);
}

#aibs-chat-form button#aibs-chat-mic:disabled {
    opacity: 0.45;
    cursor: default;
    background: #f1f5f9;
}

/* Dictee en cours : le bouton passe en bleu et pulse. */
#aibs-chat-form button#aibs-chat-mic.listening {
    background: var(--aibs-blue);
    border-color: var(--aibs-blue);
    color: #ffffff;
    animation: aibs-mic-pulse 1.4s ease-in-out infinite;
}

@keyframes aibs-mic-pulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(0, 99, 206, 0.45);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(0, 99, 206, 0);
    }
}

/* ---- Bouton d'envoi : avion en papier + libelle ------------------ */
#aibs-chat-form button[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#aibs-chat-form button[type="submit"] .aibs-send-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

/* ---- Hauteur de la carte ----------------------------------------
   L'avatar (40px) et la rangee de puces (~40px) s'ajoutent au message
   d'accueil : a 320px la barre de saisie etait comprimee contre lui.
   ------------------------------------------------------------------ */
.aibs-hero-embed #aibs-chat-window.aibs-chat-embedded,
.aibs-hero-embed #aibs-chat-window.aibs-chat-embedded:not(.aibs-collapsed) {
    max-height: 420px;
}

/* Sous 600px la barre de saisie n'a plus la place de porter quatre
   boutons de 44px : le micro cede sa place au champ de texte. */
@media (max-width: 600px) {
    #aibs-chat-form button#aibs-chat-mic {
        display: none;
    }

    .aibs-hero-embed .aibs-msg.bot,
    .aibs-hero-chips {
        margin-left: 0;
    }

    .aibs-hero-embed .aibs-msg.bot::before {
        display: none;
    }
}


/* La carte du hero occupe desormais toute la hauteur libre sous la rangee
   de boutons (hauteur posee en JS, cf. alignChatHeightToCards) : le fil est
   colle en BAS pour que la bulle d'accueil et ses puces restent juste
   au-dessus de la barre de saisie, comme dans une conversation qui grandit
   vers le haut. Sans ca, la bulle flottait seule en haut d'une grande carte
   vide. */
@media (min-width: 1371px) {
    .aibs-hero-embed #aibs-chat-window.aibs-chat-embedded:not(.aibs-collapsed) #aibs-chat-messages {
        justify-content: flex-start;
    }
}


/* `.slogan span { color: #0063ce }` (acceuil.css) s'applique au chat une
   fois celui-ci monte dans .slogan (desktop) : le libelle "Envoyer" y
   passait en bleu sur fond bleu, donc invisible. Les libelles du widget
   reprennent la couleur de leur bouton. */
#aibs-chat-window span,
#aibs-chat-window .aibs-chip span,
#aibs-chat-form button span {
    color: inherit;
}

/* Exception a la regle ci-dessus : le chiffre de l'anneau est un <span> dans
   le chat, il heritait donc du blanc du hero -- invisible sur la pastille
   blanche. Selecteur porte a la meme specificite (un id) pour l'emporter. */
#aibs-chat-window .aibs-spinner-count,
.aibs-spinner-count {
    color: var(--aibs-blue);
}


/* ------------------------------------------------------------------
   Rythme interieur de la carte du hero, mis a l'echelle de la maquette.

   Rapports releves sur la maquette (carte 654 x 210) :
     padding haut  7 %   bulle 31 %   air 9,5 %
     puces 19 %          air 8,6 %    barre de saisie 25 %
   La carte du site est plus haute (~343px a 1900px de large) : gardee au
   rythme d'origine, elle laissait une bande vide au-dessus de la bulle.
   Les tailles ci-dessous suivent donc la carte plutot que le widget
   flottant (qui garde, lui, ses valeurs compactes).

   Reserve aux ecrans larges (>= 1650px) : entre 1371 et 1650px la colonne
   de texte est bien plus courte (632px a 1440px) et la carte, calee sur le
   bas de la photo, n'y depasse pas ~275px de haut. Ce rythme elargi y
   debordait -- bulle tronquee en haut, quatrieme puce rejetee hors du
   cadre. En dessous de 1650px, le rythme compact d'origine s'applique.
   ------------------------------------------------------------------ */
@media (min-width: 1650px) {
    .aibs-hero-embed #aibs-chat-window.aibs-chat-embedded:not(.aibs-collapsed) #aibs-chat-messages {
        padding: 18px 22px;
        gap: 12px;
    }

    .aibs-hero-embed #aibs-chat-window.aibs-chat-embedded:not(.aibs-collapsed) .aibs-msg {
        font-size: 16px;
        line-height: 1.35;
        padding: 14px 18px;
    }

    .aibs-hero-embed #aibs-chat-window.aibs-chat-embedded:not(.aibs-collapsed) .aibs-hero-chips {
        margin-top: 14px;
        gap: 12px;
    }

    .aibs-hero-embed #aibs-chat-window.aibs-chat-embedded:not(.aibs-collapsed) .aibs-hero-chips .aibs-chip {
        padding: 11px 20px;
        font-size: 15px;
    }

    .aibs-hero-embed #aibs-chat-window.aibs-chat-embedded:not(.aibs-collapsed) .aibs-hero-chips .aibs-chip svg {
        width: 18px;
        height: 18px;
    }

    /* Barre de saisie : 25 % de la hauteur de la carte sur la maquette. */
    .aibs-hero-embed #aibs-chat-window.aibs-chat-embedded #aibs-chat-form {
        padding: 12px 20px;
        gap: 10px;
    }

    .aibs-hero-embed #aibs-chat-window.aibs-chat-embedded #aibs-chat-input {
        height: 44px;
        line-height: 44px;
        font-size: 15px;
    }

    .aibs-hero-embed #aibs-chat-window.aibs-chat-embedded #aibs-chat-form button#aibs-chat-mic {
        width: 44px;
        height: 44px;
    }

    .aibs-hero-embed #aibs-chat-window.aibs-chat-embedded #aibs-chat-form button[type="submit"] {
        height: 44px;
        padding: 0 22px;
        font-size: 15px;
    }
}


/* Le fil est colle en BAS, contre la barre de saisie : la carte monte
   desormais jusqu'au haut de la rangee de boutons (cf.
   alignChatHeightToCards), il y reste donc ~230px de libre avec le seul
   message d'accueil. Centre, cet excedent se coupait en deux et laissait
   un vide flagrant ENTRE les puces et la barre de saisie -- alors que la
   bulle est censee sortir de cette barre. Tout l'espace libre passe donc
   au-dessus, ou il se lit comme un debut de conversation. */
@media (min-width: 1371px) {
    .aibs-hero-embed #aibs-chat-window.aibs-chat-embedded:not(.aibs-collapsed) #aibs-chat-messages {
        justify-content: flex-start;
    }
}


/* Mobile : le message d'accueil (4 lignes) + les puces sur deux rangees
   depassaient du plafond de base (210px, cf. plus haut) -- la seconde
   rangee etait coupee par la barre de saisie. Plafond leve pour le hero
   uniquement -- la bulle flottante des autres pages garde sa hauteur
   compacte. */
@media (max-width: 1370px) {

    /* Le bouton "Nos produits" du hero (.mobile, avec son menu deroulant)
       sort en dessous de 1371px : c'est le chat qui prend le relais a cette
       largeur (il est pose juste apres la section, cf. placeHeroChat), et le
       bouton debordait de .premiere par le bas -- il fallait decaler le chat
       pour ne pas le couvrir. Les memes produits restent accessibles par le
       menu burger de l'entete. Regle posee ici plutot que dans acceuil.css :
       c'est l'arrivee du chat qui la motive.

       visibility ET NON display:none : le bloc doit GARDER SA PLACE. Retire
       du flux, .slogan raccourcissait et toute la composition du hero
       remontait (photo, titre incruste et chat compris). Cache en
       visibility, il n'est plus ni visible ni survolable -- son menu
       deroulant non plus -- mais la mise en page ne bouge pas d'un pixel. */
    .slogan .mobile {
        visibility: hidden;
    }

    /* Depliee, la carte doit MONTER jusque sur la photo du hero (demande
       explicite) et s'arreter la : elle est ancree par le bas (cf.
       --aibs-hero-bar-h), c'est donc sa hauteur qui decide jusqu'ou elle
       remonte. */
    /* Plein format reserve a une CONVERSATION en cours (.aibs-hero-convo,
       posee des le premier message du visiteur) : a l'ouverture il n'y a que
       le message d'accueil et les puces, une carte de la hauteur de la photo
       se serait ouverte quasi vide. */
    .aibs-hero-embed #aibs-chat-window.aibs-chat-embedded.aibs-hero-convo:not(.aibs-collapsed) {
        /* min-height ET max-height : un simple plafond ne fait que PERMETTRE
           la hauteur, la carte se contentait alors de son contenu et ne
           remontait pas. Le plancher l'oblige a remonter, le plafond
           l'empeche de depasser.
           --aibs-hero-open-h est mesuree par placeHeroChat : c'est la
           distance entre le bas de la carte et le HAUT DE LA PHOTO du hero.
           La carte recouvre donc exactement la photo, sans monter derriere
           l'entete blanche. Le repli (JS absent) reste une hauteur bornee :
           le bord bas de la carte est fixe par la mise en page du hero, pas
           par le viewport, donc un vh seul passerait sous l'entete sur les
           grands ecrans. */
        min-height: var(--aibs-hero-open-h, min(700px, calc(100vh - 240px)));
        max-height: var(--aibs-hero-open-h, min(700px, calc(100vh - 240px)));
    }

    /* Plafond de remontee -- AVANT le premier message seulement.
       La carte est ancree par le bas : plus elle est haute, plus son bord
       HAUT monte. A l'accueil (message de bienvenue + puces) elle venait
       se poser exactement sur la ligne animee du titre ("Votre courtier,
       qui compte 9 clients satisfaits sur 10"), qui disparaissait dessous
       sous ~500px de large. --aibs-hero-max-h, mesuree par placeHeroChat,
       vaut la distance entre le bas de la carte et le bas du TEXTE du
       hero, moins une garde.
       Des qu'une conversation demarre (.aibs-hero-convo), le plafond est
       LEVE : la carte doit alors recouvrir la photo (regle ci-dessus,
       --aibs-hero-open-h), le titre passe derriere -- c'est voulu. */
    .aibs-hero-embed #aibs-chat-window.aibs-chat-embedded:not(.aibs-hero-convo):not(.aibs-collapsed) {
        max-height: var(--aibs-hero-max-h, none);
    }

    /* Le fil prend tout ce que la carte offre, moins la barre de saisie
       (~69px) et les paddings : sans ce relais, la carte grandissait mais le
       fil restait plafonne et laissait un vide blanc en haut. L'ecriture
       reste en HAUT de la carte (defaut flex) : le fil se lit de haut en bas,
       et il se remplit de toute facon en descendant. */
    .aibs-hero-embed #aibs-chat-window.aibs-chat-embedded.aibs-hero-convo:not(.aibs-collapsed) #aibs-chat-messages {
        flex: 1 1 auto;
        max-height: none;
        min-height: 0;
    }

    /* Avant le premier message : la carte garde la hauteur de son contenu.
       Le plafond laisse passer le message d'accueil (4 lignes) et les puces
       sur deux rangees -- 210px (regle de base) les coupaient. */
    .aibs-hero-embed #aibs-chat-window.aibs-chat-embedded:not(.aibs-hero-convo):not(.aibs-collapsed) #aibs-chat-messages {
        max-height: 255px;
    }
}


/* ------------------------------------------------------------------
   Placement horizontal : la carte deborde la colonne de texte.

   Releve sur la maquette (viewport 1289) : titre et boutons commencent a
   110px, mais la carte du chat commence a 68px et finit a 722px -- elle
   sort donc de la colonne de 42px a GAUCHE (3,26 % de la largeur) et
   s'arrete a 56 % de la largeur de page. C'est un panneau flottant pose
   sur le bleu, volontairement decale du bord de la grille, pas un bloc
   aligne sur le titre.

   Les deux bords sont decales de la MEME valeur : la largeur (50,5 % de la
   page, cf. alignChatToBand) reste celle de la maquette, seul le centre se
   deplace. Au-dela de 1590px, `alignChatToBand` peut poser une largeur en
   ligne (plancher historique) : le decalage tient quand meme, il est porte
   par `left`.

   max(...) : sur les petits ecrans desktop la gouttiere ne fait plus 168px,
   le decalage est alors borne pour garder 24px de marge au bord de page.
   ------------------------------------------------------------------ */
@media (min-width: 1371px) {
    .slogan #aibs-chat-embed {
        --aibs-hero-shift: min(3.26vw, calc(var(--hero-buttons-left, 168px) - 24px));
        left: calc(-1 * var(--aibs-hero-shift));
        right: var(--aibs-hero-shift);
    }
}


/* ------------------------------------------------------------------
   Puces : etirees a parts egales sur toute la largeur de la carte.

   Releve sur la maquette (carte 668 de large) : Auto 33-186,
   Habitation 194-345, Sante 353-500, Professionnel 508-660 -- quatre
   largeurs quasi identiques (~150px) qui vont d'un bord a l'autre.
   A largeur naturelle elles s'arretaient aux deux tiers de la carte et
   laissaient un vide a droite.

   Desktop uniquement : sur une carte etroite, quatre colonnes de meme
   largeur tomberaient a ~70px et couperaient "Professionnel". En dessous
   de 1371px les puces gardent leur largeur naturelle et passent sur deux
   rangees.
   ------------------------------------------------------------------ */
@media (min-width: 1371px) {
    .aibs-hero-embed .aibs-hero-chips {
        flex-wrap: nowrap;
    }

    .aibs-hero-embed .aibs-hero-chips .aibs-chip {
        /* 1 1 0 : la largeur du libelle ne compte plus dans le partage,
           les quatre colonnes sont donc egales -- "Auto" occupe autant que
           "Professionnel", comme sur la maquette. */
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
    }
}