/* =========================================================================
   GBell — Page « Intégrations métier 3CX » (post 27187)
   Version 2.0 — 18/08/2026

   CHANGEMENT MAJEUR vs v1 :
   les fonds ne sont plus des bandes pleine largeur (box-shadow 100vmax),
   mais des CARTES ARRONDIES posées sur le blanc de la page — comme sur
   /centre-appel-intelligent/. La couleur est portée par le conteneur
   interne .e-con-inner, dont la largeur est déjà limitée par Elementor :
   il reste donc du blanc de chaque côté, ce qui recentre le regard.

   Tout est scopé .page-id-27187 — aucune fuite possible ailleurs.
   ========================================================================= */

/* --- Police : Plus Jakarta Sans, comme sur la page CAI ------------------- */
.page-id-27187 .elementor-heading-title,
.page-id-27187 .elementor-widget-text-editor,
.page-id-27187 .elementor-button-text{
    font-family:"Plus Jakarta Sans", sans-serif !important;
}

/* --- Anti-couture -------------------------------------------------------
   Les conteneurs d'une même carte sont empilés. Une marge entre deux
   d'entre eux ferait apparaître une raie blanche au milieu de la carte. */
.page-id-27187 .elementor-element-fa9516a,
.page-id-27187 .elementor-element-ee125cd,
.page-id-27187 .elementor-element-9dd5a10,
.page-id-27187 .elementor-element-0bd1506,
.page-id-27187 .elementor-element-587393e,
.page-id-27187 .elementor-element-60cdebc,
.page-id-27187 .elementor-element-532570b,
.page-id-27187 .elementor-element-7e3afbe,
.page-id-27187 .elementor-element-4f00a0f,
.page-id-27187 .elementor-element-894311b{
    margin-top:0 !important;
    margin-bottom:0 !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
}

/* --- Air entre les cartes ----------------------------------------------- */
.page-id-27187 .elementor-element-fa9516a,
.page-id-27187 .elementor-element-9dd5a10,
.page-id-27187 .elementor-element-587393e,
.page-id-27187 .elementor-element-156dbab,
.page-id-27187 .elementor-element-7e3afbe{
    margin-top:56px !important;
}
.page-id-27187 .elementor-element-ee125cd,
.page-id-27187 .elementor-element-0bd1506,
.page-id-27187 .elementor-element-532570b,
.page-id-27187 .elementor-element-156dbab,
.page-id-27187 .elementor-element-894311b{
    margin-bottom:56px !important;
}

/* =========================================================================
   PATRON DE CARTE
   Le fond va sur .e-con-inner (largeur déjà limitée par Elementor).
   L'arrondi n'est posé qu'en HAUT du premier conteneur et en BAS du
   dernier, sinon on verrait des coins arrondis au milieu de la carte.
   ========================================================================= */

/* --- CARTE 2 — Tableaux de bord — #F7F8FC ------------------------------- */
.page-id-27187 .elementor-element-fa9516a > .e-con-inner,
.page-id-27187 .elementor-element-ee125cd > .e-con-inner{
    background-color:#F7F8FC !important;
    padding-left:44px !important;
    padding-right:44px !important;
}
.page-id-27187 .elementor-element-fa9516a > .e-con-inner{
    border-radius:16px 16px 0 0 !important;
    padding-top:52px !important;
}
.page-id-27187 .elementor-element-ee125cd > .e-con-inner{
    border-radius:0 0 16px 16px !important;
    padding-bottom:52px !important;
}

/* =========================================================================
   CARTE 4 — LE BLOC CENTRE D'APPEL INTELLIGENT — #185394
   C'est le point d'accroche de la campagne : on lui donne deux fois plus
   d'air que les autres, un titre plus grand, et un vrai bouton.
   ========================================================================= */
.page-id-27187 .elementor-element-9dd5a10 > .e-con-inner,
.page-id-27187 .elementor-element-0bd1506 > .e-con-inner{
    background-color:#185394 !important;
    padding-left:44px !important;
    padding-right:44px !important;
}
.page-id-27187 .elementor-element-9dd5a10 > .e-con-inner{
    border-radius:16px 16px 0 0 !important;
    padding-top:82px !important;
}
.page-id-27187 .elementor-element-0bd1506 > .e-con-inner{
    border-radius:0 0 16px 16px !important;
    padding-bottom:82px !important;
}

/* Titre agrandi : il doit peser autant que les visuels voisins */
.page-id-27187 .elementor-element-9dd5a10 .elementor-heading-title{
    font-size:40px !important;
    line-height:1.22 !important;
    max-width:900px;
}
/* Texte plus lisible et limité en largeur (confort de lecture) */
.page-id-27187 .elementor-element-0bd1506 p{
    font-size:18px !important;
    line-height:1.65 !important;
    max-width:820px;
}

/* Passage du texte en blanc.
   -webkit-text-fill-color est indispensable : sans lui, un dégradé de
   titre hérité du thème écrase la couleur (leçon de la page CAI).
   ATTENTION : background:none ne doit JAMAIS viser le conteneur porteur
   du fond — il effacerait sa propre couleur (leçon du geste C2-bis). */
.page-id-27187 .elementor-element-9dd5a10 .elementor-heading-title,
.page-id-27187 .elementor-element-0bd1506 p,
.page-id-27187 .elementor-element-0bd1506 .elementor-widget-text-editor{
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
    background:none !important;
}

/* Le lien devient un vrai bouton blanc — repérable au premier coup d'oeil */
.page-id-27187 .elementor-element-0bd1506 a{
    display:inline-block;
    margin-top:14px;
    background:#ffffff !important;
    color:#185394 !important;
    -webkit-text-fill-color:#185394 !important;
    text-decoration:none !important;
    font-weight:600;
    font-size:17px !important;
    padding:14px 28px;
    border-radius:8px;
    transition:background-color .25s ease, transform .25s ease;
}
.page-id-27187 .elementor-element-0bd1506 a:hover{
    background:#B1D8FC !important;
    transform:translateY(-2px);
}

/* --- CARTE 5 — Satisfaction — #B1D8FC ----------------------------------- */
.page-id-27187 .elementor-element-587393e > .e-con-inner,
.page-id-27187 .elementor-element-60cdebc > .e-con-inner,
.page-id-27187 .elementor-element-532570b > .e-con-inner{
    background-color:#B1D8FC !important;
    padding-left:44px !important;
    padding-right:44px !important;
}
.page-id-27187 .elementor-element-587393e > .e-con-inner{
    border-radius:16px 16px 0 0 !important;
    padding-top:52px !important;
}
.page-id-27187 .elementor-element-532570b > .e-con-inner{
    border-radius:0 0 16px 16px !important;
    padding-bottom:52px !important;
}
.page-id-27187 .elementor-element-587393e .elementor-heading-title{
    color:#012635 !important; -webkit-text-fill-color:#012635 !important;
}

/* --- CARTE 7 — Intégrations CRM — #F7F8FC ------------------------------- */
.page-id-27187 .elementor-element-156dbab > .e-con-inner{
    background-color:#185394 !important;
    border-radius:16px !important;
    padding:52px 44px !important;
}

/* Passage du texte en blanc — même patron que la carte 4.
   Le conteneur porteur du fond (156dbab > .e-con-inner) n'est JAMAIS
   dans cette liste : background:none l'effacerait (leçon C2-bis). */
.page-id-27187 .elementor-element-156dbab .elementor-heading-title,
.page-id-27187 .elementor-element-156dbab p,
.page-id-27187 .elementor-element-156dbab .elementor-widget-text-editor{
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
    background:none !important;
}

/* --- CARTE 8 — CTA final — #012635 -------------------------------------- */
.page-id-27187 .elementor-element-7e3afbe > .e-con-inner,
.page-id-27187 .elementor-element-4f00a0f > .e-con-inner,
.page-id-27187 .elementor-element-894311b > .e-con-inner{
    background-color:#012635 !important;
    padding-left:44px !important;
    padding-right:44px !important;
}

/* Elementor peint ce CONTENEUR en var(--e-global-color-text) (#012635).
   Un conteneur boxed est pleine largeur — seul son .e-con-inner est borne —
   donc ce fond ressortait en bande sous la carte 8 et annulait son arrondi. */
.page-id-27187 .elementor-element-894311b{
    background-color:transparent !important;
}
.page-id-27187 .elementor-element-7e3afbe > .e-con-inner{
    border-radius:16px 16px 0 0 !important;
    padding-top:60px !important;
}
.page-id-27187 .elementor-element-894311b > .e-con-inner{
    border-radius:0 0 16px 16px !important;
    padding-bottom:60px !important;
}
.page-id-27187 .elementor-element-7e3afbe .elementor-heading-title,
.page-id-27187 .elementor-element-4f00a0f p,
.page-id-27187 .elementor-element-4f00a0f .elementor-widget-text-editor{
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
    background:none !important;
}
.page-id-27187 .elementor-element-894311b .elementor-button{
    background-color:#ffffff !important;
    color:#012635 !important;
    -webkit-text-fill-color:#012635 !important;
    border-radius:8px;
    transition:background-color .25s ease;
}
.page-id-27187 .elementor-element-894311b .elementor-button:hover{
    background-color:#B1D8FC !important;
}

/* --- Correctif tablette : neutralise la chaîne height:100% d'Elementor
   Elementor force .e-con-inner et .elementor-widget-container à
   height:100%. Avec un SVG dont la hauteur vient du ratio viewBox,
   le fond est peint avant que cette hauteur soit connue : la carte
   s'arrête trop court et le SVG déborde sur la section suivante.
   On rend la hauteur naturelle à ce bloc uniquement. */
.page-id-27187 .elementor-element-0bd1506 > .e-con-inner{
    height:auto !important;
}
.page-id-27187 .elementor-element-c9b6e2d > .elementor-widget-container{
    height:auto !important;
}
.page-id-27187 #gbcai-wrap{
    aspect-ratio:1000 / 470;
}
.page-id-27187 #gbcai-wrap svg{
    height:100% !important;
}

/* =========================================================================
   RESPONSIVE — sur mobile on réduit l'arrondi et les marges latérales,
   sinon la carte mange la largeur utile.
   ========================================================================= */
@media (max-width:768px){
    .page-id-27187 .elementor-element-fa9516a > .e-con-inner,
    .page-id-27187 .elementor-element-ee125cd > .e-con-inner,
    .page-id-27187 .elementor-element-9dd5a10 > .e-con-inner,
    .page-id-27187 .elementor-element-0bd1506 > .e-con-inner,
    .page-id-27187 .elementor-element-587393e > .e-con-inner,
    .page-id-27187 .elementor-element-60cdebc > .e-con-inner,
    .page-id-27187 .elementor-element-532570b > .e-con-inner,
    .page-id-27187 .elementor-element-156dbab > .e-con-inner,
    .page-id-27187 .elementor-element-7e3afbe > .e-con-inner,
    .page-id-27187 .elementor-element-4f00a0f > .e-con-inner,
    .page-id-27187 .elementor-element-894311b > .e-con-inner{
        padding-left:20px !important;
        padding-right:20px !important;
        border-radius:12px;
    }
    .page-id-27187 .elementor-element-fa9516a > .e-con-inner,
    .page-id-27187 .elementor-element-587393e > .e-con-inner,
    .page-id-27187 .elementor-element-7e3afbe > .e-con-inner{
        border-radius:12px 12px 0 0 !important;
        padding-top:36px !important;
    }
    .page-id-27187 .elementor-element-9dd5a10 > .e-con-inner{
        border-radius:12px 12px 0 0 !important;
        padding-top:52px !important;
    }
    .page-id-27187 .elementor-element-ee125cd > .e-con-inner,
    .page-id-27187 .elementor-element-532570b > .e-con-inner,
    .page-id-27187 .elementor-element-894311b > .e-con-inner{
        border-radius:0 0 12px 12px !important;
        padding-bottom:36px !important;
    }
    .page-id-27187 .elementor-element-0bd1506 > .e-con-inner{
        border-radius:0 0 12px 12px !important;
        padding-bottom:52px !important;
    }
    .page-id-27187 .elementor-element-156dbab > .e-con-inner{
        border-radius:12px !important;
        padding-top:36px !important;
        padding-bottom:36px !important;
    }
    .page-id-27187 .elementor-element-9dd5a10 .elementor-heading-title{
        font-size:28px !important;
    }
    .page-id-27187 .elementor-element-0bd1506 p{
        font-size:16px !important;
    }
    .page-id-27187 .elementor-element-fa9516a,
    .page-id-27187 .elementor-element-9dd5a10,
    .page-id-27187 .elementor-element-587393e,
    .page-id-27187 .elementor-element-156dbab,
    .page-id-27187 .elementor-element-7e3afbe{
        margin-top:32px !important;
    }
    .page-id-27187 .elementor-element-ee125cd,
    .page-id-27187 .elementor-element-0bd1506,
    .page-id-27187 .elementor-element-532570b,
    .page-id-27187 .elementor-element-156dbab,
    .page-id-27187 .elementor-element-894311b{
        margin-bottom:32px !important;
    }
}

/* --- Palier tablette 768,02-1024 px
   Elementor bascule en mode tablette à 1024 px, notre CSS à 768 px :
   entre les deux, la carte recevait les paddings desktop dans une
   mise en page tablette. On resserre.
   Borne basse à 768.02 et non 769 : un viewport fractionnaire
   (768,5 px) ne matcherait ni max-width:768px ni min-width:769px
   et retomberait sur les valeurs desktop. Même convention que
   les paires 1023.98 / 1024.02 d'Elementor. */
@media (min-width:768.02px) and (max-width:1024px){
    .page-id-27187 .elementor-element-9dd5a10 > .e-con-inner{
        padding-top:60px !important;
    }
    .page-id-27187 .elementor-element-0bd1506 > .e-con-inner{
        padding-bottom:60px !important;
    }
    .page-id-27187 .elementor-element-9dd5a10 > .e-con-inner,
    .page-id-27187 .elementor-element-0bd1506 > .e-con-inner{
        padding-left:30px !important;
        padding-right:30px !important;
    }
    .page-id-27187 .elementor-element-9dd5a10 .elementor-heading-title{
        font-size:32px !important;
    }
}