/* ==========================================================================
   ABS Site - Effet « verre » (liquid glass) aux couleurs du site
   Deux classes à poser sur un conteneur ou un bouton Elementor (onglet Avancé, « Classes CSS ») :
     verre        : verre ambré (Noyer et Chêne), texte crème. Pour les photos et les fonds sombres.
     verre-clair  : verre crème, texte Noyer. Pour les fonds clairs ou les photos très sombres.
   L'arrondi reste celui réglé sur l'élément. Couleurs : variables du kit Elementor.
   ========================================================================== */

.elementor .verre,
.elementor .verre-clair,
.elementor .elementor-widget-button.verre .elementor-button,
.elementor .elementor-widget-button.verre-clair .elementor-button{
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  backdrop-filter:blur(18px) saturate(160%);
}

/* --- Verre ambré ----------------------------------------------------------- */
.elementor .e-con.verre,
.elementor .elementor-widget-button.verre .elementor-button{
  --abs-verre-texte:var(--e-global-color-bp_bg);
  --abs-verre-accent:color-mix(in srgb,var(--e-global-color-secondary) 45%,#fff);
  --abs-verre-filet:rgba(255,255,255,.22);
  background:linear-gradient(135deg,color-mix(in srgb,var(--e-global-color-primary) 66%,transparent),color-mix(in srgb,var(--e-global-color-secondary) 36%,transparent));
  border:1px solid rgba(255,255,255,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38),inset 0 -1px 0 rgba(28,25,23,.18),0 14px 34px rgba(28,25,23,.32);
  color:var(--abs-verre-texte);
}

/* --- Verre crème ----------------------------------------------------------- */
.elementor .e-con.verre-clair,
.elementor .elementor-widget-button.verre-clair .elementor-button{
  --abs-verre-texte:var(--e-global-color-bp_primary_hover);
  --abs-verre-accent:var(--e-global-color-accent);
  --abs-verre-filet:color-mix(in srgb,var(--e-global-color-primary) 18%,transparent);
  background:linear-gradient(135deg,color-mix(in srgb,var(--e-global-color-bp_bg) 84%,transparent),color-mix(in srgb,var(--e-global-color-bp_bg) 58%,transparent));
  border:1px solid rgba(255,255,255,.85);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 12px 30px rgba(28,25,23,.26);
  color:var(--abs-verre-texte);
}

/* --- Contenu : titres, textes, listes d'icônes ------------------------------- */
.elementor .e-con.verre .elementor-widget-heading .elementor-heading-title,
.elementor .e-con.verre .elementor-widget-text-editor,
.elementor .e-con.verre .elementor-widget-icon-list .elementor-icon-list-text,
.elementor .e-con.verre-clair .elementor-widget-heading .elementor-heading-title,
.elementor .e-con.verre-clair .elementor-widget-text-editor,
.elementor .e-con.verre-clair .elementor-widget-icon-list .elementor-icon-list-text,
.elementor .elementor-widget-button.verre .elementor-button .elementor-button-text,
.elementor .elementor-widget-button.verre-clair .elementor-button .elementor-button-text{color:var(--abs-verre-texte)}

/* Barre de mentions : elle prend la largeur de son contenu, pour tenir sur une ligne */
.elementor .e-con.verre:has(> .elementor-widget-icon-list .elementor-inline-items),
.elementor .e-con.verre-clair:has(> .elementor-widget-icon-list .elementor-inline-items){--width:fit-content;width:fit-content;max-width:100%;flex:0 1 auto}
.elementor .e-con.verre .elementor-widget-icon-list .elementor-inline-items,
.elementor .e-con.verre-clair .elementor-widget-icon-list .elementor-inline-items{flex-wrap:nowrap;white-space:nowrap}

/* Liste d'icônes en ligne : filets entre les mentions */
.elementor .e-con.verre .elementor-widget-icon-list .elementor-inline-items .elementor-icon-list-item,
.elementor .e-con.verre-clair .elementor-widget-icon-list .elementor-inline-items .elementor-icon-list-item{margin:0;padding:2px 22px}
.elementor .e-con.verre .elementor-widget-icon-list .elementor-inline-items .elementor-icon-list-item:not(:last-child),
.elementor .e-con.verre-clair .elementor-widget-icon-list .elementor-inline-items .elementor-icon-list-item:not(:last-child){border-right:1px solid var(--abs-verre-filet)}
.elementor .e-con.verre .elementor-widget-icon-list .elementor-inline-items .elementor-icon-list-item::after,
.elementor .e-con.verre-clair .elementor-widget-icon-list .elementor-inline-items .elementor-icon-list-item::after{display:none}

/* Icônes : couleur d'accent ; pastille ronde sur le verre ambré */
.elementor .e-con.verre .elementor-widget-icon-list .elementor-icon-list-icon i,
.elementor .e-con.verre-clair .elementor-widget-icon-list .elementor-icon-list-icon i{color:var(--abs-verre-accent);font-size:13px}
.elementor .e-con.verre .elementor-widget-icon-list .elementor-icon-list-icon svg,
.elementor .e-con.verre-clair .elementor-widget-icon-list .elementor-icon-list-icon svg{fill:var(--abs-verre-accent);width:13px;height:13px}
.elementor .e-con.verre .elementor-widget-icon-list .elementor-icon-list-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 28px;width:28px;height:28px;margin-right:4px;border:1px solid rgba(255,255,255,.3);border-radius:999px;background:rgba(255,255,255,.18)}

/* --- Navigateurs sans flou d'arrière-plan : fond plus opaque ------------------ */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .elementor .e-con.verre,
  .elementor .elementor-widget-button.verre .elementor-button{background:color-mix(in srgb,var(--e-global-color-primary) 90%,transparent)}
  .elementor .e-con.verre-clair,
  .elementor .elementor-widget-button.verre-clair .elementor-button{background:color-mix(in srgb,var(--e-global-color-bp_bg) 94%,transparent)}
}

/* --- Mobile : les mentions passent les unes sous les autres ------------------- */
@media (max-width:767px){
  .elementor .e-con.verre .elementor-widget-icon-list .elementor-inline-items,
  .elementor .e-con.verre-clair .elementor-widget-icon-list .elementor-inline-items{flex-direction:column;align-items:flex-start}
  .elementor .e-con.verre .elementor-widget-icon-list .elementor-inline-items .elementor-icon-list-item,
  .elementor .e-con.verre-clair .elementor-widget-icon-list .elementor-inline-items .elementor-icon-list-item{padding:5px 14px}
  .elementor .e-con.verre .elementor-widget-icon-list .elementor-inline-items .elementor-icon-list-item:not(:last-child),
  .elementor .e-con.verre-clair .elementor-widget-icon-list .elementor-inline-items .elementor-icon-list-item:not(:last-child){border-right:0}
  .elementor .e-con.verre:has(.elementor-widget-icon-list),
  .elementor .e-con.verre-clair:has(.elementor-widget-icon-list){border-radius:22px !important}
}