/* Chat Pascrawl en plein ecran sous 1024 px (review 04/09/2026) — TASK-00204.
   Reference : la page /achat-fichier-prospection02 du projet Lovable
   datapult-lead-booster, telle que Dimitri la montre dans sa video du 03/09.
   Chrome minimal : une barre du haut avec le statut « En ligne » et la croix a
   DROITE, rien a gauche. Le bloc d'identite (logo, « Pascrawl », « Agent de
   prospection B2B ») appartient au chat lui-meme, il n'est pas redessine ici. */

.pcs {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    background: #fff;
    /* Encoches et barre de navigation des telephones. */
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.pcs[hidden] {
    display: none;
}

/* ------------------------------------------------------------- La barre */

.pcs__bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    flex: 0 0 auto;
    height: 48px;
    padding: 0 14px;
    padding-top: env(safe-area-inset-top, 0px);
    box-sizing: content-box;
    background: #fff;
    border-bottom: 1px solid hsl(240 20% 92%);
}

.pcs__status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    line-height: 1;
    color: #6b7280;
}

.pcs__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
}

.pcs__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* (review 10/09/2026) 44 px et non 40 : c'est le minimum recommande pour une
       cible tactile, et sur Surface Pro les 40 px se rataient au doigt. La croix
       dessinee reste a 20 px, seule la zone sensible grandit. */
    width: 44px;
    height: 44px;
    margin-right: -8px;
    padding: 0;
    border: 1px solid hsl(240 20% 92%);
    border-radius: 50%;
    background: transparent;
    color: #1e193c;
    cursor: pointer;
}

.pcs__close:hover,
.pcs__close:focus-visible {
    background: rgba(30, 25, 60, 0.06);
}

/* -------------------------------------------------------------- Le chat */

.pcs__frame {
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
}

.pcs__frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #fff;
}

.pcs__note {
    flex: 0 0 auto;
    margin: 0;
    border-top: 1px solid hsl(240 20% 92%);
    padding: 8px 16px 12px;
    font-size: 11px;
    line-height: 1.45;
    color: #8b8ba0;
    text-align: left;
}

/* La page dessous ne defile plus pendant que le panneau est ouvert. Le
   decalage vers le haut est pose par le script, pour rendre au visiteur sa
   position exacte a la fermeture. */

body.pcs-open {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
}

/* Au-dela de 1024 px le panneau n'existe pas : le lien charge la page de
   devis comme avant. La regle est doublee dans le script. */

/* (review 10/09/2026) « et pointage fin » : sur un appareil tactile large
   (iPad Pro 13 et plus), on garde le chat plein ecran et la barre du bas. */
@media (min-width: 1024px) and (pointer: fine) {
    .pcs {
        display: none !important;
    }
}

/* ------------------------------------------- Barre collante des fiches */

.pcs-sticky {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9000;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px) saturate(1.4);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
    box-shadow: 0 -1px 0 rgba(30, 25, 60, 0.08), 0 -8px 24px -12px rgba(30, 25, 60, 0.18);
}

/* La barre est posee des l'arrivee sur la fiche, elle n'attend pas un
   defilement : Dimitri la decrit comme presente en bas de page, et une barre
   qui apparait en cours de route se rate sur une visite courte. Le corps de la
   page gagne la hauteur correspondante pour que le dernier bloc reste lisible. */

body.pcs-has-sticky {
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
}

.pcs-sticky__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    min-height: 48px;
    padding: 12px 20px;
    border-radius: 999px;
    background: #eb1e7d;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
}

.pcs-sticky__btn:hover,
.pcs-sticky__btn:focus-visible {
    background: #d21a6f;
    color: #fff;
}

/* Le libelle change de longueur selon la place, exactement comme la maquette :
   « Cibler des prospects » sur telephone, « Obtenir des donnees sur mesure »
   des 640 px. La bascule de Tailwind (sm:) tombe a cette largeur. */

.pcs-sticky__long { display: none; }

@media (min-width: 640px) {
    .pcs-sticky__short { display: none; }
    .pcs-sticky__long { display: inline; }
}

/* Pendant que le chat est ouvert, la barre s'efface au lieu de rester
   derriere le panneau. */

body.pcs-open .pcs-sticky {
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* (review 10/09/2026) « et pointage fin » : sur un appareil tactile large
   (iPad Pro 13 et plus), on garde le chat plein ecran et la barre du bas. */
@media (min-width: 1024px) and (pointer: fine) {
    .pcs-sticky {
        display: none !important;
    }

    body.pcs-has-sticky {
        padding-bottom: 0;
    }
}


/* ------------------------- Le chat quitte la page sous 1024 px (fiches Activite)
   Maquette Lovable, src/pages/AchatFichierProspection02.tsx lue le 04/09 :
   le bloc du chat porte `hidden flex-col lg:flex`, il n'existe donc pas en
   dessous de 1024 px. Sur ces largeurs la barre du bas est la seule entree vers
   le chat, et elle ouvre le plein ecran. La page de devis garde le sien, c'est
   le point de chute des visites qui arrivent par un moteur de recherche. */

@media (max-width: 1023.98px) {
    body.single-activite .hero-aurora--chat,
    body.single-activite #top_form.col-form,
    body.single-activite .col-form .pascrawl-embed-wrap {
        display: none !important;
    }
}


/* ------------------- La page de devis n'est que le chat, sous 1024 px
   Maquette Lovable, src/pages/DemandeDevisDataB2B.tsx lue le 04/09 : sous `lg`
   la page rend UNIQUEMENT le bot, sur `calc(100dvh - 72px)`, et tout le bloc
   marketing part en `sr-only` — present pour les moteurs, invisible a l'ecran.
   Meme principe ici. Notre en-tete fait 86 px et se pose PAR-DESSUS la page
   (position: fixed), d'ou le calcul et le decalage du haut.

   Le pied de page part aussi, decision de Nancia le 07/09 : la maquette n'en a
   aucun sur cette page, a aucune largeur, et elle veut le meme rendu. Sous
   1024 px la page tient donc dans un ecran, en-tete plus chat, rien a faire
   defiler. Au-dessus de 1024 px le pied de page reste. */

@media (max-width: 1023.98px) {

    /* Invisible a l'ecran, toujours lu par les moteurs. */
    body.has-devis-chat #banner_top .col-text,
    body.has-devis-chat .lp-form-note,
    body.has-devis-chat .AI_review,
    body.has-devis-chat .specialist {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        margin: -1px !important;
        padding: 0 !important;
        overflow: hidden !important;
        clip: rect(0 0 0 0) !important;
        clip-path: inset(50%) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }

    /* Le chat prend la fenetre, moins l'en-tete qui la surplombe. */
    body.has-devis-chat #banner_top,
    body.has-devis-chat #banner_top .banner_top_wrapper,
    body.has-devis-chat #banner_top .banner_top_sub_wrapper,
    body.has-devis-chat #banner_top .row-banner,
    body.has-devis-chat #banner_top .col-form {
        max-width: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: none !important;
    }

    body.has-devis-chat #banner_top {
        padding-top: 86px !important;
    }

    /* La hauteur se pose sur la RANGEE, pas sur le chat : la colonne et le chat
       sont des elements flex, leur hauteur remonte de la rangee. Poser la
       hauteur en bas de chaine laissait la rangee a 150 px (mesure le 04/09). */
    body.has-devis-chat #banner_top .row-banner {
        height: calc(100dvh - 86px) !important;
        min-height: 0 !important;
        display: flex !important;
    }

    body.has-devis-chat #banner_top .col-form,
    body.has-devis-chat .pascrawl-embed-wrap {
        height: 100% !important;
        min-height: 0 !important;
        flex: 1 1 auto !important;
    }

    body.has-devis-chat .pascrawl-embed-wrap iframe {
        height: 100% !important;
        min-height: 0 !important;
        border-radius: 0 !important;
    }

    /* Le pied de page ne s'affiche plus : la maquette n'en a pas sur cette page.
       Les mentions legales et la charte RGPD restent joignables partout
       ailleurs sur le site. */
    body.has-devis-chat footer {
        display: none !important;
    }
}


/* --------------- Jamais deux barres collantes a l'ecran (review 07/09/2026)
   TASK-00297. L'accueil et les fiches code NAF portaient deja #sticky_cta, qui
   sort apres 200 px de defilement et mene a la page de devis. La ou la nouvelle
   barre s'affiche, l'ancienne se retire : le script pose `pcs-has-sticky` sur la
   page des qu'il en installe une. Au-dessus de 1024 px, et sur l'accueil ou la
   nouvelle barre n'existe pas, #sticky_cta garde exactement son comportement. */

@media (max-width: 1023.98px) {
    body.pcs-has-sticky #sticky_cta {
        display: none !important;
    }
}