.elementor-15657 .elementor-element.elementor-element-c52f385{--display:flex;}.elementor-15657 .elementor-element.elementor-element-f68a727 .elementor-button{background-color:var( --e-global-color-93fcb9c );font-family:"Roboto", Sans-serif;font-size:14px;font-weight:700;text-transform:uppercase;fill:var( --e-global-color-accent );color:var( --e-global-color-accent );border-style:solid;border-width:0px 0px 0px 0px;border-radius:15px 0px 15px 0px;}.elementor-15657 .elementor-element.elementor-element-f68a727 .elementor-button:hover, .elementor-15657 .elementor-element.elementor-element-f68a727 .elementor-button:focus{background-color:var( --e-global-color-accent );color:var( --e-global-color-9c5a195 );}.elementor-15657 .elementor-element.elementor-element-f68a727 .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-15657 .elementor-element.elementor-element-f68a727 .elementor-button .elementor-button-content-wrapper{gap:8px;}.elementor-15657 .elementor-element.elementor-element-f68a727 .elementor-button:hover svg, .elementor-15657 .elementor-element.elementor-element-f68a727 .elementor-button:focus svg{fill:var( --e-global-color-9c5a195 );}@media(min-width:1920px){.elementor-15657 .elementor-element.elementor-element-f68a727 .elementor-button{font-size:16px;border-width:1px 1px 1px 1px;}}/* Start custom CSS for container, class: .elementor-element-c52f385 */.elementor-15657 .elementor-element.elementor-element-c52f385 {
    display: block;
    width: 100%;
}

.elementor-15657 .elementor-element.elementor-element-c52f385 .hero_stack {
    display: grid;
    overflow: hidden;
    border-radius: 40px 0px 40px 0px;
    min-height: 750px;
    padding: 0;
    position: relative;
}
[data-elementor-device-mode="desktop"] .elementor-15657 .elementor-element.elementor-element-c52f385 .hero_stack,
[data-elementor-device-mode="laptop"] .elementor-15657 .elementor-element.elementor-element-c52f385 .hero_stack {
    min-height: 600px;
}

.elementor-15657 .elementor-element.elementor-element-c52f385 .hero_stack > * {
    grid-area: 1 / 1;
}

.elementor-15657 .elementor-element.elementor-element-c52f385 .hero_image {
    width: 100%;
    height: calc(100% + 80px);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.elementor-15657 .elementor-element.elementor-element-c52f385 .hero_image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.elementor-15657 .elementor-element.elementor-element-c52f385 .hero_logo {
    position: absolute;
    z-index: 20;
    width: 70px;
    height: 70px;
    top: 50px;
    right: 50px;
}
.elementor-15657 .elementor-element.elementor-element-c52f385 .hero_logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.elementor-15657 .elementor-element.elementor-element-c52f385 .hero_content {
    width: 100%;
    height: 100%;
    position: relative;
    background: linear-gradient(66deg, #0090CD 5%, #1A2C6166 90%, #1A2C6199 100%);
    display: flex;
    align-items: center;
    padding: 65px;
}

.elementor-15657 .elementor-element.elementor-element-c52f385 .hero_textZone {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 0;
    padding-top: 52px;
    position: relative;
}

.elementor-15657 .elementor-element.elementor-element-c52f385 .elementor-widget-heading {
    width: max-content;
}
.elementor-15657 .elementor-element.elementor-element-c52f385 h2 {
    font-family: Ubuntu;
    font-weight: bold;
    color: #FFF !important;
    font-size: 50px;
    margin: 0;
    line-height: 50px;
    display: inline-block;
    position: relative;
    overflow: hidden;
    padding-bottom: 40px;
    opacity: 0;
    transform: translateY(-50%);
    transition: all 0.4s ease 0.7s;
}

.elementor-editor-active .elementor-15657 .elementor-element.elementor-element-c52f385 h2,
.elementor-15657 .elementor-element.elementor-element-c52f385.view-entered h2 {
    opacity: 1;
    transform: translateY(0);
}

.elementor-15657 .elementor-element.elementor-element-c52f385 .elementor-widget-heading:after {
    content: ' ';
    display: block;
    border-bottom: 3px solid #FFF;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    transition: all 0.4s ease 0.3s;
}

.elementor-editor-active .elementor-15657 .elementor-element.elementor-element-c52f385 .elementor-widget-heading:after,
.elementor-15657 .elementor-element.elementor-element-c52f385.view-entered .elementor-widget-heading:after {
    width: 100%;
}



.elementor-15657 .elementor-element.elementor-element-c52f385 .hero_text {
    width: 50%;
    opacity: 0;
    transform: translateY(50%);
    transition: all 0.4s ease 1s;
}

.elementor-editor-active .elementor-15657 .elementor-element.elementor-element-c52f385 .hero_text,
.elementor-15657 .elementor-element.elementor-element-c52f385.view-entered .hero_text {
    opacity: 1;
    transform: translateY(0);
}

.elementor-15657 .elementor-element.elementor-element-c52f385 .elementor-button {
    opacity: 0;
    transform: translateY(50%);
    transition: all 0.4s ease 1.3s;
}

.elementor-editor-active .elementor-15657 .elementor-element.elementor-element-c52f385 .elementor-button,
.elementor-15657 .elementor-element.elementor-element-c52f385.view-entered .elementor-button {
    opacity: 1;
    transform: translateY(0);
}

[data-elementor-device-mode="laptop"] .elementor-15657 .elementor-element.elementor-element-c52f385 .hero_text {
    width: 75%;   
}
.elementor-15657 .elementor-element.elementor-element-c52f385 .hero_text,
.elementor-15657 .elementor-element.elementor-element-c52f385 .hero_text * {
    color: #FFF !important;
    font-size: 40px;
    line-height: 42px;
}


[data-elementor-device-mode="tablet"] .elementor-15657 .elementor-element.elementor-element-c52f385 .hero_logo,
[data-elementor-device-mode="mobile"] .elementor-15657 .elementor-element.elementor-element-c52f385 .hero_logo {
    display: none;
}

[data-elementor-device-mode="tablet"] .elementor-15657 .elementor-element.elementor-element-c52f385 .hero_stack,
[data-elementor-device-mode="mobile"] .elementor-15657 .elementor-element.elementor-element-c52f385 .hero_stack {
    min-height: max-content;
}

[data-elementor-device-mode="tablet"] .elementor-15657 .elementor-element.elementor-element-c52f385 .hero_content,
[data-elementor-device-mode="mobile"] .elementor-15657 .elementor-element.elementor-element-c52f385 .hero_content {
    background: linear-gradient(0deg, #0090CD 5%, #1A2C6166 90%, #1A2C6199 100%);
    padding: 45px;
    padding-top: 45%;
}
[data-elementor-device-mode="mobile"] .elementor-15657 .elementor-element.elementor-element-c52f385 .hero_content {
    padding: 25px;
    padding-top: 60%;
}

[data-elementor-device-mode="tablet"] .elementor-15657 .elementor-element.elementor-element-c52f385 .hero_text,
[data-elementor-device-mode="mobile"] .elementor-15657 .elementor-element.elementor-element-c52f385 .hero_text {
    width: 100%;
}
[data-elementor-device-mode="mobile"] .elementor-15657 .elementor-element.elementor-element-c52f385 h2 {
    font-size: 45px;
    text-align: center;
}
[data-elementor-device-mode="mobile"] .elementor-15657 .elementor-element.elementor-element-c52f385 .hero_text,
[data-elementor-device-mode="mobile"] .elementor-15657 .elementor-element.elementor-element-c52f385 .hero_text * {
    font-size: 30px;
}/* End custom CSS */
/* Start custom CSS *//* =======================
   Hero – variables & base
   ======================= */
.calym-hero{
  /* Ajustables */
  --rails-w: 90vw;                   /* largeur cible du bloc Rails */
  --hero-min-h: clamp(560px, 70vh, 820px);
  --cards-overlap: clamp(50px, 8vh, 90px);

  --pad-x: clamp(16px, 5vw, 96px);
  --pad-top: clamp(24px, 5vh, 64px);
  --gap-x: clamp(24px, 4vw, 64px);
  --claims-gap: clamp(6px, 1.2vw, 12px);
  --cards-gap: clamp(12px, 2vw, 24px);

  position: relative;
  min-height: var(--hero-min-h);
  padding-top: var(--pad-top);
  overflow: visible;
}

/* Reset local Elementor dans le hero (évite les gaps/marges parasites) */
.calym-hero .elementor-widget,
.calym-hero .elementor-column,
.calym-hero .elementor-container{
  margin:0 !important; padding:0 !important; gap:0 !important;
}

/* Rails = ancre des colonnes et des cartes */
.calym-rails{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-x);
  width: min(var(--rails-w), 1280px); /* 90vw par défaut, plafonné à 1280px */
  margin: 0 auto;
  padding: 0;                         /* pas de padding ici, on garde l’align à la grille */
}

/* Colonnes : 50/50 max */
.calym-left{
  position: relative;                 /* ancre du visuel */
  flex: 0 1 50%;
  max-width: 50%;
  min-width: 320px;
  overflow: visible;
}
.calym-right{
  flex: 0 1 50%;
  max-width: 50%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--claims-gap);
}

/* Logo : borné à 360px max, et vraiment appliqué */
.calym-logo{ position: relative !important; z-index: 2; }
.calym-logo img,
.elementor-widget-image.calym-logo img{             /* ↑ plus spécifique */
  width: clamp(220px, 26vw, 360px) !important;      /* ← ne dépassera pas 360 */
  height: auto;
  display: block;
  max-width: none !important;
}

/* Visuel : ancré à GAUCHE, pas à droite */
.calym-visual{
  position: absolute !important;
  z-index: 1;
  pointer-events: none;
  left: clamp(-100px, -8vw, -40px);   /* petit débord à gauche */
  top: clamp(0px, 2vh, 36px);
  width: clamp(520px, 44vw, 680px);
}
.calym-visual img{ display:block; width:100%; height:auto; }

/* Pastilles des claims */
.calym-right .elementor-heading-title{
  display:inline-block; padding:8px 14px; border-radius:6px;
  background:#0090CD; color:#fff; font-weight:700; line-height:1.25;
}
.calym-right .elementor-widget-button{ margin-top: clamp(8px, 2vh, 24px); }

/* Cartes chevauchantes — ATTENTION au 'left' */
.calym-cards{
  position: absolute;
  left: 50%;                                   /* ← la faute venait d'ici : 'lerft' */
  bottom: calc(var(--cards-overlap) * -1);
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: var(--cards-gap);
  width: min(var(--rails-w), 1280px);          /* alignées sur la largeur de Rails */
  justify-content: center;
  pointer-events: none;                         /* réactivé sur chaque carte */
}
.calym-card{
  pointer-events: auto;
  background:#EEF2FB;
  border-radius:16px 0 16px 0;                  /* haut-gauche & bas-droite */
  box-shadow:0 10px 24px rgba(24,54,80,.15);
  padding:18px 22px 22px;
  width: clamp(200px, 24vw, 300px);
  position: relative;
}

/* Responsive */
@media (max-width: 1140px){
  .calym-rails{
    flex-direction: column; align-items: flex-start;
    width: calc(100% - 2*var(--pad-x)); padding: 0 var(--pad-x);
  }
  .calym-left,.calym-right{ max-width: 100%; flex-basis: auto; }
  .calym-visual{ left: clamp(-60px, -8vw, -10px); width: clamp(440px, 80vw, 640px); }
  .calym-cards{ left: var(--pad-x); right: var(--pad-x); transform: none; flex-wrap: wrap; width: auto; }
}
@media (max-width: 640px){
  .calym-cards{ gap: 16px; }
  .calym-card{ width: min(100%, 320px); }
}

/* Option desktop : rails fixe à 1120px (décommente si tu veux un fixe ≥1280px) */
/*
@media (min-width:1280px){
  .calym-hero{ --rails-w: 1120px; }
}
*/



/***********************************************
REST OF SITE
****************************************************/

/* Supprime les ombres noires du coverflow */
#videoshead .swiper-slide-shadow-left,
#videoshead .swiper-slide-shadow-right{
  display: none !important;
  opacity: 0 !important;
}

/* Par sécurité, pas de fond noir derrière les images */
#videoshead .elementor-carousel-image{
  background-color: transparent !important;
}

/* Chaque carte occupe toute la hauteur et pousse le bouton en bas */
.coop-card{display:flex;flex-direction:column;height:100%;}
.coop-card .elementor-button{margin-top:auto;}

/* Canvas de la carte */
.map-wrap{
  position: relative;
  width: min(980px, 96vw);
  margin-inline: auto;
  /* Verrouille le ratio : mets ici le vrai ratio de ton image */
  aspect-ratio: 1 / 1; /* ex. 820x820 ≈ 1/1 ; 900x750 = 6/5 */
  background: #fff; /* optionnel */
}
.map-wrap > img{
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%;
  object-fit: contain; /* garde l’image entière */
  border-radius: 22px;
  filter: drop-shadow(0 18px 40px rgba(5,23,63,.12));
}

/* Hotspots centrés exactement sur leurs coordonnées */
.hotspot{
  position: absolute;
  transform: translate(-50%, -50%); /* ← centre du point = top/left */
  width: 16px; height: 16px;
  background: #7E2B73;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 6px 14px rgba(5,23,63,.18);
  cursor: pointer;
  z-index: 2;
}

/* Onde pulsée */
.hotspot::after{
  content:"";
  position:absolute; 
  inset:-10px;
  border:2px solid #7E2B73; border-radius:50%;
  opacity:.45; animation:wave 2.6s ease-out infinite;
}
@keyframes wave{
  0%{transform:scale(.6); opacity:.5}
  70%{transform:scale(1.9); opacity:0}
  100%{opacity:0}
}

/********** CAROUSEL ***********/

/* Overlay bleu – base */
#videoshead .swiper-slide {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}
#videoshead .swiper-slide::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background: linear-gradient(to top, rgba(0,144,205,.5) 0%, rgba(26,44,97,.3) 100%);
  opacity: .65;                         /* base */
  transition: opacity .25s ease;        /* lissage */
}

/* Active (et clone actif) → overlay plus léger */
#videoshead .swiper-slide-active::after,
#videoshead .swiper-slide-duplicate-active::after{
  opacity: .35;                         /* mets 0 si tu veux le supprimer */
}

/* Fades latéraux (desktop uniquement) */
#videoshead .swiper::before,
#videoshead .swiper::after{
  content:"";
  position:absolute; top:0; bottom:0;
  width: min(24vw, 320px);
  pointer-events:none; z-index:5;
}
#videoshead .swiper::before{
  left:0;  background: linear-gradient(to right, rgba(248,248,248,.9), rgba(248,248,248,0));
}
#videoshead .swiper::after{
  right:0; background: linear-gradient(to left,  rgba(248,248,248,.9), rgba(248,248,248,0));
}

/* Casser ces fades sur ≤ 1024px */
@media (max-width:1024px){
  #videoshead .swiper::before,
  #videoshead .swiper::after{ content:none !important; }
}

/* Si besoin : flèches au-dessus des fades */
#videoshead .elementor-swiper-button{ position:relative; z-index:10; }



/* Taille de la boîte de dialogue de la lightbox Elementor */
body.dialog-lightbox .dialog-widget-content, .elementor-lightbox .elementor-video-container .elementor-video-landscape {
  width: clamp(320px,70vw, 980px)!important; /* mobile→desktop */
  height: auto;
  border-radius: 12px;              /* optionnel, pour adoucir */
}

/* Pas de padding parasite, et ratio vidéo correct */
body.dialog-lightbox .dialog-message{ padding:0; }

body.dialog-lightbox .elementor-video-container,
body.dialog-lightbox iframe,
body.dialog-lightbox video{
  width:100%;
  height:auto;
  aspect-ratio:16/9;
}

/* Finesse par breakpoint (facultatif) */
@media (min-width:1024px){
  body.dialog-lightbox .dialog-widget-content{ width:60vw; max-width:1100px; }
}
@media (max-width:767px){
  body.dialog-lightbox .dialog-widget-content{ width:92vw; }
}

/* 1) Le lightbox doit passer AU-DESSUS de tout */
body.dialog-lightbox-body .dialog-lightbox-widget,
body.dialog-lightbox-body .elementor-lightbox {
  z-index: 999999 !important;
}

/* 2) Bouton “X” gros, visible, toujours cliquable */
body.dialog-lightbox-body .dialog-lightbox-close-button {
  position: fixed !important;
  top: calc(62px + env(safe-area-inset-top) + var(--wp-admin--admin-bar--height, 0px)) !important;
  right: calc(62px + env(safe-area-inset-right)) !important;
  left: auto !important;

  width: 48px !important;
  height: 48px !important;
  padding: 0 !important;

  display: grid !important;
  place-items: center !important;

  background: rgba(26,44,97,.80) !important;
  border-radius: 999px !important;
  box-shadow: 0 10px 25px rgba(0,0,0,.25) !important;

  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* 3) Icône bien lisible */
body.dialog-lightbox-body .dialog-lightbox-close-button svg {
  width: 20px !important;
  height: 20px !important;
}

/* 4) Même quand Elementor “cache l’UI” du slideshow */
body.dialog-lightbox-body .elementor-slideshow--ui-hidden .dialog-lightbox-close-button {
  opacity: 1 !important;
  visibility: visible !important;
}


/**********************************************************************************/
/* Infobulle accessible */
.hotspot:focus-visible{ outline: 3px solid #0090CD; outline-offset: 2px; }
.hotspot:hover::before,
.hotspot:focus-visible::before{
  content: attr(data-tip);
  position: absolute; left: 50%; top: -12px;
  transform: translate(-50%, -100%);
  background:#0A295A; color:#fff;
  font-size:.78rem; line-height:1.2;
  padding:.35rem .55rem; border-radius:.5rem;
  white-space: nowrap; box-shadow:0 12px 30px rgba(5,23,63,.3);
}

/* Mobile : points + bulles plus petits */
@media (max-width: 767px){
  .hotspot{ width:12px; height:12px; border-width:2px; }
  .hotspot::after{ inset:-8px; }
  .hotspot:hover::before{ display:none; } /* évite les bulles qui sortent */
}

/* ===== CTA lien texte (ex. "En savoir plus") ===== */
.link-cta{
  --c:#006ea8;          /* couleur par défaut */
  --c-hover:#003a6a;    /* couleur au hover */
  --gap:.55rem;         /* espace texte/flèche */

  position:relative;
  display:inline-flex; align-items:center; gap:var(--gap);
  color:var(--c); text-decoration:none; font-weight:700;
  line-height:1.2;
}
.link-cta::after{
  /* flèche auto si pas d’icône dans le HTML */
  content:"2192";   /* →  FIX: unicode correct */
  display:inline-block;
  transform:translateX(0);
  animation: arrow-wiggle 1.2s ease-in-out infinite;
}
/* hover : couleur + wiggle plus ample + petit lift */
.link-cta:hover{ color:var(--c-hover); }
.link-cta:hover::after{
  animation: arrow-wiggle-big .8s ease-in-out infinite;
  will-change: transform;
}
/* Accessibilité : focus visible au clavier */
.link-cta:focus-visible{
  outline:2px solid #b04ee0; outline-offset:2px; border-radius:4px;
}

/* ===== Bouton Elementor avec icône (classe : cta-bounce) ===== */
.cta-bounce .elementor-button-icon i,
.cta-bounce .elementor-button-icon svg{
  animation: arrow-wiggle 1.2s ease-in-out infinite;
  transform-origin: center;
}
.cta-bounce .elementor-button-content-wrapper{
  display:inline-flex; gap:.55rem; align-items:center;
}
.cta-bounce .elementor-button-content-wrapper:not(:has(.elementor-button-icon))::after{
  content:"2192";    /* →  FIX: unicode correct */
  display:inline-block;
  animation: arrow-wiggle 1.2s ease-in-out infinite;
}
/* Hover : même principe, animation plus ample */
.cta-bounce:hover .elementor-button-icon i,
.cta-bounce:hover .elementor-button-icon svg,
.cta-bounce:hover .elementor-button-content-wrapper:not(:has(.elementor-button-icon))::after{
  animation: arrow-wiggle-big .8s ease-in-out infinite;
}

/* Motion-reduce: coupe les wiggles si l’utilisateur préfère moins d’anim */
@media (prefers-reduced-motion: reduce){
  .link-cta::after,
  .cta-bounce .elementor-button-icon i,
  .cta-bounce .elementor-button-icon svg,
  .cta-bounce .elementor-button-content-wrapper:not(:has(.elementor-button-icon))::after{
    animation: none !important;
  }
}

/* Petites animations */
@keyframes arrow-wiggle{
  0%,100% { transform: translateX(0); }
  50%     { transform: translateX(4px); }
}
@keyframes arrow-wiggle-big{
  0%,100% { transform: translateX(0); }
  50%     { transform: translateX(8px); }
}

/* Optionnel : style commun des boutons si tu veux normaliser */
.cta-bounce.elementor-button{
  --bg:#00a0cf;           /* fond */
  --bg-hover:#008ab3;     /* fond hover */
  --txt:#fff;             /* texte */
  --rad: 10px;            /* arrondi */
  --pad-y:.75rem; --pad-x:1.1rem;

  background:var(--bg); color:var(--txt);
  border-radius:var(--rad);
  padding:var(--pad-y) var(--pad-x);
  font-weight:800;
}
.cta-bounce.elementor-button:hover{ background:var(--bg-hover); }

/* === CALYM - Logos: hauteur fixe + centrage === */
.calym-logos{
  --logo-h: 70px;   /* hauteur max du logo */
  --row-h: 120px;   /* hauteur de la “ligne” du carousel */
}

/* Swiper / EA wrapper */
.calym-logos .eael-logo-carousel,
.calym-logos .swiper,
.calym-logos .swiper-container{
  height: var(--row-h) !important;
}

/* Swiper force parfois un height inline -> on écrase */
.calym-logos .swiper-wrapper{
  height: var(--row-h) !important;
  align-items: center !important;
}

/* Chaque slide centrée */
.calym-logos .swiper-slide{
  height: var(--row-h) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Les liens/containers internes aussi */
.calym-logos .eael-logo-carousel-item,
.calym-logos .swiper-slide a{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
}

/* L'image: jamais plus haute que --logo-h, conserve les proportions */
.calym-logos .swiper-slide img{
  max-height: var(--logo-h) !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

/* === Fade blanc aux extrémités === */
.calym-logos .eael-logo-carousel{
  position: relative;
  overflow: hidden; /* important */
}

.calym-logos .eael-logo-carousel::before,
.calym-logos .eael-logo-carousel::after{
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 70px;
  z-index: 5;
  pointer-events: none;
}

.calym-logos .eael-logo-carousel::before{
  left: 0;
  background: linear-gradient(to right, #fff 0%, rgba(255,255,255,0) 100%);
}

.calym-logos .eael-logo-carousel::after{
  right: 0;
  background: linear-gradient(to left, #fff 0%, rgba(255,255,255,0) 100%);
}/* End custom CSS */