.elementor-kit-5{--e-global-color-primary:#FFFFFF;--e-global-color-secondary:#E2F3F6;--e-global-color-text:#000000;--e-global-color-accent:#3BA2B7;--e-global-typography-primary-font-family:"Lato";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Overpass";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Lato";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Lato";--e-global-typography-accent-font-size:24px;--e-global-typography-accent-font-weight:700;--e-global-typography-f4c4e10-font-family:"Overpass";--e-global-typography-f4c4e10-font-size:4rem;--e-global-typography-11d0c6a-font-family:"Overpass";--e-global-typography-11d0c6a-font-size:3rem;--e-global-typography-96e551d-font-family:"Overpass";--e-global-typography-96e551d-font-size:2rem;--e-global-typography-5864a0e-font-family:"Lato";--e-global-typography-5864a0e-font-size:1rem;--e-global-typography-43c651e-font-family:"Overpass";--e-global-typography-43c651e-font-weight:600;}.elementor-kit-5 button,.elementor-kit-5 input[type="button"],.elementor-kit-5 input[type="submit"],.elementor-kit-5 .elementor-button{background-color:var( --e-global-color-accent );font-family:"Overpass", Sans-serif;font-size:20px;color:#FFFFFF;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-kit-5 a{color:#000000;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-kit-5{--e-global-typography-11d0c6a-font-size:3rem;--e-global-typography-96e551d-font-size:2rem;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-5{--e-global-typography-f4c4e10-font-size:2.5rem;--e-global-typography-f4c4e10-line-height:1.7em;--e-global-typography-11d0c6a-font-size:2rem;--e-global-typography-96e551d-font-size:1.75rem;--e-global-typography-43c651e-font-size:18px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* 1. La carte : un cadre flex avec une hauteur fixe */
.card-reveal {
  display: flex;
  flex-direction: column;
  justify-content: center; /* Centre verticalement le contenu au repos */
  
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  background: #fff;
  padding: 24px;
  
  height: 240px; /* <-- AJUSTE CETTE VALEUR ! */
  
  transition: box-shadow .3s ease, transform .3s ease;
}

.card-reveal:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 35px rgba(0,0,0,0.12);
}

/* 2. Le header : centré par Flex, mais prêt à être transformé */
.card-reveal__header {
  text-align: center;
  /* LA CLÉ : La transition se fait sur TRANSFORM, pas sur la mise en page */
  transition: transform .4s cubic-bezier(0.25, 0.8, 0.25, 1);
  will-change: transform;
}

/* 3. Le texte : caché et prêt à apparaître */
.card-reveal__text {
  /* On le met en position absolue pour ne pas perturber le flux du header */
  position: absolute;
  bottom: 24px;
  left: 24px;
  right: 24px;
 
  
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  
  transition: opacity .4s ease, transform .4s cubic-bezier(0.25, 0.8, 0.25, 1);
}


/* 4. L'ANIMATION FLUIDE AU SURVOL (`:hover`) */

.card-reveal:hover .card-reveal__header {
  /* On déplace le header vers le haut de -70px (à ajuster) depuis sa position centrée */
  transform: translateY(-40px); /* <-- AJUSTE CETTE VALEUR DE DÉPLACEMENT */
}

.card-reveal:hover .card-reveal__text {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}


/* 5. Nettoyer les marges d'Elementor */
.card-reveal .elementor-widget-heading,
.card-reveal .elementor-widget-text-editor {
  margin: 0;
}

/* ======================================================================== */
/*  RESPONSIVE - TABLETTE & MOBILE (< 1024px)                             */
/* ======================================================================== */

@media (max-width: 1024px) {

  /* 1. On ajuste la carte pour qu'elle s'adapte au contenu */
  .card-reveal {
    /* La hauteur devient automatique pour contenir tout le texte */
    height: auto; 
    /* On peut réduire le padding sur petit écran */
    padding: 20px;
  }

  /* On désactive l'effet de soulèvement au survol qui ne sert à rien sur mobile */
  .card-reveal:hover {
    transform: none;
    box-shadow: 0 14px 35px rgba(0,0,0,0.12); /* On peut garder l'ombre ou l'enlever */
  }

  /* 2. On réinitialise la position du header */
  .card-reveal__header {
    /* On le remet dans le flux normal du document */
    position: static; 
    
    /* On annule la transformation qui le centrait */
    transform: none; 
    
    /* On annule la transition qui n'est plus nécessaire */
    transition: none;
    
    /* On ajoute un petit espace en dessous */
    margin-bottom: 16px; 
  }

  /* 3. On réinitialise la position du texte et on l'affiche */
  .card-reveal__text {
    /* On le remet aussi dans le flux normal */
    position: static;
    
    /* On annule sa transformation */
    transform: none;
    
    /* ON L'AFFICHE EN PERMANENCE */
    opacity: 1; 
    
    /* Il redevient utilisable */
    pointer-events: auto; 
    
    /* On annule sa transition */
    transition: none;
    
    /* On enlève la marge du haut qui n'est plus pertinente */
    margin-top: 0;
  }

  /* 4. On s'assure que les animations au survol sont bien désactivées */
  .card-reveal:hover .card-reveal__header,
  .card-reveal:hover .card-reveal__text {
    transform: none;
    top: auto; /* On réinitialise tout pour être sûr */
  }

}

.elementor-portfolio-item a {
  pointer-events: none;
  cursor: default;
}/* End custom CSS */