/* ==========================================================================
   Page « Centre d'Appel Intelligent » (ID 27450) — overrides CSS statiques.
   Chargé globalement mais SCOPÉ par .page-id-27450 => zéro effet ailleurs.
   ⚠️ Scope page obligatoire : 27450 est un clone de la home, l'ID de section
   4d7658ef existe AUSSI sur la home. Sans .page-id-27450 on toucherait la home.
   ========================================================================== */

/* --- Police des titres : "Plus Jakarta Sans" (charte, comme tout le site) --- */
.page-id-27450 .elementor-element-4d7658ef .elementskit-info-box-title,
.page-id-27450 .elementor-element-4d7658ef .elementskit-section-title,
.page-id-27450 .elementor-element-4d7658ef .ekit-heading--title,
.page-id-27450 .elementor-element-4d7658ef .box-body > p{
    font-family:"Plus Jakarta Sans", sans-serif !important;
}

/* --- Tuiles bénéfices : état NORMAL lisible d'emblée --- */
.page-id-27450 .elementor-element-4d7658ef .elementskit-infobox .elementskit-info-box-title{
    color:#16294D !important; font-weight:600 !important;
}
.page-id-27450 .elementor-element-4d7658ef .elementskit-infobox .box-body > p{
    color:var(--e-global-color-text, #012635) !important;   /* corps de texte EXACT de la charte (#012635) */
    font-size:16px !important;      /* = taille du paragraphe descriptif du site (.ekit-heading__description) */
    line-height:24px !important;    /* = interligne du corps de texte du site */
}

/* --- Survol : fond bleu clair (charte), titre/texte foncés lisibles, transition --- */
.page-id-27450 .elementor-element-4d7658ef .elementskit-infobox{
    transition: background-color .25s ease, box-shadow .25s ease, border-color .25s ease !important;
}
.page-id-27450 .elementor-element-4d7658ef .elementskit-infobox:hover{
    background-color:#E8F0FB !important;
}
.page-id-27450 .elementor-element-4d7658ef .elementskit-infobox:hover .elementskit-info-box-title{
    color:#16294D !important;
}
.page-id-27450 .elementor-element-4d7658ef .elementskit-infobox:hover .box-body > p{
    color:var(--e-global-color-text, #012635) !important;   /* idem au survol (fond clair => lisible) */
}

/* --- Icônes SVG au-dessus des titres de famille --- */
.page-id-27450 .elementor-element-4d7658ef .cai-fam-icon{ text-align:center; line-height:0; margin:0 0 12px; }
.page-id-27450 .elementor-element-4d7658ef .cai-fam-icon svg{ width:44px; height:44px; }

/* ==========================================================================
   RANGÉES DE TUILES — grille régulière (remplace le flex %+gap bricolé).
   Colonnes de largeur égale (minmax(0,1fr) => pas de débordement du texte),
   gap régulier. Les largeurs inline 23%/48% des tuiles sont neutralisées.
   ========================================================================== */
.page-id-27450 .cai-tiles-row{
    display:grid !important;
    gap:24px !important;
    align-items:stretch !important;
}
.page-id-27450 .cai-row-4{ grid-template-columns:repeat(4, minmax(0,1fr)) !important; }
.page-id-27450 .cai-row-2{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    max-width:calc(50% - 12px);      /* tuiles de même largeur que les rangées de 4 */
    margin-left:auto; margin-right:auto;
}
/* neutraliser les largeurs/marges inline des tuiles => la grille gère */
.page-id-27450 .cai-tiles-row > .elementor-element{
    width:auto !important; max-width:none !important; margin:0 !important; min-width:0 !important;
}

/* Responsive : 2 colonnes en tablette, 1 colonne en mobile */
@media (max-width:1024px){
    .page-id-27450 .cai-row-4{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; }
    .page-id-27450 .cai-row-2{ max-width:none; }
}
@media (max-width:600px){
    .page-id-27450 .cai-row-4,
    .page-id-27450 .cai-row-2{ grid-template-columns:1fr !important; max-width:none; }
}

/* ===== Section "Comment ça marche" (fond bleu #185394) ===== */
.page-id-27450 .cai-howto{ background-color:#185394 !important; }
.page-id-27450 .cai-howto .ekit-heading--title,
.page-id-27450 .cai-howto .ekit-heading--title *,
.page-id-27450 .cai-howto .ekit-heading__description,
.page-id-27450 .cai-howto .ekit-heading__description *{
    color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; background:none !important;
}

/* Schéma SVG (colonne droite "Comment ça marche") — responsive */
.page-id-27450 .cai-schema{ max-width:440px; margin:0 auto; }
.page-id-27450 .cai-schema svg{ width:100%; height:auto; display:block; }

/* Accordéon "Comment ça marche" — panneaux CLAIRS à texte FONCÉ (lisibles sur le bleu #185394) */
.page-id-27450 .cai-acc .elementskit-card{ background:#ffffff !important; }
.page-id-27450 .cai-acc .elementskit-card-header>.elementskit-btn-link{ background:#ffffff !important; color:#16294D !important; }
.page-id-27450 .cai-acc .elementskit-card-body{ background:#ffffff !important; }
.page-id-27450 .cai-acc .elementskit-card-body,
.page-id-27450 .cai-acc .elementskit-card-body p{ color:#012635 !important; }

/* ===== "Comment ça marche" : 2 colonnes RÉELLES (titre | schéma) ===== */
.page-id-27450 .cai-howto-row{ display:flex !important; flex-wrap:wrap; align-items:center; gap:48px; }
.page-id-27450 .cai-howto-left,
.page-id-27450 .cai-howto-right{ flex:1 1 340px !important; width:auto !important; max-width:none !important; min-width:0 !important; }
.page-id-27450 .cai-howto-left{ display:flex; flex-direction:column; justify-content:center; }
.page-id-27450 .cai-howto-right{ display:flex; justify-content:center; align-items:center; }
.page-id-27450 .cai-schema{ width:100%; max-width:440px; margin:0 auto; }
.page-id-27450 .cai-schema svg{ width:100%; height:auto; display:block; }
@media (max-width:900px){
  .page-id-27450 .cai-howto-left,
  .page-id-27450 .cai-howto-right{ flex:1 1 100% !important; }
}

/* Centrage vertical réel du titre/intro (colonne gauche étirée à la hauteur du schéma) */
.page-id-27450 .cai-howto-row{ align-items:stretch !important; }
.page-id-27450 .cai-howto-left{ display:flex !important; flex-direction:column !important; justify-content:center !important; }
.page-id-27450 .cai-howto-left > .elementor-element{ margin-top:0 !important; margin-bottom:0 !important; }

/* ============================================================
   "Comment ça marche" — CIBLAGE PAR ID (les _css_classes des
   conteneurs fabriqués ne se rendent pas dans le HTML).
   ============================================================ */
/* padding vertical standard */
.page-id-27450 .elementor-element-ad693f1{ padding-top:80px !important; padding-bottom:80px !important; }
/* titre + intro en BLANC (neutralise tout dégradé/foncé hérité) */
.page-id-27450 .elementor-element-ad693f1 .ekit-heading--title,
.page-id-27450 .elementor-element-ad693f1 .ekit-heading--title *,
.page-id-27450 .elementor-element-ad693f1 .ekit-heading__description,
.page-id-27450 .elementor-element-ad693f1 .ekit-heading__description *{
  color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; background:none !important;
}
/* 2 colonnes RÉELLES : titre (gauche) | schéma (droite) */
.page-id-27450 .elementor-element-484cdda{ display:flex !important; flex-direction:row !important; flex-wrap:wrap !important; align-items:stretch !important; gap:48px !important; }
.page-id-27450 .elementor-element-5891268,
.page-id-27450 .elementor-element-efc1d33{ flex:1 1 340px !important; width:auto !important; max-width:none !important; min-width:0 !important; }
.page-id-27450 .elementor-element-5891268{ display:flex !important; flex-direction:column !important; justify-content:center !important; }
.page-id-27450 .elementor-element-efc1d33{ display:flex !important; flex-direction:column !important; justify-content:center !important; align-items:center !important; }
.page-id-27450 .cai-schema{ width:100%; max-width:440px; margin:0 auto; }
/* mobile : empilé (titre puis schéma) */
@media (max-width:900px){
  .page-id-27450 .elementor-element-484cdda{ flex-direction:column !important; }
  .page-id-27450 .elementor-element-5891268,
  .page-id-27450 .elementor-element-efc1d33{ flex:1 1 100% !important; }
}

/* "Comment ça marche" recyclée sur coquille 53dc7c25 — titre + intro BLANCS */
.page-id-27450 .elementor-element-53dc7c25 .ekit-heading--title,
.page-id-27450 .elementor-element-53dc7c25 .ekit-heading--title *,
.page-id-27450 .elementor-element-53dc7c25 .ekit-heading__description,
.page-id-27450 .elementor-element-53dc7c25 .ekit-heading__description *{
  color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; background:none !important;
}


/* === Témoignage Bruno (53dc7c25) 05/07 === */
.page-id-27450 .elementor-element-53dc7c25,
.page-id-27450 .elementor-element-456187bc{background-color:#B1D8FC!important;background-image:none!important;}
.page-id-27450 .elementor-element-53dc7c25 .ekit-heading--title,
.page-id-27450 .elementor-element-53dc7c25 .ekit-heading__description,
.page-id-27450 .elementor-element-53dc7c25 .ekit-heading__description *,
.page-id-27450 .elementor-element-53dc7c25 .ekit-heading--subtitle{color:#012635!important;-webkit-text-fill-color:#012635!important;background:none!important;}
.page-id-27450 .elementor-element-818e49b .elementskit-btn{background:#185394!important;color:#fff!important;-webkit-text-fill-color:#fff!important;border-color:#185394!important;}
.page-id-27450 .elementor-element-53dc7c25 img{max-width:100%!important;height:auto!important;object-fit:contain!important;}


/* === Bruno fix v2 (53dc7c25) 05/07 === */
.page-id-27450 .elementor-element-e790356 .elementskit-section-title-wraper .elementskit-section-title,
.page-id-27450 .elementor-element-e790356 .elementskit-section-title-wraper .elementskit-section-title > span,
.page-id-27450 .elementor-element-e790356 .elementskit-section-title-wraper p{color:#012635!important;-webkit-text-fill-color:#012635!important;background:none!important;background-image:none!important;}


/* === Fix grille + vide bénéfices (4d7658ef) 05/07 === */
/* active la grille (les grid-template-columns !important existants deviennent effectifs) */
.page-id-27450 .cai-tiles-row{ display:grid !important; }
/* ferme le vide : conteneurs de famille en flex-start au lieu de space-between */
.page-id-27450 .elementor-element-dc6afee,
.page-id-27450 .elementor-element-c6754e9,
.page-id-27450 .elementor-element-dd9af63{ justify-content:flex-start !important; }