.elementor-4248 .elementor-element.elementor-element-217646f{--display:flex;--min-height:0px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:120px;--padding-bottom:60px;--padding-left:0px;--padding-right:0px;}.elementor-4248 .elementor-element.elementor-element-217646f:not(.elementor-motion-effects-element-type-background), .elementor-4248 .elementor-element.elementor-element-217646f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F0F1F4;}.elementor-4248 .elementor-element.elementor-element-36c99a7 ul.hfe-breadcrumbs li{margin-right:10px;}.elementor-4248 .elementor-element.elementor-element-bda90d6{text-align:center;}.elementor-4248 .elementor-element.elementor-element-bda90d6 .elementor-heading-title{font-family:"Outfit", Sans-serif;font-size:64px;font-weight:700;color:#1665C0;}.elementor-4248 .elementor-element.elementor-element-d2cb85a{text-align:center;}.elementor-4248 .elementor-element.elementor-element-d504c27{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:80px;--padding-bottom:80px;--padding-left:0px;--padding-right:0px;}.elementor-4248 .elementor-element.elementor-element-d504c27:not(.elementor-motion-effects-element-type-background), .elementor-4248 .elementor-element.elementor-element-d504c27 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F8FAFC;}.elementor-4248 .elementor-element.elementor-element-7c669a6{--display:grid;--e-con-grid-template-columns:repeat(2, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-4248 .elementor-element.elementor-element-8a440a0{--display:flex;}.elementor-4248 .elementor-element.elementor-element-f0ce1c8{--display:flex;}.elementor-4248 .elementor-element.elementor-element-40e2b50{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--padding-top:100px;--padding-bottom:100px;--padding-left:0px;--padding-right:0px;}.elementor-4248 .elementor-element.elementor-element-40e2b50:not(.elementor-motion-effects-element-type-background), .elementor-4248 .elementor-element.elementor-element-40e2b50 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F8FAFC;}.elementor-4248 .elementor-element.elementor-element-a068880{--display:flex;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-4248 .elementor-element.elementor-element-5590efb .elementor-button{text-decoration:none;}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-4248 .elementor-element.elementor-element-7c669a6{--grid-auto-flow:row;}}@media(min-width:768px){.elementor-4248 .elementor-element.elementor-element-d504c27{--content-width:1475px;}.elementor-4248 .elementor-element.elementor-element-40e2b50{--content-width:1475px;}}@media(max-width:767px){.elementor-4248 .elementor-element.elementor-element-7c669a6{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}}/* Start custom CSS for heading, class: .elementor-element-bda90d6 */.texte-hero{
    color:#F27A24;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-217646f *//* 1. L'Espace et le fond pur */
.elementor-4248 .elementor-element.elementor-element-217646f {
  background-color: #F8FAFC !important; /* Gris bleuté ultra clair et pur */
  padding: 140px 20px 160px 20px !important; /* Beaucoup d'espace pour respirer */
  position: relative;
  overflow: hidden; /* Empêche les cercles de fond de dépasser */
}

/* 2. DÉCORS GÉOMÉTRIQUES : Cercles géants en arrière-plan (Aplats unis) */
.elementor-4248 .elementor-element.elementor-element-217646f::before {
  content: '';
  position: absolute;
  top: -20%; left: -10%;
  width: 600px; height: 600px;
  background-color: #1665C0; /* Bleu Espoir uni */
  border-radius: 50%;
  opacity: 0.03; /* Presque invisible, crée une texture d'espace */
  z-index: 0;
  pointer-events: none;
}
.elementor-4248 .elementor-element.elementor-element-217646f::after {
  content: '';
  position: absolute;
  bottom: -30%; right: -5%;
  width: 800px; height: 800px;
  background-color: #8A9A86; /* Vert Sauge uni */
  border-radius: 50%;
  opacity: 0.05;
  z-index: 0;
  pointer-events: none;
}

/* 3. Le Titre Principal (La première ligne) */
.elementor-4248 .elementor-element.elementor-element-217646f .elementor-heading-title {
  color: #1665C0 !important; /* Bleu Uni */
  font-family: 'Outfit', sans-serif;
  font-size: clamp(40px, 6vw, 76px) !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  position: relative;
  z-index: 1;
}

/* =========================================================================
   4. L'EFFET "WAOUH" ÉPURÉ : Texte Orange + Ombre Bleue Nette
========================================================================= */
.elementor-4248 .elementor-element.elementor-element-217646f .texte-hero {
  display: inline-block;
  background-color: transparent !important; 
  color: #F27A24 !important; /* Texte orange vif */
  padding: 0; 
  
  /* Marges pour écarter les mots à côté */
  margin: 10px 15px 0 15px; 
  font-size: 1.2em !important; 
  transform: rotate(0deg); 
  
  /* Le texte orange et JUSTE l'ombre bleue, parfaitement lisible */
  text-shadow: 4px 4px 0px #1665C0;
  
  animation: textPopPremium 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  transition: all 0.4s ease-out;
  cursor: default;
}

/* L'ANIMATION DE SURVOL (Lévitation douce) */
.elementor-4248 .elementor-element.elementor-element-217646f .texte-hero:hover {
  transform: translateY(-6px) rotate(0deg) !important; 
  /* Quand le texte se soulève, l'ombre s'écarte un peu plus */
  text-shadow: 8px 8px 0px #1665C0 !important;
}

/* Le moteur de l'animation d'apparition (DROIT) */
@keyframes textPopPremium {
  0% { 
    transform: scale(0.9) translateY(10px) rotate(0deg); 
    opacity: 0; 
    text-shadow: 0px 0px 0px #1665C0; 
  }
  100% { 
    transform: scale(1) translateY(0) rotate(0deg); 
    opacity: 1; 
    text-shadow: 4px 4px 0px #1665C0; 
  }
}

/* 5. Le paragraphe descriptif (Mieux espacé) */
.elementor-4248 .elementor-element.elementor-element-217646f .elementor-widget-text-editor {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 48px auto 56px auto !important; /* Plus d'espace avant les boutons */
}
.elementor-4248 .elementor-element.elementor-element-217646f .elementor-widget-text-editor p {
  font-family: 'Inter', sans-serif;
  font-size: 22px !important; /* Texte plus grand car c'est l'introduction */
  color: #4B5563;
  line-height: 1.6;
  text-align: center;
}

/* 6. Assurer que les boutons (enfants) restent bien cliquables */
.elementor-4248 .elementor-element.elementor-element-217646f .e-child {
  position: relative;
  z-index: 2;
}

/* =========================================
   7. BREADCRUMB (Le fil d'Ariane)
========================================= */
.elementor-4248 .elementor-element.elementor-element-217646f .elementor-widget-hfe-breadcrumbs-widget {
  position: relative;
  z-index: 1;
  margin-bottom: 24px !important; /* Espace sous le fil d'ariane */
}

/* Centre le fil d'ariane proprement */
.elementor-4248 .elementor-element.elementor-element-217646f .hfe-breadcrumbs {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* Style premium des textes et liens (Ex: Accueil » Nos actions) */
.elementor-4248 .elementor-element.elementor-element-217646f .hfe-breadcrumbs a,
.elementor-4248 .elementor-element.elementor-element-217646f .hfe-breadcrumbs span {
  font-family: 'Outfit', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  color: #1665C0 !important; /* Bleu nuit Espoir 80 */
  text-decoration: none !important;
  opacity: 0.6; /* Un peu transparent par défaut pour ne pas voler la vedette au titre */
  transition: all 0.3s ease;
}

/* Effet Waouh au survol des liens cliquables (Ex: "Accueil") */
.elementor-4248 .elementor-element.elementor-element-217646f .hfe-breadcrumbs a:hover span {
  opacity: 1; /* Devient 100% opaque */
  color: #F27A24 !important; /* Passe au orange ! */
}

/* Ajustement du séparateur (le petit "»") */
.elementor-4248 .elementor-element.elementor-element-217646f .hfe-breadcrumbs-separator {
  margin: 0 12px !important;
}
.elementor-4248 .elementor-element.elementor-element-217646f .hfe-breadcrumbs-separator span {
  opacity: 0.4 !important; /* Rend le petit chevron un peu plus discret */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d504c27 *//* =======================================================
   DESIGN GRILLE WAOUH - 2 CARTES CONTRASTÉES
======================================================= */

/* Espacement entre les deux cartes de la grille */
.elementor-4248 .elementor-element.elementor-element-d504c27 .e-grid {
  gap: 40px !important;
}

/* --- BASE COMMUNE DES 2 CARTES --- */
.elementor-4248 .elementor-element.elementor-element-d504c27 .e-grid > .e-child {
  border-radius: 32px !important;
  padding: 50px !important;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  display: flex !important;
  flex-direction: column !important;
}
.elementor-4248 .elementor-element.elementor-element-d504c27 .e-grid > .e-child:hover {
  transform: translateY(-5px) !important;
}

/* 🔵 NOUVEAU : FORCER LE GRAS À LA LIGNE DANS LES LISTES */
.elementor-4248 .elementor-element.elementor-element-d504c27 .e-grid > .e-child ul li strong,
.elementor-4248 .elementor-element.elementor-element-d504c27 .e-grid > .e-child ul li b {
  display: block !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 20px !important;
  margin-bottom: 6px !important;
}

/* =========================================
   CARTE 1 (Gauche) : Blanc / Orange / Bleu
========================================= */
.elementor-4248 .elementor-element.elementor-element-d504c27 .e-grid > .e-child:nth-child(1) {
  background: #FFFFFF !important;
  border: 4px solid #F27A24 !important; /* Bordure Orange */
  box-shadow: 16px 16px 0px 0px #1665C0 !important; /* Ombre Bleue */
}
.elementor-4248 .elementor-element.elementor-element-d504c27 .e-grid > .e-child:nth-child(1):hover {
  box-shadow: 20px 20px 0px 0px #1665C0 !important;
}
/* Textes */
.elementor-4248 .elementor-element.elementor-element-d504c27 .e-grid > .e-child:nth-child(1) .elementor-heading-title {
  font-family: 'Outfit', sans-serif !important;
  font-size: 36px !important;
  font-weight: 800 !important;
  color: #F27A24 !important; /* Titre Orange */
  margin-bottom: 24px !important;
}
.elementor-4248 .elementor-element.elementor-element-d504c27 .e-grid > .e-child:nth-child(1) .elementor-widget-text-editor p {
  font-family: 'Inter', sans-serif !important;
  font-size: 18px !important;
  color: #4B5563 !important;
  line-height: 1.7 !important;
}
/* Liste à puces de la Carte 1 */
.elementor-4248 .elementor-element.elementor-element-d504c27 .e-grid > .e-child:nth-child(1) ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.elementor-4248 .elementor-element.elementor-element-d504c27 .e-grid > .e-child:nth-child(1) ul li {
  font-family: 'Inter', sans-serif !important;
  font-size: 16px !important;
  color: #4B5563 !important;
  margin-bottom: 24px !important;
  position: relative !important;
  padding-left: 32px !important;
  font-weight: 500 !important;
}
/* Couleur du gras pour la carte 1 */
.elementor-4248 .elementor-element.elementor-element-d504c27 .e-grid > .e-child:nth-child(1) ul li strong,
.elementor-4248 .elementor-element.elementor-element-d504c27 .e-grid > .e-child:nth-child(1) ul li b {
  color: #1665C0 !important; /* Titre du bailleur/locataire en bleu */
}
.elementor-4248 .elementor-element.elementor-element-d504c27 .e-grid > .e-child:nth-child(1) ul li::before {
  content: '\2192' !important;
  position: absolute !important;
  left: 0 !important;
  top: 2px !important;
  color: #F27A24 !important; /* Flèche orange */
  font-weight: 900 !important;
  font-size: 20px !important;
}


/* =========================================
   CARTE 2 (Droite) : Bleu Nuit / Blanc / Orange
========================================= */
.elementor-4248 .elementor-element.elementor-element-d504c27 .e-grid > .e-child:nth-child(2) {
  background: #1665C0 !important; /* Fond Bleu */
  border: 4px solid #1665C0 !important; 
  box-shadow: 16px 16px 0px 0px #F27A24 !important; /* Ombre Orange */
}
.elementor-4248 .elementor-element.elementor-element-d504c27 .e-grid > .e-child:nth-child(2):hover {
  box-shadow: 20px 20px 0px 0px #F27A24 !important;
}
/* Textes */
.elementor-4248 .elementor-element.elementor-element-d504c27 .e-grid > .e-child:nth-child(2) .elementor-heading-title {
  font-family: 'Outfit', sans-serif !important;
  font-size: 36px !important;
  font-weight: 800 !important;
  color: #FFFFFF !important; /* Titre Blanc */
  margin-bottom: 24px !important;
}
.elementor-4248 .elementor-element.elementor-element-d504c27 .e-grid > .e-child:nth-child(2) .elementor-widget-text-editor p {
  font-family: 'Inter', sans-serif !important;
  font-size: 18px !important;
  color: #E2E8F0 !important; /* Texte gris très clair */
  line-height: 1.7 !important;
}
/* Liste à puces de la Carte 2 */
.elementor-4248 .elementor-element.elementor-element-d504c27 .e-grid > .e-child:nth-child(2) ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.elementor-4248 .elementor-element.elementor-element-d504c27 .e-grid > .e-child:nth-child(2) ul li {
  font-family: 'Inter', sans-serif !important;
  font-size: 16px !important;
  color: #FFFFFF !important; /* Texte liste Blanc */
  margin-bottom: 16px !important;
  position: relative !important;
  padding-left: 32px !important;
  font-weight: 600 !important;
}
.elementor-4248 .elementor-element.elementor-element-d504c27 .e-grid > .e-child:nth-child(2) ul li strong,
.elementor-4248 .elementor-element.elementor-element-d504c27 .e-grid > .e-child:nth-child(2) ul li b {
  color: #FFFFFF !important; 
}
.elementor-4248 .elementor-element.elementor-element-d504c27 .e-grid > .e-child:nth-child(2) ul li::before {
  content: '\2192' !important;
  position: absolute !important;
  left: 0 !important;
  top: 2px !important;
  color: #F27A24 !important; /* Flèche Orange pour contraster sur fond bleu */
  font-weight: 900 !important;
  font-size: 20px !important;
}

/* 🔵 NOUVEAU : BADGE DDETS (Dans la carte bleue) */
.elementor-4248 .elementor-element.elementor-element-d504c27 .badge-ddets {
  background: #FFFFFF !important;
  color: #1665C0 !important;
  font-weight: 800 !important;
  font-family: 'Outfit', sans-serif !important;
  padding: 10px 16px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  display: inline-block !important;
  margin-top: 8px !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
}


/* =========================================
   ADAPTATION MOBILE
========================================= */
@media (max-width: 991px) {
  .elementor-4248 .elementor-element.elementor-element-d504c27 .e-grid > .e-child { padding: 32px !important; }
  .elementor-4248 .elementor-element.elementor-element-d504c27 .e-grid > .e-child:nth-child(1) { box-shadow: 8px 8px 0px 0px #1665C0 !important; }
  .elementor-4248 .elementor-element.elementor-element-d504c27 .e-grid > .e-child:nth-child(2) { box-shadow: 8px 8px 0px 0px #F27A24 !important; }
  .elementor-4248 .elementor-element.elementor-element-d504c27 .e-grid > .e-child .elementor-heading-title { font-size: 32px !important; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a068880 *//* À COLLER DANS LE CUSTOM CSS DU CONTENEUR DU CTA */

/* 1. Le grand bandeau Bleu de base */
.elementor-4248 .elementor-element.elementor-element-a068880 {
  background-color: #1665C0 !important; /* Fond Bleu Uni */
  border-radius: 24px;
  padding: 80px 40px !important;
  box-shadow: 16px 16px 0px 0px #F27A24; /* La double carte reste ! */
  
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border: 1px solid #1665C0;
  
  /* CRUCIAL : Masque les cercles géants quand ils sont "hors" du bloc */
  overflow: hidden; 
  position: relative;
  z-index: 1;
  transition: all 0.4s ease;
}

/* --- L'EFFET "WAOUH" : Les cercles cachés à l'extérieur --- */
/* 1. Le Premier Cercle Orange caché en haut à gauche */
.elementor-4248 .elementor-element.elementor-element-a068880::before {
  content: '';
  position: absolute;
  width: 550px; height: 550px;
  background-color: #F27A24; /* Aplat Orange Uni */
  border-radius: 50%;
  top: -600px; /* Totalement caché en haut */
  left: -200px;
  /* Animation élastique (effet de rebond) */
  transition: all 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
  z-index: 0;
  pointer-events: none; /* Empêche de bloquer la souris */
}

/* 2. Le Deuxième Cercle Orange (Anciennement Vert) caché en bas à droite */
.elementor-4248 .elementor-element.elementor-element-a068880::after {
  content: '';
  position: absolute;
  width: 650px; height: 650px;
  background-color: #F27A24; /* Aplat Orange Uni */
  border-radius: 50%;
  bottom: -700px; /* Totalement caché en bas */
  right: -250px;
  transition: all 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition-delay: 0.1s; /* Part une fraction de seconde plus tard ! */
  z-index: 0;
  pointer-events: none;
}

/* --- LE DÉCLENCHEUR DE L'ANIMATION AU SURVOL --- */
.elementor-4248 .elementor-element.elementor-element-a068880:hover {
  transform: translate(-4px, -4px); /* Le bloc entier frémit */
  box-shadow: 20px 20px 0px 0px #F27A24; 
}

/* Les deux cercles orange JAILLISSENT vers l'intérieur ! */
.elementor-4248 .elementor-element.elementor-element-a068880:hover::before {
  top: -150px; 
  left: -100px;
}
.elementor-4248 .elementor-element.elementor-element-a068880:hover::after {
  bottom: -200px; 
  right: -150px;
}

/* 2. Style du grand Titre (Au-dessus de l'animation) */
.elementor-4248 .elementor-element.elementor-element-a068880 .elementor-heading-title {
  color: #FFFFFF !important; 
  font-family: 'Outfit', sans-serif;
  font-size: clamp(36px, 5vw, 56px) !important;
  font-weight: 800 !important;
  margin-bottom: 24px !important;
  position: relative;
  z-index: 2; /* CRUCIAL : Garde le texte au-dessus des cercles */
}

/* 3. Style du Texte descriptif */
.elementor-4248 .elementor-element.elementor-element-a068880 .elementor-widget-text-editor {
  color: #FFFFFF !important;
  font-family: 'Inter', sans-serif;
  font-size: 20px !important;
  line-height: 1.6;
  max-width: 650px;
  margin: 0 auto;
  opacity: 0.95;
  position: relative;
  z-index: 2; /* CRUCIAL : Garde le texte au-dessus des cercles */
}

.elementor-4248 .elementor-element.elementor-element-a068880 .elementor-widget-text-editor p {
  margin-bottom: 40px !important; 
}

/* 4. Le Bouton "Faire un don" (Blanc par défaut pour mieux contraster) */
.elementor-4248 .elementor-element.elementor-element-a068880 .elementor-button {
  background-color: #FFFFFF !important; /* Bouton Blanc */
  color: #1665C0 !important; /* Texte Bleu */
  font-family: 'Outfit', sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  padding: 20px 40px !important;
  border-radius: 50px !important; 
  border: 2px solid #FFFFFF !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2; /* Reste par dessus l'animation */
}

/* Le bouton s'inverse au survol de la souris */
.elementor-4248 .elementor-element.elementor-element-a068880 .elementor-button:hover {
  background-color: #F27A24 !important; 
  color: #FFFFFF !important; 
  border-color: #F27A24 !important;
  transform: translateY(-5px) !important; 
}

/* --- ADAPTATION MOBILE --- */
@media (max-width: 767px) {
  .elementor-4248 .elementor-element.elementor-element-a068880 {
    padding: 60px 20px !important;
    box-shadow: 8px 8px 0px 0px #F27A24; /* Ombre plus petite sur téléphone */
  }
}/* End custom CSS */