/* ==========================================================================
   Hero CAI — bulle « assistant vocal ».
   La FORME (bulle + queue) est dessinée en SVG (une seule forme, pas de couture).
   Le TEXTE et l'onde sont en HTML par-dessus, dimensionnés en cqw (proportions)
   pour rester nets et bien placés quelle que soit la taille de la photo.
   ========================================================================== */

/* Le conteneur de l'image sert de repère de position ET de référence pour les
   unités cqw (container-type: inline-size => 1cqw = 1% de la largeur de l'image). */
.hero-cai .elementor-widget-container {
    position: relative;
    container-type: inline-size;
}

/* Calque plein cadre posé sur la photo (ne bloque pas les clics). */
.hero-cai .gbell-fx { position: absolute; inset: 0; pointer-events: none; }

/* Le dessin SVG (fond blanc de la bulle + queue en une forme + ombre commune). */
.hero-cai .gbell-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* Le contenu de la bulle, calé pile sur la bulle dessinée par le SVG. */
.hero-cai .gbell-bulle {
    position: absolute;
    left: 6.9%;  top: 4.2%;   /* coin haut-gauche de la bulle SVG (110/1600 ; 42/1000) */
    width: 35%;  height: 15%; /* taille de la bulle SVG (560/1600 ; 150/1000) */
    box-sizing: border-box;
    padding-left: 1.4cqw;
    display: flex; align-items: center; gap: 1.4cqw;
    opacity: 0; transform: translateY(1cqw);
    animation: gbApparition .6s ease-out .3s forwards;  /* apparition en douceur */
}

/* L'onde vocale : 5 barres proportionnelles qui ondulent. */
.hero-cai .gbell-onde { display: flex; align-items: center; gap: .3cqw; height: 2.2cqw; flex-shrink: 0; }
.hero-cai .gbell-onde span {
    width: .45cqw; border-radius: 2px; background: #2E5EA8;
    transform-origin: center; animation: gbOnde .9s ease-in-out infinite;
}
.hero-cai .gbell-onde span:nth-child(1){ height:1cqw;   animation-delay:0s;   background:#16294D; }
.hero-cai .gbell-onde span:nth-child(2){ height:1.6cqw; animation-delay:.12s; }
.hero-cai .gbell-onde span:nth-child(3){ height:2.2cqw; animation-delay:.24s; background:#4A8AD4; }
.hero-cai .gbell-onde span:nth-child(4){ height:1.6cqw; animation-delay:.36s; }
.hero-cai .gbell-onde span:nth-child(5){ height:1cqw;   animation-delay:.48s; background:#16294D; }

/* Les textes (taille proportionnelle à la photo). */
.hero-cai .gbell-titre { font-size: 1.7cqw; font-weight: 600; color: #16294D; line-height: 1.25; white-space: nowrap; }
.hero-cai .gbell-sous  { font-size: 1.2cqw; color: #5A6B82; line-height: 1.3; white-space: nowrap; }
.hero-cai .gbell-curseur {
    display: inline-block; width: .13cqw; height: 1.2cqw; background: #16294D;
    margin-left: 1px; vertical-align: -.1cqw;
    animation: gbClignote 1s step-end infinite;
}

/* Les animations. */
@keyframes gbOnde       { 0%,100%{ transform: scaleY(.28); } 50%{ transform: scaleY(1); } }
@keyframes gbApparition { to { opacity: 1; transform: translateY(0); } }
@keyframes gbClignote   { 0%,50%{ opacity: 1; } 51%,100%{ opacity: 0; } }

/* Mobile : on masque l'ensemble sous 768px (le fignolage mobile = étape suivante). */
@media (max-width: 768px) { .hero-cai .gbell-fx { display: none; } }