/* Generated by centered-quote-assets.mjs from the approved shared popup. */

  @property --biux-cta-angle{syntax:"<angle>";initial-value:0deg;inherits:false}
  @keyframes biux-cta-rotate{to{--biux-cta-angle:360deg}}
  /* Aligne sur le design system biux : bouton filled .method-btn / .btn-solid
     (radius 0, Plus Jakarta Sans, 12px/500/uppercase/.18em, hover = opacity).
     CONTRASTE ADAPTATIF : sombre par defaut (fond clair) ; .is-on-dark = blanc
     sur fond fonce (togglé en JS via la meme liste de sections que la nav). */
  {position:fixed;right:22px;bottom:22px;z-index:2147483000;
    display:inline-flex;align-items:center;justify-content:center;
    padding:0;width:54px;height:54px;background:var(--ink,#00030f);color:var(--bg,#fff);
    font-family:var(--font-body,"Plus Jakarta Sans",system-ui,sans-serif);
    font-weight:500;font-size:12px;line-height:1;letter-spacing:.18em;
    text-transform:uppercase;text-decoration:none;white-space:nowrap;
    border:1px solid var(--ink,#00030f);border-radius:var(--radius);
    box-shadow:0 6px 24px rgba(0,3,15,.16);
    transition:transform .2s ease,opacity .2s ease,background-color .25s ease,color .25s ease,border-color .25s ease;
    cursor:pointer;-webkit-tap-highlight-color:transparent;
    -webkit-backface-visibility:hidden;backface-visibility:hidden}
  /* Icône du bouton : 2 couches (éclair par défaut / flèche-repli carte ouverte). Swap ASYMÉTRIQUE
     via keyframes : à l'OUVERTURE seule la flèche tourne (apparait à droite -> pivote vers le bas, horaire),
     l'éclair fond sans tourner ; à la FERMETURE seul l'éclair tourne (apparait à -90° -> pivote vers la
     gauche pour se remettre droit), la flèche fond sans tourner. currentColor = couleur adaptative. */
  @keyframes biux-ico-arrow-in{from{transform:translate(-50%,-50%) rotate(-90deg)}to{transform:translate(-50%,-50%) rotate(0deg)}}
  @keyframes biux-ico-flash-in{from{transform:translate(-50%,-50%) rotate(90deg)}to{transform:translate(-50%,-50%) rotate(0deg)}}
  @keyframes biux-cta-pop{0%{transform:scale(1)}45%{transform:scale(.82)}100%{transform:scale(1)}}
  {position:absolute;top:50%;left:50%;width:24px;height:24px;background:currentColor;
    -webkit-mask-repeat:no-repeat;-webkit-mask-position:center;-webkit-mask-size:contain;
    mask-repeat:no-repeat;mask-position:center;mask-size:contain}
  {-webkit-mask-image:url(/shared/img/flash.svg);mask-image:url(/shared/img/flash.svg);opacity:1;transform:translate(-50%,-50%) rotate(0deg)}
  {-webkit-mask-image:url(/shared/img/cta-collapse.svg);mask-image:url(/shared/img/cta-collapse.svg);opacity:0;transform:translate(-50%,-50%) rotate(-90deg)}
  /* Aucun fondu : la sortante disparait d'un coup (opacity:0), l'entrante apparait d'un coup à sa position tournée puis se redresse (rotation seule). */
  {opacity:0}
  {opacity:1;animation:biux-ico-arrow-in .22s cubic-bezier(.34,.16,.2,1) forwards}
  {opacity:0}
  {opacity:1;animation:biux-ico-flash-in .22s cubic-bezier(.34,.16,.2,1) forwards}
  /* Pop du bouton (dézoom -> rezoom) à chaque clic (retriggé en JS via reflow pour rejouer ouverture ET fermeture) */
  {animation:biux-cta-pop .22s ease}
  /* Liseret bleu leger qui TOURNE en continu autour du bouton. Technique du
     bord-degrade anime : conic-gradient bleu + mask qui ne montre que l'anneau
     (le centre reste le bouton). @property rend l'angle interpolable -> rotation
     fluide (fallback navigateurs anciens : liseret statique). */
  {content:"";position:absolute;inset:-2px;border-radius:inherit;
    padding:2px;pointer-events:none;
    background:conic-gradient(from var(--biux-cta-angle),
      rgba(28,102,245,.12),rgba(28,102,245,.12) 190deg,
      rgba(28,102,245,.55) 300deg,#4d86ff 344deg,rgba(28,102,245,.12) 360deg);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    mask-composite:exclude;
    animation:biux-cta-rotate 3.5s linear infinite}
  /* Petit point bleu lumineux (lueur qui pulse) dans le coin haut-droite. */
  {content:"";position:absolute;top:-5px;right:-5px;width:11px;height:11px;
    border-radius:50%;background:#2a72ff;pointer-events:none;z-index:1;
    box-shadow:0 0 4px 0 rgba(28,102,245,.55),0 0 9px 2px rgba(28,102,245,.25);
    animation:biux-cta-glow 2.4s ease-in-out infinite}
  @keyframes biux-cta-glow{
    0%,100%{box-shadow:0 0 3px 0 rgba(28,102,245,.45),0 0 7px 1px rgba(28,102,245,.18)}
    50%{box-shadow:0 0 5px 1px rgba(28,102,245,.65),0 0 12px 3px rgba(28,102,245,.34)}}
  /* Sur fond fonce : bouton blanc, texte ink, bordure blanche. */
  {background:var(--bg,#fff);color:var(--ink,#00030f);border-color:var(--bg,#fff)}
  {transform:scale(1.08)}
  {outline:2px solid var(--accent,#1c66f5);outline-offset:3px}
  /* Overlay devis ouvert : on masque le bouton (le dialog plein ecran le couvre). */
  {opacity:0;pointer-events:none}
  /* No closing-transition frame may leave the nudge above the quote dialog. */
  {display:none!important;visibility:hidden!important;pointer-events:none!important}
  /* Bouton masque pendant que la carte teaser est ouverte (la carte le remplace). */
  {opacity:0;transform:translateY(8px);pointer-events:none}

  /* ---- Carte teaser (apparait au bout de 10s, 1x/session) : nudge personnel
     qui invite a parler du projet ; son CTA ouvre l'overlay devis. Style Biux
     blanc/ink avec les accents bleus utilises par les cartes d'avis. ---- */
  body.home-v2 .home-centered-quote .biux-cta-teaser{position:fixed;right:22px;bottom:90px;z-index:2147483001;
    width:392px;max-width:calc(100vw - 28px);
    background:var(--bg,#fff);color:var(--ink,#00030f);
    border:1px solid rgba(28,102,245,.28);border-radius:var(--radius);
    box-shadow:0 18px 60px rgba(0,3,15,.22);
    font-family:var(--font-body,"Plus Jakarta Sans",system-ui,sans-serif);
    padding:26px 24px 22px;
    opacity:1;visibility:hidden;transform:translate3d(0,12px,0);pointer-events:none;
    transition:transform .28s ease,visibility 0s linear .28s;
    will-change:transform;-webkit-backface-visibility:hidden;backface-visibility:hidden;contain:paint}
  body.home-v2 .home-centered-quote .biux-cta-teaser.is-visible{visibility:visible;transform:translate3d(0,0,0);pointer-events:auto;
    transition:transform .28s ease,visibility 0s}
  body.home-v2 .home-centered-quote .biux-cta-teaser__close{position:absolute;top:12px;right:12px;width:28px;height:28px;
    display:inline-flex;align-items:center;justify-content:center;background:none;border:0;
    color:var(--ink-40,rgba(0,3,15,.4));font-size:20px;line-height:1;cursor:pointer;transition:color .2s ease}
  body.home-v2 .home-centered-quote .biux-cta-teaser__close:hover{color:var(--ink,#00030f)}
  body.home-v2 .home-centered-quote .biux-cta-teaser__head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
  /* Arrondi porté par l'IMAGE (pas le conteneur) : sinon overflow:hidden clippe
     le point vert placé dans le coin. Le conteneur ne clippe plus rien. */
  body.home-v2 .home-centered-quote .biux-cta-teaser__avatar{position:relative;flex:0 0 auto;width:54px;height:54px}
  body.home-v2 .home-centered-quote .biux-cta-teaser__avatar img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%;background:var(--bg-2,#f2f2f2)}
  body.home-v2 .home-centered-quote .biux-cta-teaser__dot{position:absolute;right:3px;top:3px;width:13px;height:13px;border-radius:50%;background:#22c55e;border:2.5px solid var(--bg,#fff);box-shadow:0 0 0 1px rgba(0,3,15,.06)}
  body.home-v2 .home-centered-quote .biux-cta-teaser__id{min-width:0;line-height:1.3}
  body.home-v2 .home-centered-quote .biux-cta-teaser__name{display:block;font-weight:600;font-size:15px;color:var(--ink,#00030f)}
  body.home-v2 .home-centered-quote .biux-cta-teaser__role{display:block;font-size:12px;color:var(--ink-55,rgba(0,3,15,.55))}
  body.home-v2 .home-centered-quote .biux-cta-teaser__title{font-weight:600;font-size:17px;line-height:1.3;margin:0 0 7px;color:var(--ink,#00030f)}
  body.home-v2 .home-centered-quote .biux-cta-teaser__title-highlight{display:inline-block;padding:.02em .2em .11em;
    color:#fff;background:linear-gradient(115deg,#1c66f5,#5b8cff);border-radius:var(--radius);
    line-height:1;white-space:nowrap}
  body.home-v2 .home-centered-quote .biux-cta-teaser__text{font-size:13px;line-height:1.55;margin:0 0 16px;color:var(--ink-70,rgba(0,3,15,.7))}
  /* Bande "ils nous font confiance" : mini-marquee de logos en loop (logos
     noircis pour le fond blanc de la carte), fondu sur les bords. */
  body.home-v2 .home-centered-quote .biux-cta-teaser__trust{margin:0 0 16px;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-55,rgba(0,3,15,.62))}
  body.home-v2 .home-centered-quote .biux-cta-teaser__logos{position:relative;overflow:hidden;margin:0 0 18px;
    -webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
    mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
  body.home-v2 .home-centered-quote .biux-cta-teaser__logos-track{display:flex;align-items:center;gap:28px;width:max-content;animation:biux-cta-logos 22s linear infinite;will-change:transform;-webkit-backface-visibility:hidden;backface-visibility:hidden}
  body.home-v2 .home-centered-quote .biux-cta-teaser__logos-track img{height:20px;width:auto;flex:0 0 auto;object-fit:contain;filter:brightness(0);opacity:.5}
  @keyframes biux-cta-logos{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
  body.home-v2 .home-centered-quote .biux-cta-teaser__cta{display:flex;align-items:center;justify-content:center;width:100%;
    padding:16px 22px;background:var(--ink,#00030f);color:var(--bg,#fff);font-family:inherit;
    font-weight:500;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;
    border:1px solid var(--ink,#00030f);border-radius:var(--radius);cursor:pointer;text-decoration:none;transition:opacity .2s ease}
  body.home-v2 .home-centered-quote .biux-cta-teaser__cta:hover{opacity:.85}
  @media (max-width:600px){
    {right:14px;bottom:14px}
    body.home-v2 .home-centered-quote .biux-cta-teaser{right:14px;left:14px;bottom:84px;width:auto;padding:18px 16px 16px}
    {animation:none}
  }
  @media (prefers-reduced-motion:reduce){
    body.home-v2 .home-centered-quote .biux-cta-teaser{transition:none}
    body.home-v2 .home-centered-quote .biux-cta-teaser__logos-track{animation:none!important}
    {transform:none}
    {opacity:0}
    {opacity:1;transform:translate(-50%,-50%) rotate(0deg)}
  }

    /* Home V2: the same charcoal, fine lines and white CTA as the review cards. */
    {--floating-edge:22px;--floating-bottom:calc(var(--floating-edge) + env(safe-area-inset-bottom,0px) + var(--floating-obstruction,0px))}
    {z-index:110;bottom:max(22px,env(safe-area-inset-bottom));border-radius:var(--radius)}
    {display:none}
    {z-index:111}
    body.home-v2 .home-centered-quote .biux-cta-teaser{z-index:91;bottom:calc(max(22px,env(safe-area-inset-bottom)) + 68px);width:408px;max-height:calc(100dvh - 120px);overflow-y:auto;overscroll-behavior:contain;contain:none;padding:28px;background-color:rgb(18 18 18 / 96%);background-image:var(--glass-sheen);backdrop-filter:var(--glass-filter);-webkit-backdrop-filter:var(--glass-filter);color:var(--white);border:1px solid var(--line-light);border-radius:var(--radius);box-shadow:0 20px 60px rgb(0 0 0 / 24%);opacity:0;transform:translate3d(0,14px,0);transition:opacity .3s var(--ease),transform .4s var(--ease),visibility 0s linear .4s}
    body.home-v2 .home-centered-quote .biux-cta-teaser.is-visible{opacity:1;transform:translate3d(0,0,0);transition:opacity .3s var(--ease),transform .4s var(--ease),visibility 0s}
    body.home-v2 .home-centered-quote .biux-cta-teaser__head{gap:14px;margin-bottom:24px;padding-right:20px}
    body.home-v2 .home-centered-quote .biux-cta-teaser__avatar img{border-radius:var(--radius)}
    body.home-v2 .home-centered-quote .biux-cta-teaser__dot{border-color:#242424}
    body.home-v2 .home-centered-quote .biux-cta-teaser__name{color:var(--white);font-size:16px;font-weight:500}
    body.home-v2 .home-centered-quote .biux-cta-teaser__role{color:var(--muted-light);margin-top:4px}
    body.home-v2 .home-centered-quote .biux-cta-teaser__title{font-size:30px;font-weight:400;line-height:1.2;letter-spacing:-.045em;color:var(--white);margin-bottom:14px}
    body.home-v2 .home-centered-quote .biux-cta-teaser__title-highlight{display:inline;padding:0;background:none;color:inherit;border-radius:0;line-height:inherit}
    body.home-v2 .home-centered-quote .biux-cta-teaser__text{font-size:14px;line-height:1.7;color:var(--muted-light);margin-bottom:24px}
    body.home-v2 .home-centered-quote .biux-cta-teaser__trust{padding-top:22px;border-top:1px solid var(--line-light);color:var(--muted-light);font-weight:500;letter-spacing:.1em;margin-bottom:18px}
    body.home-v2 .home-centered-quote .biux-cta-teaser__logos{margin-bottom:26px}
    body.home-v2 .home-centered-quote .biux-cta-teaser__logos-track img{height:22px;filter:brightness(0) invert(1);opacity:.8}
    body.home-v2 .home-centered-quote .biux-cta-teaser__cta{padding:14px 22px;background:var(--white);color:var(--ink);border-color:var(--white);font-size:18px;font-weight:600;line-height:1.65;letter-spacing:0;text-transform:none;transition:background-color .25s,transform .35s var(--ease)}
    body.home-v2 .home-centered-quote .biux-cta-teaser__cta:hover{opacity:1;background:#ededed;transform:translateY(-1px)}
    body.home-v2 .home-centered-quote .biux-cta-teaser__close{width:36px;height:36px;color:var(--muted-light);border-radius:var(--radius);transition:color .2s,background-color .2s}
    body.home-v2 .home-centered-quote .biux-cta-teaser__close:hover{color:var(--white);background:rgb(255 255 255 / 8%)}
    body.home-v2 .home-centered-quote .biux-cta-teaser:not(.is-visible) .biux-cta-teaser__logos-track{animation-play-state:paused}
    {visibility:hidden}
    {visibility:hidden}
    {bottom:var(--floating-bottom)}
    body.home-v2 .home-centered-quote .biux-cta-teaser{bottom:calc(var(--floating-bottom) + 68px);max-height:calc(100dvh - var(--floating-bottom) - 84px)}
    @media(max-width:600px){{--floating-edge:24px}{right:20px}body.home-v2 .home-centered-quote .biux-cta-teaser{left:16px;right:16px;width:auto;padding:24px}body.home-v2 .home-centered-quote .biux-cta-teaser__title{font-size:28px}}
    @media(prefers-reduced-motion:reduce){body.home-v2 .home-centered-quote .biux-cta-teaser,body.home-v2 .home-centered-quote .biux-cta-teaser.is-visible{transition:none;transform:none}body.home-v2 .home-centered-quote .biux-cta-teaser__cta:hover{transform:none}}
  
/* Local homepage experiment. Color, type, portrait, logos and CTA inherit the teaser skin. */
body.home-quote-modal-open{overflow:hidden}
/* Do not rely on the browser's default dialog height. With four fixed edges,
   auto stretches the card; a fractional grid adds an intrinsic sizing cycle.
   Only the copy scrolls, so the close button stays outside the scroll area. */
body.home-v2 .home-centered-quote .home-quote-modal{--home-quote-edge:20px;position:fixed;inset:0;margin:auto;width:min(460px,calc(100vw - 2 * var(--home-quote-edge)));height:fit-content;min-height:0;max-width:none;max-height:calc(100vh - 2 * var(--home-quote-edge));max-height:calc(100dvh - 2 * var(--home-quote-edge));padding:0;overflow:hidden;visibility:visible;opacity:1;transform:none;pointer-events:auto;transition:none;will-change:auto}
body.home-v2 .home-centered-quote .home-quote-modal:not([open]){display:none}
body.home-v2 .home-centered-quote .home-quote-modal[open]{display:block;animation:home-quote-enter 480ms cubic-bezier(.22,1,.36,1) both}
body.home-v2 .home-quote-modal::backdrop{background:rgb(0 0 0 / 65%);animation:home-quote-backdrop 320ms ease-out both}
@keyframes home-quote-enter{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes home-quote-backdrop{from{opacity:0}to{opacity:1}}
body.home-v2 .home-quote-copy{min-width:0;min-height:0;max-height:calc(100vh - 2 * var(--home-quote-edge) - 2px);max-height:calc(100dvh - 2 * var(--home-quote-edge) - 2px);overflow-y:auto;overscroll-behavior:contain;padding:28px}
body.home-v2 .home-centered-quote .biux-cta-teaser__close{z-index:2;width:36px;height:36px;top:10px;right:10px;background:rgb(18 18 18 / 85%)}
body.home-v2 .home-centered-quote .biux-cta-teaser__head{padding-right:20px}
body.home-v2 .home-centered-quote .biux-cta-teaser__avatar img{border-radius:50%}
body.home-v2 .home-centered-quote .biux-cta-teaser__close:focus-visible,body.home-v2 .home-centered-quote .biux-cta-teaser__cta:focus-visible{outline:2px solid var(--white);outline-offset:3px}
@media(max-width:700px){
  body.home-v2 .home-centered-quote .home-quote-modal{--home-quote-edge:16px}
  body.home-v2 .home-quote-copy{padding:24px}
  body.home-v2 .home-centered-quote .biux-cta-teaser__close{width:44px;height:44px;top:8px;right:8px}
  body.home-v2 .home-centered-quote .biux-cta-teaser__head{margin-bottom:18px}
  body.home-v2 .home-centered-quote .biux-cta-teaser__text{margin-bottom:18px}
  body.home-v2 .home-centered-quote .biux-cta-teaser__trust{padding-top:18px;margin-bottom:14px}
  body.home-v2 .home-centered-quote .biux-cta-teaser__logos{margin-bottom:20px}
}
@media(prefers-reduced-motion:reduce){
  body.home-v2 .home-centered-quote .home-quote-modal[open],body.home-v2 .home-quote-modal::backdrop{animation:none}
}

body.home-v2 .home-centered-quote .biux-cta-teaser__cta{font-size:18px!important}
