/* ==========================================================================
   Page dediee de l'assistant (assistant.html)

   STRUCTURE
     1. Bandeau plein ecran, en deux colonnes : le discours a gauche, le chat
        a droite. Le chat n'est plus un encart qui remonte par-dessus une
        section : il EST la moitie droite du premier ecran.
     2. Bande "parcours" : trois etapes en ligne, numeros fantomes.
     3. Bande "exemples" : six phrases cliquables.
     4. Bande "alternatives" : catalogue et rendez-vous, en pied.

   PARTIS PRIS
     - PROFONDEUR PAR COUCHES. Le bandeau n'est pas un aplat : bleu de base,
       halos radiaux, trame de points. Un aplat de bleu sur un ecran entier
       ecrase tout ce qui est pose dessus.
     - UNE SEULE OMBRE, DECLINEE. Trois intensites d'une meme recette, plutot
       qu'une ombre inventee par composant.
     - LE CHAT EST LE HEROS. Il porte l'ombre la plus marquee ; tout le reste
       s'efface d'un cran.

   Les couleurs de base viennent de chat-widget.css, charge avant cette
   feuille ; les tokens ci-dessous n'existent que pour cette page.
   ========================================================================== */

.assistant-page {
    --a-shadow-sm: 0 1px 2px rgba(0, 8, 43, .04), 0 4px 12px rgba(0, 8, 43, .05);
    --a-shadow-md: 0 2px 4px rgba(0, 8, 43, .04), 0 12px 28px rgba(0, 8, 43, .08);
    --a-shadow-lg: 0 4px 8px rgba(0, 8, 43, .05), 0 24px 56px rgba(0, 8, 43, .13);
    --a-shadow-xl: 0 8px 16px rgba(0, 8, 43, .08), 0 40px 80px rgba(0, 8, 43, .22);
    --a-shadow-blue: 0 8px 24px rgba(0, 99, 206, .22);

    --a-border: rgba(0, 8, 43, .08);
    --a-ease: cubic-bezier(.22, .61, .36, 1);

    font-family: "Outfit", sans-serif;
    color: var(--aibs-navy);
    background: #ffffff;
}

/* Gouttiere commune a toutes les bandes : sans elle, chaque section
   redefinissait sa propre largeur max et rien ne s'alignait verticalement
   d'une bande a l'autre. */
.assistant-shell {
    max-width: 1560px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Surtitre : donne un point d'entree a chaque bande sans ajouter un
   deuxieme niveau de titre qui casserait la hierarchie h1 > h2. */
.assistant-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--aibs-blue);
}

.assistant-eyebrow::before {
    content: "";
    width: 26px;
    height: 2px;
    border-radius: 2px;
    background: var(--aibs-blue);
}

.assistant-section-title {
    margin: 0 0 14px;
    font-size: clamp(27px, 3.4vw, 42px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.025em;
}

.assistant-section-lede {
    max-width: 62ch;
    margin: 0 0 44px;
    font-size: clamp(15.5px, 1.4vw, 18px);
    line-height: 1.55;
    color: var(--aibs-gray-text);
}

/* ==========================================================================
   1. BANDEAU : discours + chat
   ========================================================================== */

/* bg_menu.svg est un aplat de bleu de marque, pas une image claire : le texte
   est donc blanc sur bleu (du navy dessus tombait a 1.3:1, illisible). La
   couleur de fond double l'image pour que le rendu tienne si elle ne charge
   pas, et les couches ci-dessous lui donnent le relief qui lui manque. */
.assistant-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-color: #0057ca;
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
    padding: clamp(26px, 3vw, 44px) 0 clamp(30px, 3.4vw, 50px);
    color: #ffffff;
}

/* Couche 1 : halos radiaux, qui creusent le bandeau en diagonale (clair en
   haut a gauche, sombre en bas a droite) au lieu de le laisser plat. */
.assistant-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(110% 85% at 8% -10%, rgba(130, 195, 255, .42) 0%, rgba(130, 195, 255, 0) 55%),
        radial-gradient(95% 90% at 105% 110%, rgba(0, 20, 70, .55) 0%, rgba(0, 20, 70, 0) 62%);
}

/* Couche 2 : trame de points tres discrete, qui donne une matiere au bleu
   sans jamais devenir un motif que l'on remarque. */
.assistant-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
}

/* Gouttiere commune aux autres bandes. */
.assistant-hero-grid {
    max-width: 1560px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Deux colonnes : le discours a gauche, le chat a droite -- sans texte, le
   bandeau laissait de grands vides bleus de part et d'autre du chat des que
   l'ecran depassait sa largeur (850px). Empile en dessous de 1100px, faute
   de place pour les deux cote a cote. */
.assistant-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 40px;
}

@media (min-width: 1100px) {
    /* Deux pistes en tout temps (jamais 1 <-> 2) : c'est ce qui permet a la
       transition ci-dessous de glisser d'une largeur a l'autre au lieu de
       sauter -- une piste qui apparait/disparait ne s'anime pas, une piste
       qui retrecit jusqu'a 0 s'anime. */
    .assistant-hero-inner {
        grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
        gap: 56px;
        transition: grid-template-columns .5s var(--a-ease), gap .5s var(--a-ease);
    }

    /* Le formulaire ouvert reclame toute la largeur (cf. plus bas) : le
       discours s'efface, le chat + panneau reprennent seuls toute la
       colonne. */
    .assistant-hero-inner:has(#aibs-lead-panel:not([hidden])) {
        grid-template-columns: 0px minmax(0, 1fr);
        gap: 0px;
    }

    /* Largeur FIXE (pas celle, retrecissante, de sa piste) : sans elle le
       texte se remettait a la ligne au fur et a mesure que la piste
       retrecissait vers 0, jusqu'a une colonne d'un caractere de large et
       hors de proportion de haut -- qui gonflait la hauteur de toute la
       grille (donc du bandeau entier) pendant la transition. Fixee, la boite
       garde sa mise en page normale et deborde simplement, invisible, de sa
       piste retrecie. */
    .assistant-hero-copy {
        width: 420px;
        opacity: 1;
        transform: translateX(0);
        transition: opacity .35s ease, transform .4s var(--a-ease);
    }

    .assistant-hero-inner:has(#aibs-lead-panel:not([hidden])) .assistant-hero-copy {
        opacity: 0;
        transform: translateX(-24px);
        pointer-events: none;
    }
}

.assistant-hero-copy {
    min-width: 0;
}

.assistant-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    padding: 6px 14px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .14);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #ffffff;
}

.assistant-hero-title {
    margin: 0 0 14px;
    font-size: clamp(24px, 2.4vw, 32px);
    font-weight: 800;
    line-height: 1.2;
    color: #ffffff;
}

.assistant-hero-lede {
    margin: 0 0 22px;
    font-size: 15.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .82);
}

.assistant-hero-points {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.assistant-hero-points li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    line-height: 1.45;
    color: rgba(255, 255, 255, .92);
}

/* Coche plutot qu'un point vert : un point colore lu comme un statut "en
   ligne" ici, alors que ces lignes sont des arguments (rapide, exhaustif,
   sans tarif invente), pas un indicateur de disponibilite. */
.assistant-hero-points li::before {
    content: "";
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5L6.5 11.5L12.5 4.5' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 9px 9px;
}

@media (max-width: 1099px) {
    .assistant-hero-copy {
        text-align: center;
    }

    .assistant-hero-points {
        align-items: center;
    }

    .assistant-hero-points li {
        justify-content: center;
    }
}

/* Titre hors ecran : la page garde un h1 pour les moteurs et les lecteurs
   d'ecran, sans rien afficher. clip-path plutot que display:none, qui le
   sortirait aussi de l'arbre d'accessibilite. */
.assistant-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ---------------------------------------------------------- colonne chat */

.assistant-chat-col {
    min-width: 0;
}

/* chat-widget.css borne #aibs-chat-embed a 520px : une valeur calee sur le
   hero de l'accueil. Ici le conteneur porte deux enfants -- la fenetre de
   chat et le panneau du formulaire -- poses cote a cote. Tant qu'aucun
   formulaire n'est ouvert, le panneau est `hidden` et le chat occupe seul
   toute la largeur (celle de sa colonne dans .assistant-hero-inner, pas
   tout le bandeau : le discours occupe l'autre colonne). */
#aibs-chat-embed.assistant-chat {
    max-width: 860px;
    margin: 0 auto;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 20px;
}

/* Le panneau apparait : le chat lui cede un peu plus du tiers de la largeur.
   :has() cible le conteneur d'apres l'etat de son enfant, sans que le script
   ait a poser une classe supplementaire. */
/* 1100px et non 900px : c'est le meme seuil que .assistant-hero-inner. Entre
   les deux, le bandeau etait deja empile (discours au-dessus du chat) mais le
   panneau, lui, se mettait a cote du chat -- ce dernier tombait alors sous
   400px, la barre de saisie debordait et les bulles se coupaient. Les deux
   bascules se font desormais au meme moment. */
@media (min-width: 1100px) {
    /* Piste 0px plutot qu'absente : voir la note sur .assistant-hero-inner --
       une piste qui apparait ne s'anime pas, une piste qui grandit depuis 0,
       si. max-width/margin s'animent avec, la carte s'etire au meme rythme
       que le panneau se devoile a cote d'elle. */
    #aibs-chat-embed.assistant-chat {
        grid-template-columns: minmax(0, 1fr) 0px;
        transition: grid-template-columns .5s var(--a-ease), max-width .5s var(--a-ease), margin .5s var(--a-ease);
    }

    /* Le CHAT est la section la plus large : il prend tout l'espace
       disponible, le panneau garde une largeur fixe (confortable pour ses
       deux colonnes coordonnees/pieces, jamais etiree). */
    #aibs-chat-embed.assistant-chat:has(#aibs-lead-panel:not([hidden])) {
        max-width: none;
        margin: 0;
        /* Piste elastique et non 600px fixes : a 1100-1400px, 600px fixes ne
           laissaient pas au chat de quoi afficher sa barre de saisie. Elle
           plafonne a 600px des que l'ecran le permet. */
        grid-template-columns: minmax(360px, 1fr) minmax(0, clamp(380px, 44%, 600px));
    }

    /* Sans ceci, "tout le reste" restait borne aux 1560px de gouttiere
       commune a toutes les bandes de la page : sur un ecran large, le bleu
       de part et d'autre du bloc blanc ne servait a rien pendant que le
       panneau, lui, restait a l'etroit. Cette bande est la seule a devoir
       utiliser la largeur de l'ecran une fois le panneau ouvert -- les
       autres (parcours, exemples...) gardent leur gouttiere normale. */
    .assistant-hero-grid {
        transition: max-width .5s var(--a-ease);
    }

    .assistant-hero-grid:has(#aibs-lead-panel:not([hidden])) {
        max-width: min(96vw, 2200px);
    }

    /* chat-widget.css cache le panneau avec display:none (`[hidden]`), qui ne
       s'anime pas : ici il reste dans la piste 0px ci-dessus (invisible faute
       de place) pendant que sa propre opacite/translation prennent le relais
       pour l'entree en fondu, une fois la piste assez large pour l'accueillir. */
    .assistant-chat #aibs-lead-panel[hidden] {
        display: block;
        opacity: 0;
        transform: translateX(24px);
        pointer-events: none;
    }

    .assistant-chat #aibs-lead-panel {
        opacity: 1;
        transform: translateX(0);
        transition: opacity .4s ease .1s, transform .45s var(--a-ease) .1s;
    }
}

/* Le panneau se cale exactement sur la hauteur du chat. */
#aibs-lead-panel {
    min-width: 0;
    height: clamp(420px, 60vh, 560px);
    overflow-y: auto;
    scrollbar-width: none;
    border-radius: 24px;
    background: #ffffff;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .9),
        var(--a-shadow-xl);
}

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

.aibs-lead-card {
    padding: 20px 22px;
}

/* Le bouton d'envoi au MEME endroit sur les deux faces de la carte : au bas
   du panneau, quelle que soit la longueur du texte au-dessus. Les deux vues
   n'ont pas le meme nombre de lignes de consigne -- laisser le bouton suivre
   le contenu le faisait sauter d'une trentaine de pixels en changeant
   d'onglet. La carte prend donc toute la hauteur du panneau et pousse le
   bouton en bas.
   Uniquement au-dessus de 1100px : c'est la que le panneau tient une hauteur
   fixe (celle du chat) et qu'un "bas de carte" veut dire quelque chose. En
   dessous il s'allonge avec son contenu, et le bouton le suit -- il est le
   dernier element des deux vues, il est donc de toute facon au meme endroit. */
@media (min-width: 1100px) {
    #aibs-lead-panel .aibs-lead-card {
        box-sizing: border-box;
        min-height: 100%;
        display: flex;
        flex-direction: column;
    }

    #aibs-lead-panel .aibs-lead>.aibs-cta {
        margin-top: auto;
    }
}

/* Les deux colonnes internes (coordonnees / pieces a joindre) basculent dans
   chat-widget.css sur une media query a 520px -- une mesure de l'ECRAN. Ici
   le panneau ne fait qu'une fraction de l'ecran : a 1100-1250px il tombe sous
   500px alors que la media query, elle, croit avoir la place, et les deux
   colonnes (200 + 240 + filet) debordaient. Requete de conteneur : la
   bascule suit la largeur reelle du panneau. */
#aibs-lead-panel {
    container-type: inline-size;
}

@container (max-width: 560px) {
    .aibs-lead-grid {
        flex-wrap: wrap;
    }

    .aibs-lead-fields {
        flex: 1 1 100%;
        min-width: 0;
    }
}

/* Code postal + ville sur une ligne : il faut environ 380px pour que chacune
   tienne son texte d'exemple. La media query de chat-widget.css mesure
   l'ECRAN ; ici c'est le panneau qui compte -- vers 1100-1250px il se
   retrecit alors que l'ecran croit avoir la place. Sous ce seuil les deux
   cases s'empilent : mieux vaut deux lignes lisibles que deux tronquees. */
@container (max-width: 400px) {
    .aibs-field-pair {
        display: block;
    }
}

/* Dans le panneau, le formulaire n'est plus une bulle : il reprend la
   typographie d'un vrai bloc de saisie. */
.aibs-lead-card .aibs-card-title {
    font-size: 18px;
    margin-bottom: 6px;
}

.aibs-lead-card .aibs-card-note {
    font-size: 13px;
    margin-bottom: 14px;
}

.aibs-lead-card label.aibs-field {
    margin-top: 6px;
}

.aibs-lead-card label.aibs-field span {
    font-size: 12px;
    margin-bottom: 3px;
}

.aibs-lead-card label.aibs-field input {
    padding: 8px 12px;
    font-size: 14px;
}

.aibs-lead-card .aibs-cta {
    margin-top: 28px;
    padding: 11px 16px;
    font-size: 14px;
}

/* Sous 1100px le panneau repasse sous le chat : cote a cote, ni l'un ni
   l'autre n'a plus sa largeur utile. */
@media (max-width: 1099px) {
    #aibs-lead-panel {
        height: auto;
        max-height: none;
    }
}

/* Seule la HAUTEUR est propre a cette page (le chat doit tenir dans le
   bandeau, a la hauteur du panneau de formulaire). Tout l'habillage --
   rayon, ombre, fond, bulles, barre de saisie -- reste celui de
   chat-widget.css, pour que ce chat soit identique a celui de l'accueil. */
.assistant-chat #aibs-chat-window.aibs-chat-embedded {
    height: clamp(420px, 60vh, 560px);
}

.assistant-legal {
    /* Centree sous la carte de chat : meme borne de largeur et meme centrage
       que #aibs-chat-embed.assistant-chat (860px, margin auto), sinon la
       mention s'etale sur toute la colonne et parait decalee. */
    max-width: 860px;
    margin: 12px auto 0;
    padding: 0 4px;
    font-size: 12px;
    line-height: 1.45;
    text-align: center;
    color: rgba(255, 255, 255, .62);
}

/* Formulaire ouvert : la carte perd sa borne et son centrage, la mention
   suit pour rester centree sous elle.

   "Sous elle" veut dire sous la FENETRE DE CHAT, pas sous la rangee entiere :
   la mention parle de ce que fait l'assistant. Etalee sur toute la largeur
   (chat + panneau), son centre tombait au milieu de la rangee, donc a droite
   du chat -- visiblement decalee par rapport a la carte qu'elle commente.
   Elle reprend donc la largeur de la premiere piste de la grille : le total
   moins le panneau (meme clamp qu'a la ligne 335) et moins la gouttiere. */
@media (min-width: 1100px) {
    .assistant-chat-col:has(#aibs-lead-panel:not([hidden])) .assistant-legal {
        max-width: none;
        box-sizing: border-box;
        width: calc(100% - clamp(380px, 44%, 600px) - 20px);
        margin-left: 0;
        margin-right: auto;
    }
}

/* Le flux de messages n'a plus de plafond fixe : il occupe la hauteur de la
   carte ci-dessus (sur l'accueil, un plafond en px est pose pour la bulle
   flottante). Aucun autre reglage : meme habillage que l'accueil. */
.assistant-chat #aibs-chat-messages {
    max-height: none !important;
    flex: 1 1 auto;
}

/* La barre de saisie reste collee au bas de la carte, quelle que soit la
   longueur de la conversation. */
.assistant-chat #aibs-chat-form {
    margin-top: auto;
}

/* ==========================================================================
   2. PARCOURS : trois etapes en ligne
   ========================================================================== */

.assistant-how {
    padding: clamp(64px, 8vw, 104px) 0 clamp(48px, 6vw, 72px);
}

.assistant-how .assistant-section-title {
    margin-bottom: 48px;
}

.assistant-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

/* Le numero est traite en filigrane : gros, en creux, derriere le titre.
   Il sert de reperage visuel, pas de contenu a lire -- d'ou aria-hidden
   implicite via un simple span decoratif. */
.assistant-steps li {
    position: relative;
    padding: 30px 26px 28px;
    border-radius: 22px;
    background: #ffffff;
    border: 1px solid var(--a-border);
    box-shadow: var(--a-shadow-sm);
    transition: transform .22s var(--a-ease), box-shadow .22s var(--a-ease);
}

.assistant-steps li:hover {
    transform: translateY(-3px);
    box-shadow: var(--a-shadow-md);
}

/* La fleche entre deux etapes remplace le filet vertical de l'ancienne
   colonne : en ligne, c'est elle qui dit le sens de lecture. Masquee des
   que les cartes s'empilent, ou elle pointerait dans le vide. */
.assistant-steps li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -18px;
    width: 24px;
    height: 24px;
    margin-top: -12px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c3d3e6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.assistant-step-num {
    display: block;
    margin-bottom: 14px;
    font-size: 44px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.03em;
    background: linear-gradient(160deg, rgba(0, 99, 206, .9) 0%, rgba(0, 99, 206, .25) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.assistant-step-title {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.01em;
}

.assistant-step-text {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--aibs-gray-text);
}

/* ==========================================================================
   3. EXEMPLES
   ========================================================================== */

.assistant-examples {
    padding: clamp(40px, 5vw, 64px) 0 clamp(64px, 8vw, 100px);
}

.assistant-example-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 18px;
}

/* Chaque carte porte un filet bleu en haut, revele au survol : le geste
   signale que la carte est cliquable avant meme le changement de fond. */
.assistant-example {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 26px 26px 24px;
    border: 1px solid var(--a-border);
    border-radius: 24px;
    background: #ffffff;
    box-shadow: var(--a-shadow-sm);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color .24s var(--a-ease), transform .24s var(--a-ease),
                box-shadow .24s var(--a-ease), border-color .24s var(--a-ease);
}

.assistant-example::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--aibs-blue), #6aa9f0);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .28s var(--a-ease);
}

.assistant-example-tag {
    padding: 5px 13px;
    border-radius: 999px;
    background: var(--aibs-blue-soft);
    color: var(--aibs-blue);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    transition: background-color .24s var(--a-ease), color .24s var(--a-ease);
}

.assistant-example-quote {
    font-size: 17px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--aibs-navy);
    transition: color .24s var(--a-ease);
}

/* "Demarrer" n'apparait qu'au survol : au repos il ferait six boutons de
   plus dans une grille qui en compte deja six. margin-top:auto le colle en
   bas, pour que les cartes de hauteurs differentes restent alignees. */
.assistant-example-go {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: auto;
    padding-top: 4px;
    font-size: 14px;
    font-weight: 600;
    color: var(--aibs-blue);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .24s var(--a-ease), transform .24s var(--a-ease), color .24s var(--a-ease);
}

.assistant-example-go::after {
    content: "\2192";
    font-size: 15px;
}

.assistant-example:hover,
.assistant-example:focus-visible {
    background: var(--aibs-blue);
    border-color: var(--aibs-blue);
    transform: translateY(-4px);
    box-shadow: var(--a-shadow-lg);
}

.assistant-example:hover::before,
.assistant-example:focus-visible::before {
    transform: scaleX(1);
}

.assistant-example:hover .assistant-example-quote,
.assistant-example:focus-visible .assistant-example-quote {
    color: #ffffff;
}

.assistant-example:hover .assistant-example-tag,
.assistant-example:focus-visible .assistant-example-tag {
    background: rgba(255, 255, 255, .2);
    color: #ffffff;
}

.assistant-example:hover .assistant-example-go,
.assistant-example:focus-visible .assistant-example-go {
    opacity: 1;
    transform: translateY(0);
    color: #ffffff;
}

/* ==========================================================================
   4. ALTERNATIVES
   ========================================================================== */

/* Bande bleu pale en pied : elle ferme la page et separe nettement ces deux
   portes du parcours principal, au lieu de les poser a cote du chat ou elles
   lui faisaient concurrence. */
.assistant-alt {
    padding: clamp(56px, 7vw, 88px) 0 clamp(64px, 8vw, 96px);
    background: linear-gradient(180deg, #ffffff 0%, var(--aibs-blue-soft) 100%);
    border-top: 1px solid var(--a-border);
}

.assistant-alt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
}

.assistant-alt-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 34px;
    border-radius: 26px;
    background: #ffffff;
    border: 1px solid var(--a-border);
    box-shadow: var(--a-shadow-sm);
    transition: transform .22s var(--a-ease), box-shadow .22s var(--a-ease);
}

.assistant-alt-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--a-shadow-md);
}

.assistant-alt-title {
    margin: 0 0 12px;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.28;
    letter-spacing: -.015em;
}

.assistant-alt-text {
    margin: 0 0 24px;
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--aibs-gray-text);
}

.assistant-alt-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding: 13px 26px;
    border: 1.5px solid var(--aibs-blue);
    border-radius: 999px;
    color: var(--aibs-blue);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .18s var(--a-ease), color .18s var(--a-ease),
                box-shadow .18s var(--a-ease);
}

/* La fleche avance au survol : elle dit ou mene le lien, sans texte en plus. */
.assistant-alt-link::after {
    content: "\2192";
    font-size: 16px;
    transition: transform .18s var(--a-ease);
}

.assistant-alt-link:hover,
.assistant-alt-link:focus-visible {
    background: var(--aibs-blue);
    color: #ffffff;
    box-shadow: var(--a-shadow-blue);
}

.assistant-alt-link:hover::after,
.assistant-alt-link:focus-visible::after {
    transform: translateX(3px);
}

/* La carte conseiller est la porte "humaine" : fond legerement teinte pour
   la distinguer de la porte "catalogue", sans hierarchie entre les deux. */
.assistant-alt-card-advisor {
    background: linear-gradient(160deg, var(--aibs-blue-soft) 0%, #ffffff 100%);
    border-color: rgba(0, 99, 206, .16);
}

/* ==========================================================================
   ACCESSIBILITE
   ========================================================================== */

/* Anneau de focus visible et homogene : le bleu de marque ne se voit pas sur
   les elements bleus, d'ou l'anneau clair sur fond bleu. */
.assistant-page a:focus-visible,
.assistant-page button:focus-visible {
    outline: 3px solid rgba(0, 99, 206, .45);
    outline-offset: 3px;
}

.assistant-hero a:focus-visible,
.assistant-hero button:focus-visible {
    outline-color: rgba(255, 255, 255, .8);
}

/* ==========================================================================
   ADAPTATIONS
   ========================================================================== */

@media (max-width: 1080px) {
    /* En ligne les fleches reliaient les etapes ; empilees, elles
       pointeraient vers le vide. */
    .assistant-steps li:not(:last-child)::after {
        display: none;
    }
}

@media (max-width: 720px) {
    .assistant-shell,
    .assistant-hero-grid {
        padding-left: 16px;
        padding-right: 16px;
    }

    .assistant-hero {
        padding-top: 22px;
    }

    /* Hauteur seule : l'habillage mobile est deja celui de chat-widget.css. */
    .assistant-chat #aibs-chat-window.aibs-chat-embedded {
        height: min(480px, 64vh);
    }

    .assistant-steps li,
    .assistant-alt-card {
        padding: 24px;
        border-radius: 20px;
    }

    .assistant-example {
        padding: 22px;
        border-radius: 20px;
    }

    .assistant-example-quote {
        font-size: 16px;
    }

    /* Sans survol sur mobile, le lien "Demarrer" resterait invisible. */
    .assistant-example-go {
        opacity: 1;
        transform: none;
    }
}

/* Les mouvements sont un parti pris graphique, pas une information : on les
   retire pour qui demande moins d'animation. */
@media (prefers-reduced-motion: reduce) {
    .assistant-page *,
    .assistant-page *::before,
    .assistant-page *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }

    .assistant-example:hover,
    .assistant-example:focus-visible,
    .assistant-steps li:hover,
    .assistant-alt-card:hover {
        transform: none;
    }
}